/*
Theme Name: plumas
Theme URI: https://plumas.jp/
Author: Body Box Co., Ltd.
Description: プライベートサロン plumas のオリジナルテーマ。白とごく淡い紫みのグレーを基調とした1ページ構成のコーポレートサイト。
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.1
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: plumas
*/

:root{
    --paper:#FFFFFF;
    --bg:#FBFAFB;
    --bg-alt:#F1EFF2;
    --bg-deep:#E5E1E8;
    --ink:#363139;
    --ink-soft:#655F6A;
    --muted:#716B77;
    --line:#E4E0E8;
    --line-soft:#EFECF1;
    --accent:#857D8C;
    --accent-deep:#4A4450;
    --silver:#C2BCC8;
    --shadow:0 40px 80px -56px rgba(54,49,57,.42);
    --serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --lat:"Jost", "Helvetica Neue", Arial, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    /* 本文も明朝体。ゴシックは使用しない（--sans は従来の変数名を維持） */
    --sans:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --gutter:clamp(20px, 6vw, 100px);
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    /* 明朝体は画面上で細く見えるため、本文は300ではなく400を基準にする */
    font-weight:400;
    font-size:15.5px;
    line-height:2.05;
    letter-spacing:.04em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation:none!important; transition:none!important;}
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--bg-deep);}

  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
  section{padding-block:clamp(80px, 11vw, 148px);}

  .eyebrow{
    font-family:var(--lat);
    font-size:11px; font-weight:400;
    letter-spacing:.48em; text-transform:uppercase;
    color:var(--accent);
    margin:0 0 24px;
  }
  .eyebrow.center{text-align:center;}

  h1,h2,h3{margin:0; font-weight:300; text-wrap:balance;}
  .sec-title{
    font-family:var(--serif); font-weight:300;
    font-size:clamp(24px, 4.2vw, 38px);
    line-height:1.72; letter-spacing:.09em; color:var(--ink);
  }
  .lead{color:var(--ink-soft); line-height:2.3; font-weight:400;}
  .rule{width:1px; height:56px; background:var(--silver); margin:0 auto;}

  /* ---------- header ---------- */
  header{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
    background:rgba(251,250,251,.82);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid transparent;
    transition:background .45s ease, border-color .45s ease;
  }
  header.scrolled{background:rgba(251,250,251,.96); border-color:var(--line);}
  .nav{max-width:var(--maxw); margin-inline:auto; padding:17px var(--gutter);
       display:flex; align-items:center; justify-content:space-between; gap:20px;}
  .brand{display:flex; flex-direction:column; line-height:1;}
  .brand .mark{font-family:var(--lat); font-weight:300; font-size:25px; letter-spacing:.34em; color:var(--ink); padding-left:.06em;}
  .brand .sub{font-family:var(--lat); font-size:8.5px; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:7px; padding-left:.1em;}
  .menu{display:flex; align-items:center; gap:32px;}
  .menu a{font-family:var(--lat); font-size:12px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); transition:color .3s;}
  .menu a:hover{color:var(--ink);}
  .btn{
    font-family:var(--sans); font-size:12.5px; font-weight:400; letter-spacing:.18em;
    padding:13px 28px; border:1px solid var(--ink); color:var(--ink);
    background:transparent; border-radius:0; cursor:pointer; white-space:nowrap;
    display:inline-block; transition:background .35s ease, color .35s ease, border-color .35s ease;
  }
  .btn:hover{background:var(--ink); color:#fff;}
  .btn.solid{background:var(--ink); color:#fff;}
  .btn.solid:hover{background:var(--accent-deep); border-color:var(--accent-deep);}
  .btn.light{border-color:rgba(255,255,255,.7); color:#fff;}
  .btn.light:hover{background:#fff; color:var(--ink); border-color:#fff;}
  /* スマホ・タブレットのヘッダーに常設する予約ボタン（PCでは非表示） */
  .btn-sp-reserve{display:none;}
  .menu-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink); z-index:70;}
  .menu-toggle span{display:block; width:24px; height:1px; background:currentColor; margin:6px 0;}

  /* ---------- hero ---------- */
  .hero{position:relative; padding:0; min-height:clamp(520px, 84vh, 760px); display:flex; align-items:flex-end; overflow:hidden;}
  .hero-bg{position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(70% 55% at 62% 28%, rgba(255,255,255,.96), rgba(255,255,255,0) 62%),
      radial-gradient(90% 70% at 15% 88%, rgba(214,214,210,.55), rgba(214,214,210,0) 60%),
      linear-gradient(168deg, #F9F5FA 0%, #EEEAED 46%, #E0DCDE 100%);
  }
  .hero-bg::after{content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(255,255,255,.82) 0%, rgba(255,255,255,.35) 34%, rgba(255,255,255,0) 66%);}
  .hero .wrap{position:relative; z-index:2; width:100%; padding-block:clamp(48px, 8vw, 96px) clamp(44px, 7vw, 80px);}
  .hero-inner{max-width:680px;}
  .hero .kicker{font-family:var(--lat); font-size:10.5px; font-weight:400; letter-spacing:.46em; text-transform:uppercase; color:var(--accent); margin:0 0 30px;}
  /* 日本語のキッカー。欧文用の詰めと大文字化はここでは使わない */
  .hero .kicker-ja{font-family:var(--serif); font-size:12px; letter-spacing:.18em; text-transform:none;}
  @media (max-width:420px){ .hero .kicker-ja{font-size:11px; letter-spacing:.12em;} }
  .hero h1{font-family:var(--serif); font-weight:200;
    font-size:clamp(27px, 5vw, 48px); line-height:1.78; letter-spacing:.1em; color:var(--ink); margin-bottom:28px;}
  /* 「完全プライベートサロン。」が狭い画面で1行に収まるよう調整する */
  @media (max-width:430px){ .hero h1{font-size:25px; letter-spacing:.05em; text-wrap:balance;} }
  @media (max-width:360px){ .hero h1{font-size:22px;} }
  .hero p{color:var(--ink-soft); max-width:40ch; line-height:2.25; margin:0 0 40px; font-size:14.5px;}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
  .hero-meta{display:flex; gap:clamp(20px,4vw,48px); flex-wrap:wrap; margin-top:46px; padding-top:26px; border-top:1px solid rgba(54,49,57,.14);}
  .hero-meta div{display:flex; flex-direction:column; gap:5px;}
  .hero-meta .k{font-family:var(--lat); font-size:9.5px; font-weight:400; letter-spacing:.32em; text-transform:uppercase; color:var(--muted);}
  .hero-meta .v{font-size:13px; color:var(--ink); letter-spacing:.05em;}

  /* ---------- hero video ---------- */
  .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    z-index:0; opacity:0; transition:opacity 1.2s ease;}
  .hero-video.ready{opacity:1;}
  .hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 34%,
               rgba(255,255,255,.34) 64%, rgba(255,255,255,.12) 100%);}
  @media (max-width:860px){
    .hero-scrim{background:linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.91) 52%, rgba(255,255,255,.60) 100%);}
  }
  /* スマホ：写真の上側にゆとりを作り、オーナーが文字と重ならず顔まで見えるようにする。
     白のかぶせは、文字のある左側を濃く、人物のいる右側を薄くして両立させる。 */
  @media (max-width:700px){
    .hero{min-height:94svh;}
    .hero-scrim{background:
      linear-gradient(to top, rgba(255,255,255,.93) 0%, rgba(255,255,255,.87) 56%,
        rgba(255,255,255,.50) 78%, rgba(255,255,255,.10) 100%),
      linear-gradient(to right, rgba(255,255,255,.66) 0%, rgba(255,255,255,.38) 50%,
        rgba(255,255,255,0) 74%);}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-video{display:none;}
  }

  /* 背景に写真・動画があるときは小さな英字のコントラストを確保する */
  .hero:has(.hero-bg.photo) .kicker,
  .hero:has(.hero-video) .kicker{color:var(--accent-deep);}
  .hero:has(.hero-bg.photo) p,
  .hero:has(.hero-video) p{color:var(--ink);}
  .hero:has(.hero-bg.photo) .hero-meta .k,
  .hero:has(.hero-video) .hero-meta .k{color:var(--ink-soft);}

  /* ---------- statement ---------- */
  .statement{background:var(--bg);}
  .statement .inner{max-width:720px; margin-inline:auto; text-align:center;}
  .statement .sec-title{margin-bottom:36px;}
  .statement .lead{font-size:15px;}
  .statement .rule{margin-top:52px;}

  /* ---------- brand name origin（マスコット） ---------- */
  .name-origin{
    display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr);
    gap:clamp(28px,5vw,64px); align-items:center;
    max-width:880px; margin:clamp(56px,7vw,86px) auto 0;
    padding-top:clamp(44px,5vw,62px); border-top:1px solid var(--line);
  }
  .origin-photo{
    aspect-ratio:3/4; border:1px solid var(--line);
    background:linear-gradient(200deg,#F9F4F8 0%, #F0E9EA 55%, #E4DCDB 100%);
  }
  .origin-text .eyebrow{margin-bottom:18px;}
  .origin-text h3{
    font-family:var(--serif); font-weight:300;
    font-size:clamp(19px,2.6vw,24px); line-height:1.75; letter-spacing:.08em;
    color:var(--ink); margin-bottom:20px; text-wrap:balance;
  }
  .origin-text p{
    font-size:13.5px; line-height:2.2; color:var(--ink-soft); margin:0 0 14px;
  }
  .origin-text p:last-child{margin-bottom:0;}

  @media (max-width:720px){
    .name-origin{grid-template-columns:1fr; gap:26px; text-align:center;}
    .origin-photo{max-width:220px; width:100%; margin-inline:auto;}
    .origin-text .eyebrow{justify-content:center;}
    .origin-text p{text-align:left;}
  }

  /* ---------- first visit ---------- */
  .first{background:var(--bg-alt);}
  .first-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); background:var(--paper);}
  .first-photo{position:relative; min-height:380px;
    background:
      radial-gradient(60% 50% at 40% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 65%),
      linear-gradient(200deg, #F4F0F4 0%, #E1DDDF 55%, #D1CDCE 100%);}
  .first-body{padding:clamp(34px, 5vw, 62px); display:flex; flex-direction:column; justify-content:center;}
  .first-body h2{font-family:var(--serif); font-weight:300; font-size:clamp(21px,3vw,27px); line-height:1.75; letter-spacing:.08em; margin-bottom:20px;}
  .first-body p{color:var(--ink-soft); font-size:14px; line-height:2.2; margin:0 0 30px; max-width:40ch;}
  .first-list{list-style:none; margin:0 0 30px; padding:0; max-width:40ch;}
  .first-list li{position:relative; padding-left:22px; color:var(--ink); font-size:13.5px;
    line-height:1.95; letter-spacing:.04em;}
  .first-list li + li{margin-top:11px;}
  .first-list li::before{content:""; position:absolute; left:0; top:.82em;
    width:11px; height:1px; background:var(--accent);}
  .first-price{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:30px;}
  .first-price .name{font-size:13px; color:var(--ink); letter-spacing:.06em;}
  .first-price .num{font-family:var(--lat); font-weight:300; font-size:34px; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums;}
  .first-price .yen{font-size:13px; color:var(--ink-soft); margin-left:-6px;}
  .first-price .amount{display:inline-flex; align-items:baseline; white-space:nowrap;}
  .first-price .was{font-family:var(--lat); font-size:14px; color:var(--muted); text-decoration:line-through;}
  .first-price .tag{font-family:var(--lat); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--paper); background:var(--ink); padding:5px 11px;}

  /* ---------- menu ---------- */
  .menu-sec{background:var(--bg);}
  .menu-sec .head{text-align:center; margin-bottom:clamp(44px,6vw,64px);}
  .menu-sec .head .lead-sm{color:var(--ink-soft); font-size:13.5px; line-height:2.1; max-width:54ch; margin:20px auto 0;}

  /* 大分類（ボディ／フェイシャル／オプション） */
  .m-family{margin-bottom:clamp(46px,6vw,72px);}
  .m-family:last-of-type{margin-bottom:0;}
  .m-family-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px;
    padding-bottom:14px; border-bottom:1px solid var(--ink); margin-bottom:22px;}
  .m-family-head .ja{font-family:var(--serif); font-weight:300; font-size:19px; letter-spacing:.14em; color:var(--ink);}
  .m-family-head .en{font-family:var(--lat); font-size:9.5px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);}
  .m-family-head .note{margin-left:auto; font-size:12px; color:var(--ink-soft); letter-spacing:.04em;}

  /* メニューは1枚ずつの枠に分け、並べて見比べられるようにする */
  .m-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:start;}
  .m-group{border:1px solid var(--line); background:var(--paper); padding:clamp(24px,3vw,32px);}
  .m-group-wide{grid-column:1 / -1;}

  .m-head h3{font-family:var(--serif); font-weight:300; font-size:20px; letter-spacing:.09em; color:var(--ink); line-height:1.6;}
  .m-head h3 .sub-ja{font-size:13.5px; letter-spacing:.06em; color:var(--ink-soft); margin-left:4px;}
  .m-head .en{font-family:var(--lat); font-size:10px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:8px;}

  /* 他との違いを1行で示す */
  .m-tag{font-size:13px; line-height:1.95; color:var(--ink); letter-spacing:.05em;
    margin:16px 0 0; padding-left:13px; border-left:2px solid var(--accent);}
  .m-range{font-size:11.5px; line-height:1.9; color:var(--muted); letter-spacing:.06em; margin:9px 0 0;}
  .m-head p:not(.m-tag):not(.m-range){color:var(--ink-soft); font-size:13px; line-height:2.05; margin:14px 0 0;}

  .m-link{display:inline-flex; align-items:center; gap:12px; margin-top:16px;
    font-size:12.5px; letter-spacing:.08em; color:var(--ink);
    padding-bottom:5px; border-bottom:1px solid var(--line); transition:border-color .35s ease, color .35s ease;}
  .m-link .ex{font-family:var(--lat); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);}
  .m-link::after{content:"\2197"; font-size:11px; color:var(--muted); line-height:1;}
  .m-link:hover{border-bottom-color:var(--ink); color:var(--accent-deep);}

  .m-items{margin-top:20px; border-top:1px solid var(--line);}
  .m-items-flush{margin-top:0; border-top:0;}
  .m-item{display:grid; grid-template-columns:1fr auto; gap:clamp(16px,3vw,36px); align-items:baseline;
    padding:17px 0; border-bottom:1px solid var(--line-soft);}
  .m-items .m-item:last-child{border-bottom:0; padding-bottom:0;}
  .m-items-flush .m-item:first-child{padding-top:0;}
  .m-item .lbl{font-size:14px; color:var(--ink); letter-spacing:.05em;}
  .m-item .lbl small{display:block; font-size:12px; color:var(--muted); margin-top:3px; letter-spacing:.04em;}
  .m-item .val{font-family:var(--lat); font-weight:300; font-size:19px; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:.03em;}
  .m-item .val em{font-style:normal; font-size:12px; color:var(--ink-soft); margin-left:3px;}
  .m-item .val .first-tag{display:block; font-family:var(--sans); font-size:11px; color:var(--accent); letter-spacing:.08em; margin-top:5px; text-align:right;}
  .price-note{margin-top:clamp(34px,4vw,46px); font-size:12px; color:var(--muted); line-height:2; letter-spacing:.04em;}

  @media (max-width:860px){
    .m-grid{grid-template-columns:1fr;}
    .m-family-head .note{margin-left:0; width:100%;}
  }

  /* ---------- treatment video ---------- */
  .treat{background:var(--bg-alt);}
  .treat .head{text-align:center; margin-bottom:clamp(36px,5vw,54px);}
  .treat .lead-sm{color:var(--ink-soft); font-size:14px; line-height:2.15; max-width:50ch; margin:20px auto 0;}
  .treat .player{max-width:900px; margin-inline:auto; border:1px solid var(--line); background:#363139;
    aspect-ratio:16/9; overflow:hidden; position:relative;}

  /* 動画のテロップ（再生時間を行数で等分して順に切り替わる） */
  .treat .telop{position:absolute; inset:auto 0 0 0; pointer-events:none;
    display:grid; min-height:30%; align-items:end;
    padding:clamp(16px,3vw,30px) clamp(18px,4vw,42px);
    background:linear-gradient(to top, rgba(40,36,43,.74) 0%, rgba(40,36,43,.46) 46%, rgba(40,36,43,0) 100%);}
  .treat .telop span{grid-area:1/1; color:#fff; opacity:0; transition:opacity .7s ease;
    font-size:clamp(13px,1.9vw,17px); line-height:1.9; letter-spacing:.06em;
    text-shadow:0 1px 10px rgba(26,23,28,.46); text-wrap:balance;}
  .treat .telop span.on{opacity:1;}
  @media (prefers-reduced-motion:reduce){ .treat .telop span{transition:none;} }

  .treat .cap .cap-sub{display:inline-block; margin-top:6px; color:var(--muted);}
  .treat .player video{display:block; width:100%; height:100%; object-fit:cover; background:#363139;}
  .treat .player video.treat-video{opacity:0; transition:opacity 1s ease;}
  .treat .player video.treat-video.ready{opacity:1;}
  .treat .ph{max-width:900px; margin-inline:auto; border:1px solid var(--line); aspect-ratio:16/9;
    background:linear-gradient(200deg,#F4F0F4 0%, #E4E0E2 56%, #D4D0D1 100%);
    display:flex; align-items:center; justify-content:center;}
  .treat .ph span{font-size:12px; color:var(--muted); letter-spacing:.08em; background:rgba(255,255,255,.84);
    border:1px solid #CBC8CB; padding:9px 18px;}
  .treat .cap{max-width:900px; margin:16px auto 0; font-size:11.5px; color:var(--muted); letter-spacing:.05em; text-align:center;}

  /* ---------- reasons ---------- */
  .reasons{background:var(--bg-alt);}
  .reasons .head{text-align:center; margin-bottom:clamp(46px,6vw,70px);}
  .r-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px);}
  .r-cell .no{font-family:var(--lat); font-size:10.5px; font-weight:400; letter-spacing:.3em; color:var(--silver); display:block; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px;}
  .r-cell h3{font-family:var(--serif); font-weight:400; font-size:16.5px; letter-spacing:.07em; color:var(--ink); margin-bottom:14px; line-height:1.8;}
  .r-cell p{font-size:13px; color:var(--ink-soft); line-height:2.1; margin:0;}

  /* ---------- owner ---------- */
  .owner{background:var(--bg);}
  .owner-grid{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(34px,6vw,86px); align-items:center;}
  .owner-photo{aspect-ratio:3/4; max-width:380px; width:100%; border:1px solid var(--line);
    background:
      radial-gradient(60% 45% at 45% 28%, rgba(255,255,255,.92), rgba(255,255,255,0) 62%),
      linear-gradient(196deg, #F6F2F6 0%, #E4E0E2 52%, #D2CECF 100%);}
  .owner h2{margin-bottom:28px;}
  .owner p{color:var(--ink-soft); line-height:2.3; margin:0 0 22px; max-width:46ch; font-size:14.5px;}
  .owner .sig{margin-top:30px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px;}
  .owner .sig .role{font-family:var(--lat); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);}
  .owner .sig .role.ja{font-family:var(--serif); font-size:11.5px; letter-spacing:.22em; text-transform:none;}
  .owner .sig .nm{font-family:var(--serif); font-size:17px; letter-spacing:.14em; color:var(--ink);}
  .owner .sig .nm-en{font-family:var(--lat); font-weight:300; font-size:11px; letter-spacing:.18em; color:var(--muted);}

  /* ---------- info ---------- */
  .info{background:var(--bg-alt);}
  .info .head{text-align:center; margin-bottom:clamp(46px,6vw,70px);}
  .info-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,70px);}
  .info-table{width:100%; border-collapse:collapse;}
  .info-table th,.info-table td{text-align:left; vertical-align:top; padding:17px 0; border-bottom:1px solid var(--line); font-weight:400;}
  .info-table th{width:124px; font-family:var(--serif); font-weight:400; font-size:13px; letter-spacing:.12em; color:var(--ink);}
  .info-table td{font-size:13.5px; color:var(--ink-soft); font-weight:400;}
  .info-table td small{color:var(--muted); font-size:12px;}
  .pay span{display:inline-block; font-family:var(--lat); font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft);
    border:1px solid var(--line); padding:5px 12px; margin:0 5px 5px 0; background:var(--paper);}
  .loc{background:var(--paper); border:1px solid var(--line); padding:clamp(28px,4vw,42px); display:flex; flex-direction:column; justify-content:center; gap:14px;}
  .loc .area{font-family:var(--serif); font-weight:300; font-size:22px; letter-spacing:.1em; color:var(--ink); line-height:1.7;}
  .loc .walk{font-size:13.5px; color:var(--ink-soft); line-height:2.1;}
  .loc .small{font-size:11.5px; color:var(--muted); line-height:1.9; margin-top:6px;}

  /* ---------- faq ---------- */
  .faq{background:var(--bg);}
  .faq .head{text-align:center; margin-bottom:clamp(42px,6vw,64px);}
  .faq-list{max-width:820px; margin-inline:auto; border-top:1px solid var(--line);}
  details{border-bottom:1px solid var(--line);}
  summary{list-style:none; cursor:pointer; padding:25px 44px 25px 0; position:relative;
    font-family:var(--serif); font-weight:400; font-size:15.5px; color:var(--ink); letter-spacing:.06em; line-height:1.8;}
  summary::-webkit-details-marker{display:none;}
  summary::after{content:""; position:absolute; right:6px; top:36px; width:11px; height:1px; background:var(--ink);}
  summary::before{content:""; position:absolute; right:11px; top:31px; width:1px; height:11px; background:var(--ink); transition:opacity .3s;}
  details[open] summary::before{opacity:0;}
  details .a{padding:0 40px 28px 0; font-size:13.5px; color:var(--ink-soft); line-height:2.2;}


/* ---------- salon gallery ---------- */
.salon{background:var(--bg);}
.salon .head{text-align:center; margin-bottom:clamp(40px,5vw,62px);}
.salon .lead-sm{color:var(--ink-soft); font-size:13.5px; line-height:2.1; max-width:48ch; margin:18px auto 0;}
.s-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px);}
.s-cell{aspect-ratio:4/5; border:1px solid var(--line); position:relative;
  background:linear-gradient(200deg,#F6F2F6 0%, #E6E2E4 55%, #D6D2D3 100%);}
.s-cell:not(.photo):nth-child(2){background:linear-gradient(160deg,#F9F5FA 0%, #EAE6E8 58%, #DBD7D8 100%);}
.s-cell:not(.photo):nth-child(3){background:linear-gradient(226deg,#F4F0F4 0%, #E3DFE1 56%, #D2CECF 100%);}
.s-cap{margin-top:14px; font-size:11.5px; color:var(--muted); letter-spacing:.06em; text-align:center;}

@media (max-width:860px){
  .s-grid{grid-template-columns:repeat(3,1fr); gap:10px;}
}
@media (max-width:640px){
  .s-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .s-grid .s-cell:nth-child(3){grid-column:1 / -1; aspect-ratio:16/10;}
}


/* ---------- instagram ---------- */
.insta{background:var(--bg);}
.insta .head{text-align:center; margin-bottom:clamp(38px,5vw,58px);}
.insta .lead-sm{color:var(--ink-soft); font-size:13.5px; line-height:2.1; max-width:46ch; margin:18px auto 0;}
.insta .handle{font-family:var(--lat); font-size:12px; letter-spacing:.2em; color:var(--muted); margin-top:14px;}
.insta .feed{margin-top:8px;}
.insta .more{display:flex; justify-content:center; margin-top:clamp(30px,4vw,46px);}
.insta-group + .insta-group{margin-top:clamp(44px,6vw,72px); padding-top:clamp(40px,5vw,60px); border-top:1px solid var(--line);}
.insta-label{font-family:var(--serif); font-size:14px; letter-spacing:.14em; color:var(--ink);
  text-align:center; margin:0 0 clamp(20px,2.6vw,30px);}
.insta-label::after{content:""; display:block; width:22px; height:1px; background:var(--accent);
  margin:14px auto 0;}
.insta-more{display:flex; justify-content:center; margin-top:clamp(22px,3vw,32px);}
@media (max-width:640px){
  .insta-label{font-size:13px; letter-spacing:.1em;}
}

/* 投稿URLを貼り付けたときの公式埋め込み */
.insta-posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start;}
.insta-posts > *{min-width:0;}
.insta-posts .instagram-media,
.insta-posts .instagram-media-rendered{
  width:100% !important; min-width:0 !important; max-width:100% !important;
  margin:0 !important; border-radius:0 !important; box-shadow:none !important;
  border:1px solid var(--line) !important;
}
/* Instagram側のスクリプトが動かなかったときでも、枠として成立させる */
.insta-posts .instagram-media:not(.instagram-media-rendered){
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; padding:20px !important;
  background:linear-gradient(200deg,#F9F5F9 0%, #EEEAEC 60%, #E2DEDF 100%);
}
.insta-posts .instagram-media:not(.instagram-media-rendered) a{
  font-size:12px; letter-spacing:.08em; line-height:1.9; color:var(--ink);
  text-align:center; border-bottom:1px solid var(--line); padding-bottom:4px;
}

/* 枚数に応じて列数を変える（4枚のときに1枚だけ余るのを避ける） */
.insta-posts[data-count="1"]{grid-template-columns:minmax(0,1fr); max-width:420px; margin-inline:auto;}
.insta-posts[data-count="2"],
.insta-posts[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; margin-inline:auto;}
@media (max-width:980px){ .insta-posts{grid-template-columns:repeat(2,minmax(0,1fr));} }
.insta-swipe{display:none; text-align:center; margin-top:14px;
  font-family:var(--lat); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);}

/* スマホでは縦に積まず、横スワイプで見せる。
   Instagramの埋め込みは幅326px未満だと崩れるため、2列には分けられない。 */
@media (max-width:640px){
  .insta-posts,
  .insta-posts[data-count="1"],
  .insta-posts[data-count="2"],
  .insta-posts[data-count="4"]{
    display:flex; max-width:none; margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter); gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .insta-posts::-webkit-scrollbar{display:none;}
  .insta-posts > *{flex:0 0 min(340px, 90vw); max-width:340px; scroll-snap-align:center;}
  .insta-swipe{display:block;}
}

/* 括弧の途中で改行させない */
.nw{display:inline-block; white-space:nowrap;}

/* 自前のフォールバック（プラグイン未設定のとき） */
.insta-fallback{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.insta-fallback .cell{aspect-ratio:1/1; border:1px solid var(--line);
  background:linear-gradient(200deg,#F6F2F6 0%, #E8E4E6 55%, #DAD6D7 100%);}
.insta-fallback .cell:not(.photo):nth-child(2){background:linear-gradient(160deg,#F9F5FA 0%, #EBE7E9 60%, #DEDADB 100%);}
.insta-fallback .cell:not(.photo):nth-child(3){background:linear-gradient(220deg,#F4F0F4 0%, #E4E0E2 58%, #D4D0D1 100%);}
.insta-fallback .cell:not(.photo):nth-child(4){background:linear-gradient(140deg,#F8F4F8 0%, #E9E5E7 55%, #DBD7D8 100%);}
.insta-note{margin-top:16px; text-align:center; font-size:11.5px; color:var(--muted); letter-spacing:.04em;}

@media (max-width:720px){
  .insta-fallback{grid-template-columns:repeat(2,1fr); gap:8px;}
}

/* ---------- Instagram プラグイン（Smash Balloon 等）の見た目調整 ---------- */
.insta .feed #sb_instagram,
.insta .feed .sbi_header_link,
.insta .feed #sbi_images{padding:0 !important; background:transparent !important;}
.insta .feed #sb_instagram #sbi_images{gap:10px !important;}
.insta .feed #sb_instagram .sbi_item{padding:0 !important;}
.insta .feed #sb_instagram .sbi_photo{border:1px solid var(--line); transition:opacity .35s ease;}
.insta .feed #sb_instagram .sbi_photo:hover{opacity:.78;}
.insta .feed #sb_instagram .sbi_follow_btn a,
.insta .feed #sb_instagram #sbi_load .sbi_load_btn{
  background:transparent !important; color:var(--ink) !important;
  border:1px solid var(--ink) !important; border-radius:0 !important;
  font-family:var(--sans) !important; font-size:12.5px !important; font-weight:400 !important;
  letter-spacing:.18em !important; padding:13px 28px !important; box-shadow:none !important;
  transition:background .35s ease, color .35s ease !important;
}
.insta .feed #sb_instagram .sbi_follow_btn a:hover,
.insta .feed #sb_instagram #sbi_load .sbi_load_btn:hover{
  background:var(--ink) !important; color:#fff !important;
}
.insta .feed #sb_instagram .sbi_header_text h3{
  font-family:var(--serif) !important; font-weight:400 !important; letter-spacing:.06em !important;
}

  /* ---------- cta ---------- */
  .cta{position:relative; overflow:hidden; text-align:center; color:#fff;
    background:linear-gradient(170deg, #56505C 0%, #443F4A 58%, #363139 100%);}
  .cta .wrap{position:relative; z-index:2;}
  .cta .eyebrow{color:rgba(255,255,255,.6);}
  .cta h2{font-family:var(--serif); font-weight:200; font-size:clamp(23px,4vw,36px); line-height:1.75; letter-spacing:.1em; margin-bottom:26px;}
  .cta p{color:rgba(255,255,255,.72); max-width:42ch; margin:0 auto 42px; line-height:2.25; font-size:14px;}
  .cta .row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .cta .btn.solid{background:#fff; color:var(--ink); border-color:#fff; padding:16px 42px;}
  .cta .btn.solid:hover{background:var(--bg-alt); border-color:var(--bg-alt); color:var(--ink);}
  .cta .hours{margin-top:38px; font-size:11.5px; color:rgba(255,255,255,.5); letter-spacing:.12em; line-height:2;}

  /* ---------- footer ---------- */
  footer{background:var(--bg); border-top:1px solid var(--line); padding-block:58px 36px;}
  .foot-top{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--line);}
  .foot-brand .mark{font-family:var(--lat); font-weight:300; font-size:24px; letter-spacing:.34em; color:var(--ink);}
  .foot-brand .sub{font-family:var(--lat); font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:7px;}
  .foot-brand p{font-size:12px; color:var(--ink-soft); margin:18px 0 0; line-height:2;}
  .foot-links{display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start;}
  .foot-links a{font-family:var(--lat); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); transition:color .3s;}
  .foot-links a:hover{color:var(--ink);}
  .foot-bottom{padding-top:24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
    font-family:var(--lat); font-size:10.5px; letter-spacing:.1em; color:var(--muted);}
  .disclaimer{max-width:var(--maxw); margin:22px auto 0; padding-inline:var(--gutter);
    font-size:10.5px; color:var(--muted); line-height:2; letter-spacing:.03em;}

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .r-grid{grid-template-columns:repeat(2,1fr); gap:34px;}
  }
  @media (max-width:860px){
    .first-grid{grid-template-columns:1fr;}
    .first-photo{min-height:270px;}
    .owner-grid{grid-template-columns:1fr;}
    .owner-photo{max-width:300px; width:100%; margin-inline:auto;}
    .info-grid{grid-template-columns:1fr;}
  }
  /* スマホでは固定ヘッダーの直下に見出しが貼りつくため、アンカー着地位置を下げる */
  @media (max-width:900px){
    section[id]{scroll-margin-top:58px;}
  }

  /* タブレット幅でも横並びのナビが収まらないため、900px 以下はドロワー式にする */
  @media (max-width:900px){
    .menu{position:fixed; inset:0 0 auto 0; flex-direction:column; align-items:flex-start;
      background:var(--bg); padding:104px 32px 44px; gap:24px;
      transform:translateY(-101%); transition:transform .45s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow);}
    .menu.open{transform:translateY(0);}
    .menu a{font-size:13px; letter-spacing:.24em;}
    .menu .btn{margin-top:8px;}
    .menu-toggle{display:block;}
    .nav{gap:12px;}
    .btn-sp-reserve{display:inline-block; margin-left:auto;
      font-size:11.5px; letter-spacing:.12em; padding:10px 16px;
      transition:opacity .3s ease;}
    /* ドロワーを開いているあいだは重ねて見せない */
    html.nav-open .btn-sp-reserve{opacity:0; pointer-events:none;}
  }
  /* 予約ボタンの分だけ幅が狭くなるため、狭い画面では所在地を省く */
  @media (max-width:520px){
    .brand .sub .brand-loc{display:none;}
  }
  @media (max-width:360px){
    .btn-sp-reserve{font-size:11px; letter-spacing:.06em; padding:9px 12px;}
    .brand .mark{font-size:22px; letter-spacing:.28em;}
    .brand .sub{letter-spacing:.24em;}
  }
  @media (max-width:720px){
    .m-item{gap:12px;}
    .m-item .lbl{min-width:0;}
    .r-grid{grid-template-columns:1fr; gap:30px;}
    .hero-meta{gap:18px 30px;}
    .foot-top{flex-direction:column;}
  }

/* ---------- WordPress 用の調整 ---------- */
.admin-bar header{ top: 32px; }
@media screen and (max-width:782px){ .admin-bar header{ top: 46px; } }
@media screen and (max-width:600px){ .admin-bar header{ top: 0; } }

.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:200; width:auto; height:auto;
  clip-path:none; background:#fff; color:#363139; padding:12px 20px; border:1px solid #363139;
}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}
.photo, .s-cell.photo, .insta-fallback .cell.photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.wp-404{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; }