@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700&display=swap");
/* =====================================
Summer Sale 2025 Styles
- Mobile-first, same layout on desktop
- Modern media queries with comparison operators
- Accessible, semantic helpers
===================================== */

/* Root and resets */
:root {
  --bg: #ffffff;
  --fg: #222222; /* slate-900 */
  --muted: #222222; /* slate-600 */
  --brand: #0ea5e9; /* sky-500 */
  --brand-fg: #ffffff;
  --border: #e2e8f0; /* slate-200 */
  --color-pink: #f44669;
  --color-red: #ff0000;

  --container-max: 750px; /* FigmaのSP幅に合わせて固定 */
  --radius: 12px;

  --step--1: clamp(0.78rem, 0.75rem + 0.2vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --step-1: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --step-2: clamp(1.35rem, 1.4rem + 2vw, 2.8rem);
  --step-3: clamp(1.6rem, 1.4rem + 1.4vw, 2.6rem);
}

* {
  box-sizing: border-box;
}

#summersale2025 {
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: var(--bg);
  line-height: 1.75;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  /* Fixed bottom timer overlap prevention */
  padding-bottom: clamp(56px, 12vw, 96px);

  & p:not(.special-note) {
    margin-block: 6% !important;
    font-size: var(--step-2) !important;
    line-height: 1.75 !important;
  }
}

#summersale2025 img,
#summersale2025 picture,
#summersale2025 svg,
#summersale2025 video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Utilities */
#summersale2025 .container {
  inline-size: min(100%, var(--container-max));
  margin-inline: auto;
  /* padding-inline: 16px; */
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#summersale2025 .section__title {
  font-size: var(--step-2);
  font-weight: 700;
  margin-block: 5%;
  text-align: center;

  & > span.coupon_present {
    font-size: clamp(48px, 6vw, 100px);
  }

  & > span.small {
    font-size: clamp(1.4rem, 1.4rem + 0.6vw, 2.6rem);
  }
}

#summersale2025 .eyebrow {
  font-size: clamp(1.2rem, 1.6rem + 2vw, 3.8rem) !important;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 0.5rem;
  font-family: "Zen Old Mincho", serif !important;
}

#summersale2025 .special-note {
  font-family: "Noto Sans JP", serif;
  font-size: clamp(1rem, 1rem + 0.8vw, 2rem);
  font-weight: 500;
  text-align: center;
  margin: 1.5rem 0;
}

#summersale2025 .special-note2 {
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 48px) !important;
}

#summersale2025 .special-note3 {
  font-family: "Noto Sans JP", serif;
  font-size: clamp(1.6rem, 1rem + 1.2vw, 2.4rem) !important;
  font-weight: 500;
  text-align: center;
  margin: 1.5rem 0;
}

#summersale2025 .campaign-bottom {
  margin-top: 4rem;
  padding-bottom: 2rem;
}

/* -------------------------------------
   Timesale heading (sub) responsive size
   ------------------------------------- */
#summersale2025 .section.timesale .section__title-sub {
  font-family: "Zen Old Mincho", serif !important;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 48px) !important;
  line-height: 1.2;
}

/* -------------------------------------
   Grid: lineup products (2 cols)
   ------------------------------------- */
#summersale2025 #products.section.lineup .kv-banners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* gap: 12px; */
  padding: 0;
  margin: 0 auto;
}
#summersale2025 #products.section.lineup .kv-banners__item {
  list-style: none;
}
#summersale2025 #products.section.lineup .kv-banners__item img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

#summersale2025 .line {
  border: 2px solid #222222;
  inline-size: 20%;
  margin-inline: auto;
  margin-block: 5%;
}

#summersale2025 a {
  text-decoration: none;
}

/* Buttons */
#summersale2025 .btn {
  text-decoration: none;
  margin-block: 30px;
}

#summersale2025 .btn:hover {
  transform: translateY(-1px);
}
#summersale2025 .btn:active {
  transform: translateY(0);
}
#summersale2025 .btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand), white 50%);
  outline-offset: 2px;
}

#summersale2025 .cta-wrap {
  margin-block-start: 16px;
  display: flex;
  gap: 12px;
}

/* Header */
#summersale2025 .badge-line-1 {
  font-size: 1.6rem;
  line-height: 1.1;
}
#summersale2025 .badge-line-2 {
  font-size: clamp(28px, 12vw, 38px);
  line-height: 1;
  font-weight: 900;
}

/* Countdown Timer */
#summersale2025 .countdown-timer {
  background: linear-gradient(135deg, #fdbb33 0%, #fdbb33 100%);
  /* border-radius: var(--radius); */
  padding: 0;
  /* margin-block: 8px; */
  color: #000;
  font-weight: 700;
  /* min-block-size: 100px; Figma準拠の高さ */
  inline-size: min(100%, var(--container-max));
  margin-inline: auto;
}

/* 下部に固定する */
#summersale2025 .countdown--sticky {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  border-radius: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
  /* Center within viewport and keep same width as other content */
  left: 50%;
  transform: translateX(-50%);
  inline-size: min(100%, var(--container-max));
  padding-bottom: env(safe-area-inset-bottom);
}

#summersale2025 .countdown-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 0.6rem;
  /* 1行固定＆横スクロール許可 */
  flex-wrap: wrap;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* スクロールバーを非表示（必要なら削除） */
#summersale2025 .countdown-content::-webkit-scrollbar {
  display: none;
}
#summersale2025 .countdown-content {
  scrollbar-width: none;
}

/* 子要素を折り返さず縮まないよう固定 */
#summersale2025 .countdown-content > * {
  flex: 0 0 auto;
}

/* バッジは2行表示（サマーセール / 終了まで） */
#summersale2025 .countdown-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  white-space: normal;
}
#summersale2025 .countdown-badge .badge-line-1,
#summersale2025 .countdown-badge .badge-line-2 {
  display: block;
}
#summersale2025 .countdown-badge {
  background: #fff100;
  color: #000;
  padding: 10px 20px;
  /* border-radius: 6px; */
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
}

#summersale2025 .countdown-badge {
  inline-size: auto; /* 自動幅 */
  /* 常に全体の約1/3をキープ */
  flex: 0 0 33.333%;
  max-inline-size: none;
  box-sizing: border-box;
  white-space: normal; /* バッジ内のみ改行を許可（2行表示） */
}

@media (max-width: 750px) {
  #summersale2025 .countdown-badge {
    /* 比率は維持（1/4）。フォント縮小は既存のメディアクエリで対処 */
    flex-basis: 25%;
  }
}

/* 残りスペースはカウントダウン数値群が占有できるようにする */
#summersale2025 .countdown-display {
  /* flex: 1 1 auto; */
  min-inline-size: 0;
}

#summersale2025 .countdown-ato {
  color: #ffffff;
  font-weight: 700;
}

#summersale2025 .countdown-label {
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.2;
}

#summersale2025 .countdown-subtitle {
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.2;
}

#summersale2025 .countdown-display {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 0;
  align-items: baseline; /* 下線を揃える */
  justify-content: center;
  /* 1行固定 */
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* 子要素の折り返し・縮小を防止 */
#summersale2025 .countdown-display > * {
  flex: 0 0 auto;
}
#summersale2025 .countdown-ato {
  flex: 0 0 auto;
  font-size: 1.5rem;
}
#summersale2025 .countdown-icon {
  flex: 0 0 auto;
}

#summersale2025 .countdown-ato,
#summersale2025 .countdown-display {
  padding-block: 10px;
}

#summersale2025 .countdown-icon {
  color: #ffffff;
  border: 2px solid #ffffff;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
  margin-inline-start: auto; /* 右端に寄せる */
  user-select: none;
  margin-inline: 0.4rem;
}

#summersale2025 .countdown-unit {
  display: flex;
  flex-direction: row; /* 数字の右に単位を表示 */
  align-items: baseline;
  gap: 6px;
}

#summersale2025 .countdown-number {
  font-size: 3.8rem;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  min-width: 2rem;
  /* padding-inline: 0.4rem; */
  text-align: center;
}

#summersale2025 .countdown-label-small {
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
}

#summersale2025 .countdown-unit:last-child .countdown-number {
  font-size: 3rem;
  min-width: 30px;
}

#summersale2025 .countdown-unit:last-child .countdown-label-small {
  font-size: 1.8rem;
}

/* Hero */
#summersale2025 .hero {
  padding-block: 0;
}
#summersale2025 .hero__figure {
  margin: 0;
}
#summersale2025 .hero__copy {
  padding-block: 16px 24px;
}
#summersale2025 .hero__title {
  font-size: var(--step-3);
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 900;
  text-align: center;
}
#summersale2025 .hero__lead,
#summersale2025 .newzero__content {
  margin: 0;
  color: var(--fg);
}
#summersale2025 .hero__lead {
  text-align: center;
}
#summersale2025 .newzero__content {
  border: 1px solid var(--color-red);
  padding: 16px;
  text-align: left;
}

/* Highlights (KV banners stacked vertically) */
#summersale2025 .kv-banners {
  list-style: none;
  margin: 0;
  margin-block-start: 10%;
  padding: 0;
  display: grid;
}

#summersale2025 .kv-banners__item img {
  inline-size: 100%;
}

/* Overlay utility: place a badge (e.g., end.png) over an image */
#summersale2025 .img-overlay {
  position: relative;
  display: inline-block;
}
#summersale2025 .img-overlay > img:first-child {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
#summersale2025 .img-overlay__badge {
  position: absolute;
  inset: 0; /* cover entire base image */
  /* translate: 0 0; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*センター寄せの修正*/
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  pointer-events: none; /* do not block clicks on the base image */
}

/* Modifiers: position and size for start/end badges on timesale banners */
#summersale2025 .img-overlay__badge--start {
  /* inset: 0; */ /* full cover */
  inline-size: 100%;
  max-inline-size: 100%;
  z-index: 1; /* under end */
}
#summersale2025 .img-overlay__badge--end {
  /* inset: 0; */ /* full cover */
  inline-size: 100%;
  max-inline-size: 100%;
  z-index: 2; /* above start */
}

/* No special sizing on mobile; overlays always full-cover the base image */

/* State classes: show only the matching badge */
#summersale2025 .is-start .img-overlay__badge--end {
  display: none;
}
#summersale2025 .is-end .img-overlay__badge--start {
  display: none;
}

/* Default: hide both badges when no state class is present */
#summersale2025 .img-overlay:not(.is-start):not(.is-end) .img-overlay__badge {
  display: none;
}

/* Notes */
#summersale2025 .notes__list {
  padding-inline-start: 0;
  color: var(--muted);
  text-align: left;
  list-style-type: none;
  inline-size: fit-content;
  margin-inline: auto;
  margin-block-start: 2rem;
  margin-block-end: 10%;
  font-size: clamp(14px, 0.8rem + 1.4vw, 24px);
  padding-inline: 1%;

  & li {
    text-indent: calc(-1em + -4px);
    padding-inline-start: 1em;
  }
}

#summersale2025 .notes__list li::before {
  content: "※";
  margin-inline-end: 4px;
}

/* Footer */
#summersale2025 .site-footer {
  border-block-start: 1px solid var(--border);
  padding-block: 24px;
  color: var(--muted);
}

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

#summersale2025 #coupon {
  padding-block-start: 50px;

  &::before {
    content: "";
    display: block;
    /* padding-block-start: 50px; */
    margin-block-start: -50px;
  }
}

/* -------------------------------------
   Responsive: Keep same layout on desktop
   - Center column with max-width 750px
   - Slight spacing/typography adjustments
   ------------------------------------- */

@media (width >= 640px) {
  #summersale2025 .section__title {
    font-size: clamp(1.2rem, 1.2rem + 1.2vw, 1.6rem);
  }
  #summersale2025 .hero__title {
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  }
}

@media (width >= 768px) {
  /* PCでも同一デザインを維持。列数だけ最適化 */
}

@media (width >= 1024px) {
}

/* -------------------------------------
   Overrides: Section titles per request
   ------------------------------------- */

#summersale2025 h2.section__title {
  font-family: "Zen Old Mincho", serif !important;
  font-weight: 700;
  font-size: clamp(24px, 8vw, 52px);
  line-height: 1.5;
  letter-spacing: 0%;
  text-align: center;
}

#summersale2025 .section__title-main {
  font-family: "Zen Old Mincho", serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(32px, 9vw, 72px) !important;
  line-height: 1.5;
  letter-spacing: 0%;
  text-align: center;
}

#summersale2025 .pink {
  color: var(--color-pink);
}
#summersale2025 .red {
  color: var(--color-red);
}

/* Promo Title (\ 最大38%OFF!! /, この夏限定の 特別セットが登場) */
#summersale2025 .promo-title-sub {
  font-family: "Zen Old Mincho", serif !important;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 48px) !important;
  line-height: 1.5;
  text-align: center;
}

#summersale2025 .promo-title-main {
  font-family: "Zen Old Mincho", serif !important ;
  font-weight: 700;
  font-size: clamp(36px, 9vw, 76px) !important;
  line-height: 1.5;
  text-align: center;
}

/* -------------------------------------
   Responsive: Countdown compact under 750px
   ------------------------------------- */
@media (max-width: 750px) {
  /* タイマー全体の横内側余白最小化 */
  /* #summersale2025 .countdown-timer {
    padding-inline: 8px;
  } */

  /* 数字と単位の間隔をさらに圧縮 */
  #summersale2025 .countdown-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
  }
  /* ミリ秒はより詰める */
  #summersale2025 .countdown-unit:last-child {
    gap: 1px;
  }

  /* バッジをコンパクトに（2行→横並び化済なのでサイズのみ縮小） */
  #summersale2025 .countdown-badge {
    padding: 2px 6px;
  }
  #summersale2025 .countdown-badge .badge-line-1 {
    font-size: 0.8rem;
  }
  #summersale2025 .countdown-badge .badge-line-2 {
    font-size: 1.2rem;
  }

  /* 「あと」テキストも縮小 */
  #summersale2025 .countdown-ato {
    padding-block: 4px;
  }

  /* 数字・単位の縮小（ミリ秒はさらに小さめ） */
  #summersale2025 .countdown-unit .countdown-number {
    font-size: 2rem;
  }
  #summersale2025 .countdown-unit .countdown-label-small {
    font-size: 1rem;
  }
  #summersale2025 .countdown-unit:last-child .countdown-number {
    font-size: 1.4rem;
  }
  #summersale2025 .countdown-unit:last-child .countdown-label-small {
    font-size: 0.6rem;
  }

  /* 右端アイコンを小さく */
  #summersale2025 .countdown-icon {
    inline-size: 24px;
    block-size: 24px;
    font-size: 12px;
  }
}

#summersale2025 .btn.-shiny,
#summersale2025 .btn .-shiny {
  display: block;
  position: relative;
  overflow: hidden;
}

#summersale2025 .btn.-shiny::before,
#summersale2025 .btn .-shiny::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  inline-size: 100px;
  height: 100%;
  background-color: #fff;
  filter: blur(1px);
  will-change: filter;
  animation: -shiny 2s ease-in-out infinite;
}

@keyframes -shiny {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  40% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  60% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

#summersale2025 .btn.-scale {
  animation: -scale 3.5s ease-in infinite alternate;
  transform-origin: center;
  /* inset-inline-start: 5%; */
}

@keyframes -scale {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0.95);
  }
}

.p-page_content {
  padding: 0 !important;
}

#summersale2025 section {
  margin-bottom: 4% !important;
}