/*
Theme Name: Daikanyama Skin Clinic
Theme URI: http://clinic.tantoma.com
Author: Cowork
Description: 美容外科・美容皮膚科「代官山スキンクリニック」サンプルサイト用のオリジナルテーマ。WixサイトのデザインをWordPress向けに再構築したものです。画像はすべて差し替え前提のプレースホルダーで構成されています。
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dsc-clinic
*/

/* ============================================================
   1. 変数・リセット
   ============================================================ */
:root{
  --bronze:#9d6c3f;
  --bronze-dark:#825833;
  --ink:#111111;
  --slate:#353841;
  --bg:#ffffff;
  --soft:#f7f6f4;
  --beige:#eceae7;
  --line:#d8d3cc;
  --muted:#6f6a64;
  --maxw:1280px;
  --serif-en:"Fahkwang", serif;
  --serif-jp:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans-jp:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans-jp);
  font-weight:400;
  line-height:1.9;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:opacity .25s,color .25s,background .25s;}
a:hover{opacity:.7;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,figure{margin:0;}
button{font-family:inherit;cursor:pointer;}

/* ============================================================
   2. レイアウト共通
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.section{padding:96px 0;}
.section--soft{background:var(--soft);}
.section--beige{background:var(--beige);}
.section--menu{background:#faf8f5 url('images/menu-bg.jpg') center/cover no-repeat;}

/* セクション見出し（英字＋和文サブ） */
.sec-head{text-align:center;margin-bottom:54px;}
.sec-head__en{
  font-family:var(--serif-en);
  font-weight:400;
  color:var(--bronze);
  font-size:clamp(40px,6vw,65px);
  letter-spacing:.05em;
  line-height:1.15;
  display:block;
}
.sec-head__jp{
  font-family:var(--serif-jp);
  font-size:17px;
  letter-spacing:.18em;
  color:var(--ink);
  margin-top:10px;
  display:block;
}
.sec-head--left{text-align:left;}

/* 装飾ライン（右側にブロンズのアクセント） */
.divider{
  position:relative;
  height:1px;
  background:var(--line);
  max-width:760px;
  margin:0 auto 44px;
}
.divider::after{
  content:"";
  position:absolute;
  right:48px;top:-1px;
  width:92px;height:3px;
  background:var(--bronze);
}

/* ボタン（角丸アウトライン） */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  padding:15px 32px;
  border:1px solid var(--ink);
  border-radius:40px;
  font-family:var(--serif-jp);
  font-size:15px;
  letter-spacing:.14em;
  color:var(--ink);
  background:transparent;
  text-align:center;
}
.btn:hover{background:var(--ink);color:#fff;opacity:1;}
.btn--bronze{border-color:var(--bronze);color:var(--bronze);}
.btn--bronze:hover{background:var(--bronze);color:#fff;}
.btn--light{border-color:#fff;color:#fff;}
.btn--light:hover{background:#fff;color:var(--slate);}

/* スクロール時のフェードイン */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ============================================================
   3. ヘッダー
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #efeae3;
  backdrop-filter:saturate(140%) blur(4px);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;
  padding:16px 32px;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand__badge{
  width:54px;height:62px;flex:none;
  border:1px solid #b9b4ad;border-radius:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--serif-en);font-size:15px;letter-spacing:.06em;
  color:var(--slate);line-height:1.25;
}
.brand__text{display:flex;flex-direction:column;line-height:1.35;}
.brand__name{
  font-family:var(--serif-en);font-size:21px;letter-spacing:.06em;color:var(--slate);
}
.brand__sub{
  font-family:var(--serif-jp);font-size:11px;letter-spacing:.16em;color:var(--muted);margin-top:3px;
}
.site-nav{display:flex;align-items:center;gap:38px;}
.site-nav ul{display:flex;gap:38px;}
.site-nav a{
  font-family:var(--serif-jp);font-size:15.5px;letter-spacing:.1em;color:var(--ink);
}
.site-nav .current-menu-item>a,
.site-nav a.is-current{color:var(--bronze);}
.header-cta{
  font-family:var(--serif-jp);font-size:15px;letter-spacing:.12em;
  padding:13px 30px;border:1px solid var(--ink);border-radius:40px;color:var(--ink);
}
.header-cta:hover{background:var(--ink);color:#fff;opacity:1;}

/* ハンバーガー */
.nav-toggle{
  display:none;width:44px;height:44px;border:0;background:transparent;
  flex-direction:column;justify-content:center;gap:6px;padding:0;
}
.nav-toggle span{display:block;width:26px;height:1.5px;background:var(--ink);margin:0 auto;transition:.3s;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ============================================================
   4. ヒーロー
   ============================================================ */
.hero{padding:34px 0 0;}
.hero__inner{
  position:relative;
  max-width:var(--maxw);margin:0 auto;padding:0 32px;
}
.hero__media{
  position:relative;
  border-radius:14px;overflow:hidden;
  aspect-ratio:16/8.4;background:var(--beige);
}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 28%,rgba(255,255,255,.10) 52%,rgba(255,255,255,0) 72%);
}
.hero__copy{
  position:absolute;left:78px;bottom:64px;max-width:560px;
}
.hero__title{
  font-family:var(--serif-en);font-weight:400;
  font-size:clamp(48px,8.5vw,92px);
  line-height:1.04;letter-spacing:.04em;
  color:var(--bronze);
}
.hero__lead{
  font-size:14px;color:var(--slate);margin-top:18px;line-height:2;max-width:430px;
}
/* スクロール案内 */
.hero-scroll{
  display:flex;justify-content:center;
  margin-top:-58px;position:relative;z-index:5;
}
.hero-scroll__mouse{
  width:30px;height:48px;border:1.6px solid #a39d93;border-radius:16px;
  display:flex;justify-content:center;align-items:flex-start;padding-top:9px;
}
.hero-scroll__mouse svg{width:12px;height:18px;color:var(--bronze);animation:heroBob 1.9s ease-in-out infinite;}
@keyframes heroBob{0%,100%{transform:translateY(-3px);opacity:.3;}50%{transform:translateY(5px);opacity:1;}}

/* ============================================================
   5. MENU セクション
   ============================================================ */
.menu-cards{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:38%;row-gap:48px;max-width:1240px;margin:0 auto;
  position:relative;
}
.menu-cards::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  width:1px;background:var(--line);transform:translateX(-50%);
}
.menu-card{text-align:center;}
.menu-card__img{
  border-radius:22px;overflow:hidden;aspect-ratio:7/9;
  background:var(--beige);margin-bottom:30px;
  box-shadow:0 22px 46px rgba(53,56,65,.14);
}
.menu-card__img img{width:100%;height:100%;object-fit:cover;}
.menu-card__title{
  font-family:var(--serif-jp);font-size:26px;letter-spacing:.08em;margin-bottom:18px;
}
.menu-card__list li{
  font-family:var(--serif-jp);font-size:15.5px;color:var(--ink);
  padding:7px 0;letter-spacing:.06em;
}
.menu-card__list{margin-bottom:28px;}

/* ============================================================
   6. CASE セクション
   ============================================================ */
.case-lead{
  text-align:center;max-width:640px;margin:0 auto 40px;
  font-size:14px;color:var(--muted);
}
.case-gallery{position:relative;}
.case-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:none;
}
.case-track::-webkit-scrollbar{display:none;}
.case-item{
  flex:0 0 clamp(220px,24vw,300px);scroll-snap-align:start;text-align:center;
}
.case-item__img{
  width:100%;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--beige);
}
.case-item__img img{width:100%;height:100%;object-fit:cover;}
.case-item__cap{
  font-family:var(--serif-jp);font-size:15px;letter-spacing:.08em;margin-top:14px;
}
.case-nav{
  position:absolute;top:calc(50% - 30px);right:-8px;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.case-nav svg{width:14px;height:14px;}
.case-nav--prev{left:-8px;right:auto;}

/* ============================================================
   7. GREETINGS セクション（重ね合わせレイアウト）
   ============================================================ */
.greet{background:#e7edf3;}
.greet__stage{
  position:relative;max-width:1180px;margin:0 auto;
  padding:128px 32px 92px;
}
.greet__card{
  position:relative;z-index:3;
  width:600px;margin-left:380px;
  background:#fff;border-radius:18px;
  padding:54px 58px 58px;
  box-shadow:0 36px 84px rgba(40,52,74,.16);
}
.greet__photo{
  position:absolute;z-index:2;
  left:24px;top:34px;width:438px;height:566px;
  border-radius:10px;overflow:hidden;
  box-shadow:0 26px 54px rgba(40,52,74,.20);
}
.greet__photo img{width:100%;height:100%;object-fit:cover;}
.greet__side{
  position:absolute;z-index:1;
  right:0;top:8px;width:316px;height:432px;
  border-radius:10px;overflow:hidden;
}
.greet__side img{width:100%;height:100%;object-fit:cover;}
.greet__block{
  position:absolute;z-index:0;
  left:0;bottom:34px;width:300px;height:286px;
  background:#d6e1ec;
}
.greet__body p{font-size:14.5px;color:var(--slate);margin:18px 0 22px;line-height:2.05;}
.greet__name{
  font-family:var(--serif-jp);font-size:22px;letter-spacing:.1em;margin-bottom:26px;
}

/* ============================================================
   7b. フルワイド画像帯
   ============================================================ */
.band{
  width:100%;overflow:hidden;
  height:clamp(260px,32vw,460px);
}
.band img{width:100%;height:100%;object-fit:cover;display:block;}

/* ============================================================
   8. INSTAGRAM セクション
   ============================================================ */
.insta-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:40px;
}
.insta-grid figure{aspect-ratio:1/1;overflow:hidden;background:var(--beige);}
.insta-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.insta-grid a:hover img{transform:scale(1.06);opacity:1;}
.insta-tag{text-align:center;}
.insta-tag .btn{min-width:300px;}

/* ============================================================
   9. フッター
   ============================================================ */
.site-footer{background:var(--slate);color:#fff;}
.footer-inner{
  display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:50px;
  max-width:var(--maxw);margin:0 auto;padding:78px 32px 40px;
}
.footer-brand .brand__badge{border-color:#7c7f86;color:#fff;}
.footer-brand .brand__name,
.footer-brand .brand__sub{color:#fff;}
.footer-links li{margin-bottom:13px;}
.footer-links a{font-family:var(--serif-jp);font-size:14.5px;letter-spacing:.06em;}
.footer-res__en{
  font-family:var(--serif-en);font-size:34px;letter-spacing:.05em;
}
.footer-res__jp{font-family:var(--serif-jp);font-size:15px;letter-spacing:.14em;margin:6px 0 24px;}
.footer-res__tel{
  font-family:var(--serif-en);font-size:26px;letter-spacing:.04em;margin-bottom:22px;
  display:flex;align-items:center;gap:10px;
}
.footer-res__info{font-size:13.5px;color:#c9cacd;margin-top:24px;line-height:2;}
.footer-res__map{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:13.5px;text-decoration:underline;}
.footer-bottom{
  border-top:1px solid #4a4d56;
  max-width:var(--maxw);margin:0 auto;padding:22px 32px;
  font-family:var(--serif-en);font-size:12px;letter-spacing:.06em;color:#a9abb0;
}

/* ============================================================
   10. 下層ページ共通
   ============================================================ */
.page-hero{
  max-width:var(--maxw);margin:34px auto 0;padding:0 32px;
}
.page-hero__media{
  border-radius:14px;overflow:hidden;aspect-ratio:16/6.4;background:var(--beige);
}
.page-hero__media img{width:100%;height:100%;object-fit:cover;}
.page-intro{max-width:760px;margin:0 auto;text-align:center;font-size:15px;color:var(--slate);}
.lead-text{max-width:760px;margin:0 auto 10px;font-size:15px;color:var(--slate);line-height:2.1;}

/* 診療メニュー */
.treat-block{margin-top:64px;}
.treat-block__head{
  display:flex;align-items:baseline;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:30px;
}
.treat-block__en{
  font-family:var(--serif-en);color:var(--bronze);font-size:24px;letter-spacing:.06em;line-height:1.2;
}
.treat-block__jp{font-family:var(--serif-jp);font-size:22px;letter-spacing:.08em;}
.treat-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
}
.treat-list li{
  border:1px solid var(--line);border-radius:4px;
  padding:18px 22px;font-family:var(--serif-jp);font-size:16px;letter-spacing:.06em;
  background:#fff;
}

/* クリニック紹介・概要テーブル */
.profile-table{width:100%;border-collapse:collapse;max-width:760px;margin:0 auto;}
.profile-table th,.profile-table td{
  text-align:left;padding:18px 16px;border-bottom:1px solid var(--line);
  font-size:15px;vertical-align:top;
}
.profile-table th{
  width:170px;font-family:var(--serif-jp);font-weight:500;letter-spacing:.08em;white-space:nowrap;
}
.doctor{
  display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;max-width:900px;margin:0 auto;
}
.doctor__photo{border-radius:6px;overflow:hidden;aspect-ratio:3/4;background:var(--beige);}
.doctor__photo img{width:100%;height:100%;object-fit:cover;}
.doctor__name{font-family:var(--serif-jp);font-size:24px;letter-spacing:.08em;}
.doctor__role{font-size:13.5px;color:var(--muted);margin:6px 0 22px;}
.doctor__sub{
  font-family:var(--serif-jp);font-size:16px;color:var(--bronze);
  letter-spacing:.08em;margin:22px 0 8px;
}
.doctor__list li{font-size:14.5px;padding:4px 0;color:var(--slate);}

/* 初めての方へ・フロー */
.flow-step{
  display:grid;grid-template-columns:120px 1fr;gap:36px;
  padding:36px 0;border-bottom:1px solid var(--line);
}
.flow-step__no{
  font-family:var(--serif-en);font-size:54px;color:var(--bronze);line-height:1;
}
.flow-step__title{font-family:var(--serif-jp);font-size:21px;letter-spacing:.06em;margin-bottom:14px;}
.flow-step__text{font-size:14.5px;color:var(--slate);}
.flow-step__actions{margin-top:18px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.flow-step__tel{font-family:var(--serif-en);font-size:20px;letter-spacing:.04em;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:transparent;border:0;
  padding:22px 44px 22px 4px;position:relative;
  font-family:var(--serif-jp);font-size:16.5px;letter-spacing:.04em;color:var(--ink);
}
.faq-q::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq-q.is-open::after{transform:translateY(-30%) rotate(-135deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
}
.faq-a__inner{padding:0 4px 24px;font-size:14.5px;color:var(--slate);}

/* WordPress 標準コンテンツ（ポリシー等） */
.entry-content{max-width:820px;margin:0 auto;font-size:15px;line-height:2.05;}
.entry-content h2{font-family:var(--serif-jp);font-size:22px;margin:38px 0 14px;letter-spacing:.04em;}
.entry-content h3{font-family:var(--serif-jp);font-size:18px;margin:28px 0 10px;}
.entry-content p{margin-bottom:18px;}
.entry-content ul{list-style:disc;padding-left:1.4em;margin-bottom:18px;}
.entry-content a{color:var(--bronze);text-decoration:underline;}

/* 予約ページ */
.reserve-box{
  max-width:620px;margin:0 auto;text-align:center;
  border:1px solid var(--line);border-radius:10px;padding:54px 40px;
}
.reserve-box__tel{font-family:var(--serif-en);font-size:38px;letter-spacing:.04em;margin:10px 0 6px;}
.reserve-box .btn{margin-top:14px;}

/* ============================================================
   11. レスポンシブ
   ============================================================ */
@media(max-width:960px){
  .section{padding:64px 0;}
  .wrap{padding:0 22px;}
  .nav-toggle{display:flex;}
  .site-nav{
    position:fixed;inset:71px 0 auto 0;
    background:#fff;flex-direction:column;gap:0;
    padding:10px 0 24px;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .35s ease;
  }
  .site-nav.is-open{transform:none;}
  .site-nav ul{flex-direction:column;gap:0;width:100%;}
  .site-nav ul li{width:100%;text-align:center;}
  .site-nav ul a{display:block;padding:16px 0;border-bottom:1px solid #efeae3;}
  .header-cta{margin:14px auto 0;}
  .hero__copy{left:24px;right:24px;bottom:28px;}
  .hero__media{aspect-ratio:4/4.4;}
  .menu-cards{grid-template-columns:1fr;gap:40px;max-width:420px;}
  .menu-cards::before{display:none;}
  .insta-grid{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr;gap:40px;padding:56px 22px 30px;}
  .doctor{grid-template-columns:1fr;gap:28px;max-width:420px;}
  .doctor__photo{max-width:300px;}
  .flow-step{grid-template-columns:64px 1fr;gap:18px;}
  .flow-step__no{font-size:38px;}
  .page-hero__media{aspect-ratio:4/3;}
  .insta-tag .btn,.btn{min-width:0;width:100%;}
  .case-nav{display:none;}
}
@media(max-width:480px){
  .sec-head{margin-bottom:38px;}
  .insta-grid{grid-template-columns:repeat(2,1fr);}
  .header-inner{padding:12px 18px;}
  .brand__name{font-size:18px;}
  .brand__badge{width:46px;height:54px;}
}

/* GREETINGS：重ね合わせレイアウトは広い画面のみ。狭い画面は縦積み */
@media(max-width:1180px){
  .greet__stage{padding:64px 24px;}
  .greet__card{position:relative;width:auto;max-width:600px;margin:0 auto;padding:42px 36px 46px;}
  .greet__photo{position:static;width:auto;max-width:340px;height:auto;aspect-ratio:3/4;margin:0 auto 26px;box-shadow:0 18px 40px rgba(40,52,74,.18);}
  .greet__side,.greet__block{display:none;}
}