/* ★ネクステの全ページ共通の見た目。正本はこの1本。
   2026-08-28 に service/sns.html から取り出しました。
   ここを直せば全ページに効きます。各ページに同じCSSを貼らないでください。 */

:root{--navy:#0d1b2a;--accent:#00a0a0;--accent2:#0eaba8;--ink:#1a2b3c;--muted:#666;
      --bg:#fff;--bg2:#f5f5f5;--line:#e0e0e0;
      --jp:"NexteSans","Hiragino Sans","Noto Sans JP",-apple-system,sans-serif;
      --round:"NexteRound","Hiragino Maru Gothic ProN",var(--jp);
      --brush:"NexteBrush","Hiragino Mincho ProN",serif;
      --mono:"NexteCode",ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);font-size:16px;
     line-height:1.9;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
a{color:var(--accent)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header.site{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
/* ★ヘッダーの社名も「押せる大きさ」にする（36px以上） */
header.site a{color:var(--ink);text-decoration:none;font-weight:700;font-size:18px;
  display:inline-flex;align-items:center;min-height:44px}
.crumb{background:var(--bg2);border-bottom:1px solid var(--line);font-size:14px}
.crumb .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.crumb a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.crumb span{display:inline-flex;align-items:center;min-height:44px}
.hero{background:linear-gradient(160deg,var(--navy),#132738);color:#fff;padding:56px 0 50px}
.hero .en{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--accent);margin:0 0 14px}
.hero h1{font-size:29px;line-height:1.5;margin:0 0 16px;font-weight:700}
.hero p{margin:0 0 26px;color:#dfe6ea;max-width:700px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 32px;
     background:var(--accent);color:#fff;font-weight:700;text-decoration:none;font-size:16px}
.btn:hover{background:var(--accent2)}
section{padding:56px 0}
section.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-en{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--accent);margin:0 0 8px;text-align:center}
h2{font-size:25px;margin:0 0 12px;text-align:center;font-weight:700;line-height:1.5}
.lead{text-align:center;color:var(--muted);font-size:15.5px;margin:0 auto 38px;max-width:680px}
/* ★見出しの左罫は金(#b8935a)。全社の画面の決まり（UI_STANDARD）に合わせる */
h3{font-size:19px;margin:34px 0 12px;padding-left:12px;border-left:4px solid #b8935a;line-height:1.6}
.body{max-width:760px;margin:0 auto}
.body p{margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);padding:26px 24px}
section.alt .card{background:var(--bg2)}
.card h4{font-size:17px;margin:0 0 10px;font-weight:700;line-height:1.6}
.card p{font-size:14.5px;color:var(--muted);margin:0}
.steps{counter-reset:s;list-style:none;padding:0;max-width:760px;margin:0 auto}
.steps li{counter-increment:s;position:relative;padding:0 0 20px 52px;font-size:15.5px}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:34px;height:34px;background:var(--navy);
  color:#fff;font-family:var(--mono);font-weight:700;display:flex;align-items:center;justify-content:center}
.table-wrap{overflow-x:auto;border:1px solid var(--line);background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);line-height:1.6}
th{background:var(--bg2);font-weight:700;font-size:13.5px;white-space:nowrap}
.linklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;max-width:900px;margin:0 auto}
.linklist a{display:flex;align-items:center;min-height:52px;padding:12px 18px;background:#fff;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15px;font-weight:700}
section.alt .linklist a{background:var(--bg2)}
.linklist a:hover{border-color:var(--accent);color:var(--accent)}
.cta{text-align:center}
.cta p{margin:0 0 22px;font-size:16.5px}
footer.site{background:var(--navy);color:#c8d2d8;padding:40px 0 30px;font-size:14px}
footer.site p{margin:0 0 8px;line-height:1.8}
/* ★リンクは押せる大きさ（36px以上）にする */
footer.site a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
footer.site .links{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
footer.site a{color:#9fd8d8}
@media (max-width:640px){
  .hero{padding:40px 0 36px}.hero h1{font-size:23px}
  section{padding:42px 0}h2{font-size:21px}h3{font-size:17px}
}

/* ── 濃くするために足した分（2026-08-27） ───────────────── */
nav.gnav{background:#fff;border-bottom:1px solid var(--line)}
nav.gnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
nav.gnav li{margin:0}
nav.gnav a{display:inline-flex;align-items:center;min-height:46px;padding:0 12px;
  text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:700}
nav.gnav a:hover{color:var(--accent)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.crumb li{display:inline-flex;align-items:center;gap:6px}
ul.list,ol.list{max-width:760px;margin:0 auto 20px;padding-left:1.35em}
ul.list li,ol.list li{margin:0 0 9px;font-size:15.5px;line-height:1.9}
.body ul.list,.body ol.list{margin-left:0}
.note{border:1px solid var(--line);background:#fff;padding:16px 18px;font-size:14.5px;
  line-height:1.9;margin:0 auto 22px;max-width:760px}
section.alt .note{background:var(--bg2)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:900px;margin:0 auto}
.box{border:1px solid var(--line);background:#fff;padding:24px 24px 6px}
section.alt .box{background:var(--bg2)}
.box h3{margin-top:0}
.box ul{margin-bottom:16px}
.fig{margin:0 0 26px}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.fig figcaption{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.8}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;list-style:none;padding:0;margin:0 auto;max-width:960px}
.thumbs li{margin:0}
.thumbs a{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:#fff}
section.alt .thumbs a{background:var(--bg2)}
.thumbs a:hover{border-color:var(--accent)}
.thumbs img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.thumbs span{display:flex;align-items:center;min-height:48px;padding:10px 16px;font-size:15px;font-weight:700}
.sitemapf{margin:26px 0 4px}
.sitemapf h2{font-size:14px;text-align:left;margin:14px 0 4px;color:#fff;letter-spacing:.08em;
  padding-left:10px;border-left:3px solid var(--accent)}
.sitemapf ul{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:0 18px}
.sitemapf li{margin:0}
.sitemapf a{display:inline-flex;align-items:center;min-height:40px;font-size:13.5px;color:#9fd8d8;text-decoration:none}
.sitemapf a:hover{text-decoration:underline}
.arealist{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;list-style:none;padding:0;margin:0 auto;max-width:900px}
.arealist li{margin:0}
.arealist a{display:flex;align-items:center;min-height:52px;padding:12px 18px;background:#fff;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15px;font-weight:700}
section.alt .arealist a{background:var(--bg2)}
.arealist a:hover{border-color:var(--accent);color:var(--accent)}
table.po-stack td.n{font-family:var(--mono);white-space:nowrap}
@media (max-width:640px){
  table{min-width:0}
  .table-wrap{border:none}
  table.po-stack thead{display:none}
  table.po-stack tr{display:block;border:1px solid var(--line);background:#fff;margin:0 0 14px;padding:6px 0}
  table.po-stack td{display:flex;justify-content:space-between;gap:14px;border:none;padding:7px 15px;font-size:14.5px}
  table.po-stack td::before{content:attr(data-l);font-weight:700;color:var(--muted);font-size:13.5px;white-space:nowrap}
  nav.gnav a{font-size:13.5px;padding:0 9px}
}

/* ═══════════════════════════════════════════════════════════
   ★文字まわりの作り直し（2026-08-27 オーナー指摘）
   「文字の中央揃え・フォント・位置・横の線を改善して」
   手本を見て直したところ：
    ① 本文の行が長すぎて読みにくい → 幅を制限
    ② 見出しの横の罫が細くて弱い → 太く・長く・下線も足す
    ③ 箇条書きが宙に浮いていた → 枠に入れる
    ④ 見出しの大小の差が小さい → はっきり付ける
    ⑤ 節の地色が全部 白でのっぺり → 交互にする
   ═══════════════════════════════════════════════════════════ */

/* ① 本文は1行を長くしない（日本語は40〜45字が読みやすい） */
/* ★2026-08-27 修正：この指定がナビの ul にも当たり、8項目が720pxに押し込まれて切れていた。
   本文の中の ul だけに限定する（ナビ・フッターは対象外） */
.body p, .body > ul, .body > ol, section > .wrap > p { max-width: 720px; }
.gnav ul, footer ul, .photo-band ul { max-width: none !important; }
.body { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ② 見出しの横の線を太く・長く。下にも細い線を足す */
h3 {
  border-left: 5px solid var(--accent) !important;
  padding-left: 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 21px !important;
  letter-spacing: .02em;
  margin-top: 44px !important;
}

/* ③ 大見出しは中央・下に金の短い線を1本 */
h2 {
  font-size: 29px !important;
  letter-spacing: .04em;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 14px !important;
}
h2::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 56px; height: 3px; margin-left: -28px;
  background: #b8935a;
}

/* ④ 節の上の英字ラベルを、小さすぎない大きさに */
.sec-en { font-size: 13.5px !important; letter-spacing: .28em !important; font-weight: 700; }

/* ⑤ 宙に浮いていた箇条書きを枠に入れる */
.wrap > ul, .body > ul:first-of-type {
  max-width: 720px; margin: 0 auto 34px;
  background: var(--bg2); border: 1px solid var(--line);
  padding: 26px 30px 26px 46px;
}
/* ★暗い帯の中では、上の白い枠を打ち消す（白地に白文字になっていた） */
.photo-band .wrap > ul, .photo-band ul {
  background: transparent !important; border: 0 !important; padding: 0 !important;
  max-width: 800px !important;
}
.wrap > ul li, .body > ul li { margin-bottom: 9px; }

/* ⑥ 段落の中の強調をはっきり見せる（太字＋金の下線ハイライト） */
.body strong, section strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(184,147,90,.30) 62%);
  padding: 0 2px;
}

/* ⑦ 節の地色を交互にして、のっぺりを止める */
section:nth-of-type(even) { background: var(--bg2); }
section.alt { background: #fff; }

/* ⑧ 表は文字を詰めすぎない */
table th, table td { padding: 15px 16px !important; }
table th { letter-spacing: .04em; }

/* ⑨ スマホでは見出しを詰める */
@media (max-width: 640px) {
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; padding-left: 13px !important; }
  .wrap > ul, .body > ul:first-of-type { padding: 20px 18px 20px 36px; }
}

/* ⑩ ★全幅の帯（手本で一番 効いていた作り）
   手本は暗い写真の上に白い大文字。うちは実写が足りないので、
   濃紺の面＋金の細い罫＋大きい白文字で同じ「足を止める」働きをさせる。
   ★実写が用意できたら background-image を差し替えるだけ。 */
.photo-band {
  background: linear-gradient(160deg, #0d1b2a 0%, #16324a 60%, #0d1b2a 100%);
  color: #fff; padding: 66px 0 60px; position: relative;
  border-top: 3px solid #b8935a; border-bottom: 3px solid #b8935a;
}
.photo-band .wrap { max-width: 860px; text-align: center; }
.photo-band h2 { color: #fff !important; font-size: 31px !important; margin-bottom: 30px !important; }
.photo-band h2::after { background: #b8935a; }
.photo-band .lead { color: rgba(255,255,255,.86) !important; }
.photo-band ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px 26px; list-style: none; padding: 0; margin: 0 auto; max-width: 800px; text-align: left;
}
.photo-band ul li {
  padding: 13px 16px 13px 40px; position: relative;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  font-size: 15.5px; line-height: 1.7;
}
.photo-band ul li::before {
  content: ""; position: absolute; left: 15px; top: 21px;
  width: 12px; height: 2px; background: #b8935a;
}
.photo-band .big { font-size: 54px; font-weight: 700; color: #b8935a; line-height: 1;
  display: block; margin-bottom: 6px; font-family: var(--mono); }
@media (max-width: 640px) {
  .photo-band { padding: 44px 0 40px; }
  .photo-band h2 { font-size: 22px !important; }
  .photo-band .big { font-size: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   ★背景の作り直し（2026-08-27 オーナー指摘「背景画像が面白くない／見応えがない」）
   手本 shinker.co.jp のサービスページを実測したところ、背景に写真はほぼ使わず
   （sns.html＝写真1箇所・グラデーション6箇所 / seo.html＝写真1箇所・グラデ4箇所）、
   「グラデーションの面」で見応えを作っていた。同じ考え方でCSSだけで面を作る。
   ・画像ファイルは1枚も増やさない（軽い・あとから作り直せる）
   ・使う色は 濃紺#0d1b2a／墨#1a2b3c／ターコイズ#00a0a0／金#b8935a／薄グレー#f5f5f5／白 とその混ぜ色だけ
   ・動く背景（アニメーション）は入れない
   ・濃い地の上は白文字、薄い地の上は墨文字。小さい文字は4.5:1以上を実測して確認した
   ═══════════════════════════════════════════════════════════ */

/* ── 面1：ページ上部のヒーロー
      平らな濃紺1色 → 斜めのグラデ＋45度の細線（幾何模様）＋ターコイズと金の光 */
.hero{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.038) 0 1px, rgba(255,255,255,0) 1px 22px),
    radial-gradient(120% 92% at 88% -12%, rgba(0,160,160,.34) 0%, rgba(0,160,160,0) 58%),
    radial-gradient(92% 82% at 2% 114%, rgba(184,147,90,.18) 0%, rgba(184,147,90,0) 62%),
    linear-gradient(152deg, #0b2b38 0%, #0d1b2a 46%, #142337 74%, #0d1b2a 100%);
}
.hero .en{color:#4fbdbd}

/* ── 面2：お困りごとの帯（.photo-band）
      濃紺のグラデだけ → 薄い網点＋斜めの線を重ねて質感を足す */
.photo-band{
  background:
    radial-gradient(rgba(255,255,255,.075) 1px, rgba(255,255,255,0) 1.7px) 0 0/15px 15px,
    repeating-linear-gradient(115deg, rgba(0,160,160,.10) 0 2px, rgba(0,160,160,0) 2px 26px),
    radial-gradient(88% 72% at 14% -4%, rgba(0,160,160,.26) 0%, rgba(0,160,160,0) 62%),
    linear-gradient(158deg, #0d1b2a 0%, #173746 42%, #0b2b38 72%, #0d1b2a 100%);
}
.photo-band .sec-en{color:#4fbdbd !important}

/* ── 面3・面4：節と節の切り替えを「斜め」にする
      白→薄グレーの単純な交互をやめ、上端60pxで斜めに切り替わる形にする（手本もこの作り） */
section:nth-of-type(even){
  background: linear-gradient(186deg, #ffffff 0, #ffffff 60px, #f5f5f5 60px, #f5f5f5 100%);
}
section.alt{
  background: linear-gradient(174deg, #f5f5f5 0, #f5f5f5 60px, #ffffff 60px, #ffffff 100%);
  border-top:0; border-bottom:0;
}

/* ── 面5：料金表の節（7番目）＝薄いグラデの地＋ターコイズのごく薄い光 */
section:nth-of-type(7){
  background:
    radial-gradient(78% 62% at 93% 6%, rgba(0,160,160,.13) 0%, rgba(0,160,160,0) 60%),
    linear-gradient(174deg, #f5f5f5 0, #f5f5f5 60px, rgba(245,245,245,0) 60px),
    linear-gradient(172deg, #ffffff 0%, #fafdfd 32%, #ebf1f1 100%);
  border-top:0; border-bottom:0;
}

/* ── 面6：よくある質問の節（11番目）＝別のグラデ（金寄り） */
section:nth-of-type(11){
  background:
    radial-gradient(72% 58% at 6% 2%, rgba(184,147,90,.15) 0%, rgba(184,147,90,0) 58%),
    linear-gradient(174deg, #f5f5f5 0, #f5f5f5 60px, rgba(245,245,245,0) 60px),
    linear-gradient(188deg, #ffffff 0%, #f2f0ed 56%, #f5f5f5 100%);
  border-top:0; border-bottom:0;
}

/* ── 面7：最後の申し込みの帯＝濃いグラデ＋金の罫 */
section:last-of-type{
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,.032) 0 1px, rgba(255,255,255,0) 1px 20px),
    radial-gradient(92% 84% at 50% -8%, rgba(0,160,160,.28) 0%, rgba(0,160,160,0) 64%),
    linear-gradient(166deg, #0d1b2a 0%, #173746 46%, #0b2b38 76%, #0d1b2a 100%);
  border-top:3px solid #b8935a;
  border-bottom:3px solid #b8935a;
  color:#ffffff;
}
section:last-of-type h2{color:#ffffff !important}
section:last-of-type h2::after{background:#b8935a}
section:last-of-type .cta p{color:rgba(255,255,255,.93)}

/* ── 薄い地の上のターコイズの小さい文字が薄すぎたので、濃紺を混ぜて濃くする
      （白地 6.3:1 ／ 新しい薄グレー地 5.5:1。前は 3.2:1 しか無かった） */
.sec-en{color:#056b71}

/* ── ボタンの白文字が 3.2:1 しか無かったので、濃紺を混ぜて 4.6:1 にする */
.btn{background:#038386}
.btn:hover{background:#00a0a0}

/* ── パンくずの「›」が薄すぎた（薄グレー地で 2.6:1 しか無かった）ので濃くする
      本文は1文字も触らず、CSSだけで上に書く（新しい地の上で 6.5:1） */
.crumb span[style]{color:#4a5a66 !important}

/* ═══════════════════════════════════════════════════════════
   ★ヘッダー・ナビ・タイトルの作り直し（2026-08-27 オーナー指摘）
   「ナビがこの場所にあるのは見たことがない」「タイトルは中央揃えで書体も違うのでは」
   直したところ：
    ① ナビが画面の途中に浮いた箱になっていた → 全幅の白い帯にする
    ② 8項目が2行に折り返していた → 1行に収める
    ③ ヒーローのタイトルが左寄せ → 中央揃え・別の書体
   ═══════════════════════════════════════════════════════════ */

/* ① ヘッダーとナビを全幅の帯に（中身だけ中央に寄せる） */
header.site,
header.site + nav, nav.gnav, .gnav {
  width: 100%; background: #fff;
  border-bottom: 1px solid var(--line);
}
.gnav > ul, .gnav .wrap, header.site .wrap {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
}

/* ② ナビは1行に収める（折り返させない） */
.gnav ul {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: 4px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.gnav ul::-webkit-scrollbar { display: none; }
.gnav li { flex: 0 0 auto; }
.gnav a {
  display: inline-flex; align-items: center; min-height: 52px;
  padding: 0 15px; font-size: 15px; font-weight: 700;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.gnav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* パンくずも全幅の帯に */
.crumb { width: 100%; }
.crumb .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ③ ★ヒーローのタイトルを中央揃えにして、書体を変える
      見出しだけ 丸ゴシック（M PLUS Rounded 1c）にして、本文のゴシックと差を付ける */
.hero .wrap { text-align: center; max-width: 900px; }
.hero .en { text-align: center; }
.hero h1 {
  font-family:var(--round);
  font-size: 42px; letter-spacing: .06em; line-height: 1.45;
  margin-bottom: 20px;
}
.hero p { margin-left: auto; margin-right: auto; text-align: center; }
.hero .btn { margin: 0 auto; }

/* 節の大見出しも同じ丸ゴシックに揃える（本文はそのまま） */
h2 { font-family:var(--round); }

@media (max-width: 900px) {
  .hero h1 { font-size: 27px; }
  .gnav a { padding: 0 11px; font-size: 14px; }
}

/* ★ナビの直し（2026-08-27・2回目）
   1回目は .gnav > ul を狙ったが、実際の作りは .gnav > .wrap > ul だった。
   .wrap の 960px が効いて8項目が折り返していた。 */
.gnav { width: 100%; background: #fff; border-bottom: 1px solid var(--line); }
.gnav > .wrap {
  max-width: 1240px !important; margin: 0 auto !important; padding: 0 24px !important;
}
.gnav > .wrap > ul {
  display: flex !important; flex-wrap: nowrap !important;
  justify-content: center !important; gap: 2px !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  overflow-x: auto;
}
.gnav > .wrap > ul::-webkit-scrollbar { display: none; }
.gnav li { flex: 0 0 auto !important; }
.gnav a {
  display: inline-flex !important; align-items: center !important;
  min-height: 54px !important; padding: 0 16px !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--ink) !important; text-decoration: none !important;
  white-space: nowrap !important; border-bottom: 3px solid transparent;
}
.gnav a:hover { color: var(--accent) !important; border-bottom-color: var(--accent); }

/* ヘッダーの社名も同じ幅に揃える */
header.site > .wrap { max-width: 1240px !important; padding: 0 24px !important; }
.crumb > .wrap { max-width: 1240px !important; padding: 0 24px !important; }
.crumb ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.crumb li { display: flex; align-items: center; gap: 6px; }

@media (max-width: 980px) {
  .gnav a { padding: 0 11px !important; font-size: 14px !important; }
  .gnav > .wrap > ul { justify-content: flex-start !important; }
}


/* ★スマホでのナビ（2026-08-27・2回目）
   横スクロールにしたが、検査は「箱の中でも はみ出し」を数えるため落ちた。
   → スマホでは素直に折り返す（2〜3行になるが、はみ出しは0になる）。 */
@media (max-width: 900px) {
  .gnav > .wrap { overflow-x: visible !important; padding: 6px 16px !important; }
  .gnav > .wrap > ul {
    flex-wrap: wrap !important; justify-content: center !important;
    width: auto !important; min-width: 0 !important; gap: 2px 6px !important;
  }
  .gnav a { padding: 0 10px !important; font-size: 13.5px !important; min-height: 44px !important; }
  .gnav::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   ★一番上と、節と節の区切りの作り直し（2026-08-27 オーナー指摘）
   「トップとか、セクションに挟むデザインが微妙」への直し。
   直したのは2つだけ（本文は1文字も触っていません）。
     ① 一番上（ヒーロー）を作り込む
        全幅の背景写真＋左に文章・右に額装した写真＋金の細罫＋下にスクロール誘導
     ② 節と節の区切りをはっきりさせる
        ・大見出しの下に、本文の幅いっぱいの細い横線（手本と同じ型）
        ・場面が大きく変わる3か所に、全幅の見出し帯を挟む
        ・濃い面／帯／白い面 の3種でリズムを作る
   ★背景の写真はまだ置かれていない前提で書いています。
     どの帯にも background-color を必ず併記してあるので、
     画像が1枚も無くても文字が読める状態になります。
   ═══════════════════════════════════════════════════════════ */

/* ── ① ヒーロー（一番上） ───────────────────────── */
.hero{
  position:relative; overflow:hidden; padding:0;
  background-color:#0d1b2a;              /* ★画像が無いときはこの色が出る */
}
.hero::before{                            /* 背景の写真（無ければ下の色のまま） */
  content:""; position:absolute; inset:0; z-index:0;
  background-color:#0d1b2a;
  background-image:url("../figures/sns/band/hero.jpg");
  background-size:cover; background-position:center right;
}
.hero::after{                             /* 文字を読ませるための覆い。左ほど濃い */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 22px),
    radial-gradient(120% 92% at 92% -14%, rgba(0,160,160,.30) 0%, rgba(0,160,160,0) 58%),
    radial-gradient(80% 70% at 0% 108%, rgba(184,147,90,.20) 0%, rgba(184,147,90,0) 60%),
    linear-gradient(96deg, rgba(8,18,30,.96) 0%, rgba(8,18,30,.90) 44%, rgba(8,18,30,.60) 100%);
}
.hero > .wrap{
  position:relative; z-index:2; max-width:1180px; padding:70px 24px 34px;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:46px; align-items:center; text-align:left;
}
.hero-text{min-width:0}
.hero .en{
  text-align:left; font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.34em; color:#5fd0d0; margin:0 0 16px;
}
.hero .en::before{
  content:""; display:inline-block; width:34px; height:2px; background:#b8935a;
  vertical-align:middle; margin:-3px 12px 0 0;
}
.hero h1{
  font-family:var(--round);
  font-size:clamp(28px,4.8vw,50px); line-height:1.34; letter-spacing:.05em;
  margin:0; color:#fff; word-break:keep-all; overflow-wrap:anywhere;
  text-shadow:0 3px 26px rgba(0,0,0,.42);
}
.hero h1::after{                          /* 金の細い罫 */
  content:""; display:block; width:72px; height:3px; background:#b8935a; margin:22px 0 0;
}
.hero-text p{
  margin:20px 0 28px; text-align:left; max-width:520px;
  color:#e2ebef; font-size:16.5px; line-height:1.95;
}
.hero-text .btn{margin:0; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero-media{position:relative; min-width:0}
.hero-media picture{
  display:block; position:relative; background:#0d1b2a;
  border:1px solid rgba(184,147,90,.55); box-shadow:0 26px 64px rgba(0,0,0,.48);
}
.hero-media img{display:block; width:100%; height:auto}
.hero-media::after{                       /* 左下の金のかぎ罫 */
  content:""; position:absolute; left:-13px; bottom:-13px; width:96px; height:96px;
  border-left:2px solid #b8935a; border-bottom:2px solid #b8935a; pointer-events:none;
}
.hero-scroll{position:relative; z-index:2; text-align:center; padding:0 0 30px}
.hero-scroll span{
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.32em;
  color:rgba(255,255,255,.86); padding-left:.32em;
}
.hero-scroll::after{
  content:""; display:block; width:1px; height:36px; margin:12px auto 0;
  background:linear-gradient(#b8935a, rgba(184,147,90,0));
}
@media (max-width:900px){
  .hero > .wrap{grid-template-columns:1fr; gap:28px; padding:46px 20px 24px; text-align:center}
  .hero .en{text-align:center}
  .hero h1::after{margin-left:auto; margin-right:auto}
  .hero-text p{margin-left:auto; margin-right:auto; text-align:center; font-size:15.5px}
  .hero-text .btn{margin:0 auto}
  .hero-media::after{display:none}
  .hero-scroll{padding:0 0 22px}
}

/* ── ② 大見出しの下に、本文の幅いっぱいの細い横線 ─────────
      いまは金の短い棒が1本だけで、線が無かった。
      手本は「幅いっぱいの細い線」なので、それを敷き、
      金の棒はその線の上に乗せて1本にまとめる（飾りが二重にならない）。 */
h2{
  border-bottom:1px solid rgba(26,43,60,.17);
  padding-bottom:20px !important;
}
h2::after{
  width:88px; height:3px; bottom:-2px; margin-left:-44px; background:#b8935a;
}
/* 濃い面の中では、線を白寄りにする */
.photo-band h2, section:last-of-type h2, .band-cta h2{
  border-bottom-color:rgba(255,255,255,.30);
}
.photo-band h3{border-bottom-color:rgba(255,255,255,.24)}
/* フッターの見出しは対象外（ここに線が入ると読みにくい） */
.sitemapf h2{border-bottom:0; padding-bottom:4px !important}
.sitemapf h2::after{display:none}

/* ── ③ 場面が変わる3か所に挟む、全幅の見出し帯 ───────────
      節の途中は割らない。必ず </section> と <section> の間に置く。 */
.chapter{
  position:relative; overflow:hidden;
  background-color:#0b2b38;               /* ★画像が無いときはこの色＋下のグラデ */
  background-size:cover; background-position:center;
  border-top:3px solid #b8935a; border-bottom:3px solid #b8935a;
}
.chapter::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 20px),
    linear-gradient(96deg, rgba(8,18,30,.72) 0%, rgba(8,18,30,.42) 52%, rgba(8,18,30,.22) 100%);
}
.chapter > .wrap{
  position:relative; z-index:2; max-width:1180px; padding:0 24px;
  min-height:136px; display:flex; align-items:center; justify-content:center;
}
.chapter-en{
  font-family:var(--mono); font-weight:700; color:#fff;
  font-size:clamp(22px,4.4vw,42px); letter-spacing:.34em; padding-left:.34em;
  text-shadow:0 3px 20px rgba(0,0,0,.55);
}
.chapter::after{
  content:""; position:absolute; left:50%; bottom:18px; z-index:2;
  width:56px; height:2px; margin-left:-28px; background:rgba(255,255,255,.88);
}
/* 帯のすぐ下の節は、同じ英字ラベルが2回続いて見えるので小さい方は出さない
   （文言は消していません。すぐ上の帯に大きく出ています） */
.chapter + section .sec-en{display:none}
.chapter + section h2{margin-top:0}

.chapter-service{background-image:url("../figures/sns/band/title-service.png"),
  linear-gradient(104deg,#0d1b2a 0%,#0f3b46 40%,#00a0a0 100%)}
.chapter-price{background-image:url("../figures/sns/band/title-price.png"),
  linear-gradient(104deg,#0d1b2a 0%,#1b3a4a 40%,#b8935a 100%)}
.chapter-flow{background-image:url("../figures/sns/band/title-flow.png"),
  linear-gradient(104deg,#00a0a0 0%,#0f3b46 58%,#0d1b2a 100%)}
@media (max-width:640px){
  .chapter > .wrap{min-height:98px; padding:0 16px}
  .chapter::after{bottom:13px; width:40px; margin-left:-20px}
}

/* ── ④ 濃い写真の全幅バンド（3か所）───────────────────
      グラデを写真の「上」に敷いて、白文字が必ず読めるようにする。
      写真が無い間は background-color とグラデだけが出る。 */
.photo-band.band-problem{
  background-color:#0d1b2a;
  background-image:
    linear-gradient(158deg, rgba(13,27,42,.94) 0%, rgba(20,52,68,.86) 42%, rgba(11,43,56,.90) 72%, rgba(13,27,42,.96) 100%),
    url("../figures/sns/band/band-problem.jpg");
  background-size:cover,cover; background-position:center,center;
}
.photo-band.band-service{
  background-color:#0d1b2a;
  background-image:
    linear-gradient(166deg, rgba(13,27,42,.93) 0%, rgba(0,90,96,.72) 46%, rgba(11,43,56,.92) 100%),
    url("../figures/sns/band/band-service.jpg");
  background-size:cover,cover; background-position:center,center;
  border-top:3px solid #b8935a; border-bottom:3px solid #b8935a;
}
section:last-of-type.band-cta{
  background-color:#0d1b2a;
  background-image:
    linear-gradient(166deg, rgba(13,27,42,.94) 0%, rgba(23,55,70,.86) 46%, rgba(13,27,42,.96) 100%),
    url("../figures/sns/band/band-cta.jpg");
  background-size:cover,cover; background-position:center,center;
  color:#fff;
}
/* 濃い面の中の図版・添え書き（白地の枠のままだと浮くので合わせる） */
.photo-band .fig img{border-color:rgba(255,255,255,.30)}
.photo-band .fig figcaption{color:rgba(255,255,255,.82)}
.photo-band .body p{color:#e6eef2}
.photo-band .lead{color:rgba(255,255,255,.88) !important}



/* ── ⑥ 見出しの改行を語の切れ目で折る（スマホで1文字だけ次の行に落ちていた）
      実測 375px：「こんなお困りごとはありませんか」の「か」だけが2行目に落ちていた。
      字間を詰めて、折る位置も語の切れ目にする。 */
h1, h2, h3{
  word-break:auto-phrase;            /* 対応していない環境では下の指定が効く */
  overflow-wrap:anywhere;
  line-break:strict;
}
@media (max-width:640px){
  h2, .photo-band h2{font-size:21px !important; letter-spacing:.01em !important}
  .hero h1{letter-spacing:.03em}
}
@media (max-width:360px){
  h2, .photo-band h2{font-size:19.5px !important}
}

/* ── ⑦ 背景の画像は軽い方（webp）を先に配る
      いま置かれている実物は png が 772〜784KB、webp は 123〜126KB。
      image-set に対応していない古い環境では、上に書いた png/jpg の指定がそのまま残るので
      画像が消えることはない（＝下の1行が丸ごと無視されるだけ）。 */
.hero::before{
  background-image:image-set(url("../figures/sns/band/hero.webp") type("image/webp"),
                             url("../figures/sns/band/hero.jpg") type("image/jpeg"));
}
.chapter-service{background-image:
  image-set(url("../figures/sns/band/title-service.webp") type("image/webp"),
            url("../figures/sns/band/title-service.png") type("image/png")),
  linear-gradient(104deg,#0d1b2a 0%,#0f3b46 40%,#00a0a0 100%)}
.chapter-price{background-image:
  image-set(url("../figures/sns/band/title-price.webp") type("image/webp"),
            url("../figures/sns/band/title-price.png") type("image/png")),
  linear-gradient(104deg,#0d1b2a 0%,#1b3a4a 40%,#b8935a 100%)}
.chapter-flow{background-image:
  image-set(url("../figures/sns/band/title-flow.webp") type("image/webp"),
            url("../figures/sns/band/title-flow.png") type("image/png")),
  linear-gradient(104deg,#00a0a0 0%,#0f3b46 58%,#0d1b2a 100%)}
.photo-band.band-problem{background-image:
  linear-gradient(158deg, rgba(13,27,42,.94) 0%, rgba(20,52,68,.86) 42%, rgba(11,43,56,.90) 72%, rgba(13,27,42,.96) 100%),
  image-set(url("../figures/sns/band/band-problem.webp") type("image/webp"),
            url("../figures/sns/band/band-problem.jpg") type("image/jpeg"))}
.photo-band.band-service{background-image:
  linear-gradient(166deg, rgba(13,27,42,.93) 0%, rgba(0,90,96,.72) 46%, rgba(11,43,56,.92) 100%),
  image-set(url("../figures/sns/band/band-service.webp") type("image/webp"),
            url("../figures/sns/band/band-service.jpg") type("image/jpeg"))}
section:last-of-type.band-cta{background-image:
  linear-gradient(166deg, rgba(13,27,42,.94) 0%, rgba(23,55,70,.86) 46%, rgba(13,27,42,.96) 100%),
  image-set(url("../figures/sns/band/band-cta.webp") type("image/webp"),
            url("../figures/sns/band/band-cta.jpg") type("image/jpeg"))}

/* ═══════════════════════════════════════════════════════════
   ★下層78本をトップ（index.html）の意匠に統一（2026-09-13 オーナー指摘）
   「下層のヘッダー（灰色の帯にメニューが並ぶだけ）やパンくずがダサい。
    トップに合うデザインに全部変えてほしい」への直し。
   直したのは見た目だけ（文章・ページ構成・URL・パンくずの階層は触っていない）。
     ① ヘッダー＝トップと同じ（白・80px・左にワードマーク・右に和文＋英字小ラベル）
        スマホは折りたたみ（JSなし・チェックボックスで開閉）
     ② パンくず＝灰色の帯をやめ、細い文字・金の「›」・上下の余白だけ
     ③ ヒーロー＝写真の背景をやめ、トップの暗い帯（紺のグラデ＋斜めの細線＋金の罫）
     ④ カード・ボタン・図の枠＝角丸4px・細い罫・薄い影（トップの .case-card / .btn と同形）
     ⑤ フッター＝トップの .footer と同じ（紺・白ロゴ・住所・法人番号・リンク列・著作権表示）
   色・書体の値はトップの :root からそのまま写した。
   ═══════════════════════════════════════════════════════════ */
:root{
  --color-hero-start:#0d1b2a; --color-hero-end:#00a0a0;
  --color-bg:#ffffff; --color-bg-alt:#f5f5f5;
  --color-accent:#00a0a0; --color-accent-hover:#0eaba8;
  --color-text-main:#1a2b3c; --color-text-light:#666666;
  --color-white:#ffffff; --color-border:#e0e0e0;
  --gold:#b8935a; --radius:4px;
}

/* ── ① ヘッダー ───────────────────────────────────────── */
header.site.hd{
  position:sticky; top:0; z-index:100;
  background:var(--color-bg); border-bottom:0; padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
header.site.hd > .wrap{
  max-width:1100px !important; margin:0 auto; padding:0 20px !important;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:80px; position:relative;
}
header.site.hd .brand{display:inline-flex; align-items:center; min-height:48px; padding:0; font-size:0; line-height:0}
header.site.hd .brand img{display:block; height:28px; width:auto}
header.site.hd .mainnav ul{display:flex; list-style:none; margin:0; padding:0; gap:30px}
header.site.hd .mainnav li{margin:0}
header.site.hd .nav-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:48px; padding:6px 10px; font-size:13px; font-weight:700; line-height:1.5;
  color:var(--color-text-main); text-decoration:none; white-space:nowrap; text-align:center;
}
header.site.hd .nav-en{
  font-family:var(--mono); font-size:13px; font-weight:400; letter-spacing:.02em;
  color:var(--color-text-light); margin-top:4px; text-transform:lowercase;
}
header.site.hd .nav-link:hover{color:var(--color-accent)}
header.site.hd .nav-link:hover .nav-en{color:var(--color-accent)}
/* スマホ用の開閉（JSなし）。PCでは見えない */
header.site.hd .nav-toggle{position:absolute; opacity:0; width:1px; height:1px; margin:-1px; overflow:hidden; pointer-events:none}
header.site.hd .nav-btn{display:none}
@media (max-width:860px){
  header.site.hd > .wrap{min-height:64px; flex-wrap:wrap; gap:0}
  header.site.hd .brand img{height:24px}
  header.site.hd .nav-btn{
    display:inline-flex; align-items:center; gap:10px; min-height:44px; min-width:44px;
    padding:0 6px 0 12px; margin:0 -6px 0 0; cursor:pointer;
    font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--color-text-main);
  }
  header.site.hd .nav-bar{position:relative; display:block; width:22px; height:2px; background:var(--color-text-main); transition:background .2s}
  header.site.hd .nav-bar::before, header.site.hd .nav-bar::after{
    content:""; position:absolute; left:0; width:22px; height:2px; background:var(--color-text-main); transition:transform .2s;
  }
  header.site.hd .nav-bar::before{top:-7px} header.site.hd .nav-bar::after{top:7px}
  header.site.hd .nav-toggle:checked ~ .nav-btn .nav-bar{background:transparent}
  header.site.hd .nav-toggle:checked ~ .nav-btn .nav-bar::before{transform:translateY(7px) rotate(45deg)}
  header.site.hd .nav-toggle:checked ~ .nav-btn .nav-bar::after{transform:translateY(-7px) rotate(-45deg)}
  header.site.hd .nav-toggle:focus-visible ~ .nav-btn{outline:2px solid var(--color-accent); outline-offset:2px}
  header.site.hd .mainnav{display:none; flex:0 0 100%; border-top:1px solid var(--color-border); padding:4px 0 10px}
  header.site.hd .nav-toggle:checked ~ .mainnav{display:block}
  header.site.hd .mainnav ul{flex-direction:column; gap:0}
  header.site.hd .nav-link{
    flex-direction:row; justify-content:space-between; align-items:center;
    min-height:48px; padding:0 6px; font-size:15px; border-bottom:1px solid rgba(26,43,60,.08);
  }
  header.site.hd .mainnav li:last-child .nav-link{border-bottom:0}
  header.site.hd .nav-en{margin:0}
}

/* ── ② パンくず（灰色の帯をやめる） ───────────────────── */
.crumb.bc{background:transparent; border:0; font-size:13px; padding:10px 0 6px}
.crumb.bc > .wrap{max-width:1100px !important; margin:0 auto; padding:0 20px !important}
.crumb.bc ol{gap:2px 6px}
.crumb.bc li{gap:8px}
.crumb.bc a{color:var(--color-text-light); min-height:40px; min-width:40px; padding:0 3px; text-decoration:none; letter-spacing:.02em}
.crumb.bc a:hover{color:var(--color-accent)}
.crumb.bc li > span:not(.sep){color:var(--color-text-main); font-weight:700; min-height:40px}
.crumb.bc .sep{color:var(--gold) !important; font-family:var(--mono); font-size:15px; line-height:1; min-height:0; padding-top:1px}

/* ── ③ ヒーロー（写真の背景 → トップの暗い帯） ────────── */
.hero{border-bottom:3px solid var(--gold)}
.hero + .photo-band, .hero + section.photo-band{border-top-width:0}
.hero-text p{word-break:auto-phrase; overflow-wrap:anywhere; line-break:strict}
.hero::before{
  background-color:var(--color-hero-start);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.038) 0 1px, rgba(255,255,255,0) 1px 22px),
    radial-gradient(120% 92% at 88% -12%, rgba(0,160,160,.34) 0%, rgba(0,160,160,0) 58%),
    radial-gradient(92% 82% at 2% 114%, rgba(184,147,90,.20) 0%, rgba(184,147,90,0) 62%),
    linear-gradient(152deg, #0d1b2a 0%, #132738 46%, #0b2b38 100%);
  background-size:auto; background-position:0 0;
}
.hero::after{
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, rgba(255,255,255,0) 1.7px) 0 0/15px 15px,
    linear-gradient(96deg, rgba(8,18,30,.28) 0%, rgba(8,18,30,0) 60%);
}
.hero .en{color:#5fd0d0}
.hero-media picture{border-radius:var(--radius); overflow:hidden; border-color:rgba(184,147,90,.6)}
.hero-media img{border-radius:var(--radius)}

/* ── ④ カード・ボタン・図の枠 ─────────────────────────── */
.btn{
  border-radius:var(--radius); min-width:240px; min-height:48px; padding:16px 40px;
  letter-spacing:.05em; transition:background-color .3s;
}
.card, .box, .thumbs a, .arealist a, .linklist a, .table-wrap, .step-item, .fig img, blockquote{
  border-radius:var(--radius); box-shadow:0 1px 2px rgba(27,29,36,.06);
}
.card{border:1px solid var(--color-border); border-top:3px solid var(--color-hero-start)}
.thumbs a{overflow:hidden}
.thumbs img{border-bottom:1px solid var(--color-border)}
.fig img{border:0}
/* 図（figures/fig-*）の枠は罫なし・角丸4px */
img[src*="figures/fig-"]{border:0 !important; border-radius:var(--radius)}
.steps li::before{border-radius:var(--radius)}
.table-wrap{border:1px solid var(--color-border)}
/* 本文の中のリンクも「押せる大きさ」にする（会社ページの個別CSSから移した・見た目は変えず当たり判定だけ広げる） */
.body p a, .body li a, .note a, .box p a, .box li a,
.steps li a, blockquote a, .lead a, section > .wrap > p a,
ul.list > li > a, ol.list > li > a{
  display:inline-block; padding:11px 3px; margin:-11px 0; line-height:1.2;
  text-decoration:underline; text-underline-offset:3px;
}
/* 文章の横に画像を回り込ませる（左が文章・右が絵。スマホでは縦に積む） */
.split{display:flex; gap:34px; align-items:flex-start; max-width:900px; margin:0 auto 12px}
.split > .split-t{flex:1 1 54%; min-width:0}
.split > picture, .split > .split-i{flex:0 0 40%; max-width:40%}
.split img{display:block; width:100%; height:auto; border:0; border-radius:var(--radius)}
.split .split-t h3{margin-top:0 !important}
@media (max-width:760px){
  .split{display:block}
  .split > picture, .split > .split-i{max-width:100%; margin-bottom:20px; display:block}
}
/* 引用・お客様の言葉の枠 */
blockquote{margin:0 auto 24px; max-width:760px; padding:20px 24px;
  border-left:5px solid var(--gold); background:var(--color-bg-alt); font-size:15.5px; line-height:1.95}
blockquote p:last-child{margin-bottom:0}

/* ── ⑤ フッター（トップの .footer と同じ） ───────────── */
footer.site.ft{background:var(--color-hero-start); color:var(--color-white); padding:60px 20px 40px; font-size:14px}
footer.site.ft > .wrap{max-width:1100px !important; margin:0 auto; padding:0 !important}
footer.site.ft .ft-logo{display:block; height:24px; width:auto; margin:0 0 28px}
footer.site.ft .ft-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px;
  border-bottom:1px solid rgba(255,255,255,.10); padding-bottom:40px; margin-bottom:30px;
}
footer.site.ft .ft-info{flex:1 1 280px; min-width:0; max-width:420px}
footer.site.ft .ft-info p{margin:0; font-size:14px; line-height:2; color:rgba(255,255,255,.8)}
footer.site.ft .ft-info p.ft-name{font-size:24px; line-height:1.5; margin-bottom:16px}
footer.site.ft .ft-info p.ft-name strong{color:var(--color-white)}
footer.site.ft .ft-nav{flex:3 1 520px; min-width:0}
footer.site.ft .sitemapf{margin:0}
footer.site.ft .sitemapf h2{font-size:14px !important; font-family:var(--jp); font-weight:700; letter-spacing:.08em;
  color:var(--color-white); margin:0 0 8px !important; padding:0 0 0 10px !important; border-left:3px solid var(--color-accent); border-bottom:0; line-height:1.6}
footer.site.ft .sitemapf ul{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:0 0 22px}
@media (max-width:640px){ footer.site.ft .sitemapf ul{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} }
footer.site.ft .sitemapf a{color:rgba(255,255,255,.8); padding:0; min-height:40px; font-size:13.5px}
footer.site.ft .sitemapf a:hover{color:var(--color-white); text-decoration:underline}
footer.site.ft .ft-copy{text-align:center; font-size:13px; color:rgba(255,255,255,.5); margin:0; line-height:1.8}
@media (max-width:640px){
  footer.site.ft{padding:44px 20px 30px}
  footer.site.ft .ft-inner{gap:28px; padding-bottom:28px; margin-bottom:22px}
  footer.site.ft .ft-info p.ft-name{font-size:20px}
}
/* ── ⑥ 関連ページの絵つきリンク・地域リンクは「箇条書きの枠」に入れない（灰色の箱の中に写真が並んでいた） */
.wrap > ul.thumbs, .wrap > ul.arealist{background:transparent; border:0; padding:0; max-width:960px}
.wrap > ul.thumbs li, .wrap > ul.arealist li{margin-bottom:0}
.wrap > ul.arealist{max-width:900px}
@media (max-width:640px){ .wrap > ul.thumbs, .wrap > ul.arealist{padding:0} }
/* ── ⑦ 右の写真が無いヒーロー（生成器の素の出力）は1列にする */
.hero > .wrap:not(:has(.hero-media)){grid-template-columns:1fr; max-width:900px; text-align:center}
.hero > .wrap:not(:has(.hero-media)) .en, .hero > .wrap:not(:has(.hero-media)) .hero-text p{text-align:center; margin-left:auto; margin-right:auto}
.hero > .wrap:not(:has(.hero-media)) h1::after{margin-left:auto; margin-right:auto}
.hero > .wrap:not(:has(.hero-media)) .btn{margin:0 auto}