/* 谷口ファーム（架空）— 3Dの田んぼのFV */

:root {
  --ink: #1f3320;          /* 文字（明るい空の上なので濃い緑） */
  --ink-2: #3b5236;
  --paper: #fbfaf3;
  --gold: #c9a43e;         /* 稲穂の金 */
  --green: #2f5a1e;

  --font-mincho: "Shippori Mincho B1", serif;
  --font-gothic: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Cormorant Garamond", serif;

  --side: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

body {
  background: #dfe9ec;
  color: var(--ink);
  font-family: var(--font-gothic);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

/* 風になびく文字：根元（下の真ん中）を軸に回す */
.wind-char {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform;
}

.wind-glue { white-space: nowrap; }

/* ヘッダー */
.site-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--side);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo__mark {
  width: 22px;
  height: 34px;
  color: var(--gold);
}

.logo__jp {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .08em;
}

.logo__en {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 700;
}

.nav a:hover { color: var(--green); }

.nav__cta,
.button {
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transition: background .3s;
}

.nav__cta:hover,
.button:hover { background: var(--green); color: var(--paper) !important; }

/* FV */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: start;
  padding: 120px var(--side) 0;
  overflow: hidden;
  cursor: pointer;
  user-select: none; /* 連打で文字が選択されないように */
  /* WebGLが使えないときの背景（空と田んぼ） */
  background: linear-gradient(#5b9bd5 0%, #cfe0ea 45%, #e9eadb 55%, #b7b25a 70%, #4f6a2a 100%);
}

.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__body {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
}

.hero__badge {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.hero__title {
  /* 文字は main.js の STRETCH（2.2倍）で上へ伸ばす。伸びたぶん、上の余白と行の高さを広くとる */
  margin-top: 1.1em;
  position: relative;
  top: 30px; /* キャッチだけ下げる（まわりの配置は動かさない） */
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: clamp(30px, min(5.2vw, 7.4svh), 80px);
  line-height: 2.2;
  letter-spacing: .08em; /* 揺れても隣の文字の頭とぶつからないよう、少し広め */
}

.hero__lead {
  max-width: 34em;
  margin-top: 34px; /* キャッチを下げたぶん、説明文との間をあける */
  font-size: 15px;
  font-weight: 500;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
}

.button { padding: 13px 30px; }

.link {
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

.hero__hint {
  position: absolute;
  right: var(--side);
  bottom: 20px;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--paper);
}

/* タブレット幅：メニューが折り返さないよう、注文ボタンだけにする */
@media (max-width: 1000px) {
  .nav a:not(.nav__cta) { display: none; }
  .logo__en { display: none; }
}

@media (max-width: 760px) {
  .hero { padding-top: 96px; }
  .hero__title { margin-top: 1.4em; font-size: 27px; letter-spacing: .04em; } /* 2行に収める */
  .link { display: none; }
  .hero__actions { flex-wrap: wrap; gap: 14px 20px; }
  .hero__hint { left: var(--side); right: auto; }
}