/* ============================================================
   TOTOPA HAKATA — 下層ページ共通スタイル（利用約款 / 特定商取引法）
   Figma「Website」2_totopa_hakata_page_pc (801:489) / 2_totopa-hakata-page-sp (820:4) 準拠
     PC: ロゴ(20,24)107×90 ／ ピルナビ＋言語ピル＋ハンバーガーは本体と同じ
         左カラム x=100: 罫線(100,200)280幅 → タイトル(100,265) 22px
         右カラム x=460 幅760: 罫線(460,201)880幅 → 本文(y=257)
         フッター 409（本体と同じ紙→緑グラデ）
     SP: ヘッダー110 → タイトル帯236（罫線＋タイトル）→ 本文335幅 → フッター450
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--black);
  font-family:var(--font-jp); font-weight:300;
  font-size:13px; line-height:26px; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
figure{margin:0}
a{color:inherit; text-decoration:none}
h1,h2,h3,p{margin:0}

:root{
  --paper:#e6dbc4;
  --beige:#c6b880;
  --blue:#3a5373;
  --red:#b85346;
  --green:#85b390;
  --black:#000;
  --font-jp:'Noto Serif JP', serif;
  --font-en:'Instrument Serif', 'Noto Serif JP', serif;
  --font-ui:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --pad:50px;
  --rule:rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- header（9/24 藤井指示: トップの紙地状態＝.nav.is-dark と統一。藍文字・藍22%のピル） ---------- */
.nav{
  position:fixed; inset:20px 0 auto 0; z-index:80; pointer-events:none;
  display:flex; justify-content:center; color:var(--blue);
}
.nav__logo{position:absolute; left:20px; top:4px; width:107px; height:90px; pointer-events:auto}   /* トップと同寸・同位置（Figma 848:7918 = x20 y24・107×90） */
.nav__logo img{width:100%; height:100%}
.nav__list{
  display:flex; align-items:center; gap:24px; pointer-events:auto;
  font-family:var(--font-ui); font-size:10px; font-weight:500; line-height:1; letter-spacing:0;
  height:34px; padding:0 48px; border-radius:999px;
  background:rgba(58,83,115,.22);
  -webkit-backdrop-filter:blur(7.5px); backdrop-filter:blur(7.5px);
}
.nav__list a{opacity:.92}
.nav__list a:hover{opacity:1}
.nav__lang{
  position:absolute; right:70px; top:0; height:34px;
  display:flex; align-items:center; gap:16px; padding:0 16px;
  border-radius:999px; pointer-events:auto; background:rgba(58,83,115,.22);
  -webkit-backdrop-filter:blur(7.5px); backdrop-filter:blur(7.5px);
  font-family:var(--font-ui); font-size:10px; letter-spacing:.12em;
}
.nav__lang a{opacity:.5; transition:opacity .3s}
.nav__lang a:hover{opacity:.85}
.nav__lang a.is-on{opacity:1}
.nav__menu{
  position:absolute; right:20px; top:0; pointer-events:auto;
  width:34px; height:34px; border-radius:50%; background:rgba(58,83,115,.22);
  -webkit-backdrop-filter:blur(7.5px); backdrop-filter:blur(7.5px);
  border:0; cursor:pointer; padding:0; display:grid; place-content:center; gap:3px; color:inherit;
}
.nav__menu span{display:block; width:10px; height:1px; background:currentColor}

/* ---------- document ---------- */
.doc{padding:200px 0 120px; min-height:60vh}
.doc__inner{
  max-width:1440px; margin:0 auto; padding:0 var(--pad) 0 100px;
  display:grid; grid-template-columns:280px minmax(0,760px); gap:0 80px;
}
.doc__side{position:relative; padding-top:65px}
.doc__side::before{content:''; position:absolute; left:0; top:0; width:16px; height:1px; background:var(--black)}
.doc__side::after{content:''; position:absolute; left:20px; right:0; top:0; height:1px; background:var(--black); opacity:.35}
.doc__title{font-size:22px; font-weight:300; line-height:1; letter-spacing:0}
.doc__main{position:relative; padding-top:57px; font-size:15px; line-height:2; font-weight:400; letter-spacing:0}
.doc__main::before{content:''; position:absolute; left:0; top:1px; width:max(100%, min(880px, calc(100vw - 560px))); height:1px; background:var(--black); opacity:.35}
.doc__lead{font-size:15px; line-height:30px}
.doc__jaonly{
  margin:24px 0 0; padding:10px 14px; border-left:2px solid var(--red);
  background:rgba(184,83,70,.05); font-size:11.5px; line-height:1.9;
}
.doc__jaonly span{font-family:var(--font-ui); opacity:.75}
.doc__meta{margin-top:48px; padding-top:20px; border-top:1px solid var(--rule); font-size:11.5px; opacity:.7}
.doc__todo{
  margin:24px 0; padding:14px 16px; border:1px dashed var(--red); color:var(--red);
  font-size:12px; line-height:1.9;
}

/* 見出し: 「Ⅰ. 基本方針」のようなローマ数字＋タイトル */
.doc__h{font-size:17px; font-weight:400; letter-spacing:0; line-height:34px; margin:48px 0 20px}
.doc__h:first-child{margin-top:0}
.doc__h i{font-style:normal; font-family:var(--font-en); margin-right:8px}

/* 条文 */
.art{margin-top:40px}
.art__head{display:flex; align-items:baseline; gap:14px; margin:0 0 10px; flex-wrap:wrap}
.art__no{font-family:var(--font-en); font-size:13px; letter-spacing:.1em; color:var(--red); flex:none}
.art__ttl{font-size:17px; font-weight:400; line-height:34px; letter-spacing:0; margin:0}
.art p{margin:0 0 12px}
.art p:last-child{margin-bottom:0}
.art ol{margin:6px 0 0; padding:0; list-style:none; counter-reset:cl}
.art ol > li{position:relative; counter-increment:cl; padding-left:32px; margin-bottom:8px}
.art ol > li::before{
  content:counter(cl) "."; position:absolute; left:0; top:0;
  font-family:var(--font-en); font-size:13px; letter-spacing:.04em;
}
.art ul{margin:8px 0 0; padding:0; list-style:none}
.art ul > li{position:relative; padding-left:18px; margin-bottom:6px}
.art ul > li::before{content:"・"; position:absolute; left:0; top:0}

/* 利用規則 */
.rules{margin-top:72px; padding-top:28px; border-top:1px solid var(--black)}
.rules__title{font-size:18px; font-weight:300; letter-spacing:.1em; margin:0 0 18px}
.rules__item{margin-top:28px; padding-top:18px; border-top:1px solid var(--rule)}
.rules__item > p{margin:0}

/* 特商法テーブル */
.tokutei{margin-top:8px; border-top:1px solid var(--black)}
.tokutei__row{display:grid; grid-template-columns:220px 1fr; gap:0 32px; padding:20px 0; border-bottom:1px solid var(--rule)}
.tokutei__key{font-size:13px; letter-spacing:.08em; font-weight:400}
.tokutei__val{font-size:15px; line-height:30px}
.tokutei__val p{margin:0 0 8px}
.tokutei__val p:last-child{margin-bottom:0}
.tokutei__val a{text-decoration:underline; text-underline-offset:3px}
.tokutei__sub{margin:12px 0 4px; font-family:var(--font-en); font-size:12px; letter-spacing:.12em; color:var(--red)}
.tokutei__val > .tokutei__sub:first-child{margin-top:0}   /* 9/24: 項目内の小見出し（電話番号 等）が先頭に来るとき */
.tokutei__price{margin:0; padding:0; list-style:none}
.tokutei__price li{display:flex; justify-content:space-between; gap:20px; padding:6px 0; border-bottom:1px dotted rgba(0,0,0,.3)}
.tokutei__price li:last-child{border-bottom:0}
.tokutei__price b{font-weight:400; font-family:var(--font-en); font-size:15px; letter-spacing:.02em}
.tokutei__price small{font-size:10.5px; opacity:.7; margin-left:2px}
.tokutei__note{margin:12px 0 0; font-size:11.5px; line-height:1.95; opacity:.75}

/* ---------- footer（本体 Figma 801:404 と同一） ---------- */
.site-foot{
  position:relative; color:var(--black); padding:36px 0 40px; min-height:409px; text-align:center;
  background:var(--paper) url("../images/totopa-gradation-green.png") left bottom / 720px 720px repeat-x;
  font-size:13px; letter-spacing:.04em; overflow:hidden;
}
/* 9/24 藤井指示: トップのフッターと統一（上端の継ぎ目消し・ロゴ直下の都立明治公園店リンク・規約リンクの間隔） */
.site-foot::before{
  content:''; position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none;
  background:linear-gradient(to bottom, var(--paper), rgba(230,219,196,0));
}
.site-foot__inner{position:relative; max-width:1440px; margin:0 auto; padding:0 var(--pad)}
.site-foot__logo{display:block; width:142px; height:120px; margin:0 auto}
.site-foot__logo img{width:100%; height:100%}
.site-foot__guide{margin-top:22px; font-size:12px; line-height:20px; letter-spacing:.06em}
.site-foot__guide a{border-bottom:1px solid currentColor; padding-bottom:3px; opacity:.9}
.site-foot__guide a:hover{opacity:.65}
.site-foot__links{display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-top:28px; font-size:13px; line-height:1.7; letter-spacing:0}
.site-foot__links a:hover{opacity:.7}
.site-foot .copy{margin-top:24px; font-family:var(--font-en); font-size:15px; line-height:1; letter-spacing:0; opacity:.5}

/* ---------- 全画面メニュー（本体と同じ・リンク先は本体のアンカー） ---------- */
.menu{
  position:fixed; inset:0; z-index:90; background:var(--blue); color:var(--paper);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .6s var(--ease), visibility 0s .6s; overflow-y:auto;
}
.menu.is-open{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .6s var(--ease), visibility 0s 0s}
.menu__logo{position:absolute; left:24px; top:24px; width:104px; height:88px; display:block}
.menu__logo img{width:100%; height:100%}
.menu__close{
  position:fixed; right:20px; top:20px; width:34px; height:34px; border-radius:50%;
  background:rgba(230,219,196,.16); border:0; cursor:pointer; padding:0;
  display:grid; place-content:center; color:var(--paper);
}
.menu__close span{display:block; width:12px; height:1px; background:currentColor; grid-area:1/1}
.menu__close span:first-child{transform:rotate(45deg)}
.menu__close span:last-child{transform:rotate(-45deg)}
.menu__inner{
  min-height:100%; max-width:1440px; margin:0 auto; padding:160px 200px 80px;
  display:grid; grid-template-columns:600px 340px; justify-content:space-between; align-content:start;
}
.menu__main{padding-top:6px}
.menu__links{display:flex; flex-direction:column}
.menu__links a{display:flex; align-items:center; gap:24px; height:54px; padding:0 0 24px; margin-bottom:24px; box-shadow:inset 0 -1px rgba(230,219,196,.25)}
.menu__links a:last-child{margin-bottom:0}
.menu__links em{font-style:normal; font-family:var(--font-en); font-size:30px; line-height:1; letter-spacing:0}
.menu__links span{font-size:13px; line-height:26px; letter-spacing:0; opacity:.9}
.menu__sub{display:flex; gap:20px; margin-top:48px}
.menu__sub a{width:290px; height:51px; display:flex; align-items:center; justify-content:space-between; padding:0 16px 0 17px; border:1px solid rgba(230,219,196,.6)}
.menu__sub em{font-style:normal; font-family:var(--font-en); font-size:15px; letter-spacing:.06em}
.menu__sub .ex{display:block; width:17px; height:17px}
.menu__side{display:flex; flex-direction:column}
.menu__cta{display:flex; align-items:center; justify-content:center; gap:14px; width:340px; height:60px; border:1px solid var(--beige); font-size:15px; letter-spacing:.06em}
.menu__cta svg{width:24px; height:24px; display:block; fill:currentColor}
.menu__cta-bar{width:1px; height:17px; background:rgba(230,219,196,.6)}
.menu__sns{display:flex; flex-direction:column; gap:12px; margin-top:32px}
.menu__sns a{display:flex; align-items:center; gap:14px; font-family:var(--font-en); font-size:15px}
.menu__icon{width:40px; height:40px; border-radius:50%; border:1px solid rgba(230,219,196,.7); display:grid; place-items:center; flex:none}
.menu__icon svg{width:18px; height:18px}
.menu__info{margin-top:24px; padding:24px 0; border-top:1px solid rgba(230,219,196,.5); border-bottom:1px solid rgba(230,219,196,.5); font-style:normal; font-size:13px; line-height:26px}
.menu__info a{text-decoration:underline; text-underline-offset:3px}
.menu__lang{margin-top:24px; width:105px; height:34px; border-radius:17px; display:flex; align-items:center; justify-content:center; gap:16px; background:rgba(230,219,196,.2); font-family:var(--font-ui); font-size:10px; letter-spacing:.12em}
.menu__lang a{opacity:.5}
.menu__lang a.is-on{opacity:1}

:focus{outline:none}
:focus-visible{outline:1.5px solid var(--red); outline-offset:3px; border-radius:2px}

/* ---------- SP（Figma 820:4） ---------- */
@media (min-width:901px) and (max-width:1340px){
  .menu__inner{padding-left:50px; padding-right:50px; grid-template-columns:minmax(0,1fr) 340px; column-gap:60px}
}
@media (max-width:1100px){
  .nav__list{display:none}
}
@media (max-width:900px){
  :root{--pad:20px}
  .nav__list{display:none}
  .nav__logo{left:15px; top:4px; width:102px; height:86px}
  .nav__lang{right:64px; left:auto; padding:0 16px; gap:16px; font-size:9.5px; font-weight:500}   /* 9/24: トップと同じ（Figma 823:2932）／9/25: 500 */
  .doc{padding:230px 0 120px}
  .doc__inner{grid-template-columns:1fr; gap:0; padding:0 var(--pad)}
  .doc__side{padding:34px 0 32px}
  .doc__title{font-size:22px}
  .doc__main{margin-top:0; padding-top:0}
  .doc__main::before{display:none}
  body{font-size:12.5px; line-height:24px}
  .doc__h{margin-top:40px}
  .tokutei__row{grid-template-columns:1fr; gap:6px}
  .tokutei__key{font-size:12px; color:var(--red)}
  .tokutei__price li{flex-direction:column; gap:2px}
  .site-foot{padding:6px 0 60px; min-height:450px; background-repeat:no-repeat; background-position:calc(50% + .5px) bottom}
  .site-foot__logo{width:120px; height:101px}
  .site-foot__links{flex-direction:column; gap:8px; margin-top:28px}
  .menu__inner{grid-template-columns:1fr; padding:190px 20px 60px}
  .menu__main{padding-top:0}
  .menu__logo{left:15px; top:24px; width:102px; height:86px}
  .menu__sub{flex-direction:column; gap:16px; margin-top:32px}
  .menu__sub a{width:100%}
  .menu__side{margin-top:48px}
  .menu__sns{margin-top:48px}
  .menu__cta{width:100%}
}