/* PRO CLINIC ASHIYA - 芦屋院トップの装い。
   キャンペーンページと同じ紙・書体・紺と金に揃えています。 */

:root{
  --paper:#faf8f4; --ink:#1f1c17; --sub:#7b7266; --faint:#a39a8c;
  --line:#e4ded2; --hair:#efeae1; --navy:#16233f; --gold:#a2834c;
  --serif:"Noto Serif JP",'Hiragino Mincho ProN','Yu Mincho',serif;
  --latin:"Cormorant Garamond",'Times New Roman',serif;
  --sans:"Jost",'Helvetica Neue',sans-serif;
}

/* ---- 基本 ---- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:15.5px;
  font-weight:400;
  line-height:2.05;
  letter-spacing:.03em;
}
body,
body :is(p,small,li,dt,dd,label,summary,input,select,textarea){font-weight:400!important}
body :is(h1,h2,h3,h4){font-family:var(--serif);font-weight:300}
body .eyebrow{font-weight:400!important}
body .campaign-price{font-weight:400!important}
body :is(.small,.en,.cases-note,.cp-note,.contact-note){color:var(--sub)!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
::selection{background:#e8dec9}

/* ---- ヘッダー ---- */
header{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.header-inner{min-height:78px}
.brand{font-family:var(--latin);font-size:22px;font-weight:300!important;letter-spacing:.22em}
.brand>span{font-family:var(--serif);font-size:9.5px;letter-spacing:.26em;color:var(--sub);margin-top:8px}
.brand i{border-left:1px solid var(--line);color:var(--gold)}
header nav a{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.1em;
  border:0!important;padding:8px 18px;color:var(--ink)
}
header nav a:hover{color:var(--gold)}
.header-actions>a{
  border:1px solid var(--navy);border-radius:0;color:var(--navy);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;min-height:31px
}
.header-actions>a:hover{background:var(--navy);color:var(--paper)}
.menu-toggle{color:var(--ink)}
header #mobile-menu:not([hidden]){background:var(--paper);border-top:1px solid var(--line)}
header #mobile-menu a{border-bottom:1px solid var(--hair);color:var(--ink)}

/* ---- パンくず ---- */
.breadcrumbs{color:var(--faint);font-family:var(--sans);font-size:10px;letter-spacing:.1em}
.breadcrumbs a{color:var(--sub)}

/* ---- メインビジュアル ---- */
.main-visual{background:#20231f}
.clinic-visual h1{
  font-family:var(--latin);font-weight:300;
  font-size:clamp(34px,4.6vw,58px);letter-spacing:.16em;line-height:1.3;
  text-shadow:0 2px 26px rgba(0,0,0,.35)
}
.clinic-visual h1>span{
  font-family:var(--serif);font-weight:300;
  font-size:.46em;letter-spacing:.34em;margin-top:18px
}
.hero-location{font-family:var(--serif);font-size:13px;letter-spacing:.2em}
.clinic-opening{
  font-family:var(--serif);font-size:12px;letter-spacing:.18em;
  border:1px solid rgba(226,205,163,.6);color:#e9d8b4;
  display:inline-block;padding:7px 18px;background:transparent
}
.clinic-caption span{font-family:var(--serif);font-size:11.5px;letter-spacing:.14em}

/* ---- 導入 ---- */
.clinic-introduction>p{font-size:14.5px;color:var(--sub);line-height:2.4;letter-spacing:.05em}
.clinic-introduction nav{border-block:1px solid var(--line)}
.clinic-introduction nav>a{
  border-right:1px solid var(--line);font-family:var(--serif);
  font-size:12.5px;letter-spacing:.1em;font-weight:400!important
}
.clinic-introduction nav>a>span{color:var(--gold)}
.clinic-introduction nav>a:hover{color:var(--gold)}
@media(max-width:700px){
  .clinic-introduction nav>a:nth-child(-n+4){border-bottom:1px solid var(--line)}
}

/* ---- セクション見出し ---- */
.detail-source,.campaign-section,.recruit-section,.contact{border-top:1px solid var(--line)}
.detail-source{padding-block:70px}
.section-heading{margin-bottom:42px}
.section-heading .eyebrow,
.recruit-intro .eyebrow,
.contact .eyebrow{
  font-family:var(--latin)!important;font-weight:300!important;
  font-size:13px!important;letter-spacing:.34em!important;
  color:var(--gold)!important;margin-bottom:16px!important;line-height:1.6!important
}
.section-heading h2,
.recruit-intro h2,
.contact h2,
.detail-source h2{
  font-family:var(--serif)!important;font-weight:300!important;
  font-size:clamp(24px,2.7vw,33px)!important;letter-spacing:.09em;
  line-height:1.65;color:var(--ink)
}
.section-heading>p:last-child:not(.eyebrow){font-size:13.5px;color:var(--sub);letter-spacing:.04em}
.detail-source h3{font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:.06em}
.detail-source>details{border-top:1px solid var(--hair)}
.detail-source>details>p{color:var(--sub)}

/* ---- ご挨拶（紺の帯） ---- */
.message-band{background:var(--navy);color:#f2eee6}
.message-band :is(h2,h3,p,li,summary,span){color:#f2eee6}
.message-band .section-heading .eyebrow{color:#c6a970!important}
.message-band .small,
.message-band .detail-source>details>p{color:#cfc9bd!important}
.message-band details{border-color:#2e3c58}
.message-band .director-profile{border-top:1px solid #2e3c58}
.message-band .text-link{border-bottom-color:#c6a970;color:#f2eee6}
.director-copy h3{font-family:var(--serif)!important;font-weight:300!important;font-size:27px;letter-spacing:.08em}
.director-english{font-family:var(--latin);font-size:13px;letter-spacing:.2em;color:#c6a970!important}
.director-message{font-size:15.5px;line-height:2.3}

/* ---- 診療メニュー ---- */
.treatment-menu{border:1px solid var(--line);background:#fff}
.treatment-menu>summary{
  font-family:var(--serif);font-size:16.5px;letter-spacing:.07em;
  padding:21px 44px 21px 22px
}
.treatment-menu[open]{border-color:#d7cbb2;background:#f7f4ee}
.treatment-menu[open]>summary{font-size:16.5px;color:var(--navy)}
.treatment-menu-body{border-top:1px solid var(--hair)}
.treatment-menu-body p{font-size:13.8px;line-height:2.15;color:var(--sub)!important}
.treatment-menu summary:hover{background:#f7f4ee}

/* ---- 症例 ---- */
.case-card{border-color:var(--line)}
.case-head h3,.case-card h3{font-family:var(--serif);font-weight:400;letter-spacing:.06em}
.case-cat,.case-sub{color:var(--sub)!important}
.case-risk,.cases-note{color:var(--sub)!important;font-size:11.5px}

/* ---- 金額まわり ---- */
.now,.price-now,.amt,.val{font-family:var(--latin);letter-spacing:.02em}
.was,.price-was{color:var(--faint)!important}
.cp-cat .no,.no{font-family:var(--latin);color:var(--gold)!important;letter-spacing:.1em}
.en{font-family:var(--sans);font-size:9.5px;letter-spacing:.22em;color:var(--faint)!important}

/* ---- ボタン ---- */
.cta{
  background:var(--navy);border:1px solid var(--navy);color:var(--paper);
  border-radius:0;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  padding:17px 26px;min-width:216px
}
.cta:hover{background:#0f1a30;border-color:#0f1a30}
.cta.line{background:#fff;border:1px solid var(--line);color:var(--navy)}
.cta.line:hover{background:#f3efe7}
.text-link{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.05em;
  border-bottom:1px solid var(--gold);color:var(--navy);padding-bottom:4px
}
.text-link:hover{color:var(--gold)}
.menu-reserve{font-family:var(--serif);letter-spacing:.05em}

/* ---- 関連ページナビ ---- */
.relnav .t{font-family:var(--latin)!important;font-size:12px;letter-spacing:.3em;color:var(--gold)}
.relnav a{font-family:var(--serif)}
.relnav a b{font-family:var(--serif);font-weight:400}

/* ---- 採用・お問い合わせ ---- */
.recruit-section{padding-block:72px}
.recruit-intro h2{line-height:1.7}

/* ---- フッター ---- */
footer{background:var(--navy);color:#d7d1c5}
footer .brand{color:#f2eee6}
footer .brand>span{color:#b4ad9f}
footer .brand i{border-left-color:#33415e;color:#c6a970}
.footer-brand{border-bottom:1px solid #2e3c58}
.footer-brand>p{color:#b4ad9f}
.footer-columns h3{font-family:var(--serif);font-weight:400;color:#c6a970;letter-spacing:.14em;font-size:11.5px}
.footer-columns a,footer .footer-columns a{color:#c6c0b4!important;font-family:var(--serif)}
.footer-columns a:hover{color:#fff!important}
.footer-address p{color:#b4ad9f!important}
.footer-bottom{border-top:1px solid #2e3c58;color:#9a9385}
.back-top{font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:#c6a970!important}

/* ---- フローティング予約 ---- */
.pcfab .web{background:var(--navy);color:var(--paper)}
.pcfab a{font-family:var(--serif);letter-spacing:.06em}

/* ---- ライトボックス ---- */
#caseLB{background:rgba(22,25,20,.94)}

/* ---- 調整（2026-11-08） ---- */
/* ページ内ナビは6項目。3列で揃える */
.clinic-introduction nav{grid-template-columns:repeat(3,1fr)}
.clinic-introduction nav>a{border-right:1px solid var(--line);border-bottom:0}
.clinic-introduction nav>a:nth-child(3n){border-right:0}
.clinic-introduction nav>a:nth-child(-n+3){border-bottom:1px solid var(--line);padding-bottom:12px}
.clinic-introduction nav>a:nth-child(n+4){padding-top:12px}
@media(max-width:700px){
 .clinic-introduction nav{grid-template-columns:1fr 1fr}
 .clinic-introduction nav>a{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
 .clinic-introduction nav>a:nth-child(2n){border-right:0}
 .clinic-introduction nav>a:nth-child(n+5){border-bottom:0}
}

/* フローティングCTA：LINEの緑を落ち着かせる */
.pcfab a.line{background:#fff!important;color:var(--navy)!important}
.pcfab a.line .s{color:var(--sub)!important}
.pcfab a{font-family:var(--serif);font-weight:400!important;letter-spacing:.06em}
.pcfab a.web{background:var(--navy)!important}
@media(min-width:861px){
 .pcfab a{border:1px solid var(--navy)!important;box-shadow:0 8px 24px rgba(10,14,24,.14)}
 .pcfab a.line{border-color:var(--line)!important}
}

/* ---- 院内ギャラリー（2026-11-08） ---- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gal figure{margin:0;min-width:0}
.gal figure img{width:100%;height:230px;object-fit:cover;display:block;
 border:1px solid var(--line);background:#fff}
.gal .g-lg{grid-column:span 2}
.gal .g-lg img{height:230px}
.gal figcaption{font-size:11.8px;color:var(--sub);letter-spacing:.04em;
 line-height:1.9;padding-top:9px}
@media(max-width:900px){
 .gal{grid-template-columns:repeat(2,1fr);gap:14px}
 .gal .g-lg{grid-column:span 2}
 .gal figure img{height:190px}
 .gal .g-lg img{height:220px}
}
@media(max-width:520px){
 .gal{grid-template-columns:1fr}
 .gal .g-lg{grid-column:span 1}
 .gal figure img,.gal .g-lg img{height:210px}
}

/* ========== 書体の統一（最終）==========
   和文を含みうる要素はすべて明朝・ウェイト400に揃え、
   欧文だけの要素にのみ Cormorant Garamond を使います。 */
body,
body :is(h1,h2,h3,h4,h5,h6,p,span,a,b,strong,em,i,s,small,li,dt,dd,th,td,
         label,summary,figcaption,button,input,select,textarea,address,time,div,nav){
  font-family:var(--serif)!important;
  font-weight:400!important;
  font-synthesis:none!important;
}
body :is(h1,h2){font-weight:300!important}
.section-heading h2,.recruit-intro h2,.contact h2,
.detail-source h2,.director-copy h3,.message-layout h3{font-weight:300!important}

/* 欧文のみの要素 */
.brand,
.clinic-visual h1,
.section-heading .eyebrow,.recruit-intro .eyebrow,.contact .eyebrow,
.relnav .t,.acad-num,.lb-ct,.en{
  font-family:var(--latin)!important;font-weight:300!important;
}
.brand>span,.brand i,.clinic-visual h1>span{font-family:var(--serif)!important}

/* ヒーロー内の文字サイズと太さ */
.hero-location{font-size:13px!important;letter-spacing:.2em!important}
.clinic-caption span{font-size:12px!important;letter-spacing:.14em!important}
.clinic-opening{font-size:12px!important;letter-spacing:.18em!important}

/* 症例・ナビまわりの名残を整える */
.case-zoom,.case-cta,.cases-follow,.menu-reserve,.text-link,.more,
.header-actions>a,.breadcrumbs,.back-top,.footer-bottom,.cta{
  font-family:var(--serif)!important;font-weight:400!important
}
.case-meta .price-now{font-size:16.5px!important;letter-spacing:.02em!important;color:var(--navy)}
.case-meta .price-was{text-decoration:line-through}
.header-actions>a{letter-spacing:.1em;font-size:12px}
.cta{letter-spacing:.1em;font-size:13px}
.case-zoom{letter-spacing:.06em}

/* style.css の .clinic-visual 系が強いので明示的に上書き */
.clinic-visual .hero-location,
.clinic-visual .clinic-opening,
.clinic-visual .clinic-caption,
.clinic-visual .clinic-caption span,
.main-visual .visual-copy p,
.main-visual .clinic-caption span{
  font-family:var(--serif)!important;font-weight:400!important
}
.clinic-visual .hero-location{font-size:13.5px!important}
.clinic-visual .clinic-caption span{font-size:12px!important}

/* 写真が1枚だけの症例は、サムネイル列を出さない（カバーと重複するため） */
.case-thumbs.one{display:none}

/* ギャラリーは4枚・等幅1列に */
.gal{grid-template-columns:repeat(4,1fr)}
.gal .g-lg{grid-column:auto}
.gal .g-lg img{height:230px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}.gal .g-lg{grid-column:auto}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}

/* ===== v15 2026-11-08 芦屋グループご指摘の反映 ===== */

/* 1) ヒーローを明るく（脱・陰気）。退色フィルタを外し、覆いを薄く。 */
.clinic-visual{background:#efe9e0}
.clinic-visual .photo-mosaic{background:#efe9e0;gap:6px}
.clinic-visual .photo-mosaic img{
  filter:saturate(.96) brightness(1.1) contrast(.97)!important}
.clinic-visual .hero-shade{
  background:
   linear-gradient(90deg,rgba(14,20,30,.78) 0%,rgba(14,20,30,.56) 28%,rgba(14,20,30,.18) 58%,rgba(14,20,30,.02) 100%),
   linear-gradient(0deg,rgba(14,20,30,.38) 0%,rgba(14,20,30,0) 58%)!important}
.clinic-visual h1,
.clinic-visual .hero-location,
.clinic-visual .clinic-caption{text-shadow:0 1px 16px rgba(8,12,18,.7)}
.clinic-visual .clinic-opening{background:rgba(22,35,63,.86)!important;color:#e7cf9c!important}
@media(max-width:760px){
 .clinic-visual .hero-shade{
  background:
   linear-gradient(0deg,rgba(18,23,25,.70) 0%,rgba(18,23,25,.40) 42%,rgba(18,23,25,.10) 78%,rgba(18,23,25,.02) 100%),
   linear-gradient(90deg,rgba(18,23,25,.28),rgba(18,23,25,.04))!important}
}

/* 2) 医師写真の比率を柚﨑・島袋で完全に統一（3:4） */
.message-layout>img,
.director-layout>img{
  width:100%!important;aspect-ratio:3/4!important;height:auto!important;
  max-height:none!important;max-width:none!important;
  object-fit:cover!important;object-position:center 14%!important}
@media(max-width:760px){
 .message-layout>img,
 .director-layout>img{width:72%!important;max-width:330px!important;justify-self:center}
}

/* 3) 本文中のインラインリンク */
.acad-sum a.inl{border-bottom:1px solid #c9c1b4;padding-bottom:1px}
.acad-sum a.inl:hover{border-color:#16233f}