/*
Theme Name: TAMA ARTMAKE
Author: kaori
Version: 1.0
*/

/* ============================================================
   目次（各セクションは下記コメント or class名で検索できます）
   ------------------------------------------------------------
   1. :root ……… カラー・共通設定（デザイントークン）
   2. ヘッダー / グローバルナビ
   3. HERO
   4. ABOUT
   5. MENU
   6. CASES（症例スライダー）
   7. BLOG / FAQ / CTA
   8. 追従する予約タブ / フッター ほか

   ■ レスポンシブの基準
     ・スマホ    … @media (max-width:767px)
     ・タブレット … 767〜（PCと同じ2枚表示。症例スライダーの枚数切替は js/cases-slider.js）
   ============================================================ */

/* 1. デザイントークン（色はここを変えるとサイト全体に反映） */
:root{
  --cream:#faf7f2;      /* 背景のクリーム色 */
  --ink:#2b2723;        /* 基本の文字色 */
  --terracotta:#b26a3c; /* アクセント（テラコッタ） */
  --line:#ded6c9;       /* 罫線・枠線 */
}

/* スクロール表示アニメーション（ふわっと）。html.reveal-on は header.php が付与。
   ・対応ブラウザ＋モーション許可時のみ有効（prefers-reduced-motion では下のブロック自体が無効＝常時表示）
   ・.is-in は js/scroll-reveal.js が画面到達時に付与
   ・要素の指定は js/scroll-reveal.js の SELECTOR と一致させること */
@media (prefers-reduced-motion: no-preference){
  html.reveal-on .section-eyebrow,
  html.reveal-on .section-title,
  html.reveal-on .about__cols,
  html.reveal-on .menu-card,
  html.reveal-on .cases__slider,
  html.reveal-on .blog-feature,
  html.reveal-on .faq-item,
  html.reveal-on .cta__inner,
  html.reveal-on .page-hero__title,
  html.reveal-on .page-hero__sub,
  html.reveal-on .bar-title,
  html.reveal-on .faq-sec__lead,
  html.reveal-on .commit-card,
  html.reveal-on .artist-card,
  html.reveal-on .flow-item,
  html.reveal-on .ab-intro__photo,
  html.reveal-on .ab-message__photo,
  html.reveal-on .price-block,
  html.reveal-on .kv-box,
  html.reveal-on .check-group,
  html.reveal-on .mp-confirm__inner{
    opacity:0; transform:translateY(var(--reveal-shift, 26px));
    transition:opacity var(--reveal-dur, .8s) cubic-bezier(.22,.61,.36,1), transform var(--reveal-dur, .8s) cubic-bezier(.22,.61,.36,1);
  }
  html.reveal-on .is-in{ opacity:1; transform:none; }
  /* カード全体をアニメする箇所では、内側の見出し(.bar-title)は個別に隠さない
     （カードと一緒に出す。二重フェード・タイミングずれを防止） */
  html.reveal-on .price-block .bar-title,
  html.reveal-on .kv-box .bar-title{ opacity:1; transform:none; }
}
/* TOPページ（body.home）は「フェード＋少し上に移動」「速さ .8s」のまま。
   下層ページ（各セクションのページ）はヒーローと同じ“純フェード”＋よりゆっくり(1.5s)に揃える */
body:not(.home){ --reveal-shift:0px; --reveal-dur:1.5s; }

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Noto Sans JP", sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.8;
}

/* ヘッダー */
.site-header{ background:#fff; border-bottom:1px solid var(--line); }
.site-header__inner{
  max-width:1200px; margin:0 auto; padding:18px 24px;
  display:flex; justify-content:space-between; align-items:center;
}
.site-logo{ margin:0; display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.site-logo__en{ font-family:"Noto Serif JP", serif; font-size:20px; letter-spacing:.15em; line-height:1; }
.site-logo__jp{ font-size:12px; letter-spacing:.08em; color:#6b6359; line-height:1; padding-left:12px; border-left:1px solid var(--terracotta); }
@media (max-width:767px){
  .site-logo{ gap:8px; }
  .site-logo__en{ font-size:17px; }
  .site-logo__jp{ font-size:11px; padding-left:8px; }
}
@media (max-width:360px){ .site-logo__jp{ display:none; } }
html{ scroll-behavior:smooth; }
.global-nav{ display:flex; gap:22px; align-items:center; }
.global-nav a{ text-decoration:none; font-size:14px; }
.global-nav .nav-cta{ background:var(--terracotta); color:#fff; padding:8px 18px; border-radius:2px; }

/* メイン */
.site-main{ max-width:1200px; margin:0 auto; padding:60px 24px; }

/* フッター */
.site-footer{ background:var(--ink); color:#fff; text-align:center; padding:40px 24px; }
.site-footer__logo{ display:flex; justify-content:center; align-items:center; gap:12px; margin:0 0 14px; }
.site-footer__logo-en{ font-family:"Noto Serif JP", serif; letter-spacing:.15em; }
.site-footer__logo-jp{ font-size:12px; letter-spacing:.08em; color:#b7ada0; line-height:1; padding-left:12px; border-left:1px solid var(--terracotta); }
.footer-nav{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:0 0 16px; }
.footer-nav a{ text-decoration:none; font-size:13px; color:var(--line); }
.copyright{ font-size:12px; color:#8f857a; margin:0; }

/* ===== ヒーロー ===== */
.hero{ background:#f3ede4; }
.hero__inner{
  max-width:1200px; margin:0 auto; padding:80px 24px;
  display:flex; align-items:center; gap:48px;
}
.hero__copy{ flex:1; }
.hero__eyebrow{ font-size:16px; letter-spacing:.2em; color:var(--terracotta); margin:0 0 20px; }
.hero__title{ font-family:"Noto Serif JP", serif;  font-weight:500; font-size:36px; line-height:1.7; letter-spacing:0.24em; margin:0 0 24px; }
.hero__lead{ font-size:16px; color:#6b6359; line-height:1.9; letter-spacing:0.08em; margin:0 0 32px; max-width:460px; }
.hero__btn{
  display:inline-block; background:var(--terracotta); color:#fff;
  text-decoration:none; padding:14px 28px; border-radius:2px; font-size:14px;
}

/* 写真コラージュ（今は仮の枠） */
/* 写真コラージュ（仮の枠） */
.hero__collage{ position:relative; width:560px; height:500px; flex-shrink:0; }
.hero__collage .ph{ position:absolute; background:#e5dccc; border-radius:2px; }
.ph--main{ top:0;    left:207px; width:310px; height:313px;
  display:flex; align-items:center; justify-content:center; color:#8f857a; font-size:13px; }
.ph--left{ top:96px;  left:0;    width:186px; height:218px; }
.ph--bl{   top:327px; left:78px;  width:218px; height:174px; }
.ph--br{   top:327px; left:310px; width:207px; height:131px; }

/* ===== ヒーロー・コラージュ レスポンシブ（Figma Page6 準拠） =====
   デスクトップ(>900px)は上の絶対配置(560x500)を維持。
   タブレット/スマホは Figma の非対称コラージュを比率で再現する。 */

/* タブレット（768〜900px）：PC版と同じ横並び。コラージュはPC配置(560x500)を比率でスケール */
@media (max-width:900px) and (min-width:768px){
  .hero__inner{ gap:40px; padding:64px 24px; }
  .hero__collage{
    width:auto; height:auto; flex:0 0 46%; max-width:560px;
    aspect-ratio:560 / 500; position:relative;
  }
  .hero__collage .ph{ position:absolute; }
  /* PC版と同じ配置を比率で再現 */
  .ph--main{ left:36.96%; top:0;     width:55.36%; height:62.6%; }
  .ph--left{ left:0;      top:19.2%; width:33.21%; height:43.6%; }
  .ph--bl{   left:13.93%; top:65.4%; width:38.93%; height:34.8%; }
  .ph--br{   left:55.36%; top:65.4%; width:36.96%; height:26.2%; }
}

/* スマホ（〜767px）：縦積み・コラージュは画面全幅（写真は端まで見切れる） */
@media (max-width:767px){
  .hero__inner{ flex-direction:column; gap:36px; padding:56px 0; }
  .hero__copy{ padding:0 20px; }              /* テキストのみ左右20px（Figma準拠） */
  .hero__collage{
    flex:none; width:100%; height:auto; max-width:none; margin:0;
    aspect-ratio:375 / 268;
  }
  /* 添付「レスポンシブデザイン」準拠：主役=右上・横長／左=縦長・見切れ／下段=2枚 */
  .ph--main{ left:27.7%; top:0;     width:68.3%; height:64.4%; }  /* 主役（横長・右上） */
  .ph--left{ left:-2.1%; top:22.1%; width:26.1%; height:49.1%; }  /* 左（縦長・左端見切れ） */
  .ph--bl{   left:27.7%; top:69.7%; width:34.1%; height:30.7%; }  /* 下・中央 */
  .ph--br{   left:64%;   top:69.7%; width:31.5%; height:22.5%; }  /* 下・右 */

  /* ヒーロー文字（スマホ：Figma HOME/SP 375 準拠） */
  .hero__title{ font-size:26px; font-weight:400; line-height:1.7; letter-spacing:.02em; margin:0 0 20px; }
  .hero__lead{ font-size:13px; line-height:1.9; margin:0 0 24px; }
}

.hero__collage .ph img{
  width:100%;
  height:100%;
  object-fit:cover;   /* 枠の形に合わせてトリミング */
  display:block;
  border-radius:2px;
}

/* ヒーローの読み込みアニメーション（ふわっと登場）
   ・html.reveal-on（header.phpが描画前に付与）＋モーション許可時のみ有効
   ・コピーは上から順にフェードアップ／写真はやわらかくフェード＋わずかにズーム
   ・JSオフ・未対応・「視差効果を減らす」設定では通常表示（隠れない） */
@media (prefers-reduced-motion: no-preference){
  /* ゆっくりしたフェードイン（動きなし・透明度のみ）。opacity:0 は直接指定せず
     キーフレーム＋fill:both で制御（アニメ無効時は通常表示） */
  html.reveal-on .hero__eyebrow,
  html.reveal-on .hero__title,
  html.reveal-on .hero__lead,
  html.reveal-on .hero__btn{
    animation:heroFade 1.6s ease both;
  }
  html.reveal-on .hero__eyebrow{ animation-delay:.15s; }
  html.reveal-on .hero__title{   animation-delay:.40s; }
  html.reveal-on .hero__lead{    animation-delay:.65s; }
  html.reveal-on .hero__btn{     animation-delay:.90s; }

  html.reveal-on .hero__collage .ph{
    animation:heroFade 1.8s ease both;
  }
  /* ↑と同じ specificity にして遅延を効かせる（.hero__collage を付ける） */
  html.reveal-on .hero__collage .ph--main{ animation-delay:.30s; }
  html.reveal-on .hero__collage .ph--left{ animation-delay:.60s; }
  html.reveal-on .hero__collage .ph--bl{   animation-delay:.85s; }
  html.reveal-on .hero__collage .ph--br{   animation-delay:1.1s; }
}
@keyframes heroFade{
  from{ opacity:0; }
  to{   opacity:1; }
}

/* ===== 共通：セクション見出し ===== */
.section-eyebrow{ font-size:12px; letter-spacing:.2em; color:var(--terracotta); margin:0 0 14px; }
.section-title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:26px; letter-spacing:0.1em; margin:0 0 28px; }

/* ===== ABOUT ===== */
.about{ background:var(--cream); }
.about__inner{ max-width:1120px; margin:0 auto; padding:100px 24px; }
.about__head{ text-align:center; margin:0 0 56px; }
.about__cols{ display:flex; align-items:center; gap:64px; }
.about__photo{ flex:0 0 46%; }
.about__photo img{ width:100%; height:auto; display:block; border-radius:2px; }
.about__body{ flex:1; }
.about__headline{ font-family:"Noto Serif JP", serif; font-weight:400; font-size:20px; line-height:1.9; margin:0 0 24px; }
.about__text{ font-size:16px; color:#6b6359; line-height:2; margin:0 0 18px; }
.text-link{ display:inline-block; margin-top:8px; color:var(--terracotta); text-decoration:none; font-size:14px; border-bottom:1px solid var(--terracotta); padding-bottom:2px; }

/* ABOUT スマホのみ縦積み（タブレットはPC版と同じ横並び） */
@media (max-width:767px){
  .about__cols{ flex-direction:column; gap:32px; }
  .about__photo{ flex:none; width:100%; }
}

/* ===== MENU ===== */
.menu{ background:#f3ede4; }
.menu__inner{ max-width:1120px; margin:0 auto; padding:100px 24px; }
.menu__head{ text-align:center; margin:0 0 56px; }
.menu__cards{ display:flex; gap:28px; }
.menu-card{ flex:1; background:#fff; border-radius:2px; overflow:hidden; }
.menu-card__img img{ width:100%; height:200px; object-fit:cover; display:block; }
.menu-card__body{ padding:24px 22px 28px; }
.menu-card__en{ font-size:11px; letter-spacing:.2em; color:var(--terracotta); margin:0 0 10px; }
.menu-card__title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:18px; margin:0 0 12px; }
.menu-card__desc{ font-size:13px; color:#6b6359; line-height:1.9; margin:0; }
.menu__btnwrap{ text-align:center; margin-top:48px; }
.btn-outline{ display:inline-block; padding:14px 32px; border:1px solid var(--terracotta); color:var(--terracotta); text-decoration:none; font-size:13px; letter-spacing:.1em; border-radius:2px; }

/* MENU スマホのみ縦積み（タブレットはPC版と同じ横並び） */
@media (max-width:767px){ .menu__cards{ flex-direction:column; } }

/* ===== セクション透かし文字（装飾） ===== */
.about, .menu{ position:relative; overflow:hidden; }
.about__inner, .menu__inner{ position:relative; z-index:1; }   /* 中身を前面に */
.about::before, .menu::before{
  position:absolute; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500;
  font-size:140px; line-height:1; letter-spacing:.05em;
  color:#ece2d3;                 /* 薄いベージュの透かし */
}
.about::before{ content:"ABOUT"; top:40px; right:4%; }
.menu::before{ content:"MENU"; top:24px; left:-45px; }

/* スマホのみ透かしを小さく（タブレットはPC版と同じ） */
@media (max-width:767px){
  .about::before, .menu::before{ font-size:78px; }
}

/* ===== ヒーロー透かし文字 ===== */
.hero{ position:relative; overflow:hidden; }
.hero__inner{ position:relative; z-index:1; }
.hero::before{
  content:"TAMA ARTMAKE";
  position:absolute; top:18px; left:-30px;
  font-family:"Noto Serif JP", serif; font-weight:500;
  font-size:150px; line-height:1; white-space:nowrap; letter-spacing:.02em;
  color:#ece2d3; z-index:0; pointer-events:none;
}
@media (max-width:767px){
  .hero::before{ font-size:64px; }
}

/* ===== CASES（Before/Afterスライダー） ===== */
/* ===== 6. CASES（症例スライダー） =====================================
   構成: .cases__slider ＞ .cases__viewport（はみ出しを隠す窓）
          ＞ .cases__track（全カードを横一列に並べ、JSでtranslateXして送る）
   ・写真の枠比率は Figma準拠の aspect-ratio:278/338（縦長にしない）
   ・PC/タブレット=2枚、スマホ=1枚（枚数と送りは js/cases-slider.js が制御）
   ==================================================================== */
.cases{ background:var(--cream); position:relative; overflow:hidden; }
.cases__inner{ max-width:1120px; margin:0 auto; padding:100px 24px; position:relative; z-index:1; }
.cases__head{ text-align:center; margin:0 0 56px; }

.cases__slider{ position:relative; }
.cases__viewport{ overflow:hidden; }
.cases__track{ display:flex; gap:24px; transition:transform .45s cubic-bezier(.22,.61,.36,1); will-change:transform; }

.case-card{ flex:0 0 calc((100% - 24px) / 2); box-sizing:border-box; background:#fff; border:1px solid var(--line); border-radius:6px; padding:32px 32px 28px; }
.case-card__title{ position:relative; padding-left:16px; margin:0 0 20px; min-height:1.6em; font-family:"Noto Serif JP", serif; font-weight:500; font-size:17px; line-height:1.6; color:var(--ink); text-wrap:balance; }
.case-card__title::before{ content:""; position:absolute; left:0; top:.2em; height:1.2em; width:4px; border-radius:2px; background:var(--terracotta); }
.case-card__title .title-br{ display:none; }  /* PC・タブレットは改行しない（スマホのみ矢印で改行） */

.case-card__photos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 24px; }
.case-card__photo{ margin:0; }
.case-card__photo img{ width:100%; aspect-ratio:278 / 338; object-fit:cover; display:block; border-radius:6px; background:var(--cream); }
.case-card__photo figcaption{ margin-top:10px; text-align:center; font-size:16px; font-weight:700; letter-spacing:.12em; color:#6b6359; }
.case-card__photo:nth-child(2) figcaption{ color:var(--terracotta); }

.case-card__spec{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; margin:0 0 20px; border-top:1px solid var(--line); }
.case-card__spec dt{ padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--terracotta); white-space:nowrap; }
.case-card__spec dd{ margin:0; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.8; color:#6b6359; }

.case-card__note{ margin:0; font-size:11px; line-height:1.8; color:#a89e90; }

/* 記事内の症例パターン（ブロックエディタのコアブロックで組んだ場合の調整） */
.case-card .case-photos{ margin:0 0 20px; }
.case-card .case-card__photo{ margin:0; }
.case-card .case-card__photo.is-after figcaption{ color:var(--terracotta); }
.case-card .case-spec{ margin:0 0 18px; }
.case-card .case-spec table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.case-card .case-spec td{ border:0; border-bottom:1px solid var(--line); padding:12px 8px 12px 0; font-size:13px; line-height:1.8; vertical-align:top; color:#6b6359; word-break:normal; }
.case-card .case-spec tr:first-child td{ border-top:1px solid var(--line); }
.case-card .case-spec td:first-child{ width:5.5em; color:var(--terracotta); white-space:nowrap; }

.cases__controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px; }
.cases__arrow{ flex:0 0 auto; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:16px; line-height:1; cursor:pointer; transition:border-color .2s, color .2s, opacity .2s; }
.cases__arrow:hover{ border-color:var(--terracotta); color:var(--terracotta); }
.cases__arrow:disabled{ opacity:.35; cursor:default; border-color:var(--line); color:var(--ink); }
.cases__dots{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; max-width:340px; }
.cases__dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; background:#ded6c9; cursor:pointer; transition:background .2s, transform .2s; }
.cases__dot.is-active{ background:var(--terracotta); transform:scale(1.3); }

.cases__btnwrap{ text-align:center; margin-top:48px; }
.cases::before{
  content:"CASES"; position:absolute; top:60px; right:3%; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500; font-size:140px; line-height:1; letter-spacing:.05em; color:#ece2d3;
}
/* スマホ（〜767px）のみ1枚表示。タブレット・PCは2枚 */
@media (max-width:767px){
  .case-card{ flex:0 0 100%; padding:24px 20px; }
  .cases::before{ font-size:78px; }
  /* タイトルは矢印の直後で改行（1行目＝矢印まで／2行目＝残り） */
  .case-card__title{ text-wrap:normal; }
  .case-card__title .title-br{ display:inline; }
}

/* ===== 追従する予約タブ ===== */
.reserve-tab{
  position:fixed; top:50%; right:0; transform:translateY(-50%);
  z-index:1000; display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--terracotta); color:#fff; text-decoration:none;
  padding:20px 14px; border-radius:26px 0 0 26px;
  box-shadow:-3px 3px 14px rgba(102,61,31,.28);
}
.reserve-tab__dot{ width:7px; height:7px; border-radius:50%; background:#fff; }
.reserve-tab__text{ writing-mode:vertical-rl; font-size:13px; letter-spacing:.15em; line-height:1; }

/* スマホ：予約タブを下部の横バーに */
@media (max-width:640px){
  .reserve-tab{
    top:auto; bottom:0; left:0; right:0; transform:none;
    width:100%; flex-direction:row; justify-content:center;
    padding:16px; border-radius:0;
    box-shadow:0 -3px 14px rgba(102,61,31,.22);
  }
  .reserve-tab__text{ writing-mode:horizontal-tb; font-size:15px; letter-spacing:.1em; }
}

/* ===== BLOG ===== */
.blog-sec{ background:#f3ede4; position:relative; overflow:hidden; }
.blog__inner{ max-width:1120px; margin:0 auto; padding:100px 24px; position:relative; z-index:1; }
.blog__head{ text-align:center; margin:0 0 56px; }
.blog__cards{ display:flex; gap:28px; align-items:stretch; }
.blog-card{ flex:1; background:#fff; border-radius:2px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.blog-card__img img{ width:100%; height:200px; object-fit:cover; display:block; }
.blog-card__body{ padding:22px 22px 26px; }
.blog-card__cat{ display:inline-block; background:#ece2d3; color:#6b6359; font-size:11px; padding:4px 10px; border-radius:2px; margin:0 0 12px; letter-spacing:.05em; }
.blog-card__title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:16px; line-height:1.6; margin:0 0 12px; }
.blog-card__excerpt{ font-size:13px; color:#6b6359; line-height:1.9; margin:0 0 16px; }
.blog-card__more{ color:var(--terracotta); font-size:13px; }
.blog-sec::before{ content:"BLOG"; position:absolute; top:40px; left:-10px; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500; font-size:140px; line-height:1; letter-spacing:.05em; color:#ece2d3; }
@media (max-width:767px){ .blog__cards{ flex-direction:column; } .blog-sec::before{ font-size:78px; } }



/* BLOG：最新1件フィーチャー表示 */
.blog-feature{ display:flex; gap:56px; align-items:center; max-width:1000px; margin:0 auto; text-decoration:none; color:inherit; }
.blog-feature__img{ flex:0 0 50%; }
.blog-feature__img img{ width:100%; height:auto; display:block; border-radius:2px; }
.blog-feature__body{ flex:1; }
.blog-feature__cat{ display:inline-block; background:#ece2d3; color:#6b6359; font-size:11px; padding:5px 12px; border-radius:2px; margin:0 0 18px; letter-spacing:.05em; }
.blog-feature__title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:22px; line-height:1.6; margin:0 0 18px; }
.blog-feature__excerpt{ font-size:14px; color:#6b6359; line-height:2; margin:0 0 24px; }
.blog-feature__more{ color:var(--terracotta); font-size:14px; }
@media (max-width:767px){
  .blog-feature{ flex-direction:column; gap:28px; }
  .blog-feature__img{ flex:none; width:100%; }
}


/* ===== CTA ===== */
.cta{
  position:relative;
  background:url(images/cta-bg.jpg) center/cover no-repeat;
  padding:96px 24px;
  text-align:center;
}
.cta::before{                 /* 明るいオーバーレイ（写真を淡くする） */
  content:""; position:absolute; inset:0;
  background:rgba(250,247,242,.82);
}
.cta__inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.cta__title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:26px; margin:0 0 20px; color:var(--ink); }
.cta__text{ font-size:14px; color:#6b6359; line-height:2; margin:0 0 32px; }
.cta__btn{
  display:inline-block; background:var(--terracotta); color:#fff; text-decoration:none;
  padding:16px 40px; border-radius:2px; font-size:15px; letter-spacing:.05em;
}
/* ===== 投稿・個別ページ（single.php） ===== */
.post-main{ background:var(--cream); }
.post-inner{ max-width:760px; margin:0 auto; padding:80px 24px 100px; }
.post__head{ text-align:center; margin:0 0 40px; }
.post__cat{ display:inline-block; background:#ece2d3; color:#6b6359; font-size:12px; padding:5px 14px; border-radius:2px; margin:0 0 20px; letter-spacing:.05em; }
.post__title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:28px; line-height:1.6; letter-spacing:0.05em; margin:0 0 16px; }
.post__date{ font-size:13px; color:#8f857a; }
.post__thumb{ margin:0 0 48px; }
.post__thumb img{ width:100%; height:auto; display:block; border-radius:3px; }
.post__content{ font-size:16px; line-height:2.1; color:var(--ink); }
.post__content p{ margin:0 0 28px; }
.post__content h2{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:22px; margin:48px 0 20px; }
.post__content h3{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:18px; margin:36px 0 16px; }
.post__content img{ max-width:100%; height:auto; border-radius:3px; }
.post__content a{ color:var(--terracotta); }
.post__back{ margin-top:56px; text-align:center; }

/* ===== BLOG一覧ページ（home.php） ===== */
.blog-archive{ background:var(--cream); }
.blog-archive__inner{ max-width:900px; margin:0 auto; padding:80px 24px 100px; }
.blog-archive__head{ text-align:center; margin:0 0 48px; }
.blog-item{ display:flex; gap:28px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.blog-item__img{ flex:0 0 200px; }
.blog-item__img img{ width:200px; height:140px; object-fit:cover; display:block; border-radius:2px; }
.blog-item__body{ flex:1; }
.blog-item__cat{ display:inline-block; background:#ece2d3; color:#6b6359; font-size:11px; padding:4px 10px; border-radius:2px; margin:0 0 10px; letter-spacing:.05em; }
.blog-item__title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:18px; line-height:1.6; margin:0 0 10px; }
.blog-item__excerpt{ font-size:13px; color:#6b6359; line-height:1.9; margin:0; }
.pagination{ margin-top:48px; text-align:center; }
.pagination .page-numbers{ display:inline-block; padding:8px 14px; margin:0 3px; border:1px solid var(--line); border-radius:2px; text-decoration:none; color:var(--ink); font-size:13px; }
.pagination .page-numbers.current{ background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
.pagination .screen-reader-text{ position:absolute; left:-9999px; }
@media (max-width:700px){
  .blog-item{ flex-direction:column; align-items:stretch; gap:14px; }
  .blog-item__img{ flex:none; }
  .blog-item__img img{ width:100%; height:200px; }
}

/* HOMEのBLOG「記事一覧を見る」ボタン */
.blog-sec__btnwrap{ text-align:center; margin-top:48px; }

/* ===== 下層ページ共通：ページヒーロー ===== */
.page-hero{ background:#f3ede4; text-align:center; padding:80px 24px; }
.page-hero__eyebrow{ font-size:12px; letter-spacing:.3em; color:var(--terracotta); margin:0 0 16px; }
.page-hero__title{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:30px; letter-spacing:.1em; margin:0 0 12px; }
.page-hero__sub{ font-size:13px; color:#6b6359; letter-spacing:.1em; margin:0; }

/* バー付き見出し */
.bar-title{ display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.bar-title .bar{ width:3px; height:20px; background:var(--terracotta); display:block; }
.bar-title h2{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:22px; line-height:1.1; letter-spacing:.05em; margin:0; }

/* プレースホルダー画像ボックス */
.ph-box{ background:#ece2d3; display:flex; align-items:center; justify-content:center; color:#8f857a; font-size:13px; border-radius:2px; }

/* ABOUT：アートメイクとは */
.ab-intro{ background:var(--cream); }
.ab-intro__inner{ max-width:1000px; margin:0 auto; padding:90px 24px; display:flex; gap:56px; align-items:center; }
.ab-intro__photo{ flex:0 0 44%; height:300px; }
.ab-intro__body p{ font-size:14px; line-height:2.1; color:#6b6359; margin:0 0 20px; }

/* ABOUT：こだわり */
.ab-commit{ background:#f3ede4; }
.ab-commit__inner{ max-width:1000px; margin:0 auto; padding:90px 24px; }
.ab-head{ text-align:center; margin:0 0 48px; }
.ab-commit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.commit-card{ background:#fff; border-radius:2px; padding:32px 30px; }
.commit-card__num{ font-family:"Noto Serif JP", serif; font-size:22px; color:var(--terracotta); }
.commit-card h3{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:17px; margin:10px 0 12px; }
.commit-card p{ font-size:13px; line-height:1.9; color:#6b6359; margin:0; }

/* ABOUT：アーティスト紹介（カード型・縦積み） */
.ab-artists{ background:var(--cream); }
.ab-artists__inner{ max-width:1000px; margin:0 auto; padding:90px 24px; }
.ab-artists__list{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch; }
.artist-card{ display:flex; flex-direction:column; gap:20px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:32px; box-shadow:0 8px 24px rgba(43,39,35,.10); }
.artist-card__photo{ width:100%; }
.artist-card__body{ display:flex; flex-direction:column; flex:1; min-width:0; }
.artist-card__store{ font-size:12px; color:var(--terracotta); letter-spacing:.1em; margin:0; }
.artist-card__name{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:20px; margin:6px 0 14px; color:var(--ink); }
.artist-card__intro{ font-size:15px; line-height:1.85; color:#6b6359; margin:0; }
.artist-card__link{ margin-top:auto; padding-top:18px; color:var(--terracotta); font-size:14px; text-decoration:none; letter-spacing:.03em; }
.artist-card__link:hover{ text-decoration:underline; }

/* ABOUT：施術の流れ */
.ab-flow{ background:#fff; }
.ab-flow__inner{ max-width:760px; margin:0 auto; padding:90px 24px; }
.flow-list{ list-style:none; margin:0; background:transparent; padding:0; }
.flow-item{ display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); }
.flow-item:last-child{ border-bottom:none; }
.flow-item__num{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--terracotta); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.flow-item__body h3{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:16px; margin:3px 0 8px; }
.flow-item__body p{ font-size:13px; line-height:1.9; color:#6b6359; margin:0; }

/* ABOUT レスポンシブ（スマホのみ縦積み・1カラム、タブレットはPC版と同じ） */
@media (max-width:767px){
  .ab-intro__inner{ flex-direction:column; }
  .ab-intro__photo{ flex:none; width:100%; }
  .ab-commit__grid{ grid-template-columns:1fr; }
  .ab-artists__list{ grid-template-columns:1fr; }
  .artist-card{ gap:20px; padding:24px; }
  .artist-card__intro{ font-size:14px; }
}

/* ===== MENU & PRICE ページ ===== */
.mp-prices{ background:var(--cream); }
.mp-prices__inner{ max-width:1000px; margin:0 auto; padding:80px 24px; display:flex; flex-direction:column; gap:60px; }
.price-block{ display:flex; gap:40px; align-items:flex-start; }
.price-block__photo{ flex:0 0 452px; }
.price-block__photo img{ width:452px; height:312px; object-fit:cover; border-radius:2px; display:block; }
.price-block__detail{ flex:1; }
.price-block__desc{ font-size:13px; line-height:1.9; color:#6b6359; margin:0 0 16px; }
.price-table{ width:100%; border-collapse:collapse; font-size:13px; }
.price-table th, .price-table td{ padding:12px 8px; border-bottom:1px solid var(--line); }
.price-table thead th{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:14px; text-align:left; }
.price-table th + th, .price-table td + td{ text-align:right; white-space:nowrap; }
.price-table .mo{ color:var(--terracotta); }

.bar-title h3{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:16px; letter-spacing:.05em; margin:0; }

/* お支払い・キャンセル */
.mp-policy{ background:#f3ede4; }
.mp-policy__inner{ max-width:1000px; margin:0 auto; padding:70px 24px 80px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.kv-box{ background:#fff; border-radius:2px; padding:28px 30px; }
.kv{ margin:16px 0 0; }
.kv > div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.kv > div:last-child{ border-bottom:none; }
.kv dt{ font-size:13px; color:#6b6359; margin:0; }
.kv dd{ font-size:13px; color:var(--ink); margin:0; text-align:right; }

/* 予約前確認事項 */
.mp-notice{ background:var(--cream); }
.mp-notice__inner{ max-width:820px; margin:0 auto; padding:80px 24px; }
.mp-notice__head{ text-align:center; margin:0 0 32px; }
.mp-notice__intro{ font-size:13px; color:#6b6359; line-height:1.9; margin:8px 0 0; }
.notice-box{ background:#fff; border-radius:2px; padding:32px 34px; display:flex; flex-direction:column; gap:24px; }
.check-group h3{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:15px; margin:0 0 12px; }
.check-group ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.check-group li{ display:flex; gap:10px; font-size:13px; color:#6b6359; line-height:1.7; }
.check-group li::before{ content:"✓"; color:var(--terracotta); flex:0 0 auto; }
.notice-important{ border-top:1px solid var(--line); padding-top:18px; display:flex; flex-direction:column; gap:8px; }
.notice-important p{ font-size:12px; color:var(--terracotta); line-height:1.7; margin:0; }

@media (max-width:767px){
  .price-block{ flex-direction:column; }
  .price-block__photo{ flex:none; width:100%; }
  .price-block__photo img{ width:100%; }
  .mp-policy__inner{ grid-template-columns:1fr; }
}

/* ===== 下層ページ===== */
.page-hero{ position:relative; text-align:center; aspect-ratio:1440/584; min-height:400px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; background-size:cover; background-position:center; overflow:hidden; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(135deg, #d9cbb8, #c7b49b); opacity:.7; }
.page-hero > *{ position:relative; z-index:1; }
.page-hero__title{ color:#fff; font-size:34px; letter-spacing:.2em; margin:0 0 14px; }
.page-hero__sub{ color:rgba(255,255,255,.9); }
.page-hero--about{ background-image:url(images/about-hero.jpg); }
.page-hero--menu{ background-image:url(images/menu-hero.jpg); }

/* アートメイクとは 写真 */
.ab-intro__photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:2px; }

/* こだわりカード（写真つき） */
.commit-card{ padding:0; overflow:hidden; }
.commit-card__img img{ width:100%; height:180px; object-fit:cover; display:block; }
.commit-card__body{ padding:24px 28px 28px; }

/* アーティスト写真 */
.artist-card__photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:6px; }

/* セクション透かし文字 */
.ab-commit, .ab-flow, .mp-prices{ position:relative; overflow:hidden; }
.ab-commit__inner, .ab-flow__inner, .mp-prices__inner{ position:relative; z-index:1; }
.ab-commit::before, .ab-flow::before, .mp-prices::before{
  position:absolute; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500; line-height:1;
  letter-spacing:.04em; color:#ece2d3; white-space:nowrap;
}
.ab-commit::before{ content:"COMMITMENT"; font-size:100px; top:40px; right:3%; }
.ab-flow::before{ content:"FLOW"; font-size:150px; top:50px; right:6%; }
.mp-prices::before{ content:"PRICE"; font-size:150px; top:30px; right:4%; }

/* ===== ACCESS ページ ===== */
.page-hero--access{ background-image:url(images/access-hero.jpg); }
.access-stores{ background:var(--cream); position:relative; overflow:hidden; }
/* ヒーローとカードの間を約200pxあける（透かし文字はその余白に収まる） */
.access-stores__inner{ max-width:1120px; margin:0 auto; padding:280px 24px 80px; position:relative; z-index:1; }
.store-cards{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch; }
.store-card{ display:flex; gap:20px; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:6px; padding:20px; box-shadow:0 6px 20px rgba(43,39,35,.08); }
.store-card__photo{ flex:0 0 180px; overflow:hidden; border-radius:4px; }
.store-card__photo img{ width:100%; height:100%; min-height:160px; object-fit:cover; display:block; }
.store-card__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.store-card__name{ font-family:"Noto Serif JP",serif; font-weight:500; font-size:20px; color:var(--ink); margin:0 0 6px; }
.store-card__sub{ font-size:13px; color:var(--terracotta); letter-spacing:.05em; margin:0 0 10px; }
.store-card__access{ font-size:14px; color:#6b6359; line-height:1.7; margin:0; }
.store-card__link{ margin-top:auto; padding-top:14px; color:var(--terracotta); font-size:14px; text-decoration:none; letter-spacing:.03em; }
.store-card__link:hover{ text-decoration:underline; }
.access-stores::before{ content:"ACCESS"; position:absolute; top:70px; left:-24px; z-index:0; pointer-events:none; font-family:"Noto Serif JP",serif; font-weight:500; font-size:150px; line-height:1; color:#ece2d3; letter-spacing:.04em; }
.access-cta{ background:#f4ece3; text-align:center; padding:64px 24px; }
.access-cta__title{ font-family:"Noto Serif JP",serif; font-weight:500; font-size:22px; letter-spacing:.05em; margin:0 0 14px; }
.access-cta__text{ font-size:13px; color:#6b6359; margin:0 0 28px; }
.access-cta__btn{ display:inline-block; background:var(--terracotta); color:#fff; text-decoration:none; padding:15px 40px; border-radius:2px; font-size:14px; letter-spacing:.05em; }
@media (max-width:767px){
  .access-stores__inner{ padding-top:200px; }
  .store-cards{ grid-template-columns:1fr; }
  .store-card{ flex-direction:column; }
  .store-card__photo{ flex:none; width:100%; }
  .store-card__photo img{ height:180px; min-height:0; }
  .access-stores::before{ font-size:110px; top:80px; }
}

/* ===== 各院ページ（立川院・稲城院） ===== */
.page-hero--clinic{ background-image:url(images/about-hero.jpg); background-position:center 22%; }

/* 担当アーティスト（写真＋全文プロフィール） */
.clinic-artist{ background:var(--cream); position:relative; overflow:hidden; }
.clinic-artist__inner{ max-width:1000px; margin:0 auto; padding:90px 24px; position:relative; z-index:1; }
.clinic-artist__card{ display:flex; gap:44px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:6px; padding:40px; box-shadow:0 8px 24px rgba(43,39,35,.10); }
.clinic-artist__photo{ flex:0 0 420px; max-width:420px; }
.clinic-artist__photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:6px; }
.clinic-artist__body{ flex:1; min-width:0; }
.clinic-artist__store{ font-size:12px; color:var(--terracotta); letter-spacing:.1em; margin:0; }
.clinic-artist__name{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:22px; margin:6px 0 18px; color:var(--ink); }
.clinic-artist__intro p{ font-size:15px; line-height:1.9; color:#6b6359; margin:0 0 1.6em; }
.clinic-artist__intro p:last-child{ margin-bottom:0; }

/* アクセス（情報＋地図） */
.clinic-access{ background:#fff; position:relative; overflow:hidden; }
.clinic-access__inner{ max-width:1120px; margin:0 auto; padding:90px 24px; position:relative; z-index:1; }
.clinic-access__cols{ display:flex; gap:40px; align-items:flex-start; }
.clinic-access__info{ flex:0 0 44%; }
.clinic-access__map{ flex:1; }
.clinic-access__map iframe{ width:100%; height:360px; border:0; border-radius:4px; display:block; }
.clinic-access__table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:14px; }
.clinic-access__table th, .clinic-access__table td{ padding:13px 4px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.clinic-access__table th{ width:84px; color:#6b6359; font-weight:normal; white-space:nowrap; }
.clinic-access__table td{ color:var(--ink); line-height:1.7; }

/* Google口コミ帯 */
.clinic-reviews{ background:var(--cream); }
.clinic-reviews__inner{ max-width:1120px; margin:0 auto; padding:44px 24px; text-align:center; }
.clinic-reviews__btn{ display:inline-block; background:#fff; border:1px solid var(--line); border-radius:2px; padding:12px 28px; font-size:14px; color:#6b6359; letter-spacing:.04em; }
.clinic-reviews__note{ font-size:12px; color:#a89e91; margin:12px 0 0; }

/* 各院ページ 透かし文字 */
.clinic-artist::before, .clinic-access::before{
  position:absolute; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500; line-height:1;
  letter-spacing:.04em; color:#ece2d3; white-space:nowrap;
}
.clinic-artist::before{ content:"ARTIST"; font-size:140px; top:50px; left:-24px; }
.clinic-access::before{ content:"ACCESS"; font-size:140px; top:50px; right:2%; }

@media (max-width:767px){
  .clinic-artist__card{ flex-direction:column; gap:24px; padding:24px; }
  .clinic-artist__photo{ flex:none; width:100%; max-width:100%; }
  .clinic-access__cols{ flex-direction:column; }
  .clinic-access__info{ flex:none; width:100%; }
  .clinic-artist::before, .clinic-access::before{ font-size:90px; }
}

/* ===== BLOG一覧ページ（2カラム＋サイドバー） ===== */
.page-hero--blog{ background-image:url(images/blog-hero.jpg); }
.blog-page{ background:var(--cream); }
.blog-page__inner{ max-width:1120px; margin:0 auto; padding:80px 24px 100px; display:flex; gap:56px; align-items:flex-start; }
.blog-page__main{ flex:1; min-width:0; }
.blog-page__side{ flex:0 0 260px; }

/* 投稿アイテム（横並び） */
.post-item{ display:flex; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }
.post-item:first-child{ padding-top:0; }
.post-item__thumb{ flex:0 0 180px; display:block; }
.post-item__thumb img{ width:180px; height:130px; object-fit:cover; display:block; border-radius:2px; }
.post-item__body{ flex:1; min-width:0; }
.post-item__cat{ display:inline-block; background:#ece2d3; color:#6b6359; font-size:11px; padding:4px 10px; border-radius:2px; margin:0 0 10px; letter-spacing:.05em; }
.post-item__title{ font-family:"Noto Serif JP",serif; font-weight:500; font-size:17px; line-height:1.5; margin:0 0 10px; }
.post-item__title a{ color:inherit; text-decoration:none; }
.post-item__excerpt{ font-size:13px; color:#6b6359; line-height:1.8; margin:0 0 12px; }
.post-item__more{ color:var(--terracotta); font-size:13px; text-decoration:none; }

/* サイドバー */
.widget{ margin:0 0 40px; }
.widget__title{ font-family:"Noto Serif JP",serif; font-weight:500; font-size:15px; letter-spacing:.1em; margin:0 0 14px; padding:0 0 10px; border-bottom:1px solid var(--line); }
.search-form{ display:flex; gap:8px; }
.search-form input[type=search]{ flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:2px; font-size:13px; }
.search-form button{ background:var(--terracotta); color:#fff; border:0; padding:0 16px; border-radius:2px; font-size:13px; cursor:pointer; }
.widget__list{ list-style:none; margin:0; padding:0; }
.widget__list li{ border-bottom:1px solid var(--line); }
.widget__list li a{ display:flex; justify-content:space-between; gap:10px; padding:11px 2px; color:var(--ink); text-decoration:none; font-size:13px; }
.widget__list .count{ color:#8f857a; flex:0 0 auto; }

@media (max-width:767px){
  .blog-page__inner{ flex-direction:column; }
  .blog-page__side{ flex:none; width:100%; }
  .post-item{ flex-direction:column; }
  .post-item__thumb img{ width:100%; height:200px; }
}

/* =========================================================
   レスポンシブ総点検（スマホ/タブレット）調整
   ========================================================= */

/* ----- モバイルナビ（ハンバーガー・JS不要） ----- */
.nav-toggle{ display:none; }        /* チェックボックス本体は常に非表示 */
.nav-toggle-btn{ display:none; }    /* PCではボタン非表示（テキストナビを表示） */

@media (max-width:980px){
  .site-header__inner{ position:relative; }

  /* ハンバーガーボタン */
  .nav-toggle-btn{
    display:block; width:28px; height:22px; position:relative; cursor:pointer; z-index:60;
  }
  .nav-toggle-btn__bar,
  .nav-toggle-btn__bar::before,
  .nav-toggle-btn__bar::after{
    content:""; position:absolute; left:0; width:28px; height:2px; background:var(--ink);
    transition:transform .25s ease, opacity .25s ease, background .25s ease;
  }
  .nav-toggle-btn__bar{ top:50%; transform:translateY(-50%); }
  .nav-toggle-btn__bar::before{ top:-9px; }
  .nav-toggle-btn__bar::after{  top:9px; }
  /* 開いた状態：×印 */
  .nav-toggle:checked + .nav-toggle-btn .nav-toggle-btn__bar{ background:transparent; }
  .nav-toggle:checked + .nav-toggle-btn .nav-toggle-btn__bar::before{ top:0; transform:rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-btn .nav-toggle-btn__bar::after{  top:0; transform:rotate(-45deg); }

  /* ドロップダウンメニュー */
  .global-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 8px 16px rgba(43,39,35,.08);
    max-height:0; overflow:hidden; transition:max-height .3s ease; z-index:50;
  }
  .nav-toggle:checked ~ .global-nav{ max-height:80vh; }
  .global-nav a{
    padding:15px 24px; border-bottom:1px solid var(--line);
    font-size:15px; letter-spacing:.1em;
  }
  .global-nav .nav-cta{
    background:var(--terracotta); color:#fff; text-align:center;
    border-bottom:none; margin:10px 24px 16px; border-radius:2px;
  }
}

/* =========================================================
   ABOUT：代表挨拶・監修体制（Mayu）※個人予約CTAなし
   ========================================================= */
.ab-message{ background:#f3ede4; position:relative; overflow:hidden; }
.ab-message__inner{ max-width:1000px; margin:0 auto; padding:90px 24px; position:relative; z-index:1; }
.ab-message__cols{ display:flex; gap:56px; align-items:flex-start; }
.ab-message__photo{ flex:0 0 40%; }
.ab-message__photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:2px; }
.ab-message__body{ flex:1; }
.ab-message__role{ font-size:12px; letter-spacing:.1em; color:var(--terracotta); margin:0; }
.ab-message__name{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:24px; letter-spacing:.06em; margin:6px 0 20px; }
.ab-message__greet p{ font-size:14px; line-height:2.1; color:#6b6359; margin:0 0 18px; }
.ab-message__supervise{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.ab-message__supervise h3{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:16px; margin:0 0 12px; }
.ab-message__supervise p{ font-size:13px; line-height:2; color:#6b6359; margin:0; }
.ab-message::before{
  content:"MESSAGE"; position:absolute; top:40px; right:3%; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500; font-size:110px; line-height:1; letter-spacing:.04em; color:#ece2d3; white-space:nowrap;
}
@media (max-width:800px){
  .ab-message__cols{ flex-direction:column; gap:28px; }
  .ab-message__photo{ flex:none; width:100%; }
  .ab-message::before{ font-size:64px; }
}

/* =========================================================
   MENU：確認後の予約CTA（予約前確認事項の直後）
   ========================================================= */
.mp-confirm{ background:#f3ede4; }
.mp-confirm__inner{ max-width:820px; margin:0 auto; padding:56px 24px; text-align:center; }
.mp-confirm__text{ font-size:14px; line-height:2; color:#6b6359; margin:0 0 24px; }
.mp-confirm__btn{
  display:inline-block; background:var(--terracotta); color:#fff; text-decoration:none;
  padding:16px 40px; border-radius:2px; font-size:15px; letter-spacing:.05em;
}

/* =========================================================
   FAQ：アコーディオン共通（MENUダイジェスト＋FAQページ）
   ========================================================= */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.faq-item > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 52px 18px 22px;
  font-family:"Noto Serif JP", serif; font-weight:500; font-size:15px; line-height:1.7; color:var(--ink);
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::before{
  content:"Q"; color:var(--terracotta); font-size:14px; margin-right:10px;
}
.faq-item > summary::after{
  content:""; position:absolute; top:50%; right:22px; width:12px; height:12px;
  margin-top:-6px; pointer-events:none;
  background:
    linear-gradient(var(--terracotta),var(--terracotta)) center/12px 2px no-repeat,
    linear-gradient(var(--terracotta),var(--terracotta)) center/2px 12px no-repeat;
  transition:transform .25s ease;
}
.faq-item[open] > summary::after{ transform:rotate(45deg); }
.faq-item__a{ padding:0 22px 20px 22px; }
.faq-item__a p{ font-size:13px; line-height:2; color:#6b6359; margin:0; }
.faq-item__a a{ color:var(--terracotta); }

/* 記事内Q&Aパターン（コアの「詳細」ブロックで組んだ場合）：回答部分の余白・文字 */
.faq-item.wp-block-details > :not(summary){ margin:0; padding:0 22px; font-size:13px; line-height:2; color:#6b6359; }
.faq-item.wp-block-details > :not(summary):first-of-type{ padding-top:4px; }
.faq-item.wp-block-details > :not(summary):last-child{ padding-bottom:20px; }
.faq-item.wp-block-details a{ color:var(--terracotta); }

/* MENU：よくある質問ダイジェスト */
.mp-faq{ background:var(--cream); }
.mp-faq__inner{ max-width:820px; margin:0 auto; padding:80px 24px; }
.mp-faq__head{ text-align:center; margin:0 0 32px; }
.mp-faq__more{ text-align:center; margin:28px 0 0; }
.mp-faq__more a{ display:inline-block; color:var(--terracotta); text-decoration:none; font-size:14px; border-bottom:1px solid var(--terracotta); padding-bottom:2px; }

/* HOME：よくある質問ダイジェスト（BLOGの次） */
.home-faq{ background:var(--cream); position:relative; overflow:hidden; }
.home-faq__inner{ max-width:820px; margin:0 auto; padding:100px 24px; position:relative; z-index:1; }
.home-faq__head{ text-align:center; margin:0 0 40px; }
.home-faq__btnwrap{ text-align:center; margin-top:40px; }
.home-faq::before{
  content:"FAQ"; position:absolute; top:60px; right:3%; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500; font-size:140px; line-height:1; letter-spacing:.05em; color:#ece2d3;
}
@media (max-width:900px){
  .home-faq::before{ font-size:78px; }
}

/* =========================================================
   FAQ ページ（page-faq.php）
   ========================================================= */
.page-hero--faq{ background-image:url(images/faq-hero.jpg); }
.faq-sec{ background:var(--cream); position:relative; overflow:hidden; }
.faq-sec__inner{ max-width:820px; margin:0 auto; padding:80px 24px; position:relative; z-index:1; }
.faq-sec__lead{ text-align:center; font-size:14px; line-height:2; color:#6b6359; margin:0 0 48px; }
/* 日本語の文節を塊で折り返す（語の途中で改行させない）ユーティリティ */
.nb{ display:inline-block; }
@media (max-width:767px){ .pc-only{ display:none; } }
.faq-cat{ margin:0 0 48px; }
.faq-cat:last-child{ margin-bottom:0; }
.faq-sec::before{
  content:"FAQ"; position:absolute; top:40px; right:4%; z-index:0; pointer-events:none;
  font-family:"Noto Serif JP", serif; font-weight:500; font-size:150px; line-height:1; letter-spacing:.04em; color:#ece2d3;
}
@media (max-width:800px){
  .faq-sec::before{ font-size:78px; }
}

/* ----- 下層ページ・ヒーローの幅膨張バグ対策 -----
   aspect-ratio と min-height の併用で viewport<986px 時に
   幅が逆算され横スクロールが発生するため、狭い画面では比率を解除 */
@media (max-width:1000px){
  .page-hero{ aspect-ratio:auto; min-height:340px; }
}
@media (max-width:640px){
  .page-hero{ min-height:240px; padding:32px 20px; }
  .page-hero__title{ font-size:26px; letter-spacing:.15em; }
  .page-hero__sub{ font-size:12px; }
  
  /* 固定の予約バー（下部）に最終コンテンツが隠れないよう余白 */
  body{ padding-bottom:64px; }
}

/* =========================================================
   下層：リーガル（プライバシーポリシー）
   ========================================================= */
/* 写真なしの短めヒーロー（グラデーション帯） */
.page-hero--legal{ aspect-ratio:auto; min-height:220px; background:#e7ddce; }
.page-hero--legal .page-hero__eyebrow{ color:rgba(255,255,255,.9); letter-spacing:.3em; font-size:12px; margin:0 0 12px; }

.legal{ background:var(--cream); }
.legal__inner{ max-width:820px; margin:0 auto; padding:64px 24px 96px; }

/* WP編集画面の本文（見出し・段落・リスト等）を既存トーンで自動整形 */
.legal__body h2{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:19px; letter-spacing:.04em; color:var(--ink); margin:40px 0 14px; padding:0 0 12px; border-bottom:1px solid var(--line); }
.legal__body h2:first-child{ margin-top:0; }
.legal__body h3{ font-family:"Noto Serif JP", serif; font-weight:500; font-size:16px; letter-spacing:.04em; color:var(--ink); margin:28px 0 10px; }
.legal__body p{ font-size:14px; color:#6b6359; line-height:2; margin:0 0 14px; }
.legal__body ul, .legal__body ol{ margin:0 0 16px; padding-left:1.3em; }
.legal__body li{ font-size:14px; color:#6b6359; line-height:1.95; margin:0 0 6px; }
.legal__body a{ color:var(--terracotta); }
.legal__body strong{ color:var(--ink); font-weight:500; }
.legal__body > :last-child{ margin-bottom:0; }

@media (max-width:767px){
  .legal__inner{ padding:48px 20px 72px; }
  .legal__body h2{ font-size:17px; }
}