@scope(#summer_gift2026) {
  :scope {
    --c-primary: #c1465f;
    --c-primary-light: #d6657b;
    --c-primary-dark: #c0455e;
    --c-primary-lightest: #f2dbe1;
    --c-beige: #f0ece0;
    --c-beige-light: #fcfaf3;
    --c-brown: #7c6940;
    --c-red: #d50000;
    --c-red-dark: #a40000;
    --c-blue-dark: #093457;
    --c-brand: #9e352f;
    --c-gray: #999999;
    --c-green: #5b6f33;
    --f-base:
      "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
      "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック",
      "MS PGothic", sans-serif;
    --f-mincho:
      "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
      "Hiragino Mincho Pro", "Noto Serif JP", "MS P明朝", "MS PMincho", serif;
    margin: -40px auto 40px;
  }

  .mv {
    margin-block: 0 7px;
  }

  .section {
    margin-block-start: 125px;
  }
}

@scope(.information-box) {
  :scope {
    --gap: 14px;
    --bg-color: transparent;
    --label-color: var(--c-brand);
    --border-color: #ccc;

    padding: 26px 70px;
    border: 2px solid var(--label-color);
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    row-gap: var(--gap);
    background-color: var(--bg-color);
  }

  &[data-type="beige"] {
    --bg-color: #faf9f3;
    --label-color: #644a24;
    --border-color: var(--label-color);
  }

  .item {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    grid-column: span 2;
    justify-content: center;
    margin-block: 0;
    column-gap: 70px;
    
    &:not(:last-child) {
      padding-block-end: var(--gap);
      border-block-end: 1px solid var(--border-color);
    }
  }

  .label {
    font-family: var(--f-mincho);
    color: var(--label-color);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.3;
  }

  .about {
    margin-inline-start: 0;
  }
}

@scope(.gift-page-links) {
  :scope {
    --gap: 7px;

    list-style: "";
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-inline: 1px solid;
    padding-inline: var(--gap);
    column-gap: var(--gap);
    margin-block-end: 130px;
  }

  .item {
    &:not(:last-child) {
      padding-inline-end: var(--gap);
      border-inline-end: 1px solid;
    }
  }

  .card {
    inline-size: min(100%, 280px);
    margin-inline: auto;
    display: grid;
    justify-content: center;
    text-decoration: none;
    transition: opacity .2s;
    color: inherit;

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }

    &::after {
      content: "";
      inline-size: 10px;
      aspect-ratio: 1;
      border-block-end: 2px solid;
      border-inline-start: 2px solid;
      rotate: -45deg;
      justify-self: center;
      margin-block-start: 20px;
    }
  }

  .text {
    font-family: var(--f-mincho);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
    justify-self: center;
    margin-block-start: 20px;
    border-block-end: 1px solid;
  }
}

@scope(.season-headline) {
  :scope {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    font-family: var(--f-mincho);
    font-weight: 700;
    line-height: 1.3;
    font-size: 44px;
    column-gap: 30px;
  }

  > img {
    &:first-child {
      align-items: start;
    }

    &:last-child {
      align-self: end;
    }
  }

  > span {
    padding-block: 1em;
  }
}

@scope(.product-list) {
  :scope {
    --max-size: 300px;
    --column-gap: 80px;
    --row-gap: 90px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--max-size)), 1fr));
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
    align-items: start;
  }

  &[data-type="small"] {
    --max-size: 230px;
    --column-gap: 25px;
    --row-gap: 40px;
  }

  &[data-type="bag"] {
    --max-size: 230px;
    --column-gap: 150px;
    --row-gap: 40px;
    inline-size: fit-content;
    margin-inline: auto;
    grid-template-columns: repeat(2, 265px);
  }

  .item {
    container-type: inline-size;
    container-name: --item;

    &[data-image] {
      grid-column: span 2;
    }
  }

  .thumbnail {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 260px;
    border: 1px solid #9c9c9c;
    aspect-ratio: 1;
    margin: 0;
  }

  .details {
    grid-area: 1 / 1 / 2 / 2;
    place-self: end;
    background-color: white;
    border: 1px solid;
    display: grid;
    grid-auto-flow: column;
    align-items: baseline;
    padding: 5px 8px;
    font-size: 13px;
    line-height: 1.2;
    transition: opacity 0.3s;
    overflow: clip;
    translate: 1px 1px;
    column-gap: 7px;
    position: relative;

    &[aria-expanded="false"] {
      &::after {
        content: "＋";
      }
    }

    &[aria-expanded="true"] {
      &::after {
        content: "－";
      }
    }
  }

  .img {
    grid-area: 1 / 1 / -1 / -1;
    max-inline-size: calc(100% - 10px);
  }

  .icon {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
  }

  .balloon {
    --triangle-height: 18;

    position: absolute;
    inset-block-start: calc(100% + 28px);
    inset-inline-end: 10px;
    inline-size: min(100%, 245px);
    border: 1px solid #878787;
    padding: 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
    line-height: 1.6;
    font-size: 12px;
    box-shadow: 2px 2px 4px rgba(0,0,0,.25);
    transition: opacity 0.3s, translate 0.3s;
    translate: 0 0;
    z-index: 1;

    &[aria-hidden="true"] {
      display: none;
    }

    @starting-style {
      &[aria-hidden="false"] {
        opacity: 0;
        translate: 0 3px;
      }
    }

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: calc(-1px * var(--triangle-height));
      inset-inline-end: 30px;
      block-size: calc(1px * var(--triangle-height));
      aspect-ratio: 21/var(--triangle-height);
      clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

    &::before {
      background-color: #878787;
    }

    &::after {
      background: #f5f5f5;
      block-size: calc((1px * var(--triangle-height)) - 2px);
      translate: -1px 2px;
    }

    > ul {
      margin: 0;
      padding-inline-start: 1.5em;
    }
  }

  .info {
    display: grid;
    align-items: start;
    margin-block-start: 10px;
    position: relative;
  }

  .number {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    margin-block: 0;
    border: 1px solid;
    inline-size: fit-content;
    line-height: 1.2;

    > dt {
      background-color: black;
      color: white;
      display: grid;
      align-items: center;
      padding: 0.2em 0.5em;
    }

    > dd {
      font-weight: 700;
      font-family: var(--f-mincho);
      font-size: 20px;
      margin: 0;
      display: grid;
      align-items: center;
      padding: 0.2em 0.5em 0.1em;
    }
  }

  .name {
    margin-block: 10px 0;
    font-size: min(8cqi, 24px);
    font-family: var(--f-mincho);
    line-height: 1.3;
    font-weight: 700;
  }

  .prices {
    display: grid;
    align-items: baseline;
    grid-auto-flow: column;
    justify-content: start;
    font-size: 32px;
    font-family: var(--f-mincho);
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;

    .unit {
      font-size: 0.75em;
    }

    .tax {
      font-size: 0.5em;
      font-family: var(--f-base);
    }
  }

  .postage {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: min(18%, 60px);
  }

  .cart {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    justify-content: start;
    margin-block-start: 10px;
    column-gap: 18px;
  }

  .select-num {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto;

    > label {
      cursor: pointer;

      &::after {
        content: "：";
      }
    }

    > select {
      padding: 6px 3px;
      border: 1px solid #878787;
      border-radius: 5px;
    }
  }

  .c-button-cart {
    background-color: #a03427;
    padding: 5px 8px;
    line-height: 1.75;
    inline-size: 100%;
  }

  .soldout {
    font-weight: 700;
    color: var(--c-brand);
    margin-block-start: 10px;
  }

  .notes {
    margin-block: 20px 0;
    padding: 15px;
    background-color: #f5f5f5;
    font-size: 14px;
    line-height: 1.57;
  }
}

@scope(.category-list) {
  :scope {
    list-style: "";
    display: grid;
    gap: 10px;
    padding-inline-start: 0;
    grid-template-columns: repeat(6, 1fr);
  }

  > li {
    &:nth-child(1) {
      grid-column: 1 / 3;
    }

    &:nth-child(2) {
      grid-column: 3 / 5;
    }

    &:nth-child(3) {
      grid-column: 5 / 7;
    }

    &:nth-child(4) {
      grid-column: 1 / 4;
    }

    &:nth-child(5) {
      grid-column: 4 / 7;
    }
  }

  a {
    display: grid;
    text-decoration: none;
    background: url(../img/bg_pattern.jpg);
    color: white;
    font-family: var(--f-mincho);
    font-weight: 700;
    justify-content: center;
    align-items: center;
    font-size: 27px;
    line-height: 1.3;
    padding: 27px 20px;
    position: relative;
    transition: opacity 0.3s;

    &::before {
      content: "";
      background-color: currentColor;
      inline-size: 5px;
      block-size: calc(100% - 10px);
      position: absolute;
      inset-inline-start: 6px;
      inset-block-start: 50%;
      translate: 0 -50%;
    }

    &::after {
      content: "";
      position: absolute;
      inset-inline-end: 1em;
      inset-block-start: 50%;
      inline-size: 0.4em;
      aspect-ratio: 1;
      border-inline-end: 3px solid;
      border-block-start: 3px solid;
      rotate: 135deg;
      translate: 0 -50%;
    }

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }
}

@scope(.section-headline) {
  :scope {
    text-align: center;
    inline-size: fit-content;
    margin-inline: auto;
    border-block-end: 1px solid #999999;
    font-family: var(--f-mincho);
    font-size: 44px;
  }

  &:has(+ [data-type="small"], + [data-type="bag"]) {
    font-size: 40px;
  }
}

@scope(.tsumeawase-lead) {
  :scope {
    background-color: #faf9f3;
    padding: 50px 90px;
    text-align: center;
  }

  .headline {
    margin-block: 0;
  }

  .txt {
    font-weight: 600;
    font-size: 18px;
  }

  .banner {
    margin-block: 30px 0;

    a {
      transition: opacity 0.3s;

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}

@scope(.price-list) {
  :scope {
    display: grid;
    list-style: "";
    inline-size: min(100%, 1010px);
    margin-inline: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
  }

  > li {
    grid-column: span 2;
    
    &:nth-child(-n + 2) {
      grid-column: span 3;
    }

    > a {
      background-color: var(--c-brand);
      color: white;
      text-decoration: none;
      position: relative;
      display: block;
      font-size: 30px;
      font-family: var(--f-mincho);
      font-weight: 700;
      text-align: center;
      padding: 15px;
      border-radius: 5px;
      line-height: 1.3;
      transition: opacity 0.3s;

      &::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 15px;
        translate: 0 -8px;
        inline-size: 10px;
        aspect-ratio: 1;
        border-block-end: 3px solid;
        border-inline-end: 3px solid;
        rotate: 45deg;
      }

      &:hover {
        opacity: 0.7;
      }
    }
  }
}

@scope(.gift-section-buttons) {
  :scope {
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
  }
}

@scope(.btn-information) {
  :scope {
    --bg-color: white;

    position: relative;
    width: 320px;
    display: inline-block;
    background-color: var(--bg-color);
    color: black;
    border: 1px solid;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    font-family: var(--f-mincho);
    font-weight: bold;
    line-height: 1.3;
    opacity: 1;
    transition: opacity .2s;
  }

  @media(any-hover: hover) {
    &:hover {
      opacity: 0.6;
    }
  }

  &::after {
    content: "";
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: currentColor;
    width: 10px;
    aspect-ratio: 10/12;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;
    translate: 0 -50%
  }
}

@scope(.caution-box) {
  :scope {
    max-width: 880px;
    margin-inline:auto;
    background-color: #fff;
    border: 4px double #962222;
    padding: 24px 40px;
  }

  .ttl {
    font-weight: bold;
    font-size: 18px;
    margin: 0 auto 8px;
    text-align: center;
    color: #962222;

    span {
      display: inline-block
    }
  }

  .body {
    ul {
      list-style-type: "※";
      padding-inline: 1em;
    }
  }
}

@scope(.guide) {
  :scope {
    margin-block-start:40px;
    display: grid;
    grid-template-columns: 57.63% 1fr;
    grid-template-areas: "title title" "kakegami kakegami" "noshi message" "noshi tesage" "noshi recipe";
  }

  .title {
    grid-area: title;
    background-color: #8b7235;
    color: #fff;
    font-family: var(--f-mincho);
    text-align: center;
    font-size: min(5.866vw,32px);
    line-height: 1.4;
    padding: .55em 1em;
    margin: 0 0 min(5.333vw,40px) 0;
  }

  .kakegami {
    grid-area: kakegami;
    display: grid;
    align-items: flex-start;
    grid-template-columns: minmax(0, 605px) minmax(0, 1fr);
    padding-block-end:min(5.333vw,30px);margin-block-end:min(5.333vw,30px);border-block-end:1px solid var(--c-gray);gap: 0 40px;

    .images {
      display: flex;
      justify-content: center;
      gap: 0 40px;

      figure {
        margin: 0;
      }

      figcaption {
        font-family: var(--f-mincho);
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.4;
        margin-block-end:.5em;
      }
    }

    .profile {
      background-color: #e7e8e8;
      padding: 15px;
      display: grid;
      gap: 0 15px;
      grid-template-rows: auto 1fr;
      grid-template-areas: "photo hgroup" "photo desc";
      margin-inline-start:35px;

      > figure {
        margin: 0;
        grid-area: photo;
      }

      > hgroup {
        grid-area: hgroup;
        line-height: 1.3;

        :is(> p, > h4) {
          margin: 0;
        }

        > p {
          letter-spacing: -0.08em;
        }

        > h4 {
          font-size: 19px;
        }
      }

      > p {
        grid-area: desc;
        margin: 10px 0 0 0;
        font-size: 13px;
        line-height: 1.5;
      }
    }
  }

  .intro {
    .headline {
      font-family: var(--f-mincho);
      font-size: min(6.9333vw,26px);
      line-height: 1.4;
      font-weight: 700;
      margin: 0 0 7px 0
    }

    .desc {
      margin: 0;
      margin-block-end:25px;line-height: 1.5
    }

    .note {
      margin: 0;
      margin-block-end:25px;margin-block-start:-1em;font-size: 13px;
      line-height: 1.5;
    }
  }

  .cautions {
    font-size: 13px;
    display: grid;
    gap: 5px 0;
    line-height: 1.5;

    > p {
      margin: 0 0 0 1em;
      text-indent: -1em;

      em {
        font-style: normal;
        font-weight: 700;
        color: var(--c-brand);
      }
    }
  }

  .noshi {
    grid-area: noshi;
    border-inline-end:1px solid var(--c-gray);padding-inline-end: 24px;
    margin-inline-end:40px;

    .pattern {
      list-style: none;
      display: grid;
      gap: 30px 25px;
      padding: 0;
      margin: 0;
      grid-template-columns: repeat(3, auto);

      > li {
        display: grid;
        gap: 0;
        grid-template-rows: subgrid;
        grid-row: span 3
      }

      dl {
        margin: 0
      }

      dt {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 0 8px;
        font-family: var(--f-mincho);
        font-weight: 700;
        font-size: min(4vw,18px);

        > span {
          &:nth-child(1) {
            color: #fff;
            background-color: #414041;
            aspect-ratio: 1;
            font-size: 1.222em;
            line-height: 1;
            width: 1.2727em;
            display: grid;
            place-items: center;
            font-family: var(--f-base);
          }
        }
      }

      dd {
        margin: 0;
        font-size: min(3.2vw,14px);
        line-height: 1.57;
        margin-block-start:10px;letter-spacing: -0.05em;
      }

      figure {
        margin: 0;
        display: grid;
        place-items: center;
        margin-block-start:14px
      }

      ul {
        list-style: "";
        padding: 0;
        line-height: 1.42;
        margin-inline-start:14%;font-size: 14px;
        align-self: flex-start;
        width: var(--w, 90%);
        margin-block-start:12px;display: grid;
        grid-template-columns: repeat(2, auto);

        &[data-display=flex] {
          display: flex;
          flex-wrap: wrap;
          gap: 0 1em;
        }

        > li {
          display: grid;
          gap: 0 3px;
          grid-template-columns: auto 1fr;
          align-items: baseline;

          &::before {
            content: "";
            width: .4em;
            aspect-ratio: 1;
            border-radius: 100%;
            background-color: currentColor;
            translate: 0 -0.1em;
          }
        }
      }
    }
  }

  .message {
    grid-area: message;

    > ul {
      list-style: "";
      padding: 0;
      display: grid;
      gap: 0 15px;
      grid-template-columns: repeat(3, auto);
      margin-block:0 18px;
    }
  }

  .tesage {
    grid-area: tesage;
    border-block-start:1px solid var(--c-gray);margin-block-start: 15px;
    padding-block-start:25px;display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 20px;

    > figure {
      margin: 0
    }
  }

  .recipe {
    grid-area: recipe;
    display: grid;
    border-block-start:1px solid var(--c-gray);margin-block-start: 15px;
    padding-block-start:25px;grid-template-columns: 1fr auto;
    gap: 0 20px;

    > figure {
      margin: 0
    }
  }
}