@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@400;600;800&display=swap');

/* 新潟仕送り部 申込フォーム
   配色：焦茶 #3d2717 ／ オレンジ #b8570c ／ 生成り #fbf5e9 ／ 枠 #e0cfae
   書体：見出し・ボタン Zen Maru Gothic ／ 本文 Noto Sans JP ／ 数字 Inter   */

.sk-page{--ink:#3d2717;--accent:#b8570c;--cream:#fbf5e9;--line:#e0cfae;--muted:rgba(61,39,23,.66);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);line-height:1.9;background:#fff;max-width:940px;margin:0 auto}
.sk-page *{box-sizing:border-box}
.sk-page [hidden]{display:none!important}
.sk-page h1,.sk-page h2,.sk-page h3{line-height:1.45;margin:0;font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif}
.sk-page p{margin:0}
.sk-page a{color:var(--accent);text-decoration:underline}
.sk-page a:hover{color:#8f4409}

.sk-band{height:8px;background:linear-gradient(90deg,#b8570c,#d98a3a,#f0c987,#d98a3a,#b8570c)}

.sk-hero{background:var(--cream)}
.sk-hero-in{padding:30px 22px 28px}
.sk-badge{display:inline-block;background:var(--accent);color:#fff;font:800 11.5px "Zen Maru Gothic",sans-serif;
  padding:6px 15px;border-radius:999px;line-height:1.6}
.sk-h1{margin-top:12px;font-size:clamp(21px,4.2vw,32px);font-weight:900}
.sk-hero-p{margin-top:12px;font-size:13.5px;color:var(--muted);max-width:660px}

.sk-body{padding:26px 22px 60px}

.sk-steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.sk-step{display:flex;align-items:center;gap:8px}
.sk-step-n{width:26px;height:26px;border-radius:50%;background:rgba(61,39,23,.14);color:rgba(61,39,23,.45);
  font:800 12px Inter,sans-serif;display:flex;align-items:center;justify-content:center;flex:none}
.sk-step-t{font-size:12.5px;font-weight:700;color:rgba(61,39,23,.45)}
.sk-step.is-on .sk-step-n{background:var(--accent);color:#fff}
.sk-step.is-on .sk-step-t{color:var(--ink);font-weight:800}
.sk-step-bar{flex:none;width:26px;height:2px;background:var(--line)}
.sk-step-sp{flex:1}
.sk-step-note{font-size:11.5px;font-weight:700;color:var(--muted)}

.sk-noscript{background:#fdf1f2;border:1.5px solid rgba(192,57,43,.4);border-radius:12px;padding:16px 18px;font-size:13px;margin-bottom:20px}

.sk-head{border:2.5px solid var(--line);background:var(--cream);border-radius:18px;padding:20px 22px;margin-bottom:24px}
.sk-head-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sk-head-title{font:900 18px "Zen Maru Gothic",sans-serif;color:var(--ink)}
.sk-chip{display:inline-block;background:var(--accent);color:#fff;font:800 11px "Zen Maru Gothic",sans-serif;
  padding:4px 11px;border-radius:6px;line-height:1.6}
.sk-head-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.sk-head-cell{background:#fff;border-radius:12px;padding:12px 14px}
.sk-head-k{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--accent)}
.sk-head-v{font:800 15px Inter,sans-serif;margin-top:3px;color:var(--ink)}
.sk-head-v--s{font:800 13.5px "Zen Maru Gothic",sans-serif}
.sk-head-note{font-size:11.5px;color:var(--muted);margin-top:12px}

.sk-sec{font:900 16px "Zen Maru Gothic",sans-serif;border-left:6px solid var(--accent);padding-left:12px;margin:34px 0 14px}
.sk-lead{font-size:12.5px;color:var(--muted);margin-bottom:14px}

.sk-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.sk-grid-zip{display:grid;grid-template-columns:170px 1fr;gap:16px}
@media(max-width:520px){.sk-grid-zip{grid-template-columns:1fr}}

.sk-field{margin-bottom:18px}
.sk-label{font:800 12.5px "Zen Maru Gothic",sans-serif;margin-bottom:6px}
.sk-req{color:#c0392b}
.sk-help{font-size:11.5px;color:var(--muted);margin-bottom:6px;line-height:1.8}
.sk-box{background:var(--cream);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
.sk-must{display:inline-block;background:#c0392b;color:#fff;font:800 10.5px "Noto Sans JP",sans-serif;
  letter-spacing:.06em;padding:3px 9px;border-radius:5px;line-height:1.6;margin-bottom:9px}

.sk-page input[type=text],.sk-page input[type=email],.sk-page input[type=tel],
.sk-page input[type=number],.sk-page select,.sk-page textarea{
  width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:11px;
  font:500 15px "Noto Sans JP",sans-serif;background:#fff;color:var(--ink);line-height:1.7}
.sk-page textarea{line-height:1.9}
.sk-page input:focus,.sk-page select:focus,.sk-page textarea:focus{outline:2px solid rgba(184,87,12,.5);outline-offset:1px}

/* 選択肢はボタン型（プラン・お届け先・メッセージカード・味） */
.sk-page .wpcf7-list-item{display:block;margin:0 0 9px}
.sk-page .wpcf7-list-item label{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:#fff;border:2.5px solid var(--line);border-radius:13px;padding:14px 17px;
  font-size:14px;line-height:1.8;transition:border-color .12s ease,background .12s ease}
.sk-page .wpcf7-list-item label:hover{border-color:rgba(184,87,12,.6)}
.sk-page .wpcf7-list-item label:has(input:checked){border-color:var(--accent);background:#fff4e6}
.sk-page .wpcf7-list-item input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--accent)}

/* 味の選択（1本目・2本目）だけは、丸いボタンで横に並べる */
.sk-flavor-note{margin-bottom:12px}
.sk-flavor-fields .wpcf7-radio,
.sk-flavor-fields .wpcf7-list-items{display:flex;flex-wrap:wrap;gap:9px}
.sk-flavor-fields .wpcf7-list-item{margin:0}
.sk-flavor-fields .wpcf7-list-item label{align-items:center;gap:8px;padding:11px 18px;
  border-radius:999px;font:800 14px "Zen Maru Gothic",sans-serif}
.sk-flavor-fields .wpcf7-list-item input{margin-top:0}

/* お届け日についての注意書き */
.sk-note-box{margin-bottom:16px}
.sk-note-h{font:900 13px "Zen Maru Gothic",sans-serif;color:var(--accent);margin-bottom:8px}
.sk-note-box p{font-size:12.5px;line-height:1.95;color:var(--muted)}
.sk-note-box p + p{margin-top:10px}
.sk-note-box b{color:var(--ink)}

.sk-hp-wrap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.sk-actions{margin-top:30px}
.sk-btn{display:inline-block;border:none;border-radius:14px;padding:17px 32px;
  font:900 15px "Zen Maru Gothic",sans-serif;cursor:pointer;text-decoration:none;line-height:1.5;text-align:center}
.sk-btn--go{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(184,87,12,.28);width:100%}
.sk-btn--ghost{background:#fff;color:var(--ink);border:2px solid var(--line)}
.sk-btn--ghost:hover{border-color:rgba(61,39,23,.4)}
.sk-page .wpcf7-submit{-webkit-appearance:none;appearance:none}

.sk-errs{background:#fdf1f2;border:2px solid rgba(192,57,43,.4);border-radius:14px;padding:16px 18px;margin:20px 0}
.sk-errs-h{font:800 13px "Zen Maru Gothic",sans-serif;color:#c0392b;margin-bottom:4px}
.sk-errs li{font-size:12.5px;font-weight:700;color:#c0392b;line-height:1.9;margin-left:1.1em}
.sk-field.is-err input,.sk-field.is-err select,.sk-field.is-err textarea{border-color:#c0392b;background:#fffafa}
.sk-field.is-err .wpcf7-list-item label{border-color:#c0392b}

.sk-review-body{border-top:1.5px solid var(--line)}
.sk-rv{display:grid;grid-template-columns:14em 1fr;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
@media(max-width:640px){.sk-rv{grid-template-columns:1fr;gap:2px}}
.sk-rv-k{font:800 12.5px "Zen Maru Gothic",sans-serif;color:var(--muted)}
.sk-rv-v{font-size:13.5px;font-weight:500;word-break:break-word}
.sk-rv-none{color:rgba(61,39,23,.38)}
.sk-review-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;align-items:center}
.sk-review-actions .sk-btn--go{width:auto;flex:1 1 240px}

.sk-done{padding:10px 0}
.sk-done-in{border:2.5px solid #2c7a4b;background:#eaf5ee;border-radius:18px;padding:30px 26px;text-align:center}
.sk-done-mark{width:52px;height:52px;border-radius:50%;background:#2c7a4b;color:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.sk-done-h{font:900 20px "Zen Maru Gothic",sans-serif;color:#2c7a4b}
.sk-done-p{font-size:13px;color:var(--muted);margin-top:10px}
.sk-done-bango{margin-top:16px;font-size:14px;font-weight:700}
.sk-done-bango b{font:800 20px Inter,sans-serif;letter-spacing:.04em}
.sk-done-next{margin-top:16px;font-size:13px;text-align:left;max-width:560px;margin-left:auto;margin-right:auto;
  background:#fff;border-radius:12px;padding:16px 18px;line-height:1.95}
.sk-done-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

.sk-foot{margin-top:56px;border-top:2px solid var(--line);padding-top:28px}
.sk-foot-h{font:900 15px "Zen Maru Gothic",sans-serif}
.sk-foot-p{font-size:12.5px;color:var(--muted);margin-top:8px}
.sk-foot-contact{margin-top:20px;background:var(--cream);border-radius:14px;padding:16px 18px;font-size:12.5px;line-height:2}
.sk-foot-small{color:var(--muted)}

@media print{
  body *{visibility:hidden}
  .sk-page .sk-review,.sk-page .sk-review *,
  .sk-page .sk-done,.sk-page .sk-done *{visibility:visible}
  .sk-page .sk-review{position:absolute;left:0;top:0;width:100%}
  .sk-review-actions,.sk-done-actions{display:none!important}
}

/* ===== このページ専用のヘッダー・フッター ===== */
body.fmsk-order-page header.wp-block-template-part,
body.fmsk-order-page footer.wp-block-template-part,
body.fmsk-order-page .wp-site-blocks > header,
body.fmsk-order-page .wp-site-blocks > footer{display:none!important}
body.fmsk-order-page .wp-site-blocks{padding-top:0!important;margin-top:0!important}
body.fmsk-order-page .wp-block-post-title{display:none!important}

.sk-topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sk-topbar-in{max-width:940px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 20px}
.sk-logo{display:block;width:46px;height:46px;flex:none;border-radius:50%;
  background:url(logo-round.png) center/contain no-repeat}
.sk-topbar-t{font:900 15px "Zen Maru Gothic",sans-serif;color:var(--ink);line-height:1.4;flex:1}
.sk-topbar-s{font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;line-height:1.5}
@media(max-width:520px){.sk-topbar-s{display:none}}

.sk-sitefoot{background:#3d2717;color:#fff;margin-top:48px}
.sk-sitefoot-in{max-width:940px;margin:0 auto;padding:30px 22px 34px}
.sk-sitefoot-org{font:900 16px "Zen Maru Gothic",sans-serif;color:#fff}
.sk-sitefoot-sub{font-size:12px;color:rgba(255,255,255,.72);margin-top:4px}
.sk-sitefoot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.sk-sitefoot-nav a{font:700 12.5px "Zen Maru Gothic",sans-serif;color:#fff;text-decoration:none}
.sk-sitefoot-nav a:hover{color:#f0b968;text-decoration:underline}
.sk-sitefoot-c{font-size:11px;color:rgba(255,255,255,.55);margin-top:20px}
