@charset "UTF-8";
:root {
  /* ウェイトの定義 */
  --weight-normal: 400;
  --weight-bold: 700;
  --font-main: "Inter", "Noto Sans JP", sans-serif;
  /* color */
  --primary-green: #168353;
  --primary-darkgreen: #186443;
  --primary-yellow:#FCEE21;
  --text-main: #151515;
  --text-sub: #666;
  --bg-top: #f4f4f4;
  /* Fluid Typography: 16px */
  --fz-base: 1rem;
}
@media (max-width: 1440px) {
  :root {
    --inner-width: 1200px;
  }
}
@media (min-width: 1441px) {
  :root {
    --inner-width: 1400px;
  }
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  font-family: var(--font-main);
  color: var(--color-text);
  font-size: var(--fz-base);
  font-size-adjust: 0.51;
  overflow-x: hidden;
}

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

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

* {
  margin: 0;
  padding: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

textarea {
  resize: vertical;
}

ul, ol {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
//画像パスの書き換え
========================================================================== */
.is-block {
  display: block !important;
}

.is-inline {
  display: inline !important;
}

.is-inline-block {
  display: inline-block !important;
}

.is-none {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .is-mobile-block {
    display: block !important;
  }
  .is-mobile-inline {
    display: inline !important;
  }
  .is-mobile-inline-block {
    display: inline-block !important;
  }
  .is-mobile-none {
    display: none !important;
  }
}
@media screen and (min-width: 576px) {
  .is-fablet-block {
    display: block !important;
  }
  .is-fablet-inline {
    display: inline !important;
  }
  .is-fablet-inline-block {
    display: inline-block !important;
  }
  .is-fablet-none {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .is-tablet-block {
    display: block !important;
  }
  .is-tablet-inline {
    display: inline !important;
  }
  .is-tablet-inline-block {
    display: inline-block !important;
  }
  .is-tablet-none {
    display: none !important;
  }
}
@media screen and (min-width: 1200px) {
  .is-desktop-block {
    display: block !important;
  }
  .is-desktop-inline {
    display: inline !important;
  }
  .is-desktop-inline-block {
    display: inline-block !important;
  }
  .is-desktop-none {
    display: none !important;
  }
}
@media screen and (min-width: 1400px) {
  .is-wide-block {
    display: block !important;
  }
  .is-wide-inline {
    display: inline !important;
  }
  .is-wide-inline-block {
    display: inline-block !important;
  }
  .is-wide-none {
    display: none !important;
  }
}
:root {
  --primary-color: #168353;
  --text-color: #151515;
  --bg-white: #ffffff;
  --bg-light-gray: #f2f2f2;
  --transition-speed: 0.3s;
  --header-height: 100px;
  --header-height-scrolled: 70px;
  --container-width: 1400px;
}

/* ==========================================
  Header Layout
========================================== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background: var(--bg-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: background var(--transition-speed), box-shadow var(--transition-speed);
}

.l-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.l-header__inner {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 40px;
  transition: height var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
@media screen and (max-width: 767px) {
  .l-header__inner {
    height: 70px;
  }
}

@media (max-width: 1023px) {
  .l-header__inner {
    padding: 0;
    height: 70px;
  }
}
.l-header.is-scrolled .l-header__inner {
  height: var(--header-height-scrolled);
}

/* Logo - Absolute Center */
.l-header__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  margin: 0;
}

.l-header__logo img {
  display: block;
  width: auto;
  height: 60px;
  transition: height var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1023px) {
  .l-header__logo img {
    height: 45px;
  }
}

.l-header.is-scrolled .l-header__logo img {
  height: 45px;
}

/* ==========================================
  Desktop Navigation
========================================== */
.l-header__nav {
  flex: 1;
  height: 100%;
}

.l-header__nav--left > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px;
  height: 100%;
  padding-right: 120px;
}

.l-header__nav--right > ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
  height: 100%;
  padding-left: 120px;
}

.l-header__nav ul li {
  display: flex;
  align-items: center;
  height: 100%;
  transition: var(--transition-speed);
  padding-top: 2px;
}

.l-header__nav ul li.c-search {
  padding-top: 0;
}

.l-header__nav ul li > a {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--text-color);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: color var(--transition-speed);
  border-bottom: #fff solid 2px;
}

.l-header__nav ul li:hover > a {
  color: var(--primary-color);
  border-bottom: var(--primary-color) solid 2px;
}

/* Search Container Desktop */
.l-header__search-container {
  margin-left: 15px;
}

.c-search-box {
  display: flex;
  align-items: center;
  width: 170px;
  height: 38px;
  background: var(--bg-light-gray);
  border-radius: 25px;
  overflow: hidden;
  transition: all var(--transition-speed);
}

.c-search-box__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  height: 100%;
  background: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
}

.c-search-box__input {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  background: transparent;
  color: #666;
  font-size: 13px;
  border: none;
  outline: none;
}

/* ==========================================
  Mobile Controls
========================================== */
.l-header__mobile-controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.c-hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 3000;
}

.c-hamburger span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Active State (X-mark) */
.c-hamburger.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.c-hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.c-hamburger.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.c-search-trigger-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-color);
  font-size: 36px;
  z-index: 3000;
}

@media (max-width: 1023px) {
  .l-header__nav,
  .l-header__search-container {
    display: none;
  }
  .l-header__mobile-controls {
    display: flex;
    padding: 0 20px;
  }
}
/* ==========================================
  SP MENU DESIGN
========================================== */
.l-header__sp-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100vh;
  padding-top: var(--header-height);
  background: #F9F9F2;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
}

.l-header__sp-menu.is-active {
  opacity: 1;
  visibility: visible;
}

.l-header__sp-menu-inner {
  padding: 0 0 60px;
}

.l-header__sp-nav {
  padding: 20px;
}

.l-header__sp-nav ul li {
  border-bottom: 1px solid #f0f0f0;
  padding: 24px 20px;
}

.sp-sub-menu.is-active li {
  padding: 5px 0;
}

.sp-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.u-arrow,
.icon-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  background: #f4f8f6;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
  transition: transform 0.3s;
}

.u-arrow::after {
  content: ">";
}

.icon-plus::after {
  content: "+";
}

.js-sp-accordion.is-open .icon-plus::after {
  content: "—";
}

.sp-sub-menu {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 0 20px;
  overflow: hidden;
}

.sp-sub-menu.is-active {
  display: grid;
  padding: 20px 0 0;
}

.sp-sub-menu li {
  border: none !important;
  padding: 0;
}

.sp-sub-menu li a {
  display: flex;
  align-items: center;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 0;
}

.sp-sub-menu li a span {
  margin-right: 8px;
  color: var(--primary-color);
  font-size: 8px;
}

.l-header__sp-contact {
  padding: 60px 20px;
  background: #fff;
  text-align: center;
}

.sp-contact-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sp-contact-title .line {
  display: block;
  position: relative;
  width: 30px;
  height: 1px;
  background: var(--primary-color);
}

.sp-contact-title .line::before,
.sp-contact-title .line::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: inherit;
}

.sp-contact-title .line::before {
  top: -4px;
}

.sp-contact-title .line::after {
  top: 4px;
}

.sp-contact-lead {
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.sp-contact-lead span {
  color: var(--primary-color);
  box-shadow: 0 4px 0 rgba(17, 122, 78, 0.1);
}

.sp-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 20px 25px;
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 6px;
}

.sp-contact-btn .u-arrow {
  position: absolute;
  right: 25px;
  width: 24px;
  height: 24px;
  background: #fff;
  color: var(--primary-color);
  border-radius: 4px;
}

body.is-menu-open {
  overflow: hidden;
}

/* ==========================================
  Desktop Mega Menu
========================================== */
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  width: 100%;
  background: var(--bg-white);
  border-top: 1px solid #eee;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  pointer-events: none;
  transition: 0.3s;
}

.l-header__nav ul li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.sub-menu__inner {
  display: grid;
  justify-content: center;
  gap: 20px;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 40px 20px;
}
@media (max-width: 1239px) {
  .sub-menu__inner {
    grid-template-columns: repeat(auto-fit, 160px);
  }
}
@media (min-width: 1240px) {
  .sub-menu__inner {
    grid-template-columns: repeat(auto-fit, 220px);
  }
}

.sub-menu__inner a {
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub-menu__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #f0f0f0;
  background-size: cover;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.sub-menu__thumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* HTMLのinline styleを引き継ぐ */
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.sub-menu__inner a:hover .sub-menu__thumb::before {
  transform: scale(1.1); /* 1.1倍に拡大 */
}

.sub-menu__title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 737px) {
  .l-header button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
/* ==========================================
  TOP Page Special Header (Initial State)
========================================== */
/* 1. 背景を透明にする（動画を見せるため） */
.l-header.is-top-type {
  background: transparent;
  box-shadow: none;
}

/* 2. PCでもナビを隠し、コントロールを表示する */
.l-header.is-top-type .l-header__nav {
  display: none; /* デスクトップナビを非表示 */
}

.l-header.is-top-type .l-header__mobile-controls {
  display: flex; /* スマホ用コントロールを強制表示 */
}

/* 3. ロゴを白抜きにする (CSSフィルタで白化) */
.l-header.is-top-type .l-header__logo img {
  filter: brightness(0) invert(1);
  mix-blend-mode: difference;
}

/* 4. ハンバーガーと検索アイコンを白くする */
.l-header.is-top-type .c-hamburger span,
.l-header.is-top-type .c-search-trigger-mobile {
  color: #fff; /* アイコンの色 */
  mix-blend-mode: difference;
  z-index: 5;
}

/* ※ハンバーガーの線はbackground-colorなので注意 */
.l-header.is-top-type .c-hamburger span {
  background-color: #fff;
  mix-blend-mode: difference;
}

body.is-menu-open .l-header.is-top-type .l-header__logo img {
  filter: none;
}

.l-header.is-top-type .c-hamburger.is-active span {
  background-color: #000;
}

/* ==========================================
  Search box
========================================== */
/* --- Overlay Base --- */
.l-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* ほぼ白、少し透過 */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.l-search-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* --- Content Layout --- */
.l-search-overlay__content {
  width: 500px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .l-search-overlay__content {
    width: 100%;
  }
}

.l-search-overlay__label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2em;
  margin-bottom: 25px;
}

/* --- 既存デザインをオーバーレイ用に拡張 --- */
.l-search-overlay .c-search-box.__large {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 浮遊感 */
}

.c-search-box.__large .c-search-box__input {
  font-size: 18px;
  padding: 17px 20px;
}

.c-search-box.__large .c-search-box__submit {
  flex: 0 0 65px;
  font-size: 28px;
}

.l-search-overlay__hint {
  margin-top: 20px;
  font-size: 12px;
  color: #999;
}

/* --- Close Button --- */
.l-search-overlay__close {
  position: absolute;
  top: 26px;
  right: 40px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .l-search-overlay__close {
    top: 13px;
    right: 22px;
  }
}

.l-search-overlay__close span {
  display: block;
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  left: 10px;
}

.l-search-overlay__close span:nth-child(1) {
  transform: rotate(45deg);
  top: 21px;
}

.l-search-overlay__close span:nth-child(2) {
  transform: rotate(-45deg);
  top: 21px;
}

/* ==========================================
  Loading Screen
========================================== */
.p-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* オーバーレイは白 */
  z-index: 10000; /* ヘッダーより上に表示 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* 読み込み完了後に付与するクラス */
.p-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.p-loader__content {
  text-align: left;
  width: 240px;
}

.p-loader__acronym {
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
  color: var(--text-color);
}

.p-loader__acronym .u-color-green {
  color: #2b7a5e;
}

.p-loader__logo {
  width: 160px;
  margin: 0 auto 40px;
}

/* --- Loading Progress Bar --- */
.p-loader__progress {
  margin-top: 40px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.p-loader__progress-text {
  font-size: 12px;
  font-weight: 700;
  color: #151515;
  margin-top: 10px;
  letter-spacing: 0.1em;
  text-align: center;
}

.p-loader__bar-bg {
  width: 100%;
  height: 2px; /* 細めのラインでスタイリッシュに */
  background-color: #e0e0e0; /* 薄いグレー */
  overflow: hidden;
  position: relative;
}

.p-loader__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%; /* 初期値 */
  height: 100%;
  background-color: #2b7a5e; /* ブランドカラーの緑 */
  transition: width 0.1s linear; /* 数値の変化に追従 */
}

/* ==========================================
  フェードアップコンテンツ
========================================== */
/* 1. 下からふわっと浮き上がる基本クラス */
.u-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: var(--delay, 0s); /* JSで遅延時間を制御 */
}

/* 2. 表示された時に付与されるクラス */
.u-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3. セクション単位での自動適用（デフォルト）*/
.section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
  ページビジュアル
   ========================================================================== */
.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

/* --- Hero Visual Base --- */
.hero-visual {
  position: sticky;
  top: 0;
  width: 100%;
  height: 560px;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
@media (max-width: 1023px) {
  .hero-visual {
    height: 300px;
  }
}
.hero-visual::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 150%;
  height: 200px; /* 湾曲の深さ。ここを調整してください */
  background-color: #fff;
  border-radius: 50%;
  transform: translateX(-50%) translateY(50%);
  z-index: 2;
}
@media (max-width: 1023px) {
  .hero-visual::after {
    height: 100px;
  }
}

.hero-visual__inner {
  --offset-base: 100px;
  position: relative;
  width: calc(100% - var(--offset-base));
  height: 560px;
  overflow: hidden;
  will-change: width;
}
@media (max-width: 1023px) {
  .hero-visual__inner {
    --offset-base: 0px;
    height: 300px;
  }
}

.hero-visual__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero-visual__bg::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.43);
  z-index: 1;
}

.hero-visual__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* --- パンくずリスト (左上固定) --- */
.pankuzu-list {
  display: flex;
  list-style: none;
  gap: 10px;
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 40px);
}

/* 最後の要素だけを省略対象にする場合の設定 */
.pankuzu-list li:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pankuzu-list a {
  color: #fff;
  text-decoration: underline;
}
.pankuzu-list a::after {
  display: inline-block;
  content: "/";
  margin-left: 15px;
}

/* --- ページタイトル --- */
.hero-visual__content {
  z-index: 3;
  width: 100%;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  transform: translateY(-50%);
  margin-top: -50px;
}
@media (max-width: 1023px) {
  .hero-visual__content {
    margin-top: -65px;
  }
}
@media screen and (max-width: 767px) {
  .hero-visual__content {
    margin-top: -25px;
  }
}

.page-title {
  color: #fff;
}

.page-title__en {
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  padding: 0 50px;
}

/* デザイン画像の3本線(jaht-line) */
.page-title__en::before,
.page-title__en::after {
  content: "";
  width: 24px;
  height: 8px;
  background-image: url(../images/common/jaht-line_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.page-title__en::before {
  left: 16px;
}

.page-title__en::after {
  right: 16px;
}

.page-title__jp {
  display: block;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
}
@media screen and (max-width: 767px) {
  .page-title__jp {
    font-size: 26px;
    font-feature-settings: "palt";
  }
}

.hero-visual-normal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background-color: #F9F9F2;
  min-height: 250px;
  text-align: center;
}

.hero-visual-normal .pankuzu-list a {
  color: #989898;
}

.hero-visual-normal .pankuzu-list li {
  color: #989898;
}

/* ページタイトル */
.hero-visual-normal h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  color: var(--text-main);
}
@media screen and (max-width: 1023px) {
  .hero-visual-normal h1 {
    font-size: 28px;
  }
}

.hero-visual-normal h1 span {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-main);
  color: var(--primary-green);
}

.hero-visual-normal h1 span::before,
.hero-visual-normal h1 span::after {
  display: inline-block;
  content: url(../images/common/jaht-line.svg);
  width: 30px;
  height: 10px;
  margin: 0 10px;
}

/* ==========================================================================
ヘッドライン
========================================================================== */
.headline2 {
  width: 480px;
  padding: 48px 0px 0;
  margin: 0 auto 60px;
  font-size: 40px;
  font-weight: bold;
  color: var(--text-main);
  line-height: 1.25;
  text-align: center;
  background-image: url(../images/common/headline-green.png);
  background-repeat: no-repeat;
  background-size: 418px auto;
  background-position: center top;
}
.headline2 .en {
  display: block;
  margin-bottom: 7px;
  font-size: 18px;
  line-height: 1.25;
  color: var(--primary-green);
}
@media screen and (max-width: 768px) {
  .headline2 {
    padding: 23px 0px 0;
    width: 230px;
    background-size: 209px auto;
    font-size: 20px;
    margin-bottom: 40px;
  }
  .headline2 .en {
    font-size: 10px;
    margin-bottom: 2px;
    margin-top: 3px;
  }
}

.headline2.__secondary {
  background-image: url(../images/common/headline-lightgreen.png);
}
.headline2.__secondary .en {
  color: #fff;
}

.headline3 {
  position: relative;
  font-size: 24px;
  font-weight: bold;
  color: #539dcc; /* デザインに基づいたブルー */
  padding-bottom: 15px; /* 線とテキストの間隔 */
  margin-bottom: 30px; /* 下のコンテンツとの余白 */
  border-bottom: 1px solid #e0e0e0; /* 全幅に広がる薄いグレーの線 */
}
.headline3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* 親要素の border-bottom と重ねる */
  width: 100px; /* アクセント線の長さ（デザインに合わせて調整） */
  height: 2px; /* アクセント線の太さ */
  background-color: #539dcc; /* テキストと同色のブルー */
}
@media screen and (max-width: 1023px) {
  .headline3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
コンテンツ
   ========================================================================== */
.section {
  background-color: hsl(0, 0%, 100%);
}

/* --- 次のセクション (上に重なる) --- */
.parallax-wrap {
  position: relative;
  z-index: 9997;
  background-color: #fff;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  main {
    padding-top: 100px;
  }
}
@media (max-width: 1023px) {
  main {
    padding-top: 70px;
    overflow: hidden;
  }
}

/* --- オープニングMV全体コンテナ --- */
main.index-page {
  padding-top: 0;
}

main.post-page {
  background: #fff;
}

.inner {
  width: 100%;
  max-width: var(--inner-width);
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}
@media screen and (max-width: 767px) {
  .inner {
    max-width: auto;
  }
}

.section {
  padding: 125px 0;
}
@media screen and (max-width: 767px) {
  .section {
    padding: 60px 0;
  }
}

/* ==========================================================================
全体レイアウト
========================================================================== */
.l-container {
  display: flex;
  gap: 70px;
  max-width: var(--inner-width);
  margin: 40px auto 0;
  padding: 0 20px 40px;
  justify-content: space-around;
}
@media screen and (max-width: 1023px) {
  .l-container {
    display: block;
  }
}

/* メインコンテンツエリア */
.l-main {
  flex-grow: 1;
  order: 2;
  padding: 30px 0;
}

/* ベースのグリッド設定 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
  width: 100%;
}
.grid h2 {
  margin-bottom: 20px;
}
.grid h3 {
  margin-bottom: 20px;
}

.column {
  grid-column: span 12; /* デフォルトは全幅 */
}

/* PC用：12スパンまでのループ */
.is-1 {
  grid-column: span 1;
}

.is-2 {
  grid-column: span 2;
}

.is-3 {
  grid-column: span 3;
}

.is-4 {
  grid-column: span 4;
}

.is-5 {
  grid-column: span 5;
}

.is-6 {
  grid-column: span 6;
}

.is-7 {
  grid-column: span 7;
}

.is-8 {
  grid-column: span 8;
}

.is-9 {
  grid-column: span 9;
}

.is-10 {
  grid-column: span 10;
}

.is-11 {
  grid-column: span 11;
}

.is-12 {
  grid-column: span 12;
}

.grid.is-reverse {
  direction: rtl;
}
.grid.is-reverse .column {
  direction: ltr;
}

/* モバイル専用クラス */
@media screen and (max-width: 767px) {
  /* PCで.is-6等をつけていても、モバイルでは全幅を基本にするためのリセット */
  .column {
    grid-column: span 12;
  }
  /* 明示的に指定された場合のみ上書き */
  .is-mobile-6 {
    grid-column: span 6 !important; /* 強制的に半分に */
  }
  .is-mobile-12 {
    grid-column: span 12 !important; /* 強制的に全幅に */
  }
}
/* ==========================================================================
カラー/ 装飾
========================================================================== */
.is-text-marker {
  display: inline;
  background: linear-gradient(transparent 50%, #FCEE21 50%);
}

.is-color-green {
  color: var(--primary-green) !important;
}

.is-color-yellow {
  color: var(--primary-yellow) !important;
}

.is-color-black {
  color: var(--text-main) !important;
}

.is-center {
  text-align: center;
}

.is-small {
  font-size: 28px;
}
@media screen and (max-width: 767px) {
  .is-small {
    font-family: 20px;
  }
}

/* ==========================================================================
サイドメニューエリア
========================================================================== */
.l-sidebar {
  width: 200px;
  flex-shrink: 0;
  order: 1;
  z-index: 2;
}
@media screen and (max-width: 1023px) {
  .l-sidebar {
    width: 100%;
  }
}

.side-menu {
  position: relative;
  padding: 40px 20px 40px 0;
  border-top-right-radius: 60px;
  /* Stickyの実装 */
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  /* 上端からの位置指定 */
  /* ヘッダーの高さ(108px) + 余白(20px) = 128px */
  top: calc(var(--header-height) + 20px);
}

.side-menu__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--primary-green);
}

.side-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu__list li {
  margin-bottom: 15px;
}

.side-menu__list li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 15px;
  color: #333;
  transition: color 0.3s;
}

/* 矢印アイコンを擬似要素で追加 */
.side-menu__list li a::before {
  content: "\f105"; /* Angle Right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
  font-size: 12px;
  color: #ccc;
}

/* アクティブ（現在地）のスタイル */
.side-menu__list li a:hover,
.side-menu__list li.is-active a {
  color: #539dcc;
  font-weight: bold;
}

.side-menu__list li.is-active a::before {
  color: #539dcc;
}

/* ==========================================================================
テーブル
========================================================================== */
.table-container {
  width: 100%;
  overflow-x: auto; /* モバイルで表がはみ出すのを防ぐ */
  margin: 40px 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse; /* 境界線を重ねる */
  border: 1px solid #ddd;
  font-size: 1rem;
  background-color: #fff;
}
.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}
.data-table {
  /* ヘッダーおよび1列目の背景色 */
}
.data-table thead th,
.data-table tbody th {
  background-color: #fcf9ee; /* 共通のクリーム色 */
  font-weight: bold;
  color: var(--text-main);
}
.data-table {
  /* 本文のデータセル */
}
.data-table tbody td {
  color: #333;
}
@media screen and (max-width: 767px) {
  .data-table {
    font-size: 0.9rem;
  }
  .data-table th, .data-table td {
    padding: 12px 8px; /* モバイルでは余白をタイトに */
  }
}

/* ==========================================================================
リスト
========================================================================== */
.disc-list,
.decimal-list {
  margin-left: 20px;
}

.disc-list li {
  position: relative;
  list-style: disc outside;
  margin-bottom: 7px;
  line-height: 1.8;
}

.decimal-list li {
  list-style: decimal outside;
  margin-bottom: 7px;
  line-height: 1.8;
}

.disc-list li:last-child,
.decimal-list li:last-child {
  margin-bottom: 0;
}

.jaht-line-list {
  width: 100%;
}

.jaht-line-list li {
  position: relative;
  list-style: none;
  padding-left: 20px;
  margin-bottom: 7px;
  line-height: 1.8;
}
.jaht-line-list li::before {
  content: "";
  display: block;
  width: 15px;
  height: 10px;
  background-image: url(../images/common/jaht-line.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 11px;
}

/* ==========================================================================
マージン
   ========================================================================== */
.u-mb-10 {
  margin-bottom: 10px !important;
}

.u-mb-20 {
  margin-bottom: 20px !important;
}

.u-mb-40 {
  margin-bottom: 40px !important;
}

.u-mb-60 {
  margin-bottom: 60px !important;
}

.u-align-left {
  text-align: left !important;
}

.u-align-center {
  text-align: center !important;
}

/* ==========================================================================
矢印アイコン
========================================================================== */
.u-arrow {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  background-color: #ECF7F2;
  border-radius: 2px;
  vertical-align: middle;
  transition: background-color 0.3s;
  /* 枠外に出た矢印を隠す */
  overflow: hidden;
}

/* 矢印の共通設定 */
.u-arrow::before,
.u-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1px;
  margin-left: -2px;
  background-color: var(--primary-green);
  transition: background-color 0.3s;
  /* 矢印の形を作るための基本位置 */
  transform-origin: right center;
}

.u-arrow::before {
  margin-top: -1px;
}

.u-arrow::after {
  margin-top: 1px;
}

/* 矢印の形（上と下） */
.u-arrow::before {
  transform: translate(-50%, -50%) rotate(20deg) translateX(2px);
}

.u-arrow::after {
  transform: translate(-50%, -50%) rotate(-20deg) translateX(2px);
}

/* --- Hover時の動き --- */
a:hover .u-arrow {
  background-color: #007d43;
}

/* 矢印の色を白くし、アニメーションを発火させる */
a:hover .u-arrow::before,
a:hover .u-arrow::after {
  background-color: #fff;
  animation: arrowLoop 0.4s forwards;
}

/* beforeとafterで回転角度が違うため、変数で調整 */
.u-arrow::before {
  --rotate-angle: 20deg;
}

.u-arrow::after {
  --rotate-angle: -20deg;
}

/* 矢印アイコン色反転バージョン */
.p-business__btn .u-arrow {
  background-color: var(--primary-green);
}

.p-business__btn .u-arrow::before,
.p-business__btn .u-arrow::after {
  background-color: #fff;
}

.p-business__item:hover .u-arrow {
  background-color: #fff;
}

/* 矢印の色を白くし、アニメーションを発火させる */
.p-business__item:hover .u-arrow::before,
.p-business__item:hover .u-arrow::after {
  background-color: var(--primary-green);
  animation: arrowLoop 0.4s forwards;
}

/* --- 矢印が右に消えて左から出るアニメーション --- */
@keyframes arrowLoop {
  0% {
    /* 最初：中央（元の位置） */
    opacity: 1;
  }
  40% {
    /* 右へ進んで消える */
    transform: translate(150%, -50%) rotate(var(--rotate-angle)) translateX(2px);
    opacity: 0;
  }
  41% {
    /* 一瞬で左へワープ（見えない状態） */
    transform: translate(-250%, -50%) rotate(var(--rotate-angle)) translateX(2px);
    opacity: 0;
  }
  100% {
    /* 左から中央へ戻ってくる */
    transform: translate(-50%, -50%) rotate(var(--rotate-angle)) translateX(2px);
    opacity: 1;
  }
}
.btn-wrap-center {
  text-align: center;
}

/* ==========================================================================
ボタン
========================================================================== */
/* もっと見る */
.c-btn-wrap {
  text-align: center;
  margin-top: 40px;
}

.c-btn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 400px;
  max-width: 100%;
  height: 64px;
  background-color: var(--primary-green);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
@media screen and (max-width: 375px) {
  .c-btn-more {
    font-size: 14px;
  }
}

.c-btn-more.btn-white {
  color: var(--primary-green);
  background-color: #fff;
  border: #E2E2E2 solid 1px;
}

/* ボタン内の矢印を緑に */
.c-btn-more.btn-white .u-arrow {
  background-color: #f4f9f6;
}

.c-btn-more.btn-white .u-arrow::before,
.c-btn-more.btn-white .u-arrow::after {
  background-color: var(--primary-green);
}

.c-btn-more:hover {
  background-color: var(--primary-green);
  border: solid 1px var(--primary-green);
}

.c-btn-more.btn-white:hover {
  color: #fff;
  background: var(--primary-darkgreen);
}

/* ボタンの中の矢印アニメーション (以前作成したものを流用) */
.c-btn-more .u-arrow {
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 2px;
  position: absolute;
  right: 25px;
  overflow: hidden;
}

.c-btn-more .u-arrow::before,
.c-btn-more .u-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 1px;
  background-color: var(--primary-green);
}

.btn-back-square {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 400px;
  max-width: 100%;
  height: 64px;
  background-color: #fff;
  border: solid 1px #E2E2E2;
  color: var(--primary-green);
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-back-square:hover {
  background-color: var(--primary-green);
  color: #fff;
}

.btn-back-square .u-arrow {
  position: absolute;
  left: 25px;
  transform: scaleX(-1);
}

.p-top-news-more-link {
  position: absolute;
  left: 20px;
  bottom: -55px;
}
@media screen and (max-width: 767px) {
  .p-top-news-more-link {
    bottom: 0;
    left: 50%;
    margin-left: -103px;
  }
}

.u-arrow-cycle-link {
  display: block;
  font-weight: 500;
}

.u-arrow-cycle {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #ECF7F2;
  border-radius: 50%;
  position: relative;
  transition: background-color 0.3s;
  overflow: hidden;
  top: 23px;
  margin-left: 10px;
}

.u-arrow-cycle::before,
.u-arrow-cycle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%; /* 中央基準に変更 */
  width: 18px;
  height: 2px;
  background-color: var(--primary-green);
  border-radius: 2px;
  margin-left: -2px;
}

/* --- 右矢印 (Next) --- */
.u-arrow-cycle::before {
  --rot: 25deg;
  --ty: -4px;
  transform: translate(-30%, var(--ty)) rotate(var(--rot));
}

.u-arrow-cycle::after {
  --rot: -25deg;
  --ty: 3px;
  transform: translate(-30%, var(--ty)) rotate(var(--rot));
}

.u-arrow-cycle-link:hover .u-arrow-cycle {
  background-color: var(--primary-green);
}

/* 次へ：右に消えて左から出る */
.u-arrow-cycle-link:hover .u-arrow-cycle::before,
.u-arrow-cycle-link:hover .u-arrow-cycle::after {
  animation: nextLoop 0.6s forwards;
  background-color: #fff;
}

/* --- Base Styles --- */
.l-footer {
  position: relative;
  width: 100%;
  padding: 100px 0 60px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9998;
}

.l-footer__inner {
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* --- Layout: Contents --- */
.l-footer__content {
  display: flex;
  flex-direction: column; /* スマホでは縦並び */
  gap: 40px;
}

/* --- Company Info --- */
.l-footer__company-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 15px;
  font-feature-settings: "palt";
}

.l-footer__address {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.8;
  margin-bottom: 10px;
}

.l-footer__tel {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 30px;
}

.l-footer__logo img {
  width: 120px;
  height: auto;
  position: absolute;
  bottom: 10px;
}

/* --- Navigation --- */
.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
  gap: 30px 20px;
}

.l-footer__nav-title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 3px;
  padding-bottom: 8px;
}
.l-footer__nav-title a {
  color: #fff;
}

.l-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.l-footer__nav-list li {
  margin-bottom: 10px;
  list-style: disc outside;
  margin-left: 20px;
}

.l-footer__nav-list a {
  color: #fff;
  text-decoration: none;
  font-size: 0.8125rem;
  transition: opacity 0.3s;
  display: inline-block;
}

.l-footer__nav-list a:hover {
  opacity: 0.6;
}

/* 独立したリンク集 */
.l-footer__nav-list--main {
  grid-column: 1/-1; /* スマホでは横一杯に広げる */
}
.l-footer__nav-list--main li {
  list-style: none;
  margin-left: 0;
}

.l-footer__nav-list--main a {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
}

/* --- Catchphrase Area --- */
.l-footer__copy-area {
  margin-top: 60px;
  text-align: right;
}

.l-footer__catchphrase {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-align: left;
}

/* ============================================================
  PC Styles (Tablet and Desktop)
============================================================ */
@media (min-width: 768px) {
  .l-footer {
    padding: 100px 0 60px;
  }
  .l-footer__content {
    flex-direction: row; /* 横並び */
    justify-content: space-between;
    align-items: flex-start;
  }
  .l-footer__nav {
    grid-template-columns: repeat(4, auto); /* 3カラム並列 */
    gap: 0 60px;
  }
  .l-footer__nav-list--main {
    grid-column: auto;
  }
  .l-footer__copy-area {
    margin-top: 80px;
    text-align: right; /* PCでは右寄せ */
  }
  .l-footer__catchphrase {
    font-size: 2.5rem;
  }
}
/* --- 1. 共通コンテナ設定 --- */
.top-mv-intro-wrapper,
.top-mv-wrapper {
  width: 100%;
  /* 高さはJSで window.innerHeight を割り当てるため、初期値は100vh等でOK */
  height: 100vh;
  left: 0;
  top: 0;
}

/* --- 2. イントロ（世界地図＋シャッフル）レイヤー --- */
.top-mv-intro-wrapper {
  position: fixed; /* アニメーション中は最前面に固定 */
  z-index: 100;
  background-color: #fff;
  background-image: url(../images/top/mv_worldmap.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.top-mv-intro-wrapper .hero-section {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
}

.top-mv-intro-wrapper .p-top-message-inner {
  max-width: 840px; /* 少し広めに取るとダイナミックになります */
  margin: 0 auto;
  text-align: left;
  /* イントロ時は文字色をブランドカラー（緑）や黒にしたい場合はここで指定 */
  color: #2b7a5e;
}

/* 画像ボックス (垂直比率) */
.image-shuffler {
  position: absolute;
  top: 50%; /* JS側の初期値と合わせる */
  left: 50%;
  transform: translate(-50%, -50%); /* CSSで中央に固定 */
  /* 初期サイズ（縦長トリミング） */
  width: clamp(120px, 15vw, 220px);
  aspect-ratio: 3/4.2; /* これがトリミングの正体 */
  z-index: 20;
  background: #eee;
  overflow: hidden;
  opacity: 0;
  border-radius: 2px;
}

.shuffler-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.shuffler-img.active {
  display: block;
}

/* --- 3. メインコピーレイヤー --- */
.top-mv-wrapper {
  position: relative; /* スクロールで流れるようにする */
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 背景の黒オーバーレイ（fixedで動画等を透かす設定） */
.top-mv-wrapper::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
  pointer-events: none;
}

.p-top-message {
  width: 100%;
  padding: 100px 0;
  position: relative;
  z-index: 10;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-top-message {
    padding: 50px 0;
  }
}

.p-top-message-inner {
  margin: 0 auto;
  color: #fff;
  display: inline-block;
}

/* --- 4. タイポグラフィ（JS用初期状態を含む） --- */
.main-text {
  font-size: clamp(2rem, 9vw, 8.5rem);
  font-weight: 900;
  line-height: 1.1;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .main-text {
    font-size: 54px;
    line-height: 1.25;
  }
}

/* JSで下から出すためのインナー要素 */
.main-text-inner {
  display: inline-block;
  transform: translateY(115%);
}

.main-text-group {
  position: relative;
  text-align: left;
}

.sub-text-group {
  position: absolute;
  white-space: nowrap;
  right: 2.5em;
  top: 1.75em;
}
@media screen and (max-width: 767px) {
  .sub-text-group {
    right: 10px;
    top: 10px;
  }
}

.sub-text-item {
  font-size: clamp(0.7rem, 1.9vw, 1.6rem);
  font-weight: 700;
  opacity: 0; /* 初期は隠す */
  transform: translateY(10px);
}
@media screen and (max-width: 767px) {
  .sub-text-item {
    font-size: 14px;
  }
}

.sub-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: scaleX(0); /* 初期は幅0 */
  transform-origin: left;
}

/* --- 5. ミッションセクション --- */
.p-top-mission {
  width: 100%;
  padding: 100px 0 200px;
  z-index: 10;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-top-mission {
    padding: 0px 0 75px;
  }
}

.p-top-mission-inner {
  max-width: 1200px; /* 必要に応じて調整 */
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  padding: 0 40px;
}
@media screen and (max-width: 767px) {
  .p-top-mission-inner {
    width: 100%;
    display: block;
    padding: 0 30px;
  }
}

.p-top-mission__content {
  width: 67%;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-top-mission__content {
    width: 100%;
  }
}

.p-top-mission__content h2 {
  font-size: 20px;
  position: relative;
}

.p-top-mission__content h2::before {
  content: "";
  display: block;
  width: 30px;
  height: 8px;
  background-image: url(../images/common/jaht-line_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: -35px;
  top: 10px;
}

.p-top-mission__content p {
  font-size: 20px;
  margin-top: 40px;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-top-mission__content p {
    font-feature-settings: "palt";
    line-height: 1.75;
  }
}

.p-top-mission__visual {
  width: 33%;
}
@media screen and (max-width: 767px) {
  .p-top-mission__visual {
    width: 200px;
    margin-top: 40px;
  }
}

.p-top-mission__logo {
  max-width: 300px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-top-mission__logo {
    max-width: 200px;
  }
}

.p-top-mission__acronym {
  font-weight: 900;
  font-size: 3.8rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-bottom: 80px;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-top-mission__acronym {
    font-size: 2.4rem;
    margin-bottom: 40px;
  }
}

.p-top-mission__acronym .u-color-green {
  color: #2b7a5e; /* ブランドカラーに調整 */
}

/* レスポンシブ調整（必要に応じて） */
@media (max-width: 1024px) {
  .p-top-mission__content,
  .p-top-mission__visual {
    width: 100%;
  }
}
/* ==========================================================================
  事業領域
========================================================================== */
.p-top-business {
  padding: 0;
}

.p-top-business__list {
  width: 100%;
}

.p-top-business__item {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.5s ease;
}

@media (max-width: 768px) {
  .p-top-business__item {
    height: 200px;
  }
}
/* 背景画像 */
.p-top-business__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.p-top-business__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

/* コンテンツ表示 */
.p-top-business__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 8%;
  gap: 40px;
  color: #fff;
}

.p-top-business__num {
  font-size: 80px;
  font-weight: 700;
  opacity: 0.4;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .p-top-business__num {
    display: none;
  }
}

.p-top-business__text-group {
  display: flex;
  align-items: center;
  gap: 50px;
}
@media screen and (max-width: 767px) {
  .p-top-business__text-group {
    display: block;
  }
}

.p-top-business__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}
.p-top-business__title span {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.p-top-business__text {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.9;
}

/* --- グラデーションギミック --- */
/* 通常時：左から右へ（暗 → 明） */
.p-top-business__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 70%);
  transition: opacity 0.5s ease;
}

/* ホバー時用：右から左へ（明 ← 暗） */
.p-top-business__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 70%);
  opacity: 0; /* 最初は隠す */
  transition: opacity 0.5s ease;
}

/* --- ホバーアクション --- */
.p-top-business__item:hover .p-top-business__overlay {
  opacity: 1; /* 右側を暗くする */
}

.p-top-business__item:hover::before {
  opacity: 0; /* 左側の暗さを取る（写真が見えるようになる） */
}

.p-top-business__item:hover .p-top-business__bg img {
  transform: scale(1.05); /* ズームアップ */
}

.p-top-business__item:hover .p-top-business__content {
  /* テキストを少し右に動かすなどの微調整（お好みで） */
  transform: translateX(10px);
  transition: transform 0.5s ease;
}

/* ==========================================================================
  流れるJAHT文字
========================================================================== */
.p-brand-scroll {
  padding: 0;
  overflow: hidden; /* 必須：画面外のはみ出しを隠す */
  background: #fff;
}

.p-brand-scroll__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-brand-scroll__line {
  width: 100%;
  will-change: transform;
}

/* テキストの塊を横に並べる */
.p-brand-scroll__group {
  display: flex;
  width: max-content; /* 中身の合計幅に合わせる */
}

.p-brand-scroll__text {
  font-size: clamp(80px, 12vw, 180px);
  font-weight: 700;
  line-height: 1;
  color: #eef5ed; /* 薄いグリーン */
  text-transform: uppercase;
  padding-right: 0.5em; /* 文字同士の適度な間隔 */
}

.p-brand-scroll__text .u-highlight {
  color: #178152; /* 濃いグリーン */
}

/* JSで制御する変数。初期位置を -33.3% にして中央のセットを表示させる */
.p-brand-scroll__line--ltr {
  transform: translateX(calc(-33.33% + var(--scroll-move, 0%)));
}

.p-brand-scroll__line--rtl {
  transform: translateX(calc(-33.33% - var(--scroll-move, 0%)));
}

/* ==========================================================================
  ジャット式高設栽培システムとは
========================================================================== */
.p-top-ecs-points {
  padding: 0 0 80px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .p-top-ecs-points {
    padding: 0;
  }
}
.p-top-ecs-points::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: url("../images/common/ecs_bg.png") no-repeat center;
  background-position: center top;
  background-size: 100% auto;
  z-index: 1;
  opacity: 0.6;
}
@media (max-width: 1400px) {
  .p-top-ecs-points__inner {
    max-width: 890px;
  }
}
@media (min-width: 1441px) {
  .p-top-ecs-points__inner {
    max-width: 1100px;
  }
}
.p-top-ecs-points__inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-top-ecs-points__inner {
    gap: 0;
  }
}
.p-top-ecs-points__item {
  flex: 1;
  text-align: center;
}
.p-top-ecs-points__figure {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid #e9f5f2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  transition: transform 0.3s ease;
}
.p-top-ecs-points__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-top-ecs-points__label {
  display: block;
  font-weight: bold;
  color: #2b7a5e;
  font-size: 1.1rem;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.p-top-ecs-points__title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #333;
}
.p-top-ecs-points__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #666;
}
@media (max-width: 768px) {
  .p-top-ecs-points::before {
    display: none;
  }
  .p-top-ecs-points__inner {
    flex-direction: column;
    align-items: center;
  }
  .p-top-ecs-points__item {
    max-width: 300px;
    margin-bottom: 60px;
  }
}

/* ==========================================================================
  ギャラリー
========================================================================== */
.p-top-gallery {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .p-top-gallery {
    padding: 0;
  }
}

.p-top-gallery__mask {
  position: relative;
  width: 100%;
  /* 擬似要素（円）をスライダーより上に重ねる */
  z-index: 1;
}

/* 上下の湾曲パーツ共通設定 */
.p-top-gallery__mask::before,
.p-top-gallery__mask::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 画面幅よりずっと大きい幅にすることで、緩やかなカーブにする */
  width: 125%;
  height: 200px;
  background-color: #fff; /* 背景色と同じ色 */
  border-radius: 50%; /* 正円に近い楕円にする */
  z-index: 10;
}

/* 上側の湾曲（内側に凹ませる） */
.p-top-gallery__mask::before {
  top: -100px; /* スライダーに少し被せる */
}

/* 下側の湾曲（内側に凹ませる） */
.p-top-gallery__mask::after {
  bottom: -100px; /* スライダーに少し被せる */
}

/* --- スライダー（Splide）の調整 --- */
.p-top-gallery__slider {
  position: relative;
  z-index: 1;
}

.p-top-gallery__slider img {
  width: 100%;
  height: 700px;
  object-fit: cover;
  border-right: 1px solid #fff;
}

@media (max-width: 768px) {
  .p-top-gallery__slider img {
    height: 400px;
  }
  .p-top-gallery__mask::before,
  .p-top-gallery__mask::after {
    width: 300%; /* スマホではより横長にしないとカーブが急になる */
  }
}
/* ==========================================================================
  製品ラインナップ
========================================================================== */
.p-top-products {
  padding-top: 0;
}

.p-top-products .description {
  text-align: center;
  margin: 60px 0;
}

/* --- レイアウト全体 --- */
.p-top-products__list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* カード間の余白 */
  justify-content: center;
  margin-bottom: 80px;
}

/* --- カード本体の設計 --- */
.p-product-card {
  position: relative;
  width: calc((100% - 60px) / 3);
  background: #fff;
  border: 4px solid transparent; /* ★ホバー時に色をつけるため、最初は透明 */
  border-radius: 8px;
  padding: 50px 30px 40px;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 横方向中央揃え */
  text-align: center;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09); /* 通常時の薄い影 */
}

/* レスポンシブ対応 */
@media (max-width: 960px) {
  .p-top-products__list {
    gap: 20px;
  }
  .p-product-card {
    width: calc((100% - 20px) / 2);
  } /* 2段組み */
}
@media (max-width: 640px) {
  .p-product-card {
    width: 100%;
  } /* 1段組み */
}
/* --- カード内部の要素 --- */
.p-product-card__image {
  width: 100%;
  height: 250px; /* 画像エリアの高さを固定 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.p-product-card__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 画像を枠内に収める */
}

.p-product-card__content {
  margin-bottom: 30px;
}

.p-product-card__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.p-product-card__text {
  font-size: 16px;
  font-weight: 500;
  color: #666;
}

/* --- 矢印ボタン --- */
.p-product-card__arrow {
  position: absolute;
  bottom: 25px;
  right: 25px;
  width: 32px;
  height: 32px;
  background: #f1f5f0; /* 通常時の薄い緑背景 */
  border-radius: 4px; /* 角丸 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* ★背景色が変わるtransition */
  transition: background 0.4s ease;
}

/* --- ★核心：ホバー時のスタイル定義 --- */
/* 1. カード全体の変化（一番左のイメージ） */
.p-product-card:hover {
  transform: translateY(-5px); /* ★少し上に持ち上げる */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* ★影を濃くして浮遊感を出す */
  border-color: #178152; /* ★枠線を緑色に */
  background: #f1f5f0; /* ★背景色を薄い緑色に */
}

/* ==========================================================================
  企業紹介+採用情報
========================================================================== */
/* --- レイアウト全体 --- */
.p-top-links__inner {
  display: flex;
  flex-wrap: wrap;
}

.p-top-links__item {
  position: relative;
  width: 50%;
  aspect-ratio: 16/9; /* 画像の比率に合わせて調整 */
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-decoration: none;
  aspect-ratio: 4/3;
}

@media (max-width: 768px) {
  .p-top-links__item {
    width: 100%;
    aspect-ratio: 4/3;
  }
}
/* --- 背景画像 & オーバーレイ --- */
.p-top-links__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.p-top-links__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* 暗めのオーバーレイ */
.p-top-links__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  transition: background 0.4s ease;
}

/* --- コンテンツ --- */
.p-top-links__content {
  position: relative;
  z-index: 2;
  padding: 80px 40px;
}

.p-top-links__label {
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 20px;
}

.p-top-links__label::before,
.p-top-links__label::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 8px;
  background-image: url(../images/common/jaht-line_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
}

.p-top-links__title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}

.p-top-links__text {
  margin-bottom: 30px;
}

.p-top-links__content .c-btn-more {
  max-width: 290px;
}

/* --- ホバーアクション --- */
.p-top-links__item:hover .p-top-links__bg img {
  transform: scale(1.05);
}

.p-top-links__item:hover .p-top-links__bg::after {
  background: rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
  お知らせ
========================================================================== */
.p-top-news {
  padding: 0 0 240px;
}
@media screen and (max-width: 767px) {
  .p-top-news {
    padding: 0 0 60px;
  }
}

.p-top-news-inner {
  display: flex;
  position: relative;
  min-height: 500px;
}
@media screen and (max-width: 767px) {
  .p-top-news-inner {
    display: block;
    min-height: auto;
    padding-bottom: 60px;
  }
}
.p-top-news-inner h2 {
  font-size: 46px;
  width: 400px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .p-top-news-inner h2 {
    font-size: 20px;
  }
}
.p-top-news-inner h2 span {
  display: block;
  position: relative;
  font-size: 14px;
  color: var(--primary-green);
}
.p-top-news-inner h2 span::before {
  display: inline-block;
  content: url(../images/common/jaht-line.svg);
  width: 30px;
  height: 10px;
  margin-right: 5px;
}

.page-description {
  margin-bottom: 115px;
  text-align: center;
}
.page-description p {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}
.page-description p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .page-description {
    text-align: left;
    border: #ddd solid 1px;
    padding: 7.5%;
    margin-bottom: 50px;
  }
}

.p-service__item {
  display: flex;
  /* align-items: center; を stretch (デフォルト) に戻すか削除することで
     content と image の高さが揃います */
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 100px;
}

/* 偶数番目は左右反転（画像が左、テキストが右） */
.p-service__item:nth-child(odd) {
  flex-direction: row-reverse;
}

.p-service__item:last-child {
  margin-bottom: 0;
}

/* --- テキストコンテンツエリア --- */
.p-service__content {
  flex: 0 0 45%;
  position: relative;
  /* padding-top: 40px; は中央配置を邪魔するので削除または調整 */
  /* ここから追加：中身を縦中央に寄せる設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-service__number {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 160px;
  font-weight: 800;
  line-height: 1;
  color: #ebf7f1;
  z-index: 1;
}

.p-service__info {
  position: relative;
  z-index: 2;
}

.p-service__title {
  font-size: 28px;
  font-weight: 700;
  color: #007d43; /* ブランドグリーン */
  line-height: 1.4;
  margin-bottom: 30px;
  padding-left: 30px;
  position: relative;
}

/* 見出し横の黄色い線 */
.p-service__title::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 12px;
  height: 100%;
  background: url(../images/common/jaht-line-yy.svg);
  background-repeat: repeat-y;
  background-size: 12px auto;
}

.p-service__text {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 600;
  color: var(--text-main);
}

/* --- 画像エリア --- */
.p-service__image {
  flex: 0 0 50%;
}

.p-service__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* --- レスポンシブ --- */
@media (max-width: 1023px) {
  .p-service {
    padding: 80px 0;
  }
  .p-service__item,
  .p-service__item:nth-child(odd) {
    flex-direction: column; /* スマホは画像を下に配置（または column-reverseで上に） */
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: solid 1px #ddd;
  }
  .p-service__content,
  .p-service__image {
    flex: 0 0 100%;
    width: 100%;
  }
  .p-service__number {
    font-size: 100px;
    top: -20px;
  }
  .p-service__title {
    font-size: 22px;
  }
}
.p-business {
  padding: 0 0 125px;
}
@media screen and (max-width: 767px) {
  .p-business {
    padding: 0;
  }
}

.p-business__grid {
  display: flex;
  flex-wrap: wrap; /* スマホ時は折り返す */
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.p-business__item {
  position: relative;
  flex: 0 0 25%; /* 4カラム */
  height: 500px; /* デザインに合わせた高さ */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 下側に寄せる */
  padding: 40px 30px;
  text-decoration: none;
  color: #fff;
}

/* 背景画像とオーバーレイ */
.p-business__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.p-business__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.p-business__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 2;
}

/* コンテンツエリア */
.p-business__content {
  position: relative;
  z-index: 3;
}

.p-business__content .p-features__number {
  font-size: 32px; /* この箇所の数字は小さめ */
  margin-bottom: 10px;
  color: #fff;
}

.p-business__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.p-business__text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* 右下の矢印ボタン */
.p-business__btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

.p-business__item:hover .p-business__bg img {
  transform: scale(1.05); /* 画像が少しズーム */
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .p-business__item {
    flex: 0 0 50%; /* スマホ・タブレットは2カラム */
    height: 400px;
  }
}
@media (max-width: 599px) {
  .p-business__item {
    flex: 0 0 100%; /* スマホは1カラム */
  }
}
/* ==========================================================================
ジャット式高設栽培システム
========================================================================== */
/* ジャット式 高設栽培システムとは */
.ecs-section {
  background-color: #F9F9F2;
}

.p-feature-circles {
  padding: 20px 0;
  margin: 60px auto 0;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-feature-circles {
    margin: 0 auto;
    padding: 0;
  }
}

.p-feature-circles::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-image: url(../images/common/ecs_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-feature-circles::before {
    display: none;
  }
}

.p-feature-circles__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-feature-circles__list {
    display: block;
    gap: 0;
  }
}

.p-feature-circles__item {
  width: 280px;
  height: 280px;
  border: solid 5px #eaf6f0;
  background-color: #178152;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .p-feature-circles__item {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    border-radius: 14px;
    padding: 15px 17px;
  }
}
.p-feature-circles__item p {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-feature-circles__item p {
    text-align: left;
    font-size: 20px;
    letter-spacing: 0;
  }
}

/* ジャット式高設栽培システムの強み */
.strengths-description {
  margin-bottom: 80px;
  font-weight: 600;
  text-align: center;
  font-feature-settings: "palt";
}
@media screen and (max-width: 767px) {
  .strengths-description {
    text-align: left;
    margin-bottom: 30px;
    line-height: 1.25;
  }
}
.strengths-description h3 {
  font-size: 32px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .strengths-description h3 {
    font-size: 28px;
    margin-bottom: 20px;
  }
}
.strengths-description p {
  font-size: 20px;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .strengths-description p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 15px;
    font-weight: 500;
    text-align: left;
  }
}

.strengths-description.secondary {
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .strengths-description.secondary {
    text-align: left;
    margin-bottom: 30px;
  }
}
.strengths-description.secondary h3 {
  font-size: 20px;
  margin-bottom: 20px;
}
.strengths-description.secondary p {
  font-size: 16px;
}

.strengths-sub-description {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 40px;
}
@media screen and (max-width: 767px) {
  .strengths-sub-description {
    text-align: left;
  }
}

.green-banner-block {
  background-color: var(--primary-green);
  color: #fff;
  padding: 40px 40px;
  border-radius: 12px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .green-banner-block {
    padding: 20px;
  }
}
.green-banner-block p {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .green-banner-block p {
    font-size: 18px;
    text-align: left;
  }
}

/* --- ターゲットカード共通 --- */
.p-target-card {
  padding: 50px 40px;
  border-radius: 12px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.p-target-card.is-green {
  background-color: #f0f7f3;
}

.p-target-card.is-orange {
  background-color: #fbfaf2;
}

/* アイコン */
.p-target-card__icon {
  margin: 0 auto 30px;
  height: 140px;
  align-items: center;
  display: flex;
}

.p-target-card.is-green .p-target-card__icon img {
  height: 80px;
  width: auto;
}

.p-target-card.is-orange .p-target-card__icon img {
  height: 140px;
  width: auto;
}

/* タイトル */
.p-target-card__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #333;
}

.p-target-card__title span {
  color: #ccc;
  margin: 0 5px;
}

.p-target-card__title mark {
  background: linear-gradient(transparent 60%, #f1e400 60%); /* マーカー風 */
  color: #178152;
}

.is-orange .p-target-card__title mark {
  color: #e87a1a; /* オレンジ版の文字色 */
}

/* リード文・リスト */
.p-target-card__lead {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: left;
}

.p-target-card__list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  font-size: 14px;
}

.p-target-card__list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 8px;
  font-weight: 700;
}

.p-target-card__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #178152;
  font-weight: 900;
}

/* ボタン調整 */
.p-target-card__btn {
  margin-top: auto;
}

.c-btn-primary.is-orange {
  background-color: #e87a1a;
}

.c-btn-primary.is-orange:hover {
  background-color: var(--primary-darkgreen);
}

.c-btn-primary__text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
  opacity: 0.9;
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .p-target-card {
    padding: 30px;
  }
  .p-target-card__title {
    font-size: 16px;
  }
  .p-target-card__lead {
    font-size: 14px;
  }
  .p-target-card__list {
    margin-bottom: 20px;
  }
}
/* 導入プロセス */
.p-flow-stack {
  background-color: #f9fbf2;
  padding: 120px 0;
  overflow: visible;
}
@media screen and (max-width: 767px) {
  .p-flow-stack {
    padding: 60px 0;
  }
}

.p-flow-stack__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  .p-flow-stack__inner {
    display: block;
  }
}

/* --- 左側：固定エリア --- */
.p-flow-stack__left {
  position: sticky;
  top: 15vh;
  width: 55%;
  padding-top: 15%;
}
@media screen and (max-width: 767px) {
  .p-flow-stack__left {
    padding-top: 0;
    position: relative;
    top: 0;
    width: 100%;
  }
}

.p-flow-stack__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 40px;
}

.p-flow-stack__nav-label {
  color: #178152;
  font-weight: 800;
  margin-bottom: 15px;
  display: block;
}

/* ドットの横並び設定 */
.p-flow-stack__dots {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 60px 0;
}
@media screen and (max-width: 767px) {
  .p-flow-stack__dots {
    justify-content: space-between;
  }
}

.p-flow-stack__dot {
  width: 38px;
  height: 38px;
  border: 1px solid #178152;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #178152;
  background: #fff;
  transition: all 0.3s ease;
}

.p-flow-stack__dot.is-active {
  background: #178152;
  color: #fff;
}

.p-flow-stack__btn {
  margin-top: 30px;
}

/* --- 右側：カードエリア --- */
.p-flow-stack__right {
  width: 60%;
}
@media screen and (max-width: 767px) {
  .p-flow-stack__right {
    width: 100%;
    margin-top: 40px;
  }
}

.p-flow-card {
  position: sticky;
  z-index: var(--stack-index);
  top: calc(15vh + var(--stack-index) * 40px);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 60px;
  min-height: 500px;
  margin-bottom: 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.06);
}
@media screen and (max-width: 767px) {
  .p-flow-card {
    display: block;
    width: 100%;
    padding: 25px;
    margin-bottom: 30px;
    min-height: 100%;
  }
}

.p-flow-card:last-child {
  margin-bottom: 0;
}

/* --- カード内部の装飾 --- */
.p-flow-card__num {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 16px;
  font-weight: 800;
  color: #178152;
}

.p-flow-card__title {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 24px;
  font-weight: 700;
  color: #178152;
  margin-bottom: 25px;
}

.p-flow-card__btns {
  margin-top: 30px; /* テキストとの距離 */
  display: flex;
  flex-direction: column;
  gap: 15px; /* 2つのボタン同士の距離 */
}

.p-flow-card__title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #F9F9F2; /* アイコンが目立つよう薄い背景 */
  border-radius: 50%;
  flex-shrink: 0; /* アイコンが潰れないように固定 */
}

.p-flow-card__title-icon img {
  width: 30px;
  height: auto;
}

/* --- 電話番号とボタン周り --- */
.p-flow-card__contact {
  margin-top: 25px;
}

.p-flow-card__contact-label {
  font-size: 15px;
  color: #178152;
  font-weight: 700;
  margin-bottom: 8px;
}

.p-flow-card__tel {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
  margin-bottom: 15px;
  line-height: 1.2;
}

.p-flow-card__contact .sp-contact-btn {
  max-width: 320px;
  margin-left: 0; /* カード内なので左寄せ */
}

.p-flow-card__text {
  line-height: 1.8;
  font-size: 16px;
}

/* FAQ */
.p-faq {
  padding: 80px 0;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .p-faq {
    padding: 0 0 60px;
  }
}

.p-faq__title {
  font-size: 28px;
  font-weight: 700;
  color: #178152;
  text-align: center;
  margin-bottom: 50px;
}

.p-faq__list {
  max-width: 1000px;
  margin: 0 auto;
}

.p-faq__item {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: background-color 0.3s;
}

/* 開いている時の背景色 */
.p-faq__item.is-open {
  background-color: #f4f9f6;
  border-color: #d1e5da;
}

/* 質問部分（ボタン） */
.p-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 25px 30px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.p-faq__q-icon {
  font-size: 24px;
  font-weight: 800;
  color: #178152;
  margin-right: 15px;
}

.p-faq__q-text {
  font-size: 18px;
  font-weight: 700;
  color: #178152;
  flex: 1;
}

/* 右側の開閉表示 */
.p-faq__toggle {
  display: flex;
  align-items: center;
  gap: 15px;
}

.p-faq__toggle-label {
  font-size: 12px;
  font-weight: 700;
  color: #178152;
  letter-spacing: 0.1em;
}

.p-faq__toggle-line {
  display: block;
  width: 30px;
  height: 10px;
  background-image: url(../images/common/jaht-line.svg);
  background-size: 30px auto;
  background-repeat: no-repeat;
  transition: all 0.3s;
}

/* 開いている時の線の切り替え（1本線にする） */
.p-faq__item.is-open .p-faq__toggle-line {
  display: block;
  width: 30px;
  height: 2px;
}

/* 回答部分 */
.p-faq__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}

.p-faq__item.is-open .p-faq__answer {
  visibility: visible;
}

.p-faq__answer-inner {
  padding: 0 30px 30px 75px;
  display: flex;
  align-items: flex-start;
}

.p-faq__a-icon {
  font-size: 24px;
  font-weight: 800;
  color: #178152;
  margin-right: 20px;
  position: relative;
  top: -5px;
}

.p-faq__a-text {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

@media (max-width: 767px) {
  .p-faq__question {
    padding: 20px;
  }
  .p-faq__q-text {
    font-size: 16px;
  }
  .p-faq__answer-inner {
    padding: 0 20px 20px 20px;
    flex-direction: column;
  }
  .p-faq__a-icon {
    margin-bottom: 10px;
  }
}
/* --- 未来セクション全体 --- */
.p-future {
  background-color: #f9fbf2; /* 薄いベージュ系の背景 */
}

.p-future__list {
  margin-bottom: 60px;
  align-items: stretch;
}
@media screen and (max-width: 767px) {
  .p-future__list {
    margin-bottom: 0;
  }
}

.p-future__list .column:nth-child(1) {
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .p-future__list .column:nth-child(1) {
    margin-top: 0;
  }
}

.p-future__list .column:nth-child(2) {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .p-future__list .column:nth-child(2) {
    margin-top: 0;
  }
}

/* --- 未来カード --- */
.p-future-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.p-future-card__image {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1.2/1;
}

.p-future-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-future-card__body {
  padding: 30px 10px 0;
  position: relative;
}

/* 数字の装飾 */
.p-future-card__number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  width: 66px;
  height: 66px;
  text-align: center;
  padding-top: 17px;
  border-radius: 33px;
  color: #178152;
  background-color: #F9F9F2;
  line-height: 1;
  margin-bottom: 15px;
  position: absolute;
  top: -30px;
}

.p-future-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.p-future-card__text {
  font-size: 14px;
  line-height: 1.8;
  position: relative;
  z-index: 2;
}

/* --- レスポンシブ --- */
@media (max-width: 1023px) {
  .p-future-card {
    margin-bottom: 0;
  }
  .p-future-card__title {
    font-size: 17px;
  }
}
.p-case {
  background-color: var(--primary-green);
}
.p-case h2 {
  color: #fff;
}
.p-case .p-case-card__body {
  color: #fff;
}
.p-case .p-case-card__date {
  color: #fff;
}

.p-case .p-case-card:hover .p-case-card__title {
  color: var(--primary-yellow);
}

/* ==========================================================================
土耕栽培から高設栽培への切り替えをご検討の方へ
========================================================================== */
.points-section {
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  .points-section {
    padding-bottom: 0;
  }
}

.points-section.switch-section {
  padding-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .points-section.switch-section {
    padding-bottom: 60px;
  }
}

.p-points-heading {
  text-align: center;
  margin-bottom: 110px;
}
@media screen and (max-width: 767px) {
  .p-points-heading {
    margin-bottom: 50px;
  }
}
.p-points-heading h2 {
  font-size: 24px;
}
.p-points-heading h2 span {
  font-size: 32px;
}
.p-points-heading > p {
  font-size: 16px;
  border-bottom: solid 2px var(--primary-green);
  display: inline-block;
  font-weight: 600;
  margin: 0 auto 20px;
  padding-bottom: 3px;
  position: relative;
}
.p-points-heading > p::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: var(--primary-green) transparent transparent;
  translate: -50% 100%;
}
.p-points-heading > p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 7px 7px 0 0;
  border-color: #fff transparent transparent;
  translate: calc(-50% - 0.2px) 100%;
}

@media screen and (max-width: 767px) {
  .p-points-heading .description {
    text-align: left;
  }
  .p-points-heading .description p {
    margin: 10px 0;
  }
}

.p-points__item {
  align-items: center;
  margin-bottom: 100px;
}

.p-points__item:last-child {
  margin-bottom: 0;
}

/* --- テキストコンテンツ --- */
.p-points__label {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-green);
  background: linear-gradient(transparent 50%, #FCEE21 50%);
  display: inline-block;
  margin-bottom: 15px;
  line-height: 1;
}

.p-points__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

.p-points__text {
  font-size: 15px;
  line-height: 2;
  font-weight: 500;
  color: var(--text-main);
}
@media screen and (max-width: 767px) {
  .p-points__text {
    line-height: 1.5;
  }
}

.p-points__text strong {
  color: var(--text-main);
  font-weight: 700;
}

/* --- 画像エリア --- */
.p-points__image {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  margin: 0;
}

.p-points__image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  object-fit: cover;
}

/* --- 収量比較エリア（POINT 03） --- */
.p-points__comparison {
  background-color: #f9fbf2;
  padding: 60px 40px;
  border-radius: 15px;
  position: relative;
}

.p-points__comparison-inner {
  max-width: 360px;
  margin: 0 auto;
}

.p-points__illust {
  position: absolute;
  right: -25px;
  bottom: -10px;
  width: auto;
  height: 170px;
}
@media screen and (max-width: 767px) {
  .p-points__illust {
    right: 0;
    height: 100px;
  }
}

/* --- 比較カード --- */
.p-comparison-card {
  background: #f0f0f0;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 15px;
}

.p-comparison-card__label {
  font-size: 13px;
  margin-bottom: 5px;
  display: block;
}

.p-comparison-card__value {
  font-size: 24px;
  font-weight: 800;
  display: block;
}

.p-comparison-card__value small {
  font-size: 14px;
  font-weight: 500;
}

/* 比較カード（ジャット式強調） */
.p-comparison-card.is-highlight {
  background: var(--primary-green);
  color: #fff;
  margin-bottom: 0;
}

.p-comparison-card.is-highlight .p-comparison-card__label {
  color: #fff;
}

.p-comparison-card.is-highlight .p-comparison-card__value {
  font-size: 28px;
}

/* --- レスポンシブ --- */
@media (max-width: 1023px) {
  .p-points {
    padding: 60px 0;
  }
  .p-points__item {
    margin-bottom: 60px;
  }
  /* グリッド反転の解除（共通クラスの上書き） */
  .p-points__item.is-reverse {
    direction: ltr;
  }
  .p-points__title {
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 1.4;
    font-feature-settings: "palt";
  }
  .p-points__comparison {
    padding: 40px 20px;
  }
}
/* --- スケジュールセクション --- */
.schedule-section {
  background-color: #f9fbf2;
  padding: 100px 0 200px;
  margin-bottom: 100px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .schedule-section {
    padding: 50px 0;
    margin-bottom: 50px;
  }
}

.p-schedule__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .p-schedule__title {
    font-size: 22px;
  }
}

/* アイコンエリア */
.p-schedule__icons {
  width: auto;
  height: 80px;
  text-align: center;
  margin: 0 auto 40px;
}
.p-schedule__icons img {
  width: auto;
  height: 80px;
  margin: 0 auto;
}

.p-schedule__arrow {
  font-size: 40px;
  color: var(--primary-green);
  font-family: serif;
}

/* 工期目安カード */
.p-schedule__card {
  max-width: 900px;
  margin: 0 auto 40px;
  background-color: #fff;
  border-radius: 12px;
  padding: 40px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
@media screen and (max-width: 767px) {
  .p-schedule__card {
    margin: 0 auto 20px;
    padding: 20px;
  }
}

.p-schedule__card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.p-schedule__card-label {
  font-size: 18px;
  font-weight: 700;
}

.p-schedule__card-lead {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-green);
}

/* 補足テキスト */
.p-schedule__note {
  max-width: 900px;
  margin: 0 auto;
  text-align: left; /* テキストは左寄せ */
}

.p-schedule__note p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* --- レスポンシブ --- */
@media (max-width: 767px) {
  .p-schedule__card-inner {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  .p-schedule__card-label {
    font-size: 14px;
  }
  .p-schedule__card-lead {
    font-size: 20px;
  }
  .p-schedule__card-lead span {
    font-size: 26px;
  }
  .p-schedule__icon-item {
    width: 70px;
  }
}
/* --- フローチャートエリア --- */
.p-flow {
  width: 100%;
  padding: 40px 0;
}

.p-flow-description {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .p-flow-description {
    text-align: left;
    font-size: 16px;
  }
}

.p-flow__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 各ステップのボックス */
.p-flow__item {
  flex: 1;
}

.p-flow__box {
  background-color: #178152; /* ブランドグリーン */
  color: #fff;
  padding: 25px 15px;
  border-radius: 10px;
  text-align: center;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.p-flow__number {
  position: absolute;
  top: 10px;
  left: 15px;
  color: #f1e400; /* 黄色の数字 */
  font-weight: 800;
  font-size: 18px;
}

.p-flow__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}

.p-flow__time {
  font-size: 14px;
}

/* 矢印 */
.p-flow__list .fa-arrow-right,
.p-flow__list .fa-arrow-down {
  display: none;
  font-size: 40px;
  color: var(--primary-green);
  margin: 15px;
}

@media (max-width: 768px) {
  .p-flow__list .fa-arrow-right {
    display: none;
  }
  .p-flow__list .fa-arrow-down {
    display: block;
  }
}
@media (min-width: 769px) {
  .p-flow__list .fa-arrow-right {
    display: block;
  }
  .p-flow__list .fa-arrow-down {
    display: none;
  }
}
/* --- レスポンシブ --- */
@media (max-width: 1023px) {
  .p-flow__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  .p-flow__item {
    flex: 0 0 calc(50% - 20px); /* 2カラム */
  }
  .p-flow__box {
    min-height: auto;
    padding: 15px 10px;
  }
}
@media (max-width: 599px) {
  .p-flow__item {
    flex: 0 0 100%; /* スマホは1カラム */
  }
}
/* --- コンバージョンセクション --- */
.conversion-section {
  position: relative;
  padding: 100px 0;
  margin-bottom: 0;
  background-color: #fff;
  text-align: center;
  /* 山の高さ分、上に余白を作る */
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .conversion-section {
    padding: 50px 0;
  }
}

.conversion-section::before {
  content: "";
  position: absolute;
  /* セクションの「真上」に配置 */
  top: -99px;
  left: 0;
  width: 100%;
  height: 100px; /* 山の高さ */
  /* 山形の図形（SVG）を直接書き込みます */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C400,0 1040,0 1440,100 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .conversion-section::before {
    top: -49px;
    height: 50px; /* 山の高さ */
  }
}

.conversion-section .inner {
  position: relative;
  z-index: 2;
}

/* メインタイトル */
.p-conversion__title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .p-conversion__title {
    font-size: 28px;
  }
}

.p-conversion__title .en {
  display: block;
  width: 180px;
  margin: 0 auto 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-green);
}

.p-conversion__title .en::before,
.p-conversion__title .en::after {
  display: inline-block;
  content: url(../images/common/jaht-line.svg);
  width: 30px;
  height: 10px;
  margin: 0 10px;
}

/* リード文 */
.p-conversion__lead {
  font-size: 16px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .p-conversion__lead {
    margin-bottom: 30px;
  }
}

/* ボタンエリア */
.p-conversion__btn-wrap {
  display: flex;
  justify-content: center;
}

/* 共通ボタンクラス：c-btn-primary */
.c-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 70px;
  background-color: var(--primary-green);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s, opacity 0.3s;
}

.c-btn-primary:hover {
  background-color: var(--primary-darkgreen);
}

/* ボタン内の矢印位置調整 */
.c-btn-primary .u-arrow {
  position: absolute;
  right: 20px;
  background-color: #fff;
  width: 24px;
  height: 24px;
}

.c-btn-primary .u-arrow::before,
.c-btn-primary .u-arrow::after {
  background-color: var(--primary-green);
}

/* レスポンシブ */
@media (max-width: 767px) {
  .p-conversion {
    padding: 60px 20px;
  }
  .p-conversion__title {
    font-size: 20px;
  }
  .p-conversion__lead {
    font-size: 14px;
    text-align: left; /* スマホでは左寄せが見やすい場合 */
  }
  .c-btn-primary {
    height: 60px;
  }
}
/* ==========================================================================
高設栽培で農業の未来をつくる
========================================================================== */
.p-research {
  background-color: #F9F9F2;
  padding: 110px 0;
}
@media screen and (max-width: 767px) {
  .p-research {
    padding: 50px 0;
  }
}

.p-research__item {
  align-items: center;
  margin-bottom: 80px;
  background-color: #fff;
  border: solid 3px var(--primary-green);
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 767px) {
  .p-research__item {
    padding: 30px;
  }
}

.p-research__item:last-child {
  margin-bottom: 0;
}

/* ラベル：左に3本線 */
.p-research__label {
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #178152;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  position: relative;
}

.p-research__label::before {
  content: "";
  display: block;
  width: 40px;
  height: 8px;
  background-image: url(../images/common/jaht-line.svg); /* 緑の3本線 */
  background-size: contain;
  background-repeat: repeat-x;
  position: absolute;
  left: -50px;
  top: 6px;
}
@media screen and (max-width: 767px) {
  .p-research__label::before {
    width: 20px;
    left: -30px;
  }
}

/* タイトル */
.p-research__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .p-research__title {
    font-size: 20px;
  }
}

/* 本文 */
.p-research__text {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

/* 画像 */
.p-research__image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
}

.p-research__image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  object-fit: cover;
}

/* --- レスポンシブ --- */
@media (max-width: 1023px) {
  .p-research {
    padding: 60px 0;
  }
  .p-research__item {
    margin-bottom: 50px;
    /* スマホ時は画像が上、テキストが下にする場合（グリッドの基本挙動） */
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
  }
  .p-research__content {
    margin-top: 25px;
  }
  .p-research__title {
    font-size: 22px;
  }
}
/* ==========================================================================
導入事例
========================================================================== */
.p-case-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-case-list__item {
  margin-bottom: 50px;
}

/* --- カード単体 --- */
.p-case-card {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: 0.3s;
}

.p-case-card__image {
  margin: 0;
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: 8px;
  overflow: hidden;
  background-color: #eee;
}

.p-case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ホバー演出 */
.p-case-card:hover .p-case-card__image img {
  transform: scale(1.05);
}

.p-case-card__body {
  padding-top: 15px;
}

.p-case-card__date {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.p-case-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  /* 3行以上は省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: 0.3s;
}

.p-case-card:hover .p-case-card__title {
  color: var(--primary-green);
}

/* --- レスポンシブ --- */
@media (max-width: 1023px) {
  .p-case-list__item {
    margin-bottom: 20px;
  }
  .p-case-card__title {
    font-size: 15px;
  }
}
.hero-visual.is-full-wide {
  width: 100%;
  height: 660px;
}
@media screen and (max-width: 767px) {
  .hero-visual.is-full-wide {
    height: 330px;
  }
}
.hero-visual.is-full-wide .hero-visual__inner {
  --offset-base: 100px;
  width: calc(100% - var(--offset-base));
  height: 660px;
}
@media screen and (max-width: 767px) {
  .hero-visual.is-full-wide .hero-visual__inner {
    height: 330px;
    --offset-base: 0;
    width: 100%;
  }
}

.hero-visual__content__case {
  width: 100%;
  z-index: 3;
  color: #fff;
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5% 5% 10%;
}
@media screen and (max-width: 767px) {
  .hero-visual__content__case {
    padding: 5% 5% 70px;
  }
}
.hero-visual__content__case .page-title__date {
  font-size: 16px;
}
.hero-visual__content__case .page-title__jp {
  font-size: 32px;
}
@media screen and (max-width: 767px) {
  .hero-visual__content__case .page-title__jp {
    font-size: 20px;
    line-height: 1.25;
  }
}

@media screen and (max-width: 767px) {
  .case-section {
    padding-top: 20px;
  }
  .case-section .grid {
    display: block;
  }
}

.case-details-inner {
  padding-bottom: 110px;
  margin-bottom: 110px;
  border-bottom: solid 1px #ddd;
}
@media screen and (max-width: 767px) {
  .case-details-inner {
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
}

.case-details-inner p {
  margin-bottom: 25px;
}

p:last-child {
  margin-bottom: 0;
}

.case-details-inner h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-green);
  line-height: 1.4;
  margin-top: 60px;
  margin-bottom: 30px;
  padding-left: 30px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .case-details-inner h2 {
    font-size: 20px;
  }
}

.case-details-inner h2::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 12px;
  height: 100%;
  background: url(../images/common/jaht-line-yy.svg);
  background-repeat: repeat-y;
  background-size: 12px auto;
}

.case-details-inner table {
  width: 100%;
  border-top: solid 1px #ddd;
  border-right: solid 1px #ddd;
  text-align: left;
  border-collapse: collapse;
}

.case-details-inner table th,
.case-details-inner table td {
  border-bottom: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-collapse: collapse;
  padding: 2.5%;
}

.case-details-inner table th {
  background: #F9F9F2;
  max-width: 200px;
  width: 30%;
}

.p-table-list {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  font-size: 15px;
}

.p-table-list dt {
  padding: 15px 0 15px 20px;
  color: var(--primary-green);
  font-weight: 700;
  float: left;
}

.p-table-list dd {
  flex: 1;
  padding: 15px 0px 15px 150px;
  color: #333;
  border-bottom: 1px solid #DDDDDD;
}

.news-list {
  width: 100%;
}

.news-item {
  display: block;
  padding: 25px 40px 25px 30px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 4px;
  color: var(--text-main);
  transition: 0.3s;
  position: relative;
}
@media screen and (max-width: 767px) {
  .news-item {
    padding: 25px 50px 25px 15px;
  }
}

.news-item:hover {
  color: var(--primary-green);
  background-color: #ECF7F2;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.news-category {
  min-width: 110px;
  padding: 4px 12px;
  border: #D6D6D6 solid 1px;
  color: var(--primary-green);
  font-size: 12px;
  text-align: center;
  font-weight: 700;
  transition: 0.3s;
}

.news-item:hover .news-category,
.entry-heading .news-category {
  background-color: var(--primary-green);
  border: var(--primary-green) solid 1px;
  color: #fff;
}

.news-item .u-arrow,
.news-tabs li a .u-arrow {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .news-item .u-arrow,
  .news-tabs li a .u-arrow {
    right: 15px;
  }
}

/* カテゴリタブの装飾 */
.news-tabs {
  display: block;
  list-style: none;
  margin-bottom: 30px;
}

.news-tabs li a {
  display: block;
  padding: 15px 35px 15px 5px;
  background: #fff;
  border-bottom: solid 1px #fff;
  font-size: 14px;
  font-weight: 700;
  min-width: 100px;
  transition: all 0.3s;
  color: var(--text-main);
  position: relative;
}

.news-tabs li a:hover {
  color: var(--primary-green);
}

.news-tabs li a.is-active {
  color: var(--primary-green);
}

/* ============================================================
  Pagination Container
============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* 数字とボタンの間隔 */
  margin: 50px 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ============================================================
  Page Numbers (数字部分)
============================================================ */
.page-numbers {
  text-decoration: none;
  color: #ccc; /* 通常時の数字の色（薄いグレー） */
  font-size: 24px;
  font-weight: 700;
  transition: color 0.3s;
}

/* 現在のページ */
.page-numbers.current {
  color: #007d43; /* ブランドカラーの緑 */
}

/* ドット (...) */
.page-numbers.dots {
  color: #ccc;
}

.page-numbers:hover:not(.current):not(.dots) {
  color: #007d43;
}

/* ============================================================
  Arrow Buttons (左右の円形ボタン)
============================================================ */
.prev.page-numbers,
.next.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #ECF7F2;
  border-radius: 50%;
  position: relative;
  transition: background-color 0.3s; /* transform 0.2s（拡大）を削除 */
  overflow: hidden; /* はみ出した矢印を隠す */
}

.prev.page-numbers:hover,
.next.page-numbers:hover {
  background-color: var(--primary-green);
}

/* 矢印の線 共通設定 */
.u-arrow--prev::before,
.u-arrow--prev::after,
.u-arrow--next::before,
.u-arrow--next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%; /* 中央基準に変更 */
  width: 18px;
  height: 2px;
  background-color: var(--primary-green);
  border-radius: 2px;
}

.u-arrow--next::before,
.u-arrow--next::after {
  margin-left: -2px;
}

/* --- 右矢印 (Next) --- */
.u-arrow--next::before {
  --rot: 25deg;
  --ty: -4px;
  transform: translate(-30%, var(--ty)) rotate(var(--rot));
}

.u-arrow--next::after {
  --rot: -25deg;
  --ty: 3px;
  transform: translate(-30%, var(--ty)) rotate(var(--rot));
}

/* --- 左矢印 (Prev) --- */
.u-arrow--prev::before {
  --rot: -25deg;
  --ty: -4px;
  transform: translate(-70%, var(--ty)) rotate(var(--rot));
}

.u-arrow--prev::after {
  --rot: 25deg;
  --ty: 3px;
  transform: translate(-70%, var(--ty)) rotate(var(--rot));
}

/* ============================================================
  Hover アニメーション発火
============================================================ */
/* 次へ：右に消えて左から出る */
.next.page-numbers:hover .u-arrow--next::before,
.next.page-numbers:hover .u-arrow--next::after {
  animation: nextLoop 0.6s forwards;
  background-color: #fff;
}

/* 前へ：左に消えて右から出る */
.prev.page-numbers:hover .u-arrow--prev::before,
.prev.page-numbers:hover .u-arrow--prev::after {
  animation: prevLoop 0.6s forwards;
  background-color: #fff;
}

/* ============================================================
  Keyframes
============================================================ */
/* 右方向ループ */
@keyframes nextLoop {
  0% {
    opacity: 1;
  }
  40% {
    transform: translate(150%, var(--ty)) rotate(var(--rot));
    opacity: 0;
  }
  41% {
    transform: translate(-250%, var(--ty)) rotate(var(--rot));
    opacity: 0;
  }
  100% {
    transform: translate(-30%, var(--ty)) rotate(var(--rot));
    opacity: 1;
  }
}
/* 左方向ループ */
@keyframes prevLoop {
  0% {
    opacity: 1;
  }
  40% {
    transform: translate(-250%, var(--ty)) rotate(var(--rot));
    opacity: 0;
  }
  41% {
    transform: translate(150%, var(--ty)) rotate(var(--rot));
    opacity: 0;
  }
  100% {
    transform: translate(-70%, var(--ty)) rotate(var(--rot));
    opacity: 1;
  }
}
.page-numbers.disabled {
  display: none;
}

/* ============================================================
  詳細ページ
============================================================ */
.entry-heading {
  padding-top: 30px;
  margin-bottom: 40px;
}

.entry-title {
  color: var(--primary-green);
  font-size: 32px;
}
@media screen and (max-width: 767px) {
  .entry-title {
    font-size: 24px;
  }
}

.entry-body {
  padding-bottom: 60px;
  margin-bottom: 60px;
}
.entry-body h1 {
  font-size: 24px;
  color: var(--primary-green);
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: #ddd solid 1px;
}
.entry-body h2 {
  font-size: 20px;
  margin-bottom: 15px;
}
.entry-body h3 {
  font-size: 18px;
  color: var(--primary-green);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: #ddd solid 1px;
}
.entry-body h4 {
  font-size: 16px;
  margin-bottom: 10px;
}
.entry-body h5 {
  font-size: 14px;
  color: var(--primary-green);
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: #ddd solid 1px;
}
.entry-body h6 {
  font-size: 12px;
  margin-bottom: 5px;
}
.entry-body p {
  margin-bottom: 20px;
}
.entry-body img {
  max-width: 100%;
  width: 100%;
  margin: 15px 0;
}
.entry-body ul {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.back-btn-wrap {
  text-align: center;
  width: 100%;
}

.back-btn-wrap a {
  display: inline-block;
  position: relative;
  margin-left: -60px;
  color: var(--text-main);
  font-weight: 600;
  transition: 0.3s;
}

.back-btn-wrap a:hover {
  color: var(--primary-green);
}

.u-arrow-back {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #ECF7F2;
  border-radius: 50%;
  position: relative;
  transition: background-color 0.3s;
  overflow: hidden;
  top: 22px;
  margin-right: 15px;
}

.u-arrow-back::before {
  --rot: -25deg;
  --ty: -4px;
  transform: translate(-70%, var(--ty)) rotate(var(--rot));
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: var(--primary-green);
  border-radius: 2px;
}

.u-arrow-back::after {
  --rot: 25deg;
  --ty: 3px;
  transform: translate(-70%, var(--ty)) rotate(var(--rot));
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: var(--primary-green);
  border-radius: 2px;
}

a:hover .u-arrow-back {
  background-color: var(--primary-green);
}

/* 前へ：左に消えて右から出る */
a:hover .u-arrow-back::before,
a:hover .u-arrow-back::after {
  animation: prevLoop 0.6s forwards;
  background-color: #fff;
}

.privacy-section h2 {
  color: var(--primary-green);
  font-size: 24px;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .privacy-section h2 {
    font-size: 18px;
  }
}

.policy-contact-info {
  padding: 2.5%;
  background-color: #F9F9F2;
}
.policy-contact-info h3 {
  margin-bottom: 10px;
}

.thumb-menu-list li {
  position: relative;
}
.thumb-menu-list li img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}
.thumb-menu-list li p {
  line-height: 1.5;
  font-size: 20px;
  font-weight: 600;
  position: relative;
}

.thumb-menu-list li p .u-arrow {
  position: absolute;
  right: 0;
}

.p-purpose__line {
  display: inline-block;
  position: relative;
  color: #ccc; /* 下層：ベースのグレー */
  font-size: 18px;
  line-height: 2.2;
  font-weight: 700;
  white-space: nowrap;
}

/* 上層：なぞる文字 */
.p-purpose__line::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--text-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, var(--text-main), var(--text-main));
  background-repeat: no-repeat;
  /* JSから制御する進捗 */
  background-size: var(--p-progress, 0%) 100%;
  transition: background-size 0.05s linear;
}

.p-purpose__title {
  font-size: 42px;
  line-height: 1.25;
  margin-bottom: 60px !important;
}
@media screen and (max-width: 767px) {
  .p-purpose__title {
    font-size: 32px;
    margin-bottom: 30px !important;
  }
}

.p-purpose__lead {
  font-size: 20px;
}

.p-purpose__label {
  display: inline-block;
  margin: 0 auto 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-green);
}

.p-purpose__label::before {
  display: inline-block;
  content: url(../images/common/jaht-line.svg);
  width: 30px;
  height: 10px;
  margin: 0 10px;
}

.p-mission {
  background-color: #ECF7F2;
}

.message-thumb {
  padding-right: 30px;
}
@media screen and (max-width: 767px) {
  .message-thumb {
    padding-right: 0;
  }
}
.message-thumb p {
  font-size: 24px;
  color: var(--primary-green);
  font-weight: 600;
}
.message-thumb p span {
  display: block;
  font-size: 16px;
  margin-top: 10px;
  color: var(--text-main);
}

.message-content {
  padding-top: 20px;
}
.message-content h2 {
  font-size: 40px;
  line-height: 1.25;
  color: var(--primary-green);
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .message-content h2 {
    font-size: 24px;
  }
}
.message-content p {
  margin-bottom: 20px;
}

.access-section {
  padding: 120px 0;
}

.p-access-nav {
  background-color: #F9F9F2;
  padding: 40px 0;
  margin-bottom: 80px;
}

.p-access-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 40px;
  list-style: none;
}

.p-access-nav__link {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid #d1d1b8;
  text-decoration: none;
  transition: 0.3s;
}
.p-access-nav__link:hover {
  border-bottom-color: var(--primary-green);
  color: var(--primary-green);
}
.p-access-nav__link:hover .u-arrow::before,
.p-access-nav__link:hover .u-arrow::after {
  animation: arrowLoopRight 0.4s forwards;
}

.p-access-nav__link .u-arrow {
  transform: rotate(90deg);
}

.p-access__item {
  align-items: center; /* 縦中央揃え */
  margin-bottom: 60px;
}

.p-access__name {
  font-size: 24px;
  font-weight: 700;
  color: #007d43;
  margin-bottom: 25px;
}

.p-access__address {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* Google Map リンク */
.c-link-map {
  margin-bottom: 30px;
}

.c-link-map {
  font-size: 14px;
  color: #007d43;
  text-decoration: underline;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-link-map:hover {
  text-decoration: none;
}

/* 電話・FAX */
.p-access__tel {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.p-access__tel span {
  font-size: 32px; /* 電話番号を大きく */
  color: #007d43;
  margin-left: 10px;
  vertical-align: -2px;
}

.p-access__fax {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 600;
}

/* 地図エリア */
.p-access__map {
  width: 100%;
  aspect-ratio: 16/9; /* 黄金比に近い比率 */
  border-radius: 12px;
  overflow: hidden;
}

.p-access__map iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

/* 区切り線 */
.p-access__border {
  border: none;
  border-top: 1px solid #eee;
  margin: 60px 0;
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .p-access__item {
    gap: 30px;
  }
  .p-access__tel span {
    font-size: 26px;
  }
}
.p-company-list {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid #DDDDDD;
}
.p-company-list__item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #DDDDDD;
}
.p-company-list__item dt {
  flex: 0 0 200px;
  padding: 25px 0 25px 20px;
  color: var(--primary-green);
  font-weight: 700;
  font-size: 15px;
  position: relative;
}
.p-company-list__item dt::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary-green);
}
.p-company-list__item dd {
  flex: 1;
  padding: 25px 20px 25px 40px;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  display: flex;
  align-items: center;
}
.p-company-list__item--top dd {
  align-items: flex-start;
}

.p-company-list__item:first-child {
  border-top: 1px solid #DDDDDD;
}
.p-company-list__item:first-child dt::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary-green);
}

@media (max-width: 767px) {
  .p-company-list__item {
    flex-direction: column;
  }
  .p-company-list__item dt {
    flex: 0 0 auto;
    width: 100%;
    padding: 15px 10px;
    background-color: #f9fbf9;
  }
  .p-company-list__item dt::after {
    bottom: 0;
  }
  .p-company-list__item dd {
    padding: 15px 10px 25px;
  }
}
.company-outline-section {
  background-color: #F9F9F2;
}

.p-history__list {
  margin: 0 auto;
  position: relative;
}
.p-history__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;
  width: 10px;
  background-image: url(../images/common/jaht-line-light-yy.svg);
  background-size: 10px auto;
  background-position: 0 top;
  background-repeat: repeat-y;
}

.p-history__item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  position: relative;
}
.p-history__item:last-child {
  margin-bottom: 0;
}

/* 年号エリア */
.p-history__year-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 160px;
  position: relative;
  z-index: 2;
  padding-top: 25px;
}

.p-history__dot {
  width: 20px;
  height: 20px;
  background-color: #f1e400;
  border-radius: 50%;
  margin-right: 30px;
  flex-shrink: 0;
}

.p-history__year {
  font-size: 32px;
  font-weight: 800;
  color: var(--primary-green);
  line-height: 1;
}

/* 内容エリア */
.p-history__content {
  flex: 1;
  background-color: #fff;
  padding: 25px 35px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.p-history__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-main);
}

/* モバイル対応 */
@media (max-width: 767px) {
  .p-history__year-wrap {
    flex: 0 0 100px;
  }
  .p-history__year {
    font-size: 24px;
  }
  .p-history__dot {
    margin-right: 15px;
  }
  .p-history__content {
    padding: 20px;
  }
}
.p-contact-tel {
  background-color: #ebf7f1;
  padding: 80px 20px;
  border-radius: 20px;
  margin: 60px 20px;
}
@media screen and (max-width: 767px) {
  .p-contact-tel {
    margin: 30px auto 0;
    padding: 40px 30px;
  }
}

.p-contact-tel__head {
  text-align: center;
  margin-bottom: 50px;
}

.p-contact-tel__title {
  color: #178152;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .p-contact-tel__title {
    font-size: 20px;
  }
}

.p-contact-tel__lead {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}
@media screen and (max-width: 767px) {
  .p-contact-tel__lead {
    text-align: left;
  }
}

.p-contact-tel__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 900px;
  margin: 0 auto;
}

.p-contact-tel__info {
  flex: 1;
}

.p-contact-tel__company {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.p-contact-tel__address {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.p-contact-tel__staff {
  font-size: 16px;
}

.p-contact-tel__box {
  flex: 1;
  background-color: #178152;
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  border-radius: 10px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s, transform 0.3s;
}
@media screen and (max-width: 767px) {
  .p-contact-tel__box {
    padding: 20px;
  }
}

.p-contact-tel__box:hover {
  opacity: 0.9;
  transform: translateY(-3px);
}

.p-contact-tel__label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.p-contact-tel__number {
  font-size: 48px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  line-height: 1;
  margin-bottom: 15px;
}

.p-contact-tel__time {
  font-size: 14px;
  opacity: 0.9;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .p-contact-tel__body {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }
  .p-contact-tel__number {
    font-size: 36px;
  }
}
/* --- レイアウト構造 --- */
.p-form-list {
  max-width: 900px;
  margin: 0 auto;
}

.p-form-item {
  display: flex;
  flex-wrap: wrap;
  padding: 25px 0;
  border-bottom: 1px solid #f0f0f0;
}

.p-form-label {
  width: 300px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-form-input {
  flex: 1;
  min-width: 300px;
}

/* --- 必須バッジ --- */
.u-badge--required {
  background: #007d43;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* --- 入力要素のデザイン --- */
.p-form-input input[type=text],
.p-form-input input[type=email],
.p-form-input input[type=tel],
.p-form-input select,
.p-form-input textarea {
  width: 100%;
  background-color: #f9f9f6; /* 薄いベージュ */
  border: 1px solid #e0e0d0;
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s;
}

.p-form-input input:focus,
.p-form-input textarea:focus {
  border-color: #007d43;
}

.wpcf7-list-item {
  margin-right: 20px;
}

.wpcf7-list-item:last-child {
  margin-right: 0;
}

.zip-wrap {
  width: 200px;
  margin-bottom: 10px;
}

/* グリッド配置 (2カラム入力) */
.p-form-input--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.p-form-input textarea {
  height: 200px;
}

/* --- 同意チェックボックス --- */
.p-form-agreement {
  text-align: center;
  margin-top: 40px;
}

/* --- 送信ボタン (ループ矢印付き) --- */
.p-form-submit {
  text-align: center;
  margin-top: 40px;
}

.c-btn--submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 400px;
  max-width: 100%;
  height: 64px;
  background-color: #178152;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.c-btn--submit:hover {
  background-color: #007d43;
}

/* ボタンの中の矢印アニメーション (以前作成したものを流用) */
.c-btn--submit .u-arrow {
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.c-btn--submit .u-arrow::before,
.c-btn--submit .u-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 1px;
  background-color: #007d43;
}

/* ...（矢印のアニメーションCSSをここに結合）... */
/* レスポンシブ */
@media (max-width: 768px) {
  .p-form-item {
    flex-direction: column;
  }
  .p-form-label {
    width: 100%;
    margin-bottom: 10px;
  }
  .p-form-input--grid {
    grid-template-columns: 1fr;
  }
}
/* 送信ボタンのベース */
.c-btn--submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 400px;
  height: 64px;
  background-color: var(--primary-green);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}

.c-btn--submit:hover {
  background-color: var(--text-main);
}

.c-btn--submit .u-arrow {
  position: absolute;
  right: 25px;
}

button:hover .u-arrow {
  background-color: var(--text-main);
}

/* 矢印の色を白くし、アニメーションを発火させる */
button:hover .u-arrow::before,
button:hover .u-arrow::after {
  background-color: #fff;
  animation: arrowLoop 0.4s forwards;
}

.contact-thanks-wrap {
  width: 600px;
  margin: 0 auto 80px;
  text-align: center;
}
@media (max-width: 768px) {
  .contact-thanks-wrap {
    text-align: left;
  }
}

.contact-thanks-notice {
  background-color: var(--bg-top);
  border: #ddd solid 1px;
  padding: 20px;
  text-align: left;
}

.screen-reader-response,
.hidden-fields-container {
  display: none;
}

.wpcf7-not-valid-tip {
  display: inline-block;
  margin-top: 10px;
  color: #911818;
}

.wpcf7-response-output {
  text-align: center;
  margin-top: 20px;
  color: #911818;
}/*# sourceMappingURL=style.css.map */