/* ============================================================
   style.css — 株主様紹介特典制度
   BEM + Mobile-first
   ============================================================ */

/* ----------------------------------------------------------
   @font-face — 日産ブランドフォント（英数字用）
   ---------------------------------------------------------- */
@font-face {
  font-family: 'Nissan Brand';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('Nissan Brand Regular'),
       url('https://www.nissan.co.jp/COMMON/FONTS/nissan-brand/nissan-brand-regular.woff2') format('woff2'),
       url('https://www.nissan.co.jp/COMMON/FONTS/nissan-brand/nissan-brand-regular.woff') format('woff');
}
@font-face {
  font-family: 'Nissan Brand';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local('Nissan Brand Bold'),
       url('https://www.nissan.co.jp/COMMON/FONTS/nissan-brand/nissan-brand-bold.woff2') format('woff2'),
       url('https://www.nissan.co.jp/COMMON/FONTS/nissan-brand/nissan-brand-bold.woff') format('woff');
}

/* ----------------------------------------------------------
   CSS Variables
   ---------------------------------------------------------- */
:root {
  --color-red:     #C3002F;
  --color-white:   #FFFFFF;
  --color-black:   #000000;
  --color-text:    #111111;
  --color-sub:     #333333;
  --color-gray:    #BDBDBD;
  --color-bg:      #F5F5F5;
  --color-line:    #D0D0D0;
  --color-blue:    #2D5398;
  --color-gold:    #917142;
  --color-navy:    #122742;

  /* 英数字: 日産ブランドフォント / 日本語: モリサワ新ゴPro */
  --font-en: 'Nissan Brand', sans-serif;
  --font-jp: 'ShinGoPro-Regular', 'A-OTF Shin Go Pro', 'Shin Go Pro', sans-serif;

  --content-width: 980px;
  --page-max: 1440px;
  --sp-padding: 15px;
  --sp-content: 345px;
}

/* ----------------------------------------------------------
   Reset / Base
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  /* 英数字 → Nissan Brand、日本語 → 新ゴPro（グリフ非保有文字は自動フォールバック）*/
  font-family: 'Nissan Brand', 'ShinGoPro-Regular', 'A-OTF Shin Go Pro', 'Shin Go Pro', sans-serif;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.6;
}

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

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Utility */
.font-en {
  font-family: var(--font-en);
}

/* ----------------------------------------------------------
   Page wrapper
   ---------------------------------------------------------- */
.page {
  width: 100%;
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */
.header {
  width: 100%;
}

.header__image {
  width: 100%;
  height: auto;
  display: block;
}

/* ----------------------------------------------------------
   Attention Banner
   ---------------------------------------------------------- */
.attention {
  padding: 15px var(--sp-padding) 20px;
}

.attention__inner {
  border: 2px solid var(--color-red);
  padding: 15px 20px;
  color: var(--color-red);
}

.attention__text {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.attention__link {
  display: block;
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-decoration: underline;
  color: var(--color-red);
  word-break: break-all;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   KV
   ---------------------------------------------------------- */
.kv {
  position: relative;
  width: 100%;
}

.kv__image-wrap {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
}

.kv__image-wrap picture,
.kv__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-navy) 0%, rgba(18,39,66,0) 100%);
  opacity: 0.6;
}

.kv__content {
  position: absolute;
  top: 60px;
  left: var(--sp-padding);
  width: calc(100% - 30px);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.kv__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-white);
  padding: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  line-height: 1.0;
}

.kv__title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.0;
  text-align: center;
  width: 100%;
}

.kv__desc {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
  font-weight: 500;
}

/* ----------------------------------------------------------
   Description
   ---------------------------------------------------------- */
.description {
  padding: 40px var(--sp-padding) 0;
}

.description__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
}

.description__text {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: 30px;
}

.description__note {
  font-size: 12px;
  color: var(--color-sub);
  letter-spacing: 0.015em;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   Gift Box
   ---------------------------------------------------------- */
.gift {
  padding: 30px var(--sp-padding) 0;
}

.gift__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
}

.gift__subtitle {
  background-color: var(--color-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 15px;
}

.gift__subtitle-icon {
  width: 30px;
  height: 30px;
}

.gift__subtitle-text {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.0;
  text-align: center;
}

.gift__box {
  border: 4px solid var(--color-red);
  background: var(--color-white);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.gift__label {
  font-family: 'ShinGoPro-Bold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-red);
  text-align: center;
  width: 100%;
}

.gift__amount {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 5px;
  color: var(--color-red);
  width: 100%;
  white-space: nowrap;
  line-height: 1;
}

.gift__num {
  font-family: 'Nissan Brand', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.gift__unit {
  font-family: 'ShinGoPro-Bold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.gift__present {
  font-family: 'ShinGoPro-Bold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* ----------------------------------------------------------
   Target Section
   ---------------------------------------------------------- */
.target {
  margin-top: 60px;
}

.target__inner {
  background-color: var(--color-bg);
  border-radius: 20px;
  padding: 60px var(--sp-padding);
  max-width: var(--sp-content);
  margin: 0 auto;
}

.target__heading {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.0;
  text-align: center;
  margin-bottom: 30px;
}

.target__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.target__item {
  background: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: 10px;
  padding: 20px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.target__icon {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.target__icon-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.target__icon-symbol {
  position: absolute;
  top: 27%;
  left: 23%;
  width: 53%;
  height: 45%;
  object-fit: contain;
}

.target__text {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.07em;
  color: var(--color-text);
  flex: 1;
}

.target__plus {
  display: flex;
  justify-content: center;
}

.target__plus img {
  width: 30px;
  height: 30px;
}

/* ----------------------------------------------------------
   Period Section
   ---------------------------------------------------------- */
.period {
  margin-top: 60px;
  padding: 0 var(--sp-padding);
}

.period__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
  flex-direction: column;
}

.period__heading {
  font-family: 'ShinGoPro-Bold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40px;
}

.period__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 40px;
}

.period__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.period__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
  color: var(--color-white);
  font-family: 'ShinGoPro-Medium', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  height: 29px;
  width: 160px;
  white-space: nowrap;
}

.period__date {
  font-family: 'ShinGoPro-Bold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt';
}

.period__date .font-en {
  font-family: 'Nissan Brand', sans-serif;
  font-size: 28px;
}

.period__cta {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.period__cta-text {
  font-family: 'ShinGoPro-DeBold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-red);
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-align: center;
}

/* ----------------------------------------------------------
   Button
   ---------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  padding: 0 40px;
  height: 60px;
  width: 100%;
  max-width: 345px;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.85;
}

.btn--lg {
  width: 100%;
  max-width: 345px;
}

.btn__arrow {
	position: absolute;
	right: 20px;
	top: calc(50% - 8px);
  width: 11px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

/* ----------------------------------------------------------
   Steps Section
   ---------------------------------------------------------- */
.steps {
  margin-top: 60px;
  padding: 61px 0 0;
  border-top: 1px solid var(--color-line);
}

.steps__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
  padding: 0 var(--sp-padding);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.steps__header {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.steps__heading {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.0;
  text-align: center
}

.steps__subheading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: center;
}

/* SP: Flow layout with sidebar labels */
.steps__flow {
  display: flex;
  gap: 0;
}

.steps__sidebars {
	position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 40px;
}

.steps__sidebar {
	display: flex;
	justify-content: center;
	align-items: center;
  width: 40px;
}

.steps__sidebar--blue {
	position: absolute;
	left: 0;
	top: 0;
  background-image: url('../images/subtitle1.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 330px;
  width: 40px;
}

.steps__sidebar--gold {
	position: absolute;
	left: 0;
	bottom: 0;
  background-image: url('../images/subtitle2.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  height: calc(100% - 318px);
}
.steps__sidebar--gold:before,
.steps__sidebar--gold:after{
	content: " ";
	position: absolute;
	left: 0;
	bottom: 0;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0px 0px 20px;
	border-color: transparent transparent transparent #fff;
}
.steps__sidebar--gold:after{
	left: auto;
	right: 0;
	border-width: 0 0px 15px 20px;
	border-color: transparent transparent #fff transparent;
}

.steps__sidebar-text {
	width: 1em;
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.steps__body {
  flex: 1;
  overflow: hidden;
}

/* PC labels: hidden on SP */
.steps__pc-labels {
  display: none;
}

.steps__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 10px;
}

/* Step card */
.step {
  display: flex;
  flex-direction: column;
}

.step__header {
  position: relative;
  height: 38px;
  flex-shrink: 0;
}

.step__header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: var(--color-bg);
  border-radius: 10px 10px 0 0;
}

.step__badge {
  position: absolute;
  top: 0;
  left: 80px;
  width: 135px;
  height: 32px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.step__badge--blue {
  background: var(--color-blue);
}

.step__badge--gold {
  background: var(--color-gold);
}

.step__step {
  font-size: 18px;
  color: var(--color-white);
  letter-spacing: 0.07em;
  line-height: 1.6;
}

.step__num {
  font-size: 23px;
  color: var(--color-white);
  font-weight: 700;
  line-height: 1.6;
}

.step__triangle {
  position: absolute;
  bottom: 0;
  left: 141px;
  width: 12px;
  height: 6px;
  z-index: 1;
}

.step__triangle img {
  width: 100%;
  height: 100%;
}

.step__body {
  background: var(--color-bg);
  border-radius: 0 0 10px 10px;
  padding: 5px 15px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 110px;
}

.step {
  position: relative;
}

.step__icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  overflow: hidden;
}

.step__icon-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.step__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 70px;
  max-height: 70px;
}

/* STEP別アイコン寸法: viewBoxから算出(preserveAspectRatio:none対策) */
/* STEP1: 106x86 → 70x57 */
.steps__list > li:nth-child(1) .step__icon { width: 62px; height: 50px; }
/* STEP2: 100x100 → 70x70 */
.steps__list > li:nth-child(2) .step__icon { width: 58px; height: 58px; }
/* STEP3: 96x90 → 70x66 */
.steps__list > li:nth-child(3) .step__icon { width: 56px; height: 52px; }
/* STEP4: 68x100 → 48x70 */
.steps__list > li:nth-child(4) .step__icon { width: 40px; height: 58px; }
/* STEP5: 92x98 → 66x70 */
.steps__list > li:nth-child(5) .step__icon { width: 54px; height: 57px; }

.step__text {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-text);
  flex: 1;
}

.step__text br {
  display: none;
}

/* Confirm box */
.steps__confirm-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.steps__confirm-box__left {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  padding: 20px 18px 20px;
  gap: 12px;
}

.steps__confirm-box__title {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-sub);
  text-align: center;
}

.steps__confirm-box__icons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.steps__confirm-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.steps__confirm-icon img {
  width: 24px;
  height: 24px;
}

.steps__confirm-icon span {
  font-size: 12px;
  color: var(--color-sub);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.steps__confirm-box__highlight {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-align: center;
  color: var(--color-black);
}

.steps__confirm-box__highlight br {
  display: none;
}

.steps__confirm-box__accent {
  color: var(--color-red);
}

/* Notes */
.steps__notes {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.steps__note {
  font-size: 12px;
  color: var(--color-sub);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   Digital Gift Section
   ---------------------------------------------------------- */
.digital-gift {
  margin-top: 60px;
  padding: 0 var(--sp-padding);
}
.digital-gift.choice {
  margin-bottom: 60px;
}

.digital-gift__inner {
  background: var(--color-bg);
  border-radius: 20px;
  padding: 60px 15px;
  max-width: var(--sp-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.digital-gift__heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.0;
  text-align: center;
}

.digital-gift__text {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.07em;
  text-align: center;
  color: var(--color-text);
}

.digital-gift__example {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.digital-gift__example-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.6;
}

.digital-gift__logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.digital-gift__logos .digital-gift__logo:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 140px;
}

.digital-gift__logo {
  border: 1px solid var(--color-line);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
}

.digital-gift__logo img {
  display: block;
}

/* ロゴ別寸法指定(preserveAspectRatio:none対策) */
/* Amazon: viewBox 96x46 */
.digital-gift__logo:nth-child(1) img { width: 84px; height: 40px; }
/* PayPay: viewBox 110x30 */
.digital-gift__logo:nth-child(2) img { width: 96px; height: 26px; }
/* QUO: viewBox 107x40 */
.digital-gift__logo:nth-child(3) img { width: 94px; height: 35px; }

.digital-gift__logo-note {
  font-size: 12px;
  color: var(--color-sub);
  letter-spacing: 0.04px;
  line-height: 1.6;
  text-align: center;
}

.digital-gift__caution {
  font-size: 12px;
  color: var(--color-sub);
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-align: center;
}

/* ----------------------------------------------------------
   Contact Section
   ---------------------------------------------------------- */
.contact {
  position: relative;
  overflow: hidden;
  padding: 90px var(--sp-padding);
  height: 305px;
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 39, 66, 0.5);
}

.contact__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--color-white);
  width: 100%;
  max-width: var(--sp-content);
  padding: 2px 0;
}

.contact__heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.contact__tel {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.0;
}

.contact__hours {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.contact__hours-label {
  font-family: var(--font-jp);
}

/* ----------------------------------------------------------
   3 Merits
   ---------------------------------------------------------- */
.merit {
  margin-top: 60px;
  padding: 0 var(--sp-padding) 60px;
}

.merit__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
}

.merit__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.merit__heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

.merit__subheading {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.merit__subheading .font-en {
  font-size: 36px;
}

.merit__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.merit__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 1px 0;
}

.merit__icon {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.merit__icon-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.merit__icon-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* メリットアイコン別寸法 SP: viewBoxから算出 60x60エリア内 */
/* Merit1 (gift): 92x98 → 56x60 */
.merit__list .merit__item:nth-child(1) .merit__icon-symbol { width: 46px; height: 49px; }
/* Merit2 (document): 90x100 → 54x60 */
.merit__list .merit__item:nth-child(2) .merit__icon-symbol { width: 45px; height: 50px; }
/* Merit3 (network): 100x100 → 60x60 */
.merit__list .merit__item:nth-child(3) .merit__icon-symbol { width: 50px; height: 50px; }

.merit__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 1px 0;
}

.merit__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--color-text);
}

.merit__title--accent {
  color: var(--color-red);
}

.merit__desc {
  font-size: 14px;
  letter-spacing: 0.044em;
  line-height: 1.6;
  color: var(--color-sub);
}

/* ----------------------------------------------------------
   Choice Header (分岐ページ)
   ---------------------------------------------------------- */
.choice-header {
  padding: 0 var(--sp-padding);
}

.choice-header__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
  background: var(--color-bg);
  border-radius: 20px;
  padding: 60px var(--sp-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.choice-header__text {
  font-family: 'ShinGoPro-Medium', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-text);
  width: 100%;
}

.choice-header__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  height: 80px;
  padding: 10px 15px;
  background: var(--color-red);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-white);
}

.choice-btn__icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.choice-btn__icon-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.choice-btn__icon-persons {
  position: absolute;
  left: 11px;
  top: 14px;
  width: 38px;
  height: 32px;
  overflow: hidden;
}

.choice-btn__icon-person {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.choice-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.choice-btn__label {
  font-family: 'ShinGoPro-DeBold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--color-white);
  display: block;
}

.choice-btn__sub {
  font-family: 'ShinGoPro-DeBold', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--color-white);
  display: block;
}

.choice-btn__arrow {
  flex-shrink: 0;
  width: 11px;
  height: 16px;
}

.choice-header__note {
  font-family: 'ShinGoPro-Medium', 'A-OTF Shin Go Pro', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-align: center;
  color: var(--color-red);
  width: 100%;
}

/* ----------------------------------------------------------
   Footer CTA (Terms + Button)
   ---------------------------------------------------------- */
.footer-cta {
  background: var(--color-bg);
  padding: 60px var(--sp-padding);
}

.footer-cta__inner {
  max-width: var(--sp-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* Terms Accordion */
.terms {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.terms__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 15px;
  border: none;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  cursor: pointer;
  text-align: left;
  gap: 10px;
}

.terms__toggle-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: var(--color-sub);
  flex: 1;
}

.terms__toggle-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.terms__toggle-icon__h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-sub);
  transform: translateY(-50%);
}

.terms__toggle-icon__v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-sub);
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.terms__toggle[aria-expanded="true"] .terms__toggle-icon__v {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.terms__content {
  width: 100%;
}

.terms__content[hidden] {
  display: none;
}

.terms__body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 2px 0;
  color: var(--color-sub);
  font-size: 14px;
  letter-spacing: 0.044em;
}

.terms__section-title {
  font-weight: 700;
  line-height: 1.8;
}

.terms__list {
  list-style: disc;
  padding-left: 21px;
}

.terms__list li {
  line-height: 1.8;
  margin-bottom: 0;
}

.terms__note,
.terms__text {
  line-height: 1.8;
  padding-left: 0;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.footer {
  width: 100%;
}

.footer__image {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
	br.pc{
		display: none;
	}
}
/* ============================================================
   RESPONSIVE: min-width 768px (Tablet / PC)
   ============================================================ */
@media (min-width: 768px) {
	br.sp{
		display: none;
	}

  /* Attention */
  .attention {
    padding: 10px 0 40px;
  }

  .attention__inner {
    width: 1360px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px 20px;
  }

  .attention__text {
    font-size: 16px;
  }

  /* KV */
  .kv__image-wrap {
    height: 480px;
  }

  .kv__overlay {
    background: linear-gradient(to right, var(--color-navy) 0%, rgba(18,39,66,0) 100%);
    width: 75%;
    height: 100%;
  }

  .kv__content {
    top: 141px;
    left: 140px;
    width: 500px;
    align-items: flex-start;
  }

  .kv__title {
    font-size: 50px;
    letter-spacing: 0.08em;
    text-align: left;
  }

  .kv__label {
    font-size: 20px;
  }

  .kv__desc {
    font-size: 20px;
    letter-spacing: 0.08em;
    text-align: left;
  }

  /* Description */
  .description {
    padding: 60px 0 0;
  }

  .description__inner {
    max-width: var(--content-width);
    text-align: center;
  }

  .description__text {
    font-size: 16px;
    text-align: center;
    margin-bottom: 30px;
  }

  .description__note {
    font-size: 14px;
    text-align: center;
  }

  /* Gift Box */
  .gift {
    padding: 0;
    margin-top: 60px;
  }

  .gift__inner {
    max-width: var(--content-width);
    margin: 0 auto;
  }

  .gift__subtitle {
    flex-direction: row;
    padding: 0 40px;
    height: 50px;
    gap: 10px;
    justify-content: center;
  }

  .gift__subtitle-text {
    font-size: 20px;
  }

  .gift__box {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 94px;
    padding: 24px 121px;
  }

  .gift__label {
    font-size: 32px;
    width: auto;
    text-align: right;
  }

  .gift__amount {
    width: auto;
    gap: 4px;
  }

  .gift__num {
    font-size: 50px;
  }

  .gift__unit {
    font-size: 24px;
  }

  .gift__present {
    font-size: 32px;
  }

  /* Target */
  .target {
    margin-top: 120px;
    padding: 0;
  }

  .target__inner {
    width: 1360px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 80px 190px 100px;
  }

  .target__heading {
    font-size: 40px;
    margin-bottom: 60px;
  }

  .target__list {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
  }

  .target__item {
    height: 140px;
    padding: 20px 40px;
    gap: 40px;
  }

  .target__icon {
    width: 100px;
    height: 100px;
  }

  .target__icon-symbol {
    top: 24%;
    left: 19%;
    width: 62%;
    height: 52%;
  }

  .target__text {
    font-size: 16px;
    width: 770px;
  }

  .target__plus img {
    width: 40px;
    height: 40px;
  }

  /* Period */
  .period {
    margin-top: 120px;
    padding: 0;
  }

  .period__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    gap: 60px;
  }

  .period__heading {
    font-family: 'ShinGoPro-DeBold', 'A-OTF Shin Go Pro', sans-serif;
    font-size: 40px;
  }

  .period__list {
    gap: 0px;
  }

  .period__row {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  .period__date {
    font-size: 28px;
    line-height: 1.6;
  }

  .period__date .font-en {
    font-size: 34px;
  }

  .period__cta {
    gap: 30px;
  }

  .period__cta-text {
    font-size: 20px;
  }
  .period__cta-text br {
    display: none;
  }

  /* Button */
  .btn {
    height: 80px;
    font-size: 24px;
    max-width: 600px;
    padding: 0 50px;
  }

  .btn--lg {
    max-width: 600px;
  }

  .btn__arrow {
		right: 30px;
    width: 12px;
    height: 18px;
  }

  /* Steps */
  .steps {
    margin-top: 120px;
    padding: 120px 0 0;
  }

  .steps__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    gap: 30px;
    padding: 0;
  }

  .steps__header {
    gap: 30px;
  }

  .steps__heading {
    font-size: 40px;
    letter-spacing: 0.05em;
  }

  .steps__subheading {
    font-size: 20px;
    letter-spacing: 0.05em;
  }

  /* Hide SP sidebar on PC */
  .steps__sidebars {
    display: none;
  }

  .steps__flow {
    flex-direction: column;
  }

  .steps__body {
    width: 100%;
  }

  /* Show PC labels */
  .steps__pc-labels {
		display: block;
		position: relative;
    height: 40px;
    margin-bottom: 20px;
  }

  .steps__pc-label {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .steps__pc-label--blue {
		position: absolute;
		left: 0;
		top: 0;
    width: 405px;
    height: 40px;
    background-image: url('../images/base1.svg');
    background-size: cover;
    background-position: center right;
  }

  .steps__pc-label--gold {
		position: absolute;
		right: 0;
		top: 0;
    width: 588px;
    height: 40px;
    background-image: url('../images/base2.svg');
    background-size: cover;
    background-position: center left;
  }

  /* Horizontal steps list */
  .steps__list {
    flex-direction: row;
    gap: 10px;
    padding-left: 0;
  }

  .step {
    flex: 1;
    flex-direction: column;
  }

  .step__badge {
    left: 50%;
    transform: translateX(-50%);
  }

  .step__triangle {
    left: 50%;
    transform: translateX(-50%);
  }

  .step__body {
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px 20px;
    min-height: auto;
    gap: 20px;
  }

  .step__icon-wrap {
    width: 148px;
    height: 148px;
  }

  .step__icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 120px;
    max-height: 120px;
  }

  /* STEP別アイコン寸法 PC: viewBoxから算出 */
  /* STEP1: 106x86 → 120x97 */
  .steps__list > li:nth-child(1) .step__icon { width: 108px; height: 86px; }
  /* STEP2: 100x100 → 120x120 */
  .steps__list > li:nth-child(2) .step__icon { width: 100px; height: 100px; }
  /* STEP3: 96x90 → 120x113 */
  .steps__list > li:nth-child(3) .step__icon { width: 96px; height: 90px; }
  /* STEP4: 68x100 → 82x120 */
  .steps__list > li:nth-child(4) .step__icon { width: 68px; height: 100px; }
  /* STEP5: 92x98 → 113x120 */
  .steps__list > li:nth-child(5) .step__icon { width: 92px; height: 98px; }

  .step__text {
    font-size: 14px;
    text-align: left;
    width: 100%;
  }

  .step__text br {
    display: inline;
  }

  /* Steps confirm box */
  .steps__confirm-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    gap: 0;
    height: 103px;
  }

  .steps__confirm-box__left {
    width: 480px;
    flex-shrink: 0;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    padding: 20px 40px;
    height: 103px;
    justify-content: center;
  }

  .steps__confirm-box__title {
    font-size: 16px;
    white-space: nowrap;
  }

  .steps__confirm-box__icons {
    gap: 20px;
  }

  .steps__confirm-icon img {
    width: 30px;
    height: 30px;
  }

  .steps__confirm-icon span {
    font-size: 16px;
  }

  .steps__confirm-box__highlight {
    flex: 1;
    font-family: 'ShinGoPro-DeBold', 'A-OTF Shin Go Pro', sans-serif;
    font-size: 20px;
    text-align: center;
    align-self: center;
    max-width: 500px;
    margin: 0 auto;
  }

  .steps__confirm-box__highlight br {
    display: inline;
  }

  .steps__notes {
    gap: 0;
  }

  .steps__note {
    font-size: 12px;
  }

  /* Digital Gift */
  .digital-gift {
    padding: 0;
    margin-top: 100px;
  }
  .digital-gift.choice {
    margin-bottom: 120px;
  }

  .digital-gift__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 60px 40px 30px;
    gap: 30px;
  }

  .digital-gift__heading {
    font-size: 24px;
  }

  .digital-gift__text {
    font-size: 14px;
  }

  .digital-gift__example {
    padding: 0;
    border: 1px solid var(--color-line);
    height: 222px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
  }

  .digital-gift__example-title {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 820px;
  }

  .digital-gift__logos {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 73px;
    left: 50%;
    transform: translateX(-50%);
    gap: 20px;
    grid-template-columns: none;
    width: auto;
  }

  .digital-gift__logos .digital-gift__logo:last-child {
    grid-column: auto;
    justify-self: auto;
    max-width: none;
  }

  .digital-gift__logo {
    width: 160px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
  }

  /* ロゴ別寸法指定 PC: 内寸140x60px */
  /* Amazon: 96x46 → h=60 → w=125 */
  .digital-gift__logo:nth-child(1) img { width: 96px; height: 46px; }
  /* PayPay: 110x30 → w=140 → h=38 */
  .digital-gift__logo:nth-child(2) img { width: 110px; height: 30px; }
  /* QUO: 107x40 → w=140 → h=52 */
  .digital-gift__logo:nth-child(3) img { width: 107px; height: 40px; }

  .digital-gift__logo-note {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 820px;
    font-size: 12px;
  }

  /* Contact */
  .contact {
    height: 400px;
    padding: 0;
    margin-top: 120px;
  }

  .contact__content {
    max-width: 469px;
  }

  .contact__heading {
    font-size: 20px;
    letter-spacing: 0.05em;
  }

  .contact__tel {
    font-size: 60px;
    letter-spacing: 0.05em;
  }

  .contact__hours {
    font-size: 14px;
  }

  /* 3 Merits */
  .merit {
    padding: 0;
    margin-top: 120px;
  }

  .merit__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    gap: 60px;
    overflow: visible;
  }

  .merit__header {
    gap: 30px;
  }

  .merit__heading {
    font-size: 32px;
    letter-spacing: 0.05em;
  }

  .merit__subheading {
    font-size: 48px;
    letter-spacing: 0.05em;
  }

  .merit__subheading .font-en {
    font-size: 54px;
  }

  .merit__list {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
  }

  .merit__item {
    flex-direction: column;
    align-items: center;
    width: 300px;
    flex-shrink: 0;
    gap: 15px;
  }

  .merit__icon {
    width: 240px;
    height: 240px;
  }

  .merit__icon-symbol {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* メリットアイコン別寸法 PC: viewBoxから算出 120x120エリア内 */
  /* Merit1 (gift): 92x98 → 113x120 */
  .merit__list .merit__item:nth-child(1) .merit__icon-symbol { width: 92px; height: 98px; }
  /* Merit2 (document): 90x100 → 108x120 */
  .merit__list .merit__item:nth-child(2) .merit__icon-symbol { width: 90px; height: 100px; }
  /* Merit3 (network): 100x100 → 120x120 */
  .merit__list .merit__item:nth-child(3) .merit__icon-symbol { width: 100px; height: 100px; }

  .merit__content {
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .merit__title {
    font-size: 19px;
    text-align: center;
  }

  .merit__title br,
  .merit__desc br {
    display: inline;
  }

  .merit__desc {
    font-size: 14px;
    text-align: center;
  }

  /* Choice Header (PC) */
  .choice-header {
    padding: 0 40px;
  }

  .choice-header__inner {
    max-width: 1360px;
    padding: 120px 190px;
  }

  .choice-header__text {
    font-size: 24px;
  }

  .choice-header__btns {
    flex-direction: row;
    gap: 20px;
  }

  .choice-btn {
    flex: 1;
    height: 100px;
    padding: 10px 20px;
    gap: 20px;
    position: relative;
  }

  .choice-btn__icon-wrap {
    width: 80px;
    height: 80px;
  }

  .choice-btn__icon-persons {
    left: 15px;
    top: 19px;
    width: 50px;
    height: 42px;
  }

  .choice-btn__icon-person {
    left: 19px;
    top: 19px;
    width: 42px;
    height: 42px;
  }

  .choice-btn__label {
    font-size: 24px;
  }

  .choice-btn__sub {
    font-size: 18px;
  }

  .choice-btn__arrow {
    width: 12px;
    height: 18px;
    margin-left: auto;
  }

  .choice-header__note {
    font-size: 20px;
  }

  /* Footer CTA */
  .footer-cta {
    padding: 0;
    margin-top: 120px;
  }

  .footer-cta__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 230px;
    gap: 60px;
    align-items: center;
  }

  .terms {
    width: 100%;
  }

  .terms__toggle-label {
    font-size: 20px;
  }

  .terms__body {
    font-size: 14px;
  }
}

/* ============================================================
   RESPONSIVE: min-width 1240px (Full PC layout)
   ============================================================ */
@media (min-width: 1240px) {

  /* Center main content columns */
  .description__inner,
  .gift__inner,
  .period__inner,
  .steps__inner,
  .digital-gift__inner,
  .merit__inner {
    max-width: var(--content-width);
  }

  .target__inner {
    max-width: 1360px;
    margin: 0 auto;
    width: 1360px;
  }

  /* Steps inner full width */
  .steps__list {
    width: 980px;
  }

  .step {
    width: 188px;
    flex: 0 0 188px;
  }
}

#omni-navigation.simplified .omni-nav-container .omni-nav-icon-wrapper .user-log-in{
	display: none !important;
}