:root{
      --narita-green:#0d5d3a;    /* 濃い緑（見出し・ボタン） */
      --narita-cream:#fdfbf6;    /* クリーム色（黄み控えめ） */    /* クリーム色（少しだけ明るく） */    /* クリーム色（背景） */
      --narita-red:#b71c1c;      /* 赤（注意・アクセント） */
      --ink:#222;                /* 文字色 */
      --muted:#5c5c5c;          /* 補助文字 */
      --border:#efeadd;          /* 枠線（やや明るく） */          /* 枠線 */
      --maxw:928px;            /* 最大幅 */
      --radius:14px;            /* 角丸 */
      --space:clamp(12px, 2vw, 20px);
      --notice-bg:#fdecec; /* 注意見出しの淡赤背景 */
    }

    html,body{margin:0;padding:0;background:#fff;color:var(--ink);;line-height:1.7;}
    img{max-width:100%;height:auto;vertical-align:middle;}
    main a{color:var(--narita-green);text-decoration:none}
    main a:hover {
        text-decoration: underline
    }

    /* レイアウト */
    .wrap {
        max-width: var(--maxw);
        margin-inline: auto;
        padding: clamp(16px, 4vw, 28px);
        padding-top: 0;
    }
    .section{margin-block:clamp(24px,5vw,54px);} 
    .grid{display:grid;gap:clamp(12px,2.5vw,24px);} 
    @media (min-width: 768px){.grid-2{grid-template-columns:1.1fr 1fr}}

    /* ヒーロー */
    .hero {
        position: relative;
        background: var(--narita-cream);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--border);
        margin-block: 0;
    }
    .hero-inner{display:grid;gap:var(--space);align-items:center;padding:clamp(16px,4vw,36px);} 
    .hero-inner figure {
        margin:0;
    }
    @media (min-width: 900px){.hero-inner{grid-template-columns: 1.2fr 1fr;}}

    .badge{display:inline-block;background:var(--narita-green);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.06em;}
    .title {
        font-family: var(--font-min);
        font-size: clamp(24px, 4vw, 36px);
        font-weight: 800;
        color: var(--narita-green);
        margin: 8px 0 6px;
        letter-spacing: .02em;
    }
    .lead{color:var(--muted);font-size:clamp(14px,2.2vw,16px);} 
    .dates{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
    .pill{border:1px solid var(--narita-green);color:var(--narita-green);padding:6px 10px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap}

    @media (min-width: 900px){
    /* PCのみ：ヒーロー背景に雪景をうっすら敷く */
    .hero{
      background:
        linear-gradient(#fff8,#fff8),
        url('/images/suguki-bg.jpg') center/cover no-repeat;
    }
  }

    /* 魅力 */
    .feature{border:none;border-radius:0;background:var(--narita-cream);} 
    .feature .inner {
        padding: clamp(24px, 4vw, 40px);
        text-align: center;
        display: block;
        background: rgba(255, 255, 255, 0.9);
        margin: 50px;
    }
    .feature h2 {
        font-family: var(--font-min);
        font-weight: 700;
        font-size: clamp(20px, 3.6vw, 28px);
        color: var(--narita-green);
        margin: 0 0 14px;
        letter-spacing: .03em;
    }
    .feature .inner p{line-height:1.9;letter-spacing:.01em;margin:0 auto;max-width:60ch;} 

    /* PCのみ：新漬の魅力セクションに固定背景（コンテンツ内固定背景） */
    @media (min-width: 900px){
      .feature{
        background:
          linear-gradient(rgba(253,251,246,0.3), rgba(253,251,246,0.3)),
          url('img/suguki-bg.jpg') center/cover no-repeat;
        background-attachment: fixed;
        padding: 2em;
      }
    }
    @media (max-width: 899px) {
        .feature .inner {
            margin:0;
        }
    }

    /* 注意文 */ */
    .notice{border-left:6px solid var(--narita-red);}
    .notice .inner{padding:14px;border:1px solid var(--border);border-radius:0px 0px 12px 12px;background:#fff;overflow:hidden;}  
    .notice h3{margin:0;color:var(--narita-red);font-size:clamp(16px,2.8vw,20px);letter-spacing:.02em;background:var(--notice-bg);padding:10px 14px;border-bottom:1px solid #f4d6d6;border-radius:12px 12px 0 0;display:flex;align-items:center;gap:8px;}
    .notice h3::before{content:"!";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--narita-red);color:#fff;font-weight:700;font-size:12px;line-height:1;} 
    .notice ul{list-style:disc outside;margin:10px 0 0 1.2em;padding-left:0;}
    .notice li{list-style:inherit;margin:6px 0;}
    .notice p {margin-bottom: 5px;}
    .note-box{border:1px solid var(--border);border-radius:10px;padding:14px;margin:10px 0px;background:#fff}

    /* 商品一覧（システム挿入） */
    .products{border-top:1px solid var(--border);padding-top:clamp(20px,4vw,32px)}
    .products h2{font-size:clamp(18px,3vw,22px);margin:0 0 12px;color:var(--narita-green)}
    .sys-slot{border:1px dashed var(--border);border-radius:10px;padding:16px;color:var(--muted);text-align:center}

    /* ボタン */
    .btn{display:inline-flex;align-items:center;gap:.5em;padding:.75em 1.1em;border-radius:999px;font-weight:700;border:1px solid var(--narita-green);}
    .btn.primary{background:var(--narita-green);color:#fff}
    .btn.ghost{color:var(--narita-green);background:#fff}

    /* 小要素 */
    .caption{font-size:12px;color:var(--muted)}
    /* ストーリー（タイムライン） */
    .story-title{color:var(--narita-green);font-size:clamp(18px,3vw,22px);margin:0 0 12px;}
    .story-steps{position:relative;padding:0;margin:0;list-style:none;max-width:720px;margin-inline:auto}
    .story-steps::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--border);}
    .story-steps .step{position:relative;display:grid;grid-template-columns:28px 1fr;gap:12px;margin:18px 0}
    .story-steps .dot{grid-row:1 / span 2;position:relative;width:28px;height:28px;border-radius:0;background:#fff;color:var(--ink);border:1px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px;box-shadow:0 0 0 3px #fff}
    .story-steps figure{margin:0}
    .story-steps img{display:block;}
    .story-steps figcaption{margin-top:6px;}
    .story-steps .label{font-weight:700;margin-bottom:4px}
    @media (max-width: 899px){
    .story-steps{max-width:100%}
    }