/* =================================================================
   サイト共通スタイル（自動生成 / tools/consolidate-css.mjs）

   読み込む順は  tokens.css → site.css → pc.css。
   ページの <style> には何も置かない。直したいときはこのファイルを直す。

   1. 土台      … 30ページ以上で使われているもの
   2. 共通パーツ … 2ページ以上で使われているもの
   3. 個別      … 1ページでしか使われていないもの
   ================================================================= */

/* ---------- 0. ページの幅 -----------------------------------------
   4段階だけ。ページごとに数字を決めない。既定は w-wide（写真が主役）。
   数字の正は assets/tokens.css。 */
body.w-read{ --maxw: var(--w-read); }
body.w-list{ --maxw: var(--w-list); }
body.w-page{ --maxw: var(--w-page); }
body.w-wide{ --maxw: var(--w-wide); }

/* ---------- 0-2. 「項目｜値」の2列表 --------------------------------
   施設のスペック・会社概要・特定商取引法の表など。
   見出し列を38%に固定し、長い値は折り返す。列幅を固定しないと、
   URLのような切れ目のない文字列で表が画面からはみ出す。
   横に長い比較表（用途ページなど）には付けないこと。 */
.kv{ table-layout: fixed; }
.kv th{ width: 38%; }
.kv td{ word-break: break-word; }

/* ---------- 0-3. 押せるもの ---------------------------------------
   形は3種類だけ。これ以外の形を作らない。

   主（.cta .submit .bulk .fgo .mbtn）
     押すと先へ進むもの。青の塗り＋白抜き。**1つの画面に1つだけ**。
     2つ以上あると、どちらを押せばよいか分からなくなる。
   副（.act .go .ilink .mapbtn .rbtn .more .reclink .b-pdf）
     それ以外の操作。白地＋枠線。いくつあってもよい。
     資料のダウンロードもここに含める（形式と容量を文字で添える）。
   小（.chip .change .login .dchip）
     絞り込み・切り替えなど、本文の流れを止めない小さな操作。

   高さは 主・副とも --tap（44px）、小は36px。
   フォームの送信（.submit）だけ52px。ページの最終行動なので少し大きくする。
   ------------------------------------------------------------------ */
.cta, .submit, .bulk, .fgo, .mbtn,
.act, .go, .ilink, .mapbtn, .rbtn, .more, .reclink{
  display: block; text-align: center; font-weight: 600;
  min-height: var(--tap); line-height: var(--tap);
}
/* 主 */
.cta, .submit, .bulk, .fgo, .mbtn{
  background: var(--key); color: #fff; border: 0; border-radius: var(--r);
}
.submit{ min-height: 52px; line-height: 52px; }
/* 副 */
.act, .go, .ilink, .mapbtn, .rbtn, .more, .reclink{
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r);
}
/* 小 */
.chip, .change, .login, .dchip{
  min-height: 36px; line-height: 1; display: inline-flex; align-items: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r);
}

/* ---------- 0-4. 文字のリンク --------------------------------------
   本文の中のリンクは下線1本。押せることが分かり、文の流れも切らない。
   ボタンにするのは「行動」だけ。ページ内の案内はリンクで足りる。 */
.link{ border-bottom: 1px solid var(--line-2); }
.link:hover{ border-bottom-color: var(--ink); }
/* 強めに見せたいとき（数は少なく） */
.link-key{ color: var(--key); border-bottom: 1px solid currentColor; }

/* ---------- 0-5. 節の区切り ----------------------------------------
   節の間に線は引かない（2026-08-19 ご指定）。
   例外的に引きたい節にだけ .ruled を付ける。 */
.ruled{ border-bottom: 1px solid var(--line); }

/* ---------- 0-6. 箇条書き ------------------------------------------
   ぶら下げは20px、行間の余白は6pxで揃える。
   番号つきの手順は .steps、時系列は .flow、比較は .traits を使う。 */
.art ul, .art ol, .doc ol, .doc ul, .way ul{ padding-left:20px; }
.art li, .doc li, .way li, .rules li{ margin-bottom:6px; }

/* ---------- 0-7. 画像の入れ方 --------------------------------------
   枠に対して画像をどう収めるかは3通りだけ。HTMLに直接書かない。
     .imgfill … 枠いっぱいに敷き詰める（はみ出しは切る）。写真向き
     .imgfit  … 枠の中に全体を収める（余白ができる）。図面・地図向き
     .img43   … 幅いっぱい・縦横比4:3で敷き詰める。一覧のサムネイル向き */
.imgfill{ width: 100%; height: 100%; object-fit: cover; display: block; }
.imgfit{ width: 100%; height: 100%; object-fit: contain; display: block; }
.img43{ width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ロゴの大きさは1か所で決める */
.logo img{ display: block; width: 127px; height: auto; }

/* カレンダーの、月の初めにある空きマス */
.days button.pad{ border-top: 1px solid var(--line); }

/* ---------- 0-8. 余白の微調整 --------------------------------------
   「この1か所だけ少し空けたい」ときに使う。値は決めた段だけ。
   同じ組み合わせが何度も出てきたら、それはパーツなのでクラスを作ること。 */
.mt-8{ margin-top: 8px; }   .mt-10{ margin-top: 10px; }  .mt-12{ margin-top: 12px; }
.mt-14{ margin-top: 14px; } .mt-16{ margin-top: 16px; }  .mt-20{ margin-top: 20px; }
.mt-24{ margin-top: 24px; }
.mb-6{ margin-bottom: 6px; }   .mb-8{ margin-bottom: 8px; }   .mb-10{ margin-bottom: 10px; }
.mb-12{ margin-bottom: 12px; } .mb-14{ margin-bottom: 14px; } .mb-16{ margin-bottom: 16px; }

/* ---------- 0-8b. 文字まわりの小さな調整 ----------------------------
   意味を持つ言い回しにする。色や大きさをHTMLに直接書かない。 */
.c-sub{ color: var(--ink-2); }          /* 補足の色 */
.c-weak{ color: var(--ink-3); }         /* いちばん薄い色 */
.c-ink{ color: var(--ink); }            /* 本文の色に戻す */
.nowrap{ white-space: nowrap; }         /* 途中で折り返させない */
.strong{ font-weight: 600; color: var(--ink); }
.sub{ margin: 0; font-size: 1.3rem; color: var(--ink-2); }   /* 小さめの補足行 */
.sublist-i{ font-size: 1.3rem; color: var(--ink-2); margin-bottom: 6px; }
.sub2{ font-size: 1.3rem; color: var(--ink-2); }
.unit{ text-decoration: none; font-family: var(--f-sans); font-size: 1.1rem; color: var(--ink-2); }
.unit-l{ text-decoration: none; font-family: var(--f-sans); font-size: 1.2rem; color: var(--ink-2); }
.center{ text-align: center; }
.bare{ padding: 0; overflow: hidden; }  /* 写真だけのリンク。余白を持たせない */
.sponly{ display: block; }              /* スマホにだけ出す。PCでは pc.css で消す */
.pconly{ display: none; }               /* PCにだけ出す。pc.css で出す */

/* 本文中の注意書きの箱 */
.notebox{ margin:0 var(--pad) 16px; padding:14px; background:var(--wash);
  border:1px solid var(--line); border-radius:var(--r-lg); }
/* 強い枠。**.notebox より後ろに置くこと。**前に置くと .notebox の
   border 一括指定に上書きされて、太くも濃くもならない（2026-08-25 修正） */
.strong-border{ border-width:2px; border-color:var(--ink); }

/* 上下の内側の余白（値は決めた段だけ） */
.pt-12{ padding-top: 12px; }
.m0{ margin: 0; }
/* 見出しの脇に添える小さなラベル */
.tagline{ font-size: 1rem; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.taglabel{ font-size: 1rem; font-weight: 400; color: var(--paper); background: var(--ink);
  padding: 2px 6px; border-radius: var(--r); margin-left: 6px; vertical-align: 1px; }
/* 箱の見出し行 */
.boxhead{ display: block; font-size: 1.4rem; color: var(--ink); margin-bottom: 6px; }
/* 枠の中の注記 */
.boxnote{ margin: 12px 0 0; font-size: 1.2rem; color: var(--ink-3); }

/* ---------- 0-11. スマホで予約（フッターの案内）--------------------
   予約ページは「ホーム画面に追加」でアプリのように開ける（先方がPWA対応）。
   スマホの人にはボタン、PCの人には二次元コードを出す。
   PCの画面に「ホーム画面に追加」と書いても手が届かないため、
   その場で手元の端末に渡せるようにしている。 */
.appcta{ padding: 22px var(--pad) 22px; background: var(--wash);
  border-top: 1px solid var(--line); }
.appcta h2{ margin: 0 0 6px; font-size: 1.5rem; line-height: 1.5; }
.appcta > p{ margin: 0; font-size: 1.2rem; color: var(--ink-2); }
.appcta .go{ margin-top: 14px; }
/* 二次元コードと説明を横に並べる（PCでだけ出る） */
.appcta-qr{ margin-top: 14px; gap: 14px; align-items: center; }
/* 横並びにするのは pc.css。ここで display を書くと、あとに来る
   .appcta-qr が .pconly{ display:none } に勝ってしまい、スマホでも出てしまう */
.appcta-qr img{ width: 148px; height: 148px; flex: 0 0 auto;   /* 37マス×4px */
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 6px; }
.appcta-qr p{ margin: 0; font-size: 1.2rem; color: var(--ink-2); }

/* ---------- 0-12. 予約システムの画面の埋め込み --------------------
   空き状況もカレンダーも、先方の画面をそのまま出す。高さは中身に
   合わせて assets/embed.js が調整するが、届くまでの間も枠が潰れない
   よう最低の高さを持たせる（720pxは先方の指定）。 */
.embedwrap{ padding: 0 var(--pad); }
.embedwrap iframe{ display: block; width: 100%; border: 0;
  min-height: 720px; background: var(--paper); border-radius: var(--r-lg); }

/* ---------- 0-10. ナビのまとまり（ご予約について）------------------
   スマホのメニューを開いたときは、まとまりを「見出し＋その中身」として
   そのまま縦に並べる。開閉させると、開く操作が二重になって面倒なため。
   PCでの開閉は pc.css の「0-27」。 */
.navgrp-b{
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: default;
  padding: 14px var(--pad) 4px;
  font-size: 1.1rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3);
}
.navgrp-b::after{ content: ""; }          /* スマホでは印を出さない */
.navgrp-m[hidden]{ display: block; }      /* スマホでは常に出す */

/* ---------- 0-9. モック用（本番には出ない）------------------------ */
.mocknav{ position: fixed; left: 16px; bottom: 70px; z-index: 60;
  font: 600 1.1rem -apple-system, sans-serif; background: #1a1917; color: #fff;
  padding: 8px 12px; border-radius: 2px; text-decoration: none; opacity: .85; }

/* ---------- 1. 土台（30ページ以上で使われているもの）------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-sans); font-size:1.6rem; line-height:1.75; font-feature-settings:"palt" 1; padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.wrap{ padding:0 var(--pad); }
.hd{ border-bottom:1px solid var(--line); }
.hd-in{ display:flex; align-items:center; justify-content:space-between; height:52px; }
.logo{ font-size:1.5rem; font-weight:600; letter-spacing:.32em; }
.login{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); min-height:36px; display:flex; align-items:center; padding:0 14px; }
.crumb{ padding:10px var(--pad) 0; font-size:1.1rem; color:var(--ink-3); }
.crumb a{ border-bottom:1px solid var(--line-2); }
h1{ margin:14px 0 10px; padding:0 var(--pad); font-size:2.2rem; line-height:1.45; font-weight:600; }
.lede{ margin:0; padding:0 var(--pad); font-size:1.5rem; color:var(--ink); }
section{ padding:26px 0; }
h2{ margin:0 0 14px; padding:0 var(--pad); font-size:1.7rem; font-weight:600; }
p{ margin:0 0 12px; }
.note{ padding:0 var(--pad); font-size:1.2rem; color:var(--ink-2); }
/* 言語の切替。ヘッダーの中、マイページの左隣。
   hreflang は検索エンジンにしか届かないので、**人が押せるものが要る**。
   .login と同じ高さ・同じ枠にして、並んだときに揃うようにする */
/* スマホのヘッダーは幅ちょうどで、余りが無い（360pxで ロゴ127＋マイページ77＋
   メニュー65＝269／使える幅328）。枠と余白を付けると折り返すので、
   **スマホでは枠なし・文字も「EN」に縮める**。PCでは pc.css で枠付き「English」に戻す */
.langsw{ font-size:1.3rem; min-height:36px; display:flex; align-items:center;
  margin-left:auto; padding:0 0 0 8px; gap:3px; white-space:nowrap; color:var(--ink); }
.langsw::before{ content:"🌐"; font-size:1.3rem; }
.langsw .pc-i{ display:none; }
.langsw .sp-i{ display:inline; font-weight:600; }
/* ヘッダーの中身は縮ませない。縮むと「マイページ」「メニュー」が
   箱の中で2行に折り返して読みにくくなる。詰まったらロゴ側が縮む */
.hd-in > .langsw, .hd-in > .login, .hd-in > .navbtn{ flex-shrink:0; white-space:nowrap; }
.hd-in > .logo{ min-width:0; }
.hd-in > .logo img{ max-width:100%; height:auto; }
/* 予約が「その場で確定しない」ことの但し書き。ご指定で赤字にしている。
   ただの赤い字は本文に埋もれるので、左に細い線を足して段落として立たせる */
.note-alert{ color:var(--full); border-left:2px solid var(--full);
  padding-left:calc(var(--pad) - 2px); }
.acts{ display:flex; gap:8px; }
.act{ flex:1; text-align:center; min-height:var(--tap); line-height:var(--tap); font-size:1.4rem; font-weight:600; border:1px solid var(--ink); }
.act.primary{ background:var(--ink); color:#fff; }
table{ width:100%; border-collapse:collapse; font-size:1.4rem; }
.tbl{ padding:0 var(--pad); }
th, td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-weight:400; color:var(--ink-2); font-size:1.3rem; }
.kit{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
details{ border-top:1px solid var(--line); }
details:last-of-type{ border-bottom:1px solid var(--line); }
summary{ list-style:none; cursor:pointer; padding:14px var(--pad); font-size:1.4rem; font-weight:600; display:flex; justify-content:space-between; gap:12px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"＋"; color:var(--ink-3); }
details[open] summary::after{ content:"−"; }
details p{ padding:0 var(--pad) 14px; margin:0; font-size:1.4rem; color:var(--ink-2); }
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-auto-flow:column; grid-auto-columns:1.3fr 1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.bar a{ min-height:57px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:600; background:var(--paper); }
.bar a.primary{ background:var(--ink); color:#fff; font-size:1.4rem; }
.legal{ display:flex; flex-wrap:wrap; gap:0 18px; padding:14px var(--pad) 0; border-top:1px solid var(--line); }
.legal a{ font-size:1.2rem; color:var(--ink-2); min-height:38px; display:flex; align-items:center; }
.ft-note{ padding:6px var(--pad) 28px; font-size:1.1rem; color:var(--ink-3); }
.ph img, .pph img, .kitph img, .lph img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.ph:has(img), .pph:has(img){ padding:0; overflow:hidden; }

/* ---------- 2. 共通パーツ（2ページ以上）-------------------------- */
button{ font-family:inherit; }
[hidden]{ display:none !important; }
.shots{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:10px; }
.shots::-webkit-scrollbar{ display:none; }
.shot{ flex:0 0 100%; scroll-snap-align:center; aspect-ratio:4/3; background:var(--wash); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1.1rem; letter-spacing:.1em; }
.shotnum{ padding:6px var(--pad) 0; font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3); }
.tuned{ margin-top:16px; font-size: 1.4rem; line-height:1.75; color:var(--ink-2); }
.operator{ margin:10px 0 0; padding:0 var(--pad); font-size:1.2rem; color:var(--ink-2); }
.summary{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:18px; }
.sum{ background:var(--paper); padding:12px 14px; }
.sum dt{ font-size:1.1rem; letter-spacing:.1em; color:var(--ink-3); }
.sum dd{ margin:2px 0 0; font-family:var(--f-num); font-size:1.7rem; font-weight:500; }
.sum dd u{ text-decoration:none; font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); margin-left:2px; }
.sum dd.t{ font-family:var(--f-sans); font-size:1.5rem; font-weight:600; }
h3{ margin:0 0 6px; font-size:1.4rem; font-weight:600; }
section > p, section > .note{ padding:0 var(--pad); }
.cal{ margin:0 var(--pad); border:1px solid var(--line); }
.calhd{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); font-size:1.4rem; font-weight:600; }
.calhd button{ background:none; border:1px solid var(--line-2); border-radius:var(--r); min-width:36px; min-height:32px; cursor:pointer; font-size:1.3rem; }
.dow, .days{ display:grid; grid-template-columns:repeat(7,1fr); }
.dow div{ text-align:center; font-size:1rem; color:var(--ink-3); padding:8px 0 4px; }
.days button{ background:none; border:0; border-top:1px solid var(--line); min-height:46px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.days button:disabled{ color:var(--ink-3); cursor:default; }
.days button b{ font-family:var(--f-num); font-size:1.3rem; font-weight:400; }
.days button s{ text-decoration:none; font-size:1.1rem; }
.days button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.deny{ margin:0 var(--pad) 14px; border:1px solid var(--ink); }
.deny-h{ margin:0; padding:12px 14px 10px; font-size:1.4rem; font-weight:600; border-bottom:1px solid var(--line); }
.deny-tags{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px; }
.deny-tags span{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); padding:6px 12px 6px 8px; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.deny-tags span::before{ content:"×"; font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); }
.deny-note{ margin:0; padding:0 14px 14px; font-size:1.2rem; color:var(--ink-2); }
.deny-note a{ border-bottom:1px solid var(--line-2); }
/* 中身は3つが基本だが、ご利用できる曜日が限られている施設では4つになる。
   列数を決め打ちにすると4つ目だけが次の行に落ちて、帯が不格好になる */
.easy{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:14px; }
.easy div{ background:var(--paper); padding:10px 6px; text-align:center; }
.easy b{ display:block; font-size:1.3rem; font-weight:600; }
.easy span{ font-size:1rem; color:var(--ink-3); }
.picked{ padding:12px; border-top:1px solid var(--line); font-size:1.4rem; }
.picked strong{ font-family:var(--f-num); font-weight:500; }
.picked a{ color:var(--key); border-bottom:1px solid currentColor; }
.legend{ display:flex; flex-wrap:wrap; gap:0 16px; padding:10px 12px; border-top:1px solid var(--line); font-size:1.2rem; color:var(--ink-2); }
.legend b{ font-weight:600; color:var(--ink); margin-right:4px; }
.days button.talk b{ text-decoration:underline; text-underline-offset:2px; }
.relay{ margin:14px var(--pad) 0; border:1px solid var(--line); padding:16px; }
.relay h3{ margin:0 0 6px; font-size:1.5rem; }
.relay p{ margin:0 0 14px; font-size:1.3rem; color:var(--ink-2); }
.cta{ display:block; text-align:center; background:var(--ink); color:#fff; min-height:var(--tap); line-height:var(--tap); font-size:1.5rem; font-weight:600; margin:12px var(--pad) 0; }
.vr{ position:relative; display:block; margin:0 var(--pad); aspect-ratio:2/1; background:var(--wash); border:1px solid var(--line); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.vr b{ font-size:1.5rem; font-weight:600; }
.vr span{ font-size:1.1rem; color:var(--ink-3); letter-spacing:.1em; }
.vr iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.plan{ display:block; margin:0 var(--pad); aspect-ratio:4/3; background:var(--wash); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1.1rem; letter-spacing:.1em; }
.visit{ margin:0 var(--pad); border:1px solid var(--ink); padding:16px; }
.visit h2{ padding:0; margin:0 0 6px; }
.visit p{ margin:0 0 14px; font-size:1.4rem; color:var(--ink-2); }
.mapimg{ display:block; margin:0 var(--pad); aspect-ratio:16/10; background:var(--wash); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1.1rem; letter-spacing:.1em; }
.mapbtns{ display:flex; gap:8px; padding:10px var(--pad) 0; }
.mapbtn{ flex:1; text-align:center; min-height:var(--tap); line-height:var(--tap); font-size:1.4rem; font-weight:600; border:1px solid var(--ink); }
.mapbtn.primary{ background:var(--ink); color:#fff; }
td b{ font-family:var(--f-num); font-weight:500; }
caption{ text-align:left; font-size:1.2rem; color:var(--ink-2); padding-bottom:6px; }
.pay{ margin:14px var(--pad) 0; border:1px solid var(--line); padding:14px 14px; }
.pay dt{ font-size:1.1rem; letter-spacing:.12em; color:var(--ink-3); margin-bottom:8px; }
.pay dd{ margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.pay dd span{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); padding:6px 12px; }
.kit > div{ background:var(--paper); padding:0 0 12px; }
.kitph{ display:block; aspect-ratio:4/3; background:var(--wash); overflow:hidden; }
.kit b{ display:block; margin:10px 12px 2px; font-size:1.3rem; font-weight:600; line-height:1.4; }
.kit b em{ font-style:normal; font-family:var(--f-num); font-size:1.4rem; margin-left:6px; }
.kit s{ text-decoration:none; display:block; margin:0 12px 4px; font-size:1.1rem; color:var(--ink-2); }
.kit i{ font-style:normal; display:block; margin:0 12px; font-size:1.1rem; color:var(--ink-3); }
.kit i.pay{ color:var(--ink); font-weight:600; }
.more{ display:block; width:calc(100% - var(--pad) * 2); margin:12px var(--pad) 0; min-height:var(--tap); background:none; border:1px solid var(--line-2); border-radius:var(--r); font-size:1.4rem; font-weight:600; cursor:pointer; }
.more:hover{ border-color:var(--ink); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; padding:0 var(--pad); }
.tag{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); padding:6px 12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.tag svg{ width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.tag s{ text-decoration:none; color:var(--ink-3); font-size:1.1rem; margin-left:4px; }
.rules{ padding:0 var(--pad); margin:0; }
.rules li{ font-size:1.4rem; margin-bottom:8px; }
/* 1項目の中の細目（「音出しについて」など）。親より一段小さく、色も一段落とす */
.rules .sublist{ margin:6px 0 0; padding-left:18px; }
.rules .sublist li{ font-size:1.3rem; color:var(--ink-2); margin-bottom:4px; }
.rev{ padding:14px var(--pad); border-top:1px solid var(--line); }
.rev p{ margin:0 0 6px; font-size:1.4rem; }
.rev span{ font-size:1.2rem; color:var(--ink-3); }
.links a{ display:flex; align-items:center; min-height:var(--tap); padding:10px var(--pad); border-top:1px solid var(--line); font-size:1.4rem; line-height:1.5; }
.near{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); }
.near a{ background:var(--paper); padding:0 0 12px; }
.near div{ aspect-ratio:4/3; background:var(--wash); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1rem; }
.near b{ display:block; margin:10px 12px 4px; font-size:1.3rem; font-weight:600; line-height:1.45; }
.near em{ display:block; margin:0 12px 6px; font-style:normal; font-size:1.1rem; color:var(--ink-3); }
.near s{ text-decoration:none; display:block; margin:0 12px; font-family:var(--f-num); font-size:1.3rem; }
.guide{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--tap); padding:0 var(--pad); background:var(--wash); border-bottom:1px solid var(--line); }
.guide span{ font-size:1.2rem; color:var(--ink-2); }
.guide b{ font-size:1.4rem; font-weight:600; white-space:nowrap; }
.kititem{ background:var(--paper); padding:12px 14px; }
.kititem b{ display:block; font-size: 1.3rem; }
.kititem s{ text-decoration:none; display:block; font-size: 1.1rem; color:var(--ink-2); margin-top:2px; }
.others{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.others a{ background:var(--paper); padding:0 0 12px; }
.others b{ display:block; margin:10px 12px 0; font-size: 1.2rem; font-weight:600; line-height:1.45; }
.alts{ margin:14px var(--pad) 0; padding:10px 14px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.alts > p{ margin:0 0 6px; font-size: 1.2rem; color:var(--ink-2); }
.alts a{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center; padding:10px 0; color:inherit; text-decoration:none; }
.alts a + a{ border-top:1px solid var(--line); }
.alts img, .alts i{ width:56px; height:42px; display:block; object-fit:cover; border-radius:var(--r); background:var(--wash); }
.alts b{ display:block; font-size: 1.2rem; font-weight:600; line-height:1.45; }
.alts s{ text-decoration:none; display:block; margin-top:2px; font-size: 1.1rem; color:var(--ink-2); }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.flabel{ display:block; font-size:1.1rem; letter-spacing:.14em; color:var(--ink-3); padding:0 var(--pad) 8px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 var(--pad) 4px; }
.chip{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); padding:6px 12px; color:var(--ink-2); background:none; cursor:pointer; min-height:36px; }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.condhead{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:var(--tap); padding:0 var(--pad); background:none; border:0; font-size:1.3rem; color:var(--ink); cursor:pointer; }
.condhead span{ font-size:1.1rem; letter-spacing:.14em; color:var(--ink-3); }
.condhead::after{ content:"開く"; font-size:1.2rem; color:var(--ink-2); }
.condhead[aria-expanded="true"]::after{ content:"閉じる"; }
.count{ font-size:1.3rem; color:var(--ink-2); margin:0; }
.count b{ font-family:var(--f-num); font-weight:500; font-size:1.6rem; color:var(--ink); }
.list{ border-top:1px solid var(--line); }
.card{ display:grid; grid-template-columns:112px 1fr; gap:12px; padding:14px var(--pad); border-bottom:1px solid var(--line); align-items:start; }
.card:active{ background:var(--wash); }
.ph{ aspect-ratio:4/3; background:var(--wash); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1rem; letter-spacing:.1em; }
.name{ margin:0 0 4px; font-size:1.4rem; font-weight:600; line-height:1.45; }
.badge{ display:inline-block; margin-left:6px; font-size:1rem; letter-spacing:.06em; padding:1px 6px; border-radius:var(--r); background:var(--wash); color:var(--ink-2); font-weight:400; }
.spec{ margin:0 0 6px; font-size:1.2rem; color:var(--ink-2); line-height:1.6; }
.spec i{ font-style:normal; font-family:var(--f-num); font-size:1.3rem; color:var(--ink); }
.spec em{ font-style:normal; color:var(--ink-3); padding:0 6px; }
.price{ margin:0; font-family:var(--f-num); font-size:1.7rem; font-weight:500; }
.price u{ text-decoration:none; font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); }
.price.q{ font-family:var(--f-sans); font-size:1.3rem; color:var(--ink-2); }
.empty{ padding:36px var(--pad); font-size:1.4rem; color:var(--ink-2); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats div{ background:var(--paper); padding:14px 6px; text-align:center; }
.stats b{ display:block; font-family:var(--f-num); font-size: 1.9rem; font-weight:500; }
.stats b u{ text-decoration:none; font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); }
.stats span{ font-size:1.1rem; color:var(--ink-3); }
.toc{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:20px; }
.toc a{ background:var(--paper); min-height:52px; display:flex; align-items:center; padding:10px 14px; font-size:1.3rem; font-weight:600; line-height:1.4; }
.body{ padding:0 var(--pad); font-size:1.5rem; }
.steps{ padding:0 var(--pad); margin:0; list-style:none; counter-reset:s; }
.steps li{ counter-increment:s; display:grid; grid-template-columns:26px 1fr; gap:12px; padding:0 0 20px; }
.steps li::before{ content:counter(s); font-family:var(--f-num); font-size:1.3rem; width:26px; height:26px; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; }
.steps b{ display:block; font-size:1.5rem; }
.steps span{ font-size:1.4rem; color:var(--ink-2); }
thead th{ font-weight:600; color:var(--ink); }
.help{ margin:0 var(--pad); border:1px solid var(--ink); padding:16px; }
.help h3{ margin:0 0 6px; font-size:1.5rem; }
.help p{ margin:0 0 14px; font-size:1.3rem; color:var(--ink-2); }
.lead{ padding:0 var(--pad); font-size: 1.5rem; }
.steps2{ display: grid; gap:12px; padding:0 var(--pad); }
.step{ margin:0; }
.step .ph{ aspect-ratio: 4/3; display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink-3); font-size: 1.2rem; }
.step figcaption{ padding-top:8px; }
.step figcaption b{ display: block; font-size: 1.4rem; }
.step figcaption span{ display: block; font-size: 1.2rem; color: var(--ink-2); line-height: 1.7; }
.rule{ padding:14px var(--pad); border-top: 1px solid var(--line); }
.rule:first-child{ border-top: 0; }
.rule h3{ margin:0 0 6px; padding:0; background: none; font-size: 1.5rem; }
.rule p{ margin:0 0 6px; font-size: 1.4rem; line-height: 1.85; }
.rule p:last-child{ margin-bottom:0; }
.acts a{ display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding:0 18px; font-size: 1.4rem; font-weight: 600; border-radius: var(--r); border: 1px solid var(--line-2); }
.acts a.primary{ background: var(--key); color: #fff; border-color: var(--key); }
.dimset{ margin-top:18px; }
.dimset h4{ margin:0 0 8px; padding:0 var(--pad); font-size: 1.4rem; font-weight: 600; }
.dimph{ display: block; margin:0 var(--pad) 10px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.dimph img{ width: 100%; height: auto; display: block; }
.rulephoto{ display: block; margin-top:10px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
/* 業者様が現場で見る写真なので、切らずに全体を見せる（cover ではなく contain）。
   縦長の写真は左右に余白が出るが、写っているものが欠けるほうが困る */
.rulephoto img{ width: 100%; height: auto; max-height: 360px; object-fit: contain; display: block; }
/* 商品写真は縦長のパッケージが多い。1:1の枠に contain で収め、切らずに見せる。
   幅は画面に合わせて伸びる（スマホ110px前後／PC170px）。現場で買い間違えないよう、
   パッケージの文字が読める大きさを確保する */
.rec{ display: grid; grid-template-columns: clamp(110px, 26%, 170px) 1fr; gap:12px; align-items: center; margin-top:12px; padding:10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.rec > a, .rec .noph{ display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.rec > a{ padding:6px; }
.rec img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.rec .noph{ display: flex; align-items: center; justify-content: center; border-style: dashed; border-color: var(--line-2); font-size: 1rem; color: var(--ink-3); }
.rec .reclead{ display: block; margin-bottom:4px; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.rec b{ display: block; font-size: 1.4rem; }
.rec span{ display: block; margin-top:2px; font-size: 1.2rem; color: var(--ink-2); }
.rec .reclink{ display: inline-flex; align-items: center; justify-content: center; margin-top:8px; min-height: 38px; padding:0 14px; font-size: 1.2rem; font-weight: 600; color: var(--key); background: var(--paper); border: 1px solid var(--key); border-radius: var(--r); }
.rec .reclink:active{ background: var(--key-w); }
.kitgrid{ display: grid; grid-template-columns: 1fr 1fr; gap:10px; padding:0 var(--pad); margin-top:12px; }
.kitgrid figure{ margin:0; }
.kitgrid a{ display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--wash); }
.kitgrid img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.kitgrid figcaption{ margin-top:6px; font-size: 1.2rem; line-height: 1.5; }
.kitgrid figcaption span{ display: block; font-size: 1.2rem; color: var(--ink-2); }
.kitgrid .noph{ display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--wash); font-size: 1.1rem; letter-spacing: .1em; color: var(--ink-3); }
.vrshot{ display: block; margin:12px var(--pad) 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--wash); }
.vrshot img{ width: 100%; height: auto; display: block; }
.zumen{ display: block; margin:0 var(--pad); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.zumen img{ width: 100%; height: auto; display: block; }
.q{ color: var(--ink-3); font-family: var(--f-sans); font-size: 1.2rem; }
.plist{ border-top:1px solid var(--line); }
.pitem{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:14px var(--pad); border-bottom:1px solid var(--line); align-items:start; }
.pitem:active{ background:var(--wash); }
.pph{ aspect-ratio:4/3; background:var(--wash); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1rem; }
.pmeta{ display:flex; gap:8px; align-items:baseline; margin:0 0 4px; }
.pdate{ font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3); }
.ptag{ font-size:1rem; border:1px solid var(--line-2); border-radius:var(--r); padding:1px 6px; color:var(--ink-2); }
.ptitle{ margin:0 0 4px; font-size:1.4rem; font-weight:600; line-height:1.5; }
.pex{ margin:0; font-size:1.2rem; color:var(--ink-2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pager{ display:flex; justify-content:center; gap:8px; padding:20px var(--pad); }
.pager a, .pager span{ min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; font-family:var(--f-num); font-size:1.3rem; border:1px solid var(--line-2); }
.pager .now{ background:var(--ink); color:#fff; border-color:var(--ink); }
.art{ padding:0 var(--pad); }
.art h2{ margin:30px 0 12px; padding-top:20px; font-size: 1.7rem; font-weight:600; }
.art h3{ margin:22px 0 8px; font-size:1.5rem; font-weight:600; }
.art p{ margin:0 0 16px; font-size:1.5rem; line-height:1.95; }
.art ul, .art ol{ margin:0 0 16px; padding-left:20px; }
.art li{ font-size:1.5rem; line-height:1.9; margin-bottom:6px; }
.art img, .artimg{ display:block; width:100%; aspect-ratio:16/9; background:var(--wash); border-radius:var(--r); margin:0 0 8px; align-items:center; justify-content:center; display:flex; color:var(--ink-3); font-size:1.1rem; }
.cap{ margin:0 0 20px; font-size:1.2rem; color:var(--ink-3); }
.artmeta{ display:flex; gap:10px; align-items:baseline; padding:0 var(--pad) 8px; }
.artmeta time{ font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); }
.exit{ margin:0 var(--pad) 22px; border:1px solid var(--ink); }
.exit-h{ margin:0; padding:10px 14px 10px; font-size:1.2rem; letter-spacing:.1em; color:var(--ink-3); border-bottom:1px solid var(--line); }
.exit a{ display:grid; grid-template-columns:104px 1fr; gap:12px; padding:14px 14px; }
.exit .ph{ aspect-ratio:4/3; background:var(--wash); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1rem; }
.exit b{ display:block; font-size:1.5rem; font-weight:600; line-height:1.4; margin-bottom:4px; }
.exit s{ text-decoration:none; display:block; font-size:1.2rem; color:var(--ink-2); margin-bottom:6px; }
.exit i{ font-style:normal; font-family:var(--f-num); font-size:1.5rem; font-weight:500; }
.exit i u{ text-decoration:none; font-family:var(--f-sans); font-size:1.1rem; color:var(--ink-2); }
.exit .go{ padding:0 14px 14px; }
.exit .go span{ display:block; text-align:center; background:var(--ink); color:#fff; min-height:42px; line-height:42px; font-size:1.4rem; font-weight:600; }
.nitem{ display:block; padding:14px var(--pad); border-bottom:1px solid var(--line); }
.nitem:active{ background:var(--wash); }
.nmeta{ display:flex; gap:8px; align-items:baseline; margin-bottom:4px; }
.ntag{ font-size:1rem; padding:2px 8px; border-radius:var(--r); background:var(--wash); color:var(--ink-2); }
.ntag.imp{ background:var(--ink); color:#fff; }
.ntitle{ margin:0; font-size:1.5rem; font-weight:600; line-height:1.5; }
.imp-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--tap); padding:0 var(--pad); background:var(--wash); border-bottom:1px solid var(--line); }
.imp-bar span{ font-size:1.2rem; color:var(--ink-2); }
.imp-bar b{ font-size:1.4rem; font-weight:600; }
.ways{ display:grid; gap:10px; padding:0 var(--pad); }
.way{ border:1px solid var(--ink); padding:16px; display:block; }
.way b{ display:block; font-size:1.6rem; margin-bottom:4px; }
.way p{ margin:0 0 12px; font-size:1.3rem; color:var(--ink-2); }
form{ padding:0 var(--pad); }
.f{ margin-bottom:18px; }
.f > label{ display:block; font-size:1.3rem; font-weight:600; margin-bottom:6px; }
.req{ font-size:1rem; font-weight:400; color:var(--paper); background:var(--full); padding:2px 6px; border-radius:var(--r); margin-left:6px; vertical-align:1px; }
.opt{ font-size:1rem; font-weight:400; color:var(--ink-3); margin-left:6px; }
textarea{ min-height:120px; resize:vertical; }
.hint{ font-size:1.2rem; color:var(--ink-2); margin-top:6px; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.submit{ width:100%; min-height:52px; background:var(--ink); color:#fff; border:0; border-radius:var(--r); font-size:1.6rem; font-weight:600; cursor:pointer; }
.agree{ display:flex; align-items:flex-start; gap:10px; font-size:1.3rem; margin:16px 0; }
.agree input{ width:18px; height:18px; margin-top:4px; flex:0 0 auto; accent-color:var(--ink); }
.agree a{ border-bottom:1px solid var(--line-2); }
.legalnav{ display:flex; flex-wrap:wrap; gap:0 18px; padding:14px var(--pad) 0; }
.legalnav a{ font-size:1.2rem; color:var(--ink-2); min-height:38px; display:flex; align-items:center; }
.areasum{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.areasum div{ background:var(--paper); padding:12px 6px; text-align:center; }
.areasum b{ display:block; font-family:var(--f-num); font-size:1.9rem; font-weight:500; }
.areasum b u{ text-decoration:none; font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); }
.areasum span{ font-size:1rem; color:var(--ink-3); }
.traits{ padding:0 var(--pad); margin:0; list-style:none; }
.traits li{ border-top:1px solid var(--line); padding:12px 0; }
.traits li:first-child{ border-top:0; padding-top:0; }
.traits b{ display:block; font-size:1.5rem; margin-bottom:4px; }
.traits span{ font-size:1.4rem; color:var(--ink-2); }
tbody th{ font-weight:400; font-size:1.2rem; color:var(--ink-2); white-space:nowrap; }
.rooms{ border-top:1px solid var(--line); }
.room{ display:grid; grid-template-columns:112px 1fr; gap:12px; padding:14px var(--pad); border-bottom:1px solid var(--line); align-items:start; }
.room:active{ background:var(--wash); }
.rname{ margin:0 0 4px; font-size:1.5rem; font-weight:600; line-height:1.4; }
.rname s{ text-decoration:none; font-size:1.1rem; font-weight:400; color:var(--ink-2); margin-left:6px; }
.rspec{ margin:0 0 6px; font-size:1.2rem; color:var(--ink-2); line-height:1.6; }
.rspec i{ font-style:normal; font-family:var(--f-num); font-size:1.3rem; color:var(--ink); }
.rspec em{ font-style:normal; color:var(--ink-3); padding:0 6px; }
.rprice{ margin:0; font-family:var(--f-num); font-size:1.7rem; font-weight:500; }
.rprice u{ text-decoration:none; font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); }
.acc{ margin:0 var(--pad); border:1px solid var(--line); }
.acc div{ display:grid; grid-template-columns:104px 1fr; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.acc div:last-child{ border-bottom:0; }
.acc dt{ font-size:1.2rem; color:var(--ink-2); }
.acc dd{ margin:0; font-size:1.4rem; }
.acc dd b{ font-family:var(--f-num); font-weight:500; }
.rprice.q{ font-family:var(--f-sans); font-size:1.3rem; color:var(--ink-2); }
.ghead{ padding:10px var(--pad) 8px; font-size:1.2rem; letter-spacing:.1em; color:var(--ink-3); border-top:1px solid var(--line); background:var(--wash); }
.rthumb{ flex:0 0 auto; width:var(--th); aspect-ratio:4/3; overflow:hidden; border-radius:var(--r); background:var(--wash); }
.rthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.help h2{ margin:0 0 6px; font-size:1.5rem; font-weight:600; }
.pick{ padding:0 var(--pad); margin:0; list-style:none; }
.pick li{ border-top:1px solid var(--line); padding:14px 0; }
.pick li:first-child{ border-top:0; padding-top:0; }
.pick q{ display:block; font-size:1.5rem; font-weight:600; quotes:"「" "」"; margin-bottom:4px; }
.pick p{ margin:0; font-size:1.4rem; color:var(--ink-2); }
.pick a{ font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-2); }
.rfit{ grid-column:1/-1; margin:8px 0 0; padding:10px 12px; background:var(--wash); font-size:1.2rem; line-height:1.6; }
.rfit b{ font-weight:600; }
.otherlinks{ display:flex; flex-wrap:wrap; gap:8px; padding:0 var(--pad); }
.otherlinks a{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); padding:8px 14px; color:var(--ink-2); }
td.y{ font-weight:600; }
td.n{ color:var(--ink-3); }
.flow{ padding:0 var(--pad); margin:0; list-style:none; }
.bulk{ display:block; text-align:center; background:var(--ink); color:#fff; min-height:var(--tap); line-height:var(--tap); font-size:1.4rem; font-weight:600; margin:14px var(--pad) 0; }
.toc-inline{ display:flex; flex-wrap:wrap; gap:6px; padding:0 var(--pad) 6px; }
.toc-inline a{ font-size:1.2rem; border:1px solid var(--line-2); border-radius:var(--r); padding:6px 12px; color:var(--ink-2); }
.doc{ padding:0 var(--pad); }
.doc h2{ margin:26px 0 10px; padding:0; font-size:1.6rem; font-weight:600; padding-top:20px; }
.doc h3{ margin:16px 0 6px; font-size:1.4rem; font-weight:600; }
.doc p{ margin:0 0 12px; font-size:1.4rem; line-height:1.85; }
.doc ol, .doc ul{ margin:0 0 14px; padding-left:20px; }
.doc li{ font-size:1.4rem; line-height:1.85; margin-bottom:6px; }
.doc table{ width:100%; border-collapse:collapse; font-size:1.4rem; margin:0 0 14px; }
.doc th, .doc td{ text-align:left; padding:12px 10px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.doc th{ font-weight:400; color:var(--ink-2); font-size:1.3rem; }
.doc td b{ font-family:var(--f-num); font-weight:500; }
.check{ margin:0 var(--pad) 18px; border:1px solid var(--ink); padding:14px 14px; }
.check b{ display:block; font-size:1.4rem; margin-bottom:4px; }
.check p{ margin:0; font-size:1.3rem; color:var(--ink-2); }

/* ---------- 3. 個別（1ページだけ）------------------------------- */
.lede + .lede{ margin-top:12px; }
.dl{ display:inline-flex; align-items:center; min-height:var(--tap); margin:10px var(--pad) 0; font-size:1.4rem; font-weight:600; border-bottom:1px solid var(--ink); }
.nav{ display:none; }
.hero{ position:relative; isolation:isolate; min-height:min(300px, 40vh); display:flex; align-items:flex-end; padding:26px 0 16px; background:var(--wash); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-2; background:url("https://space-albe.com/wp-content/uploads/2024/03/free-img-01.webp") center 42% / cover no-repeat; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,.92) 78%, var(--paper) 100%); }
.hero > .wrap{ position:relative; }
.hero h1{ margin:0 0 8px; font-size:2.2rem; line-height:1.45; font-weight:600; }
.hero p{ margin:0; font-size:1.4rem; color:var(--ink-2); }
.feature{ padding:16px var(--pad) 18px; background:var(--wash); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fph{ aspect-ratio:16/9; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1rem; letter-spacing:.1em; overflow:hidden; }
.fph img{ width:100%; height:100%; object-fit:cover; display:block; }
.fnote{ margin:6px 0 0; font-size:1.1rem; color:var(--ink-3); }
.flag{ display:inline-block; font-size:1rem; letter-spacing:.06em; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); padding:1px 6px; }
.ftx h2{ margin:8px 0 0; padding:0; font-size:1.7rem; font-weight:600; line-height:1.5; }
.ftx p{ margin:10px 0 0; font-size:1.3rem; color:var(--ink-2); line-height:1.75; }
.fgo{ display:block; margin-top:14px; text-align:center; min-height:var(--tap); line-height:var(--tap); font-size:1.4rem; font-weight:600; background:var(--ink); color:#fff; }
.uses{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.tile{ background:var(--paper); min-height:66px; padding:14px 14px; display:flex; flex-direction:column; justify-content:center; }
.tile:active{ background:var(--wash); }
.tile b{ font-size:1.5rem; font-weight:600; line-height:1.35; }
.tile s{ text-decoration:none; font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); margin-top:4px; }
.allspaces{ display:block; text-align:center; min-height:var(--tap); line-height:var(--tap); font-size:1.4rem; border-bottom:1px solid var(--line); }
.pickedbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--pad); border-bottom:1px solid var(--line); }
.pickedbar p{ margin:0; font-size:1.7rem; font-weight:600; line-height:1.4; }
.pickedbar s{ text-decoration:none; display:block; font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); font-weight:400; margin-top:2px; }
.change{ flex:0 0 auto; font-size:1.3rem; background:none; border:1px solid var(--line-2); border-radius:var(--r); min-height:36px; padding:0 12px; cursor:pointer; }
.topfrow{ padding:12px 0 12px; border-bottom:1px solid var(--line); }
.clear{ font-size:1.2rem; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--line-2); cursor:pointer; padding:0 0 1px; margin-left:10px; }
.soon{ margin:20px var(--pad) 0; padding:16px; border:1px solid var(--line); }
.soon h2{ margin:0 0 4px; font-size:1.4rem; font-weight:600; }
.soon p{ margin:0; font-size:1.2rem; color:var(--ink-2); }
.brand{ margin-top:32px; border-top:1px solid var(--line); padding:36px 0 30px; text-align:center; }
.brand p:first-child{ margin:0 0 8px; padding:0 var(--pad); font-size:1.7rem; font-weight:600; line-height:1.5; }
.brand .sub{ margin:0 0 22px; padding:0 var(--pad); font-size:1.3rem; color:var(--ink-2); }
.promisebtn{ display:inline-block; margin-top:20px; font-size:1.4rem; font-weight:600; border-bottom:1px solid var(--ink); }
.ft-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.ft-grid a{ min-height:var(--tap); display:flex; align-items:center; justify-content:center; font-size:1.3rem; border-bottom:1px solid var(--line); }
.ft-grid a:nth-child(odd){ border-right:1px solid var(--line); }
.lineup{ border-top:1px solid var(--line); }
.lhead{ margin:0; padding:20px var(--pad) 10px; font-size:1.3rem; font-weight:600; letter-spacing:.04em; }
.lhead s{ text-decoration:none; font-family:var(--f-num); font-size:1.2rem; font-weight:400; color:var(--ink-3); margin-left:8px; }
.lgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ltile{ background:var(--paper); padding:0 0 12px; }
.ltile:active{ background:var(--wash); }
.lph{ aspect-ratio:4/3; background:var(--wash); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1rem; letter-spacing:.1em; overflow:hidden; }
.lph img{ width:100%; height:100%; object-fit:cover; display:block; }
.larea{ display:inline-flex; align-items:center; gap:4px; font-size:1rem; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); padding:1px 6px 1px 4px; margin:10px 12px 0; white-space:nowrap; }
.larea svg{ width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lname{ margin:4px 12px 6px; font-size:1.3rem; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em; }
.lprice{ margin:0 12px; font-family:var(--f-num); font-size:1.4rem; font-weight:500; }
.lprice u{ text-decoration:none; font-family:var(--f-sans); font-size:1.1rem; color:var(--ink-2); }
.lprice.q{ font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); }
.assure{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.assure div{ background:var(--paper); padding:12px 8px; text-align:center; }
.assure b{ display:block; font-size:1.4rem; font-weight:600; }
.assure span{ font-size:1rem; color:var(--ink-3); line-height:1.5; }
.nopush{ margin:0; padding:14px var(--pad); font-size:1.4rem; border-bottom:1px solid var(--line); background:var(--wash); }
.way:has(input:checked){ border-color:var(--ink); border-width:2px; padding:14px; }
.way input{ position:absolute; opacity:0; pointer-events:none; }
.way b i{ font-style:normal; font-size:1.1rem; font-weight:400; color:var(--ink-3); margin-left:8px; }
.way ul{ margin:0; padding-left:18px; }
.way li{ font-size:1.2rem; color:var(--ink-2); margin-bottom:2px; }
.way li.minus{ color:var(--ink-3); }
.bundle{ margin:0 var(--pad); border:1px solid var(--ink); padding:16px; }
.bundle b{ display:block; font-size:1.5rem; margin-bottom:6px; }
.bundle p{ margin:0; font-size:1.3rem; color:var(--ink-2); }
/* 入力欄。**枠線は薄くしない**（R13-7）。白いページに白い面だと、
   枠が消えた瞬間に「どこに書くのか」が分からなくなる。
   面もわずかに沈めて、書く場所であることを面でも示す */
input[type=text], input[type=tel], input[type=email], input[type=date],
input[type=time], input[type=number], input[type=search], input[type=url],
input[type=password], input[type=datetime-local], select, textarea{ width:100%; font-family:inherit; font-size:1.6rem; color:var(--ink); background:var(--wash); border:1px solid var(--field); border-radius:var(--r); padding:12px 12px; min-height:var(--tap); }
.checks{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.checks label{ background:var(--paper); display:flex; align-items:center; gap:10px; padding:12px 12px; min-height:var(--tap); font-size:1.4rem; cursor:pointer; }
.checks input{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--ink); }
.checks span{ font-size:1.2rem; color:var(--ink-3); margin-left:auto; white-space:nowrap; }
.checks .g{ grid-column:1/-1; background:var(--wash); margin:0; padding:8px 12px; font-size:1.1rem; letter-spacing:.06em; color:var(--ink-2); }
.alt{ margin:0 var(--pad); border:1px solid var(--line); padding:16px; }
.alt b{ display:block; font-size:1.5rem; margin-bottom:6px; }
.alt p{ margin:0 0 12px; font-size:1.3rem; color:var(--ink-2); }
.datebar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; background:var(--wash); }
.dlabel{ display:block; font-size:1.1rem; letter-spacing:.14em; color:var(--ink-3); padding:0 var(--pad) 8px; }
.dchips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 var(--pad); }
.dchip{ font-size:1.3rem; line-height:1; color:var(--ink-2); background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); min-height:38px; padding:0 14px; cursor:pointer; }
.dchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.dpick{ display:flex; align-items:center; gap:8px; padding:10px var(--pad) 0; }
.dpick input{ font-family:var(--f-num); font-size:1.6rem; padding:8px 10px; border:1px solid var(--field); border-radius:var(--r); background:var(--wash); min-height:var(--tap); }
.avfrow{ padding:12px 0; border-bottom:1px solid var(--line); }
.headline{ padding:18px var(--pad) 12px; }
.headline b{ display:block; font-size:1.9rem; font-weight:600; }
.headline span{ font-size:1.3rem; color:var(--ink-2); }
.group{ margin:0; }
.row{ --th:64px; display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:14px var(--pad); border-top:1px solid var(--line); align-items:center; }
.row:active{ background:var(--wash); }
.rmain{ display:flex; align-items:center; gap:12px; min-width:0; }
.rtext{ min-width:0; }
.avname{ display:block; font-size:1.5rem; font-weight:600; line-height:1.4; }
.rmeta{ display:block; font-size:1.2rem; color:var(--ink-2); }
.rstat, .next{ padding-left:calc(var(--th) + 12px); }
.rstat{ grid-column:1/-1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:2px; }
.mark{ font-family:var(--f-num); font-size:1.7rem; font-weight:500; }
.mark.ok{ color:var(--ink); }
.mark.talk{ color:var(--ink); }
.mark.no{ color:var(--ink-3); }
.rtime{ font-size:1.3rem; color:var(--ink-2); }
.next{ grid-column:1/-1; margin-top:6px; font-size:1.2rem; color:var(--ink-2); }
.next b{ font-family:var(--f-num); font-weight:500; color:var(--ink); }
.multiday{ margin:0 var(--pad) 10px; padding:12px 14px; border:1px solid var(--key); border-radius:var(--r-lg); background:var(--key-w); }
.multiday p{ margin:0 0 10px; font-size:1.3rem; line-height:1.8; color:var(--ink); }
.multiday b{ display:block; font-size: 1.4rem; }
.mbtn{ display:flex; align-items:center; justify-content:center; min-height:var(--tap); padding:0 18px; background:var(--key); color:#fff; font-size:1.4rem; font-weight:600; border-radius:var(--r); }
.biz{ margin:0 var(--pad); border:1px solid var(--ink); padding:16px; }
.biz h3{ margin:0 0 6px; font-size:1.5rem; font-weight:600; }
.biz p{ margin:0 0 14px; font-size:1.3rem; color:var(--ink-2); }
.rlist{ border-top:1px solid var(--line); }
.ritem{ --th:64px; display:flex; align-items:flex-start; gap:12px; padding:16px var(--pad); border-bottom:1px solid var(--line); }
.rbody{ flex:1 1 auto; min-width:0; }
.rtop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; }
.rtname{ margin:0; font-size:1.5rem; font-weight:600; line-height:1.4; }
.rarea{ flex:0 0 auto; font-size:1.1rem; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); padding:1px 8px; white-space:nowrap; }
.raddr{ margin:0 0 4px; font-size:1.3rem; color:var(--ink-2); }
.rst{ margin:0 0 6px; font-size:1.3rem; }
.rst b{ font-family:var(--f-num); font-weight:500; }
.rph{ margin:0 0 10px; font-size:1.1rem; }
.rph .ok{ color:var(--ink); }
.rph .ng{ color:var(--ink-3); }
.rbtns{ display:flex; gap:8px; }
.rbtn{ flex:1; text-align:center; min-height:40px; line-height:40px; font-size:1.3rem; font-weight:600; border:1px solid var(--ink); }
.rbtn.primary{ background:var(--ink); color:#fff; }
.visitor{ margin:0 var(--pad) 18px; border:1px solid var(--ink); padding:16px; }
.visitor b{ display:block; font-size:1.5rem; margin-bottom:6px; }
.visitor p{ margin:0; font-size:1.3rem; color:var(--ink-2); }
.ok{ font-weight:600; }
.flow li{ border-left:1px solid var(--line-2); padding:0 0 18px 16px; position:relative; }
.flow li::before{ content:""; position:absolute; left:-4px; top:8px; width:7px; height:7px; background:var(--ink); }
.flow li:last-child{ border-left-color:transparent; padding-bottom:0; }
.flow b{ display:block; font-size:1.4rem; }
.flow span{ font-size:1.2rem; color:var(--ink-2); }
.flow em{ font-style:normal; font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); display:block; }
.docs{ border-top:1px solid var(--line); }
.bizdoc{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--pad); border-bottom:1px solid var(--line); min-height:var(--tap); }
.bizdoc b{ font-size:1.4rem; font-weight:600; line-height:1.45; }
.bizdoc s{ text-decoration:none; display:block; font-size:1.1rem; color:var(--ink-3); }
.bizdoc span{ flex:0 0 auto; font-size:1.3rem; font-weight:600; border-bottom:1px solid var(--ink); }
.spaces{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.spaces a{ background:var(--paper); padding:0 0 12px; }
.spaces div{ aspect-ratio:4/3; background:var(--wash); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:1rem; }
.spaces b{ display:block; margin:10px 12px 4px; font-size:1.3rem; font-weight:600; line-height:1.45; }
.spaces em{ display:block; margin:0 12px; font-style:normal; font-size:1.1rem; color:var(--ink-2); }
.case{ padding:14px var(--pad); border-top:1px solid var(--line); }
.case b{ display:block; font-size:1.4rem; }
.case p{ margin:4px 0 0; font-size:1.3rem; color:var(--ink-2); }
.lbl{ font:1.1rem var(--f-sans); fill:var(--ink-2); }
.day{ font:1.2rem var(--f-sans); font-weight:600; fill:var(--ink); }
.tm{ font:0.95rem var(--f-num); fill:var(--ink-3); }
/* 図の中の短い注記。段落用の .cap とは別物（あちらは margin を持つ） */
.svgnote{ font:0.95rem var(--f-sans); fill:var(--ink-2); }
.infrow{ padding:12px 0 12px; border-top:1px solid var(--line); }
.tools{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px var(--pad); border-top:1px solid var(--line); }
.sortwrap{ display:flex; align-items:center; gap:8px; }
.sortwrap label{ font-size:1.1rem; letter-spacing:.1em; color:var(--ink-3); }
select{ font-family:inherit; font-size:1.6rem; color:var(--ink); background:var(--wash); border:1px solid var(--field); border-radius:var(--r); padding:8px 10px; min-height:var(--tap); }
.area{ display:inline-flex; align-items:center; gap:4px; font-size:1.1rem; font-weight:400; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); padding:1px 6px 1px 4px; margin-right:6px; vertical-align:1px; white-space:nowrap; }
.area svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.badge.now{ background:var(--ink); color:#fff; }
.route{ border-top:1px solid var(--line); }
.rhead{ padding:14px var(--pad) 8px; font-size:1.2rem; letter-spacing:.1em; color:var(--ink-3); }
.route a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px var(--pad); border-top:1px solid var(--line); min-height:var(--tap); }
.route a:active{ background:var(--wash); }
.route b{ font-size:1.4rem; font-weight:600; display:block; }
.route span{ font-size:1.2rem; color:var(--ink-2); display:block; }
.route em{ font-style:normal; flex:0 0 auto; font-size:1.2rem; color:var(--ink-3); }
.route .sub{ margin:0; padding:10px var(--pad) 12px; font-size:1.2rem; color:var(--ink-2); background:var(--wash); border-top:1px solid var(--line); }
.route .sub a{ border-bottom:1px solid var(--line-2); font-weight:600; color:var(--ink); }
.way .go{ display:block; text-align:center; min-height:var(--tap); line-height:var(--tap); font-size:1.4rem; font-weight:600; border:1px solid var(--ink); }
.way .go.primary{ background:var(--ink); color:#fff; }
.tel{ margin:0 var(--pad); border:1px solid var(--line); padding:16px; }
.tel b{ display:block; font-family:var(--f-num); font-size:2.2rem; font-weight:500; }
.tel span{ display:block; font-size:1.2rem; color:var(--ink-2); }
.telnav{ margin:12px var(--pad) 0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.telnav > *{ background:var(--paper); margin:0; padding:12px 14px; }
.telnav a{ display:block; }
.telnav a b::after{ content:" ›"; color:var(--ink-3); }
.telnav b{ display:block; font-size:1.4rem; }
.telnav s{ text-decoration:none; display:block; font-size:1.2rem; color:var(--ink-2); line-height:1.65; margin-top:2px; }
.telnav p{ background:var(--wash); }
.lead-block{ padding:26px var(--pad) 24px; border-bottom:1px solid var(--line); }
.lead-block .em{ margin:0 0 16px; font-size: 2.2rem; font-weight:600; line-height:1.7; }
.lead-block p{ margin:0 0 14px; font-size:1.5rem; line-height:2.05; }
.lead-block p:last-child{ margin-bottom:0; }
.promises{  }
.promise{ padding:26px var(--pad); border-bottom:1px solid var(--line); }
.promise .no{ display:block; font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); letter-spacing:.1em; margin-bottom:8px; }
.promise h2{ margin:0 0 14px; padding:0; font-size:1.9rem; font-weight:600; line-height:1.6; }
.promise p{ margin:0 0 14px; font-size:1.5rem; line-height:2.05; }
.promise p:last-child{ margin-bottom:0; }
.mech{ margin:0 var(--pad); border:2px solid var(--ink); padding:18px; text-align:center; }
.mech .a{ font-family:var(--f-num); font-size:1.5rem; color:var(--ink-2); }
.mech .b{ font-family:var(--f-num); font-size:3rem; font-weight:500; line-height:1.3; margin:2px 0; }
.mech .b u{ text-decoration:none; font-family:var(--f-sans); font-size:1.4rem; color:var(--ink-2); }
.mech .arrow{ font-size: 1.7rem; color:var(--ink-3); line-height:1.2; margin:6px 0; }
.mech .c{ font-size:1.3rem; color:var(--ink-2); margin-top:10px; }
.ex{ margin:0 var(--pad); border:1px solid var(--line); }
.ex .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:1.4rem; }
.ex .row:last-child{ border-bottom:0; background:var(--wash); font-weight:600; }
.ex b{ font-family:var(--f-num); font-weight:500; font-size:1.6rem; }
.plans{ margin:0; }
.phead{ padding:12px var(--pad) 6px; font-size:1.3rem; font-weight:600; }
.psub{ padding:0 var(--pad) 10px; font-size:1.2rem; color:var(--ink-2); }
.tkplan{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:14px var(--pad); border-top:1px solid var(--line); align-items:baseline; }
.tkplan .h{ font-family:var(--f-num); font-size:1.9rem; font-weight:500; }
.tkplan .h u{ text-decoration:none; font-family:var(--f-sans); font-size:1.3rem; color:var(--ink-2); }
.tkplan .p{ font-family:var(--f-num); font-size:1.9rem; font-weight:500; text-align:right; }
.tkplan .p u{ text-decoration:none; font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); }
.tkplan .d{ grid-column:1/-1; font-size:1.2rem; color:var(--ink-2); margin-top:4px; }
.tkplan .d b{ font-family:var(--f-num); font-weight:500; color:var(--ink); }
.best{ display:inline-block; font-size:1rem; letter-spacing:.06em; padding:2px 8px; border-radius:var(--r); background:var(--ink); color:#fff; margin-left:8px; vertical-align:2px; }
.qnav{ display:flex; flex-wrap:wrap; gap:6px; padding:0 var(--pad) 6px; }
.qnav a{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); padding:8px 12px; color:var(--ink-2); }
.qnav a:hover{ border-color:var(--ink); color:var(--ink); }
.doors{ display:grid; gap:12px; padding:0 var(--pad); }
.door{ border:1px solid var(--ink); padding:16px; }
.door h2{ margin:0 0 6px; padding:0; font-size:1.6rem; font-weight:600; }
.door p{ margin:0 0 14px; font-size:1.3rem; color:var(--ink-2); }
.go{ display:block; text-align:center; min-height:var(--tap); line-height:var(--tap); font-size:1.5rem; font-weight:600; border:1px solid var(--ink); }
.go.primary{ background:var(--ink); color:#fff; }
input.num{ font-family:var(--f-num); letter-spacing:.06em; }
h2.sec{ margin:0 0 14px; padding:0 var(--pad); font-size:1.7rem; font-weight:600; }
.can{ padding:0 var(--pad); }
.help b{ display:block; font-size:1.4rem; margin-bottom:6px; }
.vrsum{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.vrsum div{ background:var(--paper); padding:12px 6px; text-align:center; }
.vrsum b{ display:block; font-family:var(--f-num); font-size:1.9rem; font-weight:500; }
.vrsum b u{ text-decoration:none; font-family:var(--f-sans); font-size:1.2rem; color:var(--ink-2); }
.vrsum span{ font-size:1rem; color:var(--ink-3); }
.vrs{ border-top:1px solid var(--line); }
.item{ border-bottom:1px solid var(--line); padding:16px var(--pad); }
.itop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; }
.iname{ margin:0; font-size:1.6rem; font-weight:600; line-height:1.4; }
.iarea{ flex:0 0 auto; font-size:1.1rem; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); padding:1px 8px; white-space:nowrap; }
.ispec{ margin:0 0 16px; font-size:1.2rem; color:var(--ink-2); }
.ispec i{ font-style:normal; font-family:var(--f-num); font-size:1.3rem; color:var(--ink); }
.ispec em{ font-style:normal; color:var(--ink-3); padding:0 6px; }
.facade{ position:relative; aspect-ratio:2/1; background:var(--wash); border:1px solid var(--line); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.facade b{ font-size:1.5rem; font-weight:600; }
.facade span{ font-size:1.1rem; color:var(--ink-3); letter-spacing:.08em; }
.facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ilinks{ display:flex; gap:8px; margin-top:10px; }
.ilink{ flex:1; text-align:center; min-height:var(--tap); line-height:var(--tap); font-size:1.4rem; font-weight:600; border:1px solid var(--ink); }
.ilink.primary{ background:var(--ink); color:#fff; }
.smwrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 60px; }
header{ background:var(--paper); border-bottom:1px solid var(--line); }
.hin{ max-width:var(--maxw); margin:0 auto; padding:22px var(--pad); }
.sub{ margin:0; font-size:1.2rem; color:var(--ink-2); }
.lg{ font-size:1.1rem; padding:4px 10px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); display:inline-flex; align-items:center; gap:6px; }
.dot{ width:9px; height:9px; flex:0 0 auto; }
.d-new{ background:var(--ink); }
.d-ren{ background:var(--paper); border:1px solid var(--ink); }
.d-keep{ background:var(--line-2); }
.d-off{ background:repeating-linear-gradient(45deg,var(--ink-3),var(--ink-3) 2px,transparent 2px,transparent 4px); }
.flow h2{ margin:0 0 14px; font-size:1.3rem; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.smfrow{ display:grid; grid-template-columns:1fr; gap:10px; }
.fcol{ border:1px solid var(--line); padding:12px; }
.fcol b{ display:block; font-size:1.3rem; margin-bottom:4px; }
.fcol span{ font-size:1.2rem; color:var(--ink-2); }
.fcol em{ font-style:normal; display:block; margin-top:8px; font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3); }
.hub{ margin-top:12px; border:2px solid var(--ink); padding:14px; background:var(--paper); }
.hub b{ display:block; font-size:1.5rem; }
.hub span{ font-size:1.2rem; color:var(--ink-2); }
.layer{ margin-top:26px; }
.smhead{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.smhead h2{ margin:0; font-size:1.6rem; font-weight:600; }
.smhead span{ font-size:1.2rem; color:var(--ink-2); }
.cards{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.smcard{ background:var(--paper); padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:start; }
.smcard .u{ font-family:var(--f-num); font-size:1.2rem; color:var(--ink); word-break:break-all; }
.smcard .n{ font-size:1.4rem; font-weight:600; }
.smcard .d{ grid-column:1/-1; font-size:1.2rem; color:var(--ink-2); }
.smtag{ font-size:1rem; padding:2px 8px; border-radius:var(--r); white-space:nowrap; border:1px solid var(--line-2); color:var(--ink-2); }
.t-new{ background:var(--ink); color:#fff; border-color:var(--ink); }
.t-ren{ border-color:var(--ink); color:var(--ink); font-weight:600; }
.t-off{ background:var(--wash); color:var(--ink-3); }
.pri{ font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3); }
.hubcard{ border-left:3px solid var(--ink); }
.merge{ background:var(--paper); border:1px solid var(--line); margin-top:26px; }
.merge h2{ margin:0; padding:14px 16px; font-size:1.5rem; font-weight:600; border-bottom:1px solid var(--line); }
.mrow{ display:grid; grid-template-columns:1fr 22px 1fr; gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-size:1.3rem; }
.mrow:last-child{ border-bottom:0; }
.mrow .from{ color:var(--ink-2); font-family:var(--f-num); font-size:1.2rem; word-break:break-all; }
.mrow .to{ font-family:var(--f-num); font-size:1.2rem; word-break:break-all; }
.mrow .ar{ text-align:center; color:var(--ink-3); }
.mnote{ padding:12px 16px; font-size:1.2rem; color:var(--ink-2); background:var(--wash); }
.clients{ display:flex; flex-wrap:wrap; gap:8px; padding:0 var(--pad); }
.client{ font-size:1.3rem; border:1px solid var(--line-2); border-radius:var(--r); padding:8px 14px; color:var(--ink-2); }
.hist{ padding:0 var(--pad); margin:0; list-style:none; }
.hist li{ display:grid; grid-template-columns:62px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.hist b{ font-family:var(--f-num); font-size:1.4rem; font-weight:500; color:var(--ink-2); }
.hist span{ font-size:1.4rem; }
.histlede{ margin:0 0 4px; padding:0 var(--pad); font-size:1.5rem; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); }
.cell{ background:var(--paper); min-height:70px; padding:14px 14px; display:flex; flex-direction:column; justify-content:center; }
.cell:active{ background:var(--wash); }
.cell b{ font-size:1.4rem; font-weight:600; line-height:1.4; }
.cell s{ text-decoration:none; font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); margin-top:4px; }
.cell.lead b{ font-size:1.5rem; }

/* ---------- 4. 画面幅による切り替え ------------------------------
   上の1〜3を、幅の小さい順に上書きする。素の指定より必ず後ろに置く */

@media (min-width:600px){
  .lgrid{ grid-template-columns:repeat(3,1fr); }
  .uses{ grid-template-columns:repeat(3,1fr); }
  .list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 var(--pad); }
  .card{ grid-template-columns:1fr; gap:0; padding:0 0 16px; border-bottom:0; background:var(--paper); }
  .ph{ border-radius:0; }
  .card > div{ padding:12px 14px 0; }
}

@media (min-width:640px){
  .list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 var(--pad); }
  .card{ grid-template-columns:1fr; gap:0; padding:0 0 16px; border-bottom:0; background:var(--paper); }
  .ph{ border-radius:0; }
  .card > div:last-child{ padding:12px 14px 0; }
  .grid{ grid-template-columns:repeat(3,1fr); }
  h1{ font-size:2.7rem; }
}

@media (min-width:700px){
  .summary{ grid-template-columns:repeat(4,1fr); }
  .shots{ gap:1px; }
  .shot{ flex-basis:60%; }
  .near{ grid-template-columns:repeat(4,1fr); }
  h1{ font-size:2.9rem; }
  .toc{ grid-template-columns:repeat(4,1fr); }
  .checks{ grid-template-columns:1fr 1fr; background:var(--paper); overflow:hidden; }
  .checks > *{ box-shadow:0 0 0 1px var(--line); }
  .room{ grid-template-columns:160px 1fr; }
  .spaces{ grid-template-columns:repeat(4,1fr); }
  .toc-inline{ grid-template-columns:repeat(4,1fr); }
  .ways{ grid-template-columns:1fr 1fr; }
  .mech .b{ font-size:3.8rem; }
  .doors{ grid-template-columns:1fr 1fr; align-items:start; }
}

@media (min-width:760px){
  .smfrow{ grid-template-columns:repeat(3,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:768px){
  body{ padding-bottom:0; }
  .bar{ display:none; }
  .hd-in, .crumb, h1, .lede, .summary, section > *, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .alts{ max-width:calc(var(--col) - var(--pad) * 2); margin-left:auto; margin-right:auto; }
  .feature{ max-width:var(--maxw); margin-left:auto; margin-right:auto; display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:24px; padding:24px var(--pad); align-items:start; }
  .ftx h2{ margin-top:10px; font-size: 2.2rem; }
  .ftx p{ font-size:1.4rem; }
  .fgo{ display:inline-block; padding:0 28px; margin-top:16px; }
  .hd-in, .hero > .wrap, .uses, .pickedbar, .topfrow > .chips, .list, .ft-grid, .count{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .uses{ grid-template-columns:repeat(4,1fr); }
  .lgrid, .lhead{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .lgrid{ grid-template-columns:repeat(4,1fr); }
  .nav{ display:flex; gap:24px; font-size:1.3rem; color:var(--ink-2); }
  .hero{ min-height:420px; padding:44px 0 26px; }
  .hero h1{ font-size:3rem; }
  .hd-in, .crumb, h1, .lede, .toc, section > *, .legal, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .crumb, h1, .lede, .assure, .nopush, section > *, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .crumb, h1, .lede, .areasum, section > *, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .row{ --th:88px; }
  .hd-in, .crumb, h1, .lede, .datebar > *, .avfrow > *, .headline, .group, .legend, .help, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .ritem{ --th:88px; }
  .hd-in, .crumb, h1, .lede, section > *, .legal, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .guide, .crumb, h1, .lede, .infrow > *, .tools, .list, .help, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .crumb, h1, .lede, .toc-inline, section > *, .legal, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .crumb, h1, .lede, .route, .ways, section > *, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .crumb, h1, .lede, .mech, section > *, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .crumb, h1, .lede, .doors, section > *, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  .hd-in, .crumb, h1, .lede, .vrsum, .vrs, section > *, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
  html{ font-size:75%; }
}

@media (min-width: 768px){
  .steps2{ grid-template-columns: 1fr 1fr; }
  .dimph, .vrshot{ max-width: 640px; margin-left:auto; margin-right:auto; }
  .dimset .tbl{ max-width: 640px; margin-left:auto; margin-right:auto; }
  .kitgrid{ grid-template-columns: repeat(4, 1fr); max-width: calc(var(--col) - var(--pad) * 2); margin-left:auto; margin-right:auto; }
  .zumen{ max-width: 640px; margin-left:auto; margin-right:auto; }
}

@media (min-width:960px){
  body{ padding-bottom:0; }
  .bar{ display:none; }
  .grid{ grid-template-columns:repeat(4,1fr); }
  .hd-in, .crumb, h1, .lede, .ghead, .grid, .note, .help, .legalnav, .ft-note{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
}

@media (min-width:1040px){
  .cards{ grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}


/* =================================================================
   ここから下は、もと pc.css にあった「画面幅と関係のない指定」。
   pc.css が日付順の修正メモになっていたので、役目ごとに置き直した。
   （2026-08-20）
   ================================================================= */

/* ===============================================================
   共通の表示調整（59ページが読み込む）

   構成
     0. ブランド色         …… ロゴの青を1色だけ通す
     1. 全幅共通の構造修正 …… 幅に関係なく起きている崩れ
     2. モバイルの調整      …… 767px以下。タップ領域44pxの担保
     3. PC表示の調整        …… 768px以上。読む列は広げすぎない

   ※ 元は「PC表示の調整」だけのファイルだったが、複数ページで同じ崩れが
      全幅で出ていたため、0〜2を足した。ページ固有のCSSより後に読まれる。
   =============================================================== */
/* ===============================================================
   0-0. 文字の大きさ

   CSSの font-size はすべて rem で書いてある（1rem = 10px 相当なので、
   1.3rem = 13px として読める）。拡大率はここ1か所で決まる。

     スマートフォン  1rem = 11px … 基準の110%
     PC（768px〜）   1rem = 12px … 基準の120%

   レンタルスペースを探す方の年齢層は幅が広く、40〜50代も一定数いる。
   既定の16px本文では小さいため引き上げた。スマートフォンを110%に
   とどめたのは、幅が固定なので上げすぎると折り返しが増えるため。

   余白・タップ領域・罫線は px のまま。文字だけを大きくする。
   =============================================================== */
html{ font-size: 68.75%; }

/* 1rem = 12px */
/* ===============================================================
   0. ブランド色

   ロゴから採った青（#0068b7）を1色だけ使う。使いどころは2つに限る。

     ・押すと先へ進むもの（塗りのボタン）
     ・いま選ばれているもの（チップ・チェック・カレンダーの選択日）

   ラベルやバッジ（必須・NEW など）は黒のままにする。青が
   「押せる／選ばれている」の合図として働かなくなるため。
   白抜き文字とのコントラストは 5.7:1（AA 適合）。
   =============================================================== */
:root{
  --key:   #0068b7;   /* ロゴの青 */
  --key-d: #005694;   /* 押している間 */
  --key-w: #eef5fb;   /* ごく薄い面。選択中の行の下地などに */

  /* 意味を持つ色。正は assets/tokens.css（予約システムと共有するファイル）。
     モックの各ページは tokens.css を読んでいないので、ここにも同じ値を置く。
     片方だけ変えないこと。 */
  --ok:     #0f7b3f;  --ok-w:     #eaf6ef;   /* できる・ある */
  --few:    #9a5b00;  --few-w:    #fdf4e3;   /* 残りわずか・要相談 */
  --full:   #c02a1e;  --full-w:   #fdeceb;   /* できない・満枠 */
  --closed: #6f6c66;  --closed-w: #f1f0ee;   /* 休み */
}

/* --- 押すと先へ進むもの --- */
.cta,
.submit,
.bulk,
.fgo,
.bar a.primary,
.act.primary,
.go.primary,
.way .go.primary,
.mapbtn.primary,
.ilink.primary,
.rbtn.primary,
.exit .go span{ background: var(--key); color: #fff; border-color: var(--key); }

.cta:active,
.submit:active,
.bulk:active,
.fgo:active,
.bar a.primary:active,
.act.primary:active,
.go.primary:active,
.way .go.primary:active,
.mapbtn.primary:active,
.ilink.primary:active,
.rbtn.primary:active,
.exit .go span:active{ background: var(--key-d); border-color: var(--key-d); }

/* --- いま選ばれているもの --- */
.chip[aria-pressed="true"],
.dchip[aria-pressed="true"],
.days button[aria-pressed="true"],
.pager .now{ background: var(--key); border-color: var(--key); color: #fff; }

.way:has(input:checked){ border-color: var(--key); }

input[type="checkbox"], input[type="radio"]{ accent-color: var(--key); }

/* --- 操作できる場所を示す線 --- */
:focus-visible{ outline-color: var(--key); }

/* ===============================================================
   0-2. 角丸

   予約システム側のUIに合わせる。同じドメインで続けて表示されるので、
   角の丸みが違うと別のサイトに見える。

   3段階だけ持つ。
     --r      8px   押すもの・入力欄
     --r-lg  12px   面（写真・囲み・罫線グリッド）
     --r-pill       チップ・タグ・バッジ

   画面の端まで伸びるもの（ヘッダー・フッター・固定バー・帯・
   メインビジュアル）は丸めない。角が画面の外に出て意味がないうえ、
   帯の連続が切れて見えるため。
   =============================================================== */
:root{
  --r:      8px;
  --r-lg:  12px;
  --r-pill: 999px;
}

/* --- 面 --- */
.ph, .pph, .kitph, .lph, .shot, .mapimg, .plan, .tkplan,
.tel, .alt, .bundle, .way, .assure, .stats, .cal, .toc, .toc-inline,
main figure, main figure img{ border-radius: var(--r-lg); overflow: hidden; }

/* 表だけは overflow を hidden にしない。列が多い表は幅が足りなくなることがあり、
   hidden だとはみ出したぶんが見えなくなる。auto なら角丸も効いたまま横へ流せる */
.tbl{ border-radius: var(--r-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 罫線を1pxのすき間で描いているグリッド。overflow を切らないと角から罫線がはみ出す */
.uses, .lgrid, .grid, .cards, .kit, .others, .otherlinks, .checks, .telnav,
.route, .ways, .days{ border-radius: var(--r-lg); overflow: hidden; }

/* 写真のカルーセルは左右に余白を入れて、角の丸みが見えるようにする。
   ついでに次の写真が少し覗くので、横に送れることが分かる */
.shots{ padding:0 var(--pad); gap:8px; scroll-padding: 0 var(--pad); }

.shot{ flex: 0 0 calc(100% - var(--pad) * 2); scroll-snap-align: center; }

/* 中身の写真は親の丸みに合わせる */
.ph img, .pph img, .kitph img, .lph img, .shot img,
.mapimg img, .plan img, .tkplan img{ border-radius: inherit; }

/* --- 押すもの・入力欄 --- */
.cta, .submit, .bulk, .fgo, .act, .go, .ilink, .mapbtn, .rbtn,
.login, .change, .clear, .promise, .promisebtn, .allspaces,
input, select, textarea, button{ border-radius: var(--r); }

/* --- チップ・タグ・バッジ --- */
.chip, .dchip, .tag, .flag, .larea, .badge, .ntag, .ptag,
.req, .deny-tags span, .pay dd span{ border-radius: var(--r-pill); }

/* --- ピルの塗り ------------------------------------------------
   白地に薄い枠・薄い文字の「白抜きピル」は、離れて見ると輪郭が消える。
   面を塗って読めるようにする。

   **色はロゴの青1色にそろえる**（2026-08-17 ご指示）。用途タグ・設備・
   支払い方法・お受けできないご利用・エリアラベルを同じ見た目にする。
   意味の違いは、見出しと記号（× など）で伝える。

   絞り込みチップ（.chip）だけは別扱い。押していない状態を青にすると
   「選ばれている」青と見分けられなくなるため、未選択は枠だけ・
   選択中は青の塗りつぶしのまま残す。
   「必須」「当日可」などの塗りのバッジも、ピルとは別の部品なので触らない。 */
a.tag,
span.tag,
.ptag,
.larea,
.flag,
.pay dd > span,
.deny-tags span{
  background: var(--key-w);
  border-color: var(--key);
  color: var(--key);
}

span.tag s,
.deny-tags span::before{ color: var(--key); }

/* ピルの中の注記（「請求書払い（法人）」の（法人）など）は、
   入れ子のピルにならないように打ち消す */
.pay dd > span .note{ background: none; border: 0; color: inherit; padding:0; }

/* ===============================================================
   0-3. 予約カレンダー

   サイト本体は白と墨で通し、ここだけ色を持たせる。「予約を受け付ける
   場所」だと色の違いで分かるようにする。配色は assets/tokens.css と
   calendar-sample.html に合わせてある（予約システム側へ渡す仕様と同じ）。

   ・状態は 色・記号（○△×）・文字の3つで重ねる
   ・セルの地は曜日だけを表し、空き状況は中の丸で表す
     （両方をセルの地で表すと、土曜の満室のように色がぶつかる）
   =============================================================== */
.cal{ border-color: var(--line-2); }

.calhd{ background: var(--key-w); }

.calhd button{ color: var(--key); border-color: var(--key); background: var(--paper); }

.dow div:first-child{ color: var(--full); }

/* 日 */
.dow div:last-child{ color: var(--key); }

/* 土 */
/* 7列グリッドなので、位置で曜日が決まる */
.days button:nth-child(7n+1){ background: var(--holiday-w, #fcfaf4); }

/* 日 */
.days button:nth-child(7n){   background: var(--holiday-w, #fcfaf4); }

/* 土 */
.days button:nth-child(7n+1) b{ color: var(--full); }

.days button:nth-child(7n) b{   color: var(--key); }

/* 状態の丸。記号はそのまま活かして、色と面を足す */
.days button s{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  font-size:1.3rem; font-weight: 600; line-height: 1;
  background: var(--ok-w); color: var(--ok);
  box-shadow: inset 0 0 0 1.5px var(--ok);
}

.days button.talk s{
  background: var(--few-w); color: var(--few);
  box-shadow: inset 0 0 0 1.5px var(--few);
}

.days button:disabled s{
  background: var(--full-w); color: var(--full);
  box-shadow: inset 0 0 0 1.5px var(--full);
}

.days button:disabled{ opacity: 1; }

/* 記号で伝わるので薄くしない */
.days button:disabled b{ color: var(--ink-3); }

.days button[aria-pressed="true"] b{ color: #fff; }

.days button[aria-pressed="true"] s{
  background: #fff; color: var(--key); box-shadow: none;
}

/* 凡例も同じ色で。ここが色の意味を説明する場所になる */
.cal .legend span b,
.cal2 ~ .legend span b{
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-right:4px; border-radius: var(--r-pill);
  font-size:1rem; font-weight: 700;
  background: var(--ok-w); color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok);
}

.cal .legend span:nth-child(2) b,
.cal2 ~ .legend span:nth-child(2) b{
  background: var(--few-w); color: var(--few); box-shadow: inset 0 0 0 1.5px var(--few);
}

.cal .legend span:nth-child(3) b,
.cal2 ~ .legend span:nth-child(3) b{
  background: var(--full-w); color: var(--full); box-shadow: inset 0 0 0 1.5px var(--full);
}

/* --- 丸めないもの（打ち消し） --- */
.hd, footer, .bar, .bar a, .guide, .hero, .feature,
.list, .picked, .pickedbar, .frow, .avfrow, .infrow, .smfrow, .topfrow{ border-radius: 0; }

.tbl table{ border-radius: 0; }

/* 角丸は .tbl 側で持つ */
/* ===============================================================
   0-4. グローバルナビゲーション

   全ページのヘッダーに同じ並びを入れてある。スマートフォンでは
   出す。768px未満ではヘッダーの「メニュー」から開く（R1）。

   PCではヘッダーを画面上部に貼り付ける。施設ページや記事は縦に長く、
   いちばん上まで戻らないと別のページへ移れない状態だった。
   =============================================================== */
.nav{ display: none; }

/* --- スマートフォンのメニュー（R1）------------------------------
   下部の固定バーは「空き状況・見学予約・LINE」の3つで、ページ間の
   移動には使えなかった。ヘッダーに「メニュー」を置き、押すと
   ヘッダー直下に同じ並びを開く。PCではボタンを隠し、横並びに戻す。 */
.hd{ position: relative; }

.navbtn{
  display: flex; align-items: center; gap:8px;
  min-height: var(--tap); padding:0 4px 0 10px;
  background: none; border: 0; font: inherit; font-size: 1.2rem;
  color: var(--ink); cursor: pointer;
}

.navbtn i{ width: 18px; height: 14px; position: relative; display: block; }

.navbtn i::before, .navbtn i::after, .navbtn i > b{
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .15s ease, opacity .15s ease;
}

.navbtn i::before{ top: 0; }

.navbtn i::after{ bottom: 0; }

/* 中央の1本は擬似要素が足りないので背景で描く */
.navbtn i{ background: linear-gradient(var(--ink), var(--ink)) center/100% 2px no-repeat; }

.navbtn[aria-expanded="true"] i{ background-image: none; }

.navbtn[aria-expanded="true"] i::before{ top: 6px; transform: rotate(45deg); }

.navbtn[aria-expanded="true"] i::after{ bottom: 6px; transform: rotate(-45deg); }

.nav[data-open]{
  display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.nav[data-open] a{
  display: flex; align-items: center; min-height: 52px;
  padding:0 var(--pad); border-top: 1px solid var(--line);
  font-size: 1.5rem; font-weight: 600;
}

.nav[data-open] a:first-child{ border-top: 0; }

.nav[data-open] a[aria-current="page"]{ color: var(--key); }

/* --- マイページ（R10）------------------------------------------
   「ログイン」では何のログインか分からないため文言を変え、
   押せることがはっきり分かるよう青の塗りにする */
.login{
  background: var(--key); border-color: var(--key); color: #fff; font-weight: 600;
}

.login:hover{ background: var(--key-d); border-color: var(--key-d); }

/* ===============================================================
   1. 全幅共通の構造修正
   =============================================================== */
/* 手順リスト（.steps）の説明文が26pxの数字列に落ちていた。
   li は「数字 | 本文」の2列グリッドで、::before が1列目・<b> が2列目に入り、
   <span> が自動配置で次の行の1列目（26px）へ回っていた。
   guide / showroom / ticket の3ページで、説明文が縦1文字ずつになっていた。 */
.steps li > b,
.steps li > span { grid-column: 2; }

/* 記事本文の見出しが本文より内側に入っていた。
   .art 自身が padding:0 var(--pad) を持つのに、h2 の共通指定
   （h2{ padding:0 var(--pad) }）も効いて余白が二重になっていた。 */
.art h2, .art h3 { padding-left:0; padding-right:0; }

/* 罫線を「1pxのすき間＋容器の背景色」で描いているグリッドで、
   最終行の空きセルに罫線色がそのまま面として出ていた
   （用途タイル11件÷4列、全施設19件÷4列、用途一覧の各グループなど）。

   容器の面を紙色に変え、罫線はセル側の1pxの影で描く。
   すき間は1pxなので、隣り合うセルの影が重なってちょうど1本の線になる。
   容器の外へ出る影は overflow:hidden で切る（上下の枠線と二重にしないため）。
   セルの数に依存しないので、データが可変になっても崩れない。 */
.uses, .lgrid, .grid, .cards, .kit {
  background: var(--paper);
  overflow: hidden;
}

.uses > *, .lgrid > *, .grid > *, .cards > *, .kit > * {
  box-shadow: 0 0 0 1px var(--line);
}

/* 「遠方からお越しの方へ」の囲み（.far）に指定が無く、素の <dl> のまま
   出ていた。dt が単独行、dd がブラウザ既定の40pxインデントという表示になり、
   囲みの枠も無かった。名駅フリースペースとアルベホール名古屋の2ページで発生。
   ほかの囲み（.tel / .alt）と同じ作りにそろえる。 */
.far {
  margin:0 var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}

.far h3 {
  margin:0;
  padding:12px 14px;
  font-size:1.5rem;
  font-weight: 600;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}

.far dl { margin:0; }

.far dl > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap:0 12px;
  padding:10px 14px;
  border-bottom: 1px solid var(--line);
}

.far dt { font-size:1.2rem; color: var(--ink-2); padding-top:2px; }

.far dd { margin:0; font-size:1.4rem; line-height: 1.7; }

.far .faracts { padding:12px 14px; }

/* ===============================================================
   0-6 開催中イベントの案内（docs/albe-events-plan.md）

   会場を貸しているだけで運営には関わっていない、という立場を
   はっきりさせつつ、来場者を主催者へ渡すための枠。

   大きさの順は「イベント名 → 外部リンク → 主催者名 → 断り書き」。
   来訪者が手がかりにしているのはイベント名で、主催者名は知らない
   ことが多い。断り書きを大きくしても連絡先は見つからず電話は止まらない。
   =============================================================== */
[data-events][hidden]{ display:none !important; }

.evbox{ margin:20px var(--pad) 18px; border:1px solid var(--key);
        border-radius:var(--r-lg); overflow:hidden; background:var(--key-w); }

.evbox-h{ margin:0; padding:10px 14px; background:var(--key); color:#fff;
          font-size:1.2rem; font-weight:600; letter-spacing:.06em; }

.ev{ padding:14px; background:var(--paper); border-top:1px solid var(--line); }

.ev:first-child{ border-top:0; }

.ev-when{ margin:0 0 6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
          font-family:var(--f-num); font-size:1.2rem; color:var(--ink-2); }

.ev-live{ font-family:var(--f-sans); font-size:1.1rem; font-weight:600; letter-spacing:.04em;
          background:var(--key); color:#fff; border-radius:var(--r-pill); padding:2px 10px; }

.ev-live-end{ background:var(--few,#9a5b00); }

.ev-live-past{ background:none; color:var(--ink-3); border:1px solid var(--line-2); }

/* いちばん大きいのがイベント名 */
.ev-t{ margin:0 0 4px; font-size:1.9rem; font-weight:600; line-height:1.4; }

.ev-where{ margin:0 0 12px; font-size:1.3rem; color:var(--ink-2); }

.ev-closed{ margin-left:8px; font-size:1.1rem; border:1px solid var(--line-2);
            border-radius:var(--r-pill); padding:1px 8px; color:var(--ink-2); }

/* 次に大きいのが外部リンク */
.ev-go{ display:block; text-align:center; min-height:var(--tap); line-height:var(--tap);
        background:var(--key); color:#fff; border-radius:var(--r);
        font-size:1.5rem; font-weight:600; }

.ev-go:hover{ background:var(--key-d); }

.ev-org{ margin:8px 0 0; font-size:1.3rem; color:var(--ink-2); }

.ev-entry{ margin:10px 0 0; padding:10px 12px; background:var(--wash);
           border-radius:var(--r); font-size:1.3rem; }

.ev-entry b{ display:block; font-size:1.1rem; color:var(--ink-2); font-weight:600; }

/* 断り書きはいちばん小さく */
.ev-note{ margin:10px 0 0; font-size: 1.2rem; line-height:1.7; color:var(--ink-3); }

.ev-none{ margin:0; padding:14px; background:var(--paper); font-size:1.3rem; color:var(--ink-2); }

/* 貸切（venue_only）。名称は出さない */
.ev-vo .ev-t{ font-size:1.5rem; color:var(--ink-2); }

/* 実績。問い合わせ導線は出さない（写真も出さない＝E5） */
.evbox-past{ border-color:var(--line); background:var(--wash); }

.evbox-past .evbox-h{ background:var(--wash); color:var(--ink-2);
                      border-bottom:1px solid var(--line); }

.ev-past{ padding:12px 14px; background:none; border-top:1px solid var(--line); }

.ev-past .ev-t{ font-size:1.5rem; }

.ev-past .ev-where{ margin-bottom:0; }

.ev-link{ margin:6px 0 0; font-size:1.2rem; }

.ev-link a{ color:var(--key); border-bottom:1px solid var(--key); }

/* ===============================================================
   0-7 施設ページの節リンク（R11・C案）

   施設ページは縦に長い。最初は大きな目次タイルで選べるようにし、
   タイルが画面から出たら、細いバーがヘッダーの下にすべり込む。
   バーはPCでは薄い地色にして、上のグローバルナビと階層が違うことを示す。
   =============================================================== */
.stile-h{ margin:18px var(--pad) 0; font-size:1.2rem; color:var(--ink-2); letter-spacing:.06em; }

.stile{ margin:8px var(--pad) 4px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.stile a{ display:flex; align-items:center; justify-content:space-between; gap:8px;
          min-height:48px; padding:0 12px; font-size: 1.4rem; font-weight:600;
          background:var(--key-w); color:var(--key);
          border:1px solid var(--key); border-radius:var(--r); }

.stile a::after{ content:"›"; font-weight:400; opacity:.7; }

/* 画面に貼り付ける。position:fixed にしているのは、sticky だと
   出していない間も高さを取り、上へずらしたバーがヘッダーに重なって
   メニューが押せなくなるため */
.snav{ position:fixed; left:0; right:0; top:0; z-index:40; background:var(--paper);
       border-bottom:1px solid var(--line);
       transform:translateY(-110%); visibility:hidden;
       transition:transform .18s ease, visibility .18s; }

.snav.on{ transform:none; visibility:visible; }

.snav-in{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
          scrollbar-width:none; padding:0 var(--pad); }

.snav-in::-webkit-scrollbar{ display:none; }

.snav a{ flex:0 0 auto; white-space:nowrap; padding:0 14px; min-height:44px;
         display:flex; align-items:center; font-size:1.3rem; color:var(--ink-2);
         border-bottom:2px solid transparent; }

.snav a[aria-current="true"]{ color:var(--key); font-weight:600; border-bottom-color:var(--key); }

/* ===============================================================
   0-8 写真の送りと拡大（R5・R8・R15）
   =============================================================== */
.shotwrap{ position:relative; }

/* R8：メインビジュアルを大きくする。
   スマートフォンでは横幅がすでに画面いっぱいなので、伸ばせるのは高さだけ。
   4:3 → 1:1 で高さを約1.3倍にする（これ以上伸ばすと、施設名と料金が
   最初の画面から押し出される）。PCは幅 62%→76%・比率はそのままで面積を約1.5倍。 */
.shots .shot{ aspect-ratio:1/1; }

.shotnav{ position:absolute; inset:0; pointer-events:none;
          display:flex; align-items:center; justify-content:space-between;
          padding:0 calc(var(--pad) + 6px); }

.shotnav button{ pointer-events:auto; width:44px; height:44px; border-radius:var(--r-pill);
                 border:1px solid var(--line); background:rgba(255,255,255,.92);
                 color:var(--ink); font-size:2.2rem; line-height:1; cursor:pointer;
                 display:flex; align-items:center; justify-content:center;
                 box-shadow:0 2px 10px rgba(0,0,0,.14); }

.shotnav button:hover{ background:#fff; }

.thumbs{ display:flex; gap:8px; overflow-x:auto; padding:8px var(--pad) 0;
         scrollbar-width:none; -webkit-overflow-scrolling:touch; }

.thumbs::-webkit-scrollbar{ display:none; }

.thumb{ flex:0 0 72px; height:54px; padding:0; border:0; background:none; cursor:pointer;
        border-radius:var(--r); overflow:hidden; opacity:.55; transition:opacity .15s; }

.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.thumb[aria-current="true"]{ opacity:1; box-shadow:0 0 0 2px var(--key); }

.thumb:hover{ opacity:.85; }

.zoomable{ cursor:zoom-in; }

/* ライトボックス（R15）。閉じる・送り・枚数を必ず画面に出す */
.lb{ display:none; position:fixed; inset:0; z-index:200; background:rgba(20,19,17,.94);
     align-items:center; justify-content:center; padding:64px 8px 72px; }

.lb[data-open]{ display:flex; }

.lb-fig{ margin:0; max-width:100%; max-height:100%; display:flex;
         flex-direction:column; align-items:center; gap:10px; }

.lb-fig img{ max-width:100%; max-height:calc(100vh - 150px); object-fit:contain;
             border-radius:var(--r-lg); background:#fff; }

.lb-cap{ color:#e8e6e2; font-size:1.2rem; text-align:center; max-width:60ch; }

.lb-x{ position:absolute; top:10px; right:10px; min-height:44px; padding:0 16px;
       border-radius:var(--r); border:1px solid rgba(255,255,255,.5);
       background:rgba(0,0,0,.35); color:#fff; font:inherit; font-size:1.3rem;
       font-weight:600; cursor:pointer; }

.lb-x:hover{ background:rgba(255,255,255,.16); }

.lb-p, .lb-n{ position:absolute; top:50%; transform:translateY(-50%);
              width:48px; height:48px; border-radius:var(--r-pill);
              border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.35);
              color:#fff; font-size:2.6rem; line-height:1; cursor:pointer;
              display:flex; align-items:center; justify-content:center; }

.lb-p{ left:10px; }

.lb-n{ right:10px; }

.lb-p[hidden], .lb-n[hidden]{ display:none; }

.lb-num{ position:absolute; bottom:18px; left:0; right:0; margin:0; text-align:center;
         color:#fff; font-family:var(--f-num); font-size:1.3rem; }

/* ===============================================================
   0-9 角丸の統一（R13・R14）

   これまで一覧やタイルは「1pxのすき間＋容器の背景色」で罫線を描き、
   **容器にだけ**角丸を掛けていた。そのため四隅だけが丸く、中の1枚
   1枚は四角いまま見えていた（写真も同じ）。

   すき間のある個別カードに組み替える。1枚ずつが枠になるので、
   角丸も写真も自然にそろう。
   容器の左右には、これまで容器が画面端まで伸びていたぶんの余白を
   padding で入れ直す。margin ではなく padding にしているのは、
   すでに余白を持っている容器に足しても二重にならないようにするため。
   =============================================================== */
.uses, .lgrid, .grid, .cards, .kit, .checks, .near, .others:has(img), .otherlinks:has(img){
  background: none;
  border: 0;
  overflow: visible;
  gap:10px;
  /* margin には触らない。ページ側が max-width と margin:auto で中央に
     そろえている一覧（トップの用途タイル・全施設）があり、ここで
     margin を 0 にすると中央ぞろえが外れて左に寄る */
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.uses > *, .lgrid > *, .grid > *, .cards > *, .kit > *,
.checks > *, .near > *, .others:has(img) > *, .otherlinks:has(img) > *{
  box-shadow: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}

/* カードの中の写真は、上の角だけ親に合わせる（下は文字が続くため） */
.uses > * > img, .lgrid > * img, .grid > * img, .cards > * img,
.kit > * img, .near > * img, .others:has(img) > * img, .otherlinks:has(img) > * img{
  border-radius: 0;
}

/* 単独の囲みで、角丸の指定から漏れていたもの */
.help, .sum, .summary, .areasum, .legend, .calhd, .rfit, .ghead, .easy, .deny,
.exit, .far, .imp-bar, .telnav, .doors > *, .ways > *,
.visitor, .visit, .pay, .acc, .check, .relay, .biz, .mech, .ex{
  border-radius: var(--r-lg);
}

.help, .summary, .areasum, .easy, .deny, .exit, .imp-bar{ overflow: hidden; }

/* カレンダーの見出し行は、カレンダー本体の上端に合わせて上だけ丸める */
.cal .calhd{ border-radius: var(--r-lg) var(--r-lg) 0 0; }

.cal .legend{ border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* 写真の角丸から漏れていたもの（R14） */
.vr, .vr img, .fph, .fph img, .facade, .facade img, .artimg,
main img:not(.logo img):not(.thumb img){ border-radius: var(--r-lg); }

.logo img, .lb-fig img, .thumb img{ border-radius: 0; }

.lb-fig img{ border-radius: var(--r-lg); }

/* 押せる面が44pxに満たなかったもの（角丸の作業中に見つけた）
   ・カレンダーの月送り（‹ ›）… PCで32pxしかなかった
   ・「遠方からお越しの方へ」の中のボタン … 行の高さだけの19pxだった */
.calhd button{ min-height: var(--tap); min-width: var(--tap); }

.faracts .act{
  min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
}

/* ===============================================================
   0-10 LINEのボタン（R3）

   文言が「LINEで相談」「LINEで聞く」の2種類、見た目も白抜きと
   墨の塗りつぶしが混在していた。**文言は「LINEで相談」にそろえ、
   見た目はLINEのブランドカラー（#06C755）1種類にする。**

   青（押せる）・緑（空きあり）の体系とはぶつからない。LINEのボタン
   以外にこの緑は使わないため、逆に「これはLINEだ」と一目で分かる。
   =============================================================== */
:root{ --line-green:#06C755; --line-green-d:#05A948; }

[data-line]{
  background: var(--line-green) !important;
  border-color: var(--line-green) !important;
  color: #fff !important;
  font-weight: 600;
}

[data-line]:hover{
  background: var(--line-green-d) !important;
  border-color: var(--line-green-d) !important;
}

/* 中に <span> を持つ形（記事末尾の導線）も同じ見た目にする */
[data-line] > span{ background: none !important; color: inherit !important; }

/* 下部の固定バーの中では、枠線ではなく面で示す */
.bar [data-line]{ border: 0 !important; }

/* ===============================================================
   0-11 こまかい直し（R2・R9・R12）
   =============================================================== */
/* R2：トップの「ALBEの約束を見る」。下線1本の文字リンクだったため、
   太字の描画分だけ文字が下線からはみ出して見えていた。
   枠のあるボタンにして、文字が枠に収まるようにする */
.brand .promise,
.brand .promisebtn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding:0 20px;
  border: 1px solid var(--key); border-radius: var(--r);
  background: var(--key-w); color: var(--key);
}

.brand .promise:hover,
.brand .promisebtn:hover{ background: var(--key); color: #fff; }

/* R9：ページ内の目次（よくあるご質問の「予約について」など）が
   白地に文字だけで、押せる場所に見えなかった。ピルと同じ青にする */
.qnav{
  display: flex; flex-wrap: wrap; gap:10px;
  padding:0 var(--pad);
  /* リード文のすぐ下に詰まっていたので、上下に間をあける。
     margin の一括指定は使わない。768px以上で中央にそろえている
     margin-left/right:auto を消してしまい、左に寄るため */
  margin-top:22px;
  margin-bottom:8px;
}

.qnav a{
  display: flex; align-items: center; min-height: 40px; padding:0 14px;
  border: 1px solid var(--key); border-radius: var(--r-pill);
  background: var(--key-w); color: var(--key);
  font-size: 1.3rem; font-weight: 600;
}

.qnav a:hover{ background: var(--key); color: #fff; }

.toc a,
.toc-inline a{
  background: var(--key-w); color: var(--key); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--key);
}

.toc a:hover,
.toc-inline a:hover{ background: var(--key); color: #fff; }

/* R12：「全施設共通」以下の箇条書きが枠の左右ぎりぎりに詰まっていた。
   中黒のぶんの余白を左に足し、行間も少し広げる */
.rules{
  padding-left:calc(var(--pad) + 1.2em);
  padding-right:var(--pad);
}

.rules li{ line-height: 1.85; margin-bottom:10px; padding-left:2px; }

/* ===============================================================
   0-12 地図の埋め込み（R16）

   これまでは地図の画像を貼り、押すとGoogleマップへ飛ぶ形だった。
   Googleマップの埋め込み（共有→地図を埋め込む で作るURL）に差し替える。
   このURL形式はAPIキーが要らない。

   ・iframe は遅延読み込み。地図は重いのでページ全体を遅くしないため
   ・title を必ず付ける（読み上げ対応）
   ・「Googleマップで経路」のボタンは残す。
     埋め込みの地図は現在地からの経路を出せないため
   ・Appleマップのボタンは 2026-08-30 のご指定で外した
   =============================================================== */
.gmap{
  margin:0 var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--wash);
  aspect-ratio: 16 / 10;
}

.gmap iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* ===============================================================
   0-13 施設ページ下部の3つの節（R6・H5）

   「ご利用者の声」「関連記事」「開催実績」を全19ページに同じ形で置く。
   出し分けに意図は無く、作った時期の違いがそのまま残っていただけ。

   ・関連記事 … 本番は microCMS から施設で絞って並べる
   ・ご利用者の声 … 元データが無い。集め方が決まるまでは「準備中」の枠
   ・開催実績 … データが無い施設では節ごと消える（assets/events.js）
   =============================================================== */
.soon{
  margin:0 var(--pad);
  padding:16px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--wash);
  color: var(--ink-2);
  font-size: 1.4rem;
  line-height: 1.8;
}

.soon small{ font-size: 1.2rem; color: var(--ink-3); }

section[hidden]{ display: none !important; }

/* 記事の一覧は、お知らせ・ブログ・施設ページの「関連記事」で共通に使う。
   これまで各ページの <style> にしか無く、施設ページでは素のリンクとして
   出ていた。共通の見た目をここに置く（角丸のカードにそろえる） */
.plist{ display: grid; gap:10px; padding:0 var(--pad); background: none; border: 0; }

.plist .nitem, .plist .pitem{
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: none;
}

.plist .nitem{ padding:14px 14px; }

.plist .nmeta{ display: flex; gap:8px; align-items: baseline; margin:0 0 4px; }

.plist .pdate{ font-family: var(--f-num); font-size: 1.2rem; color: var(--ink-3); }

.plist .ntitle{ margin:0; font-size: 1.4rem; font-weight: 600; line-height: 1.5; }

/* 一覧カードが3列になって幅が狭くなると、日付の横のタグが
   1文字ずつの縦書きに潰れていた。タグは縮めない・折り返さない */
.pmeta, .nmeta{ flex-wrap: wrap; }

.pmeta .ptag, .nmeta .ntag, .pmeta .pdate, .nmeta .pdate{
  flex: 0 0 auto; white-space: nowrap;
}

/* ===============================================================
   0-14 角丸と枠線の食い違いを直す

   上下だけに枠線を引き、左右は画面端まで伸ばしていた囲みに角丸を
   掛けたため、**左右の枠が無いぶん角が切れて見えていた**。
   四辺そろった枠にして、スマートフォンでは左右に余白を入れる。

   逆に、囲みではないもの（行の区切り・見出し行・カレンダーの日）に
   付いていた角丸は外す。角丸は「囲み」の印なので、区切り線に付けると
   線が途切れて見える。
   =============================================================== */
/* 囲みにするもの。1pxのすき間で罫線を描くグリッド */
.summary,
.areasum, .easy, .stats, .assure{
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* 目次（.toc）は R9 で中身を青いピルにしたので、容器の罫線グリッドはやめる */
.toc,
.toc-inline{
  background: none; border: 0; overflow: visible;
  gap:10px; padding-left:var(--pad); padding-right:var(--pad);
  margin-top:22px; margin-bottom:8px;
}

.toc a,
.toc-inline a{ border-radius: var(--r); min-height: 44px; }

/* 囲みではないもの。角丸を外す */
.legend, .ghead, .route, .allspaces, .doc .promise, .bizdoc .promise, .bizdoc .promisebtn, .doc .promisebtn, .promises .promise, .promises .promisebtn,
div.plan,
div.tkplan, .days button{ border-radius: 0; }

/* カレンダーの上下端だけは、外枠（.cal）の丸みに合わせる */
.cal .calhd{ border-radius: var(--r-lg) var(--r-lg) 0 0; }

.cal .legend{ border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* 1行だけの表示（お問い合わせページ）。
   電話をかけようとしている人はイベント名を見ればそれと分かるので、
   日時も断り書きも出さない。名前と会場だけを1行で */
.evbox-line{ background: var(--paper); }

.evline{
  display: flex; align-items: center; gap:10px; flex-wrap: wrap;
  margin:0; padding:12px 14px; min-height: var(--tap);
  border-top: 1px solid var(--line);
  font-size: 1.5rem; color: inherit;
}

.evline:first-of-type{ border-top: 0; }

.evline b{ font-weight: 600; }

.evline .ev-at{ font-size: 1.3rem; color: var(--ink-2); }

.evline i{ margin-left:auto; font-style: normal; color: var(--key); }

a.evline:hover{ background: var(--key-w); }

/* ===============================================================
   0-15 見出しの区別（h2 と h3）

   文字の大きさだけでは差が付きにくかったので、印を足す。
     h2 … 左に青いバー。節のはじまりを示す
     h3 … 薄い地色の帯。節の中の小見出し
   大きさの差だけに頼らないので、拾い読みしても構造が分かる。
   =============================================================== */
/* 青いバーは**文字の流れの中**に置く。絶対配置で「左から24px」に
   すると、見出しの余白がページによって違うぶんだけ位置がずれ、
   文字の上に重なることがあった（ALBEの約束のページで発生）。 */
section > h2::before, .art h2::before, .doc h2::before, .bizdoc h2::before{
  content: "";
  display: inline-block;
  width: 4px;
  height: .95em;
  margin-right:10px;
  border-radius: 2px;
  background: var(--key);
  vertical-align: -0.1em;
}

section > h3, .art h3, .doc h3, .bizdoc h3{
  margin:22px var(--pad) 10px;
  padding:8px 12px;
  background: var(--wash);
  border-left: 3px solid var(--line-2);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 1.4rem;
  font-weight: 600;
}

/* 囲みの中の見出し（.help / .far / .exit など）は、すでに枠で
   区切られているので帯にしない */
.help h3, .exit h3, .relay h3, .biz h3, .lb h3{
  margin:0 0 6px; padding:0; background: none; border: 0;
}

/* 「遠方からお越しの方へ」の見出しだけは、囲みの中の帯として作ってある。
   上の打ち消しに入れると余白まで消えて、下の行より左に飛び出す */
.far h3{
  margin:0; padding:12px 14px;
  background: var(--wash); border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 1.5rem; font-weight: 600;
}

/* ===============================================================
   0-17 4分割の帯を「角丸の罫線だけ」にする

   .summary（面積・最寄駅・営業時間・料金）などは、容器に罫線色の
   背景を敷き、1pxのすき間からその色を見せて区切り線にしていた。
   そのため面に色が乗って見えていた。

   容器の背景は透明にし、区切りはセル側の1pxの影で描く。
   すき間は1pxなので、隣り合うセルの影が重なって1本の線になる。
   外にはみ出す影は容器の overflow:hidden で切れる。
   =============================================================== */
.summary,
.areasum, .easy, .stats, .assure{ background: none; }

.summary > *,
.areasum > *, .easy > *, .stats > *, .assure > *{
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}

/* 注意書きの囲みが、ページ側の style 属性で枠だけ書かれていて
   角丸から漏れていた（予約変更・名駅エクササイズ・アルベホールの3か所）。
   すでに枠を持っているものだけに角丸を足す */
main section > div[style*="border"]{ border-radius: var(--r-lg); }

/* 周辺環境の写真列。メインビジュアルの半分の大きさで並べる。
   道順の案内はGoogleマップに任せ、ここはコンビニ・コインパーキングなど
   周辺の様子を写真だけで伝える（説明文は入れない） */
.shots.small .shot{ flex: 0 0 calc((100% - var(--pad) * 2 - 8px) / 2); aspect-ratio: 4/3; }

/* ===============================================================
   0-18 前売りチケットの訴求バナー（防音室A・B／東別院）
   =============================================================== */
.tktbn{
  display: block;
  margin:14px var(--pad) 0;
  padding:14px 16px;
  border: 1px solid var(--key);
  border-radius: var(--r-lg);
  background: var(--key-w);
  color: var(--ink);
}

.tktbn-lab{
  display: inline-block; margin-bottom:8px;
  padding:4px 10px; border-radius: var(--r-pill);
  background: var(--key); color: #fff;
  font-size: 1.2rem; font-weight: 600; letter-spacing: .04em;
}

.tktbn b{ display: block; font-size: 1.7rem; line-height: 1.5; }

.tktbn b i{ font-style: normal; font-family: var(--f-num); font-size: 2.6rem; color: var(--key); }

.tktbn s{ display: block; text-decoration: none; margin-top:4px;
          font-size: 1.3rem; color: var(--ink-2); }

.tktbn s u{ text-decoration: none; font-weight: 600; color: var(--ink); }

.tktbn em{ display: flex; align-items: center; justify-content: center;
           margin-top:12px; min-height: var(--tap);
           background: var(--key); color: #fff; border-radius: var(--r);
           font-style: normal; font-size: 1.4rem; font-weight: 600; }

.tktbn:hover em{ background: var(--key-d); }

/* ===============================================================
   0-19 日時の入力欄（第1希望・第2希望）
   スマホで枠が画面からはみ出していた。
   grid の子は既定で min-width:auto のため、日付・時刻の入力欄が
   持つ「これ以上は縮まない幅」に押し広げられていた。
   min-width:0 で縮めることを許し、さらに狭い画面では縦に並べる。
   =============================================================== */
.pair > *{ min-width: 0; }

/* 日付や時刻の入力欄は、中身が収まるだけの幅を自前で確保しようとする。
   狭い枠に入れると、width:100% を指定しても押し出されてはみ出す */
input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"]{
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* ===============================================================
   0-20 ご利用者の声
   APIでは繋がず、CSVに1行ずつ足していく（data/20260819_ご利用者の声.csv）。
   集めたクチコミは AggregateRating に出せないので、星の平均は出さない。
   =============================================================== */
.voices{ display: grid; gap:10px; padding:0 var(--pad); }

.voice{ margin:0; padding:14px 16px; background: var(--paper);
        border: 1px solid var(--line); border-radius: var(--r-lg); }

.voice blockquote{ margin:0; font-size: 1.4rem; line-height: 1.85; }

.voice figcaption{ display: flex; align-items: baseline; flex-wrap: wrap; gap:4px 10px;
                   margin-top:10px; font-size: 1.2rem; color: var(--ink-2); }

.voice figcaption time{ font-family: var(--f-num); }

/* 出典は必ず添える。どこでいただいた言葉なのかが分からないと引用にならない */
.vsrc{ padding:2px 8px; border: 1px solid var(--line-2); border-radius: 999px;
       font-size: 1.1rem; color: var(--ink-2); }

.vlink{ display: inline-block; margin-top:8px; font-size: 1.2rem;
        color: var(--key); border-bottom: 1px solid var(--line-2); }

/* ===============================================================
   0-21 空き状況カレンダーの2か月表示
   予約システムが当月＋翌月の2か月表示になったのに合わせる（#79）。
   PCは横2列、スマホは縦2段。送りは2か月単位なので「‹」は左の月、
   「›」は右の月にだけ置く。
   docs/booking-system-integration-contract.md 参照
   =============================================================== */
.cal2{ display: grid; gap:8px; }

/* 送りボタンの無いほうにも同じ幅を取らせ、月名を中央に保つ */
.calhd > span:empty{ display: inline-block; min-width: 36px; }

/* 2か月表示では凡例をカレンダーの外に出したので、単独の帯として整える */
.cal2 ~ .legend{
  margin:8px var(--pad) 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

/* ===============================================================
   0-22 平面図まわりのボタン
   =============================================================== */
/* --- 図面まわりの2つのボタン。どちらもよく押されるので同じ大きさで横に並べる。
       PDFは白抜き、業者様向けページは青の塗りつぶし --- */
.planbtns{ display:flex; gap:8px; margin:12px var(--pad) 0; }

.planbtns a{ flex:1 1 0; display:flex; flex-direction:column; align-items:center;
             justify-content:center; gap:2px; min-height:52px; padding:8px 10px;
             font-size:1.4rem; font-weight:600; line-height:1.35; text-align:center;
             border-radius:var(--r); border:1px solid var(--key); }

.planbtns .b-pdf{ color:var(--key); background:var(--paper); }

.planbtns .b-pdf:active{ background:var(--key-w); }

.planbtns .b-setup{ color:#fff; background:var(--key); }

.planbtns .b-setup:active{ background:var(--key-d); }

.planbtns s{ text-decoration:none; font-size:1.1rem; font-weight:500; }

.planbtns .b-pdf s{ color:var(--ink-2); }

.planbtns .b-setup s{ color:rgba(255,255,255,.85); }

/* ===============================================================
   0-23 フォームの入力チェック・確認画面・完了画面
   （assets/form.js。見学の申し込みとお問い合わせで共通）
   =============================================================== */
/* 入力に不備がある欄。枠を赤くして、下に理由を出す */
.f.bad input, .f.bad select, .f.bad textarea{ border-color: var(--full); }

.f.bad input:focus-visible, .f.bad select:focus-visible, .f.bad textarea:focus-visible{
  outline-color: var(--full); }

.agree.bad{ color: var(--full); }

.emsg{ margin:6px 0 0; padding:0 var(--pad); font-size: 1.2rem; color: var(--full); }

form .emsg{ padding:0; }

/* 確認画面・完了画面 */
.fstep{ padding:0 var(--pad); }

.fstep-h{ margin:0 0 12px; font-size: 1.5rem; font-weight: 600; }

.fsum{ margin:0; display: grid; gap:1px; background: var(--line);
       border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.fsum > div{ background: var(--paper); display: grid; grid-template-columns: 1fr; gap:2px;
             padding:12px 12px; }

.fsum dt{ font-size: 1.2rem; color: var(--ink-2); }

.fsum dd{ margin:0; font-size: 1.4rem; line-height: 1.6; word-break: break-word; }

.fbtns{ display: grid; grid-template-columns: 1fr 1.4fr; gap:8px; margin-top:16px; }

.fbtns-1{ grid-template-columns: 1fr; }

.fbtns button, .fbtns .fgo{ display: flex; align-items: center; justify-content: center;
       min-height: 52px; padding:0 14px; border-radius: var(--r);
       font: inherit; font-size: 1.5rem; font-weight: 600; cursor: pointer; text-align: center; }

.fbtns .fback{ background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); }

.fbtns .fsend{ background: var(--ink); color: #fff; border: 0; }

.fbtns .fsend:disabled{ background: var(--ink-3); cursor: default; }

.fbtns .fback:disabled{ color: var(--ink-3); cursor: default; }

.fbtns .fgo{ background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); }

/* 完了 */
.fdone{ padding:18px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
        background: var(--wash); }

.fdone-h{ margin:0 0 10px; font-size: 1.7rem; font-weight: 600; }

.fdone p{ margin:0 0 10px; font-size: 1.4rem; line-height: 1.8; }

.fdone p:last-child{ margin-bottom:0; }

.fdone .note{ font-size: 1.2rem; color: var(--ink-2); }

/* 施設一覧と「今日・明日空いているスペース」。
   施設ページの .soon は section の中で見出しのすぐ下に来るので、
   トップページの並び（main の直下）だけを対象にする */
main > .soon{ margin-top:28px; }