/* Page */
.page {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  width: 100%;
}

/* ヘッダーなど main を含まない .page */
.page:not(:has(> main)) {
  max-width: var(--page-max-width);
}

/*
 * メイン .page — services / members / shop / footer の背景が
 * 1440px 超でも見切れないよう幅制限・overflow をかけない
 */
.page:has(> main) {
  max-width: none;
  overflow-x: visible;
}

/* 背景のみビューポート幅（インナー・max-width は各セクション内で維持） */
.section--services,
.section--members,
.section--shop,
.site-footer {
  width: 100vw;
  max-width: 100%;
  margin-inline: calc(50% - 50vw);
  box-sizing: border-box;
}

/* メイン .page が全幅のときは 100vw トリック不要（横スクロール防止） */
.page:has(> main) .section--services,
.page:has(> main) .section--members,
.page:has(> main) .section--shop,
.page:has(> main) .site-footer {
  width: 100%;
  margin-inline: 0;
}

/* Site header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px 24px;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__link {
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.site-header__link:hover {
  opacity: 0.7;
}

.site-header__divider {
  width: 1px;
  height: 19px;
  background: var(--color-text);
  opacity: 0.3;
}

.site-header__contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 22px;
  background: var(--color-bg-white);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.site-header__contact-icon {
  width: 24px;
  height: 24px;
}

/* SP メニュー（Figma 13:69）40×40・白丸＋ハンバーガー */
.site-header__menu {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.site-header__menu-icon {
  display: block;
  width: 40px;
  height: 40px;
}

.site-header__menu-icon--close {
  display: none;
}

body.is-nav-open .site-header__menu-icon--open {
  display: none;
}

body.is-nav-open .site-header__menu-icon--close {
  display: block;
}

body.is-nav-open {
  overflow: hidden;
}

/* SPドロワーメニュー（Figma 14:394 MENU_0518） */
.site-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}

.site-nav-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.site-nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  background: rgba(61, 46, 35, 0.12);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.site-nav-drawer.is-open .site-nav-drawer__backdrop {
  opacity: 1;
}

.site-nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: min(330px, 82.09vw);
  height: 100%;
  padding: 16px 16px 32px;
  overflow-y: auto;
  background: var(--color-nav-drawer-bg);
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  will-change: transform, opacity;
}

.site-nav-drawer.is-open .site-nav-drawer__panel {
  opacity: 1;
  transform: translateX(0);
}

.site-nav-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.site-nav-drawer__close img {
  display: block;
  width: 40px;
  height: 40px;
}

.site-nav-drawer__close:hover {
  opacity: 0.7;
}

.site-nav-drawer__logo {
  flex-shrink: 0;
  margin-top: 48px;
}

.site-nav-drawer__logo img {
  display: block;
  width: 80px;
  height: auto;
}

.site-nav-drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
  padding-block: 32px;
}

.site-nav-drawer__link {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-body-14);
  text-align: center;
  white-space: nowrap;
}

.site-nav-drawer__link:hover {
  opacity: 0.7;
}

.site-nav-drawer__link--external {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-nav-drawer__external-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.site-nav-drawer__divider {
  flex-shrink: 0;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-heading-line);
}

.site-nav-drawer__contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 22px;
  border: 2px solid var(--color-contact-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-white);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.site-nav-drawer__contact:hover {
  opacity: 0.7;
}

.site-nav-drawer__contact img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

@media (min-width: 901px) {
  .site-nav-drawer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-drawer__backdrop,
  .site-nav-drawer__panel {
    transition: none;
    will-change: auto;
  }
}

/* Hero（背景・波＝100%幅 / 中身＝最大1440px中央） */
.hero {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.hero__logo-wrap {
  display: flex;
  justify-content: center;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 80px 24px 96px;
}

.hero__logo {
  width: min(357px, 80vw);
}

.hero__scene {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible;
}

.hero__wave {
  position: relative;
  z-index: 0;
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  min-height: 48px;
  aspect-ratio: 1440 / 96;
  vertical-align: bottom;
}

.hero__wave--bottom {
  margin-top: -1px;
}

.hero__wave--sp {
  display: none;
}

.hero__body {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  background: var(--color-bg-white);
  padding: 96px 0;
  overflow: visible;
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: 24px;
  container-type: inline-size;
}

.hero__copy {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: max-content;
  max-width: min(600px, calc(100% - 48px));
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(28px, 2.64vw, 38px);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* 1440px 以上では vw ベースの拡大を抑える */
@media (min-width: 1440px) {
  .hero__copy {
    font-size: 38px;
  }
}

/*
 * 装飾フルーツ（基準＝hero__decorations）
 * PC: inset:0 / 幅100%（901px 以上）
 * SP: 幅100%・Figma 位置（900px 以下）
 */
.hero__decorations {
  --wave-h: clamp(48px, 6.67cqw, 96px);
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  container-type: inline-size;
  overflow: visible;
  pointer-events: none;
}

.hero__fruit-clip-top {
  --clip-wave-h: max(48px, calc(100cqw * 96 / 1440));
  position: absolute;
  top: calc(-1 * var(--clip-wave-h) + 1px);
  left: 0;
  width: 100%;
  height: calc(100% + var(--clip-wave-h) - 1px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#fff, #fff),
    url("../img/wave_white_top.svg");
  mask-image: linear-gradient(#fff, #fff), url("../img/wave_white_top.svg");
  -webkit-mask-size: 100% calc(100% - var(--clip-wave-h) + 1px),
    100% var(--clip-wave-h);
  mask-size: 100% calc(100% - var(--clip-wave-h) + 1px), 100% var(--clip-wave-h);
  -webkit-mask-position: 0 100%, 0 0;
  mask-position: 0 100%, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.hero__fruit-clip-top-inner {
  position: absolute;
  top: calc(var(--clip-wave-h) - 1px);
  left: 0;
  width: 100%;
  height: calc(100% - var(--clip-wave-h) + 1px);
}

.hero__fruit-clip {
  --clip-wave-h: max(48px, calc(100cqw * 96 / 1440));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + var(--clip-wave-h) - 1px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#fff, #fff),
    url("../img/wave_white_bottom.svg");
  mask-image: linear-gradient(#fff, #fff), url("../img/wave_white_bottom.svg");
  -webkit-mask-size: 100% calc(100% - var(--clip-wave-h) + 1px),
    100% var(--clip-wave-h);
  mask-size: 100% calc(100% - var(--clip-wave-h) + 1px), 100% var(--clip-wave-h);
  -webkit-mask-position: 0 0, 0 100%;
  mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.hero__fruit-clip-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--clip-wave-h) + 1px);
}

.hero__fruit {
  --r: 0deg;
  position: absolute;
  width: var(--fruit-w);
  transform: translate3d(0, var(--parallax-y, 0), 0) rotate(var(--r));
  will-change: transform;
}

.hero__fruit img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/*
 * Figma 8:394 基準（1440×約589px）
 * 901px 以上：配置は PC。サイズは hero__decorations 幅に連動（1440px で PC 上限）
 * 900px 以下：SP サイズに切替
 */
@media (min-width: 901px) {
  /* 右上・ぼかしマンゴ fruit_hero_mango_blur（1440px 基準・257px・角度は PNG 込み） */
  .hero__fruit--persimmon-tr {
    --r: 0deg;
    --fruit-w: min(257px, 17.85cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 416 / 396;
    left: auto;
    right: 9%;
    top: -29%;
  }

  .hero__fruit--persimmon-tr img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 右下・グレープフルーツ fruit_hero_grapefruit（1440px 基準・244px・角度は PNG 込み） */
  .hero__fruit--peach-cut-br {
    --r: 0deg;
    --fruit-w: min(244px, 16.94cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 367 / 356;
    left: auto;
    top: auto;
    right: 10%;
    bottom: -36%;
    z-index: 2;
  }

  .hero__fruit--peach-cut-br img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 左上・ライチ fruit_hero_lychee（1440px 基準・120×120・角度は PNG 込み） */
  .hero__fruit--lychee-tl {
    --r: 0deg;
    --fruit-w: min(120px, 8.33cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 1 / 1;
    right: auto;
    bottom: auto;
    left: 16.34%;
    top: 10.59%;
  }

  .hero__fruit--lychee-tl img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 左下・ぼかし桃 fruit_hero_peach_blur（1440px 基準・281px・角度は PNG 込み） */
  .hero__fruit--peach-blur-bl {
    --r: 0deg;
    --fruit-w: min(281px, 19.51cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 482 / 461;
    right: auto;
    bottom: auto;
    left: -7.92%;
    top: 0;
  }

  .hero__fruit--peach-blur-bl img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 左下・ぼかしいちじく fruit_hero_fig_blur（1440px 基準・198.12px・角度は PNG 込み） */
  .hero__fruit--fig-blur-bl {
    --r: 0deg;
    --fruit-w: min(198.12px, 13.76cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 328 / 345;
    right: auto;
    top: auto;
    left: 4.51%;
    bottom: -30.25%;
  }

  .hero__fruit--fig-blur-bl img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 下中央・ぼかしオレンジ fruit_hero_orange_blur（1440px 基準・495px・角度は PNG 込み） */
  .hero__fruit--orange-blur-cb {
    --r: 0deg;
    --fruit-anchor-x: 60%;
    --fruit-w: min(495px, 34.38cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 773 / 587;
    right: auto;
    top: auto;
    left: calc(var(--fruit-anchor-x) - var(--fruit-w) / 2);
    bottom: -74%;
  }

  .hero__fruit--orange-blur-cb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 中央左上・いちご切り口（10:516 / PC） */
  .hero__fruit--strawberry-cut-ctl {
    --fruit-w: min(136px, 9.44cqw);
    left: 27.2%;
    top: -34.2%;
  }

  /* 中央左下・さくらんぼ（1440px 基準・135px・角度は PNG 込み） */
  .hero__fruit--cherry-cbl {
    --r: 0deg;
    --fruit-w: min(135px, 9.375cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 203 / 291;
    right: auto;
    top: auto;
    left: 22.25%;
    bottom: -12%;
  }

  .hero__fruit--cherry-cbl img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 中央下・ぼかしマスカットつぶ fruit_hero_muscat_berry_blur（1440px 基準・113px・さくらんぼ右斜め上） */
  .hero__fruit--muscat-blur-cb {
    --r: 0deg;
    --fruit-w: min(113px, 7.85cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 213 / 208;
    right: auto;
    top: auto;
    left: calc(25.25% + min(135px, 9.375cqw) * 0.55);
    bottom: calc(-6% + 28%);
  }

  .hero__fruit--muscat-blur-cb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 中央右下・いちご fruit_hero_strawberry（1440px 基準・角度は PNG 込み） */
  .hero__fruit--strawberry-cbr {
    --r: 0deg;
    --fruit-w: min(143px, 9.93cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 216 / 256;
    right: auto;
    bottom: auto;
    left: 63.3%;
    top: 44%;
  }

  .hero__fruit--strawberry-cbr img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 中央右上・ブルーベリー fruit_hero_blueberry（1440px 基準・角度は PNG 込み） */
  .hero__fruit--grape-heart-ctr {
    --r: 0deg;
    --fruit-w: min(83px, 5.76cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 125 / 126;
    left: auto;
    bottom: auto;
    right: 35%;
    top: 1.5%;
  }

  .hero__fruit--grape-heart-ctr img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 右端・ぼかしマスカットふさ fruit_hero_muscat_bunch_blur（1440px 基準・524px・角度は PNG 込み） */
  .hero__fruit--muscat-bunch-br {
    --r: 0deg;
    --fruit-w: min(524px, 36.39cqw);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 846 / 863;
    left: auto;
    top: auto;
    right: -23%;
    bottom: -20%;
  }

  .hero__fruit--muscat-bunch-br img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/*
 * ヒーロー：901〜1024px
 * PC 配置のまま、body が SP 高さになるため位置を補正
 */
@media (min-width: 901px) and (max-width: 1024px) {
  .hero__fruit--persimmon-tr {
    top: -15%;
  }

  .hero__fruit--peach-cut-br {
    bottom: -25%;
  }

  .hero__fruit--peach-blur-bl {
    top: 5%;
  }

  .hero__fruit--lychee-tl {
    top: 12%;
  }

  .hero__fruit--strawberry-cut-ctl {
    top: -25%;
  }

  .hero__fruit--cherry-cbl {
    bottom: -8%;
  }

  .hero__fruit--muscat-blur-cb {
    bottom: calc(-6% + 20%);
  }

  .hero__fruit--strawberry-cbr {
    top: 48%;
  }

  .hero__fruit--grape-heart-ctr {
    top: 0%;
  }

  .hero__fruit--muscat-bunch-br {
    bottom: -15%;
  }
}

/* Section common */
.section {
  position: relative;
  padding: var(--section-padding-y) var(--section-padding-x);
}

.section__inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* 縦書き見出し + 装飾線（Figma 2:240） */
.section__heading {
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: auto;
  position: relative;
  z-index: 2;
}

/* セクション h2 共通（縦書き見出し） */
.section__heading h2 {
  margin: 0;
  color: #625856;
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-vertical-title);
  letter-spacing: var(--letter-spacing-vertical-title);
  writing-mode: vertical-rl;
  font-feature-settings: "vert" 1;
  text-orientation: mixed;
  width: 16px;
  word-break: break-word;
}

.section__heading-line {
  flex: none;
  width: 3px;
  min-width: 3px;
  align-self: stretch;
  min-height: 0;
  background: var(--color-heading-line);
  border-radius: 2px;
}

.section__body {
  flex: 1;
  min-width: 0;
  max-width: var(--content-width);
}

/* About */
.section--about {
  background: var(--color-bg);
  overflow: visible;
  padding-inline: 0;
}

.section--about .section__inner {
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}

.section--about .section__body {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: visible;
}

/* About（Figma 47:278 / 上段 2:49・下段 2:50） */
.about-blocks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 120px;
  width: 100%;
  max-width: 856px;
  margin-inline: auto;
}

.about-insert-image {
  width: calc(min(100vw, var(--page-max-width)) * 1022 / 1440);
  max-width: none;
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.about-insert-image__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
  object-fit: cover;
}

/* 上段 Frame 5（2:49）: gap 56・items-start */
.about-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 56px;
  align-items: flex-start;
  width: 100%;
  max-width: 856px;
}

/* 下段 Frame 6（2:50）: gap 56・items-center・755px 行 */
.about-row--indented {
  flex-wrap: nowrap;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 856px;
  gap: clamp(24px, 3.89vw, 56px);
}

/* テキスト列（2:41 / 2:51）: 幅 400px・gap 24px */
.about-row__text {
  flex: 0 0 400px;
  width: 400px;
  max-width: 100%;
  min-width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  word-break: break-word;
}

.about-row__title {
  margin: 0;
  color: var(--color-accent);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 0;
  letter-spacing: var(--letter-spacing-heading);
}

/* 見出し（2:38）: 2行・br 改行・line-height 1.8 */
.about-row__title-line {
  display: block;
  line-height: var(--line-height-heading);
}

.about-row__title-br {
  display: block;
}

.about-row--indented .about-row__title {
  line-height: var(--line-height-heading);
  white-space: nowrap;
}

/* 下段のみ Figma 比率に合わせて画像:テキストを 420:380 に寄せる */
.about-row--indented .about-row__text {
  flex: 0 1
    clamp(300px, calc(min(100vw, var(--page-max-width)) * 380 / 1440), 380px);
  width: clamp(
    300px,
    calc(min(100vw, var(--page-max-width)) * 380 / 1440),
    380px
  );
  min-width: 300px;
  max-width: 380px;
}

.about-figure--horizontal {
  flex: 0 1
    clamp(280px, calc(min(100vw, var(--page-max-width)) * 420 / 1440), 420px);
  min-width: 280px;
  width: clamp(
    280px,
    calc(min(100vw, var(--page-max-width)) * 420 / 1440),
    420px
  );
  max-width: 100%;
  aspect-ratio: 420 / 286.2;
}

.about-figure--horizontal .about-figure__main {
  width: 100%;
  border-radius: var(--radius-image);
  object-fit: cover;
  object-position: center bottom;
}

.about-row__desc {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body-18);
  letter-spacing: var(--letter-spacing-body-18);
}

/* 主写真（01 / 03）を基準に装飾（02 / 04）を absolute */
.about-figure {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  overflow: visible;
}

.about-figure__main {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
  object-fit: cover;
}

.about-figure__accent {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  object-fit: cover;
}

/* 上段・01 (47:299) + 02 (47:279) — 右下へ重なる */
.about-figure--landscape {
  width: 400px;
  max-width: 100%;
}

.about-figure--landscape .about-figure__main {
  aspect-ratio: 400 / 300;
}

.about-figure--landscape .about-figure__accent {
  top: 61.67%;
  left: 80.25%;
  width: 60%;
  max-width: 240px;
  aspect-ratio: 240 / 222;
  border-radius: var(--radius-image);
}

/* 下段・03 (47:301) + 04 (47:291) — 左下へ重なる（03↔04 の間 244px） */
.about-figure--portrait {
  --about-portrait-accent-gap: 200px;
  --about-portrait-main-width: 420px;
  width: var(--about-portrait-main-width);
  max-width: 100%;
}

.about-figure--portrait .about-figure__main {
  width: 100%;
  aspect-ratio: 299 / 372;
  border-radius: 14.588px;
}

.about-figure--portrait .about-figure__accent {
  top: 52.69%;
  left: calc(
    -1 * var(--about-portrait-accent-gap) / var(--about-portrait-main-width) * 100%
  );
  width: calc(188 / 299 * 100%);
  max-width: 188px;
  aspect-ratio: 188 / 234;
  border-radius: 9.176px;
}

/* Services（Figma 2:242 / SP 51:627）上段クリーム + ピンク帯 */
.section.section--services {
  padding: 0;
  overflow: visible;
}

.section--services {
  position: relative;
  background: var(--color-band);
  overflow: visible;
}

/* ピンク帯より上はクリーム（PC — 帯の top と同じ） */
.section--services::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  height: var(--services-band-pc-top);
  background: var(--color-bg);
  pointer-events: none;
}

.section--services .services-band {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  background: var(--color-band);
  transform: none;
  pointer-events: none;
}

/* 見出し24 + gap32 + カード956 = 1012px を中央配置（Figma 左右約214px） */
.section__inner--services {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--section-padding-y)
    max(24px, calc((100% - var(--services-content-width)) / 2));
  overflow: visible;
}

.services-stage {
  position: relative;
  display: flex;
  flex-shrink: 0;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
  max-width: var(--services-content-width);
}

/* ピンク帯（PC・Figma 108:1402） */
.section--services .services-band {
  top: var(--services-band-pc-top);
  bottom: 0;
  height: auto;
}

.section--services .services-wave--top {
  aspect-ratio: var(--services-wave-aspect);
  height: auto;
}

.section--services .section__heading {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.section--services .section__body {
  position: relative;
  z-index: 1;
  flex: 0 0 956px;
  width: 956px;
  max-width: 100%;
  min-width: 0;
}

.services-wave {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.services-wave--top {
  background: var(--color-bg);
}

.services-wave--bottom {
  margin-top: -2px;
  background: var(--color-band);
}

/* Figma 108:1406 — top -22.94px / right -136px @ 1012px stage */
.services-decoration {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
}

.services-decoration--plum {
  top: -120px;
  right: -96px;
  width: clamp(96px, 15.7%, var(--services-strawberry-size));
}

.services-cards {
  display: flex;
  flex-flow: row nowrap;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.service-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 300px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 300px;
  min-width: 0;
  padding: 24px;
  background: var(--color-bg-white);
  border-radius: var(--radius-card);
}

.service-card__title {
  color: var(--color-accent);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading-sm);
  text-align: center;
  white-space: nowrap;
}

.service-card__desc {
  width: 100%;
  font-size: 15px;
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-body-15);
  text-align: center;
  word-break: break-word;
}

.service-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 252 / 189;
  border-radius: var(--radius-image);
  object-fit: cover;
}

/* Members（Figma 3:289 PC / 63:853 SP） */
.section.section--members {
  padding: 0;
}

.section--members {
  overflow: visible;
  background: var(--color-bg-white);
}

/* 左下ぶどう装飾（Figma 44:247 — 縦見出しの下あたりに配置） */
.members-decoration {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}

.members-decoration--grape {
  bottom: var(--section-padding-y);
  left: max(16px, calc((100% - 1012px) / 2 - 72px));
  width: clamp(88px, 9vw, 129px);
  transform: rotate(-46.142deg);
  transform-origin: center center;
}

.members-decoration--muscat {
  top: -24%;
  bottom: auto;
  left: 7%;
  width: clamp(88px, 10vw, 140px);
  transform: none;
}

.section__inner--members {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  box-sizing: border-box;
  padding: var(--section-padding-y) max(24px, calc((100% - 1012px) / 2));
}

.section--members .section__body {
  position: relative;
  z-index: 1;
  flex: 0 0 956px;
  width: 956px;
  max-width: 100%;
  min-width: 0;
}

.members-note {
  position: absolute;
  top: 50%;
  right: 0;
  margin: 0;
  color: var(--color-text-note);
  font-size: 16px;
  line-height: 1.8;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

.member-cards {
  display: flex;
  flex-flow: row nowrap;
  gap: 28px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.member-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  padding: 24px;
  background: var(--color-bg-white);
  border-radius: var(--radius-card);
}

/* 写真：通常の長方形画像 */
.member-card__photo {
  flex-shrink: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-image);
}

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

.member-card__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  line-height: 1.8;
  text-align: center;
}

.member-card__name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

.member-card__name-main {
  font-size: 22px;
  letter-spacing: var(--letter-spacing-heading-sm);
}

.member-card__name-sub {
  font-size: 14px;
  letter-spacing: var(--letter-spacing-body-14);
}

.member-card__role {
  margin: 0;
  font-size: 14px;
  letter-spacing: var(--letter-spacing-body-14);
}

.member-card__bio {
  width: 100%;
  margin: 0;
  font-size: 15px;
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-body-15);
  text-align: left;
  word-break: break-word;
}

/* Shop（Figma 11:539 PC / 64:854 SP） */
.section.section--shop {
  padding: 0;
}

.section--shop {
  position: relative;
  overflow: visible;
  background: var(--color-bg);
}

.shop-decoration {
  position: absolute;
  z-index: 2;
  width: 290px;
  height: auto;
  pointer-events: none;
  right: 133.405px;
  top: 5%;
}

@media (min-width: 1025px) {
  .shop-decoration {
    top: 5%;
  }
}

.section__inner--shop {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  box-sizing: border-box;
  padding: var(--section-padding-y) max(24px, calc((100% - 1012px) / 2));
}

.section--shop .section__body {
  flex: 0 0 956px;
  width: 956px;
  max-width: 100%;
  min-width: 0;
}

.shop-content {
  display: flex;
  gap: var(--shop-content-gap, 40px);
  align-items: flex-start;
  width: 100%;
  max-width: min(100%, var(--shop-content-max-width, 892px));
  margin-inline: auto;
}

.shop-banner {
  display: block;
  flex-shrink: 0;
  width: min(100%, var(--shop-banner-width, 500px));
  max-width: 500px;
  height: auto;
  border-radius: 4px;
  overflow: hidden;
}

.shop-banner__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.shop-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.shop-text__title {
  margin: 0;
  color: var(--color-accent);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.shop-text__desc {
  margin: 0;
  width: var(--shop-text-desc-width, 336px);
  max-width: 100%;
  font-size: 18px;
  line-height: var(--line-height-body-18);
  letter-spacing: var(--letter-spacing-body-18);
}

.shop-wave {
  display: block;
  width: 100%;
  height: auto;
}

.shop-wave--top {
  background: var(--color-bg);
}

/*
 * PC 見出し列（901px+）
 * 1012px 固定レールは 1101px 以上（901〜1100 はタブレット用に緩和）
 */
@media (min-width: 901px) {
  .section__heading {
    flex: 0 0 24px;
    width: 24px;
    max-width: 24px;
  }

  .section--services .services-band {
    top: var(--services-band-pc-top);
    bottom: auto;
    height: var(--services-band-pc-height);
  }

  .section--services::before {
    height: var(--services-band-pc-top);
  }
}

/*
 * タブレット（901〜1100px）：固定 min-width をやめて横はみ出し防止
 */
@media (min-width: 901px) and (max-width: 1100px) {
  .section--about .section__inner,
  .section__inner--services,
  .section__inner--members,
  .section__inner--shop {
    width: 100%;
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: 24px;
  }

  .services-stage {
    width: fit-content;
    max-width: min(100%, var(--services-md-stage-max));
    flex-shrink: 1;
    min-width: 0;
    margin-inline: auto;
  }

  .section--services .section__body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: var(--services-md-body-max);
  }

  .section--shop .section__body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .services-cards {
    flex-wrap: wrap;
    justify-content: center;
  }

  .service-card {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
    max-width: 300px;
    padding: var(--services-md-card-padding);
  }

  .service-card__title {
    font-size: var(--services-md-card-title);
    white-space: normal;
  }

  .services-stage {
    gap: var(--services-md-stage-gap);
  }

  .services-cards {
    gap: var(--services-md-cards-gap);
  }

  .services-decoration--plum {
    width: var(--services-md-strawberry);
    right: clamp(-100px, -12vw, -13.44%);
  }

  .member-cards {
    justify-content: center;
  }

  .section__inner--shop {
    gap: clamp(16px, 2vw, 32px);
  }

  .shop-content {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(16px, 2.8vw, 40px);
    max-width: 100%;
  }

  .shop-banner {
    flex: 1 1 280px;
    width: auto;
    min-width: 0;
    max-width: 500px;
    height: auto;
  }

  .shop-text {
    flex: 1 1 260px;
    width: auto;
    min-width: 0;
    max-width: 352px;
  }

  .shop-text__title {
    white-space: normal;
  }

  .shop-text__desc {
    width: 100%;
    max-width: 100%;
  }

  .shop-decoration {
    right: clamp(24px, 9.264vw, 133.405px);
    top: 5%;
    width: 163px;
  }
}

/*
 * PC ワイド（1101px+）：1012px レール固定
 */
@media (min-width: 1101px) {
  .section--about .section__inner,
  .section__inner--services,
  .section__inner--members,
  .section__inner--shop {
    width: 100%;
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: max(24px, calc((100% - var(--services-content-width)) / 2));
  }

  .section__inner--services {
    justify-content: center;
  }

  .services-stage {
    width: var(--services-content-width);
    max-width: var(--services-content-width);
    flex-shrink: 0;
    min-width: 0;
    margin-inline: auto;
  }

  .section--services .section__body,
  .section--members .section__body,
  .section--shop .section__body {
    flex-shrink: 0;
    min-width: 956px;
  }

  .shop-content {
    flex-shrink: 0;
    width: 100%;
    max-width: var(--shop-content-max-width);
  }

  .shop-text {
    flex: 0 0 var(--shop-text-width);
    width: var(--shop-text-width);
    min-width: 0;
    max-width: 100%;
  }
}

/*
 * Shop：1101px+（Figma 86:1124 — 500+40+352 @1440 基準で可変）
 */
@media (min-width: 1101px) {
  .shop-banner {
    width: var(--shop-banner-width);
    height: auto;
    max-width: min(100%, 500px);
  }

  .shop-text {
    flex: 0 0 var(--shop-text-width);
    width: var(--shop-text-width);
    max-width: 100%;
    min-width: 0;
  }

  .shop-text__desc {
    width: var(--shop-text-desc-width);
  }
}

/*
 * Services：901〜1300px（中間幅でカード・装飾・本文を縮小）
 */
@media (min-width: 901px) and (max-width: 1300px) {
  .section__inner--services {
    justify-content: center;
  }

  .section--services .services-band {
    bottom: 0;
    height: auto;
  }

  .services-stage {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    gap: var(--services-md-stage-gap);
  }

  .section--services .section__body {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .services-cards {
    flex-wrap: wrap;
    gap: var(--services-md-cards-gap);
  }

  .service-card {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
    max-width: 300px;
    padding: var(--services-md-card-padding);
  }

  .service-card__title {
    font-size: var(--services-md-card-title);
    white-space: normal;
  }

  .services-decoration--plum {
    width: min(var(--services-md-strawberry), var(--services-strawberry-size));
    right: clamp(-100px, -12vw, -13.44%);
  }
}

/* 1101〜1300px：固定 min-width 956px を緩めて上記と整合 */
@media (min-width: 1101px) and (max-width: 1300px) {
  .section--services .section__body {
    min-width: 0;
  }

  .section--members .section__body {
    min-width: 0;
  }

  .services-decoration--plum {
    right: clamp(-80px, -9vw, -136px);
  }
}

/*
 * Members：901〜1300px（ブロック全体を中央・見出しとカードは近接）
 */
@media (min-width: 901px) and (max-width: 1300px) {
  .section--members .section__body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .member-cards {
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* 1440px 超：セクションは 100vw でも装飾・レールは 1440px 中央基準 */
@media (min-width: 1441px) {
  .members-decoration--grape,
  .members-decoration--muscat {
    left: max(
      16px,
      calc(
        50% - var(--page-max-width) / 2 +
          (var(--page-max-width) - var(--services-content-width)) / 2 - 72px
      )
    );
  }
}

/* Footer（Figma 11:570 PC / 86:1323 SP） */
.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  gap: var(--footer-gap-copyright);
  width: 100%;
  padding-block: var(--footer-pc-padding-block);
  padding-inline: clamp(16px, 4vw, 24px);
  overflow-x: clip;
  overflow-y: visible;
  background: var(--color-bg-white);
}

.site-footer__main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--footer-pc-main-gap);
  width: 100%;
  max-width: var(--page-max-width);
}

.site-footer__logo {
  flex-shrink: 0;
  width: 100px;
  height: auto;
}

.site-footer__menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--footer-pc-menu-gap);
  max-width: 100%;
  padding-block: var(--footer-sp-menu-padding-block);
}

.site-footer__nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--footer-pc-nav-gap);
  max-width: 100%;
}

.site-footer__link {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-body-14);
  white-space: nowrap;
}

.site-footer__link:hover,
.site-footer__contact:hover {
  opacity: 0.7;
}

.site-footer__link--external {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-footer__external-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.site-footer__divider {
  flex-shrink: 0;
  width: 1px;
  height: 19px;
  background: var(--color-text);
  opacity: 0.3;
}

.site-footer__contact {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 10px 22px;
  border: 2px solid var(--color-contact-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-white);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.site-footer__contact-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.site-footer__copyright {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.6px;
}

/* Placeholder (images not yet placed) */
.img-placeholder {
  background: var(--color-placeholder);
  object-fit: cover;
}

/* Page decorations */
.page-decoration {
  position: absolute;
  pointer-events: none;
  object-fit: cover;
}

.page-decoration--strawberry-shop {
  right: 80px;
  bottom: 200px;
  width: 95px;
}

/* Responsive (basic) */
@media (max-width: 1200px) {
  .section:not(.section--about):not(.section--services):not(
      .section--members
    ):not(.section--shop) {
    padding-left: 48px;
    padding-right: 48px;
  }

  .hero__body {
    padding-block: clamp(72px, 8vw, 96px);
  }
}

/*
 * About：1300px 以下（PCレイアウト維持・はみ出しだけ抑える）
 * 縦積みは 900px 以下（Figma SP）のみ
 */
@media (max-width: 1300px) {
  .section--about {
    overflow-x: clip;
  }

  .section--about .section__inner {
    min-width: 0;
  }

  .section--about .section__body {
    min-width: 0;
    max-width: 100%;
  }

  .about-blocks {
    gap: clamp(64px, 9vw, 120px);
    max-width: min(856px, 100%);
  }

  .about-insert-image {
    width: clamp(
      320px,
      calc(min(100vw, var(--page-max-width)) * 1022 / 1440),
      1022px
    );
  }

  .about-row,
  .about-row--indented {
    flex-wrap: nowrap;
    gap: clamp(24px, 4vw, 56px);
    max-width: 100%;
  }

  .about-row--indented {
    max-width: min(755px, 100%);
  }

  .about-row__text {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 400px;
  }

  .about-row__title-line,
  .about-row--indented .about-row__title {
    white-space: normal;
  }

  .about-figure--landscape {
    flex: 1 1 160px;
    width: min(100%, var(--about-md-landscape-max));
    max-width: var(--about-md-landscape-max);
  }

  .about-figure--horizontal {
    flex: 0 1
      clamp(280px, calc(min(100vw, var(--page-max-width)) * 420 / 1440), 420px);
    width: clamp(
      280px,
      calc(min(100vw, var(--page-max-width)) * 420 / 1440),
      420px
    );
    max-width: 100%;
  }

  .about-figure--portrait {
    --about-portrait-main-width: var(--about-md-portrait-main-width);
    --about-portrait-accent-gap: var(--about-md-portrait-accent-gap);
    flex: 0 1 var(--about-portrait-main-width);
    width: min(var(--about-portrait-main-width), 100%);
    max-width: var(--about-md-portrait-row-max);
  }
}

/*
 * About：900px 以下（Figma 14:172 SP レイアウト・画像は 390px 枠内）
 */
@media (max-width: 900px) {
  .section.section--about {
    padding-top: var(--about-sp-padding-top);
    padding-bottom: var(--about-sp-padding-bottom);
    padding-inline: var(--about-sp-padding-inline-start)
      var(--about-sp-padding-inline-end);
    overflow: hidden;
  }

  .section--about .section__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--about-sp-inner-gap);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
  }

  .section--about .section__heading {
    flex-shrink: 0;
  }

  .section--about .section__body {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: min(100%, var(--section-sp-body-width));
  }

  .about-blocks {
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  .about-insert-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    left: 0;
    transform: none;
    overflow: hidden;
  }

  .about-insert-image__img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .about-row,
  .about-row--indented {
    gap: 24px;
    width: 100%;
    max-width: 100%;
  }

  .about-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-row--indented {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-row--indented .about-row__text {
    order: 1;
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .about-row--indented .about-figure {
    order: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .about-row__text {
    flex: none;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .about-row__title {
    line-height: 1.6;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: left;
  }

  /* SP：改行 br を消して1文として自然に折り返し */
  .about-row__title-br {
    display: none;
  }

  .about-row__title-line {
    display: block;
    line-height: inherit;
    white-space: normal;
  }

  .about-row--indented .about-row__title {
    line-height: 1.6;
    white-space: nowrap;
  }

  /* SP：役物の後ろを詰めて見出しを1行に収める */
  .about-row__title-punct {
    letter-spacing: -0.5em;
  }

  .about-row__desc {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.75px;
    text-align: left;
  }

  /* 上段 01+02（Figma 86:1239）— 本文幅いっぱい・%配置 */
  .about-figure--landscape {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  .about-figure--horizontal {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin-inline: 0;
    aspect-ratio: unset;
  }

  .about-figure--landscape .about-figure__main {
    width: var(--about-sp-landscape-main-w);
    max-width: 100%;
    margin-inline: 0;
    aspect-ratio: var(--about-sp-landscape-main-ratio);
    border-radius: var(--about-sp-radius);
  }

  .about-figure--landscape .about-figure__accent {
    top: var(--about-sp-landscape-accent-top);
    left: var(--about-sp-landscape-accent-left);
    width: var(--about-sp-landscape-accent-w);
    max-width: calc(100% - var(--about-sp-landscape-accent-left));
    aspect-ratio: var(--about-sp-landscape-accent-ratio);
    border-radius: var(--about-sp-radius);
  }

  .about-figure--horizontal .about-figure__main {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* 下段 03+04（Figma 86:1246）— 121×151 + flex 1 主写真 */
  .about-figure--portrait {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--about-sp-portrait-gap);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin-inline: 0;
  }

  .about-figure--portrait .about-figure__accent {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 var(--about-sp-portrait-accent-w);
    order: 0;
    width: var(--about-sp-portrait-accent-w);
    max-width: var(--about-sp-portrait-accent-w);
    height: var(--about-sp-portrait-accent-h);
    aspect-ratio: var(--about-sp-portrait-accent-ratio);
    border-radius: var(--about-sp-radius);
  }

  .about-figure--portrait .about-figure__main {
    flex: 1 1 0;
    order: 1;
    min-width: 0;
    min-height: 0;
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: var(--about-sp-portrait-main-ratio);
    border-radius: var(--about-sp-radius);
  }
}

/*
 * About：901〜1300px（PC横並び時の画像上限）
 */
@media (min-width: 901px) and (max-width: 1300px) {
  .about-figure--landscape,
  .about-figure--horizontal {
    flex: 0 1 22vw;
    width: 22vw;
    max-width: 100%;
  }

  .about-figure--portrait {
    width: min(100%, var(--about-md-portrait-row-max));
    max-width: var(--about-md-portrait-row-max);
  }
}

/*
 * About：501〜900px（画像コンテナ上限・比率は figure 内のまま）
 */
@media (min-width: 501px) and (max-width: 900px) {
  .about-row__text {
    width: 100%;
    max-width: 100%;
  }

  .about-figure--landscape {
    width: 100%;
    max-width: min(100%, var(--about-sp-landscape-figure-max));
    margin-inline: auto;
  }

  .about-figure--horizontal {
    width: 100%;
    max-width: min(100%, var(--about-sp-landscape-figure-max));
    min-width: 0;
    margin-inline: auto;
  }

  .about-figure--portrait {
    width: 100%;
    max-width: var(--about-sp-portrait-row-max);
    margin-inline: auto;
  }

  /* 固定 top をやめ、主写真高さに対する比率で重なり位置を維持 */
  .about-figure--landscape .about-figure__accent {
    top: 60.65%;
  }
}

/*
 * About：501〜900px — ブロック中央寄せ（テキスト・画像は左揃えのまま）
 */
@media (min-width: 501px) and (max-width: 900px) {
  .section--about .section__inner {
    justify-content: center;
    gap: var(--section-sp-tablet-inner-gap);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .section--about .section__body {
    flex: 1 1 0;
    width: auto;
    max-width: min(100%, var(--section-sp-body-width));
  }

  .about-blocks {
    align-items: center;
  }

  .about-row,
  .about-row--indented {
    align-items: center;
  }
}

/*
 * Members：501〜1024px — 縦見出しと本文を近づける
 */
@media (min-width: 501px) and (max-width: 900px) {
  .section__inner--members {
    justify-content: flex-start;
    gap: var(--section-sp-tablet-inner-gap);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .section--members .section__body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .section--members .member-cards {
    align-items: center;
  }
}

/*
 * ヒーロー：1024px 以下（タブレット〜狭い画面）
 * 波・コピーのみ SP。果物は PC 配置のまま、装飾箱 width:100%
 */
@media (max-width: 1024px) {
  .hero {
    overflow-x: clip;
    overflow-y: visible;
  }

  .hero__scene {
    overflow: visible;
  }

  .hero__wave--pc {
    display: none;
  }

  .hero__wave--sp {
    display: block;
    aspect-ratio: var(--hero-sp-wave-ratio);
    min-height: 0;
  }

  .hero__wave--top.hero__wave--sp {
    transform: rotate(180deg);
  }

  .hero__logo-wrap {
    padding: 32px 16px 80px;
    background: var(--color-bg);
  }

  .hero__logo {
    width: min(var(--hero-sp-logo-width), 64.7vw);
    height: auto;
  }

  .hero__body {
    box-sizing: border-box;
    min-height: 321px;
    padding-block: 96px;
    overflow: visible;
  }

  .hero__inner {
    min-height: 129px;
    padding-inline: 0;
  }

  .hero__copy {
    max-width: min(var(--hero-sp-copy-max-width), calc(100% - 80px));
    font-size: 24px;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  .hero__decorations {
    --wave-h: clamp(22px, 6.66vw, 27px);
    container-type: inline-size;
    inset: 0;
    width: 100%;
    max-width: none;
    transform: none;
  }

  .hero__fruit-clip {
    --clip-wave-h: calc(100cqw * 26.7832 / 402);
    -webkit-mask-image: linear-gradient(#fff, #fff),
      url("../img/wave_white_bottom_sp.svg");
    mask-image: linear-gradient(#fff, #fff),
      url("../img/wave_white_bottom_sp.svg");
  }

  .hero__fruit-clip-top {
    --clip-wave-h: calc(100cqw * 26.7832 / 402);
    -webkit-mask-image: linear-gradient(#fff, #fff),
      url("../img/wave_white_top.svg");
    mask-image: linear-gradient(#fff, #fff), url("../img/wave_white_top.svg");
  }
}

@media (max-width: 900px) {
  /* スマホ：SP フルーツ配置（装飾箱は 1024px 以下と同様 width:100%） */
  .hero__fruit-clip,
  .hero__fruit-clip-top {
    display: none;
  }

  .hero__fruit--fig-blur-bl,
  .hero__fruit--orange-blur-cb {
    display: none;
  }

  .hero__fruit--lychee-tl {
    --r: 0deg;
    --fruit-w: clamp(44px, 15.46cqw, 62.004px);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 1 / 1;
    left: 17.46%;
    top: 12.96%;
    bottom: auto;
  }

  .hero__fruit--lychee-tl img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--cherry-cbl {
    --r: 0deg;
    --fruit-w: clamp(54px, 16.46cqw, 66px);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 203 / 291;
    left: 6.74%;
    top: auto;
    bottom: -7.77%;
  }

  .hero__fruit--cherry-cbl img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--grape-heart-ctr {
    --r: 0deg;
    --fruit-w: clamp(34px, 11.64cqw, 46.688px);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 125 / 126;
    left: auto;
    bottom: auto;
    right: var(--hero-sp-grape-heart-right);
    top: var(--hero-sp-grape-heart-top);
  }

  .hero__fruit--grape-heart-ctr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--peach-blur-bl {
    --r: 0deg;
    --fruit-w: 148px;
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 482 / 461;
    right: auto;
    top: auto;
    left: var(--hero-sp-peach-blur-left);
    bottom: var(--hero-sp-peach-blur-bottom);
  }

  .hero__fruit--peach-blur-bl img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--peach-cut-br {
    --r: 0deg;
    --fruit-w: clamp(110px, 32.5cqw, 130.357px);
    left: auto;
    top: auto;
    right: var(--hero-sp-peach-cut-right);
    bottom: var(--hero-sp-peach-cut-bottom);
    z-index: 2;
    aspect-ratio: var(--hero-sp-peach-cut-aspect);
  }

  .hero__fruit--peach-cut-br img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--persimmon-tr {
    --r: 0deg;
    --fruit-w: clamp(110px, 37.75cqw, var(--hero-sp-persimmon-max-width));
    width: var(--fruit-w);
    max-width: var(--hero-sp-persimmon-max-width);
    height: auto;
    aspect-ratio: 343 / 333;
    left: auto;
    bottom: auto;
    right: -70.688px;
    top: var(--hero-sp-persimmon-top);
  }

  .hero__fruit--persimmon-tr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--strawberry-cut-ctl {
    display: block;
    --fruit-w: clamp(48px, 16.7cqw, 67px);
    left: var(--hero-sp-strawberry-cut-left);
    top: var(--hero-sp-strawberry-cut-top);
  }

  .hero__fruit--strawberry-cbr {
    --r: 0deg;
    --fruit-w: clamp(56px, 17.5cqw, 70.259px);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: var(--hero-sp-strawberry-cbr-aspect);
    left: auto;
    top: auto;
    right: var(--hero-sp-strawberry-cbr-right);
    bottom: var(--hero-sp-strawberry-cbr-bottom);
  }

  .hero__fruit--strawberry-cbr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--muscat-blur-cb {
    --r: 0deg;
    --fruit-w: clamp(60px, 19.45cqw, 78px);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 213 / 208;
    left: auto;
    top: auto;
    right: var(--hero-sp-muscat-blur-cb-right);
    bottom: var(--hero-sp-muscat-blur-cb-bottom);
  }

  .hero__fruit--muscat-blur-cb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero__fruit--muscat-bunch-br {
    --r: 0deg;
    --fruit-w: clamp(150px, 52.99cqw, 212.66px);
    width: var(--fruit-w);
    height: auto;
    aspect-ratio: 846 / 863;
    left: auto;
    top: auto;
    right: -34.82%;
    bottom: -12.35%;
    z-index: 1;
  }

  .hero__fruit--muscat-bunch-br img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

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

  /* 共通見出しは SP も縦書き（Figma 14:172 / 51:628 など） */
  .section__heading {
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
    align-self: auto;
  }

  .section__heading h2 {
    display: block;
    width: 16px;
    font-size: 14px;
    line-height: 1.2;
    writing-mode: vertical-rl;
    font-feature-settings: "vert" 1;
    letter-spacing: var(--letter-spacing-vertical-title);
  }

  .section__heading-line {
    flex: none;
    align-self: stretch;
    width: 3px;
    min-width: 3px;
    height: auto;
    min-height: 0;
    background: var(--color-heading-line);
  }

  /* Services SP：上にはみ出す装飾を見切れさせない */
  .section.section--services {
    overflow: visible;
  }

  /* Services SP：ピンク100%幅・1枚目カードが境界をまたぐ */
  .section--services::before {
    left: 50%;
    right: auto;
    width: 100vw;
    height: calc(
      var(--services-sp-cream-depth) + var(--services-sp-band-inset)
    );
    transform: translateX(-50%);
  }

  .section--services .services-band {
    top: calc(var(--services-sp-cream-depth) + var(--services-sp-band-inset));
    bottom: 0;
    left: 50%;
    width: 100vw;
    max-width: none;
    height: auto;
    min-height: 0;
    transform: translateX(-50%);
  }

  .section--services .services-wave--bottom {
    display: block;
    margin-top: -2px;
  }

  .section__inner--services {
    justify-content: center;
    padding: 0 0 40px;
  }

  .services-stage {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(100%, var(--services-sp-stage-max-width));
    margin-inline: auto;
    padding: var(--services-sp-cream-depth) 20px 0 16px;
    overflow: visible;
  }

  .section--services .section__heading {
    flex-shrink: 0;
    margin-top: 0;
  }

  .section--services .section__body {
    flex: 0 0 auto;
    width: var(--section-sp-body-width);
    min-width: 0;
    max-width: min(100%, var(--section-sp-body-width));
  }

  .services-cards {
    flex-flow: column nowrap;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: var(--services-sp-card-max-width);
  }

  .services-decoration--plum {
    top: -8px;
    right: var(--services-sp-strawberry-right);
    left: auto;
    z-index: 0;
    width: 87px;
    transform: rotate(-16.22deg);
  }

  .service-card {
    position: relative;
    z-index: 2;
    flex: none;
    width: 100%;
    max-width: var(--services-sp-card-max-width);
  }

  .service-card__title {
    font-size: var(--services-sp-card-title-size);
    line-height: 1.6;
    letter-spacing: 1px;
    white-space: normal;
  }

  /* Members SP（Figma 86:1277 — pl 16 / pr 20 / カード 300px） */
  .members-decoration--grape {
    display: none;
  }

  .members-decoration--muscat {
    top: -55px;
    left: 45px;
    width: 77px;
  }

  .section.section--members {
    padding-block: 40px;
    padding-inline: var(--about-sp-padding-inline-start)
      var(--about-sp-padding-inline-end);
  }

  .section__inner--members {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(100%, var(--services-sp-stage-max-width));
    margin-inline: auto;
    padding: 0 20px 0 16px;
  }

  .section--members .section__heading {
    flex-shrink: 0;
  }

  .section--members .section__body {
    flex: 0 0 auto;
    width: var(--section-sp-body-width);
    min-width: 0;
    max-width: min(100%, var(--section-sp-body-width));
  }

  .members-note {
    display: none;
  }

  .member-cards {
    flex-flow: column nowrap;
    align-items: center;
    gap: 0;
    width: 100%;
  }

  .member-card {
    flex: none;
    width: 100%;
    max-width: var(--members-sp-card-max-width);
    gap: 0;
  }

  .member-card__photo {
    width: min(226.5px, 56.34vw);
  }

  .member-card__bio {
    text-align: left;
  }

  .member-card__name {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Shop SP（Figma 64:854 / 51:690） */
  .shop-decoration {
    top: -4%;
    right: max(16px, 9.264vw);
    width: 163px;
  }

  .section__inner--shop {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 40px 16px;
  }

  .section--shop .section__heading {
    flex-shrink: 0;
  }

  .section--shop .section__body {
    flex: 0 0 auto;
    width: var(--section-sp-body-width);
    min-width: 0;
    max-width: min(100%, var(--section-sp-body-width));
  }

  .shop-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-width: 100%;
  }

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

  .shop-banner__image {
    width: 100%;
    height: auto;
  }

  .shop-text {
    flex: none;
    width: 100%;
    max-width: 100%;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
  }

  .shop-text__title {
    font-size: var(--shop-sp-title-size);
    letter-spacing: 1px;
    line-height: 1.8;
    white-space: normal;
  }

  .shop-text__desc {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 2;
    letter-spacing: var(--letter-spacing-body-15);
  }

  .shop-wave--top {
    aspect-ratio: var(--services-wave-aspect);
    min-height: 0;
  }

  /* Footer SP（Figma 86:1323） */
  .site-footer {
    padding-block: var(--footer-sp-padding-block);
    padding-inline: var(--footer-sp-padding-inline);
  }

  .site-footer__main {
    flex-direction: column;
    gap: var(--footer-sp-main-gap);
  }

  .site-footer__menu {
    flex-direction: column;
    align-items: center;
    gap: var(--footer-sp-menu-gap);
    width: 100%;
    padding-block: var(--footer-sp-menu-padding-block);
  }

  .site-footer__nav {
    flex-direction: column;
    align-items: center;
    gap: var(--footer-sp-nav-gap);
    width: 100%;
  }

  .site-footer__link {
    text-align: center;
  }

  .site-footer__divider {
    width: var(--footer-sp-divider-width);
    height: var(--footer-sp-divider-height);
    border-radius: 1px;
    background: var(--color-heading-line);
    opacity: 1;
  }

  .site-header {
    position: relative;
    z-index: 1001;
    justify-content: flex-end;
    min-height: 56px;
    padding: 16px;
    background: var(--color-bg);
  }

  /* 開いているときはヘッダー帯を消し、緑パネル上の×だけ使う（Figma 14:394） */
  body.is-nav-open .site-header {
    background: transparent;
    pointer-events: none;
  }

  body.is-nav-open .site-header__menu {
    visibility: hidden;
  }

  .site-header__menu {
    display: flex;
    pointer-events: auto;
  }

  .site-header__nav,
  .site-header__contact {
    display: none;
  }
}

@media (max-width: 600px) {
  .section:not(.section--about):not(.section--services):not(
      .section--members
    ):not(.section--shop) {
    padding: 48px 20px;
  }

  .section.section--about {
    padding-top: var(--about-sp-padding-top);
    padding-bottom: var(--about-sp-padding-bottom);
    padding-inline: var(--about-sp-padding-inline-start)
      var(--about-sp-padding-inline-end);
  }
}

/* Footer PC（Figma 11:570） */
@media (min-width: 901px) {
  .site-footer {
    padding-block: var(--footer-pc-padding-block);
    /* 狭い幅では 24px、1440px 超で Figma 相当の余白 */
    padding-inline: max(
      24px,
      calc((100vw - min(100vw, var(--page-max-width))) / 2)
    );
  }

  .site-footer__main {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 4vw, var(--footer-pc-main-gap));
  }

  .site-footer__menu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, var(--footer-pc-menu-gap));
    padding-block: var(--footer-sp-menu-padding-block);
  }

  .site-footer__nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 2vw, var(--footer-pc-nav-gap));
  }

  .site-footer__divider {
    width: 1px;
    height: 19px;
    border-radius: 0;
    background: var(--color-text);
    opacity: 0.3;
  }
}

/* Footer：901〜1200px（ナビが折り返しても見切れない） */
@media (min-width: 901px) and (max-width: 1200px) {
  .site-footer__main {
    max-width: 100%;
  }

  .site-footer__link,
  .site-footer__contact {
    white-space: normal;
    text-align: center;
  }
}