* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  background: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  --font: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.kd-serif {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.kd-vert {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ====== Hero opening animation ====== */
.kd-opening {
  position: relative;
  width: 100%;
  height: 95vh;
  overflow: hidden;
  background: #ffffff;
}
.kd-opening__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50vh;
  background: #f53c08;
  z-index: 1;
}
.kd-opening__bar--top {
  top: 0;
}
.kd-opening__bar--bottom {
  bottom: 0;
}
.kd-opening__band {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 40vh;
  background: #ffffff;
  transform-origin: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
/* JS が読み込まれる前の一瞬の見切れを防ぐ */
.kd-opening__bar,
.kd-opening__band,
.kd-opening__title,
.kd-opening__sub,
.kd-opening__scroll {
  visibility: hidden;
}
.kd-opening__title {
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(26px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
}
.kd-opening__sub {
  margin: 0;
  padding-top: 5%;
  color: #000000;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(14px, 1.8vw, 24px);
  letter-spacing: 0.3em;
  line-height: 1;
  text-align: center;
}

/* ── scroll インジケーター（中央配置）── */
.kd-opening__scroll {
  position: absolute;
  left: 0;
  bottom: clamp(24px, 5vh, 60px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
}
.kd-opening__scroll-text {
  font-family: var(--font);
  font-weight: 900;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
}
.kd-opening__scroll-line {
  width: 1px;
  height: clamp(40px, 6vh, 68px);
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.kd-opening__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: rgba(255, 255, 255, 0.9);
  animation: scroll-line 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ====== Hero band (legacy) ====== */
.kd-hero {
  background: #f53c08;
  color: #ffffff;
  text-align: center;
  padding: clamp(32px, 4.5vw, 54px) clamp(16px, 2vw, 24px)
    clamp(36px, 5vw, 60px);
  position: relative;
}
.kd-hero .kd-eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.3em;
  opacity: 0.9;
  margin-bottom: 14px;
}
.kd-hero h1 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(22px, 3.7vw, 44px);
  letter-spacing: 0.18em;
  line-height: 1.5;
}
.kd-hero h1 .kd-dot {
  color: #ffd7a3;
}
.kd-hero .kd-sub {
  margin-top: 18px;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.3em;
  opacity: 0.92;
}
.kd-hero .kd-ornament {
  display: inline-block;
  margin: 18px 0 4px;
  color: #ffd7a3;
  letter-spacing: 0.4em;
  font-size: 10px;
}

/* ====== Section: Story (rice in hands) ====== */
.kd-story {
  padding: 0 clamp(16px, 2vw, 24px) clamp(24px, 3.3vw, 40px);
  max-width: 1100px;
  margin: 0 auto;
}
.kd-story-1 {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 0;
  align-items: center;
  position: relative;
}
.kd-story-1 .kd-photo {
  grid-column: 1;
  aspect-ratio: 16/12;
  overflow: hidden;
}
.kd-story-1 .kd-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ── スクロールフェードイン（GSAP で解除）── */
.kd-caption {
  opacity: 0;
  transform: translateX(60px);
}
.kd-text {
  opacity: 0;
  transform: translateY(20px);
}

.kd-story-1 .kd-caption {
  grid-column: 2;
  padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2.3vw, 28px);
  margin-left: -50%;
  align-self: end;
  margin-bottom: 30%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px -25px rgba(60, 40, 20, 0.25);
  position: relative;
  z-index: 2;
  max-width: 320px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(0.75rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  line-height: 2.1;
}

/* ====== Section: Rice field + circle ====== */
.kd-field {
  max-width: 1100px;
  margin: clamp(60px, 10vw, 120px) auto 0;
  padding: 0 clamp(16px, 2vw, 24px);
  display: grid;
  grid-template-columns: clamp(140px, 25vw, 280px) 1fr;
  gap: clamp(10px, 4.2vw, 50px);
  align-items: stretch;
  position: relative;
}
.kd-field .kd-ph {
  aspect-ratio: 4/8;
  overflow: hidden;
  z-index: 3;
}
.kd-field .kd-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kd-field .kd-text {
  position: relative;
  padding: clamp(18px, 2.5vw, 30px) 0 0 clamp(18px, 2.5vw, 30px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.kd-field .kd-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.kd-field .cloud {
  position: absolute;
  display: block;
  opacity: 0;
  transform: translateY(20px);
}
.kd-field .cloud--1 {
  top: 10%;
  right: 0;
  width: clamp(160px, 30vw, 340px);
}
.kd-field .cloud--2 {
  bottom: 10%;
  right: 5%;
  width: clamp(100px, 20vw, 220px);
}
.kd-field .kd-text-inner {
  position: relative;
  z-index: 1;
  max-width: 380px;
}
.kd-field .kd-text-inner p {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(0.78rem, 1vw, 1rem);
  line-height: 2.1;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* ====== Section: takoyaki ====== */
.kd-tako {
  max-width: 1100px;
  margin: clamp(72px, 11.3vw, 136px) auto clamp(140px, 25vw, 300px) auto;
  padding: 0 clamp(16px, 2vw, 24px);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: stretch;
}
.kd-tako .kd-text {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(0.78rem, 1vw, 1rem);
  line-height: 2.1;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: center;
  opacity: 0;
  transform: translateX(-60px);
}
.kd-tako .kd-ph {
  aspect-ratio: 16/4;
  overflow: hidden;
}
.kd-tako .kd-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====== Section: rice flour wide ====== */
.kd-flour {
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(140px, 25vw, 300px);
  padding: 0 clamp(16px, 2vw, 24px);
  text-align: center;
}
.kd-flour .kd-ph {
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: clamp(20px, 3vw, 36px);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kd-flour p {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(0.78rem, 1vw, 1rem);
  line-height: 2.2;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(40px);
}

/* ====== Orange divider band ====== */
.kd-band {
  margin-top: clamp(60px, 10vw, 120px);
  color: #fff;
  text-align: center;
  padding: clamp(28px, 3.8vw, 46px) clamp(16px, 2vw, 24px);
  background-color: #f53c08;
}
.kd-band .kd-en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.4em;
  opacity: 0.85;
  display: block;
  margin-bottom: 8px;
}
.kd-band h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(18px, 2.3vw, 28px);
  letter-spacing: 0.3em;
}

/* ====== Three details ====== */
.kd-details {
  background: #ffffff;
  color: #000000;
  padding: clamp(48px, 7.5vw, 90px) clamp(16px, 2vw, 24px)
    clamp(60px, 9.2vw, 110px);
}
.kd-row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7.5vw, 90px);
}

/* ---- 卵 ---- */
.kd-egg {
  display: flex;
  gap: clamp(28px, 5vw, 60px);
}
.kd-row.kd-reverse .kd-ph {
  order: 2;
}
.kd-egg-ph {
  max-width: 600px;
  aspect-ratio: 4/4;
  overflow: hidden;
}
.kd-egg-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kd-egg-text {
  display: flex;
  flex-direction: column;
  margin-top: clamp(40px, 6.7vw, 80px);
}
.kd-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #f5b19a;
  font-size: clamp(0.82rem, 1vw, 1rem);
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 14px;
}
.kd-egg-text h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  color: #000000;
}
.kd-egg-text .kd-ja-sub {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(0.82rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: #c9bfaa;
  display: flex;
}
.kd-egg-text p {
  font-size: clamp(11px, 1.08vw, 13px);
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: #c9bfaa;
  margin-bottom: 18px;
}
.kd-egg-text .kd-stamp {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-top: auto;
  margin-bottom: 40px;
}
.kd-egg-text .kd-stamp img {
  max-width: clamp(140px, 20vw, 240px);
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
}
.kd-egg-text .kd-stamp-meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #c9bfaa;
  line-height: 1.8;
}
.kd-stamp img:nth-child(2) {
  position: relative;
  top: 20px; /* 下にずらす量 */
  margin-left: -140px; /* 左に重ねる量 */
  transform: rotate(15deg); /* 右に傾ける角度 */
}

/* ---- 米粉・米油 ---- */
.kd-rice,
.kd-oil {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.kd-rice {
  flex-direction: row-reverse;
  position: relative;
  z-index: 1;
}
.kd-rice-text {
  flex: 1;
  margin-left: 20%;
}
.kd-rice-photo {
  flex: 0 0 45%;
  margin-bottom: -150px;
}
.kd-rice-photo img {
  width: 100%;
  max-width: 450px;
  aspect-ratio: 6 / 8;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: translateX(60px);
}

.kd-oil {
  position: relative;
  z-index: 0;
}
.kd-oil-photo {
  flex: 0 0 45%;
  margin-top: -150px;
  position: relative;
  z-index: 2;
}
.kd-oil-photo img {
  width: 100%;
  max-width: 450px;
  aspect-ratio: 6 / 8;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: translateX(-60px);
}
.kd-oil-text {
  flex: 1;
  padding: clamp(28px, 4vw, 48px) 0 0 clamp(28px, 4vw, 48px);
  align-self: flex-end;
}

/* ---- 共通テキスト ---- */
.kd-rice-text h3,
.kd-oil-text h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing: 0.14em;
  color: #000000;
  margin: 8px 0 18px;
}
.kd-rice-text p,
.kd-oil-text p {
  font-size: clamp(11px, 1.08vw, 13px);
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: #c9bfaa;
  margin: 0;
}

/* ================================================================
   CTA ボタンセクション (hero-cta)
   ================================================================ */
.hero-cta {
  background: #ffffff;
  padding: 136px 0 272px;
}

.hero-cta__inner {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  gap: 48px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── ボタン共通 ── */
.hero-cta-btn {
  display: flex;
  align-items: center;
  height: 96px;
  width: 400px;
  max-width: 100%;
  border-radius: 92px;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.18s,
    transform 0.25s;
}

.hero-cta-btn:hover {
  opacity: 0.88;
  transform: scale(1) translateY(-3px);
}

/* ── 塗りバリアント ── */
.hero-cta-btn--filled {
  background: #ee6c1a;
}

/* ── 枠線バリアント ── */
.hero-cta-btn--outline {
  background: #ffffff;
  border: 2px solid #ee6c1a;
}

/* ── 左アイコン ── */
.hero-cta-btn__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 130px;
  height: 100%;
}

.hero-cta-btn__icon {
  max-height: 96px;
  width: auto;
  display: block;
}

.hero-cta-btn__icon--tabelog {
  max-height: 63px;
  max-width: 100px;
}

/* ── 縦仕切り線 ── */
.hero-cta-btn__divider {
  display: block;
  width: 1px;
  height: 69px;
  flex-shrink: 0;
}

.hero-cta-btn--filled .hero-cta-btn__divider {
  background: rgba(255, 255, 255, 0.5);
}

.hero-cta-btn--outline .hero-cta-btn__divider {
  background: rgba(238, 108, 26, 0.35);
}

/* ── ラベル ── */
.hero-cta-btn__label {
  flex: 1;
  text-align: center;
  font-family: var(--font);
  font-weight: 900;
  font-size: 1.2rem;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.212;
}

.hero-cta-btn--filled .hero-cta-btn__label {
  color: #ffffff;
}

.hero-cta-btn--outline .hero-cta-btn__label {
  color: #292220;
}

/* ── 矢印サークル ── */
.hero-cta-btn__arrow {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  margin-right: 20px;
  display: block;
}

/* ── レスポンシブ ── */
@media (max-width: 986px) {
  .hero-cta__inner {
    gap: 24px;
  }
  .hero-cta-btn {
    width: calc(50% - 12px);
    min-width: 320px;
  }
  .hero-cta-btn__label {
    font-size: 20px;
  }
  .hero-cta-btn__icon-wrap {
    width: 100px;
  }
  .hero-cta-btn__icon--tabelog {
    width: 80px;
  }
  .hero-cta-btn__arrow {
    width: 36px;
    height: 36px;
    margin-right: 14px;
  }
  .kd-stamp img:nth-child(2) {
    position: relative;
    top: 20px; /* 下にずらす量 */
    margin-left: -100px; /* 左に重ねる量 */
  }
}

@media (max-width: 720px) {
  .hero-cta {
    padding: 40px 0 48px;
  }
  .hero-cta__inner {
    gap: 12px;
  }
  .hero-cta-btn {
    width: auto;
    min-width: 0;
    flex-shrink: 1;
    height: clamp(56px, 9vw, 96px);
  }
  .hero-cta-btn__icon-wrap {
    width: clamp(44px, 8vw, 100px);
  }
  .hero-cta-btn__icon,
  .hero-cta-btn__icon--tabelog {
    max-height: clamp(28px, 5vw, 64px);
    max-width: clamp(28px, 5vw, 64px);
  }
  .hero-cta-btn__label {
    font-size: clamp(11px, 2.2vw, 20px);
    padding-inline: clamp(6px, 1vw, 12px);
  }
  .hero-cta-btn__arrow {
    width: clamp(24px, 4vw, 44px);
    height: clamp(24px, 4vw, 44px);
    margin-right: clamp(8px, 1.5vw, 14px);
  }
}
@media (max-width: 400px) {
  .hero-cta__inner {
    flex-direction: column;
    align-items: center;
  }
  .hero-cta-btn {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 730px) {
  /* 米粉：縦積み（画像上・テキスト下）、重なりマージンをリセット */
  .kd-rice {
    flex-direction: column;
    align-items: stretch;
  }
  .kd-rice-photo {
    flex: none;
    width: 100%;
    margin-bottom: 0;
  }
  .kd-rice-photo img {
    max-width: 100%;
    aspect-ratio: 3 / 2;
  }
  .kd-rice-text {
    padding-top: 20px;
    margin: 0;
  }

  /* 米油：縦積み（画像上・テキスト下）、重なりマージンをリセット */
  .kd-oil {
    flex-direction: column;
    align-items: stretch;
  }
  .kd-oil-photo {
    flex: none;
    width: 100%;
    margin-top: 0;
  }
  .kd-oil-photo img {
    max-width: 100%;
    aspect-ratio: 3 / 2;
  }
  .kd-oil-text {
    padding: 20px 0 0;
    align-self: auto;
  }
}

/* ============================================================
   690px以下：.kd-rice / .kd-oil のみ縦積みに変更
   それ以外のレイアウトはすべてそのまま
   ============================================================ */
@media (max-width: 690px) {
  .kd-story-1 {
    grid-template-columns: 1fr; /* 1列に変更 → 右の余白が消える */
    overflow: visible;
  }

  .kd-story-1 .kd-photo {
    grid-column: 1;
    grid-row: 1;
    position: relative;
  }

  .kd-story-1 .kd-caption {
    grid-column: 1;
    grid-row: 1; /* photoと同じセルに重ねる */
    position: absolute;
    bottom: -8vw;
    right: 0;
    margin: 0 0 16px 0;
    align-self: unset;
    max-width: 52%;
    font-size: clamp(0.65rem, 3.5vw, 0.85rem);
  }

  /* 米粉：縦積み（画像上・テキスト下）、重なりマージンをリセット */
  .kd-rice {
    flex-direction: column;
    align-items: stretch;
  }
  .kd-rice-photo {
    flex: none;
    width: 100%;
    margin-bottom: 0;
  }
  .kd-rice-photo img {
    max-width: 100%;
    aspect-ratio: 3 / 2;
  }
  .kd-rice-text {
    padding-top: 20px;
  }

  /* 米油：縦積み（画像上・テキスト下）、重なりマージンをリセット */
  .kd-oil {
    flex-direction: column;
    align-items: stretch;
  }
  .kd-oil-photo {
    flex: none;
    width: 100%;
    margin-top: 0;
  }
  .kd-oil-photo img {
    max-width: 100%;
    aspect-ratio: 3 / 2;
  }
  .kd-oil-text {
    padding: 20px 0 0;
    align-self: auto;
  }
}
@media (max-width: 490px) {
  .kd-story-1 .kd-caption {
    position: absolute;
    bottom: -20vw;
    max-width: 70%;
    font-size: clamp(0.65rem, 3.5vw, 0.85rem);
  }
  .kd-field .cloud--1 {
    width: clamp(100px, 40vw, 200px);
  }
  .kd-field .cloud--2 {
    width: clamp(70px, 28vw, 140px);
  }
}

@media (max-width: 480px) {
  .kd-field .kd-text-inner {
    padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2.3vw, 28px);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 40px 30px rgba(255, 255, 255, 0.9);
  }
}