:root {
      --primary-color: #b7895b;        /* メインのアクセント（茶系） */
      --secondary-color: #d3b38c;      /* サブのアクセント（薄めのベージュ） */
      --bg-color: #f9f4ee;            /* 背景をクラフト感のあるベージュ寄りに */
      --text-color: #4b3b2a;          /* テキストは濃いめの茶色 */
      --dark-bg: #3d2e1e;             /* フッターなど暗い背景に使う色 */
      --white: #fff;                  /* 白 */
    }

    /* ====== BASIC STYLES ====== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* クラフト紙風テクスチャを全体背景に設定 */
    body {
      background: var(--bg-color) /* カラー */;
      color: var(--text-color);
      font-family: 'Sawarabi Mincho', sans-serif; /* ベースは和文フォント */
      overflow-x: hidden;
      line-height: 1.6;
      /* テクスチャを使う場合
      background-image: url('paper_texture.png');
      background-repeat: repeat;
      */
    }
    
    /* 見出しなど、一部手書きっぽいニュアンスを付与 */
    h1, h2, h3 {
      font-family: 'Shadows Into Light', cursive; /* 手書き風フォント */
    }

    /* 空行追加 */
    .space {
      margin-top: 1.8em; 
    }  

    /* ====== SKIP LINK (アクセシビリティ向上) ====== */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--primary-color);
      color: var(--white);
      padding: 8px 16px;
      z-index: 100;
      transition: top 0.3s ease;
      text-decoration: none;
    }
    .skip-link:focus {
      top: 0;
    }

    /* ===================== LOADING ANIMATION ===================== */
    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    #loader-wrapper.hidden {
      opacity: 0;
      visibility: hidden;
    }
    .loader-logo {
      width: 150px;
      animation: fadeInScale 2s ease-in-out;
    }
    @keyframes fadeInScale {
      0% { opacity: 0; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1); }
    }
    
    /* ====== MENU TAB ====== */
    .menu-tab {
      position: fixed;
      top: 25px;
      left: 25px;
      z-index: 20000;
      cursor: pointer;
      background: transparent;
      padding: 10px 15px;
      border: none;
      transition: background 0.3s ease;
      text-decoration: none;
    }
    .menu-tab:hover {
      background: transparent;
    }
    .menu-tab .hamburger {
      width: 25px;
      height: 18px;
      position: relative;
      display: inline-block;
    }
    .menu-tab .hamburger span {
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      background: var(--text-color);
      border-radius: 2px;
      left: 0;
      transition: 0.3s;
    }
    .menu-tab .hamburger span:nth-child(1) { top: 0; }
    .menu-tab .hamburger span:nth-child(2) { top: 7px; }
    .menu-tab .hamburger span:nth-child(3) { top: 14px; }
    .menu-tab.inverted .hamburger span {
      background: var(--white) !important;
    }
    
    /* ====== OVERLAY ====== */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 9998;
    }
    .overlay.show {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* ====== SIDE MENU ====== */
    .side-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 250px;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 60px;
    }
    .side-menu.show {
      transform: translateX(0);
    }
    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      color: var(--white);
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
    .close-btn:hover { color: var(--secondary-color); }
    .side-menu ul {
      list-style: none;
      width: 100%;
      padding: 0 0 20px;
    }
    .side-menu li {
      border-bottom: 1px solid #444;
      opacity: 0;
      transform: translateX(-20px);
      transition: 0.3s ease;
    }
    .side-menu.show li {
      opacity: 1;
      transform: translateX(0);
    }
    .side-menu li:nth-child(1) { transition-delay: 0.1s; }
    .side-menu li:nth-child(2) { transition-delay: 0.2s; }
    .side-menu li:nth-child(3) { transition-delay: 0.3s; }
    .side-menu li:nth-child(4) { transition-delay: 0.4s; }
    .side-menu li:nth-child(5) { transition-delay: 0.5s; }
    .side-menu li:nth-child(6) { transition-delay: 0.6s; }
    .side-menu li:nth-child(7) { transition-delay: 0.7s; }
    .side-menu li a {
      display: block;
      color: var(--white);
      text-decoration: none;
      padding: 15px 20px;
      font-size: 1rem;
      font-family: 'Shadows Into Light', cursive;
      font-weight: 600; 
      transition: background 0.2s ease;
    }
    .side-menu li a:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    
    /* ====== HEADER / HERO SECTION ====== */
    header {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      overflow: hidden;
      color: var(--white);
    }
    .hero-header {
      position: relative;
      width: 100%;
      height: 40vh;
      min-height: 400px; /* 小さい画面でも見切れないように */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: var(--white);
      overflow: hidden;
      z-index: 2; 
    }
    .hero-header::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: -1;
    }
    header video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
    }
   .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
   .hero video {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }
    .overlay-content {
      position: relative;
      z-index: 1;
      place-items: center;
      white-space: nowrap;
      font-size: clamp(16px, 5vw, 40px);
      color: white;
    }
    header::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
      z-index: 1;/* 動画上にグラデーションのオーバーレイ */
    }
    header h1 {
      font-size: clamp(2rem, 6vw, 3rem);
      text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
      margin-bottom: 10px;
    }
    header p {
      font-size: clamp(1rem, 4vw, 1.6rem);
      text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
    }
    .overlay-image {
      position: fixed;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 65px;
      height: auto;
      z-index: 20001;
    }

/* テキストを引き締めて読みやすく */
    .hero h1, .hero p {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    
    /* ====== MAIN ====== */
    main {
      padding: 60px 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .title {
      font-size: clamp(16px, 6vw, 40px);
      white-space: nowrap;
      color: var(--primary-color);
      margin-bottom: 20px;
      letter-spacing: 1px;
      text-align: center;
    }
    .subtitle {
      font-size: 1.2rem;
      color: #444;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .text-block {
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 40px;
    }
    /* サンプル写真 */
    .sample-pic {
      width: 100%;
      max-width: 600px;
      height: auto;
      display: block;
      margin: 1rem auto;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }
    
    /* ====== TOP / SECTION COMMON STYLES ====== */
    section {
      padding: 60px 20px;
      max-width: 1200px;
      margin: 0 auto;
      /* セクションごとにほんの少し紙っぽい影をつける */
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      border-radius: 5px;
      margin-bottom: 40px;
    }
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-in.show {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* ====== TOP / DETAIL BUTTON ====== */
    .detail-btn {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 30px;
      background: var(--primary-color);
      color: var(--white);
      font-size: 1rem;
      border-radius: 25px;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .detail-btn:hover {
      background: var(--secondary-color);
      transform: translateY(-2px);
    }
    
    /* ====== TOP / ABOUT SECTION ====== */
    .about h2,
    .products h2,
    .variety-carousel h2,
    .news h2 {
      font-size: 2rem;
      color: var(--primary-color);
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-align: center;
    }
    .about p {
      font-size: 1.1rem;
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }
    
    /* ====== TOP / PRODUCTS SECTION ====== */
    .products {
      background: var(--white);
      text-align: center;
    }
    .product-grid {
      display: flex;
      flex-wrap: nowrap;
      gap: 30px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 20px;
    }
    .product {
      flex: 0 0 auto;
      background: var(--bg-color);
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      width: 280px;
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }
    .product:hover {
      transform: scale(1.02);
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }
    .product img {
      max-width: 100%;
      border-radius: 10px;
    }
    .product h3 {
      font-size: 1.4rem;
      color: var(--primary-color);
      margin: 15px 0 8px;
      font-family: 'Shadows Into Light', cursive; /* 手書き風 */
    }
    .product p {
      font-size: 1rem;
    }
    
    /* ====== TOP / NEWS SECTION ====== */
    .news {
      background: var(--white);
      text-align: center;
    }
    .news ul {
      list-style: none;
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .news li {
      background: #fefefe;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: box-shadow 0.3s ease;
    }
    .news li:hover {
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .news li .date {
      color: var(--primary-color);
      font-weight: 600;
      margin-right: 10px;
    }
    
    /* ====== TOP / CONTACT SECTION ====== */
    .contact {
      background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
      color: var(--white);
      text-align: center;
    }
    .contact h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .contact p {
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto 30px;
    }
    .contact-mail-button {
      display: inline-block;
      padding: 12px 30px;
      background-color: var(--bg-color);
      color: var(--primary-color);
      font-size: 1rem;
      border-radius: 25px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      font-family: 'Sawarabi Mincho', sans-serif;
      border: none;
    }
    
    .contact-mail-button:hover {
      background-color: var(--white);
      transform: scale(1.05);
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    
    /* ====== ABOUT / HEADDER SECTION ====== */
    .page-about .hero-header {
      background: url('https://shikokumichi.pecori.jp/fuku-orange-farm/pic/IMG_3217_L.jpg') center/cover no-repeat;
    }
    
    /* ====== ABOUT / COMMITMENT SECTION ====== */
    .smart-vid {
      width: 100%;
      max-width: 600px;
      height: auto;
      display: block;
      margin: 1rem auto;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* ====== ABOUT / OWNER SECTION ====== */
    .owners {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      margin-top: 60px;
      justify-content: center;
    }
    .owner {
      flex: 0 0 300px;
      text-align: center;
    }
    .owner img {
      width: 180px;
      height: 180px;
      object-fit: cover;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      margin-bottom: 15px;
    }
    .owner .owner-name {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 5px;
      color: var(--primary-color);
    }
    .owner .owner-text {
      font-size: 1rem;
      line-height: 1.6;
      color: #444;
    }  
    .owners .owner.fade-in {
      transition-delay: var(--d, 0s); /* 軽いスタッガー（--d で遅延指定。未指定なら0s） */
    }

    /* ====== CITRUS VARIETIES / VARIETIES SECTION ====== */
    .page-citrus-varieties .hero-header {
      background: url('https://shikokumichi.pecori.jp/fuku-orange-farm/pic/4×3_柑橘集合_L.jpg') center/cover no-repeat;
    }
    
    .variety-table-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;

      padding: 16px;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 14px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    /* 基本のセルデザイン（あればマージ可） */
    .variety-table {
      border-collapse: separate;   /* sticky 対策はそのまま */
      border-spacing: 0;
      width: 100%;
      min-width: 720px;

      background: #fffaf3;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #e3d5c4;  /* 左の縦線が消えたように見えない保険 */
    }

    .variety-section--table {
      background: var(--white);
      border-radius: 16px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
      padding: 32px 20px;
    }

    .variety-table th,
    .variety-table td {
      border-right: 1px solid #e3d5c4;
      border-bottom: 1px solid #e3d5c4;
      padding: 8px 10px;
      text-align: left !important;
      background: #ffffff;
      font-size: 0.9rem;
    }

    /* 甘平〜せとかの縦線消失対策：右側の線を強制表示 */
    .variety-table td,
    .variety-table th {
      border-right: 1px solid #e3d5c4 !important;
    }

    /* sticky列がある行の右端にも線を描く */
    .variety-table tr > th:first-child,
    .variety-table tr > td:first-child {
      box-shadow: 1px 0 0 #e3d5c4; 
    }

    /* 行ホバーでふわっと浮く感じ */
    .variety-table tbody tr:hover {
      background: rgba(183, 137, 91, 0.06);
      transition: background 0.2s ease;
    }

    /* 左端（品種名）列だけ固定 */
    .page-citrus-varieties .variety-table th:first-child,
    .page-citrus-varieties .variety-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 10; 
      background: #fffaf3; 
      white-space: nowrap; 
      min-width: 110px; 
      border-right: 1px solid #e3d5c4; 
      box-shadow: 1px 0 0 #e3d5c4; 
    }
    
    /* ヘッダー（上部）をスクロール時に固定したい場合 */
    .variety-table thead th {
      position: sticky;
      top: 0;
      z-index: 20;
      background: linear-gradient(
        135deg,
        var(--secondary-color) 0%,
        var(--primary-color) 100%
      );
      color: #fff;
      border-top: 1px solid #b89063;
      border-bottom: 1px solid #b89063;
      padding: 10px 10px;
      font-size: 0.9rem;
      letter-spacing: 0.06em;
    }

    /* ▼ 品種列を横スクロール時も固定する */
    .variety-table th:first-child,
    .variety-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      border-left: 1px solid #e3d5c4;
      background: #f7f1e6;
      white-space: nowrap;
    }

    /* ヘッダーの「品種」セルはさらに一段前面に */
    .variety-table thead th:first-child {
      z-index: 4;
    }

    .variety-photo {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);

      display: block;      
      margin-left: auto;   
      margin-right: auto;  
    }

    .variety-info h3 {
      text-align: center;
      margin-bottom: 12px;
    }

    .variety-block {
      margin-bottom: 60px; 
    }

    .variety-info p strong {
      display: block;
      margin-bottom: 4px;
    }

    .variety-info p + p {
      margin-top: 1.2em;
    }

    .variety-buy {
      margin-top: 1.2em;
      text-align: center; 
    }

    .variety-buy .detail-btn {
      font-size: 0.9rem;
      padding: 12px 30px;
    }

    .variety-table td.rating {
      font-size: clamp(0.9rem, 1.1vw, 1.1rem);
      letter-spacing: 0.06em;     
      white-space: nowrap;        
    }

    .variety-table a {
      color: inherit;             /* 親要素の色をそのまま使う */
      text-decoration: none;      /* 下線を消す */
    }

    .variety-table a:hover {
      text-decoration: underline; /* ホバー時に下線だけ付けられる（お好み） */
    }

    /* ====== CITRUS VARIETIES / CALENDER SECTION ====== */
    .calendar-wrapper {
      overflow-x: auto;
      padding: 16px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 18px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.08);
      backdrop-filter: blur(3px);
    }

    .variety-calendar {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 10px;     /* 行間に余白→おしゃれに見える */
      min-width: 900px;           /* 横幅をしっかりとる */
    }

    .variety-calendar th {
      text-align: left;
      font-weight: 700;
      white-space: nowrap;
      padding: 8px 12px;
      color: var(--primary-color);
      font-size: 1rem;
    }

    .variety-calendar thead th {
      font-size: 1.1rem;
      text-align: center;
      padding-bottom: 12px;
      letter-spacing: 1px;
    }
    
    .variety-table tbody th a {
      color: var(--primary-color);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px dashed rgba(183, 137, 91, 0.6);
    }
    .variety-table tbody th a:hover {
      opacity: 0.7;
    }

    /* ★が並ぶ「甘さ〜果汁量」の4列だけ、手書き＆オレンジに */
    .page-citrus-varieties .variety-table tbody td:nth-child(n+2):nth-child(-n+5) {
      font-family: 'Shadows Into Light', cursive;
      letter-spacing: 0.16em;
      color: #ff9800;
    }

    /* 「食感」だけは読み物なので和文フォントのまま */
    .page-citrus-varieties .variety-table tbody td:nth-child(6) {
      font-family: 'Sawarabi Mincho', sans-serif;
      letter-spacing: 0;
    }

    /* スクロール時の右端に“終わり”の影を入れてリッチに見せる */
    .variety-table-wrapper::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      height: 100%;
      pointer-events: none;
      background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.08),
        transparent
      );
    }

    .variety-calendar td {
      text-align: center;
      padding: 10px 12px;
      font-size: 0.95rem;
    }

    /* 品種名を左寄せ＆強調 */
    .variety-calendar tbody th {
      background: none !important;
      color: var(--text-color);
      font-weight: 700;
      padding-left: 4px;
    }

    /* 行全体にうっすら影 → おしゃれ度UP */
    .variety-calendar tbody tr {
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    /* 栽培カレンダー画像 */
    .calendar-image {
      position: relative;
      max-width: 900px;
      margin: 40px auto;
    }

    /* 既存のカレンダー画像のスタイルはそのままでOK */
    .calendar-image img.sample-pic {
      width: 100%;
      display: block;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    /* マスキングテープ（CSSのみ・上に貼る） */
    .calendar-image::before {
      content: "";
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%) rotate(-4deg);

      width: 40%;           /* カレンダー幅に対する相対サイズ */
      height: 32px;

      background: rgba(250, 244, 220, 0.85);   /* 和紙っぽい色 */
      border-radius: 4px;

      /* 和紙の質感（控えめなスジ） */
      background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.35) 0,
        rgba(255, 255, 255, 0.35) 3px,
        rgba(250, 200, 80, 0.2) 3px,
        rgba(250, 200, 80, 0.2) 6px
      );
  
      box-shadow: none;
      pointer-events: none;
      z-index: 5;

      clip-path: polygon(
        /* 左側の破れ */
        0% 0%, 3% 12%, 6% 0%, 9% 14%, 12% 0%, 
        /* 上辺まっすぐ中央へ */
        88% 0%, 
        /* 右側の破れ */
        91% 14%, 94% 0%, 97% 12%, 100% 0%,

        /* 右下の破れ */
        100% 100%, 97% 88%, 94% 100%, 91% 86%, 
        /* 下辺まっすぐ中央へ */
        9% 100%,
        /* 左下の破れ */
        6% 88%, 3% 100%, 0% 86%
      );
    }

    .calendar-tape {
      position: absolute;
      top: 0;  /* 好みで微調整 */
      left: 35%;
      transform: translate(-50%, -60%) rotate(3deg);

      width: 30% !important;  /* テープの大きさ */
      height: auto;

      pointer-events: none;  /* クリックを下へ通す */
      filter: none !important; /* 影・ぼかしを完全に無効化 */
      box-shadow: none !important; /* 影を強制的に削除 */
    }

    .calendar-image figcaption {
      margin-top: 8px;
      font-size: 0.85rem;
      color: #7a6a57;
    }

    .calendar-image a img {
      cursor: zoom-in;
      border-radius: 8px;
      transition: 0.2s ease;
    }

    .calendar-image a img:hover {
      opacity: 0.9;
    }

    /* ====== CITRUS VARIETIES / SLIDER SECTION ====== */

    .variety-carousel {
      padding: 60px 0 50px;
      background: var(--white);   /* ★ここを var(--bg-color) ではなく white に */
    }

    .variety-carousel .section-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .variety-carousel .section-title {
      font-size: 1.6rem;
      letter-spacing: 0.08em;
      text-align: center;
      margin-bottom: 8px;
    }

    .variety-carousel .section-lead {
      text-align: center;
      font-size: 0.9rem;
      margin-bottom: 24px;
      opacity: 0.8;
    }

    .variety-carousel-viewport {
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .variety-carousel-track {
      display: flex;
      gap: 20px;
      will-change: transform;
      touch-action: pan-y;
    }

    .variety-carousel-item {
      flex: 0 0 32vw;          /* 画面にだいたい3個見えるくらい */
      max-width: 180px;
      text-align: center;
      text-decoration: none;
      color: var(--text-color);
    }

    .variety-carousel-item img {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 4px 8px rgba(0,0,0,0.08);
      display: block;
    }

    .variety-carousel-item span {
      display: block;
      margin-top: 8px;
      font-size: 0.9rem;
    }

    /* ボタン */
    .variety-carousel-btn-wrap {
      text-align: center;
      margin-top: 40px;
      margin-bottom: 20px; /* NEWS との間に余白 */
    }

    .variety-view-button {
      display: inline-block;
      margin-top: -20px;
      padding: 12px 30px;
      background: var(--primary-color);
      color: var(--white);
      font-size: 1rem;
      border-radius: 25px;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .variety-view-button:hover {
      background: var(--secondary-color);
      transform: translateY(-2px);
    }

    /* ====== FARM TOOLS / TOOL SECTION ====== */
    .page-farm-tools .hero-header {
      background: url('https://shikokumichi.pecori.jp/fuku-orange-farm/pic/4×3_道具集合_L.jpg') center/cover no-repeat;
    }

    .tool-table-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;

      padding: 16px;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 14px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .tool-photo {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);

      display: block;      
      margin-left: auto;   
      margin-right: auto;  
    }

    .tool-info h3 {
      text-align: center;
      margin-bottom: 12px;
    }

    .tool-block {
      margin-bottom: 60px; 
    }

    .tool-info p strong {
      display: block;
      margin-bottom: 4px;
    }

    .tool-info p + p {
      margin-top: 1.2em;
    }

    /* ====== NEWS / HEADDER SECTION ====== */
    .page-news .hero-header {
      background: url('https://shikokumichi.pecori.jp/fuku-orange-farm/pic/福ちゃんとロゴ２_L.jpg') center/cover no-repeat;
    } 
    
    /* ====== NEWS / TITLE SECTION ====== */
    .news-title {
      font-size: 1.8rem;
      color: var(--primary-color);
      margin-bottom: 20px;
      letter-spacing: 1px;
      text-align: center;
    }
    .news-list {
      list-style: none;
      max-width: 800px;
      margin: 0 auto;
      padding: 0;
    }
    #news-list a {
      color: inherit;        /* 親の文字色を使う */
      text-decoration: none;
    }
    #news-list a:hover {
    text-decoration: underline;
    }
    .news-list li {
      background: var(--white);
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: box-shadow 0.3s ease;
    }
    .news-list li:hover {
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .news-date {
      font-weight: bold;
      color: var(--primary-color);
      margin-right: 10px;
    }
    .news-item a {
      color: var(--text-color);
      text-decoration: none;
      font-size: 1rem;
    }
    .news-item a:hover {
      text-decoration: underline;
    }
    
     /* ====== NEWS / HEADDER SECTION ====== */
    .page-news-art .hero-header {
      background: url('https://shikokumichi.pecori.jp/fuku-orange-farm/pic/IMG_3519_L.jpg') center/cover no-repeat;
    } 
    
    /* ====== NEWS ARTICLE / CONTENT SECTION ====== */
    .article-title {
      font-size: 2rem;
      color: var(--primary-color);
      margin-bottom: 10px;
      text-align: center;
      letter-spacing: 1px;
    }
    .article-meta {
      text-align: center;
      margin-bottom: 30px;
      color: #666;
      font-size: 0.9rem;
    }
    .article-content {
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 40px;
    }
    .article-content img {
      display: block;
      max-width: 600px;
      width: 100%;
      margin: 20px auto;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    /* ====== NEWS ARTICLE / PICTURE SECTION ====== */
    .news-photo {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ふんわり影 */
      margin-bottom: 1em;
      object-fit: cover;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .news-photo:hover {
      transform: scale(1.02);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* ホバーでちょい浮き */
    }    
    
    /* ====== NEWS ARTICLE / BUY LINK ====== */
    .buy-link {
      display: inline-block;
      margin: 0 0.5em; 
      padding: 0.6em 1.2em;
      text-decoration: none;
      border-radius: 0.4em;
      font-weight: bold;
      color: #ffffff; /* 文字色 */
      background-color: #b7895b; 
      transition: background-color 0.3s ease;
    }      

    .buy-link:hover {
      background-color: #a06d3b; /* ホバー時の背景色 */
    }
    
    /* ====== FOOTER ====== */
    footer {
      background-color: var(--dark-bg);
      color: var(--white);
      text-align: center;
      padding: 20px;
    }
    footer p {
      font-size: 0.9rem;
      letter-spacing: 0.5px;
    }
    .social-links {
      margin-top: 10px;
    }
    .social-links a {
      margin: 0 15px;
      text-decoration: none;
      font-size: 1rem;
      transition: color 0.2s ease;
    }
    .social-links img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: transform 0.3s ease;
    }
    .social-links img:hover {
      transform: scale(1.1);
    }
    
    /* ====== RESPONSIVE DESIGN ====== */
    @media (max-width: 768px) {
      header h1 {
        font-size: clamp(1.8rem, 6vw, 3rem);
      }
      header p {
        font-size: clamp(0.9rem, 4vw, 1.6rem);
      }
      .product-grid {
        gap: 20px;
      }
    }