/* ==========================================================================
   南城市観光サイト（vn）コンポーネント
   正本：vn_top_index_mock_v1_kinarito.html（2026-07-05・デザイン確定）からの移植。
   基礎トークン・共通掟（.h-hare/.t-latin/.fade等）は tokens.css が持つ——ここでは重複させない。
   一点の掟：桃（--sango）はハートの一箇所のみ／ハレ書体はjournal見出しと四季のみ。
   ========================================================================== */
:root{
  --rail-w:76px;
}
body{
  font-size:15px;
  line-height:1.9;
  padding-right:var(--rail-w);
}
a{color:var(--umi-koi);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.tate{writing-mode:vertical-rl;font-weight:700;letter-spacing:.18em;line-height:1.9}

/* --- 写真の器（台帳の実枠ID・正直に準備中。素材はslots/へ置くだけで自動差し替え） --- */
.ph{background:
  repeating-linear-gradient(-45deg,transparent 0 14px,var(--sen-faint) 14px 15px),
  var(--suna-2);
  border:1px solid var(--sen);position:relative;display:grid;place-items:center}
.ph__l{font-size:11px;letter-spacing:.14em;color:var(--ink-faint);font-weight:500}
.ph__id{position:absolute;right:8px;bottom:6px;font-family:var(--font-latin);
  font-size:9px;letter-spacing:.08em;color:var(--ink-faint)}
.ph--filled{padding:0;background:none;border:0}
/* 実写真は絶対配置で枠に従わせる＝枠の縦横比（3:2等）が常に勝つ（写真ごとの比率差を吸収） */
.ph--filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* --- 右端固定レール：黄色い「デジタルパンフレット」（らしいね継承・将来は予約＝継ぎ手J1） --- */
.rail{position:fixed;top:0;right:0;bottom:0;width:var(--rail-w);z-index:20;
  border-left:1px solid var(--sen);background:var(--suna);
  display:flex;flex-direction:column;align-items:center;padding:22px 0}
.rail__loc{writing-mode:vertical-rl;font-size:11px;letter-spacing:.28em;
  color:var(--ink-soft);font-weight:500}
.rail__loc::before{content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:var(--umi);margin:0 auto 10px}
.rail__menu{margin-top:auto;margin-bottom:14px;display:block;padding:10px}
.rail__menu span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}
.rail__cta{background:var(--hikari);color:var(--ink);width:var(--rail-w);
  padding:18px 0 16px;text-align:center;display:block}
.rail__cta:hover{filter:brightness(.96);text-decoration:none}
.rail__cta b{writing-mode:vertical-rl;font-size:12px;font-weight:700;
  letter-spacing:.22em;display:block;margin:0 auto;line-height:1.4}
.rail__cta small{display:block;font-family:var(--font-latin);font-size:8px;
  letter-spacing:.12em;color:var(--ink-soft);margin-top:8px}

/* --- 細いナビ（動詞カテゴリの背骨） --- */
.tnav{display:flex;gap:22px;padding:20px 0 0;flex-wrap:wrap;align-items:baseline}
.tnav a{color:var(--ink-soft);font-size:12px;font-weight:500;letter-spacing:.08em}
.tnav a small{font-family:var(--font-latin);font-size:8px;letter-spacing:.14em;
  color:var(--ink-faint);margin-left:5px}
.tnav a:hover{color:var(--umi-koi);text-decoration:none}

/* --- HERO：雑誌コラージュ --- */
.hero{padding:clamp(28px,4vw,56px) 0 0;position:relative}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,44px);
  align-items:start;position:relative;z-index:2}
.hero__main .ph{aspect-ratio:4/5;max-height:640px;width:100%}
.hero__side{display:flex;gap:clamp(14px,2vw,26px);justify-content:flex-end}
.hero__brand{display:flex;flex-direction:column;align-items:flex-end;gap:26px;padding-top:12px}
.hero__logo{text-align:right}
.hero__logo b{font-family:var(--font-latin);font-weight:500;
  font-size:clamp(40px,5vw,60px);letter-spacing:.02em;line-height:1.02;display:block}
.hero__logo b i{font-style:normal;color:var(--umi)}
.hero__logo span{font-size:10px;letter-spacing:.3em;
  color:var(--ink-faint);display:block;margin-top:10px;font-family:var(--font-latin)}
.hero__tag{font-size:clamp(17px,1.9vw,22px);max-height:22em}
/* 英語トップ：タグラインは横書き（tateなしのとき・2026-07-13 Masami指示）。jaは従来どおり縦書き */
.hero__tag:not(.tate){font-weight:700;letter-spacing:.05em;line-height:1.75;max-width:11em;text-align:left;align-self:flex-start;max-height:none;margin-top:clamp(100px,14vw,200px) !important}
.hero__sub{aspect-ratio:3/2;width:min(58%,300px);margin-top:clamp(28px,4vw,64px)}
.hero__sub > div{width:100%;height:100%}
.hero__sub .ph{width:100%;height:100%}
.hero__plane{position:relative;z-index:1;background:var(--umi);
  margin-top:calc(clamp(120px,16vw,220px) * -1);
  padding-top:calc(clamp(120px,16vw,220px) + 26px)}

/* --- 色面の肩：ステータス帯（マスター配信）＋営業ニュース --- */
.statusline{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;color:#fff;
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.28)}
.statusline__badge{border:1px solid rgba(255,255,255,.6);font-size:11px;
  letter-spacing:.14em;padding:3px 12px;font-weight:500;white-space:nowrap}
.statusline__t{font-weight:700;letter-spacing:.1em;font-size:14px}
.statusline__hm{font-family:var(--font-latin);font-size:12px;letter-spacing:.08em;
  color:rgba(255,255,255,.85)}
.newsline{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;color:#fff;
  padding:16px 0 24px}
.newsline__k{border:1px solid rgba(255,255,255,.6);font-size:11px;letter-spacing:.14em;
  padding:3px 12px;font-weight:500}
.newsline__d{font-family:var(--font-latin);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.8)}
.newsline a{color:#fff;font-size:13px;font-weight:500}

/* --- 色面の本文：ハートの地図×紹介文（桃はこの一点のみ） --- */
.plane__body{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);
  padding:clamp(20px,3.5vw,44px) 0 clamp(120px,14vw,180px);align-items:center}
.plane__heart{color:#fff}
.plane__heart svg{width:min(100%,320px);height:auto}
/* --- 実形マップ差し替え（案C・2026-07-13）。撤去＝このブロックごと削除 --- */
.heart-map{position:relative;width:min(100%,430px)}
.heart-map img{display:block;width:100%;height:auto}
.heart-map__wm{position:absolute;left:70%;top:70%;color:#fff;
  font-family:var(--font-latin);font-weight:600;font-size:15px;letter-spacing:.24em;
  white-space:nowrap;text-shadow:0 1px 6px rgba(0,60,66,.35)}
.heart-map__mk{position:absolute;left:45%;top:48%;width:10px;height:10px}
.heart-map__mk::before{content:"";position:absolute;inset:2px;background:#fff;border-radius:50%}
.heart-map__mk::after{content:"";position:absolute;inset:-6px;
  border:1px solid rgba(255,255,255,.75);border-radius:50%}
/* --- 実形マップここまで --- */
.plane__heart .kotoba{font-weight:700;letter-spacing:.12em;line-height:2;
  font-size:clamp(17px,1.9vw,21px);margin:18px 0 0}
.plane__card{background:var(--suna);padding:clamp(26px,3.4vw,44px);
  box-shadow:0 0 0 1px var(--sen)}
.plane__card p{margin:0;color:var(--ink-soft);font-size:14px}
.plane__links{display:flex;gap:26px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}
.plane__links a{display:flex;align-items:center;gap:12px;
  font-weight:700;letter-spacing:.12em;font-size:13px;color:var(--ink)}
.plane__links .mrk{width:40px;height:40px;border:1px solid var(--sen);border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-latin);color:var(--umi-koi)}
.plane__links a:hover{color:var(--umi-koi);text-decoration:none}

/* --- 動詞タイル（何を、する？）：色面の裾に重ねる --- */
.verbs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);
  margin-top:calc(clamp(90px,11vw,140px) * -1);position:relative;z-index:2}
.verbs a{position:relative;display:block;color:var(--ink)}
.verbs a:hover{text-decoration:none}
.verbs .ph{aspect-ratio:4/3}
.verb__label{position:absolute;top:0;right:clamp(10px,1.4vw,18px);z-index:2;
  background:var(--umi);color:#fff;padding:16px 9px 18px;
  writing-mode:vertical-rl;font-weight:700;font-size:clamp(16px,1.7vw,19px);letter-spacing:.22em}
.verb__label small{font-family:var(--font-latin);font-size:9px;font-weight:400;
  letter-spacing:.18em;color:rgba(255,255,255,.85);margin-top:10px}
.verbs a:hover .verb__label{background:var(--umi-koi)}
.verbs a.is-journal .ph{background:var(--umi);border-color:var(--umi)}
.verbs a.is-journal .ph__l{color:rgba(255,255,255,.9);font-weight:700;letter-spacing:.2em}
.verbs a.is-journal .ph__id{color:rgba(255,255,255,.6)}

/* --- 章の型（縦書きの章題） --- */
.mag{padding:clamp(56px,8vw,96px) 0 0;display:grid;
  grid-template-columns:clamp(56px,6vw,88px) 1fr;gap:clamp(10px,2vw,28px)}
.mag__title{font-size:clamp(19px,2.2vw,24px)}
.mag__title small{display:block;font-family:var(--font-latin);font-size:9px;
  letter-spacing:.2em;color:var(--ink-faint);font-weight:400;margin-top:14px;writing-mode:vertical-rl}

/* --- 日々を、読む（journal：人の物語はハレの声で） --- */
.journal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px)}
.journal a{color:var(--ink);display:block}
.journal a:hover{text-decoration:none}
.journal a:hover .j__t{color:var(--umi-koi)}
.journal .ph{aspect-ratio:4/3}
.journal a:nth-child(2){margin-top:clamp(28px,4vw,64px)}
.journal a:nth-child(3){margin-top:calc(clamp(20px,3vw,44px) * -1)}
.j__meta{display:flex;gap:12px;align-items:baseline;margin:10px 0 4px;flex-wrap:wrap}
.j__d{font-family:var(--font-latin);font-size:11px;letter-spacing:.08em;color:var(--ink-faint)}
.j__cat{border-left:1px solid var(--sen);padding-left:10px;font-size:11px;
  color:var(--ink-soft);letter-spacing:.08em}
.j__place{font-size:11px;color:var(--ink-faint);letter-spacing:.08em}
.j__t{font-family:var(--font-hare);font-size:clamp(16px,1.8vw,19px);
  letter-spacing:.03em;line-height:1.75;transition:color .2s}
.j__note{font-size:11px;color:var(--ink-faint);margin-top:22px}

/* --- 最新の、こと（NEWS：信頼の声色はふだんの声） --- */
.news{border-top:1px solid var(--sen)}
.news a{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;color:var(--ink);
  padding:16px 4px;border-bottom:1px solid var(--sen)}
.news a:hover{background:var(--suna-2);text-decoration:none}
.news .d{font-family:var(--font-latin);font-size:12px;letter-spacing:.08em;
  color:var(--ink-faint);min-width:88px}
.news .k{border:1px solid var(--sen);font-size:10px;letter-spacing:.1em;
  padding:2px 10px;color:var(--ink-soft);white-space:nowrap}
.news .k.is-end{color:var(--ink-faint);border-style:dashed}
.news .t{font-size:13.5px;font-weight:500;flex:1;min-width:240px}
.news .t small{display:block;font-weight:400;font-size:11px;color:var(--ink-faint)}
.news .mrk{font-family:var(--font-latin);color:var(--umi-koi)}
.news a.is-end .t{color:var(--ink-soft)}

/* --- 南城の四季（季節はいつも、すこしハレ） --- */
.season__head{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;
  background:var(--umi);color:#fff;padding:18px clamp(18px,3vw,32px);
  width:min(560px,100%);position:relative;z-index:2}
.season__t{font-family:var(--font-hare);font-size:clamp(19px,2.2vw,23px);letter-spacing:.04em}
.season__tabs{display:flex;gap:18px;margin-left:auto;align-items:baseline}
.season__tabs span,.season__tabs button{font-weight:500;font-size:13.5px;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.season__tabs button{appearance:none;background:none;border:0;padding:0;font-family:inherit;cursor:pointer;line-height:inherit}
.season__tabs button:hover{color:#fff}
.season__tabs .on{color:#fff;border-bottom:2px solid #fff;padding-bottom:2px}
.season .ph{aspect-ratio:16/5;margin-top:calc(clamp(16px,2.4vw,26px) * -1);margin-left:clamp(18px,4vw,56px)}

/* --- footer --- */
.gf{border-top:1px solid var(--sen);margin-top:clamp(64px,9vw,110px);
  padding:34px 0 40px;font-size:12.5px;color:var(--ink-soft)}
.gf__grid{display:flex;gap:clamp(24px,5vw,72px);flex-wrap:wrap}
.gf__org b{display:block;font-weight:700;letter-spacing:.1em;font-size:14px;color:var(--ink);margin-bottom:6px}
.gf__nav{display:flex;gap:10px 22px;flex-wrap:wrap}
.gf__nav a{color:var(--ink-soft)}
.gf__foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--sen-faint);
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}

/* --- レスポンシブ --- */
@media(max-width:900px){
  body{padding-right:0;padding-bottom:60px}
  .rail{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:60px;
    border-left:0;border-top:1px solid var(--sen);flex-direction:row;
    padding:0 16px;gap:16px}
  .rail__loc{writing-mode:horizontal-tb;letter-spacing:.18em;font-size:10px}
  .rail__loc::before{display:inline-block;margin:0 8px 2px 0}
  .rail__menu{margin:0 0 0 auto}
  .rail__cta{width:auto;height:60px;display:flex;align-items:center;gap:10px;padding:0 18px}
  .rail__cta b{writing-mode:horizontal-tb;letter-spacing:.12em;margin:0}
  .rail__cta small{margin:0}
  .hero__grid{grid-template-columns:1fr}
  .hero__side{justify-content:space-between;flex-direction:row-reverse}
  .hero__tag{max-height:15em}
  .plane__body{grid-template-columns:1fr}
  .verbs{grid-template-columns:repeat(2,1fr)}
  .mag{grid-template-columns:1fr}
  .mag__title{writing-mode:horizontal-tb;letter-spacing:.12em}
  .mag__title small{writing-mode:horizontal-tb;margin-top:4px}
  .journal{grid-template-columns:1fr}
  .journal a:nth-child(2),.journal a:nth-child(3){margin-top:0}
  .season__tabs{margin-left:0}
  .season .ph{margin-left:0;aspect-ratio:16/7}
}
@media(max-width:560px){.verbs{grid-template-columns:1fr}}

/* ==========================================================================
   下層：静かな記事テンプレート（dmo下層と同じ考え方・アクセントは海色・L4計画§3）
   ========================================================================== */
.page{padding:clamp(24px,4vw,48px) 0 0}
.page__crumb{font-size:11px;color:var(--ink-faint);letter-spacing:.06em;margin:0 0 clamp(28px,4vw,44px)}
.page__crumb a{color:var(--ink-soft)}
.page__ey{font-family:var(--font-latin);font-size:10px;letter-spacing:.22em;color:var(--ink-faint);margin:0 0 10px;text-transform:uppercase}
.page__t{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:var(--ls-head);line-height:1.6;margin:0 0 clamp(20px,3vw,32px)}
.page__lead{font-size:15px;color:var(--ink);max-width:46em;margin:0 0 clamp(24px,4vw,36px)}
.page__body{max-width:46em;color:var(--ink-soft)}
.page__body p{margin:0 0 1.4em}
.page__body ul{margin:0 0 1.4em;padding-left:1.4em}
.page__body li{margin:0 0 .5em}
.page__h,.page__body h2{font-size:clamp(17px,2vw,20px);font-weight:700;letter-spacing:.1em;color:var(--ink);
  margin:clamp(36px,5vw,56px) 0 14px;padding-left:12px;border-left:2px solid var(--umi)}
.page__body h3{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--ink);margin:1.8em 0 8px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 1.4em}
.tbl th,.tbl td{border:1px solid var(--sen);padding:10px 14px;text-align:left;vertical-align:top}
.tbl th{white-space:nowrap;background:var(--suna-2);color:var(--ink);width:9em;font-weight:500}

/* --- スポット個票（VN-003雛形） --- */
.spothero{margin:0 0 clamp(24px,4vw,40px);max-width:52em}
.spothero .ph{width:100%;aspect-ratio:3/2}

/* --- つながり（関連スポット・ハブ&スポーク） --- */
.rel{margin-top:clamp(40px,6vw,64px);padding-top:18px;border-top:1px solid var(--sen-faint);
  display:flex;gap:8px 18px;flex-wrap:wrap;align-items:baseline;font-size:13px}
.rel__k{font-family:var(--font-latin);font-size:10px;letter-spacing:.2em;color:var(--ink-faint)}

/* --- スポット一覧（VN-002）：6テーマ節＋カード格子 --- */
.tsec{margin-top:clamp(40px,6vw,72px)}
.tsec__h{display:flex;align-items:baseline;gap:14px;font-size:clamp(17px,2vw,20px);font-weight:700;
  letter-spacing:.1em;color:var(--ink);margin:0 0 clamp(16px,2.5vw,24px);
  padding-left:12px;border-left:2px solid var(--umi)}
.tsec__h small{font-family:var(--font-latin);font-size:9px;letter-spacing:.22em;color:var(--ink-faint);font-weight:400}
.spotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,28px);
  list-style:none;margin:0;padding:0}
.spotcard{display:block;color:var(--ink)}
.spotcard:hover{text-decoration:none}
.spotcard .ph{aspect-ratio:3/2}
.spotcard__n{display:block;font-weight:700;letter-spacing:.08em;font-size:14.5px;margin:10px 0 4px}
.spotcard__en{display:block;font-family:var(--font-latin);font-size:9px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:6px}
.spotcard__l{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.8}
.spotcard:hover .spotcard__n{color:var(--umi-koi)}
.tsec__note{font-size:13px;color:var(--ink-soft);margin:0}
@media(max-width:900px){.spotgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.spotgrid{grid-template-columns:1fr}}

/* --- モデルコース（VN-004）：予告カード（本文は第2波検品後に開通） --- */
.coursecards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,28px);margin-top:clamp(24px,4vw,40px)}
.coursecard{border:1px solid var(--sen);padding:clamp(18px,2.6vw,28px);background:var(--suna)}
.coursecard__k{font-family:var(--font-latin);font-size:9px;letter-spacing:.22em;color:var(--ink-faint);display:block;margin-bottom:10px}
.coursecard__t{font-weight:700;letter-spacing:.08em;font-size:15px;color:var(--ink);margin:0 0 8px}
.coursecard__soon{display:inline-block;border:1px solid var(--sen);border-radius:var(--radius);
  background:var(--suna-2);color:var(--ink-soft);font-size:11px;letter-spacing:.14em;padding:2px 12px}
@media(max-width:900px){.coursecards{grid-template-columns:1fr}}

/* --- Instagram（4号05：ファサード方式。埋め込みscriptは使わない・賑わいは入口で） --- */
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,14px);
  list-style:none;margin:0;padding:0;max-width:640px}
.ig a{display:block}
.ig .ph,.ig img{aspect-ratio:1/1;width:100%;object-fit:cover;display:block}
.ig__foot{margin:16px 0 0;font-size:13px}
.ig__btn{display:inline-block;border:1px solid var(--sen);border-radius:var(--radius);
  padding:8px 20px;font-weight:500;letter-spacing:.08em;color:var(--umi-koi);background:var(--suna)}
.ig__btn:hover{border-color:var(--umi-koi);text-decoration:none}
.ig__at{font-family:var(--font-latin);font-size:11px;letter-spacing:.08em;color:var(--ink-faint);margin-left:12px}

/* --- 言語切替（tnav右端） --- */
.tnav__lang{margin-left:auto;display:flex;gap:12px;align-items:baseline}
.tnav__lang a,.tnav__lang b{font-size:11px;letter-spacing:.1em;font-weight:500}
.tnav__lang b{color:var(--ink)}
.tnav__lang a{color:var(--ink-faint)}
.tnav__lang a:hover{color:var(--umi-koi);text-decoration:none}

/* --- 基本情報の確認日（公開表示・sefaの.op-metaに相当。内部メタ用.t-checkedとは別） --- */
.spot-checked{font-family:var(--font-latin);font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}

/* --- スポットの地図埋め込み（Googleマップ keyless embed・レスポンシブ枠） --- */
.spotmap{max-width:46em;aspect-ratio:16/9;position:relative;
  border:1px solid var(--sen);background:var(--suna-2)}
.spotmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:560px){.spotmap{aspect-ratio:4/3}}

/* --- ヘッダー左端のホームアイコン（2026-07-07発注者指示） --- */
.tnav__home{display:inline-flex;align-items:center;color:var(--ink);padding:2px 2px 0 0}
.tnav__home:hover{color:var(--umi-koi);text-decoration:none}
.tnav__home svg{display:block}

/* --- 斎場御嶽 公式サイトへの大導線（トップ） --- */
.sefabanner{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;
  border:1px solid var(--sen);border-left:3px solid var(--umi);background:var(--suna);
  padding:clamp(20px,3vw,32px);color:var(--ink);max-width:52em}
.sefabanner:hover{text-decoration:none;border-color:var(--umi-koi);border-left-color:var(--umi-koi)}
.sefabanner__body{flex:1;min-width:240px}
.sefabanner__t{display:block;font-weight:700;letter-spacing:.1em;font-size:clamp(16px,1.9vw,19px);margin-bottom:6px}
.sefabanner:hover .sefabanner__t{color:var(--umi-koi)}
.sefabanner__d{display:block;font-size:13px;color:var(--ink-soft);line-height:1.9}
.sefabanner__mrk{font-size:12px;letter-spacing:.08em;color:var(--umi-koi);white-space:nowrap}

/* --- Instagramカルーセル（scroll-snap・スワイプで送る） --- */
.igc{max-width:52em;overflow:hidden}
.igc__track{display:flex;gap:clamp(10px,1.6vw,16px);list-style:none;margin:0;padding:0 0 10px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--sen) transparent}
.igc__card{flex:0 0 calc((100% - 2 * clamp(10px,1.6vw,16px)) / 3);scroll-snap-align:start}
.igc__card a{display:block}
.igc__card img{aspect-ratio:1/1;width:100%;object-fit:cover;display:block;border:1px solid var(--sen)}
@media(max-width:700px){.igc__card{flex-basis:calc((100% - clamp(10px,1.6vw,16px)) / 2)}}
@media(max-width:480px){.igc__card{flex-basis:86%}}

/* --- ステータス帯のサイト名リンク --- */
a.statusline__t{color:#fff}
a.statusline__t:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* --- 写真の出典表記（写真提供・出典リンク） --- */
.spot-credit{font-size:11px;color:var(--ink-faint);letter-spacing:.04em;margin-top:6px;text-align:right}
.spot-credit a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px}
.spot-credit a:hover{color:var(--umi-koi)}

/* --- Instagram公式埋め込みカード（投稿URL方式・管理者権限不要） ---
   カードは正方形（発注者指示2026-07-07）。縦長のリール埋め込みを中央でクロップ表示
   （枠の外はoverflowで隠す）。クリックすると投稿はそのまま開ける。 */
/* 埋め込みカード：枠に3等分でぴったり収める（右端切れ対策・2026-07-14 Masami指示）。
   iframe（320px設計）は ig-fit.js が計った縮尺 --igs で丸ごと縮小。スマホは1枚幅。 */
.igc--embed{max-width:none}   /* PCは節の幅いっぱいに両詰め（2026-07-14 Masami指示） */
.igc__track--embed{overflow:visible}
.igc__card--embed{flex:0 0 calc((100% - 2 * clamp(10px,1.6vw,16px)) / 3);aspect-ratio:1/1;position:relative;overflow:hidden;
  border:1px solid var(--sen);border-radius:var(--radius);background:#fff}
.igc__card--embed iframe{position:absolute;left:0;width:320px;height:680px;border:0;display:block;background:#fff;
  transform:scale(var(--igs,1));transform-origin:top left;top:calc(-178px * var(--igs,1))}
@media(max-width:700px){.igc__card--embed{flex-basis:100%}}

/* --- なんじぃ商店おすすめウィジェット（レーン15・2026-07-13番人裁定済み）
       v2：横送りカルーセル（igcと同じscroll-snap・2026-07-13発注者指示）。
       次のカードが端に少し覗く幅（/4.15）でスクロールできることを知らせる --- */
.nanji{display:flex;gap:clamp(8px,1.2vw,12px);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin}
.nanji__card{flex:0 0 calc((100% - 4*clamp(8px,1.2vw,12px))/5.15);display:block;text-decoration:none;color:var(--ink)}
@media(max-width:900px){.nanji__card{flex-basis:calc((100% - 2*clamp(8px,1.2vw,12px))/3.15)}}
@media(max-width:480px){.nanji__card{flex-basis:46%}}
.nanji__card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border:1px solid var(--sen);background:var(--suna-2)}
.nanji__name{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.5;margin:6px 0 2px;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nanji__go{display:block;font-size:10px;color:var(--ink-soft);letter-spacing:.08em}
.nanji__card:hover .nanji__name{text-decoration:underline;text-underline-offset:3px}
.nanji__foot{margin:14px 0 0;font-size:11px;color:var(--ink-faint);letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.nanji__foot a{color:var(--ink-soft)}
.nanji__foot small{font-size:11px;color:var(--ink-faint)}
/* /shop/ ページ内に置くときの静かな外装（裁定E・mag外装を使わない） */
.nanji__sec{margin:26px 0 0}
.nanji__sec-t{font-size:15px;font-weight:700;letter-spacing:.08em;margin:0 0 14px}
.nanji__sec-t small{font-family:var(--font-latin);font-size:9px;letter-spacing:.22em;color:var(--ink-faint);margin-left:10px;font-weight:400}
[data-nanji-section][hidden]{display:none} /* .mag等のdisplay指定より必ず優先して畳む */
[data-nanji-section]>div{min-width:0} /* 128枚トラックの内在幅がmagグリッド列を押し広げないよう閉じ込める */
/* 縦書き章題でラテン文字を正立で積む（SNS見出し用・添え字は従来の横倒しのまま） */
.mag__title--up{text-orientation:upright;letter-spacing:.12em}
.mag__title--up small{text-orientation:mixed}

/* --- 関連リンク（DMOフッターから移植・2026-07-13 Masami指示） --- */
.rellinks{border-top:1px solid var(--sen);margin-top:clamp(56px,8vw,96px);padding:clamp(28px,4vw,44px) 0 0}
.rellinks .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.rellinks__h{margin:0 0 clamp(14px,2vw,20px);font-family:var(--font-head);font-weight:700;
  letter-spacing:var(--ls-head);font-size:15px;color:var(--ink);display:flex;align-items:baseline;gap:12px}
.rellinks__en{font-family:var(--font-latin);font-weight:400;font-size:9px;letter-spacing:.22em;color:var(--ink-faint)}
.rellinks__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.rcard{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;
  background:var(--suna);border:1px solid var(--sen);border-radius:var(--radius);
  padding:clamp(16px,1.8vw,20px);color:var(--ink);
  transition:background .15s ease,transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease}
.rcard:hover{background:var(--suna-2);text-decoration:none;transform:translateY(-5px);box-shadow:0 14px 34px -12px rgba(0,130,145,.34)}
.rcard:focus-visible{outline:2px solid var(--umi-koi);outline-offset:3px}
.rcard__logo{height:38px;margin-bottom:9px;display:flex;align-items:center}
.rcard__logo img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.rcard__name{font-family:var(--font-head);font-weight:700;letter-spacing:.08em;font-size:14.5px;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;padding-right:22px}
.rcard__q{font-weight:400;font-size:10px;letter-spacing:.06em;color:var(--ink-faint)}
.rcard__note{font-family:var(--font-body);font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
.rcard__ext{position:absolute;top:clamp(14px,1.8vw,18px);right:clamp(14px,1.8vw,18px);
  font-style:normal;font-family:var(--font-latin);color:var(--umi-koi);font-size:15px;line-height:1}
.rcard:hover .rcard__ext{color:var(--umi)}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.rcard{transition:background .15s ease}.rcard:hover{transform:none;box-shadow:none}}
@media(max-width:640px){.rellinks__grid{grid-template-columns:1fr}}

/* ── お店の準備中：なんじぃの Coming Soon（2026-07-14 Masami指示・写真が入るまでの間） ── */
.ph--soon{background:radial-gradient(120% 100% at 50% 8%,var(--suna) 42%,var(--suna-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px}
.ph-soon__nanji{width:auto;height:44%;max-height:132px;min-height:62px;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(21,33,31,.10));animation:nanji-bob 3.2s ease-in-out infinite}
.ph-soon__t b{display:block;font-size:12px;letter-spacing:.16em;color:var(--umi-koi);font-weight:600}
.ph-soon__t small{display:block;font-size:10px;letter-spacing:.06em;color:var(--ink-soft);margin-top:3px}
@keyframes nanji-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.ph-soon__nanji{animation:none}}

/* ── 日々を、読む：特集アイキャッチのランダム3枚（2026-07-14 Masami指示） ── */
.ftrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(20px,3vw,32px)}
.ftrow a{display:block;color:var(--ink);text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.ftrow a:hover{transform:translateY(-4px);text-decoration:none}
.ftrow .ph{aspect-ratio:4/3;overflow:hidden}
.ftrow .ph--filled img{transition:scale .7s cubic-bezier(.2,.6,.2,1);scale:1}
.ftrow a:hover .ph--filled img{scale:1.06}
.ftrow__t{display:block;margin-top:9px;font-weight:700;font-size:12.5px;letter-spacing:.06em;line-height:1.7}
.ftrow a:hover .ftrow__t{color:var(--umi-koi)}
@media(max-width:760px){.ftrow{grid-template-columns:1fr 1fr}.ftrow a:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){.ftrow a,.ftrow .ph--filled img{transition:none}
  .ftrow a:hover{transform:none}.ftrow a:hover .ph--filled img{scale:none}}

/* ── ハートの地図：鼓動（2026-07-14 Masami指示・ドクン、ドクンと脈打つ） ── */
.heart-map img{transform-origin:48% 46%;animation:heart-beat 2.8s ease-in-out infinite;will-change:transform}
@keyframes heart-beat{
  0%,100%{transform:scale(1)}
  10%{transform:scale(1.035)}
  18%{transform:scale(1)}
  26%{transform:scale(1.025)}
  36%{transform:scale(1)}}
.heart-map__mk::after{animation:heart-ring 2.8s ease-out infinite}
@keyframes heart-ring{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);opacity:1}
  60%{box-shadow:0 0 0 14px rgba(255,255,255,0);opacity:0}
  100%{box-shadow:0 0 0 14px rgba(255,255,255,0);opacity:0}}

/* ── 映像帯（なんじぃ商店の下・2026-07-14 Masami指示）＋手書き文字の描画 ── */
@font-face{font-family:"CaveatBand";src:url("/assets/band/caveat-band.woff2") format("woff2");
  font-weight:500;font-display:swap}
.vnband{position:relative;overflow:hidden;height:clamp(280px,36vw,500px);margin-top:clamp(48px,7vw,88px)}
.vnband__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(1.04)}
.vnband__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,33,31,.08),rgba(21,33,31,.22))}
.vnband__moji{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(64%,560px);height:auto;overflow:visible}
.vnband__moji text{font-family:"CaveatBand","Caveat",cursive;font-size:58px;fill:#fff;stroke:#fff;
  stroke-width:1.1;paint-order:stroke;letter-spacing:.01em;
  stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  text-shadow:0 2px 18px rgba(21,33,31,.4)}
.vnband.is-in .vnband__moji text{animation:vb-draw 2.6s cubic-bezier(.4,.1,.3,1) .3s forwards,vb-ink 1s ease 2.2s forwards}
@keyframes vb-draw{to{stroke-dashoffset:0}}
@keyframes vb-ink{to{fill-opacity:.97}}
@media (prefers-reduced-motion:reduce){
  .heart-map img{animation:none}
  .heart-map__mk::after{animation:none}
  .vnband__moji text{stroke-dashoffset:0;fill-opacity:.97;animation:none}
  .vnband.is-in .vnband__moji text{animation:none}}

/* ── アイキャッチ2枚のクロスフェード（.phx・2026-07-14 Masami指示） ── */
.phx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phx img:last-child{animation:phx-fade 12s ease-in-out infinite}
@keyframes phx-fade{0%,38%{opacity:1}50%,88%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.phx img:last-child{animation:none;opacity:1}}