/* order.e-eternal-global.com サロン様専用ご注文フォーム
   本サイト(e-eternal-global.com)のデザイントーンに合わせる:
   明朝系フォント / 黒#070707 / 金#a17704 / 生成り#f8f5ef */
:root {
  --ink: #070707;
  --gold: #a17704;
  --gold-soft: #c9a548;
  --bg: #f8f5ef;
  --bg-deep: #f5f0e3;
  --line: #e0d9c8;
  --white: #fff;
  --danger: #b03434;
  --ok: #2e6e46;
  --serif: 'Cardo', 'Noto Serif JP', 'Yu Mincho', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  /* ページが短くてもフッターが最下部に付き、下に背景色が余らないように */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap { flex: 1 0 auto; }
.site-foot { margin-top: auto; }
img { max-width: 100%; }

/* ヘッダー */
.site-head {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 26px 20px 22px;
  text-align: center;
}
.site-head .brand {
  font-family: 'Cardo', serif;
  font-size: 22px;
  letter-spacing: .28em;
  color: var(--ink);
}
.site-head .brand small {
  display: block;
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--gold);
  margin-top: 2px;
}
.page-title {
  text-align: center;
  padding: 44px 20px 10px;
}
.page-title h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .18em;
}
.page-title .en {
  color: var(--gold);
  font-family: 'Cardo', serif;
  font-size: 13px;
  letter-spacing: .3em;
  margin-top: 4px;
}
.page-title .rule {
  width: 46px;
  height: 1px;
  background: var(--gold);
  margin: 18px auto 0;
}

/* レイアウト */
.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 20px 90px;
}
.lead {
  font-size: 14.5px;
  margin-bottom: 30px;
  text-align: center;
}
.lead .warn { color: var(--danger); }

/* セクション */
.sec {
  background: var(--white);
  border: 1px solid var(--line);
  margin-bottom: 34px;
}
.sec > h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .14em;
  padding: 16px 22px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec > h2 .num {
  font-family: 'Cardo', serif;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: .1em;
}
.sec-body { padding: 26px 24px; }

/* 入力列 */
.frow { margin-bottom: 22px; }
.frow:last-child { margin-bottom: 0; }
.frow > label.tt, .frow > .tt {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.req, .opt {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  padding: 1px 9px;
  margin-left: 10px;
  vertical-align: 2px;
}
.req { color: #fff; background: var(--danger); }
.opt { color: var(--gold); border: 1px solid var(--gold); }
input[type=text], input[type=tel], input[type=email], select, textarea {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #cfc7b4;
  background: #fdfcf9;
  border-radius: 0;
  appearance: auto;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
}
.short { max-width: 320px; }
.mid { max-width: 460px; }
.note {
  font-size: 13px;
  color: #6c6455;
  margin-top: 6px;
}

/* 照合 */
.match-btn {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .16em;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 34px;
  cursor: pointer;
  transition: .25s;
}
.match-btn:hover { background: var(--gold); border-color: var(--gold); }
.match-result {
  margin-top: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  display: none;
}
.match-result.ok { display: block; background: #eef5ef; border: 1px solid #b9d4c0; color: var(--ok); }
.match-result.ng { display: block; background: #faf0f0; border: 1px solid #ddb9b9; color: var(--danger); }

/* 商品表 */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td {
  border-bottom: 1px solid var(--line);
  padding: 11px 8px;
  font-size: 14.5px;
  text-align: left;
  vertical-align: middle;
}
.ptable th {
  font-size: 12.5px;
  letter-spacing: .12em;
  color: #6c6455;
  font-weight: 600;
  border-bottom: 1px solid #cfc7b4;
}
.ptable .pgroup {
  background: var(--bg-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gold);
  padding: 8px 10px;
}
.ptable .price { white-space: nowrap; text-align: right; }
.ptable .qty { width: 90px; text-align: center; }
.ptable select { width: 80px; padding: 8px 6px; text-align: center; }
.ptable .sub {
  white-space: nowrap;
  text-align: right;
  font-feature-settings: "tnum";
  width: 120px;      /* 桁数が増えてもテーブル幅が変わらないよう固定 */
  min-width: 120px;
}
.ptable th, .ptable td { overflow: hidden; }
.ptable { table-layout: auto; }
.ptable .price { width: 120px; min-width: 120px; }

/* 合計 */
.totals {
  margin-top: 20px;
  border-top: 1px solid #cfc7b4;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 15px;
}
.totals .row { display: flex; gap: 26px; }
.totals .row .lbl { letter-spacing: .1em; }
.totals .row .val { min-width: 130px; text-align: right; font-feature-settings: "tnum"; }
.totals .grand { font-size: 19px; font-weight: 600; color: var(--gold); }
.ship-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--danger);
}

/* 選択カード(納品先) */
.addr-list { display: flex; flex-direction: column; gap: 12px; }
.addr-card {
  border: 1px solid var(--line);
  background: #fdfcf9;
  padding: 13px 16px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  cursor: pointer;
  transition: .2s;
}
.addr-card:hover { border-color: var(--gold-soft); }
.addr-card.sel { border-color: var(--gold); background: #fbf7ec; }
.addr-card input[type=radio] { margin-top: 7px; accent-color: var(--gold); }
.addr-card .ttl { font-weight: 600; font-size: 14.5px; letter-spacing: .06em; }
.addr-card .dtl { font-size: 13.5px; color: #574f40; }
.newaddr { display: none; margin-top: 18px; padding-top: 6px; border-top: 1px dashed var(--line); }
.newaddr.show { display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* ラジオ・チェック */
.radio-line { display: flex; gap: 26px; flex-wrap: wrap; }
.radio-line label { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.radio-line input, .agree input { accent-color: var(--gold); width: 17px; height: 17px; }
.inline-date { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-date select { width: auto; min-width: 86px; }
.toggle-block { display: none; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.toggle-block.show { display: block; }

/* 同意・送信 */
.agree {
  text-align: center;
  font-size: 15px;
  margin: 8px 0 26px;
}
.agree label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.submit-wrap { text-align: center; }
.submit-btn {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .22em;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 74px;
  cursor: pointer;
  transition: .25s;
}
.submit-btn:hover { background: var(--gold); border-color: var(--gold); }
.submit-btn:disabled { background: #b5ad9d; border-color: #b5ad9d; cursor: not-allowed; }
.back-btn {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
  padding: 15px 44px;
  cursor: pointer;
  margin-right: 14px;
  transition: .25s;
}
.back-btn:hover { background: var(--bg-deep); }

/* 確認画面 */
.cf-table { width: 100%; border-collapse: collapse; }
.cf-table th, .cf-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  font-size: 14.5px;
  text-align: left;
  vertical-align: top;
}
.cf-table th { width: 34%; background: var(--bg-deep); font-weight: 600; letter-spacing: .06em; }
.err-box {
  background: #faf0f0;
  border: 1px solid #ddb9b9;
  color: var(--danger);
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: 14.5px;
}

/* 完了ページのお知らせコンテンツ(動画・キャンペーン画像。納品書システムの管理画面で設定) */
.thanks-media { max-width: 680px; margin: 36px auto 0; }
.thanks-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.thanks-video iframe, .thanks-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.thanks-banner { display: block; margin-top: 22px; }
.thanks-banner img { width: 100%; display: block; border: 1px solid var(--line); }

/* 完了 */
.done-box { text-align: center; padding: 30px 10px 10px; }
.done-box .mark { margin-bottom: 18px; }
.done-box h2 { font-size: 21px; letter-spacing: .16em; margin-bottom: 16px; }
.done-box p { font-size: 15px; }

.site-foot {
  text-align: center;
  padding: 26px 16px 34px;
  border-top: 1px solid var(--line);
  background: var(--white);
  font-size: 12px;
  letter-spacing: .2em;
  color: #8a8272;
}
/* 下部メッセージ(動画・画像の下。管理画面で選択) */
.thanks-bottom {
  max-width: 680px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px;
}

@media (max-width: 640px) {
  /* スマホでは文章中の強制改行を外し、自然な折返しに任せる */
  br.pc { display: none; }
  .lead { text-align: left; }
  .done-box p, .thanks-bottom { text-align: left; }
  .sec-body { padding: 20px 15px; }
  .ptable th, .ptable td { padding: 9px 4px; font-size: 13.5px; }
  .ptable select { width: 66px; }
  .submit-btn { padding: 15px 40px; width: 100%; }
  .back-btn { width: 100%; margin: 0 0 12px; }
}