@charset "UTF-8";
/* ==========================================================================
   FUNAYAMA FARM
   PC (>=1200px) : 1920px デザイン(舟山農場_HP_b.pdf)を基準に、座標をそのまま再現。
                   画面幅 1920px 未満では全体を等比縮小（--u = 1デザインpx）。
   SP (<1200px)  : 世界観を保ったまま縦積みに再配置。
   ========================================================================== */

:root {
  --c-brown: #8f8371;
  --c-dark: #1c1b18;
  --c-gold: #b18d62;
  --c-nav: #a18d78;
  --c-catch: #9a8875;
  --c-title: #30271e;
  --c-text: #1a1918;
  --c-white: #fff;
  --c-underline: #b09f8a;

  --f-en: "news-gothic-std", "News Gothic Std", "Roboto", "Helvetica Neue", Arial, sans-serif; /* デザイン指定: News Gothic Std Bold（Adobe Fonts）。未導入環境では幅の近い Roboto で代替 */
  --f-ja: "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

  /* 1デザインpx。.site(コンテナ)の幅を基準にするのでスクロールバー幅の影響を受けない */
  --u: min(1px, 100cqw / 1920);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-dark);
  color: var(--c-text);
  font-family: var(--f-ja);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: inherit; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site { container-type: inline-size; position: relative; overflow-x: clip; }

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */
.sec { position: relative; }
.sec--brown { background: var(--c-brown) center / cover no-repeat; }
.sec--dark { background: var(--c-dark); }

.about  { background-image: image-set(url("../img/bg-about.avif") type("image/avif"), url("../img/bg-about.jpg") type("image/jpeg")); }
.rice   { background-image: image-set(url("../img/bg-rice.avif") type("image/avif"), url("../img/bg-rice.jpg") type("image/jpeg")); }
.access { background-image: image-set(url("../img/bg-access.avif") type("image/avif"), url("../img/bg-access.jpg") type("image/jpeg")); }

.sec-title {
  font-family: var(--f-en);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-title);
  line-height: 1;
}
.sec-sub { color: var(--c-text); }
.sec-body { color: var(--c-text); }
.textblock--light .sec-title,
.textblock--light .sec-sub,
.textblock--light .sec-body { color: var(--c-white); }
.textblock--light .sec-body { font-weight: 600; }

.sec-body a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color .2s; }
.sec-body a:hover { text-decoration-color: currentColor; }

/* 写真3点組（小2＋大1）。デザイン上の比率 683.36 × 412.49 */
.photos {
  position: relative;
  aspect-ratio: 683.36 / 412.49;
}
.photos > * { position: absolute; overflow: hidden; }
.photos img { width: 100%; height: 100%; object-fit: cover; }
.photos__s1 { left: 0; top: 0; width: 29.267%; height: 48.486%; }
.photos__s2 { left: 0; top: 51.512%; width: 29.267%; height: 48.486%; }
.photos__l  { left: 31.106%; top: 0; width: 68.894%; height: 100%; }


.access__map { display: block; }
.access__map img { transition: opacity .25s; }
.access__map:hover img { opacity: .85; }

/* --------------------------------------------------------------------------
   SP / Tablet (< 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  /* 改行位置はデザインと同じ。画面に収まらない行だけ文節単位で折り返す */

  .stage { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 20px; }

  /* Header */
  .header { position: absolute; inset: 0 0 auto; z-index: 50; }
  .header__stage { max-width: none; padding: 0; }
  .header__logo { position: absolute; left: 16px; top: 14px; width: 116px; }

  .menu-btn {
    position: fixed; right: 12px; top: 12px; z-index: 60;
    width: 48px; height: 48px; border: 1px solid rgba(177,141,98,.6); border-radius: 50%;
    background: rgba(28,27,24,.82); cursor: pointer; padding: 0;
    display: grid; place-content: center; gap: 5px;
  }
  .menu-btn span { display: block; width: 20px; height: 2px; background: var(--c-gold); transition: transform .3s, opacity .3s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .gnav {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(28,27,24,.97);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .gnav.is-open { opacity: 1; visibility: visible; }
  .gnav__list { text-align: center; }
  .gnav__list a {
    display: inline-block; padding: 14px 8px;
    font-family: var(--f-en); font-weight: 700; font-size: 24px; letter-spacing: .2em; color: var(--c-nav);
  }
  .gnav__list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-underline); text-decoration-thickness: 3px; text-underline-offset: 9px; }
  body.is-menu-open { overflow: hidden; }

  /* Hero */
  .hero {
    position: relative;
    min-height: 560px; height: 100svh; max-height: 820px;
    background: var(--c-dark) url("../img/bg-hero.jpg") 50% 50% / cover no-repeat;
  }
  .hero__stage { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 40px; }
  .hero__mark { position: relative; width: min(92%, 560px); }
  .hero__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .hero__catch {
    margin-top: 6%;
    font-family: var(--f-en); font-weight: 700; color: var(--c-catch);
    font-size: clamp(18px, 5.4vw, 30px); letter-spacing: .1em; line-height: 1.38; text-align: center;
    padding-left: .1em;
  }

  /* セクション共通 */
  .sec { padding: 72px 0 80px; }
  .sec-title { font-size: clamp(32px, 9vw, 44px); }
  .sec-sub { margin-top: 12px; font-size: 15px; line-height: 1.5; letter-spacing: .03em; }
  .stars { width: 86px; margin-top: 16px; }
  .sec-body { margin-top: 20px; font-size: 15px; line-height: 1.95; letter-spacing: .03em; word-break: auto-phrase; text-wrap: pretty; }
  .photos { margin-top: 36px; }

  /* Tohma */
  .tohma { z-index: 3; padding-bottom: 40px; }
  .tohma .stage { display: flex; flex-direction: column; position: relative; }
  .tohma .textblock { order: 1; position: relative; }
  .tohma__photo { order: 2; margin-top: 36px; }
  .tohma__postcard { order: 3; width: 72%; max-width: 360px; align-self: flex-end; margin: -28px -6px -72px 0; position: relative; }
  .tohma__map { position: absolute; right: 8px; top: -52px; width: 54%; max-width: 330px; pointer-events: none; }
  .tohma__map-label {
    position: absolute; left: 36.8%; top: 31.5%;
    font-size: clamp(10px, 2.6vw, 12.5px); letter-spacing: .06em; color: var(--c-text); line-height: 1; white-space: nowrap;
  }
  .rice { z-index: 1; padding-top: 104px; }

  /* Gallery */
  .gallery { padding: 64px 0; }
  .gallery__list { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 600px) {
    .header__logo { width: 150px; left: 24px; top: 20px; }
    .stage { padding: 0 32px; }
    .sec-sub { font-size: 16px; }
    .sec-body { font-size: 17px; }
    .stars { width: 96px; }
    .tohma__map { width: 40%; max-width: 280px; top: -64px; right: 24px; }
  }
  .gallery__item { aspect-ratio: 1; overflow: hidden; }
  .gallery__item img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 600px) {
    .gallery__list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  }

  /* Access */
  .access__info a[href^="mailto"] { overflow-wrap: anywhere; }

  /* Footer */
  .footer {
    padding: 64px 0 40px;
    background: var(--c-dark) image-set(url("../img/bg-footer.avif") type("image/avif"), url("../img/bg-footer.jpg") type("image/jpeg")) 50% 50% / cover no-repeat;
  }
  .footer .stage { display: flex; flex-direction: column; align-items: center; }
  .footer__logo { order: 1; width: min(84%, 420px); }
  .fnav { order: 2; margin-top: 36px; }
  .fnav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
  .fnav a { display: inline-block; padding: 6px 0; font-family: var(--f-en); font-weight: 700; font-size: 17px; letter-spacing: .2em; color: var(--c-nav); opacity: .91; }
  .footer__copy { order: 3; margin-top: 28px; font-family: var(--f-en); font-weight: 400; font-size: 12px; letter-spacing: .075em; color: var(--c-nav); text-align: center; }
  .footer__copy small { font-size: inherit; }
}

/* --------------------------------------------------------------------------
   PC (>= 1200px) : 1920px デザイン座標を再現
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .menu-btn { display: none; }
  .pc-br { display: inline; }

  /* 1920 × section-height のステージ。子要素はデザイン座標(px)×--u で絶対配置 */
  .stage { position: relative; width: calc(1920 * var(--u)); height: 100%; margin: 0 auto; }
  .stage > *, .textblock > * { position: absolute; }

  /* 位置指定ヘルパー：--x, --y(上端), --w, --h をデザインpxで指定 */
  .stage > *, .textblock > *, .header__stage > *, .gnav__item {
    left: calc(var(--x, 0) * var(--u));
    top: calc(var(--y, 0) * var(--u));
  }
  /* テキストはベースライン(--b)と、行頭からベースラインまでの距離(--asc)で配置 */
  .sec-title, .sec-sub, .sec-body, .hero__catch, .gnav__item, .fnav li, .footer__copy, .tohma__map-label {
    top: calc((var(--b) - var(--asc)) * var(--u));
  }

  .textblock { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
  .textblock > * { pointer-events: auto; }

  .sec-title { font-size: calc(50 * var(--u)); --asc: 42; white-space: nowrap; }
  .sec-sub   { font-size: calc(22 * var(--u)); line-height: calc(32 * var(--u)); --asc: 24; white-space: nowrap; letter-spacing: .02em; }
  .sec-body  { font-size: calc(22 * var(--u)); line-height: calc(32.01 * var(--u)); --asc: 24; white-space: nowrap; letter-spacing: .02em; }
  .stars     { width: calc(128.5 * var(--u)); }

  /* ---------- Header ---------- */
  .header { position: absolute; left: 0; right: 0; top: 0; z-index: 50; height: 0; }
  .header__stage { height: 0; }
  .header__logo { --x: 40; --y: 40; width: calc(330.67 * var(--u)); }
  .gnav { position: absolute; left: 0; top: 0; }
  .gnav__item { position: absolute; --b: 75.37; --asc: 21; }
  .gnav__item--home    { --x: 579.25; }
  .gnav__item--rice    { --x: 823.47; }
  .gnav__item--contact { --x: 1050.62; }
  .gnav__item--access  { --x: 1347.59; }
  .gnav__item a {
    position: relative; display: block;
    font-family: var(--f-en); font-weight: 700; font-size: calc(25 * var(--u)); line-height: 1;
    letter-spacing: .2em; color: var(--c-nav); white-space: nowrap;
  }
  .gnav__item a::after {
    content: ""; position: absolute;
    left: calc(-4.5 * var(--u)); right: 0; top: calc((83.75 - 75.37 + 21) * var(--u)); height: calc(4.5 * var(--u));
    background: var(--c-underline);
    transform: scaleX(0); transform-origin: left; transition: transform .3s;
  }
  .gnav__item a[aria-current="page"]::after,
  .gnav__item a:hover::after { transform: scaleX(1); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; height: calc(977 * var(--u));
    background: var(--c-dark) url("../img/bg-hero.jpg") 50% 0 / cover no-repeat;
  }
  .hero__mark { --x: 587.5; --y: 256.5; width: calc(745 * var(--u)); }
  .hero__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .hero__catch {
    left: 0; width: 100%; --b: 849.67; --asc: 39;
    font-family: var(--f-en); font-weight: 700; color: var(--c-catch);
    font-size: calc(38 * var(--u)); line-height: calc(52.53 * var(--u)); letter-spacing: .1em;
    text-align: center; padding-left: .1em;
  }

  /* ---------- About (977–1543) ---------- */
  .about { height: calc(566 * var(--u)); }
  .about .sec-title { --x: 357.66; --b: 139.16; }
  .about .sec-sub   { --x: 357.26; --b: 182.70; }
  .about .stars     { --x: 357.25; --y: 212.50; }
  .about .sec-body  { --x: 357.26; --b: 293.00; }
  .about .photos    { --x: 879.38; --y: 73.52; width: calc(683.36 * var(--u)); }

  /* ---------- Tohma (1543–2108) ---------- */
  .tohma { height: calc(565 * var(--u)); z-index: 3; }
  .tohma__photo { --x: 357.26; --y: 65.45; width: calc(470.79 * var(--u)); height: calc(412.49 * var(--u)); overflow: hidden; }
  .tohma__photo img { width: 100%; height: 100%; object-fit: cover; }
  .tohma__map { --x: 1292.5; --y: -55; width: calc(382 * var(--u)); pointer-events: none; }
  .tohma__map-label {
    position: absolute; left: calc(138.57 * var(--u)); --b: 107.23; --asc: 12;
    font-size: calc(14.54 * var(--u)); line-height: 1; letter-spacing: .06em; color: var(--c-text); white-space: nowrap;
  }
  .tohma .sec-title { --x: 899.61; --b: 105.04; }
  .tohma .sec-sub   { --x: 899.21; --b: 148.60; }
  .tohma .stars     { --x: 899.25; --y: 178.50; }
  .tohma .sec-body  { --x: 899.21; --b: 258.90; letter-spacing: .01em; }
  .tohma__postcard  { --x: 1375.5; --y: 411; width: calc(329.5 * var(--u)); }

  /* ---------- Our Rice (2108–2674) ---------- */
  .rice { height: calc(566 * var(--u)); z-index: 1; }
  .rice .sec-title { --x: 357.66; --b: 137.57; }
  .rice .sec-sub   { --x: 357.26; --b: 181.10; }
  .rice .stars     { --x: 357.25; --y: 210.91; }
  .rice .sec-body  { --x: 357.26; --b: 291.43; }
  .rice .photos    { --x: 879.38; --y: 82.09; width: calc(683.36 * var(--u)); }

  /* ---------- Gallery (2674–3238) ---------- */
  .gallery { height: calc(564 * var(--u)); }
  .gallery__list { left: 0; top: 0; width: 100%; height: 100%; }
  .gallery__item { position: absolute; top: calc(100.61 * var(--u)); width: calc(362.12 * var(--u)); height: calc(362.12 * var(--u)); overflow: hidden; }
  .gallery__item:nth-child(1) { left: calc(357.26 * var(--u)); }
  .gallery__item:nth-child(2) { left: calc(778.94 * var(--u)); }
  .gallery__item:nth-child(3) { left: calc(1200.62 * var(--u)); }
  .gallery__item img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- Access (3238–3804) ---------- */
  .access { height: calc(566 * var(--u)); }
  .access .sec-title { --x: 357.66; --b: 130.76; }
  .access .sec-sub   { --x: 357.26; --b: 174.30; }
  .access .stars     { --x: 357.25; --y: 204.10; }
  .access .access__info { --x: 357.26; --b: 284.60; line-height: calc(32.06 * var(--u)); }
  .access .photos    { --x: 879.38; --y: 61.30; width: calc(683.36 * var(--u)); }

  /* ---------- Footer (3804–4404) ---------- */
  .footer {
    position: relative; height: calc(600 * var(--u));
    background: var(--c-dark) image-set(url("../img/bg-footer.avif") type("image/avif"), url("../img/bg-footer.jpg") type("image/jpeg")) 50% 0 / cover no-repeat;
  }
  .footer__logo { --x: 859.5; --y: 62.5; width: calc(629 * var(--u)); }
  .fnav { left: 0; top: 0; }
  .fnav li { position: absolute; left: calc(512.4 * var(--u)); --asc: 21; }
  .fnav li:nth-child(1) { --b: 218.67; }
  .fnav li:nth-child(2) { --b: 266.27; }
  .fnav li:nth-child(3) { --b: 313.77; }
  .fnav li:nth-child(4) { --b: 361.37; }
  .fnav a {
    display: block; font-family: var(--f-en); font-weight: 700; font-size: calc(25 * var(--u)); line-height: 1;
    letter-spacing: .2em; color: var(--c-nav); opacity: .91; white-space: nowrap; transition: opacity .2s;
  }
  .fnav a:hover { opacity: .6; }
  .footer__copy {
    --x: 512.19; --b: 420.74; --asc: 12;
    font-family: var(--f-en); font-weight: 400; font-size: calc(14 * var(--u)); line-height: 1;
    letter-spacing: .075em; color: var(--c-nav); white-space: nowrap;
  }
  .footer__copy small { font-size: inherit; }
}

/* SVG 弧状テキスト共通 */
.hero__arc text {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 32.81px;
  fill: var(--c-catch);
}

/* スクロール位置調整 */
:target { scroll-margin-top: 0; }

/* --------------------------------------------------------------------------
   ヒーローロゴ 手書きアニメーション（初回表示時に1回）
   html.logo-anim のときだけPNGロゴを隠し、SVGで描画 → 終了後にPNGを表示
   -------------------------------------------------------------------------- */
.hero__draw { position: absolute; inset: 0; pointer-events: none; }
.hero__draw svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__draw path { fill-opacity: 0; stroke: #c29e6c; stroke-linecap: round; stroke-linejoin: round; }
.logo-anim .hero__logo img { opacity: 0; animation: logo-failsafe 0s 6s forwards; }
.logo-anim.logo-anim--done .hero__logo img { opacity: 1; animation: none; }
@keyframes logo-failsafe { to { opacity: 1; } }

/* --------------------------------------------------------------------------
   北海道地図「当麻町」目印の色変化（約2秒周期で繰り返し）
   地図画像はそのままに、同じ位置・形状のSVGを重ねて色だけを変える
   -------------------------------------------------------------------------- */
.tohma__marker {
  --marker-base: #211e1a; /* 地図画像内の目印の色 */
  --marker-accent: #c3302a; /* 変化後の赤 */
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.tohma__marker path {
  fill: var(--marker-base);
  stroke: var(--marker-base); stroke-width: .35; stroke-linejoin: round; /* 画像側の輪郭のにじみを隠す */
  animation: marker-pulse 2s ease-in-out infinite;
}
@keyframes marker-pulse {
  0%, 100% { fill: var(--marker-base); stroke: var(--marker-base); }
  50% { fill: var(--marker-accent); stroke: var(--marker-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .tohma__marker path { animation: none; }
}