/* ============================================================
   会員の入口（ログイン・登録）と LINE の導線
   ------------------------------------------------------------
   ★ 考え方
     ここは「読む」画面でも「選ぶ」画面でもなく、
     手を動かす画面です。目を止めていい場所を1つに絞ります。
     ・押す色（terra）は1画面に1つだけ
     ・欄の高さを揃えて、視線が縦にまっすぐ落ちるようにする
     ・説明は欄の下に小さく。上に置くと、欄にたどり着く前に読まされる

   ★ 形はブランドの決めごとに従います
     白い紙・髪線の罫・直角・影なし。角丸や影を足しません。
     例外は LINE の緑だけです（あれは LINE の記号なので、
     こちらの都合で色を変えると別物に見えます）。
   ============================================================ */

:root{
  --line-green:#06C755;         /* LINE のブランドカラー。これだけは動かさない */
  --line-green-d:#05A948;
}

/* ── 全体の骨格 ───────────────────────────────── */
.auth{
  max-width:1000px; margin-inline:auto;
  display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,34px);
  padding:clamp(26px,4vw,48px) 0 clamp(44px,6vw,72px);
  align-items:start;
}
.auth > *{min-width:0}
@media (min-width:1000px){
  .auth{grid-template-columns:minmax(0,1fr) 300px}
  /* 通知は左の列いっぱいに。右のそでの上に出ると読み飛ばされます。 */
  .auth > .woocommerce-notices-wrapper{grid-column:1 / -1}
}

.auth-hero .lede{max-width:52ch}

/* ── 1枚の札 ─────────────────────────────────── */
.authcard{
  background:var(--paper); box-shadow:0 0 0 1px var(--line);
  padding:0;
}
/* 切り替えのラジオは見せません。ただし消しません（キーボードで拾えるように）。 */
.authcard__r{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── 切り替えのつまみ ─────────────────────────── */
.authtabs{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.authtabs label{
  display:block; text-align:center; cursor:pointer; user-select:none;
  font-family:var(--fd); font-size:var(--t-sm); color:var(--muted);
  padding:16px 10px 14px; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .14s ease, border-color .14s ease;
}
.authtabs label:hover{color:var(--ink)}
#acs-tab-login:checked ~ .authtabs label[for="acs-tab-login"],
#acs-tab-join:checked  ~ .authtabs label[for="acs-tab-join"]{
  color:var(--ink); font-weight:700; border-bottom-color:var(--terra-deep);
}
/* キーボードで来たときだけ、はっきり見せます */
#acs-tab-login:focus-visible ~ .authtabs label[for="acs-tab-login"],
#acs-tab-join:focus-visible  ~ .authtabs label[for="acs-tab-join"]{
  outline:2px solid var(--blue-deep); outline-offset:-3px;
}

/* ── 中身の出し分け ───────────────────────────── */
.authpane{display:none; padding:clamp(22px,3vw,34px)}
#acs-tab-login:checked ~ .authpane--login,
#acs-tab-join:checked  ~ .authpane--join{display:block}
/* 登録を切っているときは、つまみが無いのでログインだけ出します */
.authcard--single .authpane--login{display:block}

/* ── 入力欄 ───────────────────────────────────── */
.authform .fgrp{display:grid; gap:16px}
.auth .fld{margin:0; display:grid; gap:6px}
.auth .fld > label{
  font-family:var(--fd); font-size:12.5px; color:var(--ink-2); line-height:1.5;
}
.auth .fld .required,
.auth .prof .required{color:var(--terra-deep); text-decoration:none; border:0; margin-left:3px}

.auth input[type=text],
.auth input[type=email],
.auth input[type=tel],
.auth input[type=password],
.auth select{
  width:100%; box-sizing:border-box; min-height:50px;
  padding:12px 14px; border:1px solid var(--line); border-radius:2px;
  background:var(--paper); color:var(--ink);
  font-family:var(--fb); font-size:16px;   /* 16px 未満だと iOS が勝手に拡大します */
  line-height:1.5; appearance:none;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.auth select{
  padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px, calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.auth input:focus,
.auth select:focus{
  outline:none; border-color:var(--blue-deep);
  box-shadow:0 0 0 3px var(--blue-pale);
}
.auth input::placeholder{color:#A9ABAE}

/* パスワードの表示切り替え */
.pw{position:relative; display:block}
.pw input{padding-right:76px}
.pw__eye{
  position:absolute; top:0; right:0; height:100%; min-width:64px;
  border:0; background:none; cursor:pointer;
  font-family:var(--fd); font-size:12.5px; color:var(--blue-deep);
}
.pw__eye:hover{text-decoration:underline}
.pw__eye:focus-visible{outline:2px solid var(--blue-deep); outline-offset:-4px}

/* ── 囲み（生年月日・同意など）───────────────────
   .prof はマイページでも使うので、ここでは中だけ整えます。
   囲みの線を二重にしないよう、上の髪線1本だけにします。 */
/* ★ 区切りは、囲みではなく髪線1本で。
   囲みが3つ縦に並ぶと、札の中にまた札が3つできてしまいます。
   隣接（+）ではなく全部に当てて、先頭だけ外します。
   あいだに WooCommerce の差し込みが入っても崩れないようにするためです。 */
.auth .prof{
  border:0; border-radius:0; border-top:1px solid var(--line);
  border-radius:0; padding:24px 0 0; margin:26px 0 0; background:none;
}
.auth .prof:first-of-type{border-top:0; padding-top:0; margin-top:0}
.auth .prof__lg{
  padding:0; margin:0 0 14px;
  font-family:var(--fd); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.auth .prof__row{margin:0 0 16px; display:grid; gap:6px}
.auth .prof__row > label{font-family:var(--fd); font-size:12.5px; color:var(--ink-2)}
.auth .prof__hint{font-size:12.5px; color:var(--muted); line-height:1.7; margin-top:1px}
.auth .prof__check{
  display:flex; gap:11px; align-items:flex-start; margin:0 0 12px;
  cursor:pointer; font-size:var(--t-sm); line-height:1.7; color:var(--ink-2);
}
.auth .prof__check input{margin:3px 0 0; width:20px; height:20px; flex:none; accent-color:var(--terra-deep)}
.auth .prof__check a{color:var(--blue-deep)}
.auth .prof--consent .prof__check:last-of-type{margin-bottom:0}

/* 生年月日の3つ。日→月→年の順（タイの言い方の順） */
.auth .prof__ymd{display:grid; grid-template-columns:5.2rem 1fr 8rem; gap:8px}
@media (max-width:560px){
  .auth .prof__ymd{grid-template-columns:1fr 1fr; grid-template-areas:"d m" "y y"}
  .auth .prof__ymd select:nth-child(1){grid-area:d}
  .auth .prof__ymd select:nth-child(2){grid-area:m}
  .auth .prof__ymd select:nth-child(3){grid-area:y}
}

/* ── 押しボタンと、その下の行 ─────────────────── */
.authrow{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:12px 16px; margin:16px 0 20px; font-size:var(--t-sm);
}
.authrow__rem{display:flex; align-items:center; gap:8px; color:var(--ink-2); cursor:pointer}
.authrow__rem input{width:17px; height:17px; accent-color:var(--terra-deep)}
.authrow__lost{color:var(--muted); text-decoration:none}
.authrow__lost:hover{color:var(--terra-deep); text-decoration:underline}

/* ★ ここは必ず余白を取ります。
   はじめ :first-of-type で 0 に戻していて、同意のチェックと
   ボタンが隙間なくくっついていました。押し間違えます。 */
.authsubmit{
  width:100%; box-sizing:border-box; min-height:54px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:26px; font-size:var(--t-base);
}

.authswap{
  margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line);
  text-align:center; font-size:var(--t-sm); color:var(--muted);
}
.authswap label{color:var(--blue-deep); cursor:pointer; margin-left:5px}
.authswap label:hover{text-decoration:underline}

/* 「หรือ」の仕切り。線を1本引いて、真ん中に文字を置くだけ。 */
.authdiv{
  display:flex; align-items:center; gap:14px; margin:22px 0;
  font-family:var(--fd); font-size:12px; color:var(--muted);
}
.authdiv::before,.authdiv::after{content:""; flex:1; height:1px; background:var(--line)}

/* ── 右のそで ─────────────────────────────────── */
.authrail{
  background:var(--tint); box-shadow:0 0 0 1px var(--line);
  padding:clamp(20px,2.4vw,26px);
}
@media (min-width:1000px){ .authrail{position:sticky; top:96px} }
.authrail__h{
  font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px;
}
.authrail__list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.authrail__list li{display:grid; grid-template-columns:22px 1fr; gap:4px 12px; align-items:start}
.authrail__list svg{grid-row:1 / span 2; color:var(--blue-deep); margin-top:2px}
.authrail__list b{font-family:var(--fd); font-size:var(--t-sm); color:var(--ink); line-height:1.5}
.authrail__list span{font-size:12.5px; color:var(--muted); line-height:1.75}
.authrail__note{
  margin:22px 0 0; padding:16px 16px 14px; background:var(--paper);
  box-shadow:0 0 0 1px var(--line); border-left:2px solid var(--blue-deep);
}
.authrail__noteh{margin:0 0 6px; font-family:var(--fd); font-size:var(--t-sm); color:var(--ink)}
.authrail__note p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.8}
.authrail__help{margin:18px 0 0; font-size:12.5px; color:var(--muted)}
.authrail__help a{color:var(--blue-deep); margin-left:5px}

/* ============================================================
   LINE の入口（.lj）
   画面の広さで、QR とボタンを出し分けます。
   ============================================================ */
.lj{display:grid; grid-template-columns:1fr; gap:18px; align-items:center}
.lj__mark{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 10px;
  font-family:var(--fd); font-size:11px; letter-spacing:.16em; color:var(--line-green-d);
}
.lj__mark svg{color:var(--line-green)}
.lj__t{font-family:var(--fd); font-weight:700; color:var(--ink); margin:0 0 7px; font-size:var(--t-md); line-height:1.45}
.lj__x{margin:0 0 16px; font-size:var(--t-sm); color:var(--muted); line-height:1.8}
.lj__n{margin:10px 0 0; font-size:12.5px; color:var(--muted); line-height:1.7}

.lj__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 26px; box-sizing:border-box;
  background:var(--line-green); color:#fff; text-decoration:none;
  font-family:var(--fd); font-size:var(--t-base); border-radius:2px;
  transition:background .14s ease;
}
.lj__btn:hover{background:var(--line-green-d); color:#fff; text-decoration:none}
.lj__btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.lj__btn--lg{min-height:60px; width:100%; font-size:var(--t-md)}

/* QR。狭い画面では出しません（自分の画面は自分で読めません）。 */
.lj__qr{display:none; margin:0; text-align:center}
.lj__qr img{display:block; width:150px; height:150px; margin:0 auto 8px; background:#fff}
.lj__qr figcaption{font-size:11.5px; color:var(--muted); line-height:1.6}
.lj__id{font-family:var(--fd); color:var(--ink-2)}
@media (min-width:760px){
  .lj{grid-template-columns:minmax(0,1fr) auto; gap:26px}
  .lj__qr{display:block}
}

/* 置き場所ごとの見え方 */
.lj--slim{background:var(--tint); box-shadow:0 0 0 1px var(--line); padding:20px}
.lj--panel{background:var(--paper); box-shadow:0 0 0 1px var(--line); padding:clamp(20px,2.6vw,28px)}
.lj--band{background:var(--blue-pale); padding:clamp(24px,3.4vw,36px)}
.lj--band .lj__t{font-size:var(--t-lg)}

/* ============================================================
   /line/ の着地ページ
   ============================================================ */
.lineland{padding:clamp(26px,4vw,44px) 0 clamp(46px,6vw,76px); max-width:760px}
.lineland__go{text-align:center}
.lineland__go .lj__btn--lg{max-width:420px}
.lineland__alt{margin:14px 0 0; font-size:var(--t-sm); color:var(--muted)}
.lineland__alt a{color:var(--blue-deep); margin-left:5px}

.lineland__steps{
  list-style:none; margin:clamp(30px,4vw,46px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line);
}
@media (min-width:820px){ .lineland__steps{grid-template-columns:repeat(3,1fr)} }
.lineland__steps li{
  background:var(--paper); padding:22px 20px 24px;
  display:grid; gap:6px; align-content:start;
}
.lineland__n{
  font-family:var(--fd); font-size:11px; font-weight:700; color:var(--blue-deep);
  background:var(--blue-pale); width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:4px;
}
.lineland__steps b{font-family:var(--fd); font-size:var(--t-base); color:var(--ink); line-height:1.5}
.lineland__steps span{font-size:var(--t-sm); color:var(--muted); line-height:1.85}

.lineland__perks{margin-top:clamp(34px,5vw,52px)}
.lineland__perks h2{
  font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 18px;
}
.lineland__perks ul{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.lineland__perks li{display:grid; grid-template-columns:22px 1fr; gap:3px 12px; align-items:start}
.lineland__perks svg{grid-row:1 / span 2; color:var(--blue-deep); margin-top:2px}
.lineland__perks b{font-family:var(--fd); font-size:var(--t-base); color:var(--ink)}
.lineland__perks span{font-size:var(--t-sm); color:var(--muted); line-height:1.8}

.lineland__pdpa{
  margin:clamp(30px,4vw,44px) 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); line-height:1.85;
}
.lineland__pdpa a,.lineland__have a{color:var(--blue-deep); margin-left:4px}
.lineland__have{margin:14px 0 0; font-size:var(--t-sm); color:var(--muted)}

/* ── フッターの帯に置くとき（style => 'bare'）───────
   帯の中では、白い札にしません。札にすると、ピンクの地の上に
   関係のない箱が落ちてきたように見えます（実際そう見えていました）。
   地の色の上にそのまま置き、上の「หรือ」の線で登録ボタンと分けます。 */
.lj--bare{background:none; box-shadow:none; padding:0}
.signup-band .lj{margin:0; text-align:left; width:100%}
.signup-band .lj__t{font-size:var(--t-base); margin:0 0 5px}
.signup-band .lj__x{margin:0 0 13px; font-size:12.5px; line-height:1.75; color:var(--ink-2)}
.signup-band .lj__mark{margin:0 0 7px}
.signup-band .lj__btn{width:100%}
/* QR は帯では小さく。ここでの主役は登録ボタンで、QR は添えものです。 */
.signup-band .lj__qr img{width:96px; height:96px; margin-bottom:6px}
.signup-band .lj__qr figcaption{font-size:10.5px; line-height:1.5}
@media (min-width:900px){
  .signup-band .lj{grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center}
}

@media (prefers-reduced-motion:reduce){
  .authtabs label,.lj__btn,.auth input,.auth select{transition:none}
}

/* ============================================================
   WooCommerce 既定の打ち消し（この画面だけ）
   ------------------------------------------------------------
   woo.css で、登録・ログインのフォームそのものに白い箱と枠を
   当てていました。1枚の札の中に入れた今は、箱の中に箱ができて
   しまうので、この画面でだけ外します。
   ============================================================ */
.auth .woocommerce-form-login,
.auth .woocommerce-form-register{
  max-width:none; margin:0; padding:0;
  background:none; border:0; border-radius:0;
}
.auth .woocommerce form .form-row{margin:0; gap:6px}
.auth .woocommerce form .form-row label{font-size:12.5px; font-weight:400; color:var(--ink-2)}

/* 読む幅を決めます。札いっぱいに欄を広げると、
   目が左端から右端まで往復して、入れ間違いが増えます。 */
.authpane > *{max-width:560px; margin-left:auto; margin-right:auto}
.authpane > .authswap{max-width:none}

/* fieldset の legend は、既定だと枠線の上に乗る特別な組み方をします。
   枠を外したので、ふつうの見出しとして置き直します。
   ★ float は使いません。幅100%の float を置くと、あとに続く欄の
     行の幅が0になり、入力欄が右端に細く潰れます（一度やりました）。 */
.auth .prof__lg{display:block; float:none; width:auto; padding:0}

/* WooCommerce が出す個人情報の文（他の画面では残ります） */
.auth .woocommerce-privacy-policy-text p{
  font-size:12.5px; color:var(--muted); line-height:1.85; margin:0 0 14px;
}
.auth .woocommerce-privacy-policy-text a{color:var(--blue-deep)}

/* WooCommerce のパスワード強度の表示 */
.auth .woocommerce-password-strength{
  margin-top:8px; padding:8px 11px; font-size:12.5px; line-height:1.6;
  border-radius:2px; border:1px solid var(--line); background:var(--tint); color:var(--ink-2);
}
.auth .woocommerce-password-strength.short,
.auth .woocommerce-password-strength.bad{border-color:var(--bad); color:var(--bad); background:#FDF3F2}
.auth .woocommerce-password-strength.good{border-color:var(--blue-deep); color:var(--blue-deep); background:var(--blue-pale)}
.auth .woocommerce-password-strength.strong{border-color:var(--ok); color:var(--ok); background:#F1F7F3}
.auth .woocommerce-password-hint{display:block; margin-top:6px; font-size:12px; color:var(--muted); line-height:1.7}
.auth .btn.disabled,.auth .btn:disabled{opacity:.45; cursor:not-allowed}

/* ============================================================
   レジ（ゲスト／会員の選択、その場での会員登録）
   ------------------------------------------------------------
   ★ ここは支払いの手前です。うるさくしないこと。
     以前は情報の帯が3本、上下に積まれていました。
     選ぶことが1つ（いま会員として買うか、ゲストで買うか）と、
     クーポンの1行にまとめます。
   ============================================================ */
.cochoose{
  background:var(--paper); box-shadow:0 0 0 1px var(--line);
  margin:0 0 clamp(18px,2.6vw,26px);
}
.cochoose__r{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cochoose__tabs{display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--line)}
@media (min-width:640px){ .cochoose__tabs{grid-template-columns:1fr 1fr} }
.cochoose__tabs label{
  display:grid; gap:4px; cursor:pointer; user-select:none;
  padding:16px 18px 15px; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:background .14s ease, border-color .14s ease;
}
.cochoose__tabs label + label{border-left:1px solid var(--line)}
@media (max-width:639px){
  .cochoose__tabs label + label{border-left:0; border-top:1px solid var(--line)}
}
.cochoose__tabs b{font-family:var(--fd); font-size:var(--t-sm); color:var(--ink-2); font-weight:400}
.cochoose__tabs span{font-size:12.5px; color:var(--muted); line-height:1.7}
.cochoose__tabs label:hover{background:var(--tint)}
#acs-co-guest:checked  ~ .cochoose__tabs label[for="acs-co-guest"],
#acs-co-member:checked ~ .cochoose__tabs label[for="acs-co-member"]{
  border-bottom-color:var(--terra-deep); background:var(--paper);
}
#acs-co-guest:checked  ~ .cochoose__tabs label[for="acs-co-guest"] b,
#acs-co-member:checked ~ .cochoose__tabs label[for="acs-co-member"] b{color:var(--ink); font-weight:700}
#acs-co-guest:focus-visible  ~ .cochoose__tabs label[for="acs-co-guest"],
#acs-co-member:focus-visible ~ .cochoose__tabs label[for="acs-co-member"]{
  outline:2px solid var(--blue-deep); outline-offset:-3px}

.cochoose__pane{display:none; padding:18px 18px 20px}
#acs-co-guest:checked  ~ .cochoose__pane--guest,
#acs-co-member:checked ~ .cochoose__pane--member{display:block}
.cochoose__pane p{margin:0; font-size:var(--t-sm); color:var(--muted); line-height:1.85}
.cochoose__pane--member form.login{max-width:460px; margin:0; padding:0; border:0; background:none}
.cochoose__pane--member .form-row{margin:0 0 12px; display:grid; gap:5px}
.cochoose__pane--member label{font-family:var(--fd); font-size:12.5px; color:var(--ink-2)}
.cochoose__pane--member input[type=text],
.cochoose__pane--member input[type=password]{
  width:100%; box-sizing:border-box; min-height:48px; padding:11px 13px;
  border:1px solid var(--line); border-radius:2px; font-size:16px; background:var(--paper);
}
.cochoose__pane--member input:focus{outline:none; border-color:var(--blue-deep); box-shadow:0 0 0 3px var(--blue-pale)}
.cochoose__pane--member .woocommerce-form-login__rememberme{display:flex; gap:8px; align-items:center; font-size:var(--t-sm)}
.cochoose__pane--member .lost_password{font-size:var(--t-sm)}
.cochoose__pane--member .lost_password a{color:var(--muted)}

.co-who{
  margin:0 0 clamp(16px,2.4vw,22px); padding:13px 16px;
  background:var(--blue-pale); border-left:2px solid var(--blue-deep);
  font-size:var(--t-sm); color:var(--ink-2);
}

/* ── 住所のあとの「そのまま会員になる」 ─────────── */
.woocommerce-account-fields{
  margin:8px 0 4px; padding:18px 18px 6px;
  background:var(--tint); box-shadow:0 0 0 1px var(--line);
}
/* チェックの文字に合わせて、説明を1段下げます（30px はチェック箱＋間） */
.cojoin__head{margin:-4px 0 14px; padding-left:30px}
.cojoin__x{margin:0 0 3px; font-size:var(--t-sm); color:var(--ink-2); line-height:1.8}
.cojoin__x--sm{font-size:12.5px; color:var(--muted)}
.woocommerce-account-fields .create-account{margin:0 0 8px}
.woocommerce-account-fields .checkbox{display:flex; gap:10px; align-items:center; cursor:pointer;
  font-family:var(--fd); font-weight:700; color:var(--ink); font-size:var(--t-base)}
.woocommerce-account-fields .checkbox input{margin:3px 0 0; width:20px; height:20px; flex:none;
  accent-color:var(--terra-deep)}

/* ── 注文完了：この注文を持ち込んで会員になる ────── */
.coclaim{
  margin:clamp(22px,3vw,32px) 0; padding:clamp(20px,2.6vw,28px);
  background:var(--paper); box-shadow:0 0 0 1px var(--line);
  border-top:2px solid var(--terra-deep);
}
.coclaim__e{margin:0 0 8px; font-family:var(--fd); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--terra-deep)}
.coclaim__t{margin:0 0 8px; font-family:var(--fd); font-weight:700; color:var(--ink);
  font-size:var(--t-md); line-height:1.5}
.coclaim__x{margin:0 0 18px; font-size:var(--t-sm); color:var(--muted); line-height:1.85}
.coclaim__btn{min-height:52px}
.coclaim__n{margin:12px 0 0; font-size:12px; color:var(--muted); line-height:1.7}

.co-claimnote{
  margin:0 0 18px; padding:13px 16px; background:var(--blue-pale);
  border-left:2px solid var(--blue-deep); font-size:var(--t-sm); color:var(--ink-2); line-height:1.8;
}

/* 欄の下の説明。既定だと本文と同じ大きさで出て、欄より目立ちます。 */
.woocommerce-checkout .form-row .description,
.woocommerce form .form-row .description{
  display:block; margin:6px 0 0; font-size:12.5px; color:var(--muted); line-height:1.7;
  background:none; border:0; padding:0;
}

/* ── まだ払っていない注文（QR での支払いなど）───── */
.copay{
  margin:clamp(20px,3vw,28px) 0; padding:clamp(20px,2.6vw,26px);
  background:var(--tint); box-shadow:0 0 0 1px var(--line);
  border-left:2px solid var(--terra-deep);
}
.copay__t{margin:0 0 6px; font-family:var(--fd); font-weight:700; color:var(--ink); font-size:var(--t-base)}
.copay__x{margin:0 0 16px; font-size:var(--t-sm); color:var(--muted); line-height:1.85}
.copay__btn{min-height:50px}

/* Omise の PromptPay の QR（注文完了・支払い画面）
   プラグインが出す画像に、こちらの余白と説明の当て方を合わせます。 */
.woocommerce .omise-promptpay-qrcode,
.woocommerce .omise-qrcode,
.woocommerce img[alt*="PromptPay"],
.woocommerce img[src*="qrcode"]{
  display:block; margin:18px auto; max-width:280px; height:auto; background:#fff;
}