@charset "UTF-8";

:root {
  --header-height: 57px;
  --main-width: 640px;
  --color-red: #e72e35;
  --color-text: #000;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }

html {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-text);
  background: #f8f8f8;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100%; overflow-x: hidden; line-height: 1.7; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.c-text-link__icon { display: inline-block; width: 6px; height: 10px; margin-left: 4px; margin-right: 8px; vertical-align: 0; }
.u-sp-only { display: none; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 12px;
  padding: 8px 14px;
  border: 2px solid var(--color-red);
  border-radius: 4px;
  background: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.l-header {
  position: relative;
  z-index: 50;
  height: var(--header-height);
  border-bottom: 1px solid #bababa;
  background: #fff;
}

.l-header__inner {
  display: flex;
  width: min(100%, 1100px);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  align-items: center;
}
.l-header a { display: inline-flex; align-items: center; }
.header__logo { width: auto; height: 25px; }

.l-stage {
  position: relative;
  z-index: 0;
  min-height: calc(100vh - var(--header-height));
  background: #fafafa;
  overflow-x: hidden; /* fallback */
  overflow-x: clip; /* KVの装飾画像のはみ出しによる横スクロール対策 */
}

.l-stage__background {
  position: fixed;
  z-index: 0;
  right: 0;
  bottom: 3%;
  left: 0;
  height: clamp(260px, 27vw, 520px);
  overflow: hidden;
  background: url("../img/illust.png") no-repeat center bottom / 100vw auto;
  pointer-events: none;
}

.l-stage__sun {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  width: clamp(110px, 12vw, 192px);
  aspect-ratio: 1;
  overflow: hidden;
  background: url("../img/illust.png") no-repeat right top / 1133.333% auto;
  pointer-events: none;
}

.l-main {
  position: relative;
  z-index: 2;
  width: min(100%, var(--main-width));
  margin: 80px auto 0;
  background: transparent;
  padding-bottom: 80px;
}
.l-main__inner { position: relative; min-height: 100%; background: #fff;border-radius: 40px; 
  border: solid 1px #ddd; }

.l-side {
  position: fixed;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
}
.l-side--left { right: calc(50% + 427px); width: 216px; }
.l-side--right { left: calc(50% + 425px); width: 289px; }
.l-side a { display: block; }
.l-side--right img { transition: transform .15s ease, filter .15s ease; }
.l-side--right a:active img { transform: translateY(3px); filter: brightness(.97); }
@media (hover: hover) {
  .l-side--right a:hover img { transform: translateY(2px); filter: brightness(1.06) drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
  .l-side--right a:active img { transform: translateY(3px); }
}
.l-side a:focus-visible { outline: 3px solid #1769d2; outline-offset: 5px; }

.c-brand-logo {
  display: flex;
  margin: 0;
  padding: 20px 0 107px;
  align-items: center;
  justify-content: center;
  border-radius: 20px 20px 0 0;
}
.c-brand-logo img { width: 244px; height: 43px; }

.c-kv-overlays {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 640 / 563;
  pointer-events: none;
}
.c-kv-overlays img {
  position: absolute;
  height: auto;
  max-width: none;
}
.c-kv-overlays__logo { top: 10.393%; left: -3.438%; width: 107.656%; }
.c-kv-overlays__sandwich { top: 35.670%; left: -6.566%; width: 23.060%; }
.c-kv-overlays__cap { top: 37.160%; left: 85.936%; width: 18.749%; }
.c-kv-overlays__bag { top: 60.939%; left: 81.873%; width: 19.769%; }
.c-kv-overlays__coffee { top: 55.778%; left: 7.111%; width: 12.947%; }
.c-kv-overlays__shopping { top: 73.890%; left: -6.602%; width: 21.471%; }

.c-kv {
  width: calc(100% - 41px);
  margin: 0 auto;
  overflow: hidden;
}
.c-kv img { width: 100%; }

.c-period {
  position: relative;
  padding: 13px 18px 14px;
  color: #fff;
  background: var(--color-red);
  text-align: center;
}
.c-period__product {
  position: absolute;
  z-index: 2;
  top: -114px;
  right: 32px;
  width: 95px;
  height: auto;
  pointer-events: none;
}
.c-period p { margin: 0; }
.c-period__label {
  width: 214px;
  margin: 0 auto 3px !important;
  border-radius: 999px;
  color: var(--color-red);
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 43px;
}
.c-period__date {
  font-size: 27px;
  font-weight: 900;
  line-height: 1.55;
  white-space: nowrap;
}
.c-period__date strong { font-size: 37px; }
.c-period__note { font-size: 12px; font-weight: 500; }

.c-intro { padding: 40px 21px; background: #fff; }
.c-intro p { margin: 0; font-size: 18px; }
.c-intro p + p { margin-top: 32px; }
.c-intro b { color: var(--color-red); font-weight: 700; }

.c-section-title {
  position: relative;
  width: calc(100% - 42px);
  margin: 0 auto;
  padding: 23px 20px 25px;
  border-radius: 10px 10px 0 0;
  color: #fff;
  text-align: center;
}
.c-section-title--orange { background: #ff8000; }
.c-section-title--red { background: var(--color-red); }
.c-section-title h2 { margin: 0; font-size: 32px; line-height: 1.6; }
.c-section-title span { display: block; margin-top: -5px; font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .5; }

.c-campaign__body { padding: 40px 20px 20px; border-top: 10px solid #ff8000; background: #fff3d5; }
.c-campaign-card { position: relative; padding: 20px; border-radius: 20px; background: #fff; }
.c-campaign-card h3 { margin: 0 0 6px 30px; color: #ff7100; font-size: 28px; line-height: 1.4; letter-spacing: .02em; }
.c-campaign-card__caption { margin: 0 0 18px 30px; color: #ff7100; font-size: 12px; letter-spacing: -0.7px }
.c-number { position: absolute; top: -9px; left: -42px; width: 83px; height: 83px; max-width: none; }
.c-campaign-detail { padding: 20px 0 4px; border-top: 1px solid #ff8000; }
.c-campaign-detail + .c-campaign-detail { border-top: 0; }
.c-campaign-detail h4 { display: inline-block; min-width: 92px; margin: 0 0 10px; padding: 1px 12px; border-radius: 999px; color: #fff; background: #ff8000; font-size: 18px; line-height: 1.6; text-align: center; }
.c-campaign-detail p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.c-campaign-detail strong { font-size: 18px; }
.c-small { font-size: 14px !important; line-height: 1.6; }
.c-entry-button { position: relative; display: flex; width: 100%; height: 85px; margin: 39px 0; border-radius: 12px; box-shadow: 0 5px 0 rgba(0,0,0,.25); color: #fff; background: linear-gradient(#ef3039 0 50%, #e92730 50%); font-size: 26px; font-weight: 900; letter-spacing: .04em; text-decoration: none; align-items: center; justify-content: center; }
.c-entry-button { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.c-entry-button span { transition: transform .15s ease; }
.c-entry-button:focus-visible { outline: 3px solid #1769d2; outline-offset: 4px; }
.c-entry-button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
@media (hover: hover) {
  .c-entry-button:hover { filter: brightness(1.08); transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
  .c-entry-button:hover span { transform: translateX(4px); }
  .c-entry-button:active { transform: translateY(4px); }
}
.c-entry-button span { position: absolute; right: 18px; font-family: Arial, sans-serif; font-size: 52px; font-weight: 300; line-height: 1; }
.c-campaign-card--spots h3 { min-height:78px; margin-bottom: 0;display: flex;align-items: center; }
.c-spots-lead { margin: 0; padding: 20px 0; border-top: 1px solid #ff8000; font-size: 16px; }
.c-spot-list { padding-top: 1px; }
.c-spot { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid #ddd; }
.c-spot:last-child { border-bottom: 0; }
.c-spot > img { width: 110px; height: 110px; object-fit: cover; }
.c-spot dl, .c-spot dd { margin: 0; }
.c-spot dl { display: flex; min-width: 0; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
.c-spot dl div { display: grid; grid-template-columns: 67px 1fr; gap: 9px; }
.c-spot dt { font-size: 16px; font-weight: 700; white-space: nowrap; }
.c-spot dd { min-width: 0; }
.c-spot .c-spot__location-icon { display: inline-block; width: 19px; height: 19px; margin-left: 4px; object-fit: contain; vertical-align: -4px; }
.c-campaign__note { margin: 15px 0 0; font-size: 12px; }

.c-about { background: #fff3d5; }
.c-about__body { padding: 40px 20px 20px; border-top: 10px solid var(--color-red); background: #fff7f7 url("../img/bg_about.png") repeat center; }
.c-about__lead { padding: 0 0 14px; border-bottom: 1px solid var(--color-red); text-align: center; }
.c-about__lead p { margin: 0 0 12px; font-size: 18px; }
.c-about__lead strong { padding: 0 4px; background: linear-gradient(transparent 58%, #f7b1b3 58%); font-size: 28px; }
.c-voice-map { margin-top: 28px; }
.c-voice-map img { width: 100%; }
.c-product-banner { display: block; margin-top: 20px; text-decoration: none; text-align: center; }
.c-product-banner img { display: inline-block; }
.c-source { margin: 28px 0 0; font-size: 12px; }
.c-about .c-entry-button { margin-bottom: 0; }

.c-information, .c-legal { padding: 20px; border-top: 10px solid var(--color-red); }
.c-text-title { position: relative; margin: 0 0 30px; padding: 10px 0 28px; font-size: 32px; line-height: 1.6; text-align: center; }
.c-text-title::after { position: absolute; bottom: 4px; left: 50%; width: 49px; height: 2px; background: #000; content: ""; transform: translateX(-50%); }
.c-info-block { margin-bottom: 20px; font-size: 16px; }
.c-info-block h3 { margin: 0 0 12px; padding: 9px 12px; background: #e2e2e2; font-size: 18px; line-height: 1.6; }
.c-info-block p { margin: 0 0 10px; }
.c-info-block ul, .c-strong-list, .c-privacy-list { margin: 0; padding-left: 1.3em; }
.c-info-emphasis { font-size: 22px; font-weight: 700; line-height: 1.6; }
.c-center { text-align: center; }
.c-contact, .c-contact dd { margin: 0; }
.c-contact div { display: grid; grid-template-columns: 90px 1fr; }
.c-information .c-entry-button { margin-bottom: 0; }
.c-legal { border-top-width: 1px; border-top-color: #bababa; padding-bottom: 40px; }
.c-legal__lead { margin: -4px 0 20px; color: var(--color-red); font-size: 22px; font-weight: 700; text-align: center; }
.c-terms { height: 296px; overflow-y: auto; padding: 20px 20px 20px 20px; border: 1px solid #ddd; border-radius: 20px; font-size: 16px; line-height: 1.6; -webkit-overflow-scrolling: touch; }
/* iOS Safariは ::-webkit-scrollbar を無視するため、main.js が独自バー(.c-terms-bar)を描画する */
.c-terms-wrap { position: relative; }
.c-terms-wrap.is-custom .c-terms { padding-right: 28px; scrollbar-width: none; }
.c-terms-wrap.is-custom .c-terms::-webkit-scrollbar { display: none; }
.c-terms-bar { position: absolute; z-index: 1; top: 14px; right: 8px; bottom: 14px; width: 6px; border-radius: 3px; background: #f0f0f0; pointer-events: none; }
.c-terms-bar__thumb { width: 100%; border-radius: 3px; background: #bdbdbd; }
.c-terms p { margin-top: 0; }
.c-terms p strong, .c-terms li strong { font-weight: 400; }
.c-terms h3, .c-terms h4 { font-weight: 700; }
.c-red { color: var(--color-red); }
.c-strong-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; font-size: 20px; font-weight: 700; }
.c-privacy-list { display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.c-legal .c-entry-button { margin-bottom: 0; }

@media (min-width: 1201px) and (max-width: 1530px) {
  .l-side--left {
    right: calc(50% + 31.2vw - 51px);
    width: 14.118vw;
  }

  .l-side--right {
    left: calc(50% + 31.2vw - 51px);
    width: 18.89vw;
  }
}

@media (min-width: 641px) and (max-width: 1200px) {
  .l-main { width: 50vw;}

  .l-side--left {
    right: calc(50% + 27vw);
    width: 14.118vw;
  }

  .l-side--right {
    left: calc(50% + 27vw);
    width: 18.89vw;
  }

  .c-brand-logo {
    padding: 1.667vw 0 8vw;
  }
  .c-brand-logo img {
    width: 20.333vw;
    height: auto;
  }

  .c-kv { width: calc(100% - 3.417vw); }
  .c-period { padding: 1.083vw 1.5vw 1.167vw; }
  .c-period__product { top: -9.5vw; right: 2.667vw; width: 7.917vw; }
  .c-period__label {
    width: 17.833vw;
    font-size: 1.5vw;
    line-height: 3.583vw;
  }
  .c-period__date { font-size: 2.25vw; }
  .c-period__date strong { font-size: 3.083vw; }
  .c-period__note { font-size: 1vw; }
  .c-intro { padding: 3.333vw 1.75vw; }
  .c-intro p { font-size: 1.5vw; }
}

@media (max-width: 640px) {
  .u-sp-only { display: inline; }
  :root { --header-height: 46px; }
  .l-header__inner { padding: 0 12px; }
  .header__logo { height: 18px; }
  .l-side { display: none; }
  .l-stage__background, .l-stage__sun { display: none; }
  .l-main { width: 94vw;margin: 8vw auto 0; padding-bottom: 8vw; }
  .l-main__inner{border-radius: 20px;}
  .c-brand-logo {
    padding: 14px 0 13.5vw;
    border-radius: 0;
  }
  .c-brand-logo img { width: min(40vw, 244px); height: auto; }
  .c-kv { width: 100%; margin-top: 0; }
  .c-period { padding-right: 10px; padding-left: 10px; }
  .c-period__product { top: -17.86vw; right: 5vw; width: 14.88vw; }
  .c-period__label { width: 44vw; font-size: 3.8vw; line-height: 9vw; }
  .c-period__date { font-size: 4vw; }
  .c-period__date strong { font-size: 6vw; }
  .c-period__note { font-size: 2.3vw; }
  .c-intro { padding: 28px 16px; }
  .c-intro p { font-size: 4vw; }
  .c-intro p + p { margin-top: 24px; }

  .c-section-title { width: calc(100% - 28px); padding: 18px 12px 20px; }
  .c-section-title h2 { font-size: 6vw; }
  .c-section-title span { margin-top: -2px; font-size: 2.6vw; }
  .c-campaign__body, .c-about__body { padding: 28px 14px 18px; }
  .c-campaign-card { padding: 18px 14px; }
  .c-campaign-card h3 { margin-left: 18px; border-bottom-width: 4px; font-size: 5.5vw; }
  .c-campaign-card__caption { margin-left: 18px; font-size: 2.7vw; }
  .c-number { left: -25px; width: 51px; height: 51px; }
  .c-campaign-detail h4 { font-size: 4vw; }
  .c-campaign-detail p, .c-spots-lead { font-size: 3.8vw; }
  .c-campaign-detail strong { font-size: 4.2vw; }
  .c-entry-button { height: 66px; margin: 28px 0; font-size: 5.5vw; }
  .c-entry-button span { font-size: 40px; }
  .c-spot { grid-template-columns: 1fr; gap: 12px; }
  .c-spot > img { width: 100%; height: auto; max-height: 210px; object-fit: cover; }
  .c-spot .c-spot__location-icon { width: min(4.5vw, 19px); height: auto; margin-left: 3px; vertical-align: -3px; }
  .c-spot dl { font-size: 3.4vw; }
  .c-spot dt { font-size: 3.8vw; }
  .c-spot dl div { grid-template-columns: 17vw 1fr; gap: 6px; }
  .c-campaign__note { font-size: 2.7vw; }

  .c-about__lead p { font-size: 3.7vw; }
  .c-about__lead br { display: none; }
  .c-about__lead strong { font-size: 5.5vw; }
  .c-voice-map { margin-top: 18px; }
  .c-product-banner { margin-top: 14px; }
  .c-source { font-size: 2.7vw; }

  .c-information, .c-legal { padding: 18px 14px 28px; }
  .c-text-title { font-size: 5.5vw; }
  .c-info-block { font-size: 3.7vw; }
  .c-info-block h3 { font-size: 4.1vw; }
  .c-info-emphasis { font-size: 4.7vw; }
  .c-contact div { grid-template-columns: 21vw 1fr; }
  .c-legal__lead { font-size: 4.5vw; }
  .c-terms, .c-privacy-list { font-size: 3.7vw; }
  .c-strong-list { font-size: 4.2vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}