@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

/* =========================================================
   ms-com.net 本体サイトとデザイン・色味をそろえる追加スタイル
   2026/08/26  ※ style.css には手を入れず、このファイルで上書きする
   ========================================================= */
:root{
  --ms-green:#89CC14;      /* 本体サイトのFV帯・フッターと同じ緑 */
  --ms-green-d:#5CB431;    /* 本体サイトのお問い合わせボタン */
  --ms-green-dd:#3E7A12;   /* 文字用の濃い緑 */
  --ms-bg:#F3FFD7;         /* 本体サイトのページ背景 */
  --ms-ink:#111;
}
body{background:var(--ms-bg)}

/* ---------- ヘッダー ---------- */
header{background:#fff;border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.07)}
.hin{max-width:1400px;padding:15px 22px;gap:26px;flex-wrap:wrap;row-gap:10px}
.logo img{height:50px}
nav{gap:24px;font-size:15px;margin-left:auto}
nav a{color:var(--ms-ink);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
nav a:hover,nav a.on{color:var(--ms-green-dd);border-color:var(--ms-green)}
.hcta{display:inline-flex;align-items:center;gap:11px;background:var(--ms-green-d);color:#fff;font-weight:700;
  font-size:15px;border-radius:999px;padding:15px 28px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(60,120,20,.2);transition:.18s}
.hcta::after{content:"\203A";display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:#fff;color:var(--ms-green-d);font-size:15px;font-weight:700;line-height:0}
.hcta:hover{background:var(--ms-green-dd);color:#fff;transform:translateY(-1px)}

/* ---------- ヒーロー（本体サイトのFV帯に合わせる） ---------- */
.hero{background:var(--ms-green)!important;color:#fff}
.hero::before{display:none}
.hero::after{display:none}
.hin2{padding:60px 22px 54px}
.hin2::after{content:"SHOP";position:absolute;right:24px;bottom:2px;font-family:Poppins,sans-serif;font-weight:700;
  font-size:clamp(52px,7.2vw,102px);line-height:1;color:rgba(255,255,255,.5);letter-spacing:-.02em;pointer-events:none}
.eyebrow{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.14)}
.hero h1{color:#fff}
.lead{color:rgba(255,255,255,.95)}
.hstat b{color:#fff}
.hstat span{color:rgba(255,255,255,.88)}

/* ---------- アクセント色を本体サイトにそろえる ---------- */
.chip.on{background:var(--ms-green-d);border-color:var(--ms-green-d)}
.new{color:var(--ms-green-dd)}
.buy{background:var(--ms-green-d);box-shadow:0 6px 16px rgba(92,180,49,.34)}
.btn.p{background:var(--ms-green-d);box-shadow:0 6px 16px rgba(92,180,49,.34)}
.done .mark{background:var(--ms-green-d)}
.mini{background:var(--ms-green-d);border-color:var(--ms-green-d)}
h2{border-bottom-color:var(--ms-green)}
.crumb a:hover,.filtered a,.agree a{color:var(--ms-green-dd)}
.htel{display:none}

/* ---------- フッター（本体サイトと同じ緑） ---------- */
footer{background:var(--ms-green);color:#fff}
.fin{max-width:1400px;padding:60px 22px 32px;grid-template-columns:1.5fr 1fr 1fr;gap:40px;font-size:14px}
.fin img{height:50px;filter:brightness(0) invert(1);opacity:1;margin-bottom:18px}
.fin p{margin:0 0 8px;line-height:1.9;color:#fff}
.fin b{color:#fff}
.fhours{font-size:13px;color:rgba(255,255,255,.9)}
.fcol h4{color:#fff;font-size:14px;margin:0 0 13px;font-weight:700;letter-spacing:.04em;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.38)}
.fin a{color:#fff;display:block;padding:5px 0}
.fin a:hover{color:#fff;text-decoration:underline}
.fbot{border-top:1px solid rgba(255,255,255,.3)}
.fbot div{max-width:1400px;padding:16px 22px;font-size:12px;color:rgba(255,255,255,.92)}

/* ---------- レスポンシブ ---------- */
@media(max-width:1100px){
  nav{gap:17px;font-size:14px}
  .hcta{padding:13px 22px;font-size:14px}
}
@media(max-width:900px){
  /* 既存CSSはここで nav を消してしまうが、代わりのメニューが無いので出す */
  nav{display:flex!important;order:3;width:100%;margin-left:0;gap:8px 16px;flex-wrap:wrap;font-size:13px}
  .hin{padding:11px 16px}
  .logo img{height:40px}
  .hcta{margin-left:auto;padding:10px 18px;font-size:13px;gap:8px}
  .hin2{padding:40px 18px 38px}
  .hin2::after{font-size:42px;right:14px;bottom:2px;color:rgba(255,255,255,.42)}
  .fin{grid-template-columns:1fr;gap:24px;padding:42px 18px 24px}
}
@media(max-width:420px){
  nav{gap:7px 12px;font-size:12px}
  .logo img{height:34px}
  .hcta{padding:9px 14px;font-size:12px}
}

/* ---------- フッターのロゴ・SNS ---------- */
.fin img.flogo{height:56px;filter:none;opacity:1;margin-bottom:18px}
.fsns{list-style:none;display:flex;gap:12px;margin:18px 0 0;padding:0}
.fsns li{margin:0}
.fsns a{display:grid;place-items:center;width:34px;height:34px;padding:0;transition:.18s}
.fsns a:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 6px 14px rgba(30,60,20,.22)}
.fsns img{width:34px;height:34px;filter:none}
@media(max-width:900px){.fin img.flogo{height:46px}.fsns a{width:30px;height:30px}.fsns img{width:30px;height:30px}}


/* =========================================================
   2026/08/26 追記：ヘッダーを大きく／見出しの泣き別れ対策
   ========================================================= */
.logo img{height:60px}
nav{font-size:16px;gap:26px}
nav a{white-space:nowrap}
.hcta{font-size:16px;padding:16px 30px}
@media(max-width:1100px){
  nav{font-size:15px;gap:18px}
  .hcta{font-size:15px;padding:14px 24px}
}
@media(max-width:900px){
  .logo img{height:48px}
  nav{font-size:15px;gap:10px 18px}
  .hcta{font-size:14px;padding:12px 20px}
}
@media(max-width:420px){
  .logo img{height:42px}
  nav{font-size:14px;gap:9px 14px}
  .hcta{font-size:13px;padding:10px 15px}
}

/* 見出しが1〜2文字だけ次の行に落ちないように */
h1,h2,h3,h4,.hero h1,.shead h2,.cin h3,.dt,.ph1,.done h1{text-wrap:balance;word-break:auto-phrase}
.lead,.tt,.sp,.tcell span,.filtered,.note,.wnote{text-wrap:pretty}
.tcell b{white-space:nowrap}
@media(max-width:480px){.hero h1{font-size:24px;line-height:1.5}}
@media(max-width:380px){.hero h1{font-size:21px}}

/* 安心の4点：スマホは1列にして文字の途中改行を防ぐ */
.tcell span,.tcell b{word-break:auto-phrase}
@media(max-width:520px){.tin{grid-template-columns:1fr;gap:14px;padding:20px 18px}}