@charset "UTF-8";
/*
  lr-forms.css — フォーム系ページ共通スタイル（2026-09 リデザイン「Paper & Line」）
  対象: Contact / Entry / Forgot / Mypage / Help / Plan / VirtualStaging
  読み込み: app/template/default/Block/_lr_forms.twig（各ページの {% block stylesheet %} で include）
  順序: default_frame.twig の lr.css の後、ページ固有 <style> の前
  白地・1px罫線・墨ボタン。角丸は入力とボタンの 2px のみ。影・グラデ・紺ベタなし。
  ※ マイページのナビ（.mp-*）は lr-mypage.css（Mypage/navi.twig が単体で読み込む）
*/
  /* ===== 器 ===== */
  .fm-main { padding: clamp(28px, 4vw, 48px) 0 clamp(64px, 8vw, 96px); }
  .fm-wrap { max-width: var(--lr-wrap); margin: 0 auto; padding: 0 var(--lr-gutter); }
  .fm-wrap--sm { max-width: calc(560px + var(--lr-gutter) * 2); }
  .fm-wrap--md { max-width: calc(760px + var(--lr-gutter) * 2); }
  .fm-wrap--lg { max-width: calc(960px + var(--lr-gutter) * 2); }

  /* ===== パンくず ===== */
  .lr-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0; font-size: 12px; letter-spacing: .04em; color: var(--lr-ink-faint); }
  .lr-crumb a { color: var(--lr-ink-faint); transition: color .2s ease; }
  .lr-crumb a:hover { color: var(--lr-gold-ink); }
  .lr-crumb li + li::before { content: "/"; margin-right: 6px; color: var(--lr-line-strong); }
  .lr-crumb .cur { color: var(--lr-ink); }

  /* ===== 見出し ===== */
  /* .lr-chars は語単位で nowrap になる（lr-motion.js）。和文見出しは1語扱いで折り返せず SP ではみ出すため、このグループでは折り返しを許可 */
  .lr-chars > span { white-space: normal !important; }
  .fm-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 3vw, 40px); }
  .fm-head .lr-lead { max-width: 640px; }
  .fm-head--center { align-items: center; text-align: center; }
  .fm-wrap--sm .fm-head .lr-h1 { font-size: clamp(28px, 3.2vw, 40px); }
  .fm-wrap--md .fm-head .lr-h1 { font-size: clamp(30px, 3.6vw, 48px); }

  /* ===== カード（1px罫線・角丸なし） ===== */
  .fm-card { background: #fff; border: 1px solid var(--lr-line); padding: clamp(22px, 3vw, 40px); }
  .fm-card + .fm-card { margin-top: 20px; }
  .fm-card__title { font-family: var(--lr-serif); font-size: 17px; font-weight: 600; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--lr-line); display: flex; align-items: center; gap: 10px; letter-spacing: .04em; }
  .fm-card__title i { color: var(--lr-gold-ink); font-size: 18px; }
  .fm-sec { margin-bottom: 40px; }
  .fm-sec:last-child { margin-bottom: 0; }

  /* ===== フィールド ===== */
  .fm-field { margin-bottom: 22px; }
  .fm-field:last-child { margin-bottom: 0; }
  .fm-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; margin-bottom: 8px; color: var(--lr-ink); }
  .fm-req { color: var(--lr-gold-ink); font-size: 10.5px; letter-spacing: .12em; margin-left: 8px; font-weight: 600; }
  .fm-opt { color: var(--lr-ink-faint); font-size: 10.5px; letter-spacing: .12em; margin-left: 8px; font-weight: 500; }
  .fm-hint { font-size: 12px; color: var(--lr-ink-faint); margin-top: 6px; line-height: 1.7; }
  .fm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .fm-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .fm-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fm-inline .fm-zip { max-width: 220px; }

  /* 入力: form_widget に class を渡せない自動出力（エンティティ拡張・EC-CUBE 標準ラッパ）も同じ見た目に */
  .fm-form input[type="text"], .fm-form input[type="email"], .fm-form input[type="tel"], .fm-form input[type="password"],
  .fm-form input[type="number"], .fm-form input[type="search"], .fm-form input[type="url"], .fm-form select, .fm-form textarea,
  .lr-input, .lr-select, .lr-textarea {
    width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--lr-line-strong); border-radius: 2px; background: #fff;
    font-family: var(--lr-sans); font-size: 16px; color: var(--lr-ink); transition: border-color .2s ease; box-shadow: none;
    -webkit-appearance: none; appearance: none; margin: 0;
  }
  .fm-form textarea, .lr-textarea { height: auto; min-height: 160px; padding: 12px 14px; line-height: 1.8; resize: vertical; }
  .fm-form select, .lr-select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2322262e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
  .fm-form input:focus, .fm-form select:focus, .fm-form textarea:focus, .lr-input:focus, .lr-select:focus, .lr-textarea:focus { border-color: var(--lr-ink); box-shadow: none; }
  /* 輪郭はキーボード操作時だけ残す（lr.css の :focus-visible はこのファイルより先に読まれるため、ここで書かないと勝てない） */
  .fm-form input:focus:not(:focus-visible), .fm-form select:focus:not(:focus-visible), .fm-form textarea:focus:not(:focus-visible), .lr-input:focus:not(:focus-visible), .lr-select:focus:not(:focus-visible), .lr-textarea:focus:not(:focus-visible) { outline: none; }
  .fm-form input:focus-visible, .fm-form select:focus-visible, .fm-form textarea:focus-visible, .lr-input:focus-visible, .lr-select:focus-visible, .lr-textarea:focus-visible { outline: 2px solid var(--lr-ink); outline-offset: 1px; }
  .fm-form ::placeholder { color: #a6aab3; }
  .fm-form input[type="checkbox"], .fm-form input[type="radio"] { width: auto; height: auto; }
  .fm-form input[type="hidden"] { display: none; }

  /* ===== エラー・通知 ===== */
  .has-error input, .has-error select, .has-error textarea, .error input, .error select { border-color: var(--lr-danger) !important; }
  .ec-errorMessage { color: var(--lr-danger); font-size: 12.5px; line-height: 1.7; margin: 6px 0 0; }
  .fm-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--lr-line); border-left-width: 3px; font-size: 13.5px; line-height: 1.8; margin-bottom: 20px; background: #fff; color: var(--lr-ink); }
  .fm-alert i { font-size: 18px; line-height: 1.4; flex: 0 0 auto; color: var(--lr-gold-ink); }
  .fm-alert p { margin: 0; }
  .fm-alert--err { border-left-color: var(--lr-danger); color: var(--lr-danger); }
  .fm-alert--err i { color: var(--lr-danger); }
  .fm-alert--err .ec-errorMessage { margin: 0; }
  .fm-alert--ok { border-left-color: var(--lr-gold); }
  .fm-alert--info { border-left-color: var(--lr-ink); background: var(--lr-paper-alt); }
  .fm-alert--warn { border-left-color: var(--lr-danger); }
  .fm-alert--warn i { color: var(--lr-danger); }

  /* ===== チェック・ラジオ（アクセントは墨） ===== */
  .fm-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13.5px; line-height: 1.7; min-height: 44px; padding: 8px 0; color: var(--lr-ink); }
  .fm-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; min-width: 20px; border: 1px solid var(--lr-ink); border-radius: 2px; background: #fff; position: relative; margin: 3px 0 0; cursor: pointer; flex: 0 0 auto; transition: background .15s ease; }
  .fm-check input[type="checkbox"]:checked { background: var(--lr-ink); }
  .fm-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .fm-check input:focus-visible { outline: 2px solid var(--lr-gold); outline-offset: 2px; }
  /* EC-CUBE の checkbox_widget が付ける空ラベル（label:false 時）は隠し、本文は .fm-check__text に置く */
  .fm-check > label:not(.fm-check__text) { display: none; }
  .fm-check__text { cursor: pointer; }
  .fm-check a { color: var(--lr-gold-ink); border-bottom: 1px solid rgba(125, 102, 26, .35); }
  .fm-radios { display: flex; flex-wrap: wrap; gap: 4px 28px; }
  .fm-radios > div, .fm-radios > label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--lr-ink); }
  /* ラジオ本体は 20px。タップ領域は結び付いた <label> 側で 44px を確保する */
  .fm-radios label { cursor: pointer; margin: 0; font-size: 14px; color: var(--lr-ink); display: inline-flex; align-items: center; min-height: 44px; }
  .fm-radios input[type="radio"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 1px solid var(--lr-ink); border-radius: 50%; background: #fff; position: relative; margin: 0; cursor: pointer; flex: 0 0 auto; }
  .fm-radios input[type="radio"]:checked::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--lr-ink); }
  .fm-radios input:focus-visible { outline: 2px solid var(--lr-gold); outline-offset: 2px; }

  /* ===== パスワード表示切替 ===== */
  .fm-pw { position: relative; }
  .fm-pw input { padding-right: 52px !important; }
  .fm-pwtoggle { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--lr-ink-faint); cursor: pointer; transition: color .2s ease; }
  .fm-pwtoggle:hover { color: var(--lr-gold-ink); }
  .fm-pwtoggle i { font-size: 20px; line-height: 1; }

  /* ===== 送信行・補足 ===== */
  .fm-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  .fm-actions--end { justify-content: flex-end; }
  .fm-actions--top { padding-top: 24px; border-top: 1px solid var(--lr-line); }
  .fm-actions > .lr-btn { flex: 1 1 200px; }
  .fm-actions--end > .lr-btn { flex: 0 0 auto; }
  .fm-foot { text-align: center; margin-top: 28px; font-size: 13px; color: var(--lr-ink-muted); display: flex; flex-direction: column; gap: 10px; align-items: center; line-height: 1.8; }
  .fm-note { font-size: 12px; color: var(--lr-ink-faint); line-height: 1.8; }
  .fm-tel { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-top: 1px solid var(--lr-line); border-bottom: 1px solid var(--lr-line); }
  .fm-tel b { font-family: var(--lr-latin); font-size: 28px; font-weight: 500; letter-spacing: .04em; color: var(--lr-ink); font-feature-settings: "tnum", "lnum"; line-height: 1.2; }
  .fm-tel a:hover b { color: var(--lr-gold-ink); }

  /* ===== 完了マーク（線描きのチェック + 金の波紋） ===== */
  .fm-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(16px, 3vw, 32px) 0 8px; }
  .fm-done__mark { width: 72px; height: 72px; border: 1px solid var(--lr-ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 6px; }
  .fm-done__mark svg { width: 30px; height: 30px; overflow: visible; }
  .fm-done__mark svg path { fill: none; stroke: var(--lr-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .8s var(--lr-ease) .45s; }
  .fm-done.in .fm-done__mark svg path { stroke-dashoffset: 0; }
  .fm-done__mark::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--lr-gold); border-radius: 50%; animation: lrPulse 2.6s ease-out infinite; pointer-events: none; }
  .fm-done .lr-h1 { font-size: clamp(24px, 3vw, 34px); }

  /* ===== 定義リスト（確認画面・注文詳細） ===== */
  .fm-dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--lr-line); margin: 0; }
  .fm-dl > dt, .fm-dl > dd { padding: 14px 0; border-bottom: 1px solid var(--lr-line); margin: 0; font-size: 14px; line-height: 1.8; }
  .fm-dl > dt { color: var(--lr-ink-muted); font-size: 12.5px; letter-spacing: .06em; padding-right: 16px; }
  .fm-dl > dd label { font-size: inherit; color: inherit; margin: 0; }
  @media (max-width: 640px) { .fm-dl { grid-template-columns: 1fr; } .fm-dl > dt { padding-bottom: 2px; border-bottom: 0; } .fm-dl > dd { padding-top: 0; } }

  /* ===== ページャ（core pager.twig の .ec-pager） ===== */
  .ec-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 40px 0 0; }
  .ec-pager li { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; font-size: 13px; color: var(--lr-ink-faint); font-feature-settings: "tnum"; }
  .ec-pager li a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--lr-line-strong); border-radius: 2px; color: var(--lr-ink); transition: border-color .2s ease, color .2s ease; }
  .ec-pager li a:hover { border-color: var(--lr-ink); color: var(--lr-gold-ink); }
  .ec-pager li.ec-pager__item--active a { background: var(--lr-ink); color: #fff; border-color: var(--lr-ink); }

  /* ===== ステータス（注文履歴） ===== */
  .fm-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; border: 1px solid var(--lr-line-strong); color: var(--lr-ink-muted); white-space: nowrap; }
  .fm-status--on { border-color: var(--lr-ink); color: var(--lr-ink); }
  .fm-status--off { color: var(--lr-ink-faint); }

  /* ===== モーダル ===== */
  .fm-modal { position: fixed; inset: 0; background: rgba(34, 38, 46, .45); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
  .fm-modal__box { background: #fff; border: 1px solid var(--lr-line); max-width: 440px; width: 100%; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
  .fm-modal__box .lr-h3 { font-size: 18px; }

  /* ===== 空状態 ===== */
  .fm-empty { border: 1px solid var(--lr-line); padding: clamp(40px, 6vw, 64px) 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .fm-empty i { font-size: 34px; color: var(--lr-line-strong); }
  .fm-empty .lr-h3 { font-size: 18px; }

  @media (max-width: 767px) {
    .fm-row2, .fm-row3 { grid-template-columns: 1fr; }
    .fm-row2--keep { grid-template-columns: 1fr 1fr; }
    .fm-row3--keep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fm-card { padding: 20px 16px; }
    .fm-actions > .lr-btn { flex-basis: 100%; }
    .fm-actions--end > .lr-btn { flex-basis: 100%; }
  }
  /* ===== 注文カード・明細行・合計（Mypage 注文履歴/注文詳細） ===== */
  .fm-order { border: 1px solid var(--lr-line); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; background: #fff; transition: border-color .3s ease; }
  .fm-order:hover { border-color: var(--lr-line-strong); }
  .fm-order + .fm-order { margin-top: 16px; }
  .fm-order__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--lr-line); }
  .fm-order__no { font-family: var(--lr-latin); font-size: 15px; letter-spacing: .08em; color: var(--lr-ink-muted); font-feature-settings: "tnum", "lnum"; }
  .fm-order__date { font-size: 13px; color: var(--lr-ink-muted); font-feature-settings: "tnum"; }
  .fm-order__total { font-size: 18px; font-weight: 700; font-feature-settings: "tnum"; white-space: nowrap; }
  .fm-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--lr-line); }
  .fm-item:last-child { border-bottom: 0; }
  .fm-item__img { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid var(--lr-line); background: #fff; overflow: hidden; }
  .fm-item__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .fm-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .fm-item__name { font-family: var(--lr-serif); font-size: 14px; line-height: 1.55; color: var(--lr-ink); }
  .fm-item__meta { font-size: 12px; color: var(--lr-ink-faint); }
  .fm-item__price { font-size: 13px; color: var(--lr-ink-muted); font-feature-settings: "tnum"; }
  .fm-item__sub { font-size: 14px; font-weight: 700; white-space: nowrap; font-feature-settings: "tnum"; }
  .fm-sum { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--lr-line); margin-top: 6px; }
  .fm-sum > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--lr-ink-muted); font-feature-settings: "tnum"; }
  .fm-sum > div.t { font-size: 15px; font-weight: 700; color: var(--lr-ink); padding-top: 10px; border-top: 1px solid var(--lr-line-strong); }
  .fm-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 20px; }
  .fm-kv > div { display: flex; flex-direction: column; gap: 4px; }
  .fm-kv .k { font-size: 11.5px; letter-spacing: .08em; color: var(--lr-ink-faint); }
  .fm-kv .v { font-size: 14px; font-weight: 500; font-feature-settings: "tnum"; }
  .fm-linkbtn { background: none; border: 0; padding: 10px 0; font-family: inherit; font-size: 13px; color: var(--lr-gold-ink); cursor: pointer; letter-spacing: .04em; min-height: 44px; }
  .fm-linkbtn:hover { color: var(--lr-gold); }
  .fm-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lr-ink-muted); min-height: 44px; transition: color .2s ease; }
  .fm-back:hover { color: var(--lr-gold-ink); }
  /* 小さなテキストリンクのタップ領域を 44px に広げつつ、下線は文字のすぐ下に 1px で残す（影は使わない） */
  .fm-tap { display: inline-flex; align-items: center; min-height: 44px; position: relative; border-bottom: 0 !important; }
  .fm-tap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: 8px; height: 1px; background: currentColor; opacity: .4; transition: opacity .2s ease; }
  .fm-tap:hover::after { opacity: 1; }
  .fm-strength { height: 2px; background: var(--lr-line); margin-top: 10px; overflow: hidden; }
  .fm-strength > div { height: 100%; width: 0; transition: width .3s ease, background-color .3s ease; }
  .fm-toast { position: fixed; bottom: 24px; right: 24px; background: #fff; border: 1px solid var(--lr-ink); padding: 14px 18px; display: flex; align-items: center; gap: 12px; z-index: 9999; font-size: 14px; color: var(--lr-ink); }
  @media (max-width: 767px) { .fm-toast { left: 16px; right: 16px; bottom: 16px; } }
  .fm-addr { display: flex; flex-direction: column; gap: 10px; }
  .fm-addr .n { font-family: var(--lr-serif); font-size: 16px; font-weight: 600; }
  .fm-addr .a { font-size: 13.5px; line-height: 1.85; color: var(--lr-ink-muted); }
  .fm-addr .a b { display: block; font-weight: 500; color: var(--lr-ink); }
  .fm-addr__acts { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
  .fm-addr__acts > * { flex: 1; }
  .fm-addr__acts form { margin: 0; }
  .lr-btn--danger { background: transparent; color: var(--lr-danger); border-color: var(--lr-danger); }
  .lr-btn--danger::before { background: var(--lr-danger); }
  .lr-btn--danger:hover { color: #fff; border-color: var(--lr-danger); }
  .lr-btn--danger-solid { background: var(--lr-danger); color: #fff; border-color: var(--lr-danger); }
  .lr-btn--danger-solid::before { background: var(--lr-ink); }
  .lr-btn--danger-solid:hover { color: #fff; border-color: var(--lr-ink); }