@charset "UTF-8";
/* ============================================================
   広島専用ページ「広島で選ぶ結婚指輪」
   デザイン出典: Figma 確定版 SP 390 / PC 1440 PDF（2026-10）
   カラー・寸法はPDFのベクターデータから実測:
     インク #212121 / CTA #30483F（試着CTAのみ #454F4A）
     帯 #F5F6F6 / ボイス帯・カード地 #EFF1F0 / 予約帯 #DBDBDB
     ボタン幅342 / FAQカード712 / 価格ボックス523 / コンテンツ列1140
   ============================================================ */

/* SP: 固定ヘッダー分の上余白（common.css の30pxを上書き。platinum-lp と同じ） */
@media only screen and (max-width: 768px) {
  #contents {
    padding-top: 60px;
  }
}

.hrlp {
  --ink: #212121;
  --body: #222222;
  --muted: #3D4140;
  --green: #30483F;
  --green2: #454F4A;
  --band: #F5F6F6;
  --band2: #EFF1F0;
  --gray: #DBDBDB;
  --line: #D9D9D6;
  --white: #FFFFFF;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.hrlp *,
.hrlp *::before,
.hrlp *::after {
  box-sizing: border-box;
}

.hrlp * {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

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

.hrlp picture {
  display: block;
}

.hrlp picture img {
  width: 100%;
}

.hrlp .serif {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* 書体の区別はデザイン画像を受領したセクションにのみ適用する。
   HERO / PRICE: 明朝は .serif を残した2点のみ、それ以外はゴシック。
   セクション見出しの英字キッカー（.hr-kicker）は全セクションでゴシック。
   HIROSHIMA STORE / FAQ: セクション全体ゴシック（.serif を除く）。
   POPULAR: 上記に加えて素材表記のみゴシック、他は明朝のまま。
   画像未受領のセクションは上の .hrlp * の明朝のまま。 */
.hrlp .hr-kicker,
.hrlp .hr-hero,
.hrlp .hr-hero *:not(.serif),
.hrlp .hr-price,
.hrlp .hr-price *:not(.serif),
.hrlp .hr-guide,
.hrlp .hr-guide *:not(.serif),
.hrlp .hr-faq,
.hrlp .hr-faq *:not(.serif),
.hrlp .hr-popular .hr-ring__mat {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.hrlp .hr-container {
  max-width: 1220px;
  /* 実測: コンテンツ列1140 + 左右padding40 */
  margin: 0 auto;
  padding: 0 24px;
}

.hrlp .hr-sec {
  padding: 64px 0;
}

.hrlp .hr-sec--band {
  background: var(--band);
}

.hrlp .hr-sec--band2 {
  background: var(--band2);
}

.hrlp .hr-sec--gray {
  background: var(--gray);
}

.hrlp .sp {
  display: inline;
}

.hrlp .pc {
  display: none;
}

/* --- 見出し共通 --- */
.hrlp .hr-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0 0 10px;
}

.hrlp .hr-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 16px;
  letter-spacing: .02em;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
}

.hrlp .hr-title__sub {
  display: block;
  font-size: 16px;
  margin-top: 4px;
}

.hrlp .hr-lead {
  font-size: 13px;
  color: var(--body);
  margin: 0 0 20px;
}

.hrlp .hr-text {
  font-size: 13px;
  color: var(--body);
  margin: 30px 0 0;
}

/* --- バッジ・CTA・リンク --- */
.hrlp .hr-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  font-size: 13px;
  font-weight: 700;
  margin: 22px 0 0;
}

.hrlp .hr-badges span {
  display: inline-block;
}

.hrlp .hr-badges span+span::before {
  content: "｜";
  margin: 0 10px;
  font-weight: 400;
  color: var(--muted);
}

.hrlp .hr-badges--center {
  justify-content: center;
  margin-top: 20px;
}

/* バッジは全セクション共通でゴシック。
   .hrlp * の明朝が span に直接当たるため、子要素側でも上書きする */
.hrlp .hr-badges,
.hrlp .hr-badges span,
.hrlp .hr-badges span::before {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.hrlp .hr-btn {
  display: block;
  max-width: 342px;
  /* 実測: SP=コンテナ全幅342 / PCも342 */
  margin: 40px auto 0;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  padding: 16px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* ボタンは全セクション共通でゴシック */
}

/* SPのみ: ボタン最大幅を広げる（PCは342pxのまま） */
@media (max-width: 899px) {
  .hrlp .hr-btn { max-width: 600px; }
}

.hrlp .hr-btn--dark {
  background: var(--green);
  color: var(--white);
}

.hrlp .hr-btn--dark2 {
  background: var(--green2);
  color: var(--white);
}

.hrlp .hr-btn--line {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--ink);
}

.hrlp .hr-btn:hover {
  opacity: .85;
}

.hrlp .hr-arrowlink {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.hrlp .hr-arrowlink::after {
  content: "\00a0\2192";
}

.hrlp .hr-mat .hr-arrowlink {
  font-size: 12px;
}

.hrlp .hr-mat .hr-arrowlink::after {
  content: "\00a0\00a0\203A";
}

.hrlp .hr-ulink {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: 16px;
}

/* ============ HERO ============
   実測 SP: ブランドy14 → h1 y64(24px) → サブ → リード → キャッチ(30px)
            → 写真326×229 → バッジ中央。帯 0..764
   実測 PC: ブランドy116 → (余白163) → h1 y323(40px) → サブ ｜ 右に写真565×397(y204)
            → キャッチ(34px) → リード → バッジ左。帯 0..952 */
.hrlp .hr-hero {
  background: var(--band);
  padding: 16px 0 44px;
}

.hrlp .hr-hero__brand {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
}

.hrlp .hr-hero__access {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.hrlp .hr-hero__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 28px 0 0;
  letter-spacing: .02em;
}

.hrlp .hr-hero__sub {
  font-size: 15px;
  color: var(--body);
  margin: 6px 0 0;
}

.hrlp .hr-hero__lead {
  font-size: 14px;
  color: var(--body);
  margin: 36px 0 0;
}

.hrlp .hr-hero__catch {
  font-size: 30px;
  font-weight: 600;
  margin: 28px 0 0;
  letter-spacing: .04em;
}

.hrlp .hr-hero__img {
  margin: 24px 0 0;
}

.hrlp .hr-hero__badges {
  justify-content: center;
  margin-top: 27px;
}

/* ============ PRICE ============ */
.hrlp .hr-price__box {
  background: var(--band2);
  text-align: left;
  /* 実測: SPも金額・注記は左揃え */
  padding: 20px 24px;
  /* 左端を本文（コンテナpadding24px）に合わせる */
  margin: 8px -24px 28px;
  /* 実測: SPは全幅帯 */
}

.hrlp .hr-price__num {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  margin: 0 0 15px;
}

.hrlp .hr-price__note {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}

.hrlp .hr-price__tiers {
  margin: 28px 0 0;
}

/* 実測: お支払い注記は本文より小さく、少し内側から始まる */
.hrlp .hr-price__pay {
  font-size: 12px;
}

.hrlp .hr-tier {
  background: var(--band2);
  border-left: 3px solid var(--ink);
  padding: 14px 18px;
  margin: 0 0 14px;
}

.hrlp .hr-tier__range {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
}

.hrlp .hr-tier__ex {
  font-size: 13px;
  color: var(--body);
  margin: 0;
}

.hrlp .hr-price__consult {
  margin: 44px 0 0;
}

.hrlp .hr-price__consult-img {
  margin: 0;
}

.hrlp .hr-price__consult-text {
  margin: 22px 0 0;
}

.hrlp .hr-consult__catch {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 20px;
}

.hrlp .hr-price__consult-text p:not(.hr-consult__catch) {
  font-size: 13px;
  color: var(--body);
  margin: 0;
}

/* ============ POPULAR ============ */
.hrlp .hr-rings {
  list-style: none;
  margin: 0 -20px;
  /* 実測: SPは左右4pxまでブリード */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px 7px;
  /* 実測 */
}

.hrlp .hr-ring {
  background: var(--band2);
  padding: 10px 10px 9px;
  /* 実測: 写真は10pxインセット */
}

.hrlp .hr-ring picture img {
  aspect-ratio: 800 / 666;
  object-fit: cover;
}

.hrlp .hr-ring__name {
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0 0;
}

.hrlp .hr-ring__name span {
  font-size: 11px;
  margin-left: 10px;
}

.hrlp .hr-ring__mat {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}

.hrlp .hr-ring__price {
  font-size: 13px;
  margin: 5px 0 0;
}

.hrlp .hr-ring--ring_lechic {
  order: 1;
}

/* 実測: SPの並びは Bell/Lune/Trait/Le chic */

/* ============ STORE（体験） ============
   実測: 写真→テキストの交互2行。SPは縦積み、PCは各行2カラム（写真左・テキスト中央揃え右） */
.hrlp .hr-store__row {
  margin: 24px 0 0;
}

/* 実測: SPは2枚目の写真だけ幅270pxで右寄せ */
.hrlp .hr-store__row+.hr-store__row .hr-store__rowimg {
  max-width: 270px;
  margin-left: auto;
}

.hrlp .hr-store__rowtext {
  margin: 24px 0 0;
}

.hrlp .hr-store__rowtext p {
  font-size: 13px;
  margin: 0 0 14px;
  color: var(--body);
}

.hrlp .hr-store__rowtext p.hr-badges {
  margin: 20px 0 0;
  /* 上の p 指定に勝たせる */
  color: var(--ink);
}

/* SPのみ: 試着CTAまわりの余白（PCは従来どおり） */
@media (max-width: 899px) {
  .hrlp .hr-store {
    padding-bottom: 44px;
  }

  /* 実測: バッジ→セクション下端は詰める */
  .hrlp .hr-store__rowtext .hr-btn {
    margin-top: 14px;
  }

  /* 実測: 文→ボタンは詰める */
  .hrlp .hr-store__rowtext .hr-badges span+span::before {
    margin: 0 16px;
  }

  /* 実測: 区切りの左右が広い */
}

/* ============ MATERIAL ============ */
.hrlp .hr-mats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hrlp .hr-mat {
  margin: 0 0 32px;
}

.hrlp .hr-mat picture {
  max-width: 224px;
  /* 実測: 写真は224×140、列内で右寄り */
  margin: 0 12px 0 auto;
}

.hrlp .hr-mat picture img {
  aspect-ratio: 224 / 140;
  object-fit: cover;
}

.hrlp .hr-mat__name {
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0 0 24px;
  /* 実測: テキストは写真の下で少しインデント */
}

.hrlp .hr-mat__desc {
  font-size: 12px;
  color: var(--body);
  margin: 0 0 6px 24px;
}

.hrlp .hr-mat .hr-arrowlink {
  margin-left: 24px;
}

.hrlp .hr-note {
  background: var(--white);
  border: 2px solid #F5F6F6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  margin: 40px auto 0;
  /* SPはコンテナ全幅342（実測） */
  padding: 15px;
  max-width: 470px;
}

.hrlp .hr-note__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 10px;
  position: relative;
}

/* 実測: 罫線はボックス幅いっぱいではなく約半分 */
.hrlp .hr-note__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 230px;
  max-width: 100%;
  border-bottom: 1px solid #3D4140;
}

.hrlp .hr-note p:not(.hr-note__title) {
  font-size: 11px;
  color: var(--body);
  margin: 0;
}

/* SPのみ: MATERIAL〜PEACEの余白（PCは従来どおり） */
@media (max-width: 899px) {
  .hrlp .hr-material {
    padding-bottom: 28px;
  }

  /* 実測: 注記ボックス→セクション下端 */
  .hrlp .hr-peace {
    padding-top: 40px;
  }

  /* 実測: セクション上端→PEACE OF MIND */
  .hrlp .hr-mat__name {
    margin-top: 4px;
  }

  /* 実測: 写真→名称は詰める */
  .hrlp .hr-mat__desc {
    margin-bottom: 2px;
  }

  /* 実測: 説明→詳しくみる */
  .hrlp .hr-note {
    padding-top: 12px;
  }

  .hrlp .hr-note__title {
    padding-bottom: 7px;
  }

  /* 実測: 見出し→罫線 */
}

/* ============ PEACE OF MIND ============ */
.hrlp .hr-peace__head-img {
  margin: 24px 0 0;
}

.hrlp .hr-peace__cols {
  background: var(--band);
  /* 実測: SPも01〜03をグレー帯で包む（左右15px） */
  margin: 40px -9px 0;
  padding: 4px 16px 32px;
}

.hrlp .hr-peace__col {
  padding: 28px 0 0;
}

.hrlp .hr-peace__col+.hr-peace__col {
  border-top: 1px solid var(--line);
  margin-top: 28px;
}

.hrlp .hr-peace__no {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 10px;
}

.hrlp .hr-peace__h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 22px 0 30px;
  line-height: 1.5;
  text-align: center;
  /* 実測: SPは見出しも中央揃え */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
}

.hrlp .hr-peace__txt {
  font-size: 14px;
  font-weight: 700;
  color: var(--body);
  margin: 0 0 16px;
  text-align: center;
  /* 実測: 本文は中央揃え */
}

.hrlp .hr-peace__colimg {
  margin: 0 0 16px;
}

.hrlp .hr-peace__colimg img {
  aspect-ratio: 278 / 155;
  object-fit: cover;
}

/* 実測 */
.hrlp .hr-peace__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hrlp .hr-peace__cards li {
  background: var(--white);
  /* 実測: 枠線なしの白カード */
  text-align: center;
  padding: 12px 6px;
}

.hrlp .hr-peace__cards strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.hrlp .hr-peace__cards span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

.hrlp .hr-peace__meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  margin: 14px 0 0;
  text-align: center;
}

.hrlp .hr-peace__col .hr-ulink {
  display: block;
  text-align: center;
}

/* 実測: リンクはゴシック（.hrlp * の明朝を上書き） */
.hrlp .hr-peace .hr-ulink {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.hrlp .hr-checklist {
  list-style: none;
  margin: 0 auto;
  padding: 18px 20px;
  background: var(--white);
  /* 実測: グレー帯上の白ボックス w271 */
  max-width: 271px;
}

.hrlp .hr-checklist li {
  font-size: 14px;
  padding-left: 26px;
  position: relative;
}

.hrlp .hr-checklist li+li {
  margin-top: 8px;
}

.hrlp .hr-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
}

/* 実測: チェックボックスは空の四角（チェックマークなし） */
.hrlp .hr-peace__col .hr-btn {
  margin-top: 22px;
  max-width: 208px;
  /* 実測: LINEボタンはSP/PCとも小さめ */
}

/* ============ ORDER FLOW ============ */
.hrlp .hr-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.hrlp .hr-step {
  background: var(--white);
  border: 1px solid var(--ink);
  padding: 20px 20px 18px;
  margin: 0 0 20px;
}

.hrlp .hr-step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ink);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 14px;
  margin: 0 0 12px;
  font-family: "Noto Sans JP", serif !important;
}

.hrlp .hr-step__no {
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.hrlp .hr-step__txt {
  font-size: 14px;
  color: var(--body);
  margin: 0;
  font-family: "Noto Sans JP", serif !important;
}

.hrlp .hr-flow__foot {
  margin: 36px 0 0;
}

.hrlp .hr-flow__link {
  text-align: center;
  margin: 24px 0 0;
}

/* 補足文とリンクはゴシック（.hrlp * の明朝を上書き） */
.hrlp .hr-flow .hr-text,
.hrlp .hr-flow__link,
.hrlp .hr-flow__link .hr-arrowlink,
.hrlp .hr-flow__link .hr-arrowlink::after {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* SPのみ: PEACE下端〜ORDER FLOW冒頭の余白（PCは従来どおり） */
@media (max-width: 899px) {
  .hrlp .hr-peace { padding-bottom: 32px; }     /* 実測: グレー帯→セクション下端 */
  .hrlp .hr-peace__cols { padding-bottom: 36px; } /* 実測: LINEボタン→グレー帯下端 */
  .hrlp .hr-flow { padding-top: 48px; }         /* 実測: セクション上端→ORDER FLOW */
  .hrlp .hr-flow .hr-lead { margin-bottom: 14px; } /* 実測: リード→01の箱 */
  .hrlp .hr-step { padding: 13px 15px 18px; }   /* 実測: 箱→見出し枠 */
  .hrlp .hr-step__head { padding: 5px 4px; }    /* 実測: 見出し枠は低め・01が左端寄り */
}

/* ============ RELATED ============ */
.hrlp .hr-related__sub {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 18px;
}

.hrlp .hr-related__img {
  margin: 28px 0 0;
}

/* SPはボタンを写真の下に置く（PCはテキスト列内のボタンを表示） */
.hrlp .hr-related__btn--sp { display: none; }
@media (max-width: 899px) {
  .hrlp .hr-related { padding-bottom: 36px; }        /* 実測: ボタン→セクション下端 */
  .hrlp .hr-related__btn--pc { display: none; }
  .hrlp .hr-related__btn--sp { display: block; margin-top: 16px; } /* 実測: 写真→ボタン */
  .hrlp .hr-related__img { margin-top: 16px; }       /* 実測: 本文→写真 */
}

/* 本文はゴシック（.hrlp * の明朝を上書き） */
.hrlp .hr-related .hr-text {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ============ VOICE ============ */
.hrlp .hr-voice__inner {
  text-align: left;
}

/* ============ STORE GUIDE ============ */
.hrlp .hr-guide__img {
  margin: 8px 0 24px;
}

.hrlp .hr-guide__img picture {
  max-width: 291px;
  /* 実測: SPは291×219センター */
  margin: 0 auto;
}

.hrlp .hr-guide__img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hrlp .hr-guide__name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
}

.hrlp .hr-guide__lines {
  font-size: 14px;
  color: var(--body);
  line-height: 1.75;
  margin: 0;
}

.hrlp .hr-guide__lines a {
  color: inherit;
  text-decoration: none;
}

.hrlp .hr-guide__indent {
  padding-left: 5.8em;
}

.hrlp .hr-guide__note {
  margin-top: 24px;
}

.hrlp .hr-guide__btns .hr-btn+.hr-btn {
  margin-top: 16px;
}

/* ============ FAQ ============ */
.hrlp .hr-qa {
  background: var(--white);
  margin: 0 0 16px;
}

.hrlp .hr-qa__q {
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  padding: 20px 52px 20px 22px;
  position: relative;
}

.hrlp .hr-qa__q::-webkit-details-marker {
  display: none;
}

.hrlp .hr-qa__q::before,
.hrlp .hr-qa__q::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--ink);
}

.hrlp .hr-qa__q::after {
  transform: rotate(90deg);
}

.hrlp .hr-qa[open] .hr-qa__q::after {
  display: none;
}

.hrlp .hr-qa__a {
  font-size: 14px;
  color: var(--body);
  margin: 0;
  padding: 0 22px 20px;
}

/* SPのみ: FAQの文字サイズ・＋アイコン（PCは上の指定のまま） */
@media (max-width: 899px) {
  .hrlp .hr-qa__q,
  .hrlp .hr-qa__a { font-size: 12px; }
  .hrlp .hr-qa__q { padding: 20px 35px 20px 15px; }
  .hrlp .hr-qa__q::before,
  .hrlp .hr-qa__q::after {
    width: 10px;
    right: 15px;
  }
  .hrlp .hr-faq { padding-bottom: 28px; }      /* 実測: 最後のQ→セクション下端 */
  .hrlp .hr-qa:last-child { margin-bottom: 0; }
}

/* ============ RESERVATION ============ */
.hrlp .hr-reserve__inner {
  text-align: center;
}

.hrlp .hr-kicker--line {
  color: var(--ink);
}

.hrlp .hr-kicker--line::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--ink);
  margin: 12px auto 0;
}

.hrlp .hr-reserve__title {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.6;
  margin: 20px 0 18px;
  letter-spacing: .04em;
}

.hrlp .hr-badges--foot {
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--body);
}

/* SPのみ: デザインに合わせて左揃え・罫線なし・行間を詰める（PCは従来どおり） */
@media (max-width: 899px) {
  .hrlp .hr-reserve { padding: 46px 0 48px; }  /* 実測: 上端→RESERVATION / バッジ→下端 */
  .hrlp .hr-reserve__inner { text-align: left; }
  .hrlp .hr-reserve .hr-kicker {
    line-height: 1;
    margin: 0;
  }
  .hrlp .hr-reserve .hr-kicker--line::after { display: none; }
  .hrlp .hr-reserve__title {
    line-height: 1.45;
    letter-spacing: 0;
    margin: 14px 0 0;
  }
  .hrlp .hr-reserve .hr-text {
    line-height: 1.45;
    margin: 14px 0 0;
  }
  .hrlp .hr-reserve .hr-btn {
    margin-top: 13px;
    padding: 16px 12px; /* 実測: 高さ48px */
  }
  .hrlp .hr-reserve .hr-badges--foot {
    font-size: 10px;
    line-height: 1.1;
    margin-top: 14px;
  }
  .hrlp .hr-reserve .hr-badges--foot span + span::before { margin: 0 2px; }
}

/* ============================================================
   PC（デザイン: PC 1440）
   ============================================================ */
@media (min-width: 900px) {
  .hrlp {
    font-size: 16px;
  }

  .hrlp .sp {
    display: none;
  }

  .hrlp .hr-sec {
    padding: 50px 0;
  }

  .hrlp .hr-container {
    padding: 0 40px;
  }

  .hrlp .hr-title {
    font-size: 30px;
    /* 実測 */
    margin: 0 0 25px;
  }

  .hrlp .hr-lead {
    font-size: 15px;
    margin-bottom: 40px;
  }

  .hrlp .hr-peace .hr-lead {
    font-size: 16px;
    margin-bottom: 0;
  }

  /* 本文・注記はPCのみ従来サイズ（上の指定はSP用） */
  .hrlp .hr-text {
    font-size: 15px;
  }

  .hrlp .hr-price__consult-text p:not(.hr-consult__catch) {
    font-size: 14px;
  }

  .hrlp .hr-price__pay {
    font-size: 15px;
  }

  /* ボタンはPCのみ従来サイズ（上の指定はSP用） */
  .hrlp .hr-btn {
    font-size: 15px;
    line-height: normal;
    font-weight: 700;
    padding: 13px 12px;
    /* 実測: 高さ48px */
  }

  /* HERO: 左テキスト列・右に横長写真（グリッドエリアで実測レイアウトを再現） */
  .hrlp .hr-hero {
    padding: 84px 0 56px;
  }

  /* パンくず→ブランド名 */
  .hrlp .hr-hero__inner {
    display: grid;
    grid-template-columns: 1fr 565px;
    grid-template-areas:
      "brand image"
      "title image"
      "sub   image"
      "catch catch"
      "lead  lead"
      "badges badges";
    grid-template-rows: auto auto 1fr auto auto auto;
    column-gap: 48px;
  }

  .hrlp .hr-hero__brand {
    font-size: 20px;
    /* 実測: h1との比率 1.07 */
  }

  .hrlp .hr-hero__brand-block {
    grid-area: brand;
  }

  .hrlp .hr-hero__title {
    grid-area: title;
    font-size: 34px;
    /* 実測 */
    margin-top: 108px;
    /* ブランド下の余白 */
  }

  .hrlp .hr-hero__access {
    font-size: 20px;
  }

  .hrlp .hr-hero__sub {
    grid-area: sub;
    font-size: 24px;
    /* 実測: h1より行長が長い */
    line-height: 1.5;
    /* 実測: 2行が詰まって見える */
    margin-top: 36px;
    align-self: start;
  }

  .hrlp .hr-hero__img {
    grid-area: image;
    margin: 42px 0 0;
    /* 実測: 写真天はブランド行とほぼ同じ高さ（y158） */
    align-self: start;
  }

  .hrlp .hr-hero__catch {
    grid-area: catch;
    font-size: 26px;
    /* 実測 */
    margin-top: 68px;
    /* 写真下端→キャッチ */
  }

  .hrlp .hr-hero__lead {
    grid-area: lead;
    font-size: 22px;
    /* 実測: 2行目がコンテンツ幅の約85%まで伸びる */
    margin-top: 42px;
  }

  .hrlp .hr-hero__badges {
    grid-area: badges;
    justify-content: flex-start;
    margin-top: 14px;
    font-size: 20px;
    /* 実測 */
  }

  /* PRICE */
  .hrlp .hr-price .hr-lead {
    margin-bottom: 20px;
  }

  /* 実測: リード→ボックスは詰まっている */
  .hrlp .hr-price__box {
    max-width: 523px;
    /* 実測 */
    margin: 8px 0 32px;
    text-align: left;
    /* 実測: 金額と注記の左端が揃う */
    padding: 24px 32px 24px 64px;
    /* 実測: 箱の高さ 143px → 128px */
  }

  .hrlp .hr-price__num {
    font-size: 40px;
    /* 実測: 箱幅の約64%を占める（現状56%） */
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .hrlp .hr-price__note {
    font-size: 15px;
    /* 実測 */
    line-height: 1.6;
  }

  .hrlp .hr-price__tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 342px));
    /* 実測: 342×3 */
    gap: 23px;
    /* 実測 */
  }

  .hrlp .hr-tier {
    margin: 0;
  }

  /* PCのみ お支払い文 → 婚約指輪ボタン の順（SPはボタン → お支払い文） */
  .hrlp .hr-price__eng {
    display: flex;
    flex-direction: column;
  }

  .hrlp .hr-price__eng .hr-price__pay {
    order: -1;
  }

  .hrlp .hr-price__eng .hr-btn {
    width: 100%;
  }

  .hrlp .hr-price__consult {
    display: grid;
    grid-template-columns: 392px 1fr;
    /* 実測 */
    gap: 25px;
    align-items: center;
    margin: 64px auto 0;
    max-width: 760px;
  }

  .hrlp .hr-price__consult-img {
    margin: 0;
  }

  .hrlp .hr-price__consult-text {
    margin: auto 0 0 0;
  }

  .hrlp .hr-consult__catch {
    font-size: 16px;
    margin: 0 0 30px;
  }

  /* POPULAR: 4カラム（実測: カード187×4 + 間37 = 全体859 センター） */
  .hrlp .hr-rings {
    grid-template-columns: repeat(4, 1fr);
    gap: 37px;
    max-width: 860px;
    margin: 0 auto;
  }

  .hrlp .hr-ring--ring_lechic {
    order: 0;
  }

  /* PCの並びは Bell/Lune/Le chic/Trait */

  /* STORE 体験: 写真左・テキスト右の2行（実測: 写真467px、テキスト中央揃え） */
  .hrlp .hr-store__row {
    display: grid;
    grid-template-columns: 467px 1fr;
    gap: 64px;
    align-items: end;
    margin-top: 32px;
  }

  .hrlp .hr-store__row+.hr-store__row .hr-store__rowimg {
    max-width: none;
    margin-left: 0;
  }

  .hrlp .hr-store__rowtext {
    margin: 0;
    text-align: center;
  }

  .hrlp .hr-store__rowtext p {
    font-size: 15px;
  }

  /* PCは従来サイズ（上の13pxはSP用） */
  .hrlp .pc {
    display: inline;
  }

  /* MATERIAL: 3カラム */
  .hrlp .hr-mats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
    max-width: 1100px;
    margin: auto;
  }

  .hrlp .hr-mat {
    margin: 0;
  }

  .hrlp .hr-mat__name {
    margin-left: 17px;
  }

  /* 実測: PCのインデントは17px */
  .hrlp .hr-mat__desc {
    margin-left: 17px;
  }

  .hrlp .hr-mat .hr-arrowlink {
    margin-left: 17px;
  }

  /* PEACE: ヘッダ2カラム + 3カラム */

  .hr-peace-container {
    max-width: 1350px !important;
    padding: 0 !important;
  }

  .hrlp .hr-peace__head {
    display: grid;
    grid-template-columns: 1fr 437px;
    /* 実測: 写真437×262 */
    gap: 64px;
    align-items: center;
  }

  .hrlp .hr-peace__head-img {
    margin: 0;
  }

  .hrlp .hr-peace__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 72px 0 0;
    padding: 48px 0;
  }

  .hrlp .hr-peace__col {
    padding: 0 70px;
  }

  .hrlp .hr-peace__h3 {
    text-align: left;
  }

  /* PCは見出し左揃え */
  .hrlp .hr-peace__col+.hr-peace__col {
    border-top: 0;
    margin-top: 0;
    border-left: 1px solid var(--line);
  }

  .hrlp .hr-checklist {
    margin: 0 auto;
  }

  .hrlp .hr-peace__txt {
    font-size: 13px;
  }

  /* ORDER FLOW: 3+2 グリッド（実測: 箱342 間55/行50） */
  .hrlp .hr-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 55px;
  }

  .hrlp .hr-step {
    margin: 0;
    position: relative;
  }

  /* ステップ間の▷（実測: 19px・ギャップ55px中央・カード上下中央。行またぎ03→04には無し） */
  .hrlp .hr-step:nth-child(1)::after,
  .hrlp .hr-step:nth-child(2)::after,
  .hrlp .hr-step:nth-child(4)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 18px);
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpolygon points='1.5,1.5 17,9.5 1.5,17.5' fill='none' stroke='%23212121' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  .hrlp .hr-flow__foot {
    display: grid;
    grid-template-columns: 427px 1fr;
    /* 実測: 写真427×257 */
    gap: 64px;
    align-items: center;
    margin-top: 56px;
    max-width: 820px;
    margin: 64px auto 0;
  }

  .hrlp .hr-step__txt {
    font-size: 13px;
  }

  .hrlp .hr-flow__img {
    margin: 0;
  }

  .hrlp .hr-flow__link {
    text-align: left;
    margin: 0;
  }

  /* RELATED: 左テキスト・右画像（実測: 写真470×308） */
  .hrlp .hr-related__grid {
    display: grid;
    grid-template-columns: 1fr 470px;
    gap: 64px;
    align-items: center;
  }

  .hrlp .hr-related__img {
    margin: 0;
  }

  /* .hrlp .hr-related__grid .hr-btn { margin-left: 0; } */

  /* VOICE: センター */
  .hrlp .hr-voice__inner {
    text-align: left;
  }

  .hr-voice .hr-text {
    text-align: center;
  }

  /* STORE GUIDE: 左画像・右情報（実測: 写真382×287、グループは中央寄り） */

  .hrlp .hr-guide .hr-title {
    margin: 0 0 55px;
  }

  .hrlp .hr-guide__lines {
    line-height: 18px;
  }

  .hrlp .hr-guide__grid {
    display: grid;
    grid-template-columns: 382px 1fr;
    gap: 56px;
    align-items: end;
    margin-top: 16px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
  }

  .hrlp .hr-guide__img {
    margin: 0;
  }

  .hrlp .hr-guide__img picture {
    max-width: 382px;
    margin: 0;
  }

  .hrlp .hr-guide__note {
    text-align: center;
    margin-top: 50px;
  }

  .hrlp .hr-guide__btns {
    max-width: 342px;
    margin: 0 auto;
  }

  /* FAQ: 実測: 見出し列790 / カード712 センター */
  .hrlp .hr-faq__inner {
    max-width: 838px;
  }

  .hrlp .hr-qa {
    max-width: 712px;
    margin: 0 auto 16px;
  }

  /* RESERVATION（実測: ボタン高さ63） */
  .hrlp .hr-reserve__title {
    font-size: 30px;
  }

  .hrlp .hr-reserve .hr-btn {
    padding: 19px 12px;
  }
}