@layer page {
  @media screen and (max-width: 767px) {
    .p-hdr-page {
      padding-bottom: 6.6666666667vw;
    }
  }
  @media screen and (min-width: 768px) {
    .p-hdr-page::after {
      top: -7.5rem;
    }
  }
  .about-img {
    border-radius: 0 1.25rem 1.25rem 0;
    margin-right: 12.5rem;
    overflow: hidden;
  }
  @media screen and (max-width: 767px) {
    .about-img {
      margin-right: 16vw;
    }
  }
  .about-img img {
    width: 100%;
  }
  .about-img-1 {
    border-radius: 1.25rem 0 0 1.25rem;
    margin-left: 11.875rem;
    overflow: hidden;
  }
  @media screen and (max-width: 767px) {
    .about-img-1 {
      margin-left: var(--sp-pad);
    }
  }
  .about-img-1 img {
    width: 100%;
  }
  .about-sec {
    margin-top: 3.125rem;
    margin-bottom: 3.75rem;
    position: relative;
  }
  @media screen and (max-width: 767px) {
    .about-sec {
      margin-top: 2.6666666667vw;
      margin-bottom: 6.6666666667vw;
    }
  }
  .about-sec__inner {
    position: relative;
  }
  @media screen and (min-width: 768px) {
    .about-sec__inner::after {
      content: "";
      display: block;
      z-index: 1;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: -10.625rem;
      aspect-ratio: 487/155;
      width: 30.4375rem;
      background: url("../../../img/page/about/cloud_0.svg") 50% 0/contain no-repeat;
    }
  }
  .about-sec__ttl {
    font-weight: 600;
    font-family: var(--serif);
    font-size: 2.5rem;
  }
  @media screen and (max-width: 767px) {
    .about-sec__ttl {
      font-size: 6.2666666667vw;
    }
  }
  .about-sec__wtext {
    position: relative;
    z-index: 2;
    padding-top: 1.25rem;
  }
  .about-sec__text {
    margin-top: 3.125rem;
    line-height: 1.8;
  }
  @media screen and (min-width: 768px) {
    .about-sec__text {
      font-size: 1.25rem;
    }
  }
  @media screen and (max-width: 767px) {
    .about-sec__text {
      margin-top: 4vw;
    }
  }
  .about-sec__text-mt {
    margin-top: 2em;
  }
  .about-sec__illust {
    position: absolute;
    right: 2.5rem;
    top: 0rem;
    width: 20.5625rem;
  }
  @media screen and (max-width: 767px) {
    .about-sec__illust {
      right: 0;
      top: -22.1333333333vw;
      width: 33.6vw;
      overflow: hidden;
    }
    .about-sec__illust img {
      transform: translateX(5.3333333333vw);
    }
  }
  .about-list {
    margin-top: 6.25rem;
  }
  @media screen and (max-width: 767px) {
    .about-list {
      margin-top: 12vw;
    }
  }
  .about-item {
    background: url("../../../img/page/about/tonkotsu.webp") 50% 50%/cover;
    padding-top: 5.625rem;
    padding-bottom: 5rem;
  }
  @media screen and (max-width: 767px) {
    .about-item {
      padding: 10.6666666667vw var(--sp-pad);
      background-image: url("../../../img/page/about/tonkotsu_sp.webp");
    }
  }
  .about-item.is-men {
    background-image: url("../../../img/page/about/men.webp");
  }
  @media screen and (max-width: 767px) {
    .about-item.is-men {
      background-image: url("../../../img/page/about/men_sp.webp");
    }
  }
  .about-item.is-chashu {
    background-image: url("../../../img/page/about/chashu.webp");
  }
  @media screen and (max-width: 767px) {
    .about-item.is-chashu {
      background-image: url("../../../img/page/about/chashu_sp.webp");
    }
  }
  .about-item.is-ninniku {
    background-image: url("../../../img/page/about/ninniku.webp");
  }
  @media screen and (max-width: 767px) {
    .about-item.is-ninniku {
      background-image: url("../../../img/page/about/ninniku_sp.webp");
    }
  }
  .about-item.is-kaesi {
    background-image: url("../../../img/page/about/kaesi.webp");
  }
  @media screen and (max-width: 767px) {
    .about-item.is-kaesi {
      background-image: url("../../../img/page/about/kaesi_sp.webp");
    }
  }
  .about-item__hdr {
    text-align: center;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 5rem;
    margin-bottom: -2.5rem;
  }
  @media screen and (max-width: 767px) {
    .about-item__hdr {
      font-size: 10.6666666667vw;
      margin-bottom: -5.3333333333vw;
    }
  }
  .about-item__hdr.is-white {
    color: #fff;
  }
  .about-item__ttl {
    line-height: 1;
  }
  .about-item__heno {
    display: inline-block;
    font-size: 1.625rem;
    font-weight: normal;
    width: 1em;
    line-height: 1.1;
  }
  @media screen and (max-width: 767px) {
    .about-item__heno {
      font-size: 3.4666666667vw;
    }
  }
  .about-item__text {
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.6);
    padding: 10.6666666667vw 5.3333333333vw 5.3333333333vw 5.3333333333vw;
    line-height: 2;
    letter-spacing: 0.1em;
  }
  @media screen and (min-width: 768px) {
    .about-item__text {
      padding: 3.125rem 2.5rem 2.5rem 2.5rem;
      background: rgba(255, 255, 255, 0.7);
      font-size: 1.25rem;
      width: 50rem;
    }
  }
  .about-item__note {
    font-size: 1rem;
    margin-top: 1.25rem;
    line-height: 1.8;
  }
  .about-item__note p {
    text-indent: -1em;
    margin-left: 1em;
  }
  .about-kodawari {
    margin-top: 3.75rem;
    padding-bottom: 9.375rem;
    position: relative;
    overflow: hidden;
  }
  @media screen and (max-width: 767px) {
    .about-kodawari {
      padding-bottom: 26.6666666667vw;
      margin-top: 13.3333333333vw;
    }
  }
  .about-kodawari::after {
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none;
    position: absolute;
    aspect-ratio: 528/128;
    width: 33rem;
    background: url("../../../img/page/about/cloud_1.svg") 50% 0/contain no-repeat;
  }
  @media screen and (min-width: 768px) {
    .about-kodawari::after {
      top: 41.25rem;
      right: calc(-11.25rem);
    }
  }
  @media screen and (max-width: 767px) {
    .about-kodawari::after {
      width: 70.5333333333vw;
      right: calc(-30vw);
      bottom: 17.8666666667vw;
    }
  }
  .about-kodawari__hdr {
    position: relative;
    text-align: center;
    padding-top: 4.75rem;
    margin-bottom: 2.5rem;
  }
  @media screen and (max-width: 767px) {
    .about-kodawari__hdr {
      padding-top: 9.3333333333vw;
      margin-bottom: 4vw;
    }
  }
  .about-kodawari__hdr::after {
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: calc(50% - 29rem);
    aspect-ratio: 487/155;
    width: 30.4375rem;
    background: url("../../../img/page/about/cloud_0.svg") 50% 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .about-kodawari__hdr::after {
      left: -4vw;
      width: 64.9333333333vw;
    }
  }
  .about-kodawari__ttl {
    position: relative;
    z-index: 2;
    font-weight: 600;
    font-family: var(--serif);
    font-size: 3rem;
  }
  @media screen and (max-width: 767px) {
    .about-kodawari__ttl {
      font-size: 6.2666666667vw;
    }
  }
  .about-kodawari__img {
    position: relative;
    z-index: 2;
    padding-top: 1.25rem;
  }
  .about-kodawari__text {
    position: relative;
    z-index: 2;
    margin-top: 3.125rem;
    line-height: 2;
  }
  @media screen and (min-width: 768px) {
    .about-kodawari__text {
      font-size: 1.25rem;
    }
  }
  @media screen and (max-width: 767px) {
    .about-kodawari__text {
      margin-top: 6.6666666667vw;
      padding: 0 var(--sp-pad);
    }
  }
  .about-bnr {
    display: flex;
    flex-direction: column;
    gap: 3.125rem;
  }
  @media screen and (max-width: 767px) {
    .about-bnr {
      gap: 5.3333333333vw;
    }
  }
  @media (hover: hover) {
    .about-bnr a {
      transition: 0.25s filter;
    }
    .about-bnr a:hover {
      filter: brightness(120%);
    }
  }
  .about-img-foot {
    margin-top: 9.375rem;
  }
  @media screen and (max-width: 767px) {
    .about-img-foot {
      margin-top: 12vw;
    }
  }
}