section.products h2 {
    font-family: var(--font-sans-en);
}


section.products div.wrap {
    position: relative;
}

section.products div.wrap img.wave {
    position: absolute;
    bottom: 0;
}

div.products-area {
    padding-top: 2rem;
}

ul.dish-img-list {
    display: flex;
    flex-wrap: nowrap;
    top: 0;
    margin: 0;
}

ul.dish-img-list li {
    padding-right: 0.5rem;
    width: calc(100%/4);
    overflow: hidden;
}

ul.dish-img-list li:last-child {
    padding: 0;
    width: calc(100%/4 - 0.5rem);
}

section.products div.container {
    width: 60vw;
    margin: 0 auto;
    padding-bottom: 5rem;
}

section.products div.container p {
    font-size: 1.2rem;
}

section.products div.container h2 {
    font-size: 2.0rem;
}

section.products div.container h2 span {
    display: block;
    font-size: 1.25rem;
    color: var(--text);
    opacity: 0.5;
    font-weight: 500;
}

div#slider-2 {
    width: 100%;
}

section.products div.products-list p {
    margin: 0;
}

section.products div.products-list p.item-name {
    text-align: left;
    width: 80%;
    padding-top: 1rem;
    font-size: 1.2rem;
}

section.products div.products-list p.contents {
    text-align: left;
    color: #5d788b;
    font-weight: 400;
    width: 80%;
    padding-bottom: 0.5rem;
    font-size: 1rem;
}

section.products div.products-list p.item-description {
    font-size: 0.9rem!important;
    text-align: left;
    width: 80%;
    padding-bottom: 1.2rem;
}

section.products div#slider-2 {
    width: 100%;
}
    
section.products div.products-list ul {
    padding-top: 1.5rem;
}

section.products li.splide__slide div.frame {
    border: #1f496e62 solid 1px;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 1rem;
}

section.products li.splide__slide div.frame div.img-wrap {
    width: 90%;
    aspect-ratio: 5/3;
    overflow: hidden;
    position: relative;
    border-radius: 10%;
}

section.products li.splide__slide div.frame div.img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

section.products div.products-list ul li.splide__slide {
    padding: 0.25rem;
}

.splide__pagination__page.is-active {
    background: #0A6FB7!important;
}

section.products div.button-col ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
}

section.products div.button-col ul li p {
    background-color: #fff;
    border: #0A6FB7 solid 2px;
    font-size: 0.85rem;
    text-align: center;
    color: #0A6FB7;
    padding: 1vh 0.75vw;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s;
}

section.products div.button-col ul li:nth-child(2) p {
    background-color: #BF0000;
    border: #BF0000 solid 2px;
    color: #fff;
}

section.products div.button-col ul li p:hover {
    background-color: #bdd9ec;
}

section.products div.button-col ul li:nth-child(2) p:hover {
    background-color: #a00000;
}

div#slider-2-track {
    padding-bottom: 2rem;
}

div.button-col {
    width: 100%;
}

div.button-col ul {
    width: 100%;
    justify-content: center;
}

div.button-col ul li {
    width: 50%;
    padding: 0 0.25rem;
}

/* 近日公開の見た目 */
.button.is-soon,
.button[aria-disabled="true"]{
  opacity: .55;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* ホバーの強調を抑える（サイトのボタン演出に合わせて調整） */
.button.is-soon:hover,
.button[aria-disabled="true"]:hover{
  transform: none;
  box-shadow: none;
}

/* 小さなトースト（なければ追加） */
.toast{
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: rgba(17,17,17,.92); color:#fff; padding:.6rem .9rem; border-radius:10px;
  font-size:.9rem; opacity:0; transition:opacity .2s ease, transform .2s ease; z-index:9999;
}
.toast.is-show{ opacity:1; transform: translate(-50%,0); }


@media (width >= 0px) and (width < 479px){
    section.products div.container {
        width: 100%;
        padding: 1.5rem;
    }

    section.products div.wrap ul.dish-img-list li {
        width: 50%;
        padding-right: 0.25rem;
    }

    section.products div.wrap ul.dish-img-list li.hide  {
        display: none;
    }

    section.products div.container h2 {
        font-size: 2rem;
    }

    section.products div.container h2 span {
        font-size: 1.2rem;
    }

    section.products div.container p {
        font-size: 0.8rem;
    }

    .splide__arrow {
        display: none!important;
    }

    section.products div.products-list ul li.splide__slide {
        padding: 2rem 2rem 1rem;
    }

    section.products div.products-list p.item-name {
        font-size: 1.2rem!important;
    }

    section.products div.products-list p.contents {
        color: #5d788b;
        font-size: 1rem!important;
    }

    section.products .item-description {
        display: none;
    }

    section.products div.button-col ul li {
        padding: 1rem 1rem 0;
    }

    section.products div.button-col ul li p {
        font-size: 0.8rem;
    }
}

@media (width >= 480px) and (width < 767px){
    section.products div.container {
        width: 100%;
        padding: 1.5rem;
    }

    section.products div.wrap ul.dish-img-list li {
        width: 50%;
        padding-right: 0.25rem;
    }

    section.products div.wrap ul.dish-img-list li.hide  {
        display: none;
    }

    section.products div.container h2 {
        font-size: 2rem;
    }

    section.products div.container h2 span {
        font-size: 1.2rem;
    }

    section.products div.container div.products-list {
        padding-top: 1rem;
    }

    section.products div.container p {
        font-size: 0.8rem;
    }

    div.product-card__actions button,
    div.product-card__actions a {
        font-size: 0.8rem;
        padding: 0.68rem 0.5rem;
    }

    .splide__arrow {
        display: none!important;
    }

    section.products div.products-list ul li.splide__slide {
        padding: 0.25rem;
    }

    section.products .item-description {
        display: none;
    }

    section.products div.button-col ul li {
        padding: 1vh 1vw;
        width: 20vw;
    }

    section.products div.button-col ul li p {
        font-size: 1rem;
    }

    section.products li.splide__slide div.frame {
        padding: 1rem;
    }

    section.products div.button-col ul li {
        padding: 1rem 0.25rem 0;
        width: 50%;
    }

    section.products div.button-col ul li p {
        font-size: 0.75rem;
    }
}

@media (width >= 768px) and (width < 1199px){
    section.products div.container {
        width: 70vw;
        margin: 0 auto;
    }

    section.products div.container h2 {
        font-size: 1.6rem;
    }

    section.products div.container h2 span {
        font-size: 1.2rem;
    }

    section.products div.container p {
        font-size: 1rem;
    }

    section.products .item-description {
        display: none;
    }

    div.product-card__actions button,
    div.product-card__actions a {
        font-size: 0.8rem;
        padding: 0.68rem 0.25rem;
    }
    
    section.products div.button-col ul li {
        padding: 1vh 1vw;
        width: 15vw;
    }

    section.products div.button-col ul li {
        padding: 1rem 0.25rem 0;
        width: 50%;
    }

    section.products div.button-col ul li p {
        font-size: 0.8rem;
    }
}

@media (width >= 1200px){
    section.products div.container {
        width: 60vw;
        margin: 0 auto;
    }

    section.products div.container h2 {
        font-size: 2rem;
    }

    div.product-card__actions button,
    div.product-card__actions a {
        font-size: 0.8rem;
        padding: 0.68rem 0.5rem;
    }

    section.products div.container h2 span {
        font-size: 1.2rem;
    }

    section.products div.container p {
        font-size: 1.2rem;
    }

    section.products div.products-list ul li.splide__slide {
        padding: 1rem;
    }

    section.products div.button-col ul li p {
        font-size: 0.85rem;
    }
}

/* 追加分 */
   /* ===================== テーマトークン ===================== */
    :root{
      --brand:#0a6fb7;
      --rakuten:#BF0000;               /* ご指定の赤 */
      --surface:#fff;
      --overlay:rgba(8,12,20,.72);
      --blur:4px;
      --radius:14px;
      --shadow:0 18px 50px rgba(0,0,0,.26);
      --gutter:1.25rem;
      --text:#16181c;
      --muted:#687080;
      --bg:#f6f7f9;
      --ring: color-mix(in srgb, var(--brand) 50%, transparent);
    }

    /* ===================== ベース ===================== */
    /* section.products div.container .visually-hidden{
      position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
    } */
    /* .wrap{ max-width:1200px; margin-inline:auto; padding:24px 16px; }
    .page-title{ margin:0 0 12px; font-weight:700; letter-spacing:.01em;
                 font-size:clamp(1.28rem, 2.6vw, 1.6rem); } */

    /* ===================== 商品カード ===================== */
    div#productsSlider .product-card{
        border-radius:.9rem; 
        border: 1px solid #767a8169;
        padding:.9rem; transition:transform .12s ease, box-shadow .12s ease;
        outline:none; height:100%; display:flex; flex-direction:column; gap:.6rem;
    }
    div#productsSlider .product-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10); }
    .product-card:focus-visible{ box-shadow:0 0 0 3px var(--ring); }
    .product-card__thumb{ border-radius:.6rem; overflow:hidden; }
    .product-card__name{ margin:.2rem 0 0; font-weight:650; font-size:1rem; letter-spacing:.01em; }
    .product-card__meta{ margin:0; color:var(--muted); font-size:.92rem; }
    .product-card__actions{ margin-top:auto; display:flex; gap:.6rem; }
    .product-card__actions .button,
    .product-card__actions .button--ghost{ flex:1 1 auto; text-align:center; }

    /* ===================== 汎用ボタン ===================== */
    .button{
      cursor:pointer; display:inline-block; padding:.68rem 1rem; border-radius:.9rem;
      background:var(--brand); color:#fff; border:0; text-decoration:none; line-height:1.1;
      font-weight:600; letter-spacing:.01em; transition:filter .12s ease, transform .06s ease;
    }
    .button:hover{ filter:brightness(1.06); }
    .button:active{ transform:translateY(1px); }
    .button--ghost{
      background:transparent; color:var(--brand);
      border:1px solid color-mix(in srgb, var(--brand) 72%, #fff 0%);
    }
    .button--secondary{ background:#6b7280; }
    .button--rakuten{ background:var(--rakuten); }            /* 楽天ボタン（ご指定色） */

    /* ===================== Splide（商品スライダーのみ） ===================== */
    .splide{ margin-top:.25rem; }
    .splide__track{ overflow:visible; }
    .splide__slide figure{ margin:0; }
    .splide__slide img{
      width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:.7rem;
      box-shadow:0 6px 18px rgba(0,0,0,.08);
    }

    /* no-JSフォールバック（商品一覧をグリッドで） */
    .no-js .products__list{
      display:grid; gap:1rem;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      list-style:none; padding:0; margin:0;
    }
    .no-js .products__slide{ list-style:none; }

    /* ===================== dialog（集中設計 & 滑らか遷移） ===================== */
    :where(dialog){ border:none; padding:0; }
    :where(dialog)::backdrop{
      background: var(--overlay);
      backdrop-filter: blur(var(--blur)) saturate(70%);
    }
    .modal__panel{
      position:relative; margin:0; background:var(--surface);
      border-radius:var(--radius); box-shadow:var(--shadow);
      padding:calc(var(--gutter) - .25rem) var(--gutter);
      max-height:min(84vh, 34rem); overflow:auto; width:min(720px, 92vw);
      transform: translateY(8px) scale(.985);
      opacity:0;
    }
    .modal__close{
      position:absolute; top:.5rem; right:.5rem;
      background:rgba(0,0,0,.06); border:0; color:#111; border-radius:10px;
      padding:.35rem .55rem; cursor:pointer; line-height:1;
      transition:background .12s ease, transform .06s ease;
    }
    .modal__close:hover{ background:rgba(0,0,0,.10); }
    .modal__close:active{ transform:translateY(1px); }

    .modal__title{ margin:.25rem 2rem .35rem .1rem; font-size:1.18rem; line-height:1.35; font-weight:700; }
    .modal__body{ display:grid; gap:1rem; }
    .modal__footer{
      margin-top:.5rem; display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap;
      background:transparent; border:0; padding:0; /* 無色フッター（ボタンのみ） */
    }

    .splide__pagination {
        bottom: -1.5rem!important;
    }

    div#productsSlider .splide__list {
        padding: 1.5rem 0 0 0!important;
    }

    /* 開閉アニメ */
    @media (prefers-reduced-motion: no-preference){
      dialog[open] .modal__panel{ animation: modal-in .22s cubic-bezier(.2,.7,.2,1) forwards; }
      @keyframes modal-in{ from{ transform: translateY(10px) scale(.975); opacity:.001; } to{ transform:none; opacity:1; } }
      dialog.is-closing .modal__panel{ animation: modal-out .18s ease forwards; }
      @keyframes modal-out{ from{ transform:none; opacity:1; } to{ transform: translateY(6px) scale(.985); opacity:0; } }
    }
    @media (max-width: 478.98px){ .modal__panel{ width:92vw; } }
    @media (min-width: 479px) and (max-width: 766.98px){ .modal__panel{ width:88vw; } }
    @media (min-width: 767px){ .modal__panel{ width:720px; } }
    @media (width >= 0px) and (width < 479px){ .modal__panel{ width:92vw; } }
    @media (width >= 480px) and (width < 767px){ .modal__panel{ width:88vw; } }
    @media (width >= 767px){ .modal__panel{ width:720px; } }

    /* ====== モーダル内の要素（順序：説明→料理名→料理画像→材料→作り方→CTA） ====== */
    .section-title{ font-size:1.02rem; margin:.1rem 0 .2rem; font-weight:700; }
    .meta{ color:var(--muted); font-size:.95rem; }

    /* 料理画像（スライダー無し・料理専用） */
    section.products div.container .hero{
      border-radius:.8rem; overflow:hidden; background: #f2f3f6;
      display:block;
    }
    section.products div.container .hero img{ width:100%; height:auto; aspect-ratio: 4/3; object-fit:cover; }
    .hero--placeholder{
      border:2px dashed #c8cbd3; color:#98a0af; display:grid; place-items:center;
      min-height:220px; font-size:.92rem;
    }

    /* 材料：詳細リスト（配列 or グループ構造に対応） */
    .ingredients-block{ display:grid; gap:.4rem; }
    .ingredients-servings{ color:var(--muted); font-weight:600; font-size:.92rem; }
    .ingredients-list{ list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
    .ingredients-list li{
      display:flex; justify-content:space-between; gap:.75rem;
      border-bottom:1px dashed #e7e8ec; padding:.22rem 0;
      font-size:.95rem;
    }
    .ingredients-name{ flex:1 1 auto; }
    .ingredients-qty{ flex:0 0 auto; color:#404757; font-variant-numeric: tabular-nums; }

    .ingredients-group{ margin:.35rem 0 .1rem; font-weight:700; font-size:.95rem; color:#2a2f3a; }

    .steps{ counter-reset: step; padding-left:1rem; }
    .steps li{ margin:.2rem 0; }
    .steps li::marker{ color:var(--muted); }

    html.modal-open{ overflow:hidden; }