*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

:root{
  /* 白×赤×黄の3色システム（黒・ダーク地は不使用） */
  --red:        #DF0515;   /* apollostation Drive On ブランドレッド */
  --red-deep:   #B8040F;
  --red-hover:  #E84F5A;
  --red-pale:   #FFF2F3;   /* 赤の淡い面 */
  --yellow:     #FFD200;
  --yellow-dark:#F2BA00;
  --yellow-pale:#FFFAE5;   /* 黄の淡い面 */
  --ink:        #43393B;   /* 本文（黒でなく赤みのダークグレー） */
  --ink-sub:    #8D8184;
  --base:       #FFFFFF;
  --line:       #F0E3E4;
  --shadow-sm:  0 2px 10px rgba(184,4,15,.08);
  --shadow-md:  0 10px 28px rgba(184,4,15,.13);
  --font-jp:  'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  --font-en:  'Avenir Next Condensed','Helvetica Neue',Arial,sans-serif;
  /* キャンペーン②専用アクセント（ガリガリ君ブランドブルー・当該カード内のみで使用） */
  --gari-blue: #00A1E9;
}

body{
  font-family: var(--font-jp);
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink);
  background-color: var(--base);
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* スピードライン（赤・黄の極細斜線） */
  background-image:
    repeating-linear-gradient(115deg, transparent 0 130px, rgba(223,5,21,.05) 130px 132px),
    repeating-linear-gradient(115deg, transparent 0 310px, rgba(242,186,0,.10) 310px 313px);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .02em;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline: 3px solid var(--yellow-dark); outline-offset: 2px; }
.page{ max-width: 660px; margin:0 auto; overflow:clip; }
.inner{ padding: 0 20px; }

.en{ font-family:var(--font-en); font-style:italic; font-weight:700; letter-spacing:.08em; }

/* ---------- 期間バー ---------- */
.period-bar{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--red); color:#fff;
  text-align:center; font-weight:700; font-size:12.5px;
  letter-spacing:.14em; padding:11px 12px;
  border-bottom:3px solid var(--yellow);
}
.period-bar::before, .period-bar::after{ content:""; width:26px; height:2px; background:var(--yellow); flex:none; transform:skewX(-30deg); }
.period-bar b{ color:var(--yellow); font-family:var(--font-en); font-style:italic; font-size:14px; letter-spacing:.1em; white-space:nowrap; }
/* SP: 文言が「限定」等の途中で折れないようサイズを絞る */
@media screen and (max-width:480px){
  .period-bar{ font-size:10.5px; gap:8px; letter-spacing:.08em; white-space:nowrap; }
  .period-bar b{ font-size:12px; }
  .period-bar::before, .period-bar::after{ width:12px; }
}

/* ---------- アポちゃん（散らし配置・共通） ---------- */
.apo{
  position:absolute; background:#fff; box-shadow:var(--shadow-md);
  border-radius:10px; padding:12px 12px 14px; pointer-events:none; z-index:3;
}
.apo img{ border-radius:5px; }
.apo::after{ /* 黄色いテープ */
  content:""; position:absolute; top:-8px; left:50%; width:44px; height:14px;
  background:var(--yellow); opacity:.9; transform:translateX(-50%) rotate(-4deg);
}
.apo.apo-lg{ padding:14px 14px 16px; }
.apo.apo-sm{ padding:9px 9px 11px; }
.apo.apo-sm::after{ width:32px; height:11px; }

/* ---------- HERO ---------- */
.hero{
  position:relative; text-align:left;
  padding: 40px 24px 68px; overflow:hidden;
  background: url('../../img/provided/web/ss_sky_self_a.jpg') center bottom/cover no-repeat;
}
.hero::before{ /* 右側の斜め赤ライン群 */
  content:""; position:absolute; top:-40px; right:-90px; width:220px; height:160%;
  background:
    linear-gradient(90deg, var(--red) 0 10px, transparent 10px 26px, var(--yellow) 26px 32px, transparent 32px 44px, rgba(223,5,21,.35) 44px 47px, transparent 47px);
  transform:skewX(-18deg);
  pointer-events:none;
}
.hero-eyebrow{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  color:var(--yellow); font-family:var(--font-en); font-style:italic; font-weight:700;
  font-size:14px; letter-spacing:.22em; margin-bottom:10px;
}
.hero-eyebrow::before{ content:""; width:34px; height:2px; background:var(--yellow); }
.hero h1{
  position:relative;
  font-weight:900; color:#fff;
  /* 1行目「出光アプリ Drive On利用で」をSPでも1行に収めるサイズ */
  font-size: clamp(21px, 6.6vw, 46px); line-height:1.42;
  letter-spacing:.005em;
  text-wrap:balance; margin-bottom:20px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero h1 .hi{
  display:inline-block;
  color:var(--red-deep);
  background:#fff;
  padding:.04em .16em .1em;
  border-radius:4px;
  text-shadow:none;
}
/* FVの白帯（キャッチ＋10円/L引＋ガリガリ君を1枚に集約） */
.hero-band{
  position:relative; width:fit-content;
  background:#fff; border-radius:6px; padding:18px 22px 20px;
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:8px;
  animation: hero-band-pop 2.6s ease-in-out infinite;
  transform-origin:left bottom;
}
@keyframes hero-band-pop{
  0%, 80%, 100%{ transform:translateY(0) scale(1); box-shadow:var(--shadow-md); }
  88%{ transform:translateY(-5px) scale(1.025); box-shadow:0 16px 34px rgba(184,4,15,.22); }
  94%{ transform:translateY(0) scale(1); }
  97%{ transform:translateY(-2px) scale(1.01); }
}
@media (prefers-reduced-motion: reduce){
  .hero-band{ animation:none; }
}
/* 文字の強弱: 10円/L引が最大 > Wチャンス > ガリガリ君（参考: au PAY系バナー） */
.hb-catch{
  color:var(--ink); font-weight:900;
  font-size:clamp(19px,5.4vw,30px); line-height:1.35;
  letter-spacing:.02em; white-space:nowrap;
}
.hb-catch .em-r{ color:var(--red); }
.hb-catch .hb-w{
  display:inline-block; font-size:1.6em; line-height:1;
  vertical-align:-0.08em; margin:0 .02em;
}
.hero-price{
  display:flex; align-items:flex-end; gap:10px;
  line-height:1; flex-wrap:nowrap; margin:2px 0;
}
/* 10円/L引に黄色マーカーの下線 */
.hero-price .hp-main{
  display:flex; align-items:flex-end; gap:6px;
  border-bottom:8px solid var(--yellow); padding-bottom:4px;
}
.hero-price .hp-lead{
  writing-mode:vertical-rl; text-orientation:upright;
  align-self:center;
  font-weight:900; color:var(--ink); font-size:clamp(15px,4.2vw,26px);
  letter-spacing:.14em; white-space:nowrap;
}
.hero-price .hp-num{
  font-family:'Oswald', var(--font-en); font-style:normal; font-weight:700;
  font-size:clamp(74px,22vw,128px); color:var(--red); letter-spacing:0;
  text-shadow: 4px 4px 0 var(--yellow);
}
.hero-price .hp-unit{
  font-weight:900; font-size:clamp(28px,8vw,52px); color:var(--red);
  padding-bottom:6px; white-space:nowrap; letter-spacing:.01em;
}
.hero-price .hp-unit b{ color:var(--red); }
.hb-sub{
  color:var(--red-deep); font-weight:900;
  font-size:clamp(15px,4.2vw,24px); line-height:1.5; white-space:nowrap;
}
@keyframes hero-sub-pop{
  0%, 82%, 100%{ transform:translateY(0) scale(1); box-shadow:var(--shadow-sm); }
  91%{ transform:translateY(-3px) scale(1.03); box-shadow:0 8px 18px rgba(184,4,15,.18); }
}
@media (prefers-reduced-motion: reduce){
  .hero-sub{ animation:none; }
}
/* タイトル直下: 期間+サブコピー */
.hero-main{ position:relative; }
.hero-copy{ min-width:0; }
.sp-br{ display:none; }
.nw{ white-space:nowrap; }
@media screen and (max-width:480px){
  .sp-br{ display:inline; }
}
.hero-period{
  position:relative; margin:18px 0 0;
  font-family:var(--font-en); font-style:italic; font-weight:700;
  font-size:clamp(22px,6vw,29px); letter-spacing:.06em; line-height:1.3; color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hero-period small{ display:block; font-family:var(--font-jp); font-style:normal; font-weight:700; font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.75); }
.hero-period .sep{ color:var(--yellow); padding:0 4px; }
@keyframes floaty{ 0%,100%{ translate:0 0;} 50%{ translate:0 -6px;} }

/* ---------- アンカーナビ ---------- */
.page-nav{ display:flex; gap:1px; padding: 0 20px 8px; position:relative; }
.page-nav a{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:var(--ink);
  font-weight:700; font-size:13px; letter-spacing:.08em;
  padding:13px 8px; text-decoration:none;
  border:1px solid var(--line); border-bottom:3px solid var(--yellow);
  transition: background-color .2s;
}
.page-nav a:first-child{ border-radius:6px 0 0 6px; }
.page-nav a:last-child{ border-radius:0 6px 6px 0; }
.page-nav a + a{ border-left:none; }
.page-nav a::after{
  content:""; width:7px; height:7px; flex:none;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg) translateY(-2px);
}
.page-nav a:hover{ background:var(--yellow-pale); }
/* SP: 「キャンペーン」等がボタン内で折り返さないように */
@media screen and (max-width:480px){
  .page-nav a{ font-size:11.5px; letter-spacing:.02em; gap:5px; padding:13px 4px; white-space:nowrap; }
}

/* ---------- 斜めストライプのリボン（区切り装飾） ---------- */
.ribbon{
  height:10px; margin:44px 0 0;
  background:repeating-linear-gradient(115deg, var(--red) 0 18px, #fff 18px 24px, var(--yellow) 24px 42px, #fff 42px 48px);
  opacity:.9;
}

/* ---------- セクション共通 ---------- */
section{ padding: 48px 0 0; position:relative; }
.sec-head{ padding:0 20px; margin-bottom:24px; position:relative; }
.sec-eyebrow{
  display:flex; align-items:center; gap:12px;
  color:var(--red); font-family:var(--font-en); font-style:italic; font-weight:700;
  font-size:15px; letter-spacing:.24em; margin-bottom:8px;
}
.sec-eyebrow::after{ content:""; flex:1 1 auto; height:2px;
  background:linear-gradient(90deg, var(--yellow), transparent); }
.sec-title{
  font-weight:900; font-size:clamp(25px,7vw,33px);
  line-height:1.45; color:var(--ink); text-wrap:balance; letter-spacing:.005em;
}
/* SP: 「給油がもっとお得になる」「Drive Onのはじめ方」を1行に収める */
@media screen and (max-width:480px){
  .sec-title{ font-size:clamp(17px,5.6vw,25px); white-space:nowrap; }
}
.sec-title .em-r{ color:var(--red); }
.sec-note{ font-size:13px; color:var(--ink-sub); margin-top:10px; }

/* セクション見出し横のアポちゃん（大きさにメリハリ） */
.apo-sec{ width:78px; top:-20px; right:20px; transform:rotate(7deg); }      /* 小: 驚き */
.apo-sec2{ width:104px; top:-16px; right:20px; transform:rotate(-6deg); }   /* 中: 指差し */
.apo-store{ width:72px; top:-14px; right:20px; transform:rotate(5deg); }    /* 小: おじぎ */
/* キャラと文字の干渉回避: キャラの幅ぶんテキストを右から逃がす */
.sec-head.pad-r-sm{ padding-right:112px; }
.sec-head.pad-r-md{ padding-right:140px; }

/* ---------- ボタン ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:50px; padding:0 32px;
  background:var(--red); color:#fff; font-weight:900; font-size:15px; letter-spacing:.06em;
  text-decoration:none; transition:background-color .25s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow:0 4px 0 var(--yellow-dark);
}
.btn-primary:hover{ background:var(--red-hover); }
.btn-primary::after{ content:""; width:7px; height:7px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); }

/* ---------- キャンペーンカード ---------- */
.campaigns{ display:flex; flex-direction:column; gap:34px; padding: 0 16px; }
.c-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:26px 18px 26px; overflow:visible;
  box-shadow:var(--shadow-md);
}
.c-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:12px 12px 0 0; }
.c1::before{ background:linear-gradient(90deg, var(--red) 0 34%, var(--yellow) 34% 40%, transparent 40%); }
.c2::before{ background:linear-gradient(90deg, var(--gari-blue) 0 34%, var(--yellow) 34% 40%, transparent 40%); }
.c-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-style:italic; font-weight:700;
  font-size:clamp(19px,5vw,24px); letter-spacing:.16em; margin-bottom:12px;
}
.c1 .c-badge{ color:var(--red); }
.c2 .c-badge{ color:var(--gari-blue); }
.c-badge::before{ content:""; width:34px; height:3px; background:currentColor; }
.c-card h3{
  font-weight:900; font-size:clamp(18px,5vw,22px);
  line-height:1.6; color:var(--ink); text-wrap:balance; margin-bottom:14px;
}
.c2 h3, .c2 .c-badge{ padding-right:104px; }  /* 肩のアポちゃんと干渉しないよう逃がす */
.c2 .c-badge{ display:flex; }
.c1 h3 .hi{ color:var(--red);
  background:linear-gradient(transparent 74%, var(--yellow) 74% 94%, transparent 94%); }
.c2 h3 .hi{ color:var(--gari-blue); }
.c-lead-note{ font-size:12.5px; font-weight:500; color:var(--ink-sub); margin:-6px 0 12px; }

/* カード肩のアポちゃん（中: スキップ） */
.apo-card{ width:92px; top:-42px; right:14px; transform:rotate(-8deg); }
/* SP: バッジ「CAMPAIGN 02」が折り返さないよう逃がし幅を縮める */
@media screen and (max-width:400px){
  .c2 h3, .c2 .c-badge{ padding-right:80px; }
  .apo-card{ width:76px; top:-36px; right:10px; }
}

/* クーポン券面 */
.coupon{
  position:relative; background:var(--red-pale); border:2px dashed var(--red); border-radius:8px;
  text-align:center; padding:24px 16px 18px; color:var(--ink);
}
.coupon::after{ /* ミシン目 */
  content:""; position:absolute; left:18px; right:18px; top:58px;
  border-top:2px dashed rgba(223,5,21,.35);
}
.coupon-lead{ position:relative; font-weight:700; color:var(--red); font-size:14px; margin-bottom:18px; letter-spacing:.06em; }
.coupon-row{ display:flex; align-items:center; justify-content:center; gap:clamp(6px,3vw,14px); flex-wrap:wrap; margin-bottom:16px; }
.coupon-label{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; flex:none; }
.coupon-fuel{ font-weight:700; font-size:clamp(13px,3.6vw,16px); color:var(--ink); margin:0; letter-spacing:.1em; white-space:nowrap; }
.coupon-deliver{ font-weight:900; font-size:clamp(14px,4vw,18px); color:var(--ink); margin:2px 0 0; letter-spacing:.08em; white-space:nowrap; }
.coupon-price{ display:flex; align-items:flex-end; justify-content:center; gap:4px; line-height:1; }
.coupon-price .num{
  font-family:'Oswald', var(--font-en); font-style:normal; font-weight:700;
  font-size:clamp(52px,17vw,98px); color:var(--red); letter-spacing:0;
  text-shadow: 3px 3px 0 var(--yellow);
}
.coupon-price .unit{ font-weight:900; font-size:clamp(15px,4.2vw,25px); color:var(--red); padding-bottom:12px; white-space:nowrap; }
.coupon-until{
  display:inline-block; background:var(--red); color:#fff;
  font-weight:700; font-size:11.5px; letter-spacing:.12em;
  padding:5px 16px; border-radius:3px; margin-bottom:10px;
}
.coupon-until b{ color:var(--yellow); font-family:var(--font-en); font-style:italic; font-size:13px; letter-spacing:.06em; }
.coupon-fine{ font-size:11.5px; color:var(--ink-sub); }

/* ガリガリ君フォト */
.gari-photo{ margin-top:4px; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); width:80%; max-width:80%; margin-left:auto; margin-right:auto; }
.gari-photo img{ width:100%; height:auto; }

/* ---------- Drive On はじめ方 ---------- */
.howto-bg{ background:var(--yellow-pale); margin-top:48px; padding-bottom:48px;
  border-top:3px solid var(--yellow); }
.step3-list{ display:flex; flex-direction:column; gap:10px; padding:0 16px; position:relative; }
.step3-item{
  display:flex; gap:8px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:16px 18px 16px 12px; box-shadow:var(--shadow-sm);
}
.step3-flag{
  flex:none; width:48px; text-align:center;
  font-family:var(--font-en); font-style:italic; font-weight:700; color:var(--red);
  border-right:2px solid var(--yellow); padding:0;
}
.step3-flag .lbl{ display:block; font-size:10px; letter-spacing:.2em; color:var(--ink-sub); }
.step3-flag .no{ display:block; font-size:26px; line-height:1.1; }
.step3-txt{ font-size:14px; font-weight:500; line-height:1.8; color:var(--ink); }
.step3-txt strong{ color:var(--red); font-weight:700;
  background:linear-gradient(transparent 70%, var(--yellow) 70% 94%, transparent 94%); }
.guide-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:12.5px; font-weight:700; color:#1E5FA8; text-decoration:underline;
}
/* キャンペーン②カード内のガイドリンク（4ステップの代わり） */
.c2-guide{ text-align:center; margin-top:18px; }
.c2-guide .guide-link{ font-size:13.5px; }
.guide-link::after{ content:""; width:6px; height:6px; border-top:2px solid #1E5FA8; border-right:2px solid #1E5FA8; transform:rotate(45deg); flex:none; }

/* ---------- CVユニット ---------- */
.cv-band{
  position:relative; color:#fff; text-align:center;
  padding:40px 20px 38px; margin:44px 16px 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 90px, rgba(255,255,255,.09) 90px 92px),
    linear-gradient(115deg, var(--red-deep), var(--red) 55%);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.cv-band::after{ /* 黄色の斜めエッジ */
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(115deg, var(--yellow) 0 16px, transparent 16px 30px);
}
.cv-logo{ display:flex; justify-content:center; margin-bottom:10px; }
.cv-logo img{ height:44px; width:auto; filter:brightness(0) invert(1); }
/* STEP01直下に挟むためリスト内では左右マージンを持たせない */
.step3-list .cv-band{ margin:8px 0; }
.cv-badges{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.cv-badge{ display:block; transition:transform .18s; }
.cv-badge img{ display:block; height:52px; width:auto; }
.cv-badge:hover{ transform:scale(1.05); }
.cv-qr{ overflow:hidden; border-radius:6px; background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.2); }
.cv-qr img{ display:block; width:72px; height:auto; }
.cv-note{ margin-top:16px; font-size:12.5px; font-weight:500; line-height:1.8; color:#FFE9EA; }
@media screen and (max-width:480px){
  .cv-note br{ display:none; }
}
.apo-cv{ width:150px; top:-58px; left:14px; transform:rotate(-5deg); }   /* 大: 給油 */

/* ---------- 対象店舗一覧 ---------- */
.stores{ padding-bottom:64px; }
.area-title{
  display:flex; align-items:center; gap:12px;
  font-weight:900; font-size:16px; color:var(--ink); letter-spacing:.06em;
  margin: 34px 0 14px;
}
.area-title::before{ content:""; flex:none; width:5px; height:20px; background:var(--red); transform:skewX(-14deg);
  box-shadow:7px 0 0 -2px var(--yellow); }
.area-title::after{ content:""; flex:1 1 auto; height:2px; background:linear-gradient(90deg, var(--line), transparent); }
.store-list{ display:flex; flex-direction:column; gap:16px; }
.store-card{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:18px 16px;
  box-shadow: var(--shadow-sm);
}
.store-name{
  font-weight:900; font-size:15.5px; margin-bottom:8px; color:var(--ink); line-height:1.5;
  padding-left:12px; border-left:4px solid var(--red);
}
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.tag{ font-size:11px; font-weight:700; padding:2px 10px; border-radius:3px; border:1px solid; line-height:1.6; }
.tag.self{   color:var(--red); border-color:var(--red); background:#FDEDEE; }
.tag.shaken{ color:#1E5FA8; border-color:#1E5FA8; background:#EAF2FB; }
.tag.care{   color:#0B7C6B; border-color:#0B7C6B; background:#E8F6F3; }
.tag.wash{   color:#8A7F82; border-color:#B9AEB1; background:#F6F3F4; }
.tag.panel{  color:#9A6B00; border-color:#C99B00; background:#FFF7E0; }
.tag.rental{ color:#43393B; border-color:#C99B00; background:var(--yellow); }
.store-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; }
.store-media{ flex:0 0 54%; max-width:198px; }
.store-photo{ border-radius:6px; overflow:hidden; }
.store-photo img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.store-body{ flex:1 1 auto; min-width:0; }
/* SP: 画像とテキストを横並びにすると列が狭すぎて営業時間・電話番号が詰まって折り返るため、縦積みに変更 */
@media screen and (max-width:480px){
  .store-row{ flex-direction:column; }
  .store-media{ flex:none; width:150px; max-width:150px; margin-bottom:4px; }
  .store-body{ width:100%; }
}
.store-addr{ font-size:12.5px; border-bottom:1px dashed var(--line); padding-bottom:7px; margin-bottom:6px; }
.store-table{ width:100%; border-collapse:collapse; font-size:12px; }
.store-table th{ text-align:left; font-weight:500; color:var(--ink-sub); padding:5px 0; width:42%; vertical-align:top; }
.store-table td{ text-align:left; font-weight:700; padding:5px 0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.store-table tr + tr th, .store-table tr + tr td{ border-top:1px dashed var(--line); }
.rental-link{ display:block; text-align:right; font-size:12px; color:#1E5FA8; font-weight:700; text-decoration:underline; margin-top:6px; }
.map-btn-wrap{ text-align:center; margin-top:14px; }
.map-btn{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 26px;
  background:#fff; color:var(--ink); font-weight:700; font-size:13px; letter-spacing:.04em;
  text-decoration:none; border:1px solid #D8CDCF; border-radius:4px; font-family:inherit; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.map-btn::after{ content:""; width:6px; height:6px; border-top:2px solid var(--red); border-right:2px solid var(--red); transform:rotate(45deg); }
.map-btn:hover{ border-color:var(--red); color:var(--red); }

/* ---------- モーダル ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(67,57,59,.5); z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-panel{
  width:100%; max-width:600px; background:#fff; color:var(--ink);
  border-radius:14px 14px 0 0;
  padding:20px 20px calc(18px + env(safe-area-inset-bottom)); max-height:86vh; overflow-y:auto;
  transform:translateY(16px); transition:transform .25s ease;
}
.modal-overlay.open .modal-panel{ transform:translateY(0); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.modal-title{ font-weight:900; font-size:16px; color:var(--ink);
  padding-left:10px; border-left:4px solid var(--red); }
.modal-close{
  flex:none; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:var(--red-pale); color:var(--ink-sub); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.modal-body p{ font-size:13.5px; margin-bottom:4px; }
.modal-body p:first-child{ font-weight:700; font-size:15px; }
.modal-map{ width:100%; aspect-ratio:4/3; border:0; border-radius:8px; margin-top:12px; display:block; }
.modal-ext-link{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:700; color:#1E5FA8; text-decoration:underline; }
.modal-app-badges{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:16px; }
.modal-app-badges img{ height:48px; width:auto; }
.modal-app-qr{ overflow:hidden; border-radius:6px; box-shadow:0 3px 6px rgba(0,0,0,.15); }
.modal-app-qr img{ width:120px; height:auto; }

/* QRはSP閲覧時は非表示（クライアント指示 2026-08-03: スマホでは隠す）。案内文もQRなし文面に可変 */
.sp-only{ display:none; }
@media screen and (max-width:640px){
  .cv-qr, .modal-app-qr{ display:none; }
  .pc-only{ display:none; }
  .sp-only{ display:inline; }
}

/* ---------- フッター ---------- */
footer{
  position:relative;
  background:var(--red); color:#FFE9EA; text-align:center;
  padding:34px 20px 30px; margin-top:0;
}
footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:8px;
  background:repeating-linear-gradient(115deg, var(--yellow) 0 18px, transparent 18px 34px);
}
.footer-logos{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:14px; }
.footer-logos img{ height:20px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
footer p{ font-size:11.5px; letter-spacing:.06em; }

/* ---------- フッター固定CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:3px solid var(--yellow); box-shadow:0 -6px 18px rgba(184,4,15,.12);
  padding: 10px max(16px, calc((100% - 620px)/2)) calc(10px + env(safe-area-inset-bottom));
}
.sticky-cta-inner{
  max-width:620px; margin:0 auto; display:flex; align-items:center; gap:12px;
}
.sticky-cta-txt{ flex:1 1 auto; min-width:0; }
.sticky-cta-txt .l1{ font-size:11px; font-weight:700; color:var(--red); letter-spacing:.08em; white-space:nowrap; }
.sticky-cta-txt .l1 b{ font-family:var(--font-en); font-style:italic; letter-spacing:.1em; }
.sticky-cta-txt .l2{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media screen and (max-width:400px){
  .sticky-cta-txt .l2{ font-size:11.5px; }
  .sticky-cta .btn-primary{ padding:0 16px; font-size:12.5px; }
}
.sticky-cta .btn-primary{ flex:none; height:44px; padding:0 24px; font-size:13.5px; }
body{ padding-bottom: 88px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}