@charset "UTF-8";
/* =========================================================
   Tokens（Figma: ホンダ成約キャンペーン PC0909_01 / SP0909_01）
   ========================================================= */
:root{
  --red:#e20012;          /* 英字ラベル・番号 */
  --red-link:#df0212;     /* リンク・スクロールバー */
  --red-honda:#e00923;
  --ink:#333333;
  --ink-sub:#666666;
  --black:#000000;
  --black-100:#222222;
  --bg:#f9f3ed;           /* ページ背景 */
  --bg-cta:#ece6df;       /* 応募CTAボックス */
  --bg-banner:#f6f4f3;    /* 特集バナー */
  --line:#d9d9d9;
  --white:#ffffff;

  --font-go:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  --font-min:"Toppan Bunkyu Mincho","Hiragino Mincho ProN","Noto Serif JP","Yu Mincho",serif;
  --font-din:"DIN 2014","din-2014","Barlow Semi Condensed","Arial Narrow",sans-serif;
  --font-zen:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN",sans-serif;
  --wrap:960px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-go);font-size:14px;line-height:1.5}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
.wrap{width:100%;max-width:calc(var(--wrap) + 32px);margin-inline:auto;padding-inline:16px}
.sp-only{display:none}
@media (max-width:767px){
  .pc-only{display:none}
  .sp-only{display:revert}
}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- 見出し（英字ラベル + 和文） ---------- */
.ttl{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ttl__en{font-family:var(--font-din);font-weight:600;font-size:14px;line-height:1;letter-spacing:.04em;color:var(--red)}
.ttl__ja{font-weight:700;font-size:32px;line-height:1.5;color:var(--ink);text-wrap:balance}
@media (max-width:767px){
  .ttl__ja{font-size:22px}
}

/* ---------- ボタン（黒） ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:8px 4px 8px 0;border-radius:4px;
  background:var(--black);color:var(--white);text-decoration:none;
  font-weight:700;font-size:14px;line-height:1;white-space:nowrap;
  transition:opacity .15s;
}
.btn:hover{opacity:.8}
.btn img{width:20px;height:20px;flex:none}

/* =========================================================
   MV
   ========================================================= */
.mv{background:none}
.mv__inner{width:100%}
.mv img{display:block;width:100%;height:auto}
/* 画面幅いっぱいに拡大表示するため、PC用は2560px幅（@2x）以上での書き出しを推奨 */

/* =========================================================
   ENTRY（キャンペーン応募はこちら）
   ========================================================= */
.flow{padding-top:42px}
.flow__card{background:var(--white);padding:42px 16px 64px;display:flex;flex-direction:column;align-items:center;gap:40px}
.apply{display:flex;flex-direction:column;gap:16px;width:100%;max-width:500px}
.apply__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.apply__lead{font-weight:700;font-size:16px;line-height:1.6;color:var(--ink)}
.apply .btn{flex:none;width:186px}
.apply__notes{font-size:12px;line-height:1.6;color:var(--ink)}
.flow__search{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.flow__search p{font-size:14px;line-height:1.5;color:var(--ink)}
.flow__search .btn{width:186px}

@media (max-width:767px){
  .flow{padding-top:34px}
  .flow__card{padding:29px 34px 32px;gap:40px}
  .flow .ttl__ja{font-size:22px}
  .apply{gap:20px;max-width:none}
  .apply__row{flex-direction:column;align-items:stretch;gap:12px}
  .apply .btn{width:100%}
  .apply__notes{line-height:1.5}
  .flow__search{flex-direction:column;gap:8px;margin-top:36px}
  .flow__search .btn{width:calc(100% - 68px)}
}

/* =========================================================
   LINEUP（ギフトカタログから選べるお宿）
   ========================================================= */
.lineup{padding-top:58px}
.lineup .ttl{margin-bottom:20px}
.inn{display:grid;grid-template-columns:repeat(5,1fr);max-width:965px;margin-inline:auto}
.inn__item{display:flex;flex-direction:column;align-items:center;gap:7px;padding-inline:4px}
.inn__img{width:100%;max-width:184px;aspect-ratio:184/143;object-fit:cover;background:#ddd}
.inn__name{font-size:14px;line-height:1.5;text-align:center}
.inn__item--clone{display:none}
@keyframes inn-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){
  .inn__item--clone{display:flex}
}
.lineup__more{margin:16px auto 0;max-width:851px}
.lineup__more img{display:block;width:100%;height:auto}

@media (max-width:767px){
  .lineup{padding-top:51px}
  .lineup .ttl{margin-bottom:26px}
  /* 横に流れるループアニメーション（JSで複製した2セット目と合わせて -50% 移動） */
  .inn-viewport{overflow:hidden;margin-inline:-16px}
  .inn{display:flex;width:max-content;max-width:none;animation:inn-loop 30s linear infinite}
  .inn-viewport:hover .inn,
  .inn-viewport:active .inn{animation-play-state:paused}
  .inn__item{flex:0 0 143.6px;padding-inline:3px}
  .inn__img{max-width:137px;aspect-ratio:137/106.4}
  .lineup__more{margin-top:24px;max-width:266px}
}

/* =========================================================
   RULE（キャンペーン応募規約）
   ========================================================= */
.rule{padding-top:75px}
.rule .ttl{margin-bottom:32px}
.rule__frame{position:relative;background:var(--white);border-radius:4px;overflow:hidden}
.rule__frame::after{ /* 下端フェード */
  content:"";position:absolute;left:0;right:0;bottom:0;height:50px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),#fff);
}
.rule__box{
  height:320px;overflow-y:auto;padding:24px 40px 48px;
  scrollbar-width:thin;scrollbar-color:var(--red-link) transparent;
}
.rule__box::-webkit-scrollbar{width:4px}
.rule__box::-webkit-scrollbar-track{background:transparent;margin-block:24px}
.rule__box::-webkit-scrollbar-thumb{background:var(--red-link);border-radius:100px}
.rule__title{font-weight:700;font-size:16px;line-height:1.5;color:#000;margin-bottom:24px}
.rule__body{display:flex;flex-direction:column;gap:20px;font-size:14px;line-height:1.5;color:#000}
.rule__sec{display:flex;flex-direction:column;gap:2px}
.rule__sec ul{list-style:disc;padding-left:21px}
.rule__sec h4{margin:6px 0 0;font-size:14px;font-weight:700}
.rule__sec a{color:var(--red-link);word-break:break-all}

@media (max-width:767px){
  .rule{padding-top:64px}
  .rule .ttl{gap:6px;margin-bottom:24px}
  .rule .ttl__en{font-size:12px}
  .rule .ttl__ja{font-size:28px}
  .rule__box{height:512px;padding:24px 16px 48px}
}

/* =========================================================
   SHARE
   ========================================================= */
.share{padding-top:32px;display:flex;justify-content:center}
.share__link{display:inline-flex;align-items:center;gap:27px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.06em;color:#000}
.share__link img{width:27px;height:28px}
.share__link:hover{opacity:.7}
@media (max-width:767px){
  .share{padding-top:48px}
  .share__link{flex-direction:column;gap:14px}
}

/* =========================================================
   応募CTAボックス
   ========================================================= */
.entry{padding-top:32px}
.entry__box{
  background:var(--bg-cta);padding:16px 26px 16px 44px;
  display:grid;grid-template-columns:auto 1fr 1px 1fr;align-items:center;column-gap:0;
}
.entry__visual{display:flex;align-items:center;gap:16px;margin-right:12px}
.entry__photo{width:160px;height:120px;object-fit:cover;background:#ccc}
.entry__title{width:137px}
.entry__col{display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:24px}
.entry__col p{font-size:14px;line-height:1.5;text-align:center}
.entry__col .btn{width:100%;max-width:224px}
.entry__divider{background:#c9c1b8;height:115px}

@media (max-width:1000px) and (min-width:768px){
  .entry__box{grid-template-columns:1fr 1px 1fr;row-gap:16px;padding:20px}
  .entry__visual{grid-column:1 / -1;justify-content:center;margin-right:0}
}
@media (max-width:767px){
  .entry{padding-top:24px}
  .entry__box{display:flex;flex-direction:column;align-items:stretch;padding:24px 16px 34px}
  .entry__visual{justify-content:center;gap:16px;margin:0 0 20px}
  .entry__photo{width:152px;height:114px}
  .entry__divider{height:1px;width:100%;margin-bottom:0}
  .entry__col{padding:0 18px;gap:6px}
  .entry__col + .entry__divider{display:none}
  .entry__col .btn{max-width:none}
  .entry__col--search{padding-top:16px;margin-bottom:24px}
}

/* =========================================================
   特集バナー（画像）
   ========================================================= */
.banner{padding-block:24px 48px}
.banner__link{display:block;max-width:960px;margin-inline:auto;transition:opacity .15s}
.banner__link:hover{opacity:.85}
.banner__link img{display:block;width:100%;height:auto}
@media (max-width:767px){
  .banner{padding-block:23px 0}
  .banner__link{max-width:343px}
}

/* =========================================================
   Footer
   ========================================================= */
.footer{margin-top:0;background:var(--white)}
.footer__inner{width:100%}
.footer__logo{display:flex;justify-content:center;padding-top:22px}
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;padding:18px 16px 20px;font-size:11px}
.footer__nav li:not(:last-child)::after{content:"";display:inline-block;width:1px;height:12px;background:#bbb;margin-inline:9px;vertical-align:-2px}
.footer__nav a{text-decoration:none;color:#333}
.footer__nav a:hover{text-decoration:underline}
.footer__copy{background:#333;color:#fff;text-align:center;font-size:10px;padding:8px 16px;letter-spacing:.02em}
@media (max-width:767px){
  .footer{margin-top:40px}
  .footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;border-top:1px solid #ddd;font-size:12px}
  .footer__nav li{border-bottom:1px solid #ddd}
  .footer__nav li:nth-child(odd){border-right:1px solid #ddd}
  .footer__nav li::after{display:none!important}
  .footer__nav a{display:block;padding:12px 14px}
  .footer__logo{order:2;padding:18px 0 14px}
  .footer__inner{display:flex;flex-direction:column}
  .footer__copy{order:3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  /* 動きを減らす設定の端末では、アニメーションせず手動の横スクロールにする */
  .inn-viewport{overflow-x:auto}
  .inn{animation:none;padding-inline:16px}
  .inn__item--clone{display:none}
}