@charset "UTF-8";

html, body {
  color: black;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;              /* ← 高さ固定をやめて最小高さに */
  scroll-behavior: smooth;
  font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}


/* ============================
   右下スクロールインジケータ（PC）
============================ */

.scroll-indicator {
  position: fixed;
  right: 30px;
  top: 60%;                      /* 画面のやや下(★位置はここで調整) */
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  animation: scrollBlink 2.4s ease-in-out infinite;
}

/* 縦ライン */
.scroll-line {
  width: 1px;
  height: 60px;
  background-color: #000000;
  overflow: hidden;
  position: relative;
}

.scroll-line::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #000000;
  animation: scrollIndicator 1.6s infinite;
}

/* テキスト */
.scroll-text {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: #000000;
}

/* ラインが流れるアニメーション */
@keyframes scrollIndicator {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(80px); opacity: 0; }
}

/* ▼ ゆっくり点滅させるアニメーション ▼ */
@keyframes scrollBlink {
  0%   { opacity: 1; }
  40%  { opacity: 0.55; }  /* 少し薄く */
  70%  { opacity: 0.8; }
  100% { opacity: 1; }
}

/* ============================
   スマホ用（レスポンシブ）
============================ */
@media (max-width: 768px) {
  .scroll-indicator {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    gap: 4px;
    animation: scrollBlink 3s ease-in-out infinite; /* スマホはさらにゆっくり */
  }

  .scroll-line {
    height: 40px;
  }

  .scroll-text {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}


/*
  ===============================================================
  ヘッダー（共通）
  ===============================================================
*/

.header {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 80px;
  z-index: 20;
}

/*
  ============================================================
  左上固定メニュー（MENUボタン）
  ============================================================
*/

/* メニュー全体（左上に固定） */
.menu-toggle {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1100;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* フルスクリーンメニュー表示中はMENUボタンを消す */
.menu-toggle.active {
  opacity: 0;
  pointer-events: none;
}

/* 丸アイコン＋テキスト */
.menu-icon {
  position: relative;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* メニューアイコン画像 */
.menu-icon img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s ease;
  filter: brightness(0) invert(1);  /* 初期は白く */
}

/* ホバーでぐるっと回転 */
.menu-toggle:hover .menu-icon img {
  transform: rotate(360deg);
}

/* アイコン内テキスト（MENU） */
.menu-text {
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff; /* 初期は白 */
  pointer-events: none;
}

/* スクロール後に黒へ（JSで .scrolled が付与される） */
.menu-icon.scrolled img {
  filter: none;
}

.menu-text.scrolled {
  color: #000000;
}

/*
  ============================================================
  フルスクリーンメニュー本体
  ============================================================
*/

/* 黒半透明オーバーレイ */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1090;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体 */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #f8f3e6 url("../img/all/footer.jpg") no-repeat center bottom;
  background-size: cover;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  z-index: 1095;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-inner {
  width: 100%;
  height: 100%;
  padding: 32px 56px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

/* CLOSE ボタン */
.mobile-menu-close {
  position: absolute;
  top: 24px;
  left: 32px;
  text-decoration: none;
  z-index: 2000;
}

.close-icon {
  position: relative;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s ease;
}

/* 真ん中のテキスト CLOSE */
.close-text {
  position: absolute;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #333;
}

/* ホバーで回転 */
.mobile-menu-close:hover .close-icon img {
  transform: rotate(360deg);
}

/* 上部SNS */
.mobile-menu-top {
  display: flex;
  justify-content: flex-end;
}

.mobile-menu-sns {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sns-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #666;
}

.sns-icons a {
  display: inline-flex;
  margin-left: 6px;
}

.sns-icons img {
  width: 24px;
  height: 24px;
}

/* SNSのすぐ下にロゴ＋住所 */
.mobile-farm-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  margin-left: auto;
  margin-right: 56px;
}

.farm-logo {
  width: 52px;
  height: auto;
}

.farm-text {
  display: flex;
  flex-direction: column;
}

.farm-name {
  font-size: 16px;
  margin: 0;
  color: #d7a51e;
  letter-spacing: 0.05em;
}

.farm-address {
  font-size: 12px;
  margin: 0;
  color: #666;
}

/* 中央：縦書きメニュー */
.mobile-menu-center {
  margin-top: 100px;
  display: flex;
  justify-content: center;
}

.mobile-menu-list {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 各項目の縦棒 */
.mobile-menu-list li::before {
  content: "";
  width: 1px;
  height: 30px;
  background-color: #555;
  margin-bottom: 8px;
}

/* 縦書きテキスト */
.mobile-menu-list a {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #444;
  font-size: 20px;
  text-decoration: none;
  letter-spacing: 0.15em;
  line-height: 2.0;
}

.mobile-menu-list a:hover {
  color: #d7a51e;
}

/* 下部：お米購入ボタン */
.mobile-menu-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.menu-buy-btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.menu-buy-btn img {
  display: block;
  width: 350px;
  height: auto;
}

.menu-buy-btn:hover {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

/*
  ============================================================
  固定メニュー＆フルスクリーンメニュー：スマホ用
  ============================================================
*/
@media (max-width: 768px) {
  /* 左上 MENU ボタン少し小さく＆内側に */
  .menu-toggle {
    top: 10px;
    left: 10px;
  }

  .menu-icon {
    width: 52px;
    height: 52px;
  }

  .menu-text {
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  /* フルスクリーンメニュー内の余白 */
  .mobile-menu-inner {
    padding: 20px 16px 24px;
  }

  /* 上部：SNS 行を横並びのまま維持 */
  .mobile-menu-top {
    justify-content: flex-end;
  }

  .mobile-menu-sns {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .sns-label {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .sns-icons {
    display: flex;
    gap: 8px;
  }

  .sns-icons img {
    width: 20px;
    height: 20px;
  }

  /* ロゴ＋住所：SNSの下で右寄せ＆小さめ */
  .mobile-farm-info {
    margin-top: 10px;
    margin-right: 16px;
    margin-left: auto;
    align-items: center;
    gap: 8px;
  }

  .farm-logo {
    width: 40px;
  }

  .farm-name {
    font-size: 14px;
  }

  .farm-address {
    font-size: 11px;
  }

  /* CLOSE ボタンも少し小さく */
  .mobile-menu-close .close-icon {
    width: 52px;
    height: 52px;
  }

  .close-text {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* 縦書きメニュー：少しコンパクトに */
  .mobile-menu-center {
    margin-top: 40px;
  }

  .mobile-menu-list {
    gap: 20px;
  }

  .mobile-menu-list a {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  /* お米購入ボタンは中央寄せ＋幅を画面に合わせる */
  .mobile-menu-footer {
    margin-top: 32px;
    justify-content: center;
  }

  .menu-buy-btn img {
    width: 200px;
    max-width: 70vw;
  }
}

  


/*
  ===============================================================
  背景部分 index.html 3本動画スライダー
  ===============================================================
*/

/* 背景コンテナ */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  background-color: #000; /* ← 読み込み中も黒で見せる */
}

/* 背景動画共通 */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* デフォルトは非表示 */
  transition: opacity 1.5s ease-in-out; /* フェード時間は好みで */
}

/* 最初に見せる側 */
.bg1 {
  opacity: 1;
}


/* インジケーター（画面下部ドット） */
.slider-indicators {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.slider-indicators .indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.slider-indicators .indicator.active {
  background-color: #fff;
}

/*背景部分 index.html 3本動画スライダー　終了 */

/*
  ===============================================================
  メインロゴ（PC共通）
  ===============================================================
*/

/* 中央配置 */
.main-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

/* ロゴ画像 */
.main-logo img {
  max-width: 160px;
  height: auto;
}

/* 日本語タイトル */
.main-logo-ja {
  font-family: "Noto Serif JP", serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 12px 0 4px;
}

/* 英文（2行構成） */
.main-logo-en {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.4;
}

/* 1行目：HAKUMAI FARM */
.main-logo-en .en-line1 {
  font-size: 18px;
  letter-spacing: 0.16em;
}

/* 2行目：in Niigata Jyoetsu */
.main-logo-en .en-line2 {
  font-size: 14px;
  letter-spacing: 0.18em;
}


/* ==============================
   メインロゴ レスポンシブ調整
============================== */

/* タブレット（〜768px） */
@media (max-width: 768px) {
  .main-logo img {
    max-width: 140px;
  }

  .main-logo-ja {
    font-size: 32px;
    letter-spacing: 0.10em;
    margin: 10px 0 4px;
  }

  .main-logo-en .en-line1 {
    font-size: 16px;
  }

  .main-logo-en .en-line2 {
    font-size: 13px;
  }
}

/* スマホ縦（〜480px＝375px/430px想定） */
@media (max-width: 480px) {
  .main-logo img {
    max-width: 120px;
  }

  .main-logo-ja {
    font-size: 26px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 10px 0 4px;
  }

  .main-logo-en .en-line1 {
    font-size: 14px;
    letter-spacing: 0.14em;
  }

  .main-logo-en .en-line2 {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  /* スマホでもきっちり中央に */
  .main-logo {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}


  /* メインロゴ部分終了 */


/* ==============================
  TOP固定：お米購入ボタン
============================== */

.fixed-buy-btn {
  position: fixed;
  right: 20px;          /* 右端からの距離（調整可能） */
  top: 26%;             /* 画面の上寄り（★位置はここで調整） */
  transform: translateY(-50%);
  z-index: 3000;        /* どの要素よりも手前に */
  display: inline-block;
  cursor: pointer;
  transition: transform 0.25s ease, 
              filter 0.25s ease;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.25));
}

.fixed-buy-btn img {
  display: block;
  width: 40px;          /* ★サイズはここで調整（例：70〜110px） */
  height: auto;
}

/* ホバー：ふわっと浮く */
.fixed-buy-btn:hover {
  transform: translateY(-50%) translateY(-4px) scale(1.05);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
}

/* スマホは消える設定 */
@media (max-width: 768px) {
  .fixed-buy-btn {
    display: none;
  }
}

/* フルスクリーンメニューが開いている時は固定購入ボタンを非表示 */
.mobile-menu.active ~ .fixed-buy-btn {
  display: none;
}




/*
  ===============================================================
  メインコンテンツ
  ===============================================================
*/

/* main 全体部分 */
#main {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 100vh;                         /* ← ここは常に 100vh のまま */
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px 0 40px;                      /* 横は0でOK。中身は .container に任せる */
  box-sizing: border-box;
}
/* main 全体部分 終了 */


/* ===========================
   News セクション
=========================== */

.news-section {
  padding: 80px 0;
  background: #f7f3ea;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
}

.news-container {
  margin: 0 auto;
  padding: 32px 40px 28px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* 上部のタイトル行 */
.news-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  border-left: 4px solid #d7a51e;
  padding-left: 16px;
}

.news-label-ja {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b59b5a;
}

.news-title {
  font-size: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #333;
  margin: 0;
}

/* リスト全体（タイムライン） */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  position: relative;
}

/* 縦のライン */
.news-list::before {
  content: "";
  position: absolute;
  left: 92px;          /* 日付の中心あたりにラインを通す */
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(0, 0, 0, 0.12);
}

/* 1件ごとの行 */
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 24px;
  padding: 14px 0;
}

/* 行ごとの小さなドット */
.news-item::before {
  content: "";
  position: absolute;
  left: 89px;
  top: 24px;
  width: 8px;
  height: 8px;
  background: #d7a51e;
  border-radius: 50%;
}

/* 日付 */
.news-date {
  font-size: 13px;
  color: #777;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* テキスト部分（リンクあり） */
.news-link,
.news-text {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  line-height: 1.8;
  position: relative;
  padding-right: 24px;
}

/* リンクの右端に小さな矢印 */
.news-link::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #d7a51e;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* hover時の演出 */
.news-link:hover {
  color: #d7a51e;
}

.news-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}

/* 1つ1つの行の下にうっすら仕切り線 */
.news-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ===========================
   News セクション　レスポンシブ
=========================== */

/* --- 768px 以下（タブレット & 小さめPC）--- */
@media (max-width: 768px) {
  .news-section {
    padding: 48px 0;
  }

  .news-container {
    padding: 24px 18px 20px;
    border-radius: 12px;
  }

  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-left-width: 3px;
  }

  .news-title {
    font-size: 20px;
  }

  /* タイムラインの縦線位置を調整 */
  .news-list::before {
    left: 20px;
  }

  /* 左の丸と日付がかぶらないように、テキスト開始位置を右へ */
  .news-item {
    grid-template-columns: 1fr;
    padding-left: 40px;   /* ← 元16px から拡大 */
    column-gap: 0;
    position: relative;
  }

  /* 丸アイコンは縦線と同じ位置に */
  .news-item::before {
    left: 20px;
    top: 18px;
  }

  .news-date {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .news-link,
  .news-text {
    font-size: 13px;
    padding-right: 20px;
  }
}

/* --- 480px 以下（375px / 430px 想定）--- */
@media (max-width: 480px) {
  .news-section {
    padding: 40px 0;
  }

  .news-container {
    padding: 20px 14px 18px;
  }

  .news-header {
    padding-left: 12px;
  }

  .news-title {
    font-size: 18px;
    letter-spacing: 0.12em;
  }

  /* タイムラインの縦線位置を調整（丸と揃える） */
  .news-list::before {
    left: 16px;
  }

  /* 左のスペースを広げて重なり防止 */
  .news-item {
    padding: 10px 0 10px 32px;  /* ← 元12px から拡大 */
    position: relative;
  }

  /* 丸アイコン位置を縦線と揃える */
  .news-item::before {
    left: 16px;
    top: 16px;
    width: 6px;
    height: 6px;
  }

  .news-date {
    font-size: 11px;
  }

  .news-link,
  .news-text {
    font-size: 12px;
    line-height: 1.7;
  }
}


/* ================================ 
   コンセプト セクション 基本
================================ */

.concept-section {
  background: #f7f1e6 url("../img/bg.jpg") repeat center top;
  position: relative;
}

/* 全体を「上：テキスト＋rice / 下：ボタン」で縦並び */
.concept-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 80px 40px 110px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ───────── テキスト＋rice ───────── */

.concept-copy {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 200px;                 /* ★ rice を挟んだ左右間隔を広げる */
  margin: 40px 0 48px;
}

/* 共通テキスト（縦書き） */
.concept-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Serif JP", serif;
  color: #333;
  line-height: 2.2;
  letter-spacing: 0.18em;
  margin: 0;
  position: relative;
  z-index: 1;                  /* rice より前面に */
}

/* 左テキスト（サイズ＋位置 少し左へ） */
.concept-text-sub {
  font-size: 16px;            /* ★ 少し大きく */
  transform: translateX(20px); /* ★ 左方向へ移動 */
}

/* 右テキスト（サイズ＋位置 少し右へ） */
.concept-text-main {
  font-size: 20px;            /* ★ 少し大きく */
  font-weight: 600;
  color: #4a6179;
  transform: translateX(20px); /* ★ 右方向へ移動 */
}

/* rice 画像（真ん中・薄く後ろに表示） */
.concept-rice-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* rice の後ろに来る奥行きはそのまま */
.concept-rice-mark img {
  width: 240px;               /* ★ rice も少しだけ大きく */
  opacity: 0.42;
}

/* ================================
   ボタン＋稲穂　★複数仕様
================================ */

/* 稲穂アイコン（画像に含まれるので非表示） */
.concept-cta-icon {
  display: none;
}

/* ボタンのラッパーは中央寄せ */
.concept-cta-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.concept-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   ボタン（背景画像 inaho-btn.png） PC基準
================================ */
.concept-cta-btn {
  position: relative;
  display: flex;
  width: 300px;
  height: 100px;
  background: url("../img/inaho-btn.png") no-repeat center center / contain;
  text-decoration: none;
  overflow: visible;
}

/* ================================
   テキスト（オレンジ帯のど真ん中）
================================ */
.concept-cta-label {
  position: absolute;
  top: 75%;               /* ★ ここで帯の中央に合わせる */
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  z-index: 2;
  color: #ffffff;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* ================================
   二重矢印（≫）
================================ */
.cta-double-arrow {
  position: absolute;
  top: 75%;                      /* ラベルと同じ高さ */
  left: calc(50% + 80px);        /* ラベルの少し右 */
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 1つの「 > 」 */
.arrow-unit {
  width: 12px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  opacity: 0.97;
}

/* ホバー時：矢印が右へスッと動く */
.concept-cta-btn:hover .cta-double-arrow {
  transform: translate(14px, -50%);
}

/* =========================================================
   レスポンシブ　コンセプト
========================================================= */

/* タブレット（〜768px） */
@media (max-width: 768px) {

  /* ---- テキスト・レイアウト ---- */
  .concept-inner {
    padding: 60px 24px 80px;
  }

  .concept-copy {
    gap: 90px;
    margin: 32px 0 40px;
  }

  .concept-text-sub {
    font-size: 13px;
  }

  .concept-text-main {
    font-size: 17px;
  }

  /* ★ 米粒画像：絶対配置を解除して中央寄せ */
  .concept-rice-mark {
    position: static;          /* PCの absolute を打ち消す */
    transform: none;           /* transform も無効化 */
    margin: 0 auto;
  }

  .concept-rice-mark img {
    width: 170px;
    opacity: 0.38;
    display: block;
  }

  .concept-cta-wrap {
    margin-top: 40px;
  }

 /* ================================
   ボタン＋稲穂　★複数仕様
================================ */
  .concept-cta-btn {
    width: 260px;
    height: 90px;
    background-size: contain;
  }

  .concept-cta-label {
    font-size: 16px;
    letter-spacing: 0.16em;
    top: 75%;                     /* PC と同じ基準で中央に */
  }

  .cta-double-arrow {
    left: calc(50% + 70px);       /* 幅が小さい分だけ内側に寄せる */
  }

  .arrow-unit {
    width: 11px;
    height: 11px;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
  }
}

/* ================================
   スマホ（〜480px）用レイアウト
================================ */
@media (max-width: 480px) {

  /* ---- セクション余白 ---- */
  .concept-inner {
    padding: 40px 16px 50px;
  }

  /* ---- テキスト＋rice を縦並び＆中央揃え ---- */
  .concept-copy {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
  }

  /* テキストは横書きに */
  .concept-text {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* 上のテキスト（舞い降りる白鳥…） */
  .concept-text-main {
    order: 1;
    font-size: 15px;
    font-weight: 500;
  }

  /* ★ rice.png をテキストの「間」に普通に流す */
  .concept-rice-mark {
    order: 2;
    position: static;       /* absolute を解除 */
    transform: none;        /* PC側の transform を解除 */
    margin: 6px auto 10px;  /* 上下に少し余白を追加 */
  }

  .concept-rice-mark img {
    width: 120px;
    opacity: 0.38;
    display: block;
  }

  /* 下のテキスト（毎年白鳥が飛来する…） */
  .concept-text-sub {
    order: 3;
    font-size: 13px;
  }

  /* ================================
   ボタン＋稲穂　★複数仕様
================================ */
  /* ---- ボタン周り ---- */
  .concept-cta-wrap {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* ボタン本体：画像が横に伸びないようにする */
  .concept-cta-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 260px;               /* スマホ用に少し小さめ */
    height: 86px;

    background: url("../img/inaho-btn.png") no-repeat center center / contain;
    text-decoration: none;
    overflow: visible;
  }

  /* テキスト：オレンジ帯の中央に揃える */
  .concept-cta-label {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    letter-spacing: 0.18em;
    line-height: 1;

    margin-right: 250px;            /* 矢印スペース */
    transform: translateY(-260%);   /* オレンジ帯のど真ん中へ */
  }

  /* 二重矢印（≫）も帯中央に */
  .cta-double-arrow {
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    transform: translateY(-40%);    /* テキストと高さを合わせる */
    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .arrow-unit {
    width: 12px;
    height: 12px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    opacity: 0.97;
  }

  /* ホバー時：矢印だけ少し右へスライド */
  .concept-cta-btn:hover .cta-double-arrow {
    transform: translateY(60%) translateX(14px);
  }
}


/* ================================
   スクロールテキスト セクション
================================ */

.loop-text-section {
  background: rgba(255, 255, 255, 0.85);
}

.loop-text-wrapper {
  overflow: hidden;
  width: 100%;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 横並びでスクロールさせるレール */
.loop-text-track {
  display: inline-flex;
  white-space: nowrap;
  animation: loopTextMarquee 35s linear infinite;
}

/* 各ブロック：横幅を広めにとる */
.loop-text-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せ */

  width: 300px;               /* ← ブロック幅を広めに */
  padding: 10px 15px 10px 15px;

  font-family: "Montserrat", "Noto Sans JP", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #999;
}

/* 左側だけ縦線（常に1本） */
.loop-text-item::before {
  content: "";
  width: 1px;
  height: 32px;
  background-color: rgba(0,0,0,0.18);
  margin-right: 24px;
}

/* テキスト：左寄せ＆2行想定 */
.loop-text {
  margin: 0;
  line-height: 1.7;
  white-space: normal;  /* <br> 有効＋自然改行 */
  text-align: left;     /* 左寄せ */
}

/* 無限ループ（2セット分並べているので -50%） */
@keyframes loopTextMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================
   レスポンシブ
================================ */

@media (max-width: 768px) {
  .loop-text-item {
    width: 300px;               /* ← ブロック幅を広めに */
    padding: 10px 15px 10px 15px;
    font-size: 11px;
  }

  .loop-text-item::before {
    height: 26px;
    margin-right: 18px;
  }
}

@media (max-width: 480px) {
  .loop-text-item {
    width: 200px;
    padding: 5px 15px 5px 15px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .loop-text-item::before {
    height: 22px;
    margin-right: 14px;
  }
}


/* ================================
    ▼ 産セクション 基本レイアウト ▼ 
================================ */

.origin-section {
  background: #fff;
  padding: 80px 0;
}

.origin-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 56px;
}

.origin-text-block {
  flex: 1;
}

.origin-image-block {
  flex: 1;
  text-align: right;
}

.origin-main-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 8px;
}

/* 見出し周り */
.origin-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.origin-label-img {
  width: 96px;
  height: auto;
  flex-shrink: 0;
}

.origin-title {
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: 600;
}

/* テキスト本文 */
.origin-body p {
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: 12px;
}

/* ボタン位置調整（お好みで） */
.origin-cta {
  margin-top: 28px;
}

/* ▼ アニメーション初期状態 ▼ */
.origin-section .origin-label-img {
  transform-origin: center bottom;
  transform: rotate(0deg);
}

.origin-section .origin-main-img {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* セクションが表示されたときに付与されるクラス */
.origin-section.is-active .origin-label-img {
  animation: rice-tilt 0.8s ease-out forwards;
}

.origin-section.is-active .origin-main-img {
  opacity: 1;
  transform: translateY(0);
}

/* 米粒が右に傾いて戻るアニメーション */
@keyframes rice-tilt {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* ▼ スマホレイアウト ▼ */
@media (max-width: 768px) {
  .origin-inner {
    flex-direction: column;
    gap: 32px;
    padding: 0 18px;
  }

  .origin-image-block {
    text-align: center;
  }

  .origin-heading {
    align-items: flex-start;
  }

  .origin-title {
    font-size: 1.25rem;
    line-height: 1.8;
  }

  .origin-body p {
    font-size: 0.9rem;
    line-height: 1.9;
  }

  /* ★ PC 用の <br> をスマホでは無効化して自然な折り返しにする */
  .origin-title br,
  .origin-body br {
    display: none;
  }
}

@media (max-width: 480px) {
  .origin-section {
    padding: 60px 0;
  }

  .origin-title {
    font-size: 1.15rem;
  }

  .origin-body p {
    font-size: 0.85rem;
  }
}


/* ▼ 3つのストーリーセクション共通 ▼ */

.farm-features {
  background: #fff;
  padding: 96px 0 120px;
}

.farm-features-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 1ブロック */
.farm-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
  align-items: center;
  column-gap: 64px;
  row-gap: 40px;
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1),
              transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 2つ目の背景：薄いオレンジ */
.farm-feature-row--bg {
  background: #FFF5E5;  /* ほんのり薄いオレンジ */
  border-radius: 20px;
  padding: 60px 50px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.05);
}

/* 表示時 */
.farm-feature-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 画像とテキストの左右切り替え */
.farm-feature-row--right {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.05fr);
}

.farm-feature-row--right .farm-feature-content {
  order: 2;
}
.farm-feature-row--right .farm-feature-media {
  order: 1;
}

/* テキスト側 */
.farm-feature-content {
  position: relative;
}

.farm-feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.farm-feature-label {
  width: 72px;
  height: auto;
  transform-origin: center bottom;
}

.farm-feature-tag-text {
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: #cfa100;
}

.farm-feature-title {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 20px;
  font-weight: 600;
}

.farm-feature-body p {
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: 10px;
}

/* CTA位置 */
.farm-feature-cta {
  margin-top: 28px;
}

/* 画像側 */
.farm-feature-media {
  position: relative;
}

.farm-feature-media-inner {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.40);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity 0.9s ease-out,
              transform 0.9s ease-out;
}

.farm-feature-img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.05);
  transition: transform 4s ease-out;
}

/* セクション表示時の画像アニメーション */
.farm-feature-row.is-visible .farm-feature-media-inner {
  opacity: 1;
  transform: translateY(0);
}

.farm-feature-row.is-visible .farm-feature-img {
  transform: scale(1.0);
}

/* 米粒ラベルがクイっと傾いて戻る */
.farm-feature-row.is-visible .farm-feature-label {
  animation: rice-tilt-2 0.8s ease-out 0.15s both;
}

@keyframes rice-tilt-2 {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

/* ▼ スマホ・タブレット ▼ */
@media (max-width: 900px) {

  .farm-features {
    padding: 72px 0 96px;
  }

  .farm-features-inner {
    padding: 0 18px;
  }

  .farm-feature-row,
  .farm-feature-row--right {
    grid-template-columns: minmax(0, 1fr);
  }

  .farm-feature-row--right .farm-feature-content,
  .farm-feature-row--right .farm-feature-media {
    order: initial;
  }

  .farm-feature-row {
    margin-bottom: 64px;
  }

  .farm-feature-row--bg {
    padding: 40px 28px;
  }

  .farm-feature-title {
    font-size: 1.35rem;
    line-height: 1.7;
  }

  .farm-feature-body p {
    font-size: 0.9rem;
    line-height: 1.9;
  }

  /* ★ PC 用の <br> をスマホでは無効化して自然な折り返しに */
  .farm-feature-title br,
  .farm-feature-body br {
    display: none;
  }

  .farm-feature-media {
    margin-top: 8px;
  }
}

/* さらに小さいスマホ向け微調整 */
@media (max-width: 480px) {
  .farm-features {
    padding: 60px 0 80px;
  }

  .farm-feature-title {
    font-size: 1.2rem;
    line-height: 1.8;
  }

  .farm-feature-body p {
    font-size: 0.85rem;
  }

  .farm-feature-row--bg {
    padding: 32px 20px;
  }
}




  /*
  ==========================================================
    取扱商品：横スクロール無限ループ
  ==========================================================
  */

.products-loop-section {
  padding: 30px 0;
  background: #FFF5E5; /* 上下の帯イメージ */
}

.products-loop-bg {
  background: #FFF5E5;
}

.products-loop-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 5px 13px 10px;
  background: #ffffff;
  border-radius: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ビューポート */
.products-loop-viewport {
  overflow: hidden;
  flex: 1;
}

/* トラック（横並び） */
.products-loop-track {
  display: flex;
  align-items: flex-end;
  gap: 36px;
  will-change: transform;
}

/* 各商品カード */
.products-item {
  min-width: 140px;
  max-width: 160px;
  text-align: center;
  flex-shrink: 0;
}

.products-item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.products-item:hover {
  opacity: 0.9;
}

/* パッケージ画像 */
.products-item-imgwrap {
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  /* box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15); ドロップシャドウ削除*/
}

.products-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 商品名 */
.products-name-ja {
  margin-top: 8px;
  font-size: 0.9rem;
}

.products-name-en {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #777;
}

/* 矢印ボタン */
.products-loop-arrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #f4c645;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out;
}

.products-loop-arrow span {
  display: block;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
}

.products-loop-arrow:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  background: #f6cf60;
}

/* ▼ 取扱商品 LINEUP 見出し ▼ */

.products-heading {
  max-width: 1120px;
  margin: 0 auto 20px;
  padding: 0 24px;
  text-align: left;
}

.products-heading-sub {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: #b38b2a;
  margin-bottom: 4px;
}

/* メインタイトル */
.products-heading-main {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.4;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px; /* 下線のスペース */
}

/* 英語部分 */
.products-heading-main .en {
  font-size: 0.9rem;
  color: #b9b9b9;
  letter-spacing: 0.22em;
}

/* ▼ 下線（通常状態：幅 0 → アニメで伸びる） */
.products-heading-main::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0; /* ← 最初はゼロ */
  border-radius: 999px;
  background: linear-gradient(to right, #f4c645, #e27d1f);
  transition: width 0.6s ease-out;
}

/* ▼ 表示（スクロールで active になる） */
.products-heading.reveal-active .products-heading-main::after {
  width: 105px; /* ← 見本の短い線に合わせた長さ */
}


/* スマホレイアウト */
@media (max-width: 768px) {
  .products-loop-inner {
    padding: 18px 12px 22px;
    gap: 8px;
  }

  .products-item {
    min-width: 120px;
    max-width: 135px;
  }

  .products-loop-arrow {
    width: 34px;
    height: 34px;
  }

  .products-loop-arrow span {
    font-size: 1rem;
  }

  .products-heading {
    padding: 0 16px;
  }
  .products-heading-main {
    font-size: 1.4rem;
  }
  .products-heading.reveal-active .products-heading-main::after {
    width: 90px;
  }
}


/* =======================================
   thoughts.html 専用調整
   （背景動画がないページ用）
======================================= */

/* トップページ用の 100vh ぶんのマージンを打ち消す */
.page-thoughts #main {
  margin-top: 0;
  padding-top: 0;
}

/* このページでは中央の大きなロゴは非表示にする */
.page-thoughts .main-logo {
  display: none;
}



/* =======================================
   私たちの想い ページ共通
======================================= */

/* このページだけ背景を少しクリーム色寄りに */
.page-thoughts {
  background: #f7f1e6;
}

/* PCだけ折り返し制御に使うクラス */
.pc-only {
  display: inline;
}
@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

/* スクロールフェードイン */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s ease-out;
}

/* 表示状態 */
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =======================================
   ヒーローセクション
======================================= */

.thoughts-hero {
  position: relative;
  padding: 140px 24px 120px;
  overflow: hidden;
  color: #ffffff;
}

/* 波形っぽい上部の丸み */
.thoughts-hero::before {
  content: "";
  position: absolute;
  inset: -180px -25% 0;
  background: #f4c645;
  border-radius: 0 0 50% 50%;
  z-index: -1;
}

.thoughts-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.thoughts-hero-eyebrow {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.thoughts-hero-title {
  font-size: 28px;
  letter-spacing: 0.25em;
  margin: 0 0 18px;
}

/* 説明文 */
.thoughts-hero-lead {
  font-size: 14px;
  line-height: 2.1;
  margin-top: 18px;  /* アイコンの少し下から始まるように */
}

/* ───── お米が産まれる場所 用カスタム ───── */

/* place.html のときに body か section に .place-hero が付いている想定 */
.place-hero .thoughts-hero-inner {
  text-align: center;
}

/* アイコン＋タイトルをまとめる箱（中央に配置） */
.place-hero-icon {
  position: relative;
  width: 210px;          /* ★アイコン小さめ */
  max-width: 55vw;
  margin: 28px auto 6px; /* 上下の余白調整 */
}

/* top-icon 本体 */
.place-hero-icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* この見出しだけをアイコンの上に重ねる */
.place-hero-title-strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #4b320a;        /* 濃いめブラウンでくっきり */
  text-align: center;
  white-space: nowrap;
}

/* 右側の縦型購入ボタン */
.thoughts-hero-vertical {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.2em;
  background: #ffffff;
  color: #f4c645;
  border-radius: 999px;
  padding: 16px 10px;
  box-shadow: 0 10px 20px rgba(190, 130, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.thoughts-hero-vertical span {
  display: inline-block;
}

.thoughts-hero-vertical:hover {
  transform: translateY(-50%) translateX(-2px);
  background: #fffaf0;
  box-shadow: 0 14px 26px rgba(190, 130, 0, 0.65);
}

/* ───── thoughts ロゴ（eyebrowの上） ───── */
.thoughts-hero-logo{
  width: 140px;          /* 基本サイズ */
  max-width: 42vw;       /* 画面に応じて縮む */
  margin: 0 auto 18px;   /* 下に余白 */
}

.thoughts-hero-logo img{
  display: block;
  width: 100%;
  height: auto;
}

/* ───── スマホでの調整 ───── */
@media (max-width: 768px) {

  .thoughts-hero {
    padding: 120px 16px 80px;
  }

  .thoughts-hero-title {
    font-size: 24px;
    letter-spacing: 0.18em;
  }

  .thoughts-hero-lead {
    font-size: 13px;
    margin-top: 16px;
  }

  .thoughts-hero-vertical {
    top: auto;
    bottom: 18px;
    right: 12px;
    transform: none;
    padding: 14px 8px;
  }

  .place-hero-icon {
    width: 170px;       /* スマホではさらに少し小さく */
    max-width: 60vw;
    margin: 22px auto 4px;
  }

  .place-hero-title-strong {
    font-size: 17px;
    letter-spacing: 0.12em;
    white-space: normal; /* スマホでは改行OK */
    line-height: 1.7;
  }

    .thoughts-hero-logo{
    width: 120px;
    margin-bottom: 16px;
  }
}



/* =======================================
   メッセージカードセクション
======================================= */

.thoughts-message {
  padding: 60px 0 40px;
  background: rgba(255, 255, 255, 0.92);
}

.thoughts-message-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.thoughts-message-lead {
  text-align: center;
  font-size: 15px;
  margin-bottom: 40px;
  line-height: 2;
}

.thoughts-message-lead span {
  background: linear-gradient(transparent 55%, rgba(244, 198, 69, 0.25) 0);
  padding: 0 2px;
}

.thoughts-message-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.thoughts-message-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 22px 26px;
  box-shadow: 0 14px 30px rgba(199, 139, 41, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thoughts-message-card h3 {
  font-size: 16px;
  margin: 0 0 10px;
}

.thoughts-message-card p {
  font-size: 13px;
  line-height: 1.9;
  margin: 0;
}

.thoughts-message-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(199, 139, 41, 0.3);
}

@media (max-width: 960px) {
  .thoughts-message-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .thoughts-message {
    padding: 40px 0 24px;
  }

  .thoughts-message-inner {
    padding: 0 16px 24px;
  }

  .thoughts-message-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .thoughts-message-card {
    border-radius: 18px;
    padding: 18px 16px 20px;
  }
}

/* =======================================
   写真セクション
======================================= */

.thoughts-photo {
  padding: 40px 0 70px;
  background: #f7f1e6;
}

.thoughts-photo-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.thoughts-photo-imgwrap {
  border-radius: 30px;
  overflow: hidden;
}

.thoughts-parallax-img {
  width: 100%;
  transform: scale(1.08);
  transition: transform 0.2s linear;
}

/* オーバーレイテキスト */
.thoughts-photo-overlay {
  position: absolute;
  left: 10%;
  bottom: 18%;
  max-width: 420px;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}

.thoughts-photo-title {
  font-size: 20px;
  margin: 0 0 8px;
}

.thoughts-photo-text {
  font-size: 13px;
  line-height: 1.9;
  margin: 0;
}

/* 縦書きコピー */
.thoughts-photo-vertical {
  position: absolute;
  right: 6%;
  bottom: 10%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}

/* =======================================
   写真セクション：スマホ時は縦書きを横書きへ
======================================= */
@media (max-width: 768px) {

  /* オーバーレイの配置（軽く微調整） */
.thoughts-photo-overlay {
    left: 10%;
    right: 10%;
    top: 12%;
    bottom: auto;
    padding: 0 6px;   /* テキストの左右に微調整用の余白 */
    text-align: left;
  }

  .thoughts-photo-title {
    font-size: 18px;
    margin-bottom: 6px;
    line-height: 1.6;
  }

  .thoughts-photo-text {
    font-size: 12px;
    line-height: 1.9;
  }

  /* ▼ 縦書きテキストを横書きに変更する ▼ */
  .thoughts-photo-vertical {
    position: static !important;   /* 画像の外に出す */
    writing-mode: horizontal-tb;   /* ← 横書きに変更 */
    text-orientation: mixed;
    display: block;
    margin: 12px auto 0;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
    color: #865D0A;  /* 少し落ち着いたブラウン系を推奨 */
    text-shadow: none;
  }

  /* 改行タグも横書き用のブロックに */
  .thoughts-photo-vertical br {
    display: block;
  }
}



/* =======================================
   3つの約束 セクション
======================================= */

.thoughts-promise {
  padding: 40px 0 80px;
  background: #ffffff;
}

.thoughts-promise-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.thoughts-promise-title {
  text-align: center;
  font-size: 20px;
  margin: 0 0 32px;
  letter-spacing: 0.18em;
}

.thoughts-promise-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.thoughts-promise-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: flex-start;
  gap: 20px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  padding: 20px 26px;
  box-shadow: 0 12px 26px rgba(199, 139, 41, 0.18);
}

.thoughts-promise-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: #ffffff;
}

.thoughts-promise-body h3 {
  font-size: 15px;
  margin: 0 0 6px;
}

.thoughts-promise-body p {
  font-size: 13px;
  margin: 0;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .thoughts-promise {
    padding: 32px 0 64px;
  }

  .thoughts-promise-inner {
    padding: 0 16px;
  }

  .thoughts-promise-item {
    border-radius: 18px;
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 16px 16px;
  }

  .thoughts-promise-body h3 {
    font-size: 14px;
  }

  .thoughts-promise-body p {
    font-size: 12px;
  }
}

/* ===========================================================
   想いカード：見出し強調（色＋太字）
=========================================================== */
.thoughts-message-card h3 {
  color: #d8a628;
  font-weight: 600;
}

/* ===========================================================
   3つの約束：タイトル + 各項目の見出し強調
=========================================================== */

/* セクションタイトル */
.thoughts-promise-title {
  color: #d8a628;
  font-weight: 600;
}

/* 各見出し（h3） */
.thoughts-promise-item h3 {
  color: #d8a628;
  font-weight: 600;
}

.thoughts-message-card h3,
.thoughts-promise-item h3 {
  font-size: 1.15rem;
}

.thoughts-message-card h3 {
  border-bottom: 1px solid rgba(216,166,40,0.4);
  padding-bottom: 4px;
  margin-bottom: 12px;
}


/* =======================================
   歴史と想い セクション（前のセクションと馴染ませる）
======================================= */

.thoughts-story {
  background: #fffaf0; /* 白に近いクリームで読みやすく */
  color: #3c2f1b;
  padding: 64px 0 72px;
}

.thoughts-story-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 上段：テキスト＋イラスト */
.thoughts-story-top {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.thoughts-story-text {
  flex: 1.5;
  font-size: 14px;
  line-height: 2;
}

.thoughts-story-text p {
  margin: 0 0 10px;
}

.thoughts-story-illust {
  flex: 0 0 260px;
  text-align: right;
}

.thoughts-story-illust img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* 下段：生産者写真＋縦コピー */
.thoughts-story-photo-wrap {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-top: 44px;
}

/* 左の縦書きコピーを独立させて読みやすく */
.thoughts-story-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #d8a628;
  line-height: 1.8;
}

/* 写真はそのまま見せる（グレーの枠は無し） */
.thoughts-story-photo-inner {
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.thoughts-story-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 960px) {
  .thoughts-story-top {
    gap: 24px;
  }

  .thoughts-story-illust {
    flex-basis: 220px;
  }

  .thoughts-story-text {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .thoughts-story {
    padding: 48px 0 60px;
  }

  .thoughts-story-inner {
    padding: 0 16px;
  }

  .thoughts-story-top {
    flex-direction: column;
    gap: 24px;
  }

  .thoughts-story-illust {
    text-align: center;
  }

  .thoughts-story-photo-wrap {
    flex-direction: row;
    align-items: flex-end;
    gap: 18px;
    margin-top: 32px;
  }

  .thoughts-story-vertical {
    font-size: 12px;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 480px) {
  .thoughts-story-text {
    font-size: 12px;
  }

  .thoughts-story-photo-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .thoughts-story-vertical {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .thoughts-story-photo-inner {
    width: 100%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  }
}


/* ---------------------------------------
   thoughts-story 読みやすさ調整（カード化）
---------------------------------------- */

.thoughts-story-top {
  align-items: flex-start;
}

/* テキスト全体をカードにする */
.thoughts-story-text {
  flex: 1.6;
  max-width: 720px;
  background: #ffffff;
  border-radius: 26px;
  padding: 26px 30px 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  font-size: 13px;
  line-height: 2;
}

/* カード内の小見出しラベル（強調版） */
.thoughts-story-text::before {
  content: "上越という土地と、白舞ファームのこれまで";
  position: absolute;
  top: 16px;
  left: 26px;
  font-size: 1.05rem;      /* ← 大きめに強調 */
  font-weight: 600;        /* ← 太字で存在感 */
  letter-spacing: 0.18em;  /* ← 少し広めで読みやすく */
  color: #d8a628;          /* ← 白舞ファームのアクセントカラーに揃える */
  white-space: nowrap;
}


/* ラベルが大きくなるため、最初の段落を下げる */
.thoughts-story-text p:first-of-type {
  margin-top: 36px;
}

/* 段落ごとにうっすら区切り線を入れて読みやすく */
.thoughts-story-text p + p {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

/* 右のイラストは少し余白をあけて配置 */
.thoughts-story-illust {
  flex: 0 0 240px;
  padding-top: 10px;
}

/* タブレット・スマホ調整 */
@media (max-width: 768px) {
  .thoughts-story-text {
    max-width: 100%;
    padding: 20px 18px 18px;
    border-radius: 20px;
    font-size: 12px;
  }

  .thoughts-story-text::before {
    top: 12px;
    left: 16px;
    font-size: 10px;
    letter-spacing: 0.14em;
    white-space: normal; /* 狭い画面では改行OKに */
  }

  .thoughts-story-text p:first-of-type {
    margin-top: 26px;
  }
}

/* ===============================
   テキストカードのドロップシャドウ強化
=============================== */

.thoughts-story-text {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.10),   /* 下に大きめの影 */
    0 8px 18px rgba(0, 0, 0, 0.06),    /* 中間の影 */
    0 2px 6px rgba(0, 0, 0, 0.03);     /* ふわっとした浅い影 */
}


/* ===============================
   マウスオーバーアニメーション（ふわっと動く）
=============================== */

/* 包むカード部分を浮かせる */
.thoughts-story-photo-inner {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* 画像にも動きをつける */
.thoughts-story-photo {
  transition: transform 1.0s ease, opacity 0.6s ease;
  will-change: transform;
}

/* ホバー時の動き */
.thoughts-story-photo-inner:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 48px rgba(0, 0, 0, 0.22);
}

.thoughts-story-photo-inner:hover .thoughts-story-photo {
  transform: scale(1.06) translateY(-4px);
}


/* ===============================
   スマホ時：イラストを上部へ移動 & 小さく
=============================== */

@media (max-width: 768px) {

  /* flexの並び順を変更（画像→テキストの順） */
  .thoughts-story-top {
    flex-direction: column;
    align-items: center;
  }

  /* イラストを小さめ＆中央寄せ */
  .thoughts-story-illust {
    order: -1; /* ← これで最上部へ */
    text-align: center;
    margin-bottom: 10px;
  }

  .thoughts-story-illust img {
    width: 80%;      /* ← さらに小さめに */
    max-width: 300px;/* ← 上限設定 */
    height: auto;
    opacity: 0.9;    /* ← ほんのり軽く */
  }

  /* テキストカードを幅広く */
  .thoughts-story-text {
    width: 100%;
    max-width: 100%;
  }
}


/* ==================================================
   ★ スマホ時：PC用 <br> を無効化して改行を自動に
================================================== */

@media (max-width: 768px) {

  /* ヒーロー */
  .thoughts-hero-title br,
  .thoughts-hero-lead br,

  /* メッセージリード＆カード内テキスト */
  .thoughts-message-lead br,
  .thoughts-message-card p br,

  /* 写真セクションのタイトル・本文・縦コピー */
  .thoughts-photo-title br,
  .thoughts-photo-text br,
  .thoughts-photo-vertical br,

  /* 3つの約束 */
  .thoughts-promise-title br,
  .thoughts-promise-body p br,

  /* 歴史と想い（テキストカード＋縦コピー） */
  .thoughts-story-text br,
  .thoughts-story-vertical br {

    display: none;
  }
}




/* =======================================
   新潟のブランド米 セクション production.html
======================================= */

.place-brandrice {
  padding: 80px 24px 100px;
  background: #fffdf8; /* やさしい白でヒーローとの繋がり */
}

.place-brandrice-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/* 左側テキストブロック */
.place-brandrice-text h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 22px;
  color: #3c2f1b;
  position: relative;
}

/* タイトル下のライン（米まで伸ばして右へ伸びるアニメ） */
.place-brandrice-text h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 230px;               /* 「米」くらいまで届く長さ */
  height: 3px;
  background: #f4c645;
  border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(0);       /* 最初は0で非表示 */
  animation: brandrice-underline 0.9s ease-out 0.2s forwards;
}

@keyframes brandrice-underline {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);     /* 左→右にスッと伸びる */
  }
}

.place-brandrice-text p {
  font-size: 15px;
  line-height: 2;
  color: #4d4128;
}

/* 右側：写真カード */
.place-brandrice-photo img {
  width: 480px;
  max-width: 45vw;
  border-radius: 16px;
  display: block;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  object-fit: cover;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

/* 画像ホバー時の動き */
.place-brandrice-photo img:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.24);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
  .place-brandrice-inner {
    flex-direction: column;
    text-align: left;
    gap: 32px;
  }

  .place-brandrice-photo img {
    width: 100%;
    max-width: 100%;
  }

  .place-brandrice-text h2 {
    font-size: 22px;
  }

  .place-brandrice-text p {
    font-size: 14px;
  }
}



/* =======================================
   白舞ファームのお米たち / こだわりのつくり方 セクション
======================================= */

.rice-lineup {
  padding: 80px 24px 90px;
  background: #ffffff;
}

.rice-lineup-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* 上部ヘッダー帯 + 夫婦イラスト */
.rice-lineup-header {
  position: relative;
  margin-bottom: 46px;
}

/* 上部の淡い黄色帯 */
.rice-lineup-header-bg {
  position: absolute;
  inset: 0;
  height: 120px;
  background: #fff4b8;
  z-index: 0;
}

/* 中央の内容 */
.rice-lineup-header-content {
  position: relative;
  z-index: 1;
  padding-top: 30px;
  text-align: center;
}

/* 夫婦イラストを帯の境目あたりに重ねる */
.rice-lineup-couple {
  display: block;
  margin: 0 auto 12px;
  height: 120px;
  width: auto;
}

/* タイトル・リード */
.rice-lineup-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 6px 0 16px;
  color: #333333;
}

.rice-lineup-lead {
  font-size: 14px;
  line-height: 2;
  color: #5b4a33;
}

/* ラインナップ見出し（※「お米たち」セクション用） */
.rice-lineup-label {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.26em;
  color: #d89a31;
  margin: 6px 0 26px;
}

/* アイコン一覧（※「お米たち」セクション用） */
.rice-lineup-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rice-lineup-item {
  width: 120px;
  text-align: center;
}

/* リンク全体をホバー可能に */
.rice-lineup-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.rice-lineup-icon {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* 品種名 */
.rice-lineup-name {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #b47433;
}

/* ホバー演出 */
.rice-lineup-link:hover {
  transform: translateY(-4px);
}

.rice-lineup-link:hover .rice-lineup-icon {
  transform: scale(1.04);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.24));
}

/* ▼ 「こだわりのつくり方」専用：セクション識別用クラス */
.rice-lineup-method {
  /* 今回はベースと同じ。必要ならここでだけ padding などを変える */
}



/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {

  .rice-lineup {
    padding: 60px 16px 70px;
  }

  .rice-lineup-couple {
    height: 100px;
  }

  .rice-lineup-title {
    font-size: 20px;
    letter-spacing: 0.12em;
  }

  .rice-lineup-lead {
    font-size: 13px;
  }

  .rice-lineup-item {
    width: 30%;
    max-width: 120px;
  }

  .rice-lineup-name {
    font-size: 12px;
  }

  /* 「こだわりのつくり方」セクションも同じく表示されるように */
  .rice-lineup-method {
    padding: 60px 16px 70px;
  }
}

@media (max-width: 480px) {
  .rice-lineup-item {
    width: 45%;
  }

  .rice-lineup-label {
    font-size: 13px;
    letter-spacing: 0.18em;
  }
}

/* ▼マーク */
.rice-lineup-arrow {
  font-size: 12px;
  color: #c1962c; /* 上品な金色 */
  margin-left: 6px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.85;
  display: inline-block;
}

/* ホバーで矢印が少し下に動く */
.rice-lineup-link:hover .rice-lineup-arrow {
  transform: translateY(3px);
  opacity: 1;
}



/* =======================================
   お米の詳細カード
======================================= */

.rice-detail {
  padding: 72px 24px 90px;
  background: #fffaf0;
  position: relative;
}

.rice-detail-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* カード共通 */
.rice-detail-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 26px 32px;
  margin-bottom: 26px;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 左側のアクセントライン */
.rice-detail-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(180deg, #f4c645, #d89a31);
}

/* ホバーでふわっと浮く */
.rice-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.12);
}

/* 画像エリア */
.rice-detail-img {
  flex: 0 0 140px;
  text-align: center;
}

.rice-detail-img img {
  width: 120px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.rice-detail-card:hover .rice-detail-img img {
  transform: translateY(-3px);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.24));
}

/* テキスト側 */
.rice-detail-body {
  flex: 1;
}

.rice-detail-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #d89a31;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.rice-detail-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 10px;
  color: #3a2a17;
}

.rice-detail-text {
  font-size: 14px;
  line-height: 2;
  color: #5b4a33;
  margin: 0 0 14px;
}

/* タグ（特徴） */
.rice-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.rice-detail-tags li {
  padding: 4px 12px 5px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  background: #fff6dd;
  color: #b47433;
}

/* 購入ボタン */
.rice-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #d89a31;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 24px rgba(190, 130, 0, 0.55);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.rice-detail-btn:hover {
  background: #f4c645;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(190, 130, 0, 0.7);
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
  .rice-detail-card {
    padding: 22px 22px 24px;
    gap: 22px;
  }

  .rice-detail-img {
    flex-basis: 120px;
  }

  .rice-detail-title {
    font-size: 20px;
  }

  .rice-detail-text {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .rice-detail {
    padding: 60px 16px 80px;
  }

  .rice-detail-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .rice-detail-img {
    flex-basis: 100px;
  }

  .rice-detail-img img {
    width: 100px;
  }

  .rice-detail-title {
    font-size: 18px;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 560px) {
  .rice-detail-card {
    flex-direction: column;
    align-Items: center;
    text-align: left;
  }

  .rice-detail-img {
    flex-basis: auto;
  }

  .rice-detail-body {
    width: 100%;
  }

  .rice-detail-tags {
    justify-content: flex-start;
  }
}



/* ============================
   お米づくり STEP（左右交互レイアウト）
============================ */

.rice-steps {
  padding: 40px 0 80px;
  background: #fff8e8; /* タイトルと馴染む薄いクリーム */
}

.rice-steps-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 1ステップ＝1カード */
.rice-step-row {
  display: flex;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 32px;
  background: #ffffff;
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  position: relative;
}

.rice-step-row:last-of-type {
  margin-bottom: 0;
}

/* 偶数行は左右反転（PCのみ） */
.rice-step-row--reverse {
  flex-direction: row-reverse;
}

/* 画像を大きめに */
.rice-step-media {
  flex: 0 0 54%;
  border-radius: 18px;
  overflow: hidden;
}

.rice-step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 0.5s ease;
}

.rice-step-row:hover .rice-step-media img {
  transform: scale(1.07);
}

/* テキスト側 */
.rice-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #3a2c17;
}

/* STEP バッジ */
.rice-step-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #fff7df;
  border: 1px solid rgba(244, 198, 69, 0.45);
  margin-bottom: 8px;
}

.rice-step-tag-en {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c89627;
}

.rice-step-tag-num {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f4b645;
}

/* タイトル＆本文 */
.rice-step-title {
  font-size: 18px;
  margin: 4px 0 8px;
}

.rice-step-text {
  font-size: 14px;
  line-height: 1.9;
  color: #5a4526;
}

/* -------------------------
   スマホ・タブレット
-------------------------- */
@media (max-width: 960px) {
  .rice-step-row,
  .rice-step-row--reverse {
    flex-direction: column;
  }

  .rice-step-media {
    flex: none;
  }
}

@media (max-width: 768px) {
  .rice-steps {
    padding: 32px 0 56px;
  }

  .rice-steps-inner {
    padding: 0 16px;
  }

  .rice-step-row {
    padding: 16px 14px 18px;
    gap: 18px;
    border-radius: 18px;
  }

  .rice-step-title {
    font-size: 16px;
  }

  .rice-step-text {
    font-size: 13px;
  }
}



/* ==========================================================
   production.html：スマホ時の改行位置だけを整える
   （レイアウトは元のまま）
========================================================== */
@media (max-width: 768px) {

  /* ▼ ヒーロータイトル（スマホ時 2行中央揃え） */
  .place-hero-title-strong {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.12em;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  /* アイコン（黄色丸）のバランス調整 */
  .place-hero-icon {
    width: 200px;
    max-width: 70vw;
    margin: 24px auto 8px;
  }

  /* ヒーローリード文の <br> をオフにして自然な折り返しに */
  .place-hero .thoughts-hero-lead br {
    display: none;
  }

  /* 新潟のブランド米 セクション：本文の強制改行を解除 */
  .place-brandrice-text p br {
    display: none;
  }

  /* 「白舞ファームのお米たち」「こだわりのつくり方」リード文 */
  .rice-lineup-lead br {
    display: none;
  }

  /* 各ブランド説明テキスト（新之助〜白〈HAKU〉）の <br> 解除 */
  .rice-detail-text br {
    display: none;
  }

  /* STEP 説明文の <br> 解除（1文が途中で切れないように） */
  .rice-step-text br {
    display: none;
  }

  /* 読みやすさ用の行間だけ軽く調整 */
  .place-brandrice-text p,
  .rice-lineup-lead,
  .rice-detail-text,
  .rice-step-text {
    line-height: 1.9;
  }

  /* ▼ ここがポイント：スマホではボケを完全に解除する ▼ */
  .rice-lineup-inner.fade-up,
  .rice-steps-inner.fade-up {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;      /* ← ブラーをゼロに */
  }
}


/* ================================
   こだわり理由 ヒーローセクション quality.html
================================ */

/* セクション背景（既存デザインと統一） */
.quality-hero {
  position: relative;
  padding: 140px 24px 120px;
  overflow: hidden;
  color: #ffffff;
}

.quality-hero::before {
  content: "";
  position: absolute;
  inset: -180px -25% 0;
  background: #f4c645;
  border-radius: 0 0 50% 50%;
  z-index: -1;
}

/* アイコン（中央に配置） */
.quality-hero-icon {
  position: relative;
  width: 240px;
  margin: 0 auto 40px;
}

.quality-hero-icon img {
  width: 100%;
  display: block;
}

/* タイトル（アイコンの上に重ねる） */
.quality-hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: normal;      /* ← 折り返しを許可 */
}

/* 1行目だけ折り返し禁止にして「”こだわり”」を1行固定 */
.quality-hero-title-top{
  display: inline-block;
  white-space: nowrap;
}

/* リード文 */
.quality-hero-lead {
  font-size: 15px;
  margin-top: 12px;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .quality-hero {
    padding: 120px 16px 80px;
  }

  .quality-hero-icon {
    width: 160px;
    margin-bottom: 20px;
  }

  .quality-hero-title {
    font-size: 20px;
    line-height: 1.7;
    width: 90%;           /* 円の中で2〜3行に収める */
  }

  .quality-hero-lead {
    font-size: 14px;
  }
}

@media (max-width: 420px){
  .quality-hero-title-top{
    font-size: 28px; /* 必要なら 26px */
  }
}

/* ================================
   特別栽培米＆エコファーマ セクション
================================ */
.quality-info-section {
  position: relative;
  padding: 80px 20px 100px;
  background: #ffffff;
}

.quality-info-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* セクション見出し */
.quality-info-heading {
  text-align: center;
  margin-bottom: 48px;
  color: #7b5314;
}

.quality-info-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.quality-info-heading h3 {
  font-size: 22px;
  letter-spacing: 0.1em;
}

/* 各カード */
.quality-info-item {
  display: grid;
  grid-template-columns: 1.3fr 2.7fr;
  gap: 32px;
  align-items: center;
  padding: 26px 30px;
  margin-bottom: 28px;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(150, 105, 40, 0.15);
}

/* アイコン側 */
.quality-info-icon {
  text-align: center;
}

.quality-info-icon img {
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

/* テキスト側 */
.quality-info-body {
  color: #3a2a14;
}

.quality-info-body h4 {
  font-size: 20px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.quality-info-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.quality-info-body p {
  font-size: 14px;
  line-height: 2;
  margin-bottom: 0.5em;
}

/* ===== エコファーマ（みどり認定）内の３つの丸ハイライト ===== */
.eco-farmer-item .quality-info-body {
  display: flex;
  flex-direction: column;
}

.eco-points {
  margin-top: 20px;
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: flex-start;

  /* ★ここが重要：3つ横並び固定（折り返し禁止） */
  flex-wrap: nowrap;
}

/* 丸カード：PCは真円で3等分（横並び固定） */
.eco-point {
  /* ★ここが重要：3つを均等に並べる */
  flex: 1 1 0;
  width: auto;
  max-width: 320px;       /* 大きくなりすぎ防止（任意） */

  aspect-ratio: 1 / 1;    /* 真円維持 */
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #f8ffe9, #e7f4cf);
  box-shadow: 0 14px 32px rgba(115, 155, 70, 0.22);
  color: #314018;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 26px 20px;

  /* ★ホバーでふわっと浮く */
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  will-change: transform;
}

.eco-point:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 44px rgba(115, 155, 70, 0.28);
  filter: brightness(1.02);
}

.eco-point h5 {
  font-size: 16px;
  margin: 0 0 14px;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.04em;

  /* ★中身の幅を揃えて重心を安定 */
  width: 210px;
}

/* ▼ 丸の中の文章：左寄せ＋幅統一で改行を綺麗に */
.eco-point ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;

  width: 210px;
  text-align: left;
}

/* ▼ 「・」が単独行にならないように、flexで確実に横並び */
.eco-point li {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  margin: 6px 0;

  word-break: keep-all;
  line-break: strict;
}

.eco-point li::before {
  content: "・";
  flex: 0 0 auto;
  line-height: 1.6;
  transform: translateY(0.05em);
}

/* liの中にspan/pなどがあっても崩れない */
.eco-point li > * {
  margin: 0;
}

/* === レスポンシブ（スマホは縦並びカード化） === */
@media (max-width: 768px) {
  .quality-info-section {
    padding: 56px 16px 80px;
  }

  .quality-info-item {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 18px;
    border-radius: 22px;
  }

  .quality-info-icon img {
    width: 150px;
  }

  .quality-info-heading h3 {
    font-size: 18px;
  }

  .quality-info-body h4 {
    font-size: 17px;
  }

  .quality-info-body p {
    font-size: 13px;
  }

  /* --- ３項目：スマホ用カードレイアウト --- */
  .eco-points {
    margin-top: 18px;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;

    /* ★スマホは縦並びなので折り返し指定は不要（念のため） */
    flex-wrap: nowrap;
  }

  .eco-point {
    flex: none;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;     /* ★PCの真円を解除 */
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f7fff0, #e4f2c9);
    text-align: left;
    align-items: flex-start;
    box-shadow: 0 8px 18px rgba(115, 155, 70, 0.18);
    transition: none;
  }

  .eco-point h5 {
    width: auto;
    font-size: 15px;
    margin-bottom: 6px;
    text-align: left;
  }

  .eco-point ul {
    width: auto;
    font-size: 12px;
    line-height: 1.7;
  }
}



/* ================================
   農機具・設備紹介セクション
================================ */
.quality-machines-section {
  padding: 80px 20px 100px;
  background: #ffffff;
}

.quality-machines-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* セクション見出し */
.quality-machines-heading {
  text-align: center;
  margin-bottom: 50px;
  color: #7b5314;
}

.quality-machines-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.quality-machines-heading h3 {
  font-size: 24px;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.quality-machines-lead {
  font-size: 14px;
  color: #5a4420;
  line-height: 2;
}

/* ================================
   工程フロー + 設備画像（追加）
================================ */
.process-block{
  margin: 0 auto 34px;
  padding: 28px 28px 24px;
  border-radius: 26px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 22px 70px rgba(150,105,40,0.12);
  border: 1px solid rgba(123,83,20,0.12);
}

/* 見出し */
.process-flow-head{
  text-align: center;
  margin-bottom: 16px;
  color: #7b5314;
}

.process-flow-eyebrow{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.9;
}

.process-flow-title{
  font-size: 18px;
  letter-spacing: 0.08em;
  margin: 0;
  color: #5a4420;
}

/* 工程：PCは 4×2 で整える */
.process-steps{
  list-style: none;
  padding: 0;
  margin: 16px 0 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 14px;
}

/* 各工程カード */
.process-step{
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px;
  text-align: center;
  border: 1px solid rgba(123,83,20,0.12);
  box-shadow: 0 10px 26px rgba(150,105,40,0.10);
}

.step-label{
  display: inline-block;
  font-size: 13px;
  color: #3a2a14;
  letter-spacing: 0.04em;
}

/* “段→段”の矢印（PCのみ中央に1つ） */
.process-steps{
  position: relative;
}
.process-steps::after{
  content: "↓";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(50% - 10px);
  font-size: 16px;
  color: rgba(90,68,32,0.55);
}

/* 設備画像2枚 */
.process-machines{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.process-machine-card{
  margin: 0;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(123,83,20,0.12);
  box-shadow: 0 18px 45px rgba(150,105,40,0.12);

  display: flex;
  flex-direction: column; /* ← 追加 */
}

/* ここが重要：画像を「切らずに全体表示」 */
.process-machine-media{
  width: 100%;
  height: 220px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}


.process-machine-media img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* ★切れない */
  display: block;
}

.process-machine-card figcaption{
  margin-top: auto;          /* ← これが肝 */
  padding: 12px 14px 14px;
  font-size: 12px;
  color: #3a2a14;
  line-height: 1.7;
  text-align: center;
}

/* ================================
   ギャラリー
================================ */
.machine-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.machine-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(150, 105, 40, 0.15);
  overflow: hidden;
  text-align: center;
  padding-bottom: 18px;
}

.machine-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.machine-caption {
  font-size: 13px;
  padding: 14px 16px 4px;
  color: #3a2a14;
  line-height: 1.7;
}

/* === SP === */
@media (max-width: 768px) {

  .quality-machines-heading h3 {
    font-size: 18px;
  }

  .process-block{
    padding: 20px 16px 16px;
    border-radius: 22px;
    margin-bottom: 24px;
  }

  .process-flow-title{
    font-size: 16px;
  }

  /* SPは 2列×4段 */
  .process-steps{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 10px;
    margin-bottom: 14px;
  }

  /* SPは中央矢印を消す（綺麗に見せる） */
  .process-steps::after{ display: none; }

  .process-machines{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .process-machine-media{
    height: 200px;
  }

  .machine-gallery {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .machine-card img {
    height: 200px;
  }
}

/* ==========================================================
   quality.html：スマホ時の改行位置を整える（br 無効化）
========================================================== */
@media (max-width: 768px) {
  .quality-hero-lead br,
  .quality-info-body p br,
  .quality-machines-lead br,
  .machine-caption br {
    display: none;
  }

  .quality-hero-lead,
  .quality-info-body p,
  .quality-machines-lead,
  .machine-caption {
    line-height: 1.9;
  }
}



/* ================================
   美味しいごはんの食べ方 howto.html
================================ */
/* ============================
   美味しいお米の食べ方 ヒーロー（中身だけ調整）
   ※ quality-hero の楕円形状は触らない
============================ */

/* 英語見出し */
.howto-hero .thoughts-hero-eyebrow {
  letter-spacing: 0.18em;
  font-size: 12px;
  text-align: center;
  margin-bottom: 24px;
}

/* お米アイコン＋タイトル */
.howto-hero-icon {
  position: relative;
  display: inline-block;
}

/* 湯気コンテナ */
.howto-steam {
  position: absolute;
  left: 50%;
  bottom: 55%;                   /* 米の上あたりから湯気が出る */
  transform: translateX(-50%);
  width: 110px;
  height: 100px;
  pointer-events: none;
  z-index: 3;
}

/* 湯気本体（3本） */
.howto-steam span {
  position: absolute;
  bottom: 0;
  width: 22px;
  height: 60px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  filter: blur(5px);
  opacity: 0;
  animation: steamFloat 4.5s infinite ease-in-out;
}

/* 3本それぞれランダム配置＋タイミング */
.howto-steam span:nth-child(1) {
  left: 15px;
  animation-delay: 0s;
}

.howto-steam span:nth-child(2) {
  left: 45px;
  animation-delay: 1.3s;
  width: 26px;
  height: 70px;
}

.howto-steam span:nth-child(3) {
  left: 75px;
  animation-delay: 2.4s;
  width: 18px;
  height: 55px;
}

/* ゆらゆら湯気アニメーション */
@keyframes steamFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  40% {
    transform: translate(-6px, -28px) scale(1.1);
    opacity: 0.65;
  }
  70% {
    transform: translate(8px, -55px) scale(0.9);
    opacity: 0.4;
  }
  100% {
    transform: translate(-4px, -85px) scale(0.8);
    opacity: 0;
  }
}


/* rice.png */
.howto-hero-icon img {
  display: block;
  width: 170px;
  max-width: 48vw;
  margin: 0 auto;
}

/* rice.png の中央にタイトルを重ねる */
.howto-hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
  text-align: center;
  line-height: 1.6;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  pointer-events: none;
}

/* リード文 */
.howto-hero-lead {
  margin-top: 32px;
  font-size: 14px;
  text-align: center;
  line-height: 2;
  color: #fffdf2;
}

/* ============================
   写真エリア
============================ */

.howto-photo-section {
  background: #ffffff;
  padding: 60px 24px 80px;
}

.howto-photo-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.howto-photo-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
}

.howto-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* 右上の縦書きコピー */
.howto-photo-vertical {
  position: absolute;
  top: 50px;
  right: 65px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 20px;
  line-height: 1.9;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* ============================
   レスポンシブ（スマホ）
============================ */

@media (max-width: 768px) {

  /* rice.png 小さく */
  .howto-hero-icon img {
    width: 140px;
  }

  /* 中央タイトルの文字も調整 */
  .howto-hero-title {
    font-size: 18px;
    line-height: 1.7;
    width: 90%;
  }

  .howto-hero-lead {
    font-size: 13px;
    margin-top: 24px;
  }

  .howto-photo-section {
    padding: 40px 16px 60px;
  }

  .howto-photo-frame {
    border-radius: 20px;
  }

  .howto-photo-vertical {
    top: 16px;
    right: 12px;
    font-size: 11px;
  }
}


/* ================================
   美味しいお米を食べよう（炊き方ステップ）
================================ */

.howto-steps-section {
  background: #fffaf1;
  padding: 80px 24px 100px;
}

.howto-steps-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* 見出しまわり */
.howto-steps-heading {
  text-align: center;
  color: #c86a16;
  margin-bottom: 40px;
}

.howto-steps-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.howto-steps-title {
  font-size: 28px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.howto-steps-lead {
  font-size: 14px;
  line-height: 2;
  color: #8a6a3a;
}

/* グリッドレイアウト（6個＝PCは3列×2段が一番綺麗） */
.howto-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ★ 4→3 */
  gap: 28px;
  align-items: stretch;
}

/* カード共通デザイン */
.howto-step-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 16px 22px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* カード上部のカラー帯（アクセント） */
.howto-step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  height: 10px;
  background: linear-gradient(90deg, #f27339, #f2b832);
}

/* Stepタグ */
.howto-step-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #fff4e2;
  border-radius: 8px;
  border-left: 6px solid #f27339;
}

.howto-step-number {
  font-weight: 700;
  font-size: 18px;
  color: #f27339;
  letter-spacing: 0.05em;
}

.howto-step-kicker {
  font-weight: 600;
  font-size: 12px;
  color: #8a6a3a;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 画像 */
.howto-step-figure {
  margin: 8px 0 12px;
  text-align: center;
}

.howto-step-figure img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* タイトル・本文 */
.howto-step-title {
  font-size: 15px;
  margin: 4px 0 8px;
  color: #f27339;
  font-weight: 600;
  position: relative;
  padding-bottom: 6px;
}

/* 最初は線は0%（見えない状態） */
.howto-step-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: #f27339;
  border-radius: 2px;
  transition: width 0.8s ease;
}

/* JSで .active が付いたら 100% まで伸びる */
.howto-step-title.active::after {
  width: 100%;
}

.howto-step-text {
  font-size: 13px;
  line-height: 1.9;
  color: #666;
}

/* ホバー時に少し浮かせる */
.howto-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 偶数カードは少し色味を変えてメリハリ */
.howto-step-card:nth-child(2n)::before {
  background: linear-gradient(90deg, #f2b832, #f27339);
}

/* ================================
   美味しく食べるポイント
================================ */

.howto-point-section {
  background: #fffaf1;
  padding: 0 24px 100px;
}

.howto-point-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.howto-point-heading {
  text-align: center;
  margin-bottom: 30px;
  color: #c86a16;
}

.howto-point-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.howto-point-title {
  display: inline-block;
  font-size: 26px;
  letter-spacing: 0.08em;
  padding-bottom: 10px;
  border-bottom: 3px solid #f27339;
}

.howto-point-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.howto-point-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 30px 28px 32px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.06);
  border-top: 10px solid #f2b832;
  text-align: center;
}

.howto-point-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff4e2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.howto-point-card-title {
  font-size: 18px;
  color: #f27339;
  margin-bottom: 12px;
  font-weight: 600;
}

.howto-point-text {
  font-size: 14px;
  line-height: 2;
  color: #666;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .howto-point-section {
    padding: 0 16px 80px;
  }

  .howto-point-title {
    font-size: 22px;
  }

  .howto-point-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .howto-point-card {
    padding: 24px 18px 26px;
    border-radius: 20px;
  }

  .howto-point-text {
    font-size: 13px;
    line-height: 1.9;
  }

  .howto-point-text br {
    display: none;
  }
}

/* ============================
   レスポンシブ
============================ */

@media (max-width: 1024px) {
  .howto-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 768px) {
  .howto-steps-section {
    padding: 60px 16px 80px;
  }

  .howto-steps-title {
    font-size: 24px;
  }

  .howto-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .howto-step-card {
    padding: 14px 12px 18px;
  }
}

@media (max-width: 520px) {
  .howto-steps-grid {
    grid-template-columns: 1fr;
  }

  .howto-steps-title {
    font-size: 22px;
  }
}


/* ==========================================================
   howto.html：スマホ時の改行位置を調整（<br> 無効化）
========================================================== */
@media (max-width: 768px) {

  /* ヒーローリード文の <br> をオフにして自然な折り返しに */
  .howto-hero-lead br {
    display: none;
  }

  /* ステップセクションのリード文・本文の <br> を解除 */
  .howto-steps-lead br,
  .howto-step-text br {
    display: none;
  }

  /* 読みやすい行間を統一 */
  .howto-hero-lead,
  .howto-steps-lead,
  .howto-step-text {
    line-height: 1.9;
  }
}



/* contact.css */
/* ================================
   お問い合わせページ
================================ */

body.page-contact {
  background: #fff;
  color: #333;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.contact-section {
  padding: 80px 20px 100px;
}

.contact-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* 見出し */
.contact-heading {
  text-align: center;
  margin-bottom: 40px;
}

.contact-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c86a16;
  margin-bottom: 10px;
}

.contact-title {
  font-size: 26px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.contact-lead {
  font-size: 14px;
  line-height: 2;
  color: #666;
}

.contact-note {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

.required-mark {
  color: #d9534f;
  font-size: 12px;
}

/* フォーム全体 */
.contact-form {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 26px 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
}

/* 各行レイアウト */
.form-row {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-row:last-child {
  border-bottom: none;
}

.form-label {
  flex: 0 0 190px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

.form-field {
  flex: 1;
}

/* 入力要素 */
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
  background: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #f2b832;
  box-shadow: 0 0 0 2px rgba(242, 184, 50, 0.2);
  background-color: #fff;
}

/* プライバシーエリア */
.privacy-row {
  align-items: flex-start;
}

.privacy-box {
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fcfcfc;
  max-height: 260px;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.8;
  position: relative;
}

/* スクロールグラデーション（上端） */
.privacy-box::before {
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0));
}

/* 下端グラデーション */
.privacy-box::after {
  content: "";
  position: sticky;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0));
}

.privacy-box__inner {
  color: #555;
}

.privacy-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.privacy-subtitle {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #999;
  margin-bottom: 10px;
}

.privacy-text {
  margin-bottom: 12px;
}

.privacy-note {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.privacy-note-small {
  font-size: 11px;
  color: #999;
}

/* 同意チェック */
.privacy-consent {
  margin-top: 8px;
}

.privacy-consent-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.privacy-consent-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* チェック無効時の見た目 */
.privacy-consent-label input[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 送信ボタン */
.form-row-submit {
  justify-content: center;
  border-bottom: none;
  padding-top: 26px;
}

.contact-submit {
  min-width: 220px;
  padding: 12px 30px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f27339, #f2b832);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
}

.contact-submit:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* ============================
   レスポンシブ
============================ */

@media (max-width: 768px) {
  .contact-section {
    padding: 60px 14px 80px;
  }

  .contact-form {
    padding: 22px 18px 26px;
  }

  .form-row {
    flex-direction: column;
    gap: 6px;
  }

  .form-label {
    flex: none;
    padding-top: 0;
  }

  .privacy-box {
    max-height: 220px;
  }
}



/* privacy.css */
/* ================================
   プライバシーポリシー
================================ */

body.page-privacy {
  background: #fff;
  color: #333;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.privacy-section {
  padding: 80px 20px 100px;
}

.privacy-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* 見出し */
.privacy-heading {
  text-align: center;
  margin-bottom: 40px;
}

.privacy-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c86a16;
  margin-bottom: 10px;
}

.privacy-title {
  font-size: 26px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.privacy-lead {
  font-size: 14px;
  line-height: 2;
  color: #666;
}

/* カード */
.privacy-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 34px 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
}

.privacy-body {
  font-size: 14px;
  line-height: 2;
  color: #555;
}

.privacy-block-title {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}

.privacy-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 28px 0 8px;
}

.privacy-list {
  padding-left: 18px;
  margin-bottom: 12px;
}

.privacy-list li {
  margin-bottom: 6px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .privacy-section {
    padding: 60px 14px 80px;
  }

  .privacy-card {
    padding: 24px 20px;
  }

  .privacy-title {
    font-size: 22px;
  }

  .privacy-body {
    font-size: 13px;
  }
}



/* tokusho.css */
/* ================================
   特定商取引法に基づく表記
================================ */

body.page-tokusho {
  background: #fff;
  color: #333;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.tokusho-section {
  padding: 80px 20px 100px;
}

.tokusho-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* 見出し */
.tokusho-heading {
  text-align: center;
  margin-bottom: 40px;
}

.tokusho-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c86a16;
  margin-bottom: 10px;
}

.tokusho-title {
  font-size: 26px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.tokusho-lead {
  font-size: 14px;
  line-height: 2;
  color: #666;
}

/* カード */
.tokusho-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 26px 30px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
}

.tokusho-list {
  margin: 0;
}

/* 行ごとのレイアウト */
.tokusho-row {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}

.tokusho-row:last-child {
  border-bottom: none;
}

.tokusho-row dt {
  flex: 0 0 200px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.tokusho-row dd {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #555;
}

.tokusho-row a {
  color: #c86a16;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tokusho-note {
  font-size: 12px;
  color: #888;
  display: inline-block;
  margin-top: 2px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .tokusho-section {
    padding: 60px 14px 80px;
  }

  .tokusho-card {
    padding: 22px 18px 24px;
  }

  .tokusho-title {
    font-size: 22px;
  }

  .tokusho-row {
    flex-direction: column;
    gap: 6px;
  }

  .tokusho-row dt {
    flex: none;
  }

  .tokusho-row dd {
    font-size: 13px;
  }
}


/* =========================================
   PC / SP 表示制御ユーティリティ
========================================= */
.pc-only {
  display: inline;
}

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: inline;
  }
}

/* =========================================
   ファーム概要ページ共通レイアウト
========================================= */

.information-page {
  padding-top: 120px;
}

/* セクション共通 */
.info-hero,
.info-profile,
.info-features,
.info-history,
.info-management {
  padding: 80px 0;
}

.info-profile,
.info-features,
.info-history,
.info-management {
  background-color: #f8f4ec;
}

.info-hero-inner,
.info-profile-inner,
.info-features-inner,
.info-history-inner,
.info-management-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 見出し共通 */
.info-section-title {
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #222;
  margin-bottom: 18px;
}

.info-section-title.center {
  text-align: center;
}

/* =========================================
   ヒーローセクション
========================================= */
.info-hero {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 55%),
              radial-gradient(circle at bottom right, rgba(248, 228, 190, 0.8), transparent 60%),
              #fff;
}

.info-hero-inner {
  text-align: center;
}

.info-hero-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #b28a3b;
  margin-bottom: 16px;
}

.info-hero-title {
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  font-size: 2.6rem;
  letter-spacing: 0.24em;
  margin-bottom: 18px;
  color: #222;
}

.info-hero-lead {
  font-size: 0.98rem;
  line-height: 2;
  color: #555;
}

/* タグ風リスト */
.info-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

.info-hero-tags li {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 8px 16px;
  border: 1px solid rgba(178, 122, 40, 0.4);
  background-color: rgba(255, 255, 255, 0.75);
  color: #7b5a26;
}

/* =========================================
   ファームプロフィール
========================================= */

.info-profile-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: flex-start;
}

.info-profile-text p {
  font-size: 0.98rem;
  line-height: 2;
  color: #444;
}

.info-profile-text p + p {
  margin-top: 14px;
}

.info-profile-data {
  background-color: #fff;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.info-data-list {
  margin: 0;
}

.info-data-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.info-data-row:last-child {
  border-bottom: none;
}

.info-data-row dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  letter-spacing: 0.16em;
}

.info-data-row dd {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
}

/* =========================================
   3つの要素
========================================= */

.info-features-inner {
  max-width: 1120px;
}

.info-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 32px;
}

.info-feature-card {
  position: relative;
  background-color: #fff;
  border-radius: 18px;
  padding: 24px 20px 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.info-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(239, 205, 120, 0.35), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.info-feature-card:hover::before {
  opacity: 1;
}

.info-feature-label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c3993a;
  margin-bottom: 6px;
}

.info-feature-card h4 {
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: #222;
  letter-spacing: 0.12em;
}

.info-feature-card p {
  font-size: 0.9rem;
  line-height: 1.9;
  color: #444;
}

/* =========================================
   歴史とこれから
========================================= */

.info-history-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.info-history-text p {
  font-size: 0.95rem;
  line-height: 2;
  color: #444;
}

.info-history-text p + p {
  margin-top: 14px;
}

.info-history-photo {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.info-history-photo-main {
  flex: 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09);
}

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

.info-history-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  color: #666;
  align-self: center;
}

/* =========================================
   運営・販売について
========================================= */

.info-management-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}

.info-management-body {
  margin-top: 18px;
  max-width: 720px;      /* ← テキスト幅を絞って読みやすく */
  margin-left: auto;
  margin-right: auto;
}

.info-management-body p {
  font-size: 0.95rem;
  line-height: 2;
  color: #444;
  text-align: left;
}

.info-management-body p + p {
  margin-top: 14px;
}

.info-management-body strong {
  font-weight: 600;
  color: #b27f25;
}

.info-management-note {
  font-size: 0.85rem;
  color: #777;
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

/* =========================================
   沿革（タイムライン）
========================================= */

.info-chronology {
  padding: 80px 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(239, 205, 120, 0.18), transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.65), transparent 55%),
    #f8f4ec;
}

.info-chronology-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.info-chronology-head {
  text-align: center;
  margin-bottom: 26px;
}

.info-chronology-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #b28a3b;
  margin-bottom: 10px;
}

.info-chronology-lead {
  font-size: 0.95rem;
  line-height: 2;
  color: #555;
  margin-top: 10px;
}

/* 外枠カード */
.info-chronology-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(178, 122, 40, 0.16);
  border-radius: 22px;
  padding: 26px 26px 6px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.info-chronology-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(239, 205, 120, 0.28), transparent 55%);
  pointer-events: none;
  opacity: 0.9;
}

/* タイムライン本体 */
.info-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px 0 14px;
}

/* 縦ライン */
.info-timeline::before {
  content: "";
  position: absolute;
  left: 125px;
  top: 6px;
  bottom: 18px;
  width: 1px;
  background: rgba(178, 122, 40, 0.22);
}

/* 1行 */
.info-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 22px;
  padding: 18px 0 22px;
}

.info-timeline-item + .info-timeline-item {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 左（年） */
.info-timeline-meta {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding-top: 2px;
}

.info-timeline-year {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: #7b5a26;
  white-space: nowrap;
}

.info-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #c3993a;
  box-shadow: 0 0 0 6px rgba(195, 153, 58, 0.14);
  margin-top: 4px;
}

/* 右（本文） */
.info-timeline-body {
  position: relative;
  padding-right: 6px;
}

.info-timeline-title {
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: #222;
  margin-bottom: 8px;
}

.info-timeline-text {
  font-size: 0.92rem;
  line-height: 2;
  color: #444;
}

/* 小さなタグ */
.info-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.info-timeline-tags li {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  border-radius: 999px;
  padding: 7px 12px;
  border: 1px solid rgba(178, 122, 40, 0.22);
  background: rgba(255, 255, 255, 0.75);
  color: #7b5a26;
}

/* hover（上品に） */
.info-timeline-item:hover .info-timeline-dot {
  box-shadow: 0 0 0 7px rgba(195, 153, 58, 0.18);
}

/* =========================================
   レスポンシブ／スマホ改行制御
========================================= */

@media (max-width: 1024px) {
  .info-profile-inner,
  .info-history-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-history-photo {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .information-page {
    padding-top: 90px;
  }

  .info-hero,
  .info-profile,
  .info-features,
  .info-history,
  .info-management,
  .info-chronology {
    padding: 56px 0;
  }

  .info-hero-title {
    font-size: 2.0rem;
    letter-spacing: 0.18em;
  }

  .info-section-title {
    font-size: 1.6rem;
  }

  .info-hero-lead {
    text-align: left;
  }

  .info-hero-tags {
    justify-content: flex-start;
  }

  .info-profile-inner {
    gap: 28px;
  }

  .info-profile-data {
    padding: 20px 18px;
  }

  .info-data-row {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }

  .info-features-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-history-inner {
    gap: 28px;
  }

  .info-history-photo {
    flex-direction: row-reverse;
  }

  .info-history-vertical {
    font-size: 0.82rem;
  }

  .info-management-inner {
    padding: 0 20px;
  }

  /* スマホ時：手動改行は sp-only 以外OFFにしてスッキリ */
  .info-hero-lead br:not(.sp-only),
  .info-profile-text br:not(.sp-only),
  .info-feature-card br:not(.sp-only),
  .info-history-text br:not(.sp-only),
  .info-management-body br:not(.sp-only),
  .info-chronology-lead br:not(.sp-only),
  .info-timeline-text br:not(.sp-only) {
    display: none;
  }

  /* ===== 沿革（スマホ） ===== */
  .info-chronology-card {
    padding: 20px 18px 6px;
    border-radius: 18px;
  }

  .info-timeline::before {
    left: 5px;
    top: 36px;
  }

  .info-timeline-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 30px;
  }

  .info-timeline-meta {
    justify-content: flex-start;
    gap: 10px;
  }

  .info-timeline-year {
    letter-spacing: 0.18em;
  }

  .info-timeline-dot {
    position: absolute;
    left: -30px;
    top: 6px;
    margin-top: 0;
  }
}

/* =========================================
   沿革：写真ビジュアル 改良版
========================================= */

.info-chronology-visual {
  max-width: 1040px;
  margin: 0 auto 28px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 22px;
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(178, 122, 40, 0.14);
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(90, 60, 20, 0.08);
}

.info-chronology-photo {
  margin: 0;
  height: 300px;
  border-radius: 22px;
  overflow: hidden;
  background: #f8f1df;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.info-chronology-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  background: #f8f1df;
  filter: sepia(0.12) contrast(1.02);
}

.info-chronology-photo--person img {
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}

.info-chronology-photo--field img {
  object-fit: cover;
  object-position: center center;
}

.info-chronology-center {
  text-align: center;
  color: #3b2a13;
}

.info-chronology-period {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #b28a3b;
  margin-bottom: 12px;
}

.info-chronology-big {
  font-family: "Cormorant Garamond", serif;
  font-size: 72px;
  line-height: 1;
  color: #c58a1d;
  margin: 0 0 8px;
}

.info-chronology-copy {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.12em;
}

@media (max-width: 768px) {
  .info-chronology-visual {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
    border-radius: 24px;
  }

  .info-chronology-photo {
    height: auto;
  }

  .info-chronology-photo img {
    aspect-ratio: 4 / 3;
  }

  .info-chronology-center {
    order: -1;
    padding: 6px 0 2px;
  }

  .info-chronology-big {
    font-size: 56px;
  }

  .info-chronology-copy {
    font-size: 13px;
  }
}





/*
  ===============================================================
  フッター 共通
  ===============================================================
*/
/* ▼ 白舞ファーム フッター ▼ */

#footer {
  margin-top: 20px;
  background: #f5f5f5;
  font-size: 0.9rem;
  position: relative;  /* ← 背景動画より前に出す */
  z-index: 2;
}

/* TOPページだけ margin を大きくする */
body.tpage-top #footer {
  margin-top: 250px;
}

/* 上の黄色エリア（ロゴ＋住所） */
.farm-footer-main {
  background: #f4c645;
  color: #ffffff;
}

.farm-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 24px 18px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

/* 左：ロゴ＋テキスト */
.farm-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.farm-footer-logo-wrap {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.farm-footer-logo {
  max-width: 80%;
  height: auto;
}

.farm-footer-brand-text {
  color: #ffffff;
}

.farm-footer-brand-en {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.farm-footer-brand-jp {
  font-size: 1.3rem;
  font-weight: 600;
}

/* 右：住所＋メール */
.farm-footer-contact {
  text-align: right;
}

.farm-footer-address {
  line-height: 1.8;
  margin-bottom: 8px;
}

.farm-footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
}

.farm-footer-mail-icon {
  width: 18px;
  height: auto;
}

/* ▼ ここから下は「お米イラスト背景」側のフッター ▼ */

/* マップ */
.farm-footer-map-wrap {
  margin-top: 0;
}

.farm-footer-map {
  width: 100%;
  height: 320px;
  border: none;
}

/* コピーライト */
.farm-footer-bottom {
  text-align: center;
  padding: 14px 10px 20px;
  background: #f5f5f5;
  color: #777777;
  font-size: 0.78rem;
}

/* ===========================
   フッター追加エリア（稲イラスト背景）
=========================== */

.footer-extra-area {
  position: relative;
  width: 100%;
  padding: 60px 0 320px;                /* 上・下の高さ調整 */
  overflow: hidden;
}

.footer-extra-bg {
  position: absolute;
  inset: 0;
  background: url("../img/all/footer.jpg") no-repeat center bottom / cover;
  opacity: 1;
  z-index: 0;
}

/* 中の配置エリア（基本は右寄せ） */
.footer-extra-content {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

/* 上側：Online Shop + SNS をまとめるグループ */
.footer-shop-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --- ラベル（オンラインショップ / SNS） --- */
.footer-shop-label,
.footer-sns-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #d8a628;          /* ボタンの色に合わせる */
  text-align: left;
  width: 220px;            /* ボタン画像の左端に合わせる用の幅 */
  line-height: 1.2;
}

/* Online Shop：ラベルとボタンの距離を詰める */
.footer-shop-label {
  margin: 0 0 10px 0;
}

/* 購入ボタン */
.footer-buy-btn {
  margin: 0;
  display: block;
}

.footer-buy-btn img {
  width: 220px;
  height: auto;
  display: block;
  transition: transform 0.25s ease;
}

.footer-buy-btn:hover img {
  transform: translateY(-3px);
}

/* SNS：ボタンとの距離だけ少し空ける → ラベルとアイコンは詰める */
.footer-sns-label {
  margin: 30px 0 10px 0;
}

/* SNSアイコン横並び */
.footer-sns-wrap {
  display: flex;
  gap: 12px;
  width: 220px;
  margin: 0;
}

.footer-sns-wrap img {
  width: 32px;
  height: auto;
  display: block;
  transition: opacity 0.2s ease;
}

.footer-sns-wrap img:hover {
  opacity: 0.7;
}

/* ▼ ナビ：稲イラスト背景の「中央あたり」に配置する版 ▼ */
.footer-extra-content .farm-footer-nav {
  align-self: center;        /* 親が align-items: flex-end なので、自分だけ中央へ */
  max-width: 880px;
  width: 100%;
  margin: 70px auto 40px;    /* 上下位置の微調整（背景の真ん中あたりに） */
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  border-top: none;          /* 上の黄色ブロックのボーダーは使わない */
}

.footer-extra-content .farm-footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.86rem;
  position: relative;
  opacity: 0.9;
  letter-spacing: 0.06em;
}

.footer-extra-content .farm-footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #ffffff;
  transition: width 0.25s ease-out;
}

.footer-extra-content .farm-footer-nav a:hover {
  opacity: 1;
}

.footer-extra-content .farm-footer-nav a:hover::after {
  width: 100%;
}

/* 認定マーク：右下に配置 */
.footer-cert-wrap {
  display: flex;
  gap: 24px;
  width: auto;
  justify-content: flex-end;
  margin-top: 200px;          /* 上のOnlineShop+SNS＋ナビとの距離 */
  padding-right: 10px;
}

.footer-cert-wrap img {
  width: 100px;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
}

/* ナビ文字色をオレンジに変更 */
.footer-extra-content .farm-footer-nav a {
  color: #d8a628 !important;
}

.footer-extra-content .farm-footer-nav a::after {
  background: #d8a628 !important;
}

/* ---------------------------------------
   TOPページだけ margin を大きくする
   PC（769px以上）
--------------------------------------- */
@media (min-width: 769px) {
  body.page-top #footer {
    margin-top: 250px;
  }
}

/* ===========================
   スマホ（〜768px）
=========================== */
@media (max-width: 768px) {

    #footer {
    margin-top: 20px;     /* 全ページ共通で20px */
  }
  body.page-top #footer {
    margin-top: 150px;     /* TOPページもスマホでは20pxに統一 */
  }

  .farm-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .farm-footer-contact {
    text-align: left;
  }

  .footer-extra-area {
    padding: 80px 0 140px;
  }

  .footer-extra-content {
    align-items: center;       /* 全体を中央寄せに */
  }

  .footer-shop-group {
    align-items: center;
  }

  .footer-shop-label,
  .footer-sns-label {
    width: auto;
    text-align: center;
  }

  .footer-buy-btn img {
    width: 180px;
  }

  .footer-sns-wrap {
    width: auto;
    justify-content: center;
  }

  /* ナビ：スマホは少し詰める */
  .footer-extra-content .farm-footer-nav {
    margin: 40px auto 30px;
    gap: 10px 20px;
    padding: 0 16px;
    font-size: 0.8rem;
  }

  .footer-cert-wrap {
    justify-content: center;
    margin-top: 32px;
    padding-right: 0;
  }

  .footer-cert-wrap img {
    width: 70px;
  }
}

/* フッター終了 */


/* =========================
   Instagram（最新投稿）
   PC：3列×2行=6枚
   SP：3列×3行=9枚
   高級感＋ホバー強化版（丸ごと差し替えOK）
========================= */

.insta-section{
  padding: 72px 16px;
}

.insta-header{
  text-align:center;
  margin-bottom: 22px;
}

.insta-label-ja{
  display:block;
  font-size: 14px;
  letter-spacing: .18em;
  opacity: .75;
  margin-bottom: 6px;
}

.insta-title{
  font-size: 32px;
  margin: 0;
  letter-spacing: .10em;
  font-weight: 500;
}

.insta-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* PCもSPも横3枚 */
  gap: 16px;
}

/* カード本体（上質な枠＋影） */
.insta-item{
  display:block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.70) inset;
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* 画像 */
.insta-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(1.02) contrast(1.03);
}

/* 角の“光” */
.insta-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 400px at 10% 0%,
      rgba(255,255,255,.55),
      rgba(255,255,255,0) 55%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events:none;
}

/* 右下のさりげない丸（アイコン風） */
.insta-item::before{
  content:"";
  position:absolute;
  right:10px;
  bottom:10px;
  width:34px;
  height:34px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;
}

/* Hover：浮く＋ズーム＋光 */
.insta-item:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 44px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.75) inset;
}
.insta-item:hover img{
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1.06);
}
.insta-item:hover::after{
  opacity: 1;
}
.insta-item:hover::before{
  opacity: 1;
  transform: translateY(0);
}

.insta-more{
  text-align:center;
  margin-top: 22px;
}

.insta-more-btn{
  display:inline-block;
  padding: 12px 44px;
  border: 1px solid rgba(0,0,0,.30);
  border-radius: 10px;
  text-decoration:none;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  transition: transform .25s ease, background .25s ease;
}
.insta-more-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.75);
}

/* PC：6枚だけ表示（7枚目以降を隠す） */
@media (min-width: 769px){
  .insta-item:nth-child(n+7){
    display:none;
  }
}

/* SP：9枚表示（3×3） */
@media (max-width: 768px){
  .insta-section{ padding: 52px 12px; }
  .insta-grid{ gap: 10px; }
  .insta-title{ font-size: 26px; }
}

/* タップ端末は過剰演出になりがちなので控えめ */
@media (hover: none){
  .insta-item:hover{ transform:none; }
  .insta-item:hover img{ transform:none; }
  .insta-item::after,
  .insta-item::before{ display:none; }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .insta-item,
  .insta-item img,
  .insta-item::after,
  .insta-item::before,
  .insta-more-btn{
    transition: none !important;
  }
}





/* =========================================
   まずはお試し 固定バッジ(右下・全ページ共通)
   ========================================= */
.trial-fab {
  position: fixed;
  right: 22px;
  bottom: 32px;             /* 右下いちばん下(★位置はここで調整) */
  z-index: 1050;            /* メニュー(1090〜)より下・本文より上 */
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(140deg, #e6b355 0%, #d89a31 45%, #b38b2a 100%);
  box-shadow: 0 10px 26px rgba(179, 139, 42, 0.45);
  animation: trialFloat 3.4s ease-in-out infinite;
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}

/* 内側の細いリングで上品に */
.trial-fab::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.trial-fab:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 32px rgba(179, 139, 42, 0.6);
}

.trial-fab-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  opacity: 0.9;
}

.trial-fab-main {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.trial-fab-sub {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  opacity: 0.95;
  white-space: nowrap;
}

@keyframes trialFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 768px) {
  .trial-fab {
    right: 12px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 76px;
    height: 76px;
  }
  .trial-fab-en   { font-size: 7.5px; }
  .trial-fab-main { font-size: 12.5px; }
  .trial-fab-sub  { font-size: 7px; letter-spacing: 0.05em; }
}

/* =========================================================
   フッター: LINE公式アカウント(友だち追加)
   SNSアイコンの下に、同じ220px幅・同じラベル書式で並べる
   ========================================================= */
.footer-line-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #d8a628;
  text-align: left;
  width: 220px;
  line-height: 1.2;
  margin: 26px 0 10px 0;
}
.footer-line-wrap {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.footer-line-wrap .line-add-btn { display: inline-block; line-height: 0; transition: opacity 0.2s ease; }
.footer-line-wrap .line-add-btn:hover { opacity: 0.8; }
.footer-line-note { font-size: 0.72rem; letter-spacing: 0.04em; color: #7a6a52; line-height: 1.6; }
@media (max-width: 768px) {
  .footer-line-label { width: auto; text-align: center; }
  .footer-line-wrap { width: auto; align-items: center; }
}