/* S365: 設定画面 (デザイン「07 設定(会員)」)。style.css + session.css の上に読む */
.st{background:#F6F1E7;padding:44px 0 56px}
.st .hw{max-width:1120px;margin:0 auto;padding:0 24px}
.st .ss-bc{margin-bottom:14px}
.st h1{font-size:22px;font-weight:700;color:#14100F;margin:0 0 20px}
.st-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
.st-nav{position:sticky;top:84px;background:#fff;border:1px solid #E8DCC3;border-radius:6px;padding:8px}
.st-nav a{position:relative;display:block;padding:9px 12px;border-radius:4px;font-size:13.5px;color:#574E49;text-decoration:none}
.st-nav a:hover{color:#7B1F2F}
/* S367: 選択中はボックスの内側・文言の先頭に短い金の縦線 (デザイン「07 設定(会員)」)。文言はその分だけ右にずれ、他の項目の文言は縦線の位置に揃う */
.st-nav a.on{background:#F2EADB;color:#14100F;font-weight:700;padding-left:27px}
.st-nav a.on::before{content:"";position:absolute;left:12px;top:50%;width:3px;height:15px;transform:translateY(-50%);background:#B08A4F;border-radius:1px}
.st-panels{display:grid;gap:18px}
.st-panel{background:#fff;border:1px solid #E8DCC3;border-radius:6px;overflow:hidden;scroll-margin-top:84px}
.st-panel h2{font-size:14px;font-weight:700;color:#14100F;margin:0;padding:12px 18px;background:#FAF6EE;border-bottom:1px solid #EFEAE0}
.st-row{display:grid;grid-template-columns:172px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid #EFEAE0;font-size:13.5px}
.st-row:first-of-type{border-top:0}
.st-k{color:#6B615C;font-size:13px}
.st-k b{display:block;color:#14100F;font-size:13.5px}
.st-k small{display:block;font-size:11.5px;color:#8C837D;margin-top:2px;line-height:1.5}
.st-v{color:#14100F;line-height:1.6}
.st-chg{background:#fff;border:1px solid #B08A4F;border-radius:4px;color:#7D5C2E;font-size:12px;font-weight:700;padding:5px 12px;cursor:pointer;white-space:nowrap;font-family:inherit}
.st-chg:hover{background:#FAF6EE}
/* S367: 「変更」で値の欄がテキストボックスになる。ボタンは「保存」(塗り) に */
.st-in{width:100%;max-width:420px;margin:0;padding:8px 12px;background:#FAF6EE;border:1px solid #E7E0D4;border-radius:4px;font-size:13.5px;color:#14100F;font-family:inherit}
.st-in:focus{outline:none;border-color:#B08A4F;box-shadow:0 0 0 3px rgba(176,138,79,.15)}
.st-in:disabled{opacity:.6}
.st-stack{display:grid;gap:8px;max-width:420px}
.st-btns{display:grid;gap:6px;align-self:center}   /* S367: 保存の下にキャンセルを縦に並べる */
.st-chg.st-cancel{color:#574E49;border-color:#E7E0D4}
.st-chg.st-cancel:hover{background:#F6F1E7}   /* S367: パスワード変更の 2 欄 (新しいパスワード / 確認) を縦に */
.st-chg.saving{background:#6A1928;border-color:#6A1928;color:#fff}
.st-chg.saving:hover{background:#521321}
.st-chg:disabled{opacity:.6;cursor:default}
.st-toggle{grid-template-columns:minmax(0,1fr) auto}
/* トグル */
.sw{position:relative;display:inline-block;width:40px;height:22px;flex:none;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:#D2B2B6;border-radius:999px;transition:background .2s}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked+span{background:#7B1F2F}
.sw input:checked+span::after{transform:translateX(18px)}
.sw input:focus-visible+span{outline:2px solid #B08A4F;outline-offset:2px}
@media (max-width:860px){
  .st-grid{grid-template-columns:1fr;gap:16px}
  .st-nav{position:static;display:flex;gap:4px;overflow-x:auto;padding:6px}
  .st-nav a{flex:none;border-bottom:3px solid transparent;border-radius:4px 4px 0 0;padding:8px 12px}
  .st-nav a.on{border-bottom-color:#B08A4F;padding-left:12px}   /* スマホは横並びのタブなので縦線ではなく下線 */
  .st-nav a.on::before{content:none}
  .st-row{grid-template-columns:1fr;gap:6px;padding:12px 16px}
  .st-chg{justify-self:start}
  .st-toggle{grid-template-columns:minmax(0,1fr) auto}
}
@media (max-width:640px){.st{padding:28px 0 40px}.st .hw{padding:0 18px}}

/* S370: お支払い方法の完了メッセージ (settings.html#payment)。空のときは場所を取らない */
.st-panel .msg:empty{display:none}
.st-panel .msg{margin: 0 0 10px 17px;}