@charset "UTF-8";
/* ==========================================================================
   GINZA RASIN 店舗取り寄せページ（/review/backorder/）
   対象: #wrapper.review_site 内 .backorder_wrap（FV / 紹介文 / merit / How to order / お取り寄せフォーム）
   2026-09-26: 6. レスポンシブ を見直し（SP: 見出し1行化・FVサブタイトル・店舗ラジオ2列・入力欄16px、タブレット調整を追加）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 変数・ベース
   -------------------------------------------------------------------------- */
.review_site .backorder_wrap {
  --bo-black: #1b1b1b;
  --bo-text: #333333;
  --bo-sub: #666666;
  --bo-line: #e3e3e3;
  --bo-bg: #f5f5f5;
  --bo-accent: #7f95bf;
  /* イラストのブルーグレー */
  --bo-accent-light: #e9eef7;
  --bo-gold: #b5a26a;
  /* イラストのゴールド */
  --bo-red: #c62828;
  font-family: "NotoSansJP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: var(--bo-text);
  margin: 24px 0 0;
  -webkit-font-smoothing: antialiased;
}

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

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

.review_site .backorder_wrap p:empty {
  display: none;
}

.review_site .backorder_wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.review_site .backorder_wrap h1,
.review_site .backorder_wrap h2,
.review_site .backorder_wrap h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  line-height: 1.4;
}

.review_site .backorder_wrap .width1090 {
  width: 100%;
  max-width: 1012px;
  margin: 0 auto;
}

/* テンプレート側の空段落（<p><br></p>）を非表示 */
.review_site .site-main>p:has(> br:only-child) {
  display: none;
}

/* --------------------------------------------------------------------------
   1. ファーストビュー
   -------------------------------------------------------------------------- */
.review_site .backorder_fv_wrap {
  position: relative;
  overflow: hidden;
  padding: 64px 32px 56px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(135deg, #262626 0%, #101010 100%);
}

.review_site .backorder_fv_wrap::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(181, 162, 106, .45);
  pointer-events: none;
}

.review_site .backorder_fv_wrap>p,
.review_site .backorder_fv_text-box>p {
  display: none;
}

.review_site .backorder_fv_text-box {
  position: relative;
  z-index: 1;
}

.review_site .backorder_fv_subtitle p {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: .06em;
  color: #e6dcc0;
}

.review_site .backorder_fv_title h1 {
  margin: 0 0 18px;
  font-size: 34px;
  letter-spacing: .12em;
  color: #fff;
}

.review_site .backorder_fv_title>p {
  margin: 0;
  line-height: 1;
}

.review_site .backorder_fv_description {
  display: inline-block;
}

.review_site .backorder_fv_description img {
  width: 237px;
  height: auto;
  opacity: .9;
}

/* --------------------------------------------------------------------------
   2. 紹介文
   -------------------------------------------------------------------------- */
.review_site .introductory-sentence {
  padding: 56px 24px 24px;
  text-align: center;
}

.review_site .introductory-sentence p {
  margin: 0;
  font-size: 15.5px;
  line-height: 2.1;
}

.review_site .introductory-sentence p.introductory-sentence_title {
  display: inline-block;
  position: relative;
  margin: 36px 0 14px;
  padding: 0 28px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--bo-black);
}

.review_site .introductory-sentence p.introductory-sentence_title::before,
.review_site .introductory-sentence p.introductory-sentence_title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 32px;
  background: var(--bo-black);
}

.review_site .introductory-sentence p.introductory-sentence_title::before {
  left: 0;
  transform: translateY(-50%) rotate(-30deg);
}

.review_site .introductory-sentence p.introductory-sentence_title::after {
  right: 0;
  transform: translateY(-50%) rotate(30deg);
}

/* --------------------------------------------------------------------------
   3. merit（3つのメリット）
   -------------------------------------------------------------------------- */
.review_site .three-advantages {
  padding: 40px 0 72px;
}

.review_site .three-advantages h2 {
  margin: 0 0 40px;
  text-align: center;
}

.review_site .three-advantages h2 img {
  width: 202px;
}

.review_site .three-advantages ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review_site .three-advantages li {
  padding: 28px 24px 30px;
  background: #fff;
  border: 1px solid var(--bo-line);
  border-radius: 8px;
  text-align: center;
}

.review_site .three-advantages li>br {
  display: none;
}

.review_site .three-advantages li img {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto 18px;
}

.review_site .three-advantages li h3 {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--bo-black);
}

.review_site .three-advantages li h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--bo-gold);
}

.review_site .three-advantages li p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
}

/* --------------------------------------------------------------------------
   4. How to order（ご利用方法）
   -------------------------------------------------------------------------- */
.review_site .howtoorder_wrap {
  padding: 0 0 72px;
}

.review_site .howtoorder_wrap>h2 {
  margin: 0 0 8px;
  text-align: center;
}

.review_site .howtoorder_wrap>h2 img {
  width: 100%;
  max-width: 800px;
}

.review_site .howtoorder_inner ul {
  border-top: 1px solid var(--bo-line);
}

.review_site .howtoorder_inner li {
  display: grid;
  grid-template-columns: 72px 380px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 32px;
  align-items: start;
  padding: 40px 8px;
  border-bottom: 1px solid var(--bo-line);
}

/* STEP番号 */
.review_site .howtoorder_inner li>span {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bo-black);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-align: center !important;
}

.review_site .howtoorder_inner li>span::before {
  content: "STEP";
  margin-bottom: 3px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--bo-gold);
}

/* 画像 */
.review_site .howtoorder_inner li>div {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.review_site .howtoorder_inner li>div img {
  width: 100% !important;
  max-width: 380px;
  border: 1px solid var(--bo-line) !important;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

/* 説明文 */
.review_site .howtoorder_inner li>p {
  grid-column: 3;
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 2;
}

.review_site .howtoorder_inner li>p:first-of-type {
  padding-top: 6px;
}

.review_site .howtoorder_inner li>p b {
  font-weight: 700;
  color: var(--bo-black);
}

/* 注記（inline style 付きの p） */
.review_site .howtoorder_inner li>p[style] {
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--bo-bg);
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.8;
  color: var(--bo-sub) !important;
}

.review_site .howtoorder_inner li>p[style*="red"] {
  background: #fdf0ef;
  color: var(--bo-red) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   5. Contact Form（お取り寄せフォーム）
   -------------------------------------------------------------------------- */
.review_site .backorder_contact_form {
  padding: 0 0 40px;
}

.review_site .backorder_contact_form h2#form {
  margin: 0 0 40px;
  text-align: center;
}

.review_site .backorder_contact_form h2#form img {
  width: 100%;
  max-width: 800px;
}

.review_site .backorder_contact_form h2#form br {
  display: none;
}

.review_site .backorder_contact_form h3 {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--bo-black);
  font-size: 17px;
  line-height: 1.3;
  color: var(--bo-black);
}

.review_site .backorder_contact_form>.width1090>ul {
  margin: 0 0 40px !important;
  padding: 18px 24px !important;
  list-style: none !important;
  background: var(--bo-bg);
  border-radius: 8px;
}

.review_site .backorder_contact_form>.width1090>ul li {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--bo-sub);
}

/* --- フォーム本体（MW WP Form / g-naked） --- */
.review_site .backorder_wrap .mw_wp_form {
  padding: 40px 48px 44px;
  background: #fff;
  border: 1px solid var(--bo-line);
  border-radius: 10px;
}

.review_site .backorder_wrap .mw_wp_form .g-naked-item {
  margin: 0 0 26px;
  font-size: 15px;
  font-weight: 700;
  /* 項目名（テキストノード）用 */
  line-height: 1.6;
  color: var(--bo-black);
}

/* 必須バッジ */
.review_site .backorder_wrap .mw_wp_form .g-naked-item .require {
  display: inline-block;
  margin-left: 8px;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}

.review_site .backorder_wrap .mw_wp_form .g-naked-item .require::before {
  content: "必須";
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--bo-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}

/* テキスト入力 */
.review_site .backorder_wrap .mw_wp_form input[type="text"],
.review_site .backorder_wrap .mw_wp_form input[type="email"],
.review_site .backorder_wrap .mw_wp_form input[type="tel"],
.review_site .backorder_wrap .mw_wp_form input[type="number"] {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 48px;
  margin-top: 8px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--bo-text);
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color .2s, box-shadow .2s;
}

.review_site .backorder_wrap .mw_wp_form input::placeholder {
  color: #aaa;
  font-weight: 400;
}

.review_site .backorder_wrap .mw_wp_form input[type="text"]:focus,
.review_site .backorder_wrap .mw_wp_form input[type="email"]:focus,
.review_site .backorder_wrap .mw_wp_form input[type="tel"]:focus,
.review_site .backorder_wrap .mw_wp_form input[type="number"]:focus,
.review_site .backorder_wrap .mw_wp_form select:focus {
  outline: none;
  border-color: var(--bo-accent);
  box-shadow: 0 0 0 3px var(--bo-accent-light);
}

.review_site .backorder_wrap .mw_wp_form input.hasDatepicker {
  cursor: pointer;
  max-width: 320px;
}

/* お問い合わせ用コード：編集不可（見た目＋操作をロック） */
.review_site .backorder_wrap .mw_wp_form #code {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-modify: read-only;
  background: #f0f0f0;
  color: #777;
  border-color: #e0e0e0;
  box-shadow: none;
  cursor: not-allowed;
}

/* セレクト */
.review_site .backorder_wrap .mw_wp_form select {
  display: inline-block;
  min-width: 160px;
  height: 48px;
  margin-top: 8px;
  padding: 0 40px 0 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--bo-text);
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* ラジオ（店舗選択） */
.review_site .backorder_wrap .mw_wp_form .mwform-radio-field {
  display: inline-block;
  margin: 8px 10px 0 0 !important;
}

.review_site .backorder_wrap .mw_wp_form .mwform-radio-field label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  background: #fff;
  font-size: 15px;
  font-weight: 400;
  color: var(--bo-text);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.review_site .backorder_wrap .mw_wp_form .mwform-radio-field label:hover {
  border-color: var(--bo-accent);
}

.review_site .backorder_wrap .mw_wp_form .mwform-radio-field label:has(input:checked) {
  border-color: var(--bo-black);
  background: var(--bo-black);
  color: #fff;
}

.review_site .backorder_wrap .mw_wp_form .mwform-radio-field input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--bo-black);
}

.review_site .backorder_wrap .mw_wp_form .mwform-radio-field label:has(input:checked) input[type="radio"] {
  accent-color: #fff;
}

/* 注記・エラー */
.review_site .backorder_wrap .mw_wp_form .notes {
  display: block;
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: #888;
}

.review_site .backorder_wrap .mw_wp_form .error {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--bo-red);
}

/* 送信ボタン */
.review_site .backorder_wrap .mw_wp_form .action-buttons {
  margin-top: 36px;
  text-align: center;
}

.review_site .backorder_wrap .mw_wp_form input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  min-width: 320px;
  margin: 0 8px;
  padding: 18px 40px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  color: #fff;
  background: var(--bo-black);
  border: 1px solid var(--bo-black);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  text-shadow: none;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}

.review_site .backorder_wrap .mw_wp_form input[type="submit"]:hover {
  background: #3a3a3a;
  border-color: #3a3a3a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
}

/* 確認画面の「戻る」ボタン */
.review_site .backorder_wrap .mw_wp_form input[type="submit"][name="submitBack"] {
  min-width: 200px;
  color: var(--bo-black);
  background: #fff;
  box-shadow: none;
}

.review_site .backorder_wrap .mw_wp_form input[type="submit"][name="submitBack"]:hover {
  background: var(--bo-bg);
}

/* 確認画面：項目名と入力値の区別（値は通常ウェイト） */
.review_site .backorder_wrap .mw_wp_form_confirm .g-naked-item {
  padding: 14px 0;
  border-bottom: 1px dashed var(--bo-line);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   6. レスポンシブ
   -------------------------------------------------------------------------- */

/* --- タブレット（768〜1023px）：左右に余白を確保し、How to order の画像カラムを縮めて本文幅を確保 --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .review_site .introductory-sentence,
  .review_site .three-advantages,
  .review_site .howtoorder_wrap,
  .review_site .backorder_contact_form {
    padding-left: 24px;
    padding-right: 24px;
  }

  .review_site .howtoorder_inner li {
    grid-template-columns: 64px 300px minmax(0, 1fr);
    column-gap: 24px;
    padding: 32px 8px;
  }

  .review_site .howtoorder_inner li>div img {
    max-width: 300px;
  }
}

/* --- スマートフォン（〜767px） --- */
@media (max-width: 767px) {
  .review_site .backorder_wrap {
    font-size: 14px;
  }

  /* ファーストビュー */
  .review_site .backorder_fv_wrap {
    padding: 44px 24px 40px;
  }

  .review_site .backorder_fv_subtitle p {
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: .02em;
    line-height: 1.7;
    /* 2行に折り返す際、行長を揃えて「無/料」のような不自然な位置で切れにくくする */
    text-wrap: balance;
    line-break: strict;
  }

  .review_site .backorder_fv_title h1 {
    font-size: 24px;
  }

  .review_site .backorder_fv_description img {
    width: 190px;
  }

  /* 紹介文 */
  .review_site .introductory-sentence {
    padding: 40px 16px 16px;
    text-align: left;
  }

  .review_site .introductory-sentence p {
    font-size: 14px;
  }

  /* PC用の改行（<br>）はSPでは無効化し、画面幅で自然に折り返す */
  .review_site .introductory-sentence p:not(.introductory-sentence_title) br {
    display: none;
  }

  /* 見出し「店舗取り寄せサービスとは・・・？」：1行に収めて中央寄せ
     - font-size を画面幅連動（clamp）にし、320px幅でも折り返さないサイズにする
     - 親が text-align:left のため、width:fit-content + margin:auto で中央へ */
  .review_site .introductory-sentence p.introductory-sentence_title {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 28px auto 12px;
    padding: 0 18px;
    font-size: clamp(14px, 4.5vw, 18px);
    letter-spacing: .04em;
    line-height: 1.5;
    text-align: center;
  }

  .review_site .introductory-sentence p.introductory-sentence_title::before,
  .review_site .introductory-sentence p.introductory-sentence_title::after {
    height: 26px;
  }

  /* 3つのメリット */
  .review_site .three-advantages {
    padding: 32px 16px 56px;
  }

  .review_site .three-advantages h2 {
    margin-bottom: 28px;
  }

  .review_site .three-advantages ul {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .review_site .three-advantages li {
    padding: 24px 20px 26px;
  }

  /* How to order */
  .review_site .howtoorder_wrap {
    padding: 0 16px 56px;
  }

  .review_site .howtoorder_inner li {
    display: flex;
    flex-direction: column;
    padding: 28px 0;
  }

  .review_site .howtoorder_inner li>span {
    order: 1;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    font-size: 22px;
  }

  .review_site .howtoorder_inner li>p {
    order: 2;
    font-size: 14px;
  }

  .review_site .howtoorder_inner li>div {
    order: 3;
    margin-top: 16px;
  }

  .review_site .howtoorder_inner li>div img {
    max-width: 100%;
  }

  /* お取り寄せフォーム */
  .review_site .backorder_contact_form {
    padding: 0 16px 24px;
  }

  .review_site .backorder_contact_form>.width1090>ul {
    padding: 14px 16px !important;
  }

  .review_site .backorder_wrap .mw_wp_form {
    padding: 24px 18px 28px;
  }

  .review_site .backorder_wrap .mw_wp_form input[type="text"],
  .review_site .backorder_wrap .mw_wp_form input[type="email"],
  .review_site .backorder_wrap .mw_wp_form input[type="tel"],
  .review_site .backorder_wrap .mw_wp_form input[type="number"],
  .review_site .backorder_wrap .mw_wp_form select {
    max-width: none;
    width: 100%;
    /* iOS Safari はフォーカス時に 16px 未満だと自動ズームするため 16px に */
    font-size: 16px;
  }

  /* 店舗選択ラジオ：2列に整列（項目名＋必須バッジは1行目に、ボタンは2行目以降に） */
  .review_site .backorder_wrap .mw_wp_form .g-naked-item:has(.mwform-radio-field) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
  }

  .review_site .backorder_wrap .mw_wp_form .g-naked-item:has(.mwform-radio-field) .require {
    /* 見た目は変えずに幅だけ確保し、ボタンを次の行へ送る */
    flex: 0 0 50%;
    margin-left: 0;
  }

  .review_site .backorder_wrap .mw_wp_form .mwform-radio-field {
    flex: 0 0 calc(50% - 5px);
    margin: 8px 0 0 !important;
  }

  .review_site .backorder_wrap .mw_wp_form .mwform-radio-field label {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 11px 8px;
    font-size: 14px;
  }

  /* 送信ボタン */
  .review_site .backorder_wrap .mw_wp_form input[type="submit"] {
    width: 100%;
    min-width: 0;
    margin: 8px 0 0;
  }

  .review_site .backorder_wrap .mw_wp_form input[type="submit"][name="submitBack"] {
    margin-top: 12px;
  }
}