/* KS_UNSUBSCRIBE_UI_20260916 : メルマガ配信停止ページの見た目だけを整える。
   本文・フォームの仕組み（配配メールへの送信・hidden項目）は変えない。
   共通ヘッダー／フッターに影響しないよう、すべて #wrapper.ksu の中だけに効かせる。
   色はFAQ・ショッピングガイドと同じ（--brand #43aebd / --deep #247b88）。 */
#wrapper.ksu{--brand:#43aebd;--deep:#247b88;--pale:#eef9fa;--ink:#27363c;--muted:#63747b;--line:#d8e5e8;
  box-sizing:border-box;width:min(680px,calc(100% - 32px));margin:0 auto 56px;padding:0;
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.9}
#wrapper.ksu *{box-sizing:border-box}
#wrapper.ksu .content#unsubsc{margin:0 0 -34px;padding:44px 24px 62px;border-radius:0 0 20px 20px;background:linear-gradient(145deg,#fff,var(--pale));text-align:center}
#wrapper.ksu .ksuLabel{display:block;color:var(--deep);font-size:12px;font-weight:800;letter-spacing:.18em}
#wrapper.ksu h3.heading{margin:8px 0 0!important;padding:0!important;border:0!important;background:none!important;
  color:var(--ink);font-family:"Noto Serif JP","Yu Mincho",serif;font-size:30px;font-weight:500;line-height:1.45;text-align:center}
#wrapper.ksu p.unsubsc_attention{margin:18px auto 0;max-width:34em;color:var(--muted);font-size:15px;text-align:left}
#wrapper.ksu .touroku{position:relative;padding:34px 32px 30px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 14px 40px rgba(36,91,100,.08)}
/* 旧スマホCSSが table に固定幅と余白を持っていて、枠から右にはみ出していた（2026-09-16 実測） */
#wrapper.ksu .touroku table,#wrapper.ksu .touroku tbody,#wrapper.ksu .touroku tr{display:block;width:100%!important;margin:0!important;padding:0!important;border:0;border-collapse:collapse}
#wrapper.ksu .touroku th,#wrapper.ksu .touroku td{display:block;width:100%!important;padding:0;border:0;background:none;text-align:left;font-weight:400}
#wrapper.ksu .touroku th{margin-bottom:10px;color:var(--ink);font-size:15px;font-weight:700}
#wrapper.ksu .touroku input[type="text"]{width:100%!important;height:56px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:#fbfdfd;color:var(--ink);font-size:16px;font-family:inherit}
#wrapper.ksu .touroku input[type="text"]:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--pale);outline:none}
#wrapper.ksu .touroku td.submit{margin-top:20px;text-align:center}
/* 旧CSSがボタンの右端に矢印画像（span::after）を出していて、文字が左に寄って見えていた */
#wrapper.ksu .touroku td.submit span{display:block;width:100%!important;margin:0!important;padding:0!important;background:none!important;position:static!important}
#wrapper.ksu .touroku td.submit span:before,#wrapper.ksu .touroku td.submit span:after{content:none!important;display:none!important;background:none!important}
#wrapper.ksu .touroku input.btn{display:inline-flex;align-items:center;justify-content:center;width:min(320px,100%)!important;height:56px!important;padding:0 24px!important;margin:0!important;
  border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:16px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 10px 24px rgba(67,174,189,.28);cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none}
#wrapper.ksu .touroku input.btn:hover{background:var(--deep)}
/* 旧CSSの text-align:center が効いて、最後の行だけ中央に残り改行が不自然に見えていた（2026-09-16） */
#wrapper.ksu .ksuHelp{margin-top:26px;padding:20px 22px;border-left:4px solid var(--brand);border-radius:0 12px 12px 0;background:#f6fbfc;text-align:left!important}
#wrapper.ksu .ksuHelp b{display:block;margin-bottom:6px;color:var(--deep);font-size:15px;text-align:left!important}
#wrapper.ksu .ksuHelp p{margin:0;color:var(--muted);font-size:14px;line-height:1.9;text-align:left!important;line-break:strict;overflow-wrap:anywhere}
#wrapper.ksu p.unsubsc_attention{line-break:strict}
#wrapper.ksu .ksuHelp a{color:var(--deep);font-weight:700}
@media(max-width:760px){
#wrapper.ksu{width:calc(100% - 24px)}
#wrapper.ksu .content#unsubsc{padding:34px 18px 56px}
#wrapper.ksu h3.heading{font-size:25px}
#wrapper.ksu .touroku{padding:26px 18px 24px}
#wrapper.ksu .touroku input.btn{width:100%!important;font-size:17px}
}