/*
 * アルバムお仕立てギフト券LP
 * 命名: FLOCSS + BEM / p-albumgift__ prefix
 * 単位: rem (html { font-size: 62.5% } → 1rem = 10px)
 * ブレークポイント: モバイルファースト / min-width: 780px
 */

/* ============================================================
   デザイントークン（Figmaより実測）
============================================================ */
:root {
  /* テキスト */
  --color-text:         #5a4a3a;  /* メイン本文（Figma実値） */
  --color-text-sub:     #7d7d7d;
  --color-text-en:      #b89968;  /* ENラベル共通（Figma実値） */
  --color-text-en-teal: #7ab3a6;  /* HOW TO RECEIVE ENラベル */
  --color-white:        #fff;

  /* ブランド */
  --color-gold:     #bca86b;  /* ボタン・吹き出し・グランアクセント（Figma実値） */
  --color-purple:   #b791b9;  /* マリアージュアクセント（Figma実値） */
  --color-teal:     #7ab3a6;  /* 受け取り・デジタル系（Figma実値） */
  --color-memories: #79a275;  /* メモリーズテーマカラー（Figma実値） */

  /* 背景 */
  --color-bg:       #fff;
  --color-bg-cream: #f8f3e6;  /* HOW TO SEND・シリーズ系（Figma実値） */
  --color-bg-mint:  #e7f3f0;  /* HOW TO RECEIVE（Figma実値） */
  --color-bg-warm:  #f5ecd7;  /* シーン・ギフトカード系 */
  --color-bg-beige: #ece6dd;  /* FAQ背景（Figma実値） */

  /* ボーダー */
  --color-border: #e8e8e8;

  /* シャドウ */
  --shadow-card: 2px 2px 3.5px rgba(0, 0, 0, 0.1);

  /* フォント */
  --font-family-base: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI",
                      "Helvetica Neue", "游ゴシック体", YuGothic,
                      "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック",
                      "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif;

  --font-size-2xs:        1.0rem;  /* ENラベル等（Figma SP実値 10px） */
  --font-size-xs:         1.1rem;
  --font-size-sm:         1.2rem;
  --font-size-base:       1.3rem;
  --font-size-step:       1.4rem;
  --font-size-step-title: 1.6rem;
  --font-size-15:         1.5rem;  /* カード見出し（Figma SP実値 15px） */
  --font-size-xl:         1.8rem;  /* カード見出し（Figma SP実値 15px） */
  --font-size-h2:         2.0rem;  /* セクションタイトル（Figma SP実値 20px） */
  --font-size-price:      3.9rem;  /* 販売価格の数字（Figma SP実値 39px） */

  --line-height-base:  1.7;
  --line-height-tight: 1.4;

  /* スペーシング */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;

  /* ラディウス */
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   2rem;   /* シリーズカード（Figma SP実値 20px） */
  --radius-pill: 5rem;

  /* セクション余白 */
  --section-px: 1rem;
  --section-py: 5rem;
}

/* ============================================================
   ベース
============================================================ */
.p-albumgift {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-base);
}

.p-albumgift figure { margin: 0; }

.p-albumgift img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.p-albumgift ul,
.p-albumgift ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   共通: セクション見出し
============================================================ */
.p-albumgift__section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-5);
}

.p-albumgift__section-en {
  display: block;
  font-size: var(--font-size-2xs);
  font-weight: bold;
  letter-spacing: 0.3em;
  color: var(--color-text-en);
  margin: 0 0 var(--space-2);
}

.p-albumgift__section-title {
  font-size: var(--font-size-h2);
  font-weight: bold;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

/* ============================================================
   共通: CTA ボタン（ゴールドピル）
============================================================ */
.p-albumgift__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.p-albumgift__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25rem;
  padding: 1rem var(--space-5);
  font-size: var(--font-size-base);
  font-weight: bold;
  font-family: var(--font-family-base);
  color: var(--color-white);
  background: var(--color-gold);
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}

/* ボタン右端の下向きシェブロン */
.p-albumgift__btn::after {
  content: '';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 0.2rem solid currentColor;
  border-bottom: 0.2rem solid currentColor;
  transform: translateY(-65%) rotate(45deg);
}

.p-albumgift__btn:hover {
  opacity: 0.85;
  color: var(--color-white);
  text-decoration: none;
}

/* ============================================================
   共通: 吹き出し（こんな方におすすめ！ / シリーズ推薦ラベル）
============================================================ */
.p-albumgift__callout {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: bold;
  padding: 0.5rem var(--space-4);
  border-radius: var(--radius-pill);
  position: relative;
  text-align: center;
  margin-bottom: 1.8rem;
}

.p-albumgift__callout::after {
  content: '';
  position: absolute;
  bottom: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1.4rem solid transparent;
  border-right: 1.4rem solid transparent;
  border-top: 1.1rem solid var(--color-gold);
}

/* 吹き出しのシリーズ別・デジタルカラー */
.p-albumgift__series-item:nth-child(2) .p-albumgift__callout { background: var(--color-purple); }
.p-albumgift__series-item:nth-child(2) .p-albumgift__callout::after { border-top-color: var(--color-purple); }
.p-albumgift__series-item:nth-child(3) .p-albumgift__callout { background: var(--color-memories); }
.p-albumgift__series-item:nth-child(3) .p-albumgift__callout::after { border-top-color: var(--color-memories); }
.p-albumgift__digital .p-albumgift__callout { background: var(--color-teal); }
.p-albumgift__digital .p-albumgift__callout::after { border-top-color: var(--color-teal); }

/* シリーズの吹き出しはカード上部1/3に重ねる（▼は表示） */
.p-albumgift__series-item .p-albumgift__callout {
  position: relative;
  z-index: 1;
  margin-bottom: -1rem;
}

/* ============================================================
   おすすめカード（お仕立て・デジタルで共通）
============================================================ */
.p-albumgift__recommend {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-5);
  width: 100%;
}

.p-albumgift__recommend-list {
  display: flex;
  gap: var(--space-1);
  justify-content: center;
  width: 100%;
}

.p-albumgift__recommend-item {
  flex: 1;
  max-width: 17rem;
  text-align: center;
  /* 375px幅の3カラムで2行ラベル（例「ギフトを贈りたい方」）が3行に折れるのを防ぐため左右paddingは0。
     カード間はlist側のgapで確保 */
  padding: var(--space-2) 0;
  background: var(--color-bg-cream);
  border-radius: var(--radius-md);
}

/* デジタルセクションのおすすめカードはミント背景 */
.p-albumgift__digital .p-albumgift__recommend-item {
  background: var(--color-bg-mint);
}

.p-albumgift__recommend-icon {
  margin-bottom: 0;
  line-height: 0;
}

.p-albumgift__recommend-icon img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.p-albumgift__recommend-text {
  font-size: var(--font-size-xs);
  font-weight: bold;
  line-height: var(--line-height-tight);
  margin: var(--space-2) 0 0;
}

/* ============================================================
   MV
============================================================ */
.p-albumgift__mv { line-height: 0; }
.p-albumgift__mv-wrap img { width: 100%; height: auto; display: block; }

/* ============================================================
   ヒーロー
============================================================ */
.p-albumgift__hero {
  padding: var(--section-py) var(--section-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-bg);
}

.p-albumgift__hero-title {
  font-size: var(--font-size-h2);
  font-weight: bold;
  line-height: var(--line-height-base);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-4);
}

.p-albumgift__hero-text { margin: 0 0 var(--space-5); font-size: var(--font-size-15); }

.p-albumgift__hero-img { width: 100%; margin: 0 0 var(--space-5); }
.p-albumgift__hero-img img { display: block; margin: 0 auto; }

/* ============================================================
   こんなシーンの贈り物に
============================================================ */
.p-albumgift__occasion {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-albumgift__occasion-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  width: 100%;
}

.p-albumgift__occasion-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  /* 375px幅の2カラムで「今しか撮れない瞬間を、」が折り返さないよう左右paddingを詰める */
  padding: var(--space-2) var(--space-1);
  text-align: center;
  box-shadow: var(--shadow-card);
}

/* figure 共通 reset(.p-albumgift figure{margin:0}/0,1,1) に勝つよう詳細度(0,2,0)を確保。
   画像→タイトルの余白を タイトル→テキスト(space-1) と均一にする */
.p-albumgift__occasion-card .p-albumgift__occasion-img {
  overflow: hidden;
  margin-bottom: var(--space-1);
  line-height: 0;
}

.p-albumgift__occasion-img img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  display: block;
}

.p-albumgift__occasion-name {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--color-gold);
  margin: 0 0 var(--space-1);
}

.p-albumgift__occasion-text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* ============================================================
   お仕立てギフト券とは？
============================================================ */
.p-albumgift__about {
  padding: var(--section-py) var(--section-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-bg);
}

.p-albumgift__about-img { width: 100%; margin: 0 0 var(--space-5); }
.p-albumgift__about-img img { border-radius: var(--radius-md); display: block; margin: 0 auto; }
.p-albumgift__about-text { margin: 0 0 var(--space-4); font-size: var(--font-size-step); }

/* ============================================================
   ギフトカードについて
============================================================ */
.p-albumgift__giftcard {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.p-albumgift__giftcard-lead { font-weight: bold; margin: 0 0 var(--space-3); }
.p-albumgift__giftcard-text { margin: 0 0 var(--space-5); }
.p-albumgift__giftcard-img { width: 100%; line-height: 0; }
/* 画像下の余白は figure 共通 reset (.p-albumgift figure{margin:0}) より詳細度が高い img 側へ付与 */
.p-albumgift__giftcard-img img { border-radius: var(--radius-md); display: block; margin: 0 auto var(--space-5); }

/* ============================================================
   14種類のメッセージカード
============================================================ */
.p-albumgift__msgcard {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 375px幅で3行目が想定外に折り返すため本文サイズに（step→base） */
.p-albumgift__msgcard-text { text-align: center; margin: 0 0 var(--space-5); font-size: var(--font-size-base); }

.p-albumgift__msgcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  width: 100%;
}

.p-albumgift__msgcard-grid li { line-height: 0; }
.p-albumgift__msgcard-grid img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }

.p-albumgift__msgcard-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-sub);
  text-align: center;
  margin: var(--space-4) 0 0;
}

/* ============================================================
   HOW TO 共通
============================================================ */
.p-albumgift__howto--send {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-albumgift__howto--receive {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg-mint);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* HOW TO RECEIVE のEN文字色はテール系 */
.p-albumgift__howto--receive .p-albumgift__section-en {
  color: var(--color-text-en-teal);
}

/* ステップリスト */
.p-albumgift__steps {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.p-albumgift__step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ステップ間の ▼ 矢印（上下余白を均一に） */
.p-albumgift__step + .p-albumgift__step::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-top: 1.7rem solid var(--color-gold);
  margin: var(--space-2) 0;
}

/* 受け取った方の流れ・デジタルの矢印はテール系 */
.p-albumgift__howto--receive .p-albumgift__step + .p-albumgift__step::before,
.p-albumgift__digital .p-albumgift__step + .p-albumgift__step::before {
  border-top-color: var(--color-teal);
}

.p-albumgift__step-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.p-albumgift__step-icon {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  line-height: 0;
}

.p-albumgift__step-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.p-albumgift__step-body { flex: 1; }

.p-albumgift__step-title {
  font-size: var(--font-size-step);
  font-weight: bold;
  margin: 0 0 var(--space-1);
}

.p-albumgift__step-text {
  font-size: var(--font-size-step);
  margin: 0;
}

/* ============================================================
   式場品質のアルバムを1/10の価格で
============================================================ */
.p-albumgift__quality {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.p-albumgift__quality-text { margin: 0 0 var(--space-5); }

/* 強調語に背景グラデーションで下線（マーカー風）を付与。色はゴールドトークン由来 */
.p-albumgift__quality-marker {
  font-weight: bold;
  background: linear-gradient(
    transparent 65%,
    color-mix(in srgb, var(--color-gold) 35%, transparent) 65%
  );
}
.p-albumgift__quality-img { width: 100%; margin: 0 0 var(--space-7); }
.p-albumgift__quality-img img { display: block; margin: 0 auto; }

.p-albumgift__quality-points {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1);
  width: 100%;
  margin-top: 2rem !important;
}

.p-albumgift__quality-point { text-align: center; }
.p-albumgift__quality-point-icon { line-height: 0; }
.p-albumgift__quality-point-icon img { width: 10.6rem; height: 8.1rem; object-fit: contain; display: block; margin: 0 auto; }

/* ============================================================
   3つのシリーズから選べる
============================================================ */
.p-albumgift__series {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-albumgift__series-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.p-albumgift__series-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-albumgift__series-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  width: 100%;
  box-shadow: var(--shadow-card);
}

.p-albumgift__series-name { text-align: center; margin-bottom: var(--space-4); }

.p-albumgift__series-name-ja {
  font-size: var(--font-size-h2);
  font-weight: bold;
  margin: 0 0 var(--space-1);
}

.p-albumgift__series-name-en {
  font-size: var(--font-size-base);
  color: var(--color-text-en);
  letter-spacing: 0.3em;
  margin: 0;
}

/* シリーズ別の英字カラー */
.p-albumgift__series-item:nth-child(2) .p-albumgift__series-name-en { color: var(--color-purple); }
.p-albumgift__series-item:nth-child(3) .p-albumgift__series-name-en { color: var(--color-memories); }

.p-albumgift__series-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-albumgift__series-img { width: 100%; line-height: 0; }
.p-albumgift__series-img img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }

.p-albumgift__series-detail { flex: 1; }

.p-albumgift__series-use {
  font-size: var(--font-size-xl);
  font-weight: bold;
  margin: 0 0 var(--space-3);
}

/* シリーズ別アクセントカラー */
.p-albumgift__series-item:nth-child(1) .p-albumgift__series-use { color: var(--color-gold); }
.p-albumgift__series-item:nth-child(2) .p-albumgift__series-use { color: var(--color-purple); }
.p-albumgift__series-item:nth-child(3) .p-albumgift__series-use { color: var(--color-memories); }

.p-albumgift__series-desc {
  /* 375px幅のカード内で説明文が想定行数に収まるよう本文サイズに（step→base） */
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.p-albumgift__series-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.p-albumgift__series-price-label {
  display: inline-block;
  flex-shrink: 0;
  font-size: var(--font-size-base);
  color: var(--color-white);
  background: var(--color-gold);
  padding: 0.2rem var(--space-2);
  border-radius: 0.3rem;
}

/* 販売価格バッジのシリーズ別カラー */
.p-albumgift__series-item:nth-child(2) .p-albumgift__series-price-label { background: var(--color-purple); }
.p-albumgift__series-item:nth-child(3) .p-albumgift__series-price-label { background: var(--color-memories); }

.p-albumgift__series-price-value {
  font-size: var(--font-size-price);
  font-weight: bold;
  line-height: 1;
}

/* ￥マークは金額より小さく */
.p-albumgift__series-price-mark {
  font-size: 0.62em;
  font-weight: bold;
}

/* ============================================================
   商品ラインナップ
============================================================ */
.p-albumgift__lineup {
  padding: var(--section-py) 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-albumgift__lineup > .p-albumgift__section-head {
  padding: 0 var(--section-px);
  width: 100%;
}

.p-albumgift__lineup-lead {
  text-align: center;
  padding: 0 var(--section-px);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-step);
}

/* JUMP TO SERIES ラベル */
.p-albumgift__lineup-jump-en {
  font-size: var(--font-size-2xs);
  font-weight: bold;
  letter-spacing: 0.3em;
  color: var(--color-text-en);
  text-align: center;
  margin: 0 0 var(--space-2);
}

/* シリーズへのアンカーリンクボタン */
.p-albumgift__lineup-tabs {
  display: flex;
  gap: 0.6rem;
  padding: 0 var(--section-px);
  margin: 0 auto var(--space-5);
  width: 100%;
  max-width: 42rem;
}

.p-albumgift__lineup-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0.4rem;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: bold;
  font-family: var(--font-family-base);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s;
  line-height: var(--line-height-tight);
}

.p-albumgift__lineup-tab:hover { opacity: 0.85; color: var(--color-white); text-decoration: none; }

.p-albumgift__lineup-tab--grand    { background: var(--color-gold); }
.p-albumgift__lineup-tab--mariage  { background: var(--color-purple); }
.p-albumgift__lineup-tab--memories { background: var(--color-memories); }

.p-albumgift__lineup-tab-chevron {
  display: block;
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 0.4rem;
  transform: scaleX(1.8); /* ∨ グリフを横に広げて矢印幅を確保 */
}

/* シリーズバナー */
.p-albumgift__lineup-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem var(--section-px);
  width: 100%;
  max-width: 85rem;
  margin: 0 auto var(--space-4);
}

.p-albumgift__lineup-banner--grand    { background: var(--color-gold); }
.p-albumgift__lineup-banner--mariage  { background: var(--color-purple); }
.p-albumgift__lineup-banner--memories { background: var(--color-memories); }

.p-albumgift__lineup-banner-title {
  color: var(--color-white);
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}

.p-albumgift__lineup-banner-en {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  letter-spacing: 0.2em;
  margin: 0.4rem 0 0;
}

.p-albumgift__lineup-panel[hidden] { display: none; }

/* ============================================================
   SNSで贈れるデジタルギフト
============================================================ */
.p-albumgift__digital {
  /* SP: 親コンテナの左右余白を突き抜けて画面幅いっぱいに（PCで解除） */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* デジタル見出しの吹き出し */
.p-albumgift__digital-head {
  position: relative;
  /* SP: セクション左右paddingを突き抜けて画面幅いっぱいに（PCで解除） */
  align-self: stretch;
  margin-left: calc(-1 * var(--section-px));
  margin-right: calc(-1 * var(--section-px));
  background: var(--color-teal);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
}

.p-albumgift__digital-head::after {
  content: '';
  position: absolute;
  bottom: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1.4rem solid transparent;
  border-right: 1.4rem solid transparent;
  border-top: 1.1rem solid var(--color-teal);
}

.p-albumgift__digital-head .p-albumgift__digital-catch { color: var(--color-white); margin-bottom: var(--space-1); }
.p-albumgift__digital-head .p-albumgift__section-title { color: var(--color-white); }

/* デジタルの HOW TO SEND ブロック（ミント背景・セクション全幅） */
.p-albumgift__digital-howto {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-mint);
  margin: var(--space-5) calc(-1 * var(--section-px)) calc(-1 * var(--section-py));
  padding: var(--section-py) var(--section-px);
}

.p-albumgift__digital-howto .p-albumgift__section-en { color: var(--color-teal); }

.p-albumgift__digital-catch {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-text-sub);
  margin: 0 0 var(--space-2);
}

/* SP: 画像もセクション左右paddingを突き抜けて画面幅いっぱいに（PCで解除） */
.p-albumgift__digital-img { align-self: stretch; margin: 0 calc(-1 * var(--section-px)); line-height: 0; }
.p-albumgift__digital-img img { width: 100%; height: auto; display: block; margin: 0 auto; }
.p-albumgift__digital-text { margin: var(--space-4) 0 var(--space-5); }

.p-albumgift__digital .p-albumgift__steps { text-align: left; }

/* ============================================================
   贈った方の声
============================================================ */
.p-albumgift__voices {
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-albumgift__voices-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.p-albumgift__voices-item {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.p-albumgift__voices-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.p-albumgift__voices-avatar img {
  width: 6rem;
  height: 6rem;
  border-radius: 0;
  /* object-fit: cover; */
  display: block;
}

.p-albumgift__voices-profile {
  font-size: var(--font-size-15);
  color: var(--color-text);
  margin: 0;
  font-weight: bold;
}

.p-albumgift__voices-divider {
  border: none;
  border-top: 0.1rem solid var(--color-text); /* プロフィール文字色と仕切り線の色を揃える */
  margin: 0 0 var(--space-3);
}

.p-albumgift__voices-text { font-size: var(--font-size-base); margin: 0; }

/* 本文中の強調テキスト（アクセントカラー） */
.p-albumgift__voices-em { color: var(--color-gold); font-weight: bold; }

/* ============================================================
   よくあるご質問
============================================================ */
.c-faq {
  background-color: #EFEAE3;
}
.c-faq--marche .c-faq-summary {
  background-color: #FFFFFF;
  color: #5a4a3a;
}
.c-faq-details-cont {
  background-color: transparent;
}
/* ============================================================
   PC（min-width: 780px）
============================================================ */
@media (min-width: 780px) {

  /* こんなシーン: 4カラム */
  .p-albumgift__occasion-list {
    grid-template-columns: repeat(4, 1fr);
  }

  /* HOW TOステップ: PC幅を制限して中央寄せ */
  .p-albumgift__steps {
    max-width: 55rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* メッセージカード: 4カラム */
  .p-albumgift__msgcard-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }

  /* シリーズ: カード左右余白を広げ、画像とテキストを横並びに */
  .p-albumgift__series-item { padding: 0 var(--space-3); }
  .p-albumgift__series-card { padding: var(--space-5); }
  .p-albumgift__series-body { flex-direction: row; gap: var(--space-4); align-items: flex-start; }
  .p-albumgift__series-img { flex-shrink: 0; width: 45%; }

  /* 品質: アイコンを中央寄せで広めに */
  .p-albumgift__quality-points { justify-content: center; gap: var(--space-6); }

  /* デジタル: PCでは全幅突き抜けを解除して通常フローへ */
  .p-albumgift__digital { width: auto; margin-left: 0; margin-right: 0; }
  .p-albumgift__digital-img { align-self: center; margin-left: 0; margin-right: 0; }

  /* デジタル見出し吹き出し: 60%幅で中央（突き抜け解除） */
  .p-albumgift__digital-head { width: 60%; min-width: 24rem; align-self: center; margin-left: 0; margin-right: 0; }

  /* 贈った方の声: 3カラム */
  .p-albumgift__voices-list {
    flex-direction: row;
    align-items: stretch;
  }

  .p-albumgift__voices-item { flex: 1; }

  /* タイポ・画像サイズはSP実測値をベースにしているため、PCは従来サイズへ戻す */
  .p-albumgift__section-title { font-size: 2.5rem; }
  .p-albumgift__hero-title { font-size: 2.8rem; line-height: var(--line-height-tight); letter-spacing: normal; }
  .p-albumgift__section-en,
  .p-albumgift__lineup-jump-en { font-size: var(--font-size-base); }
  .p-albumgift__callout { font-size: var(--font-size-15); padding: 0.5rem 2.5rem; }
  .p-albumgift__btn { min-width: 30rem; }

  .p-albumgift__occasion-card { padding: var(--space-3) var(--space-2); }
  .p-albumgift__occasion-img img { height: 11rem; }
  .p-albumgift__occasion-text { font-size: var(--font-size-sm); }

  .p-albumgift__recommend-list { gap: var(--space-3); }
  .p-albumgift__recommend-item { padding: var(--space-4) var(--space-2); background: var(--color-bg-warm); }
  .p-albumgift__recommend-icon { margin-bottom: var(--space-3); }
  .p-albumgift__recommend-icon img { width: 8rem; height: 8rem; }
  .p-albumgift__recommend-text { font-size: var(--font-size-sm); margin-top: var(--space-3); }

  .p-albumgift__series-name-en { font-size: var(--font-size-sm); letter-spacing: 0.2em; }
  .p-albumgift__series-price-label { font-size: var(--font-size-xs); }
  .p-albumgift__series-price-value { font-size: 3.2rem; }

  /* SP専用改行はPCで無効化 */
  .u-br-sp { display: none; }
  
  .p-albumgift__voices-list { gap: var(--space-4); }
  .p-albumgift__step-title { font-size: var(--font-size-step-title); }
  .p-albumgift__lineup-banner { width: 85rem; }
}