/* tours.css — トップページ(index.html)の<style>をそのまま抜き出した共有CSS。
   /tours/ 配下と /sensei/ のページが読む。デザイン言語はトップと完全に同一。
   ※トップのCSSを直した時は、ここも同じ変更を入れる（手動同期・意図的に単純なまま） */

/* ══════════════════════════════════════════════════════════════
   pattern-2 のデザイン言語をそのまま採用。
   白地ヘッダ / 赤(#E0342A)の太枠カード / ベタ影 / 網点 / 白抜き特大タイポ。
   色・角丸・影・フォントのトークンは pattern-2 から一切変えていない。
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --bg-2:#FBF6F5; --card:#FFFFFF;
  --txt:#1A1315; --sub:#6C5F61; --line:#EBE1DF;
  --ac:#E0342A; --ac-deep:#B31E17; --ac-tint:#FDEEEC;
  --ink:#171012;
  --disp:"Lilita One","M PLUS Rounded 1c",-apple-system,sans-serif;
  --maru:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",-apple-system,"Hiragino Sans",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── 土台 ───────────────────────────────────────────
   傾けた要素・ステッカー・マーキーが右にはみ出しても
   375pxで横スクロールが出ないよう、clipで刈り取る。 */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;overflow-x:clip;
  background:var(--bg);color:var(--txt);
  font-family:var(--maru);font-weight:400;line-height:1.8;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
body,p,li,td,th,div,span,b,small,summary,button,a,h1,h2,h3,h4{
  word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere;
}
h1,h2,h3,h4,.btn,.chip{text-wrap:balance;}
p,li{text-wrap:pretty;}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400;line-height:1.06;letter-spacing:.01em;}
a{color:inherit;}
img{display:block;max-width:100%;height:auto;object-fit:cover;}
figure{margin:0;}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.num{font-variant-numeric:tabular-nums;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.wrap{max-width:1060px;margin:0 auto;padding:0 20px;}
.prose{max-width:68ch;}
.jp{font-family:var(--maru);font-weight:800;}
.center{text-align:center;}

/* ポップ全開の共通パーツ: 太い黒枠＋ベタ影 */
.pop{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--card);}
@media(min-width:760px){ .pop{border-width:4px;box-shadow:9px 9px 0 var(--ink);} }

.eyebrow{
  display:inline-block;font-weight:800;font-size:11.5px;letter-spacing:.18em;
  background:var(--ink);color:#fff;padding:5px 13px;border-radius:999px;margin:0 0 14px;
}
.sec{padding:60px 0;}
.sec.tint{background:var(--bg-2);}
.sec h2{font-size:clamp(30px,7.4vw,54px);}
.sec .lead{color:var(--sub);max-width:60ch;margin:14px 0 32px;font-size:15.5px;line-height:1.85;}
.sec .lead.mid{margin-left:auto;margin-right:auto;}

/* ── ボタン ── */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--maru);font-weight:800;font-size:16px;
  padding:14px 26px;border-radius:999px;
  background:var(--ink);color:#fff;border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
  transition:transform .18s var(--spring),box-shadow .18s var(--ease);
}
.btn:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 rgba(0,0,0,.28);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.25);}
.btn.white{background:#fff;color:var(--ac-deep);}
.btn.red{background:var(--ac);color:#fff;box-shadow:4px 4px 0 var(--ink);}
.btn.red:hover{box-shadow:7px 8px 0 var(--ink);}
.btn.red:active{box-shadow:1px 1px 0 var(--ink);}
.btn.sm{font-size:14px;padding:11px 20px;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.cta-row.mid{justify-content:center;}

/* ── ヘッダ（1行固定・折り返さない） ── */
.site-head{position:sticky;top:0;z-index:60;background:#fff;color:var(--txt);
  border-bottom:3px solid var(--ink);}
.site-head .in{display:flex;align-items:center;gap:16px;height:60px;flex-wrap:nowrap;}
.logo{font-family:var(--disp);font-size:20px;letter-spacing:.03em;text-decoration:none;
  color:var(--ac-deep);white-space:nowrap;line-height:1;}
.logo span{color:var(--txt);}
.site-head nav{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:nowrap;}
.site-head nav a{font-weight:800;font-size:13.5px;color:var(--txt);
  text-decoration:none;white-space:nowrap;transition:color .14s ease;}
.site-head nav a:hover{color:var(--ac);}
/* ヒーローカードと同じ網点を敷く。文字が必ず点の上に来る */
.site-head .btn-sm{background-color:var(--ac);color:#fff;padding:8px 16px;border-radius:999px;
  background-image:radial-gradient(circle,rgba(255,255,255,.30) 1.4px,transparent 1.5px);
  background-size:12px 12px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:13px;
  transition:transform .16s var(--spring);}
.site-head .btn-sm:hover{color:#fff;transform:translate(-1px,-2px);}
.site-head :focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
@media(max-width:820px){ .site-head nav a:not(.btn-sm){display:none;} }
/* JST時計。1行ヘッダを絶対に折り返させないため広い画面だけに出す */
.clock{display:none;line-height:1.1;text-align:right;margin-left:auto;}
.clock b{display:block;font-weight:800;font-size:9.5px;letter-spacing:.14em;color:var(--sub);}
.clock span{font-family:var(--disp);font-size:15px;color:var(--ac-deep);}
.clock i{font-style:normal;font-size:10px;color:var(--sub);}
@media(min-width:1080px){ .clock{display:block;} .site-head nav{margin-left:22px;} }

/* ── ヒーロー: 紙の上に載った赤いカード ──
   赤を「画面いっぱいの面」から「太枠のカード」に変える。 */
.hero{position:relative;background:var(--bg-2);color:var(--txt);
  padding:20px 0 30px;border-bottom:3px solid var(--ink);}
@media(min-width:940px){ .hero{padding:28px 0 44px;} }
.hero>*{position:relative;z-index:2;}

.hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:30px;align-items:start;
  background:var(--ac);color:#fff;border:3px solid var(--ink);border-radius:22px;
  box-shadow:8px 8px 0 var(--ink);padding:28px 20px 34px;}
@media(min-width:760px){ .hero-grid{border-width:4px;box-shadow:10px 10px 0 var(--ink);} }
@media(min-width:940px){ .hero-grid{grid-template-columns:1.12fr .88fr;gap:36px;
  padding:38px 34px 38px;align-items:center;} }
/* 網点。旭日ではなくコミックのトーン */
.hero-grid::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;
  background-image:radial-gradient(circle,rgba(255,255,255,.30) 1.4px,transparent 1.5px);
  background-size:12px 12px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 96% 4%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 75% 85% at 96% 4%,#000,transparent 72%);}
.hero-grid>*{position:relative;z-index:2;}

.tag{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.14em;
  background:#fff;color:var(--ac-deep);border:2px solid var(--ink);border-radius:999px;
  padding:6px 15px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg);margin:0 0 18px;}
/* ANIME / SENSEI は必ず左寄せの2段組み。中央寄せに戻さないこと（ユウキ指示） */
.hero h1{font-size:clamp(46px,13.5vw,104px);letter-spacing:.005em;color:#fff;
  text-shadow:4px 4px 0 var(--ink);margin:0;text-align:left;}
.hero h1 .l2{display:block;}
.hero .sub{font-family:var(--disp);font-size:clamp(16px,3.4vw,23px);line-height:1.2;
  color:#FFE3E0;margin:14px 0 0;}
.hero .jp-line{font-weight:800;font-size:clamp(15px,4vw,19px);line-height:1.6;margin:16px 0 0;
  color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.22);}
.hero .lead{max-width:38ch;font-size:15.5px;line-height:1.85;color:rgba(255,255,255,.94);
  margin:14px 0 22px;}
.hero .fine{font-size:12.5px;color:rgba(255,255,255,.85);margin:18px 0 0;font-weight:700;}
.hero .proof-line{display:flex;flex-wrap:wrap;gap:6px 14px;margin:16px 0 0;
  font-size:12.5px;font-weight:800;color:#fff;}
.hero .proof-line b{color:#fff;}

/* ヒーローの主役: 9:16の実写リール。太枠＋ベタ影のカードに載せる */
.hero-media{position:relative;justify-self:center;width:min(310px,74vw);
  transform:rotate(1.6deg);}
.hero-media video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#120e0f;
  border:4px solid var(--ink);border-radius:8px;display:block;}
.hero-media::after{content:"";position:absolute;inset:0;border-radius:8px;
  box-shadow:10px 10px 0 var(--ink);pointer-events:none;}
.hero-media .reel-tag{position:absolute;top:-14px;left:-10px;z-index:3;margin:0;
  transform:rotate(-4deg);font-size:11px;padding:5px 12px;}
/* 丸シール */
.seal{position:absolute;z-index:3;display:grid;place-content:center;text-align:center;
  width:clamp(88px,23vw,124px);aspect-ratio:1;border-radius:50%;
  background:#fff;color:var(--ac-deep);border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);transform:rotate(-9deg);padding:6px;}
.seal b{font-family:var(--disp);font-size:clamp(20px,5.4vw,28px);line-height:.98;display:block;}
.seal small{font-weight:800;font-size:9.5px;letter-spacing:.1em;line-height:1.25;display:block;
  margin-top:3px;color:var(--txt);}
.hero-media .seal{right:-16px;bottom:-26px;}

/* ── 流れる帯 ── */
.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:11px 0;
  border-bottom:3px solid var(--ink);}
.ticker .run{display:flex;width:max-content;gap:0;animation:slide 26s linear infinite;}
.ticker span{font-family:var(--disp);font-size:15px;letter-spacing:.06em;white-space:nowrap;
  padding:0 18px;}
.ticker span i{font-style:normal;color:var(--ac);}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── 二本柱 ── */
.pillars{display:grid;grid-template-columns:1fr;gap:28px;margin-top:8px;}
@media(min-width:860px){ .pillars{grid-template-columns:1fr 1fr;gap:26px;} }
.pillar{position:relative;display:block;text-decoration:none;border-radius:8px;overflow:hidden;
  transition:transform .22s var(--spring),box-shadow .22s var(--ease);}
.pillar:nth-child(1){transform:rotate(-1.2deg);}
.pillar:nth-child(2){transform:rotate(1.2deg);}
.pillar:hover{transform:rotate(0deg) translateY(-8px);box-shadow:10px 14px 0 var(--ink);}
.pillar img{width:100%;height:190px;object-position:50% 58%;}
/* 2枚目は写真ではなく赤ベタのパネル。同じ扱いを2つ並べるより対比が出る */
.pillar .panel{position:relative;height:190px;overflow:hidden;
  background:var(--ac);color:#fff;display:grid;align-content:center;padding:0 22px;}
.pillar .panel::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.30) 1.4px,transparent 1.5px);
  background-size:12px 12px;}
.pillar .panel b,.pillar .panel span{position:relative;z-index:2;}
.pillar .panel b{font-weight:800;font-size:clamp(19px,4.6vw,24px);line-height:1.5;
  text-shadow:2px 2px 0 rgba(0,0,0,.2);}
.pillar .panel span{font-family:var(--disp);font-size:14px;letter-spacing:.06em;
  color:#FFE3E0;margin-top:8px;}
.pillar .body{padding:20px 20px 24px;border-top:3px solid var(--ink);}
.pillar .kicker{font-weight:800;font-size:11px;letter-spacing:.16em;color:var(--ac-deep);}
.pillar h3{font-size:clamp(28px,6.6vw,38px);margin:6px 0 8px;color:var(--txt);}
.pillar p{margin:0;color:var(--sub);font-size:14.5px;line-height:1.75;max-width:40ch;}
.pillar .go{display:inline-block;margin-top:16px;font-weight:800;font-size:14px;
  color:#fff;background:var(--ac);border:2px solid var(--ink);border-radius:999px;
  padding:8px 18px;box-shadow:3px 3px 0 var(--ink);}
.pillar:nth-child(2) .go{background:var(--ink);}

/* ── 実績（丸シール） ── */
.proofs{display:grid;grid-template-columns:repeat(2,auto);gap:24px 18px;justify-content:center;
  justify-items:center;}
@media(min-width:700px){ .proofs{grid-template-columns:repeat(3,auto);gap:30px 24px;} }
.pf{position:relative;display:grid;place-content:center;text-align:center;
  width:min(168px,40vw);aspect-ratio:1;border-radius:50%;
  background:#fff;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ac);padding:12px;
  transition:transform .22s var(--spring);}
.pf:nth-child(2n){box-shadow:7px 7px 0 var(--ink);transform:rotate(-3deg);}
.pf:nth-child(3n){transform:rotate(2.4deg);}
.pf:hover{transform:rotate(0) scale(1.05);}
.pf b{font-family:var(--disp);font-size:clamp(26px,7vw,36px);line-height:1;color:var(--ac-deep);
  display:block;}
.pf .k{font-weight:800;font-size:12px;margin-top:5px;color:var(--txt);}
.pf .s{font-size:11px;color:var(--sub);font-weight:700;margin-top:1px;}

/* ── 特集ブロック（写真＋本文の2カラム） ── */
.feature{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;}
@media(min-width:900px){
  .feature{grid-template-columns:1fr 1fr;gap:52px;}
  .feature.rev .fig{order:2;}
}
.fig{position:relative;width:100%;transform:rotate(-1.4deg);}
.fig img{width:100%;aspect-ratio:4/3;border:4px solid var(--ink);border-radius:6px;
  box-shadow:9px 9px 0 var(--ac);background:#fff;}
.feature.rev .fig{transform:rotate(1.4deg);}
.feature.rev .fig img{box-shadow:9px 9px 0 var(--ink);}
.figcap{position:absolute;left:14px;bottom:-15px;background:#fff;border:2px solid var(--ink);
  border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:5px 13px;
  font-weight:800;font-size:11px;letter-spacing:.1em;color:var(--txt);}
.feature h2{font-size:clamp(27px,6vw,44px);}
.feature p{color:var(--sub);font-size:15px;line-height:1.85;margin:14px 0 0;max-width:56ch;}

/* チェックリスト */
.ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px;}
.ticks li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.72;color:var(--sub);}
.ticks li::before{content:"✓";position:absolute;left:0;top:3px;width:22px;height:22px;
  border-radius:50%;background:var(--ac);color:#fff;border:2px solid var(--ink);
  display:grid;place-content:center;font-size:11px;font-weight:800;line-height:1;}

/* ── ツアーの流れ ── */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px;}
.chip{font-weight:800;font-size:12.5px;background:#fff;color:var(--txt);
  border:2.5px solid var(--ink);border-radius:999px;padding:7px 15px;
  box-shadow:3px 3px 0 var(--ac);}
.chip.ink{box-shadow:3px 3px 0 var(--ink);}
.steps{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:640px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .steps{grid-template-columns:repeat(3,1fr);} }
.step{position:relative;border-radius:8px;overflow:hidden;
  transition:transform .22s var(--spring),box-shadow .22s var(--ease);}
.step:nth-child(odd){transform:rotate(-.9deg);}
.step:nth-child(even){transform:rotate(.9deg);}
.step:hover{transform:rotate(0) translateY(-7px);box-shadow:10px 14px 0 var(--ac);}
/* 素材は被写体が中央に無い。切り位置は写真ごとに指定する */
.step img{width:100%;height:168px;object-position:50% 40%;}
.step:nth-child(1) img{object-position:50% 44%;}
.step:nth-child(2) img{object-position:52% 34%;}
.step:nth-child(3) img{object-position:50% 60%;} /* 看板だけ拾って顔が切れるのでは意味がない。2人の顔を優先 */
.step:nth-child(4) img{object-position:50% 42%;} /* 顔だけでなく手元の品物まで入れる */
.step:nth-child(5) img{object-position:50% 46%;}
.step .body{padding:16px 18px 20px;border-top:3px solid var(--ink);}
.step h3{font-size:20px;margin:0 0 6px;font-family:var(--maru);font-weight:800;line-height:1.4;}
.step p{margin:0;font-size:14px;color:var(--sub);line-height:1.7;}
.step .n{position:absolute;top:10px;left:10px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:var(--ac);color:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--disp);font-size:21px;display:grid;place-content:center;line-height:1;
  transform:rotate(-6deg);}

/* ── ギフト3枚の帯 ── */

/* ── カード4枚（practical） ── */
.grid4{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:600px){ .grid4{grid-template-columns:1fr 1fr;} }
@media(min-width:1000px){ .grid4{grid-template-columns:repeat(4,1fr);} }
.grid3{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:560px){ .grid3{grid-template-columns:1fr 1fr;} }
@media(min-width:900px){ .grid3{grid-template-columns:repeat(3,1fr);} }
.card{padding:20px 20px 24px;border-radius:8px;}
.card h3{font-family:var(--maru);font-weight:800;font-size:19px;line-height:1.4;margin:14px 0 6px;}
.card p{margin:0;color:var(--sub);font-size:14px;line-height:1.72;}
.card.phrase h3{font-family:var(--disp);font-weight:400;font-size:22px;color:var(--ac-deep);margin:0;}
.card.phrase .kana{font-weight:800;font-size:15px;margin:6px 0 2px;color:var(--txt);}
.kchip{width:46px;height:46px;border-radius:12px;background:var(--ac);color:#fff;
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-content:center;
  font-family:var(--maru);font-weight:800;font-size:22px;line-height:1;transform:rotate(-5deg);}
.card.hot{background:var(--ac);color:#fff;display:flex;flex-direction:column;justify-content:center;
  gap:10px;}
.card.hot h3{color:#fff;margin:0;}
.card.hot a{font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* ── 一日の流れ（縦タイムライン） ── */
.flow{max-width:760px;margin:0 auto;display:grid;gap:0;}
.flow .row{display:grid;grid-template-columns:78px 26px 1fr;gap:12px;align-items:start;
  padding:0 0 22px;position:relative;}
.flow .row:last-child{padding-bottom:0;}
.flow .t{font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--ac-deep);
  text-align:right;padding-top:5px;}
.flow .d{position:relative;justify-self:center;width:18px;height:18px;border-radius:50%;
  background:var(--ac);border:3px solid var(--ink);margin-top:6px;z-index:2;}
.flow .row:not(:last-child) .d::after{content:"";position:absolute;left:50%;top:100%;
  transform:translateX(-50%);width:3px;height:calc(100% + 26px);background:var(--ink);z-index:-1;}
.flow h3{font-family:var(--maru);font-weight:800;font-size:17px;line-height:1.45;margin:0 0 3px;}
.flow p{margin:0;color:var(--sub);font-size:14px;line-height:1.7;}

/* ── 動画埋め込み（italki自己紹介） ── */
.video-embed{position:relative;aspect-ratio:16/9;border:4px solid var(--ink);border-radius:6px;
  overflow:hidden;box-shadow:9px 9px 0 var(--ac);background:#120e0f;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ── ガイド紹介 ── */
.guide{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;justify-items:center;}
@media(min-width:860px){ .guide{grid-template-columns:320px 1fr;gap:52px;justify-items:start;} }
/* 丸抜きにすると素材が切れるので、傾けた四角のフレームで見せる */
.face-wrap{position:relative;width:100%;max-width:300px;transform:rotate(-1.8deg);}
.face-wrap img{width:100%;aspect-ratio:4/5;border-radius:6px;
  border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ac);object-position:46% 26%;}
.face-wrap .seal{right:-20px;bottom:-30px;transform:rotate(-9deg);}
.guide h2{font-size:clamp(28px,6.6vw,44px);}
.guide .who{font-weight:800;font-size:13px;color:var(--ac-deep);letter-spacing:.14em;margin:0 0 8px;}
.guide p{color:var(--sub);font-size:15px;line-height:1.85;margin:14px 0 0;max-width:62ch;}
/* 吹き出し */
.bubble{position:relative;background:var(--ac-tint);border:3px solid var(--ink);border-radius:16px;
  padding:16px 20px;margin:22px 0 0;max-width:56ch;box-shadow:5px 5px 0 var(--ink);}
.bubble p{margin:0;color:var(--txt);font-weight:800;font-size:15px;line-height:1.7;}
.bubble::before,.bubble::after{content:"";position:absolute;left:34px;width:0;height:0;
  border-style:solid;}
.bubble::before{top:-19px;border-width:0 15px 19px;border-color:transparent transparent var(--ink);}
.bubble::after{top:-14px;border-width:0 11px 15px;border-color:transparent transparent var(--ac-tint);}
.mini{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0 0;max-width:460px;}
@media(min-width:560px){ .mini{grid-template-columns:repeat(4,1fr);} }
.mini div{background:#fff;border:3px solid var(--ink);border-radius:8px;
  box-shadow:4px 4px 0 var(--ac);padding:12px 8px;text-align:center;}
.mini b{display:block;font-family:var(--disp);font-size:21px;color:var(--ac-deep);line-height:1;}
.mini span{display:block;font-size:10.5px;font-weight:800;color:var(--sub);margin-top:5px;
  line-height:1.35;}

/* ── ゲストの声 ── */
.banner{position:relative;margin:0 0 38px;}
.banner img{width:100%;aspect-ratio:16/7;border:4px solid var(--ink);border-radius:8px;
  box-shadow:9px 9px 0 var(--ink);object-position:50% 42%;}
.rev-grid{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:760px){ .rev-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1040px){ .rev-grid{grid-template-columns:repeat(3,1fr);} }
.review{margin:0;padding:20px 20px 18px;border-radius:8px;display:flex;flex-direction:column;}
.review .stars{color:var(--ac);font-size:14px;letter-spacing:.1em;line-height:1;}
.review p{margin:11px 0 16px;font-size:14px;line-height:1.8;color:var(--txt);flex:1;}
.review figcaption{font-weight:800;font-size:12.5px;color:var(--sub);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.review .src{font-size:10px;letter-spacing:.1em;background:var(--ink);color:#fff;
  border-radius:999px;padding:3px 9px;}

/* ── Instagram ── */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(min-width:640px){ .ig-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:980px){ .ig-grid{grid-template-columns:repeat(6,1fr);} }
.ig-grid a{display:block;border:3px solid var(--ink);border-radius:6px;overflow:hidden;
  box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--spring);}
.ig-grid a:hover{transform:translateY(-5px);}
.ig-grid img{width:100%;aspect-ratio:1;}

/* ── FAQ ── */
.faq{display:grid;gap:14px;max-width:840px;margin:0 auto;}
.faq details{border-radius:8px;overflow:hidden;}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:15.5px;line-height:1.5;
  padding:16px 54px 16px 20px;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:16px;top:14px;
  width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;
  border:2px solid var(--ink);display:grid;place-content:center;
  font-family:var(--disp);font-size:16px;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details>p{margin:0;padding:14px 20px 18px;color:var(--sub);font-size:14.5px;line-height:1.8;
  border-top:2px solid var(--line);}
.faq a{color:var(--ac-deep);font-weight:800;}

/* ── 締めのCTA ── */
.finale{position:relative;background:var(--ac);color:#fff;text-align:center;overflow:clip;
  padding:66px 0 72px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);}
.finale::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.28) 1.4px,transparent 1.5px);
  background-size:12px 12px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 100%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 100%,#000,transparent 70%);}
.finale>*{position:relative;z-index:2;}
.finale h2{font-size:clamp(34px,9vw,72px);color:#fff;text-shadow:4px 4px 0 var(--ink);}
.finale .jp-line{font-weight:800;font-size:clamp(14px,3.8vw,18px);margin:16px 0 0;}
.finale .lead{max-width:52ch;margin:14px auto 28px;color:rgba(255,255,255,.94);font-size:15px;}

/* ── フッタ ── */
.site-foot{background:var(--ink);color:rgba(255,255,255,.72);font-size:13.5px;padding:36px 0 44px;}
.site-foot .cols{display:flex;flex-wrap:wrap;gap:34px;margin-bottom:22px;}
.site-foot .h{font-family:var(--disp);color:#fff;font-size:15px;letter-spacing:.06em;margin:0 0 10px;}
.site-foot a{color:rgba(255,255,255,.72);text-decoration:none;display:block;margin:0 0 7px;
  transition:color .14s ease;}
.site-foot p{max-width:68ch;margin:.2rem 0 .6rem;}
.site-foot a:hover{color:var(--ac);}
.site-foot .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:20px;
  font-size:12.5px;}

/* ── 登場アニメ ──
   opacityでは隠さない（headless環境でopacityが固着した前科あり）。
   位置だけずらす＝JSが死んでも本文は必ず読める。 */
.js .rise{translate:0 16px;}
.js .rise.in{translate:none;transition:translate .55s var(--spring);}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .js .rise{translate:none;}
}

/* ══ ヒーロー刷新: 動画を全面に敷いて、その上に白抜きの文字（pattern-2で確定した形） ══ */
.hero{position:relative;min-height:min(88svh,780px);display:grid;align-items:end;
  background:var(--ink);overflow:hidden;border-bottom:3px solid var(--ink);padding:0;}
.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;z-index:0;}
/* 文字が乗る上下だけ暗く落とす。真ん中は素材のまま見せる */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,16,18,.55) 0%,rgba(23,16,18,0) 34%,rgba(23,16,18,.86) 88%);}
.hero .in{position:relative;z-index:2;color:#fff;padding:40px 20px 44px;}
@media(min-width:940px){ .hero .in{padding:56px 20px 64px;} }
.hero h1{font-size:clamp(52px,15vw,110px);color:#fff;text-shadow:5px 5px 0 var(--ink);margin:0;}
/* sub＝何のサイトかの説明 / hook＝掴みの1行 */
.hero .sub{font-family:var(--disp);font-size:clamp(15px,3vw,21px);line-height:1.2;color:#fff;
  margin:12px 0 0;text-shadow:0 2px 10px rgba(0,0,0,.55);}
.hero .hook{font-family:var(--disp);font-size:clamp(18px,4.2vw,27px);line-height:1.18;color:#fff;
  margin:12px 0 0;text-shadow:0 2px 10px rgba(0,0,0,.55);}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px;}
.hero .proof-line{color:#fff;margin:16px 0 0;text-shadow:0 2px 8px rgba(0,0,0,.55);}
.hero .fine{font-size:12.5px;color:rgba(255,255,255,.92);margin:14px 0 0;font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.5);}
/* 評価の丸は2枚。どっちの評価か分かるよう見出しを載せる */
.seals{position:absolute;z-index:3;right:20px;top:26px;display:flex;flex-direction:column;gap:10px;}
@media(min-width:940px){ .seals{right:40px;top:40px;gap:14px;} }
.seals .seal{position:relative;right:auto;top:auto;bottom:auto;width:clamp(84px,21vw,116px);}
.seals .seal:nth-child(2){transform:rotate(6deg);}
.seal em{font-style:normal;font-weight:800;font-size:8.5px;letter-spacing:.12em;
  color:var(--ac);display:block;margin-bottom:3px;}
/* 「◯点満点中」を必ず添える。数字だけだと満点が分からない */
.seal b i,.pf b i{font-style:normal;font-size:.52em;color:var(--sub);letter-spacing:.01em;}

/* ══ 直販の予約カード: 人数 → その人数のCal.com予約ページ ══ */
.booker{background:#fff;color:var(--txt);border-radius:18px;padding:16px 16px 18px;
  text-align:left;width:100%;max-width:400px;margin:26px auto 0;
  border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);}
@media(min-width:760px){ .booker{border-width:4px;box-shadow:9px 9px 0 var(--ink);} }
.booker .bk-t{font-family:var(--disp);font-size:19px;margin:0 0 10px;line-height:1;}
.bk-row{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;
  border-top:2px dashed var(--line);margin-top:12px;padding-top:11px;}
.bk-row.bk-first{border-top:0;margin-top:0;padding-top:0;}
.bk-step{display:flex;align-items:center;gap:9px;}
.bk-step button{width:31px;height:31px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;
  font-size:15px;font-weight:800;line-height:1;cursor:pointer;color:var(--txt);padding:0;}
.bk-step button:hover{background:var(--ac-tint);}
.bk-step b{min-width:18px;text-align:center;}
.bk-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:11px 0 0;
  border-top:2px dashed var(--line);padding-top:11px;}
.bk-price b{font-family:var(--disp);font-size:25px;color:var(--ac-deep);line-height:1;}
.bk-price span{font-size:12px;font-weight:700;color:var(--sub);}
.bk-mount{min-height:150px;margin-top:12px;}
.bk-setup{border:2px dashed var(--line);border-radius:12px;padding:16px 14px;text-align:center;
  font-size:12.5px;font-weight:700;color:var(--sub);line-height:1.7;}
.bk-note{font-size:11.5px;font-weight:700;color:var(--sub);line-height:1.55;margin:9px 0 0;}
/* 広い画面では縦長になりすぎるので、左に人数と金額・右にカレンダーの2列にする */
@media(min-width:900px){
  .booker{max-width:840px;display:grid;grid-template-columns:270px minmax(0,1fr);
    gap:0 26px;align-items:start;padding:20px 22px 22px;}
  .booker>*{grid-column:1;}
  .booker .bk-mount{grid-column:2;grid-row:1/span 5;margin-top:0;min-height:520px;}
  .booker .bk-note{margin-top:16px;}
}

/* ══════════════════════════════════════════════════════════════
   ここから下は /tours/ ・ /sensei/ 専用の追加パーツ。
   トークン（色・角丸・影・フォント）は上のトップページ由来のものだけを使う。
   ══════════════════════════════════════════════════════════════ */

/* ── サブページの見出し帯 ── */
.page-head{background:var(--bg-2);border-bottom:3px solid var(--ink);padding:48px 0 42px;}
.page-head h1{font-size:clamp(32px,8vw,60px);}
.page-head .eyebrow{margin-bottom:14px;}
.page-head .lead{color:var(--sub);max-width:62ch;margin:16px 0 0;font-size:15.5px;line-height:1.85;}
.crumbs{font-size:12.5px;font-weight:800;color:var(--sub);margin:0 0 16px;}
.crumbs a{color:var(--ac-deep);text-decoration:none;}

/* ── 3ステップのクロスセル図（CSSだけ・外部ライブラリなし） ── */
.ladder{display:grid;gap:14px;grid-template-columns:1fr;margin:6px 0 0;}
.ladder .rung{position:relative;background:#fff;border:3px solid var(--ink);border-radius:14px;
  box-shadow:6px 6px 0 var(--ink);padding:18px 18px 20px;}
.ladder .rung .day{display:inline-block;font-family:var(--disp);font-size:12.5px;letter-spacing:.08em;
  background:var(--ac);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:4px 12px;}
.ladder .rung h3{font-family:var(--maru);font-weight:800;font-size:18px;line-height:1.4;margin:12px 0 6px;}
.ladder .rung p{margin:0;color:var(--sub);font-size:14px;line-height:1.7;}
.ladder .rung::after{content:"▼";position:absolute;left:50%;bottom:-19px;translate:-50% 0;
  font-size:15px;color:var(--ac);}
.ladder .rung:last-child::after{content:none;}
@media(min-width:860px){
  .ladder{grid-template-columns:repeat(3,1fr);gap:34px;}
  .ladder .rung::after{content:"▶";left:auto;right:-27px;bottom:auto;top:50%;translate:0 -50%;}
}

/* ── 商品カード一覧 ── */
.tourcards{display:grid;gap:26px;grid-template-columns:1fr;margin-top:34px;}
@media(min-width:900px){.tourcards{grid-template-columns:repeat(3,1fr);}}
.tourcard{display:flex;flex-direction:column;background:var(--card);border:3px solid var(--ink);
  border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:22px 22px 24px;text-decoration:none;color:inherit;}
.tourcard .flag{display:inline-block;align-self:flex-start;font-weight:800;font-size:11.5px;
  letter-spacing:.08em;background:var(--ac-tint);color:var(--ac-deep);border:2px solid var(--ac);
  border-radius:999px;padding:3px 11px;}
.tourcard h3{font-family:var(--disp);font-weight:400;font-size:25px;line-height:1.1;margin:14px 0 8px;}
.tourcard .sell{color:var(--sub);font-size:14.5px;line-height:1.7;margin:0 0 16px;}
.tourcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 18px;font-size:13.5px;}
.tourcard dt{font-weight:800;color:var(--txt);white-space:nowrap;}
.tourcard dd{margin:0;color:var(--sub);}
.tourcard .go{margin-top:auto;font-weight:800;font-size:14px;color:var(--ac-deep);}

/* ── 事実の箱・仕様表・注記 ── */
.factbox{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);
  padding:20px 22px;margin:26px 0;}
.factbox h3{font-family:var(--maru);font-weight:800;font-size:18px;margin:0 0 10px;}
.factbox p{margin:0 0 10px;color:var(--sub);font-size:14.5px;line-height:1.75;}
.factbox p:last-child{margin-bottom:0;}
.spec{width:100%;border-collapse:collapse;font-size:14px;margin:22px 0 0;}
.spec th,.spec td{border-bottom:2px solid var(--line);padding:11px 4px;text-align:left;vertical-align:top;}
.spec th{width:34%;font-weight:800;white-space:nowrap;}
.spec td{color:var(--sub);}
.note{font-size:13px;color:var(--sub);line-height:1.7;}

/* ── 問い合わせフォーム ── */
.form{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);
  padding:24px 22px 26px;display:grid;gap:16px;}
.form .field{display:grid;gap:6px;}
.form label{font-weight:800;font-size:13.5px;}
.form .hint{font-weight:400;font-size:12.5px;color:var(--sub);}
.form input,.form select,.form textarea{font:inherit;font-size:15px;color:var(--txt);background:#fff;
  border:2px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ac);outline:none;}
.form textarea{min-height:92px;resize:vertical;}
.form .two{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:640px){.form .two{grid-template-columns:1fr 1fr;}}
.form button{font:inherit;font-family:var(--disp);font-size:18px;letter-spacing:.02em;cursor:pointer;
  background:var(--ac);color:#fff;border:3px solid var(--ink);border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);padding:13px 26px;justify-self:start;}
.form button:active{translate:2px 2px;box-shadow:1px 1px 0 var(--ink);}

/* ── プロフィール ── */
.bio{display:grid;gap:30px;grid-template-columns:1fr;align-items:start;}
@media(min-width:880px){.bio{grid-template-columns:340px 1fr;gap:44px;}}
.bio img{border:3px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink);width:100%;}
.bio p{color:var(--sub);font-size:15px;line-height:1.85;}
/* ページ見出し直下の写真。aspect-ratio で場所を先に確保してガタつきを防ぐが、
   3:2のまま広い画面に置くと1枚で1画面ぶん（≒850px）を占め、写真が読み込まれるまでは
   その高さがまるごと白い空白になる（＝ヘッダだけが宙に浮いて見えた原因）。高さで頭打ちにする。 */
.hero-shot{margin-top:34px;border:2px solid #111;border-radius:14px;overflow:hidden;background:#fff;}
.hero-shot img{width:100%;aspect-ratio:3/2;max-height:min(48vh,440px);object-fit:cover;
  object-position:50% 46%;}
.hero-shot figcaption{padding:12px 16px;font-size:13px;line-height:1.6;border-top:2px solid #111;color:#444;}