/* =====================================================
   GORE-TEX 50th LP ／ 本文のみ（ヘッダー・フッターは別途）
   PC 最大1200px ／ 390px〜1200px を clamp で連続可変
   ===================================================== */
.gtx-lp {
  /* color */
  --ink: #1a1a1a;
  --sub: #5c5c5c;
  --mute: #6b6b6b;
  --line: #dcdcdc;
  --mist: #f3f3f3;
  --paper: #fff;
  --red: #d6262c;
  /* fluid：390px → 1200px */
  --gut: clamp(20px, calc(20px + 40 * (100vw - 390px) / 810), 60px);
  --sp-l: clamp(56px, calc(56px + 56 * (100vw - 390px) / 810), 112px);
  --sp-m: clamp(32px, calc(32px + 24 * (100vw - 390px) / 810), 56px);
  --fs-note: clamp(12px, calc(12px + 1 * (100vw - 390px) / 810), 13px);
  --fs-sm: clamp(13px, calc(13px + 1 * (100vw - 390px) / 810), 14px);
  --fs-body: clamp(14px, calc(14px + 2 * (100vw - 390px) / 810), 16px);
  --fs-md: clamp(15px, calc(15px + 2 * (100vw - 390px) / 810), 17px);
  --fs-name: clamp(20px, calc(20px + 6 * (100vw - 390px) / 810), 26px);
  --fs-lead: clamp(16px, calc(16px + 8 * (100vw - 390px) / 810), 24px);
  --fs-h2: clamp(22px, calc(22px + 10 * (100vw - 390px) / 810), 32px);
  --fs-h1: clamp(24px, calc(24px + 26 * (100vw - 390px) / 810), 50px);

  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
}

.gtx-lp * {
  box-sizing: border-box
}

.gtx-lp img {
  display: block;
  max-width: 100%;
  height: auto
}

.gtx-lp h1,
.gtx-lp h2,
.gtx-lp h3,
.gtx-lp p,
.gtx-lp dl,
.gtx-lp dd,
.gtx-lp dt,
.gtx-lp ul,
.gtx-lp li {
  margin: 0;
  padding: 0
}

.gtx-lp ul {
  list-style: none
}

.gtx-lp a {
  color: inherit;
  text-underline-offset: .2em
}

.gtx-lp a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px
}

.gtx-lp .jp-tight {
  font-feature-settings: "palt";
  letter-spacing: .01em;
  text-wrap: balance;
  word-break: auto-phrase
}

/* ---------- 画像枠（<div class="gtx-ph"> を <img> に置き換え） ---------- */
.gtx-lp .gtx-fig {
  width: 100%
}

.gtx-lp .gtx-fig>img {
  width: 100%;
  height: auto
}

.gtx-lp .gtx-ph {
  width: 100%;
  aspect-ratio: var(--ar);
  background: #e6e6e6;
  color: #8a8a8a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5
}

.gtx-lp .gtx-ph b {
  font-size: clamp(14px, calc(14px + 6 * (100vw - 390px) / 810), 20px);
  font-weight: 700;
  letter-spacing: .04em
}

.gtx-lp .gtx-ph small {
  font-size: clamp(11px, calc(11px + 2 * (100vw - 390px) / 810), 13px)
}

/* ---------- バッジ・チップ ---------- */
.gtx-lp .gtx-badge {
  display: inline-block;
  padding: 1px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: clamp(11px, calc(11px + 2 * (100vw - 390px) / 810), 13px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  white-space: nowrap
}

.gtx-lp .gtx-badge--2 {
  background: var(--red)
}

.gtx-lp .gtx-chip {
  display: inline-block;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-note);
  font-weight: 500;
  line-height: 1.7;
  color: var(--sub);
  white-space: nowrap
}

/* ---------- タイトル ---------- */
.gtx-lp .gtx-title {
  padding: var(--sp-l) var(--gut) 0;
  text-align: center
}

.gtx-lp .gtx-title .en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  font-size: clamp(11px, calc(11px + 5 * (100vw - 390px) / 810), 16px);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4
}

.gtx-lp .gtx-title .en::before,
.gtx-lp .gtx-title .en::after {
  content: "";
  flex: 1 1 0;
  max-width: 120px;
  height: 1px;
  background: var(--ink)
}

.gtx-lp .gtx-title h1 {
  margin-top: clamp(12px, 2vw, 20px);
  font-size: var(--fs-h1);
  line-height: 1.3;
  font-weight: 900
}

.gtx-lp .gtx-lead {
  margin-top: var(--sp-m);
  font-size: var(--fs-lead);
  line-height: 1.75;
  font-weight: 700
}

.gtx-lp .gtx-lead span {
  display: block
}

/* ---------- プレゼント全体ビジュアル（正方形） ---------- */
.gtx-lp .gtx-visual {
  max-width: calc(800px + 2 * var(--gut));
  margin: var(--sp-m) auto 0;
  padding: 0 var(--gut)
}

/* ---------- プレゼントカード ---------- */
.gtx-lp .gtx-gifts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  margin: var(--sp-m) var(--gut) 0
}

.gtx-lp .gtx-gift {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px
}

.gtx-lp .gtx-gift .gtx-fig {
  border-radius: 6px;
  overflow: hidden
}

.gtx-lp .gtx-gift .tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px
}

.gtx-lp .gtx-gift .name {
  margin-top: 8px;
  font-size: var(--fs-name);
  font-weight: 900;
  line-height: 1.4
}

.gtx-lp .gtx-gift .spec {
  margin-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.7
}

.gtx-lp .gtx-gift .spec div {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line)
}

.gtx-lp .gtx-gift .spec dt {
  font-weight: 700
}

.gtx-lp .gtx-gift .spec dd {
  color: var(--sub)
}

.gtx-lp .gtx-gift .how {
  margin-top: clamp(14px, 2vw, 20px);
  font-size: var(--fs-md);
  line-height: 1.9;
  font-weight: 500;
  word-break: auto-phrase;
  text-wrap: pretty
}

.gtx-lp .gtx-gift .how em {
  font-style: normal;
  font-weight: 900;
  color: var(--red)
}

.gtx-lp .gtx-note {
  margin: clamp(24px, 3vw, 36px) var(--gut) 0;
  font-size: var(--fs-note);
  line-height: 1.8;
  color: var(--mute)
}

.gtx-lp .gtx-note li {
  padding-left: 1em;
  text-indent: -1em
}

/* ---------- 詳細 ---------- */
.gtx-lp .gtx-detail {
  margin-top: var(--sp-l);
  padding: var(--sp-l) var(--gut)
}

.gtx-lp .gtx-detail {
  background: var(--mist)
}

.gtx-lp .gtx-detail>h2 {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.4;
  text-align: center
}

.gtx-lp .gtx-dl {
  margin-top: var(--sp-m);
  padding: 0 clamp(20px, 4vw, 48px);
  background: var(--paper);
  border-radius: 12px
}

.gtx-lp .gtx-row {
  display: grid;
  grid-template-columns: clamp(160px, 20vw, 232px) 1fr;
  column-gap: 24px;
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line)
}

.gtx-lp .gtx-row:last-child {
  border-bottom: 0
}

.gtx-lp .gtx-row dt {
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 1.7
}

.gtx-lp .gtx-row dd {
  font-size: var(--fs-body)
}

.gtx-lp .nw {
  display: inline-block;
  white-space: nowrap
}

.gtx-lp .gtx-row dd .period {
  font-size: var(--fs-name);
  font-weight: 700;
  line-height: 1.5
}

@media (max-width:768px) {
  .gtx-lp .gtx-row dd .period {
    white-space: nowrap;
    letter-spacing: 0;
    font-size: min(var(--fs-name), calc((100vw - 2 * var(--gut) - 2 * clamp(20px, 4vw, 48px)) / 21.5))
  }
}

.gtx-lp .gtx-store-lead {
  font-size: var(--fs-md);
  font-weight: 900
}

.gtx-lp .gtx-exclude {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--mist);
  border-radius: 8px;
  font-size: var(--fs-sm)
}

.gtx-lp .gtx-exclude .gtx-chip {
  border-color: transparent;
  background: var(--paper);
  color: var(--red);
  font-weight: 700
}

.gtx-lp .gtx-stores {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 32px 24px;
  align-items: start;
  margin-top: 28px
}

.gtx-lp .gtx-region:nth-child(1) {
  grid-column: 1;
  grid-row: 1
}

.gtx-lp .gtx-region:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 3
}

.gtx-lp .gtx-region:nth-child(3) {
  grid-column: 3;
  grid-row: 1
}

.gtx-lp .gtx-region:nth-child(4) {
  grid-column: 1;
  grid-row: 2
}

.gtx-lp .gtx-region:nth-child(5) {
  grid-column: 1;
  grid-row: 3
}

.gtx-lp .gtx-region:nth-child(6) {
  grid-column: 3;
  grid-row: 2
}

.gtx-lp .gtx-region summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  list-style: none;
  cursor: default;
  font-size: var(--fs-body);
  font-weight: 900;
  line-height: 1.6
}

.gtx-lp .gtx-region summary::-webkit-details-marker {
  display: none
}

.gtx-lp .gtx-region summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px
}

.gtx-lp .gtx-region .count {
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--sub)
}

.gtx-lp .gtx-region li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: 1.6
}

.gtx-lp .gtx-row dd .sub+.sub {
  margin-top: clamp(20px, 2.5vw, 28px)
}

.gtx-lp .gtx-row dd .sub h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-size: var(--fs-body);
  font-weight: 700
}

.gtx-lp .gtx-privacy {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--mute)
}

.gtx-lp .gtx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-align: center
}

.gtx-lp .gtx-btn--fill {
  background: var(--ink);
  color: #fff
}

.gtx-lp .gtx-btn svg {
  flex: none
}

@media (hover:hover) {
  .gtx-lp .gtx-btn:hover {
    opacity: .75
  }
}

.gtx-lp .gtx-cal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px
}

.gtx-lp .gtx-insta__btn {
  display: none
}

/* ---------- Instagram ---------- */
.gtx-lp .gtx-insta {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(20px, 2.5vw, 32px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 48px);
  background: var(--paper);
  border-radius: 12px
}

.gtx-lp .gtx-insta h3 {
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 1.5
}

.gtx-lp .gtx-insta p {
  margin-top: 4px;
  font-size: var(--fs-body)
}

.gtx-lp .gtx-insta p a {
  font-weight: 700;
  color: var(--red)
}

/* ---------- カード内の要素を左右で揃える（subgrid） ---------- */
@supports (grid-template-rows: subgrid) {
  .gtx-lp .gtx-gift {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0
  }
}

/* ---------- スマホ（〜768px）：レイアウトのみ切り替え ---------- */
@media (max-width:768px) {
  .gtx-lp .gtx-gifts {
    grid-template-columns: 1fr
  }

  .gtx-lp .gtx-gift {
    display: flex;
    grid-row: auto
  }

  .gtx-lp .gtx-lead {
    text-align: center
  }

  .gtx-lp .gtx-row {
    grid-template-columns: 1fr;
    row-gap: 8px
  }

  .gtx-lp .gtx-stores {
    display: block;
    margin-top: 20px;
    border-top: 1px solid var(--line)
  }

  .gtx-lp .gtx-region {
    border-bottom: 1px solid var(--line)
  }

  .gtx-lp .gtx-region summary {
    align-items: center;
    min-height: 52px;
    padding: 0;
    border-bottom: 0;
    cursor: pointer
  }

  .gtx-lp .gtx-region .count {
    margin-left: auto;
    font-size: var(--fs-sm)
  }

  .gtx-lp .gtx-region summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: -4px 4px 0 0;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg)
  }

  .gtx-lp .gtx-region[open] summary::after {
    margin-top: 4px;
    transform: rotate(-135deg)
  }

  .gtx-lp .gtx-region ul {
    padding-bottom: 12px
  }

  .gtx-lp .gtx-region li {
    padding: 8px 0;
    border-bottom: 1px solid var(--mist)
  }

  .gtx-lp .gtx-region li:last-child {
    border-bottom: 0
  }

  .gtx-lp .gtx-insta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center
  }

  .gtx-lp .gtx-insta__qr,
  .gtx-lp .gtx-insta__pc {
    display: none
  }

  .gtx-lp .gtx-insta__btn {
    display: flex;
    width: 100%;
    margin-top: 16px
  }

  .gtx-lp .gtx-cal .gtx-btn {
    flex: 1 1 100%
  }
}