/* body {
  width: 100%;
  min-width: 100%;
} */

/* ---------------------------------
        カスタムプロパティ
--------------------------------- */
:root {
  --w-max: 1180;
  --h-fv: 778;

  --f-mincho: '游明朝', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
  
  --c-nabe-black: #222;
  --c-nabe-beige-dark: #b89264;
  --c-nabe-beige: #dfd5b6;
  --c-nabe-beige-light: #f6f5ef;
  --c-nabe-red: #df0615;

  --c-nabe-fukuoka: #17570a;
  --c-nabe-aichi: #926718;
  --c-nabe-akita: #7b2f10;
  --c-nabe-tokyo: #9d376b;
  --c-nabe-kyoto: #9c7d69;
  --c-nabe-kagawa: #627312;
  --c-nabe-hiroshima: #ab951d;
}

@media (width < 768px) {
  :root {
    --w-max: 400; /* ベースとなる幅（カンプに合わせる） */
  }
}

/* ---------------------------------
        リセット
--------------------------------- */
@scope (.l-nabe) {
  :scope {
    font-family: var(--f-mincho);
    color: var(--c-nabe-black);
    background-color: var(--c-nabe-beige-light);
    container-type: inline-size;
    padding-bottom: 40px;

    @media (width < 768px) {
      padding-bottom: calc(46 / var(--w-max) * 100vw);
    }
  }


  h1,h2,h3,h4,h5 {
    margin: 0;
    padding: 0;
    font-weight: 600;
  }

  ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  p, figcaption, dt, dd {
    margin: 0;
  }

  figure, figcaption {
    margin: 0;
  }
}

/* ---------------------------------
        コンポーネント
--------------------------------- */
@property --_bg-button {
  syntax: "<color>";
  inherits: false;
  initial-value: #222;
}

.c-nabe-link-button, .c-nabe-button {
  --_c-hover: color-mix(in srgb, var(--_bg-button), white 8%);
  display: block;
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.32;
  color: white;
  text-align: center;
  background-color: var(--_bg-button);
  transition: background-color .3s, scale .45s;
  padding-inline: 1.25em;

  @media (width < 768px) {
    font-size: calc(24 / var(--w-max) * 100vw);
  }

  &:focus-visible {
    background-color: var(--_c-hover);
  }

  @media (any-hover: hover) {
    &:hover {
      cursor: pointer;
      background-color: var(--_c-hover);
    }

    &:active {
      scale: .98;
    }
  }
}

.c-nabe-button {
  --_bg-button: var(--c-nabe-beige-dark);
  padding-block: .59em;
}

.c-nabe-link-button {
  --_bg-button: #182a4b;
  width: min(100%, 400px);
  margin-inline: auto;
  padding: .72em;

  @media (width < 768px) {
    width: calc(100% - (32 / var(--w-max) * 100vw));
  }

  &.--page-top {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 52% 16px auto auto;
      translate: 0 -50%;
      display: block;
      width: 10px;
      height: 10px;
      border-top: 2px solid white;
      border-right: 2px solid white;
      transform-origin: 50% 50%;
      rotate: -45deg;
    }
  }
}

/* ---------------------------------
        メイン
--------------------------------- */
.l-base:has(.l-nabe) {
  @media not (width < 768px) {
    width: min(calc(1220 / 1300 * 100vw), 1220px);
    margin-top: 24px;
  }
}

.l-nabe-wrap {
  overflow: clip;
  margin-top: min(calc(40 / var(--w-max) * 100%), 40px);

  @media (width < 768px) {
    margin-top: calc(34 / 375 * 100vw);
  }
}

.l-nabe-fv {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: var(--w-max) / var(--h-fv);
  background: url(../img/bg_fv@2x.jpg) no-repeat left top / 100% auto, var(--c-nabe-beige-light);

  @media (width < 768px) {
    aspect-ratio: unset;
    background: url(../img/bg_fv_sp@2x.png) no-repeat center top / 100% auto, var(--c-nabe-beige-light);
    padding: calc(14 / var(--w-max) * 100vw) calc(5 / var(--w-max) * 100vw) 0;
  }

  h1 {
    position: absolute;
    inset: 0 calc(-50 / var(--w-max) * 100%) auto auto;
    width: min(calc(381 / var(--w-max) * 100%), 381px);

    @media (width < 768px) {
      inset: 0 auto auto calc(16 / var(--w-max) * 100vw);
      width: calc(200 / var(--w-max) * 100vw);
    }

    img {
      width: 100%;
      height: auto;
    }
  }

  &::before, &::after {
    content: "";
    position: absolute;
    display: none;
    width: calc(105 / var(--w-max) * 100vw);
    height: auto;
    aspect-ratio: 295 / 233;
    background: url(../img/icon_wave01@2x.png) no-repeat left top / contain;

    @media (width < 768px) {
      display: block;
    }
  }

  &::before {
    inset: auto auto calc(-55 / var(--w-max) * 100vw) 0;
  }

  &::after {
    inset: auto auto calc(5 / var(--w-max) * 100vw) calc(-60 / var(--w-max) * 100vw);
  }
}

@property --_p-top {
  syntax: "<num>";
  inherits: false;
  initial-value: 0;
}

@property --_p-left {
  syntax: "<num>";
  inherits: false;
  initial-value: 0;
}

.l-nabe-fv-page-navi {
  width: 100%;
  height: 100%;

  @media (width < 768px) {
    position: relative;
    z-index: 1;
    height: auto;
  }

  ul {
    @media (width < 768px) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas:
        ". hokkaido"
        ". akita"
        "kyoto tokyo"
        "hiroshima aichi"
        "fukuoka kagawa"
      ;
    }
  }

  li {
    position: absolute;
    inset: calc(var(--_p-top) / var(--h-fv) * 100%) auto auto calc(var(--_p-left) / var(--w-max) * 100%);
    width: calc(341 / var(--w-max) * 100%);

    @media (width < 768px) {
      position: relative;
      inset: unset;
      width: auto;
    }

    &:first-child {
      --_p-top: 386;
      --_p-left: 20;
      grid-area: hiroshima;

      @media (width < 768px) {
        position: relative;
        inset-inline-start: calc(7 / var(--w-max) * 100vw);
        width: calc(167 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 167 / 135;
        margin-top: calc(-5 / var(--w-max) * 100vw);
      }
    }

    &:nth-child(2) {
      --_p-top: 15;
      --_p-left: 465;
      grid-area: hokkaido;
      
      @media (width < 768px) {
        position: relative;
        inset-inline-end: calc(8 / var(--w-max) * 100vw);
        justify-self: flex-end;
        width: calc(166 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 166 / 128;
      }
    }

    &:nth-child(3) {
      --_p-top: 45;
      --_p-left: 20;
      grid-area: kyoto;

      @media (width < 768px) {
        position: relative;
        inset-inline-start: calc(32 / var(--w-max) * 100vw);
        width: calc(164 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 164 / 141;
        margin-top: calc(-25 / var(--w-max) * 100vw);
      }
    }

    &:nth-child(4) {
      --_p-top: 577;
      --_p-left: 418;
      grid-area: kagawa;

      @media (width < 768px) {
        position: relative;
        justify-self: flex-end;
        inset-inline-end: calc(2 / var(--w-max) * 100vw);
        width: calc(178 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 178 / 149;
        margin-top: calc(-12 / var(--w-max) * 100vw);
      }
    }

    &:nth-child(5) {
      --_p-top: 196;
      --_p-left: 278;
      grid-area: akita;

      @media (width < 768px) {
        justify-self: flex-end;
        width: calc(149 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 149 / 153;
        margin-top: calc(-15 / var(--w-max) * 100vw);
      }
    }

    &:nth-child(6) {
      --_p-top: 600;
      --_p-left: 30;
      grid-area: fukuoka;

      @media (width < 768px) {
        position: relative;
        inset-inline-start: calc(19 / var(--w-max) * 100vw);
        width: calc(159 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 159 / 134;
        margin-top: calc(3 / var(--w-max) * 100vw);
      }
    }

    &:nth-child(7) {
      --_p-top: 562;
      --_p-left: 812;
      grid-area: aichi;

      @media (width < 768px) {
        position: relative;
        justify-self: flex-end;
        inset-inline-end: calc(10 / var(--w-max) * 100vw);
        width: calc(172 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 172 / 160;
        margin-top: calc(-12 / var(--w-max) * 100vw);
      }
    }

    &:last-child {
      --_p-top: 328;
      --_p-left: 508;
      grid-area: tokyo;

      @media (width < 768px) {
        position: relative;
        inset-inline-end: calc(13 / var(--w-max) * 100vw);
        justify-self: flex-end;
        width: calc(166 / var(--w-max) * 100vw);
        height: auto;
        aspect-ratio: 166 / 147;
        margin-top: calc(-20 / var(--w-max) * 100vw);
      }
    }
  }

  img {
    @media (width < 768px) {
      width: 100%;
      height: auto;
    }
  }

  a {
    transition: opacity .3s;

    &:focus-visible {
      cursor: pointer;
    }

    @media (any-hover: hover) {
      &:hover {
        cursor: pointer;
        opacity: .8;
      }
    }
  }
}

.l-nabe-introduction {
  position: relative;
  background: url(../img/icon_wave01@2x.png) no-repeat calc(123 / var(--w-max) * 100%) 113% / calc(148 / var(--w-max) * 100%) auto;

  @media (width < 768px) {
    background: none;
    padding-inline: calc(6 / var(--w-max) * 100vw);
  }

  &::before {
    content: "";
    position: absolute;
    inset: 75% auto auto calc(-15 / var(--w-max) * 100%);
    display: inline-block;
    width: calc(148 / var(--w-max) * 100%);
    height: auto;
    aspect-ratio: 295 / 233;
    background: url(../img/icon_wave01@2x.png) no-repeat left top / contain;

    @media (width < 768px) {
      display: none;
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: calc(108 / 170 * 100%) calc(70 / var(--w-max) * 100%) auto auto;
    display: inline-block;
    width: calc(107 / var(--w-max) * 100%);
    height: auto;
    aspect-ratio: 214 / 237;
    background: url(../img/icon_wave02@2x.png) no-repeat left top / contain;

    @media (width < 768px) {
      display: none;
    }
  }

  h2 {
    position: relative;
    width: calc(100% - 45px * 2);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.32;
    text-align: center;
    margin-inline: auto;

    @media (width < 768px) {
      width: 100%;
      font-size: calc(26 / var(--w-max) * 100vw);
      line-height: 1.3;
    }

    > span {
      position: relative;
      z-index: 1;
      display: inline-block;
      padding-inline: .75em;
      background-color: var(--c-nabe-beige-light);
      
      @media (width < 768px) {
        padding-inline: 0;
        background-color: transparent;
      }
    }

    &::before {
      content: "";
      position: absolute;
      inset: 50% 0 auto;
      display: inline-block;
      width: 100%;
      height: 4px;
      background-color: currentColor;

      @media (width < 768px) {
        display: none;
      }
    }

    &:has(+p) {
      margin-bottom: 24px;

      @media (width < 768px) {
        margin-bottom: calc(10 / var(--w-max) * 100vw);
      }
    }
  }

  p {
    font-size: 18px;
    font-weight: 600;
    line-height: 2.08;
    text-align: center;

    @media (width < 768px) {
      font-size: max(16px, calc(16 / var(--w-max) * 100vw));
      line-height: 1.75;
    }

    > span {
      font-size: min(1.34em, 24px);

      @media (width < 768px) {
        font-size: 1.25em;
      }
    }

    & + p {
      margin-top: 1em;
    }
  }
}

/* ------------------
    レシピカード
--------------------- */
/* 囲み */
.l-nabe-card {
  position: relative;
  padding: 0 50px 48px;
  background:
    url(../img/icon_wave02@2x.png) no-repeat right -29px top calc(476 / 1379 * 100%) / calc(107 / var(--w-max) * 100%) auto,
    url(../img/icon_wave02@2x.png) no-repeat left -33px top calc(877 / 1379 * 100%) / calc(107 / var(--w-max) * 100%) auto,
    url(../img/icon_wave01@2x.png) no-repeat right -17px bottom calc(0 / 1379 * 100%) / calc(148 / var(--w-max) * 100%) auto
  ;

  @media (width < 768px) {
    background: url(../img/icon_wave01@2x.png) no-repeat calc(-36 / var(--w-max) * 100vw) calc(28 / var(--w-max) * 100vw) / calc(105 / var(--w-max) * 100%) auto;
    padding: 0 calc(10 / var(--w-max) * 100vw) calc(24 / var(--w-max) * 100vw);
  }

  &:first-of-type {
    margin-top: clamp(34px, calc(52 / var(--w-max) * 100%), 52px);

    @media (width < 768px) {
      margin-top: calc(38 / var(--w-max) * 100vw);
    }
  }

  .l-nabe-recipe > & {
    z-index: 1;
  }

  &::before {
    display: none;
    content: "";
    position: absolute;
    inset: calc(-32 / var(--w-max) * 100vw) auto auto calc(25 / var(--w-max) * 100vw);
    width: calc(105 / var(--w-max) * 100%);
    height: auto;
    aspect-ratio: 295 / 233;
    background: url(../img/icon_wave01@2x.png) no-repeat center / contain;

    @media (width < 768px) {
      display: block;
    }
  }
}

.l-nabe-card__wrap {
  background: url(../img/bg_card.jpg) repeat left top / contain;
  padding-block: 0 10px;

  @media (width < 768px) {
    position: relative;
    z-index: 1;
  }
}

.l-nabe-card__container {
  padding-inline: 60px;

  @media (width < 768px) {
    padding-inline: calc(28 / var(--w-max) * 100vw);
  }
}

.l-nabe-card__inner {
  position: relative;
  margin-top: clamp(24px, calc(36 / 960 * 100%), 36px);

  @media (width < 768px) {
    margin-top: calc(16 / var(--w-max) * 100vw);
  }

  &:has(.l-nabe-card-details) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 23px 20px;

    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: calc(23 / var(--w-max) * 100vw);
    }
  }
}

/* タイトル */
.l-nabe-card__title {
  position: relative;
  inset-inline-start: 50%;
  width: min(calc(1147 / 1080 * 100%),1147px);
  translate: -50% 0;

  @media (width < 768px) {
    width: 100%;
    inset-inline-start: 0;
    translate: 0 0;
  }

  &:has(img) {
    text-align: center;

    img {
      translate: -1.5%;

      @media (width < 768px) {
        width: 100%;
        height: auto;
        translate: 0;
      }
    }
  }
}

/* 鍋紹介関連 */
.l-nabe-card-introduction {
  display: grid;
  grid-template-columns: 530fr 440fr;
  grid-template-areas: "left right";
  gap: 24px 36px;
  margin-top: -14px;

  @media (width < 768px) {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right";
    gap: calc(20 / var(--w-max) * 100vw);
    max-height: 100%;
    margin-top: calc(20 / var(--w-max) * 100vw);
  }
}

.l-nabe-card-introduction__left, .l-nabe-card-introduction__right {
  max-height: max-content;

  @media (width < 768px) {
    max-height: 100%;
  }
}

.l-nabe-card-introduction__left {
  position: relative;
  grid-area: left;

  &::before, &::after {
    content: "";
    position: absolute;
    display: block;
  }

  &::before {
    inset: calc(-8 / 640 * 100%) auto auto calc(-44 / 480 * 100%);
    width: calc(186 / 640 * 100%);
    height: auto;
    aspect-ratio: 186 / 95;
    background: url(../img/img_cloud01@2x.png) no-repeat left top / contain;

    @media (width < 768px) {
      inset: calc(-4 / var(--w-max) * 100vw) auto auto calc(-22 / var(--w-max) * 100vw);
      width: calc(95 / var(--w-max) * 100vw);
    }
  }

  &::after {
    inset: auto calc(-67 / 640 * 100%) calc(-42 / 480 * 100%) auto;
    width: calc(265 / 610 * 100%);
    height: auto;
    aspect-ratio: 265 / 119;
    background: url(../img/img_cloud02@2x.png) no-repeat left top / contain;

    @media (width < 768px) {
      inset: auto calc(-36 / var(--w-max) * 100vw) calc(-24 / var(--w-max) * 100vw) auto;
      width: calc(135 / var(--w-max) * 100vw);
    }
  }
}

.l-nabe-card-introduction__right {
  grid-area: right;
  /* &:has(.l-nabe-card-introduction__title) {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;

    @media (width < 768px) {
      flex: unset;
      display: block;
    }
  } */

  &:has(.l-nabe-card-details) {
    @media (width < 768px) {
      z-index: 1;
    }
  }

  .l-nabe-card-details {
    display: block;
    height: 100%;
    max-height: 380px;
    overflow: auto;

    @media (width < 768px) {
      max-height: 100%;
      overflow: hidden;
    }
  }

  .l-nabe-card-details__title {
    position: sticky;
    top: 0;
    left: 0;

    @media (width < 768px) {
      position: relative;
    }
  }

  .l-nabe-card-list__group ul {
    flex: 1;
    display: block;
  }
}

/* .l-nabe-card-introduction__title {
  font-size: clamp(28px, calc(48 / var(--w-max) * 100cqw), 48px);
  line-height: 1.33;

  @media (width < 768px) {
    font-size: calc(28 / var(--w-max) * 100vw);
    line-height: 1.54;
  }

  &:has(+p) {
    margin-left: calc(30 / 48 * 1em);

    @media (width < 768px) {
      margin-left: 0;
      margin-bottom: .29em;
    }
  }

  &, + p {
    writing-mode:vertical-rl;
    text-orientation: mixed;
    word-break: break-all;

    @media (width < 768px) {
      writing-mode: horizontal-tb;
    }

    > [lang="en"] {
      text-orientation: upright;

      @media (width < 768px) {
        text-orientation: mixed;
      }
    }
  }

  + p {
    font-size: clamp(16px, calc(20 / var(--w-max) * 100cqw), 20px);
    line-height: 1.8;
    font-weight: 600;

    @media (width < 768px) {
      font-size: max(16px, calc(16 / var(--w-max) * 100vw));
    }
  }
} */

/* 金の囲みボックス関連 */
.l-nabe-card-details {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}

.l-nabe-card-details__title {
  position: relative;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: calc(36 / 28);
  color: white;
  border-left: 12px solid var(--c-nabe-red);
  background: var(--c-nabe-black);
  padding: .21em .6em;
  overflow: clip;

  @media (width < 768px) {
    font-size: calc(18 / var(--w-max) * 100vw);
    border-left-width: calc(8 / var(--w-max) * 100vw);
    padding: .33em calc(10 / 18 * 1em) .3em;
  }

  > span {
    font-size: calc(22 / 28 * 1em);

    @media (width < 768px) {
      font-size: max(14px, calc(14 / var(--w-max) * 100vw));
    }
  }

  &::before {
    content: "";
    position: absolute;
    inset: 3px calc(-21 / 470 * 100%) auto auto;
    display: block;
    width: min(calc(136 / 470 * 100%), 136px);
    height: auto;
    aspect-ratio:  136 / 107;
    background: url(../img/icon_wave01@2x.png) no-repeat center / contain;
    opacity: .2;

    @media (width < 768px) {
      width: calc(90 / var(--w-max) * 100vw);
      inset: calc(2 / var(--w-max) * 100vw) calc(-23 / var(--w-max) * 100vw) auto auto;
    }
  }
}

.l-nabe-card-details__inner {
  background-color: white;
  border: 1px solid var(--c-nabe-beige);
  padding: 17px 25px 19px;

  @media (width < 768px) {
    padding: calc(11 / var(--w-max) * 100vw) calc(18 / var(--w-max) * 100vw) calc(12 / var(--w-max) * 100vw);
  }
}

.l-nabe-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 0;

  @media (width < 768px) {
    gap: calc(14 / var(--w-max) * 100vw) 0;
  }

  > ul:not([class]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    column-rule: dashed 2px var(--c-nabe-black);
    gap: 0 min(calc(40 / 470 * 100%), 40px);

    @media (width < 768px) {
      grid-template-columns: 1fr 1fr;
      column-rule: dashed 1px var(--c-nabe-black);
      gap: 0 calc(32 / var(--w-max) * 100vw);
    }
  }

  li {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;

    @media (width < 768px) {
      font-size: max(12px, calc(12 / var(--w-max) * 100vw));
      line-height: 1.58;
    }
  }
}

.l-nabe-card-list__group {
  grid-column: 1 / -1;

  > li {
    display: flex;
    align-items: baseline;
    gap: 0 8px;
    background-color: color-mix(in srgb, var(--c-nabe-beige) 40%, transparent);
    border-radius: 8px;
    padding: 1px 12px;

    @media (width < 768px) {
      gap: calc(5 / var(--w-max) * 100vw);
      padding-inline: calc(8 / var(--w-max) * 100vw);
    }

    &:not(:first-child) {
      margin-top: 6px;
    }

    > span {
      font-size: 1.375em;
    }
  }

  ul {
    flex: 1 0 120px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0 8px;

    @media (width < 768px) {
      flex: 1;
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }
  }
}

.l-nabe-card-flow {
  --_font-size-num: 1.25em;
  --_size-num: calc(var(--_font-size-num) * 1.4);
  counter-reset: mycounter;

  @media (width < 768px) {
    --_font-size-num: 1.08em;
  }

  > li {
    position: relative;
    display: flex;
    align-items: first baseline;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    @media (width < 768px) {
      font-size: max(12px, calc(12 / var(--w-max) * 100vw));
      line-height: 1.2;
    }

    &::before {
      counter-increment: mycounter;
      content: counter(mycounter);
      display: grid;
      place-items: center;
      width: var(--_size-num);
      height: var(--_size-num);
      font-size: var(--_font-size-num);
      text-align: center;
      background-color: var(--c-nabe-beige);
      border-radius: 50%;
    }

    > span {
      flex: 1 0 160px;
    }

    &:not(:last-child) {
      padding-bottom: 1.5em;

      @media (width < 768px) {
        padding-bottom: 1.25em;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0 auto auto calc(var(--_size-num) / 1.75);
        display: block;
        width: 4px;
        height: 100%;
        background-color: color-mix(in srgb, var(--c-nabe-beige) 40%, transparent);

        @media (width < 768px) {
          width: 2px;
          inset-inline-start: calc(9 / var(--w-max) * 100vw);
        }
      }
    }
  }
}

/* カート関連 */
.l-nabe-cart {
  --_mx: 10px;
  position: relative;
  container-type: inline-size;
  margin-top: clamp(40px, calc(43 / 1080 * 100%),43px);
  padding-inline: var(--_mx);

  @media (width < 768px) {
    --_mx: calc(8 / var(--w-max) * 100vw);
    margin-top: calc(24 / var(--w-max) * 100vw);
  }
}

.l-nabe-cart__title {
  --_px-title: 24px;
  z-index: 1;
  position: relative;
  width: fit-content;
  margin-left: -10px;
  margin-bottom: -1.336lh;

  @media (width < 768px) {
    --_px-title: calc(16 / var(--w-max) * 100vw);
    margin-left: calc(-1 * (18 / var(--w-max) * 100vw));
  }

  &::after {
    content: "";
    position: absolute;
    inset: -2px calc(-85px - 4px) auto auto;
    width: 85px;
    height: auto;
    aspect-ratio: 85 / 61;
    background: url(../img/icon_nabe@2x.png) no-repeat left top / contain;

    @media (width < 768px) {
      inset: calc(6 / var(--w-max) * 100vw) calc(70 / var(--w-max) * 100vw * -1 + (-4 / var(--w-max) * 100vw)) auto auto;
      width: calc(70 / var(--w-max) * 100vw);
    }
  }

  > span {
    position: relative;
    display: block;
    font-size: 28px;
    line-height: calc(36 / 28);
    color: white;
    background-color: #ce3332;
    padding: 14px calc(var(--_px-title) + 13px) 14px var(--_px-title);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--_px-title)) 100%, 0 100%);

    @media (width < 768px) {
      font-size: calc(26 / var(--w-max) * 100vw);
      padding: .55em 1.15em .45em var(--_px-title);
    }

    &::before {
      content: "";
      position: absolute;
      inset: 5px auto auto -27px;
      display: block;
      width: 94px;
      height: auto;
      aspect-ratio:  94 / 105;
      background: url(../img/icon_wave02@2x.png) no-repeat center / contain;
      opacity: .2;

      @media (width < 768px) {
        inset: 0 auto auto calc(-52 / var(--w-max) * 100vw);
        width: calc(109 / var(--w-max) * 100vw);
        aspect-ratio: 109 / 86;
        background: url(../img/icon_wave01@2x.png) no-repeat center / contain;
      }
    }
  }

  &.--fukuoka > span {
    background-color: var(--c-nabe-fukuoka);
  }

  &.--aichi > span {
    background-color: var(--c-nabe-aichi);
  }

  &.--akita > span {
    background-color: var(--c-nabe-akita);
  }

  &.--tokyo > span {
    background-color: var(--c-nabe-tokyo);
  }

  &.--kyoto > span {
    background-color: var(--c-nabe-kyoto);
  }

  &.--kagawa > span {
    background-color: var(--c-nabe-kagawa);
  }

  &.--hiroshima > span {
    background-color: var(--c-nabe-hiroshima);
  }
}

.l-nabe-cart__container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  background-color: var(--c-nabe-black);
  padding: 72px 32px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 49px), calc(100% - 49px) 100%, 0 100%);

  @media (width < 768px) {
    flex-direction: column;
    padding: calc(60 / var(--w-max) * 100vw) calc(16 / var(--w-max) * 100vw) calc(35 / var(--w-max) * 100vw);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6.3cqw), calc(100% - 6.3cqw) 100%, 0 100%);
  }

  &.--gutter-sm {
    column-gap: 0px;
  }

  &, &.--gutter-sm {
    @media (width < 768px) {
      gap: calc(15 / var(--w-max) * 100vw);
    }
  }
}

.l-nabe-cart__left {
  flex: 1 0 280px;

  @media (width < 768px) {
    flex: 1;
  }

  dt, dd {
    font-weight: 600;
    color: var(--c-nabe-beige);
  }

  dt {
    font-size: 36px;
    line-height: 1.3;

    @media (width < 768px) {
      font-size: max(24px, calc(26 / var(--w-max) * 100vw));
      line-height: 1.29;
    }
  }

  dd {
    font-size: 18px;
    line-height: 2;
    margin-top: .72em;

    @media (width < 768px) {
      font-size: max(12px, calc(14 / var(--w-max) * 100vw));
      line-height: calc(21 / 14);
      margin-top: .5em;
    }
  }
}

.l-nabe-cart__right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 24px clamp(20px, calc(24 / 1060 * 100cqw), 24px);

  @media (width < 768px) {
    flex-direction: column-reverse;
    gap: calc(22 / var(--w-max) * 100vw);
  }

  .c-nabe-button {
    margin-top: 12px;

    @media (width < 768px) {
      margin-top: calc(12 / var(--w-max) * 100vw);
    }
  }
}

.l-nabe-cart__price img {
  @media (width < 768px) {
    width: 100%;
    height: auto;
  }
}

.l-nabe-cart__package {
  &.--hotate, &.--gomen {
    position: relative;

    &::before {
      display: none;
      position: absolute;
      inset: auto auto 0 -71px;
      width: 70px;
      height: auto;
      aspect-ratio: 1 / 1;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

      @media (width < 768px) {
        display: block;
      }
    }
  }

  &.--hotate::before {
    content: "" / "濃縮10倍";
    background-image: url(../img/icon_hotate@2x.png);
  }

  &.--gomen::before {
    content: "" / "濃縮6倍";
    background-image: url(../img/icon_gomen@2x.png);
  }
}

/* ---------------------------------
        ユーティリティ
--------------------------------- */
.u-sp-only {
  display: none;

  @media (width < 768px) {
    display: block;
  }
}

.u-pc-only {
  @media (width < 768px) {
    display: none;
  }
}