@keyframes zoomBounce {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes loadingDots {
  0%,
  20% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0.2;
  }
}

@keyframes loadingDotSecond {
  0%,
  33.33% {
    opacity: 0;
  }
  33.34%,
  100% {
    opacity: 1;
  }
}

@keyframes loadingDotThird {
  0%,
  66.66% {
    opacity: 0;
  }
  66.67%,
  100% {
    opacity: 1;
  }
}

.mochimochi-set {
  overflow: hidden;
  .kv {
    width: 100vw;
    height: 855px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    background-image: url('/synced-assets/mochimochiset/assets/image/kv-background.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
  }

  .kv__inner {
    width: 670px;
    max-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .kv__title-wrap {
    position: relative;
    width: min(670px, 100%);
  }

  .kv__title {
    width: min(670px, 100%);
    height: auto;
  }

  .kv__logo {
    position: absolute;
    top: 16px;
    right: 34px;
    width: 155px;
    height: 119px;
  }

  .kv__udon {
    width: 640px;
    max-width: 100%;
    height: auto;
    max-height: 450px;
    margin-top: 12px;
  }

  .kv__menu-price {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    margin-top: -140px;
  }

  .kv__menu {
    width: 302px;
    height: auto;
    max-height: 112px;
  }

  .kv__price {
    width: 240px;
    height: auto;
  }

  .video {
    position: relative;
    width: 100vw;
    height: calc(100vh - 80px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #000;
    overflow: hidden;
  }

  .video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }

  .video__logo {
    position: absolute;
    top: 42px;
    left: 45px;
    width: 232px;
    max-width: none;
    height: auto;
    pointer-events: none;
  }

  .video__cta {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    color: #fff;
    font-size: 18px;
    font-family: 'Shuei ShogoMincho', 'Yu Mincho Pr6N M', serif;
    font-weight: 500;
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s ease;
    font-weight: bold;
  }

  .video__cta:hover {
    opacity: 0.7;
  }

  .video__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 50%;
    position: relative;
  }

  .video__cta-icon::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    margin-left: -2px;
    display: block;
  }

  /* ========== Scroll animation ========== */
  .fade-init {
    opacity: 0;
    transform: translateY(var(--a-distance, 24px));
    transition:
      opacity var(--a-duration, 0.8s) var(--a-easing, cubic-bezier(0.25, 0.1, 0.25, 1)) var(--a-delay, 0s),
      transform var(--a-duration, 0.8s) var(--a-easing, cubic-bezier(0.25, 0.1, 0.25, 1)) var(--a-delay, 0s);
    will-change: opacity, transform;
  }

  .fade-show {
    opacity: 1;
    transform: none;
  }

  .fade-init[data-animate='fade'] {
    transform: none;
  }

  .fade-init[data-animate='fade-up'] {
    transform: translateY(var(--a-distance, 24px));
  }

  .fade-init[data-animate='fade-left'] {
    transform: translateX(calc(var(--a-distance, 24px) * -1));
  }

  .fade-init[data-animate='fade-right'] {
    transform: translateX(var(--a-distance, 24px));
  }

  .fade-group .fade-child[data-animate='fade-left'] {
    transform: translateX(calc(var(--a-distance, 24px) * -1));
  }

  .fade-group .fade-child[data-animate='fade-right'] {
    transform: translateX(var(--a-distance, 24px));
  }

  .fade-init[data-animate='fade-zoom'] {
    transform: var(--anim-base, translateY(0)) translateY(var(--a-distance, 16px)) scale(var(--a-scale, 0.9));
    transform-origin: center center;
  }

  .fade-init[data-animate='fade-zoom-bounce'] {
    transform: var(--anim-base, translateY(0)) translateY(var(--a-distance, 16px)) scale(var(--a-scale, 0.9));
    transform-origin: center center;
  }

  .fade-group .fade-child {
    opacity: 0;
    transform: translateY(var(--a-distance, 24px));
    transition:
      opacity var(--a-duration, 1s) var(--a-easing, cubic-bezier(0.25, 0.1, 0.25, 1)) var(--a-delay, 0s),
      transform var(--a-duration, 1s) var(--a-easing, cubic-bezier(0.25, 0.1, 0.25, 1)) var(--a-delay, 0s),
      filter 0.2s ease;
    will-change: opacity, transform, filter;
  }

  .fade-group .fade-child[data-animate='wipe-left'] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--a-duration, 1s) var(--a-easing, cubic-bezier(0.25, 0.1, 0.25, 1)) var(--a-delay, 0s);
    will-change: clip-path;
  }

  .fade-group .fade-child[data-animate='fade'] {
    transform: none;
  }

  .fade-group .fade-child[data-animate='fade-left'] {
    transform: translateX(calc(var(--a-distance, 24px) * -1));
  }

  .fade-group .fade-child[data-animate='fade-right'] {
    transform: translateX(var(--a-distance, 24px));
  }

  .fade-child.fade-show {
    opacity: 1;
    transform: none;
  }

  .fade-child.fade-show[data-animate='fade-left'],
  .fade-child.fade-show[data-animate='fade-right'] {
    transform: none;
  }

  .fade-group .fade-child[data-animate='fade-zoom'] {
    transform: var(--anim-base, translateY(0)) translateY(var(--a-distance, 12px)) scale(var(--a-scale, 0.8));
    transform-origin: center center;
  }

  .fade-group .fade-child[data-animate='fade-zoom-bounce'] {
    transform: var(--anim-base, translateY(0)) translateY(var(--a-distance, 12px)) scale(var(--a-scale, 0.8));
    transform-origin: center center;
    transition:
      opacity var(--a-duration, 1s) var(--a-easing, cubic-bezier(0.25, 0.1, 0.25, 1)) var(--a-delay, 0s);
  }

  .fade-child.fade-show[data-animate='fade-zoom'] {
    transform: var(--anim-base, none) translateY(0) scale(1);
  }

  .fade-child.fade-show[data-animate='fade-zoom-bounce'] {
    opacity: 1;
    transform: var(--anim-base, none) translateY(0) scale(1);
    animation: zoomBounce var(--a-duration, 0.5s) ease-out var(--a-delay, 0s) both;
  }

  .fade-child.fade-show[data-animate='wipe-left'] {
    clip-path: inset(0 0 0 0);
  }


  /* ========== Loading overlay ========== */
  .loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    background-color: #fff;
    background-image: url('/synced-assets/mochimochiset/assets/image/bg-orange.webp');
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
    transition: none;
  }

  .loading-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  .loading-overlay__text-line {
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }

  .loading-overlay__text {
    display: block;
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .loading-overlay__dots {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .loading-overlay__dot {
    display: block;
    width: 8px !important;
    height: 8px !important;
    max-width: none !important;
    object-fit: contain;
    opacity: 1;
  }

  .loading-overlay__dot:nth-child(2) {
    opacity: 0;
    animation: loadingDotSecond 1.2s steps(1, end) infinite;
  }

  .loading-overlay__dot:nth-child(3) {
    opacity: 0;
    animation: loadingDotThird 1.2s steps(1, end) infinite;
  }

  .loading-overlay__udon {
    display: block;
    width: 293px !important;
    height: 207px !important;
    max-width: none !important;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .loading-overlay.is-hidden {
    display: none;
    visibility: hidden;
  }

  .loading-overlay.is-fadeout {
    pointer-events: none;
  }

  @media (max-width: 767px) {
    .loading-overlay__dot {
      width: 8px !important;
      height: 8px !important;
    }

    .loading-overlay__udon {
      width: 240px !important;
      height: auto !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fade-init {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .fade-group .fade-child {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .video-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .video-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
  }

  .video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .video-modal__content {
    position: relative;
    width: 80vw;
    max-width: 960px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  .video-modal__video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
    border-radius: 8px;
  }

  .video-modal__close {
    display: none;
  }

  .video-modal__close-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 12px 0 0;
    padding: 6px 0;
    background: transparent;
    border: none;
    color: #333;
    font-family: 'Shuei ShogoMincho', 'Yu Mincho Pr6N M', serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .video-modal__close-inline::before {
    content: '×';
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
    line-height: 1;
  }

  .video-modal__close-inline-text {
    text-decoration: underline;
  }

  .video-modal__close-inline:hover {
    opacity: 0.8;
  }

  .statement {
    background: #fbf7ef;
    padding: 80px 0 60px;
  }

  .statement__inner {
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 40px;
    row-gap: 24px;
    align-items: flex-start;
    justify-content: center;
  }

  .statement__image {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    grid-row: 1;
  }

  .statement__image--left img {
    width: 350px;
    max-width: 100%;
    height: auto;
  }

  .statement__image--right img {
    width: 365px;
    max-width: 100%;
    height: auto;
  }

  .statement__content {
    flex: 0 1 auto;
    min-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    text-align: center;
    flex-shrink: 0;
    align-self: flex-start;
    grid-column: 2;
    grid-row: 1;
  }

  @media (max-width: 960px) and (min-width: 768px) {
    .statement__content {
      min-width: 460px;
    }
  }

  .statement__text01,
  .statement__text03 {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .statement__text01 img {
    width: 460px;
    height: auto;
    max-width: 100%;
  }

  .statement__text02--pc {
    width: 460px;
    max-width: 100%;
    display: block;
    height: auto;
  }

  .statement__text02-sp {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
  }

  .statement__text02-sp img:first-child {
    width: 320px;
    height: auto;
    max-width: 100%;
  }

  .statement__text02-sp img:last-child {
    width: 320px;
    height: auto;
    max-width: 100%;
  }

  .statement__text03 img {
    width: 460px;
    height: auto;
    max-width: 100%;
  }

  .statement__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 0;
  }

  .statement__image--sp {
    display: none;
  }

  @media (max-width: 767px) {
    .statement__image--pc {
      display: none;
    }

    .statement__image--sp {
      display: flex;
      margin-left: -16px;
      margin-right: -16px;
    }
  }

  .statement__cta-follow {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--cta-follow-bottom, 0px);
    background: #fff;
    padding: 10px 20px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05);
  }

  .statement__cta-follow.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .statement__cta-follow-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 590px;
    margin: 0 auto;
  }

  .statement__cta-text {
    width: 400px;
    max-width: 100%;
    height: auto;
  }

  .statement__cta-button-link {
    display: inline-block;
    transition: opacity 0.2s ease;
  }

  .statement__cta-button-link:hover {
    opacity: 0.7;
  }

  .statement__cta-button {
    width: 284px;
    max-width: 100%;
    height: auto;
  }

  .feature-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 80px 0;
    background-image: url('/synced-assets/mochimochiset/assets/image/bg-orange.webp');
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    box-sizing: border-box;
  }

  .fullwidth-photo {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 440px;
    overflow: hidden;
  }

  .fullwidth-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .message {
    position: relative;
    background: #fbf7ef;
    padding: 120px 0;
    overflow: hidden;
    height: auto;
  }

  @media (min-width: 1440px) {
    .message {
      height: 796px;
    }
  }

  .message__bg {
    position: absolute;
    top: calc(100% * 200 / 796);
    left: 0;
    width: calc(100% * 1200 / 1440);
    height: calc(100% * 437 / 796);
    background: #f2eee6;
    z-index: 1;
  }

  .message__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns:
      minmax(0, calc(100% * 430 / 1440))
      minmax(366px, calc(100% * 420 / 1440))
      minmax(0, calc(100% * 450 / 1440));
    align-items: flex-start;
    justify-content: center;
    column-gap: calc(100% * 70 / 1440);
  }

  .message__col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .message__col--center {
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .message__heading {
    width: calc(100% * 217 / 1200);
    max-width: 100%;
    height: auto;
  }

  .message__text {
    margin: 0;
    width: 100%;
    max-width: 360px;
    font-size: 15px;
    line-height: 2.4;
    color: #44413c;
  }

  .message__img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .message__img--left {
    width: 100%;
  }

  .message__img--right {
    width: 100%;
    margin-top: calc(100% * 170 / 796); /* 170px @796px */
  }

  .message__sp-top,
  .message__text--sp,
  .message__img-bottom {
    display: none;
  }

  .food-edu {
    background: #f2eee6;
    padding: 80px 0;
  }

  .food-edu__inner {
    width: 1240px;
    max-width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
  }

  .food-edu__title {
    font-family: "Shuei ShogoMincho", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    text-align: center;
  }

  .food-edu__lead {
    margin: 20px auto 0;
    font-family: "Yu Mincho Pr6N M", serif;
    font-size: 14px;
    line-height: 1.7;
    max-width: 920px;
  }

  .food-edu__cards {
    margin: 40px auto 0;
    width: 920px;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(100% * 40 / 920);
  }

  .food-edu__card-wrap {
    display: block;
  }

  .food-edu__card {
    color: inherit;
    text-decoration: none;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: opacity 0.2s ease;
  }

  .food-edu__card-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
  }

  .food-edu__card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: left;
  }

  .food-edu__card-text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
  }

  .food-edu__card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #c81432;
    text-decoration: none;
    align-self: flex-end;
  }

  .food-edu__card-cta-icon {
    width: 20px;
    height: 20px;
    border: 1px solid #c81432;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .food-edu__card-cta-icon::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #c81432;
    border-bottom: 1.5px solid #c81432;
    transform: rotate(-45deg);
    margin-left: -1px;
  }

  .food-edu__card:hover {
    opacity: 0.7;
  }

  .food-edu__award {
    width: 920px;
    max-width: 100%;
    margin: 40px auto 0;
    background: #fbf7ef;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .food-edu__award-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }

  .food-edu__award-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
  }

  .feature-points {
    display: flex;
    justify-content: center;
  }

  .feature-points__inner {
    width: 1240px;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .feature-point {
    position: relative;
    display: block;
    transition: opacity 0.2s ease;
  }

  .feature-point picture img,
  .feature-point__decor {
    width: 100%;
    height: auto;
    display: block;
  }

  .feature-point__base {
    position: relative;
  }

  .feature-point__base-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .feature-point__body {
    position: absolute;
    inset: 0;
    padding: calc(100% * var(--feature-point__body-padding) / 1200);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .feature-point {
    --feature-point__body-padding: 40;
    --feature-point__body-inner-width: calc(1200 - (var(--feature-point__body-padding) * 2));
    --feature-point__body-inner-height: calc(var(--feature-point__body-height) - (var(--feature-point__body-padding) * 2));
    --feature-point__title-width: 140;
    --feature-point__text-width: 0;
  }

  .feature-point__title {
    width: calc(100% * var(--feature-point__title-width) / var(--feature-point__body-inner-width));
    height: auto;
    display: block;
  }

  .feature-point .feature-point__text {
    width: calc(100% * var(--feature-point__text-width) / var(--feature-point__body-inner-width));
  }

  .feature-point__body {
    gap: calc(100% * 20 / var(--feature-point__body-inner-height));
  }

  .feature-point .feature-point__text img {
    width: 100%;
    height: auto;
    display: block;
  }

  .feature-point__photo {
    width: 100%;
    height: auto;
    display: block;
  }

  .feature-point__bubble {
    position: absolute;
    height: auto;
    display: block;
  }

  .feature-point--1 {
    --feature-point__body-height: 385;
    --feature-point__photo-width: 364;
    --feature-point__photo-height: 284;
    --feature-point__group-left: 580;
    --feature-point__group-top: 98;
    --feature-point__bubble-width: 284;
    --feature-point__bubble-left: 0;
    --feature-point__bubble-top: -65;
    --feature-point__bubble-ar-width: 584;
    --feature-point__bubble-ar-height: 244;
    --feature-point__text-width: calc(1030 / 2);
  }

  .feature-point--2 {
    --feature-point__body-height: 435;
    --feature-point__photo-width: 320;
    --feature-point__photo-height: 305;
    --feature-point__group-left: 590;
    --feature-point__group-top: 74;
    --feature-point__bubble-width: 193;
    --feature-point__bubble-left: -16;
    --feature-point__bubble-top: -16;
    --feature-point__bubble-ar-width: 402;
    --feature-point__bubble-ar-height: 200;
    --feature-point__text-width: calc(1008 / 2);
  }

  .feature-point--3 {
    --feature-point__body-height: 290;
    --feature-point__photo-width: 218;
    --feature-point__photo-height: 207;
    --feature-point__group-left: 655;
    --feature-point__group-top: 50;
    --feature-point__bubble-width: 223;
    --feature-point__bubble-left: -63;
    --feature-point__bubble-top: -15;
    --feature-point__bubble-ar-width: 462;
    --feature-point__bubble-ar-height: 156;
    --feature-point__text-width: calc(942 / 2);
  }

  .feature-point__group {
    position: absolute;
    display: inline-block;
    height: auto;
    left: calc(100% * var(--feature-point__group-left) / 1200);
    top: calc(100% * var(--feature-point__group-top) / var(--feature-point__body-height));
    width: calc(100% * var(--feature-point__photo-width) / 1200);
    aspect-ratio: var(--feature-point__photo-width) / var(--feature-point__photo-height);
  }
  .feature-point__bubble {
    left: calc(100% * var(--feature-point__bubble-left) / var(--feature-point__photo-width));
    top: calc(100% * var(--feature-point__bubble-top) / var(--feature-point__photo-height));
    width: calc(100% * var(--feature-point__bubble-width) / var(--feature-point__photo-width));
    aspect-ratio: var(--feature-point__bubble-ar-width) / var(--feature-point__bubble-ar-height);
  }

  a.feature-point:hover {
    opacity: 0.85;
  }


  .feature-price {
    display: flex;
    justify-content: center;
    margin-top: 60px;
  }

  .feature-price__inner {
    width: 1240px;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  .feature-price__heading {
    width: 845px;
    max-width: 100%;
    height: auto;
  }

  .feature-price__notes {
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    color: #744e00;
  }

  .feature-voice {
    display: flex;
    justify-content: center;
    margin-top: 60px;
  }

  .feature-voice__inner {
    width: 1240px;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .feature-voice__card {
    position: relative;
    width: 100%;
    padding: 60px 40px;
    box-sizing: border-box;
    background-color: #fff;
    background-image: url('/synced-assets/mochimochiset/assets/image/bg-white.webp');
    background-repeat: repeat;
    background-size: auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .feature-voice__heading {
    width: calc(100% * 480 / (1200 - 80));
    max-width: 100%;
    height: auto;
  }

  .feature-voice__list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(100% * 65 / (1200 - 80));
    width: 100%;
    margin-top: -60px;
  }

  .feature-voice__item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .feature-voice__item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .feature-voice__item img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
  }

  .feature-voice__item--1,
  .feature-voice__item--2,
  .feature-voice__item--3 {
    width: calc(100% * 300 / (1200 - 80));
  }

  .feature-voice__item--2 {
    margin-top: calc(100% * 75 / (1200 - 80));
  }

  @media (max-width: 767px) {
    .statement__image {
      margin-top: 0;
    }

    .fade-init[data-animate-sp='fade'] {
      transform: none;
    }

    .fade-group .fade-child[data-animate-sp='fade'] {
      transform: none;
    }

    .fade-init[data-animate-sp='fade-left'] {
      transform: translateX(calc(var(--a-distance, 24px) * -1));
    }

    .fade-init[data-animate-sp='fade-right'] {
      transform: translateX(var(--a-distance, 24px));
    }

    .fade-group .fade-child[data-animate-sp='fade-left'] {
      transform: translateX(calc(var(--a-distance, 24px) * -1));
    }

    .fade-group .fade-child[data-animate-sp='fade-right'] {
      transform: translateX(var(--a-distance, 24px));
    }

    .fade-child.fade-show[data-animate-sp='fade-left'],
    .fade-child.fade-show[data-animate-sp='fade-right'] {
      transform: none;
    }

    .video {
      height: 60vh;
    }

    .video__logo {
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 220px;
      max-width: 100%;
      height: auto;
    }

    .video__cta {
      bottom: 40px;
      font-size: 16px;
      gap: 8px;
    }

    .video__cta-icon {
      width: 20px;
      height: 20px;
    }

    .video-modal__content {
      width: 90vw;
      padding: 10px;
    }

    .video-modal__close {
      top: -10px;
      right: -10px;
      width: 28px;
      height: 28px;
    }

    .kv {
      height: 510px;
      padding-top: 15px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .kv__title-wrap {
      width: min(350px, 100%);
    }

    .kv__title {
      width: min(350px, 100%);
    }

    .kv__logo {
      top: 0;
      right: 10px;
      width: 86px;
      height: 66px;
    }

    .kv__udon {
      width: 356px;
      max-height: 250px;
      margin-top: 8px;
    }

    .kv__menu-price {
      gap: 10px;
      margin-top: -74px;
    }

    .kv__menu {
      width: 200px;
      max-height: 74px;
    }

    .kv__price {
      width: 150px;
    }

    .statement {
      padding: 40px 0;
    }

    .statement__inner {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      row-gap: 40px;
      column-gap: 0;
    }

    .statement__content {
      width: 100%;
      min-width: 0;
      padding: 0 16px;
      gap: 40px;
    }

    .statement__content img {
      width: 100%;
      max-width: 100%;
    }

    .statement__text01 img {
      width: 320px;
      height: auto;
      max-width: 100%;
    }

    .statement__text02--pc {
      display: none;
    }

    .statement__text02-sp {
      display: flex;
    }

    .statement__text03 img {
      width: 320px;
      height: auto;
      max-width: 100%;
    }

    .statement__cta-text {
      width: 335px;
    }

    .statement__cta-button {
      width: 284px;
    }

    .statement__image--left img,
    .statement__image--right img {
      width: 100%;
    }

    .statement__image--left {
      display: none;
    }

    .statement__cta {
      grid-column: 1;
      grid-row: auto;
      width: 100%;
      margin-top: 0;
    }

    .feature-wrapper {
      padding: 60px 0;
    }

    .feature-points__inner {
      padding: 0 20px;
    }

    .feature-point__body {
      padding: 20px;
    }

    .feature-point {
      --feature-point__title-width: 100;
      --feature-point__text-width: 0;
      --feature-point__group-left: 0;
      --feature-point__group-top: 0;
      --feature-point__group-width: 0;
      --feature-point__group-height: 0;
      --feature-point__bubble-width: 0;
      --feature-point__bubble-left: 0;
      --feature-point__bubble-top: 0;
    }

    .feature-point--1 {
      --point-sp-height: 760;
      --feature-point__group-left: 34;
      --feature-point__group-top: 426;
      --feature-point__group-width: 280;
      --feature-point__group-height: 220;
      --feature-point__bubble-width: 220;
      --feature-point__bubble-left: 0;
      --feature-point__bubble-top: -50;
      --feature-point__text-width: 295;
    }

    .feature-point--2 {
      --point-sp-height: 840;
      --feature-point__group-left: 43;
      --feature-point__group-top: 429;
      --feature-point__group-width: 257;
      --feature-point__group-height: 240;
      --feature-point__bubble-width: 155;
      --feature-point__bubble-left: -13;
      --feature-point__bubble-top: -12;
      --feature-point__text-width: 295;
    }

    .feature-point--3 {
      --point-sp-height: 690;
      --feature-point__group-left: 92;
      --feature-point__group-top: 306;
      --feature-point__group-width: 192;
      --feature-point__group-height: 182;
      --feature-point__bubble-width: 195;
      --feature-point__bubble-left: -60;
      --feature-point__bubble-top: -18;
      --feature-point__text-width: 295;
    }

    .feature-point__title {
      width: calc(100% * var(--feature-point__title-width) / (335 - 40));
    }

    .feature-point .feature-point__text {
      width: calc(100% * var(--feature-point__text-width) / (335 - 40));
    }

    .feature-point__body {
      gap: calc(100% * 20 / (var(--point-sp-height) - 40));
    }

    .feature-point__title,
    .feature-point .feature-point__text {
      margin-left: auto;
      margin-right: auto;
    }

    .feature-point__group {
      left: calc(100% * var(--feature-point__group-left) / 335);
      top: calc(100% * var(--feature-point__group-top) / var(--point-sp-height));
      width: calc(100% * var(--feature-point__group-width) / 335);
      height: calc(100% * var(--feature-point__group-height) / var(--point-sp-height));
    }

    .feature-point__photo {
      width: 100%;
    }

    .feature-point__bubble {
      width: calc(100% * var(--feature-point__bubble-width) / var(--feature-point__group-width));
      left: calc(100% * var(--feature-point__bubble-left) / var(--feature-point__group-width));
      top: calc(100% * var(--feature-point__bubble-top) / var(--feature-point__group-height));
    }


    .feature-price {
      margin-top: 40px;
    }

    .feature-price__inner {
      padding: 0 20px;
      align-items: center;
    }

    .feature-price__heading {
      width: 335px;
    }

    .feature-voice {
      margin-top: 40px;
    }

    .feature-voice__inner {
      padding: 0 20px;
    }

    .feature-voice__card {
      padding: 30px 10px;
      gap: 20px;
    }

    .feature-voice__heading {
      position: relative;
      width: 320px;
      max-width: 100%;
      left: 0;
      top: 0;
      transform: none;
      margin: 0 auto;
    }

    .feature-voice__list {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-top: 0;
    }

    .feature-voice__item--1,
    .feature-voice__item--2,
    .feature-voice__item--3 {
      width: 280px;
      max-width: 100%;
    }

    .feature-voice__item--2 {
      margin-top: 0;
    }

    .fullwidth-photo {
      height: 235px;
    }

    .food-edu {
      padding: 60px 0;
    }

    .food-edu__inner {
      padding: 0 20px;
      text-align: left;
    }

    .food-edu__cards {
      margin-top: 20px;
      grid-template-columns: 1fr;
      gap: 20px;
      width: 100%;
    }

    .food-edu__card {
      padding: 16px;
      gap: 20px;
    }

    .food-edu__card-cta {
      align-self: flex-end;
    }

    .food-edu__lead {
      margin-top: 20px;
    }

    .food-edu__award {
      margin-top: 20px;
    }

    .food-edu__award-title {
      text-align: center;
    }

    .food-edu__award-text {
      text-align: left;
    }

    .message {
      padding: 60px 0;
    }

    .message__bg {
      top: calc(100% * 140 / 844);
      left: 0;
      width: 100%;
      height: calc(100% * 506 / 800); /* 手動で微調整 */
    }

    /* PC 3カラムは非表示 */
    .message__inner {
      display: none;
    }

    /* SPレイアウト */
    .message__sp-top {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 0;
      column-gap: 0;
      margin-top: 10px;
    }

    .message__text--sp {
      position: relative;
      z-index: 2;
    }

    .message__img-bottom {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .message__sp-top .message__heading {
      width: calc(100vw * 64 / 375);
      max-width: 64px;
      height: calc(100vw * 182 / 375);
      max-height: 182px;
      margin-left: 20px;
    }

    .message__sp-top .message__img--right {
      width: calc(100vw * 240 / 375);
      max-width: 240px;
      height: auto;
      margin: 0 0 0 auto;
    }

    .message__text--sp {
      display: block;
      margin: 20px 0 0;
      padding: 0 20px;
      font-size: 15px;
      line-height: 2.4;
      color: #44413c;
      text-align: left;
    }

    .message__img-bottom {
      display: block;
      margin-top: 30px;
    }

    .message__img-bottom .message__img--left {
      width: calc(100vw * 280 / 375);
      max-width: 280px;
      height: auto;
    }
  }
}