@charset "UTF-8";

body {
    background-color: #F7F8FA;
    color: #1C263B;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-optical-sizing: auto;
    font-style: normal;
}

:root {
    --fs-h1: 16px;
    --fs-h2: 20px;
    --fs-body: 15px;
    --fs-note: 13px;
}

@media (min-width: 768px) {
    body {
        line-height: 1.65;
        letter-spacing: 0.02em;
    }

    :root {
        --fs-h1: 24px;
        --fs-h2: 28px;
        --fs-body: 16px;
    }
}

h1 {
    font-size: var(--fs-h1);
    text-align: center;
    color: #867664;
}

h2 {
    font-size: var(--fs-h2);
    text-align: center;
    font-weight: 700;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.line-title {
  position: relative;
  text-align: center;
  font-weight: 600;
  padding: 20px 0;
}

.line-title::before,
.line-title::after {
  content: "";
  display: block;
  width: 40px;          /* 線の長さ */
  height: 2px;          /* 線の太さ */
  background: #1E2D3D;  /* 線の色 */
  margin: 0 auto;
}

.line-title::before {
  margin-bottom: 12px;
}

.line-title::after {
  margin-top: 12px;
}

.line-title span {
  font-size: 0.9em;
  font-weight: normal;
}

.marker {
  background: linear-gradient(transparent 60%, #FFE066 60%);
}

.font-big {
    font-size: 20px;
    font-weight: 700;
}

.font-green {
    color: #2E8B8B;

}

p {
    font-size: var(--fs-body);
}

.small {
    font-size: var(--fs-small);
}
/* トップビュー設定==================================================================== */
/* 画像の上に重なるヘッダー部分 */
.fv-header {
    position: absolute;
    top: 16px;   /* 上からの位置 */
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
    width: 90%;
    max-width: 1200px;
    
    display: flex;       /* 横並び */
    align-items: center; /* 上下中央揃え */
    gap: 20px;           /* ロゴと文字の間隔 */
    
    background: #f0f5f5; /* 文字を見やすくするため少し白背景（不要なら消せます） */
    padding: 15px 25px;
    border-radius: 50px; /* 角丸で柔らかい印象に */
}

/* ロゴのサイズ */
.header-logo img {
    height: 40px; 
    width: auto;
    display: block;
}

/* タイトル(h1)のスタイル */
.fv-header h1 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
    white-space: nowrap; /* 改行させない */
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .fv-header {
        top: 10px;
        padding: 10px 15px;
        gap: 10px;
        width: 95%;
    }
    .header-logo img {
        height: 25px;
    }
    .fv-header h1 {
        font-size: 0.9rem;
    }
}
.fv {
    height: 135vw;
    background-image: url("../images/top-mobile.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* TOPCTAここから====================================================================== */
.top-cta {
    padding: 50px 0;
}

.top-cta_title {
    text-align: center;
    font-size: 18px;
    line-height: 1.3;

}

.top-cta-lead {
    text-align: center;
    font-size: 18px;
    line-height: 1.3;
}

.top-ctapoints {
    border: solid #C8BD9B 5px;
    padding: 10px;
    border-radius: 30px;
    margin: 20px auto;
    width: 300px;
    text-align: center;
}

.top-cta_btn {
    background: linear-gradient(#E5C970, #D4AF37);
    padding: 5px 20px;
    font-size: 24px;
    border-radius: 30px;
    display: block;
    width: 320px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.top-cta_btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    transition: 0s;
}
.top-cta_btn:hover {
    transform: scale(1.05); /* 少し大きく */
    filter: brightness(1.1); /* 少し明るく */
    transition: 0.3s;
}
/* アニメーション：ふわふわ浮かせる設定 */
@keyframes fuwafuwa {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); } /* 上に8px動く */
  100% { transform: translateY(0); }
}

/* アニメーション：キラッと光らせる設定 */
@keyframes shiny {
  0%   { left: -100%; }
  20%  { left: 130%; } /* 素早く通り過ぎる */
  100% { left: 130%; } /* 残りの時間は光らせない（間隔を空ける） */
}

.top-cta_btn {
  /* 既存のスタイル */
  background: linear-gradient(#E5C970, #D4AF37);
  padding: 10px 20px; /* 文字が詰まらないよう少し調整 */
  font-size: 24px;
  border-radius: 30px;
  display: flex; /* 中央寄せを確実に */
  align-items: center;
  justify-content: center;
  width: 320px;
  margin: 0 auto;
  color: #333; /* 文字色 */
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  
  /* アニメーション適用 */
  position: relative;
  overflow: hidden; /* 光がボタンの外に出ないように */
  animation: fuwafuwa 3s ease-in-out infinite; /* 3秒周期でふわふわ */
}

/* 光の要素（疑似要素） */
.top-cta_btn::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 50px;
  height: 300%;
  background: rgba(255, 255, 255, 0.5);
  transform: rotate(35deg);
  animation: shiny 4s infinite; /* 4秒周期でキラッ */
}

/* ホバー時の挙動 */
.top-cta_btn:hover {
  transform: scale(1.05); /* 少し大きく */
  filter: brightness(1.1); /* 少し明るく */
  transition: 0.3s;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}



/* TOPCTAここまで====================================================================== */
/* こんなお悩みありませんかここから====================================================== */
.trouble {
    padding: 50px 0;
    background-color: #D9E9E9;
}

.trouble-list {
    border: solid #2E8B8B;
    margin: 14px;
    border-radius: 20px;
    padding: 20px 0;
    background-color: #FBFFFF;
    max-width: 600px;
      list-style: none;

}

.trouble-image {
  width: 100%;
  max-width: 180px; /* イラストならこのくらい */
  margin: 20px auto 16px;
  display: block;
}

.trouble-list li {
  position: relative;
  padding-left: 42px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.trouble-list li::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 28px;
  height: 28px;
  background-image: url("../images/check.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* こんなお悩みありませんかここまで====================================================== */
/* そのお悩みAGAかもしれませんここから=================================================== */
.urgency {
    padding: 50px 0;
    text-align: center;
}

.urgency-title {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* ← 文字との距離、ここが超重要 */
}

.urgency-title::before {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url("../images/caution.png");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}


.urgency-text {
    font-size: 18px;
    padding-bottom: 20px;
    font-weight: 700;
}

/* そのお悩みAGAかもしれませんここまで=================================================== */
/* AGAは誰にでも同じではありませんここから=============================================== */
.individual {
    padding: 50px 0;
}

.individual-points {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
}

.individual-points>li {
    background-color: #D9E9E9;
    border: solid #2E8B8B;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 20px;
}

.individual-text {
    text-align: center;
}

.individual-note {
    text-align: center;
    padding-bottom: 20px;
}

/* AGAは誰にでも同じではありませんここまで=================================================== */
/* AGAとは？ここから======================================================================= */
.about-aga {
    padding: 50px 0;
}

.about-text {
    margin: 20px;
}

.haircycle {
    width: 80%;
    margin: 20px 0;
}

.haircycle-wrap {
    text-align: center;
}

.beforeafter {
    width: 90%;
}

.beforeafter-wrap {
    text-align: center;
    padding: 20px 0;
}

.about-aga-points {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  max-width: 600px;
}

.about-aga-points li {
  position: relative;
  padding: 16px 16px 16px 56px;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  line-height: 1.6;
  font-weight: 500;
}

/* 番号 */
.about-aga-points li::before {
  content: attr(data-num);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2f7f73;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* AGAとは？ここまで======================================================================== */
/* 進行度タイプここから===================================================================== */
.progress-type{
    background-color: #D9E9E9;
    padding: 50px 0;
}
.progress-lead {
    text-align: center;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.progress-stage {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.progress-stageList {
    background-color: #F7F8FA;
    border: solid, #2E8B8B;
    border-radius: 3px;
    padding: 15px 20px;
    text-align: center;
}

.eary-title {
    display: inline-flex;
    font-size: 20px;
    font-weight: 700;
}

.eary-title::before {
    content: "";
    background-image: url(../images/earytype.webp);
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin-right: 10px;
}

.advanced-title {
    display: inline-flex;
    font-size: 20px;
    font-weight: 700;
}

.advanced-title::before {
    content: "";
    background-image: url(../images/advanced.webp);
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin-right: 10px;
}

.type {
    font-size: 20px;
    font-weight: 700;
}

.type-img {
    width: 80px;
    height: 80px;
    margin-right: 15px;
}

.type-Wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid, #2E8B8B;
    background-color: #F7F8FA;
    padding: 20px;
    margin: 0 20px 20px;
    border-radius: 3px;
}

.progress-type-note {
    text-align: center;
}

/* 進行度タイプここまで===================================================================== */
/* 最短ルート医師の診断ここから============================================================= */
.doctor-diagnosis {
    padding: 50px 0;
}

.doctor-diagnosis>p {
    margin: 0 20px;
}

.cause {
    width: 80%;
    height: auto;
}

.cause-wrap {
    text-align: center;
    padding: 20px 0;
}

/* 最短ルート医師の診断ここまで============================================================= */
/* 当院が選ばれる理由ここから============================================================== */
.reason {
    background-color: rgb(243, 238, 232);
    padding: 50px 0;
}

.reason-item {
    padding-bottom: 40px;
}

.reason-number {
    font-size: 38px;
    font-weight: 400;
    color: #D4AF37;
    text-align: center;
    font-family: "Noto Serif JP", serif;

}

.reason-heading {
    text-align: center;
    font-size: 20px;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    padding-bottom: 12px;
}

.reason-text {
    margin: 0 20px;
}

.reason-heading::after {
    content: "";
    display: block;
    width: 360px;
    height: 2px;
    background-color: #2E8B8B;
    margin: 10px auto 0;
}

.reason-img {
    width: 320px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.reason-imgWrap {
    text-align: center;
}

/* 当院が選ばれる理由ここまで================================================================= */
/* 治療の目的ここから======================================================================== */
.plan {
    padding: 50px 0;
}

.plan-top {
    text-align: center;
    padding-bottom: 20px;
}

.plan-text::after {
    content: "";
    display: block;
    background-image: url(../images/arrow.webp);
    background-repeat: no-repeat;
    background-size: contain;
    width: 90%;
    height: 50px;
    margin: 20px auto;
}

.plan-card {
    border: solid, #2E8B8B, 5px;
    margin: 20px;
    border-radius: 5px;
    padding: 10px;
}

.plan-target {
    padding-left: 60px;
}

.plan-price {
    text-align: center;
}

.plan-number {
    font-size: 38px;
    font-weight: 700;
}

.plan-note {
    margin: 20px;
}
.plan-title{
        font-family: "Noto Sans JP", sans-serif;

}
.plan-target-top::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("../images/target-top.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 8px;
}
.plan-target-bottom::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("../images/target-bottom.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 8px;
}
/* 治療の目的ここまで======================================================================== */
/* 当院の治療薬ここから=================================================================== */
.medicine{
    padding: 50px 0;
    background-color: #D9E9E9;
}
.medicine-item {
    border: 2px solid #2E8B8B;
    background-color: #F7F8FA;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 24px;
    margin: 20px;
}

.medicine-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
}

.tab::before {
    content: "";
    background-image: url(../images/tablet.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
}

.cap::before {
    content: "";
    background-image: url(../images/capsule.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
}

.injection::before {
    content: "";
    background-image: url(../images/injection.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
}

.is-summary {
    margin-top: 8px;
    font-weight: 500;
}

.medicine-detail {
    display: none;
    margin-top: 16px;
}

.medicine-item.active .medicine-detail {
    display: block;
}

.toggle {
    font-size: 22px;
    color: #D4AF37;
    transition: transform .3s;
}

.medicine-item.active .toggle {
    transform: rotate(45deg);
}

.medicine-detail dd {
  margin-bottom: 12px;
  line-height: 1.7;
}

.medicine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 30px 10px;
}
.medicine-item {
    border: 1px solid #5d8a8a;
    border-radius: 8px;
    background: #fff;
    overflow: hidden; /* 角丸からはみ出さないように */
}
/* 当院の治療薬ここまで=================================================================== */
/* 料金表ここから===================================================================== */
.price {
    padding: 50px 0;
}
.price-title{
    padding-bottom: 60px;
}
.price-table {
    width: 90%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #e1c24a;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    font-size: 15px;
    margin: 0 auto;
}

.price-table thead th {
    background: #e1c24a;
    color: #333;
    font-weight: bold;
    text-align: center;
    padding: 14px 10px;
}

.price-table tbody th,
.price-table tbody td {
    padding: 14px 12px;
    border-top: 1px solid #e1c24a;
    text-align: center;
    vertical-align: middle;
}

.price-table tbody th {
    font-weight: 500;
    background: #fffdf5;
}

.price-table td small {
    font-size: 13px;
    color: #666;
}

@media (max-width: 768px) {
    .price-table {
        font-size: 14px;
    }
}

/* 料金表ここまで===================================================================== */
/* 施術の流れここから================================================================= */
.flow {
    padding: 20px;
    background-color: #d9e9e9;
}
.flow-title{
    padding-bottom: 40px;
}
.flow_wrap {
    background-color: #f8f8f8;
    padding: 20px;
    margin: 20px auto;
    max-width: 500px;
    border: solid, #2E8B8B;
}

.flow_img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 300px;
    height: 200px;
    border-radius: 5px;

}

.num {
    font-size: 38px;
    color: #D4AF37;
    margin: 20px;
}

.flow_subtitle {
    margin-left: 20px;
    margin-bottom: 10px;
    font-size: 20px;
}

.flowSwiper {
    padding: 20px 10px 40px;
}

.swiper-slide {
    height: auto;
}

.flow_wrap {
    height: 100%;
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 16px;
}

.flowSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #D6C7B8;
}

.flowSwiper .swiper-pagination-bullet-active {
    width: 12px;
    height: 12px;
    background-color: #2E8B8B;
}

.flowSwiper .flow_wrap {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform: scale(0.92);
    opacity: 0.85;
}

/* 中央スライド */
.flowSwiper .swiper-slide-active .flow_wrap {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 14px 36px rgba(63, 92, 85, 0.25);
}

.flowSwiper .swiper-slide-prev .flow_wrap,
.flowSwiper .swiper-slide-next .flow_wrap {
    filter: grayscale(10%);
}

/* 施術の流れここまで================================================================== */
/* よくある質問ここから================================================================ */
.faq {
    padding: 50px 0;
    background-color: #F0E8DF;
}
.faq-title{
    padding-bottom: 40px;
}
.faq-item {
    background: #fff;
    border-radius: 14px;
    margin: 20px;
    margin-bottom: 16px;
    box-shadow: 0 0 0 1px #eee;
    overflow: hidden;
}

/* summaryのデフォルト三角を消す */
.faq-item summary {
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* 質問行 */
.faq-question {
    position: relative;
    padding: 20px 56px 20px 20px;
    font-weight: 500;
    cursor: pointer;
    color: #333;
}

/* Qの色 */
.faq-question::before {
    content: "Q.";
    margin-right: 8px;
    color: #b58b2a;
    font-weight: bold;
}

/* ＋アイコン */
.faq-question::after {
    content: "＋";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #b58b2a;
    transition: transform 0.3s;
}

/* 開いたとき − にする */
.faq-item[open] .faq-question::after {
    content: "−";
}

/* 回答 */
.faq-answer {
    padding: 16px 20px 20px;
    border-top: 1px solid #eee;
    line-height: 1.7;
    color: #555;
}

/* Aの装飾 */
.faq-answer::before {
    content: "A.";
    font-weight: bold;
    color: #b58b2a;
    margin-right: 6px;
}

/* よくある質問ここまで============================================================================== */
/* 下部固定CTAここから============================================================================== */
.cta-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 15px 12px calc(15px + env(safe-area-inset-bottom)); /* iPhoneのノッチ考慮 */
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
            z-index: 9999;
            box-sizing: border-box;
        }

        /* 共通ボタン設定 */
        .cta-btn {
            width: 100%;
            max-width: 400px;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 12px 22px;
            border-radius: 999px;
            font-weight: 600;
            text-decoration: none;
            line-height: 1.2;
            transition: opacity .2s, transform .2s;
            box-sizing: border-box;
            cursor: pointer;
            border: none;
        }

        /* 電話ボタン */
        .cta-btn.phone {
            background: #2f7f73;
            color: #fff;
        }

        /* WEBボタン */
        .cta-btn.web {
            background: #f2b400;
            color: #333;
        }

        .cta-btn span {
            font-size: 13px;
            font-weight: 500;
            margin-top: 2px;
        }

        .cta-btn:hover {
            opacity: 0.85;
            transform: translateY(-1px);
        }

        /* =============================================
           浮かび上がる電話メニュー
        ============================================= */
        .tel_menu {
            position: fixed;
            bottom: 160px; /* ボタンの高さに合わせて調整 */
            left: 50%;
            transform: translateX(-50%) scaleY(0);
            width: 90%;
            max-width: 380px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.2);
            z-index: 10000;
            transform-origin: bottom;
            transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            opacity: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* 表示された時 */
        .tel_menu.show {
            transform: translateX(-50%) scaleY(1);
            opacity: 1;
        }

        .tel_menu a {
            padding: 18px;
            text-align: center;
            text-decoration: none;
            color: #333;
            font-weight: 600;
            border-bottom: 1px solid #eee;
            font-size: 16px;
        }

        .tel_menu a:last-child {
            border-bottom: none;
        }

        .tel_menu a:active {
            background-color: #f8f8f8;
        }

        /* 背景を暗くする */
        .cta-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9998;
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .cta-overlay.show {
            display: block;
            opacity: 1;
        }

.cta-btn.web::before {
    content: "";
    display: inline-block;
    width: 20px;               /* アイコンの幅 */
    height: 20px;              /* アイコンの高さ */
    margin-right: 8px;         /* テキストとの隙間 */
    background-image: url("../images/callender.png"); /* 画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* ボタン内のテキスト配置を微調整（横並びを綺麗にするため） */
.cta-btn.web {
    flex-direction: row !important; /* アイコンと文字を横に並べる */
    gap: 0; 
}


/* 医師の紹介ここから==================================================================================================== */
.doctor {
    padding: 50px 20px;
}

.doctor_wrap {
    display: block;
    margin: 0 auto;
    max-width: 700px;
    display: block;
    padding: 30px;
    backdrop-filter: blur(2px);
}

hr {
    border: none;
    /* デフォルトの枠線を消す */
    border-top: 2px solid #ccc;
    /* 線の太さと色を指定 */
    border-image: linear-gradient(90deg, rgba(229, 185, 114, 0.7), rgba(179, 131, 71, 0.7)) 1;
    margin: 50px auto;
    text-align: center;
    margin: 50px 0;
}

.doctor_top {
    margin-bottom: 20px;
}

.rizichouimg {
    display: block;
    margin: 0 auto;
    padding: 20px 0;
}

.doctor_inner {
    max-width: 700px;
    margin: 0 auto;
}

.doctor_inner>p {
    padding: 5px 0 10px 0;
}

.career {
    margin-bottom: 10px;
    display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
}
.career::before,
.career::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #333;
}

.career_list {
    margin-bottom: 10px;
}

.doctor_title {
    font-family: sans-serif;
    color: #3A2F28;
}

/* 医師の紹介ここまで================================================================================================================ */
/* footer全体設定ここから================================================================================================= */
.footer-section {
    background-color: #f4f0e9;
    padding: 30px 0;
}


.footer-article {
    align-items: center;
    background: #fff;
    border-radius: 10px 10px 10px 10px;
    max-width: 400px;
    margin: 20px 10px;
    overflow: hidden;
}

.footer-title {
    background-color: #B8B0A8;
    padding: 12px 16px;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    text-align: center;
}

.footer-subtitle {
    text-align: center;
    font-size: 20px;
    color: #1E2D3D;
    border-radius: 20px 20px 0 0;
}

/* アクセスここからaccess================================================================================================== */
.accessWrap {
    font-weight: 500;
    width: 90%;
    display: inline-block;
    margin: 20px auto;
    text-align: center;
}

.addressInner {
    max-width: 500px;
    margin: 0 auto;
}

.addressName {
    font-size: 18px;
    text-align: left;
    margin-left: 2rem;
}

address {
    font-size: 14px;
    text-align: left;
    margin-left: 2rem;
}

.accessButton {
    display: inline-block;
    background-color: #867664;
    padding: 7px 30px;
    margin: 20px;
    color: #fff;
}

.accessButton:hover {
    opacity: 0.7;
}

.accessText {
    margin-top: 10px;
    margin-bottom: 5px;
}

/* アクセスここまでaccess================================================================================================== */

/* 診療時間表ここから================================================================================================ */
table {
    font-size: 13px;
    text-align: center;
    color: #323232;
    margin: 0 auto;
}

.timetableInner {
    max-width: 500px;
    margin: 0 auto;
}

.timetableWrap {
    margin: 30px auto;
    padding: 10px 0 20px 0;
    margin-bottom: 20px;
}

.tableLeft {
    background-color: #baaea0;
    padding: 10px;
    text-align: center;
}

.tableTop {
    background-color: #dcd2c7;
    padding: 10px;
}

td {
    padding: 10px;
    border: solid 1px #b4a593;
}

.schedule_table th,
.schedule_table td {
    border: 1px solid #B8B0A8;
}

.timetableWrap>p {
    text-align: center;
}

.timetableText {
    margin-left: 10px;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.timetableInner {
    padding: 0 10px;
}

.timetableInner table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background-color: #fff;
}

.timetableInner th,
.timetableInner td {
    border: 1px solid #B8B0A8;
    padding: 10px 8px;
    font-size: 14px;
}

/* 曜日（上段） */
.timetableInner .tableTop {
    background-color: #E8DED2;
    font-weight: 600;
    text-align: center;
}

/* 診療時間（左列） */
.timetableInner .tableLeft {
    background-color: #D6CABB;
    font-weight: 600;
    white-space: nowrap;
}

/* 診療時間表ここまで================================================================================================ */

/* snsアイコン設定ここから====================================================================================== */
.snsIcon {
    background-color: #f4f0e9;
    text-align: center;
}

.sns {
    transition: filter 0.3s ease, transform 0.3s ease;
    margin-bottom: 160px;
}

.sns:hover {
    opacity: 0.7;
    color: #867664;
}

/* snsアイコン設定ここまで====================================================================================== */
/* SP */
@media (min-width: 768px) {
    .font-big {
    font-size: 28px;
    font-weight: 700;
}
    .top-cta{
        padding: 50px 0;
    }
    .trouble{
                padding: 100px 0;
    }
    .urgency{
                padding: 100px 0;
    }
    .about-aga{
                padding: 100px 0;
    }
    .progress-type{
        padding: 100px 0;
    }
    .reason{
        padding: 100px 0;
    }
    .plan{
                padding: 100px 0;
    }
    .medicine{
                padding: 100px 0;
    }
    .price{
                padding: 100px 0;
    }
    .flow{
                padding: 100px 0;
    }
    .faq{
                padding: 100px 0;
    }
    .footer-section{
                padding: 100px 0;

    }
    .cta-buttons {
        flex-direction: column;
    }
    .cta-btn {
        width: 100%;
    }
    .trouble-list{
        margin: 30px auto;
        padding: 20px;
    }
    .trouble-list li {
 font-size: 20px;
}

    .haircycle{
        width: 600px;
    }
    .beforeafter{
        width: 400px;
    }
    .type-Wrap{
        max-width: 560px;
        margin: 20px auto;
    }
    .cause{
        max-width:560px;
        margin: 0 auto;
    }
    .doctor-diagnosis > p {
        max-width: 560px;
        margin: 20px auto;
    }
    .reason-wrap{
        display: flex;
        max-width: 700px;
        margin: 20px auto;
    }
    .reason-item{
        padding: 30px;
    }
    .reason-number{
        font-size: 50px;
    }
    .plan-text{
        position: relative;
  text-align: center;
    }
    .plan-text::after {
  content: "";
  display: block;
  background-image: url(../images/arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: 20%;
  margin: 30px auto;
}
.reason-heading::after {
    width: 700px;
    margin: 10px auto 0;
}
.br{
    display: none;
}
.plancard-wrap{
    display: flex;
}
.plan-cards{
    display: flex;
    max-width: 800px;
    margin: 0 auto;
}
    .plan-card{
        max-width: 380px;
        margin: 20px auto;
    }
    .plan-note{
        max-width: 700px;
        margin: 0 auto;
    }
    .medicine-item{
        max-width: 500px;
        margin: 20px auto;
    }
    .price-table{
        max-width: 700px;
        margin: 0 auto;
    }
    .faq-item{
        max-width: 700px;
        margin: 20px auto;
    }
    .about-text{
        max-width: 600px;
        margin: 50px auto;
    }
    .doctor{
        max-width: 700px;
        margin: 0 auto;
    }
    .footer-article{
        max-width: 600px;
        margin: 70px auto;
    }
   .cta-buttons {
        flex-direction: row;
        gap: 20px;           /* ボタン同士の横の隙間 */
        padding: 20px;       /* PCでは少し余白を広めに */
        justify-content: center
    }
    .cta-btn{
        min-height: 80px;
    }
    
}

@media (min-width: 1200px) {
    .footerWrap {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 800px;
    }

    .footer-article {
        max-width: 1300px;
        text-align: center;
        width: 50%;
        margin: 40px auto;
    }
.timetableInner {
        max-width: 700px; /* 600〜800で好み */
    }
    .timetableInner th {
    white-space: nowrap;
}
    .fv {
        height: 40vw;
        background-image: url("../images/top-pc.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }
  .medicine-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 50px auto;
  }
  
  .medicine-item {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

}

/* 薬のデザイン調整 */
/* ===== 共通 ===== */
.medicine-detail {
  display: none;
}

.medicine-item.active .medicine-detail {
  display: block;
}

/* ===== スマホ：縦並び ===== */
@media (max-width: 767px) {
  .medicine-list {
    display: block;
  }
}

/* ===== PC：2列（右が開かない設定） ===== */
@media (min-width: 768px) {
  .medicine-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-items: start;   /* ← 行を揃えない */
    min-height: 400px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 幅固定 */
    gap: 15px;
    max-width: 1000px;
    margin: 50px auto;
    align-items: start;
    padding: 0 24px;
  }

  .medicine-item {
    align-self: start;    /* ← 各カードを独立させる */
    transition: all .3s ease;
    margin: 0;              /* ← これが超重要 */
  width: 100%;
  width: 100%;
    min-height: 160px;     /* 高さも統一 */
    box-sizing: border-box;
  }
  .medicine-item.active {
    min-height: unset;        /* 開いたら高さ制限解除 */
  }
}
/* アニメーションここから */
.animation {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

.animation.show {
    opacity: 1;
    transform: translateY(0);
}

/* トップビュー用 */
.fade-up {
    opacity: 0;
    transform: translateY(80px);
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 1.5s ease;
}


.timing02 {
    transition-delay: .2s;
}

.timing03 {
    transition-delay: .4s;
}

.timing04 {
    transition-delay: .6s;
}

.timing05 {
    transition-delay: .8s;
}