@charset "utf-8";
/* ==========================================================================
   Base Settings (基本設定)
   ========================================================================== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-color);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
h2 {
  font-family: "Times New Roman", "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-weight: bold;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
body.page-top {
  font-size: 16px;
}
/* ==========================================================================
   Main Visual (メインビジュアル)
   ========================================================================== */
.main-visual {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  margin-top: 0;
}
/* 背景画像の設定 */
.mv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
.mv-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}
/* オーバーレイ */
.mv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* 明るすぎる場合は0.3〜0.4に調整 */
  z-index: 2;
}
.mv-container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  margin-top: 55vh;
  color: var(--white);
}
.mv-text-group {
  max-width: 500px;
  animation: fadeInUp 1.5s ease forwards; /* ふわっと表示されるアニメーション */
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
  font-family: "Times New Roman", "Shippori Mincho", "Hiragino Mincho ProN", serif;
}
.mv-subcopy {
  font-size: 2.86rem;
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}
.mv-maincopy {
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.05em;
}
@media (max-width: 1024px) {
  .mv-maincopy {
    font-size: 4rem;
  }
}
@media (max-width: 768px) {
  .mv-subcopy {
    font-size: 1.4rem;
  }
  .mv-maincopy {
    font-size: 3rem;
  }
  .mv-container {
    padding: 0 20px;
  }
}
/* ==========================================================================   
Concept Section (コンセプトエリア)   
========================================================================== 
*/ .page-top .concept-text p {
  font-size: 16px;
} /* 2カラムレイアウトの土台 */

.concept-container {
  display: flex;
  align-items: center; /* 上下中央揃え */
  gap:60px;
} /* 左側：画像エリア */

.concept-image {
  flex: 1; /* 幅を均等に持つ設定 */ height: 400px;
  overflow: hidden;
}
.concept-image img {
  width: 100%;
  height: auto;
  display: block;
} /* concept-image内のSwiper設定 */ .concept-image .concept-swiper {
  width: 100%;
  height: 100%;
}
.concept-image .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
} /* 右側：テキストエリア */ .concept-body {
  flex: 1.2;
}
.concept-title {
  font-size: 2.2rem;
  color: #009245;
  margin-bottom: 30px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.concept-text {
  line-height: 2; /* 読みやすさを重視した広めの行間 */ margin-bottom: 40px;
  color: #333; /* 文字色は真っ黒より少しグレーが目に優しい */
} /* オレンジの強調テキスト */ .text-accent-orange {
  color: #f08345;
  font-weight: bold;
  font-size: 16px;
} /* リンク・ボタンエリア */ .concept-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.link-underline {
  color: #0066cc;
  text-decoration: underline;
  font-size: 0.95rem;
} /* 角丸のボタン */ .btn-more {
  display: inline-block;
  background-color: #009245;
  color: #fff;
  padding: 15px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  transition: all 0.3s ease;
  font-size: 16px;
} /* ボタン内の「▶」アイコン */ .btn-more::after {
  content: '▶';
  font-size: 0.7rem;
  margin-left: 10px;
  vertical-align: middle;
}
.btn-more:hover {
  background-color: #437831;
  transform: translateY(-2px); /* 少し浮き上がる動き */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: #fff; /* 元の文字色に合わせて変更 */
} 
.concept-image .swiper-pagination {
    bottom: 10px;
    top: auto;
}
/* --- レスポンシブ (スマホ) --- */
@media (max-width: 768px) {
    .concept-container {
        flex-direction: column; /* 縦並びにする */
        align-items: stretch;
        gap: 30px;
    }
    .concept-image {
        height: 250px;
    }
    .concept-title {
        font-size: 1.6rem; /* タイトルを少し小さく */
        text-align: center;
    }
    .concept-links {
        flex-direction: column; /* ボタン類も縦並びに */
        align-items: center;
        text-align: center;
    }
    .link-underline {
        order: 2; /* リンクを下、ボタンを上に並べ替え */
    }
    .btn-more {
        order: 1;
        width: 100%;
        max-width: 300px; /* ボタンが広がりすぎないように制限 */
    }
}
/* ==========================================================================
   Voice Section (皆様の声・体験談)
   ========================================================================== */
.voice-section {
  background-color: #f1ede8; /* スクリーンショットのような薄いベージュ */
}
/* タイトルの装飾（中央寄せ・上下線） */
.section-title-line {
  text-align: center;
  color: #009245;
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  position: relative;
  padding-top: 15px;
  border-bottom: 1px solid #009245;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 10px;
  width: 100%;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.75) 80%, rgba(255, 255, 255, 0) 100%);
}
.section-lead {
  font-size: 15px;
  line-height: 1.8;
  margin-top: 20px;
  margin-bottom: 40px;
}
/* バナーの並び */
.voice-banner-container {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* バナー間の隙間 */
}
/* 各バナーの設定 */
.voice-banner-item {
  flex: 1;
  display: block;
  text-decoration: none;
  transition: all 0.3s ease; /* アニメーションの速度 */
  border-radius: 4px; /* 画像の角を少し丸める */
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽い影 */
}
.voice-banner-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.3s ease;
}
/* --- マウスオン（ホバー）時の動き --- */
.voice-banner-item:hover {
  transform: translateY(-8px); /* 8px上に浮き上がる */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* 影を強くして浮遊感を出す */
}
.voice-banner-item:hover img {
  filter: brightness(1.1); /* 少し明るくする */
}
/* --- レスポンシブ (スマホ) --- */
@media (max-width: 768px) {
  .voice-banner-container {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;
    gap: 20px;
  }
  .voice-banner-item {
    width: 100%;
    max-width: 300px; /* スマホで広がりすぎないように */
  }
  .section-title-line {
    font-size: 1.4rem;
    margin-bottom: 30px;
  }
}
/* ==========================================================================
   News & Blog Section
   ========================================================================== */
.news-blog-container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: stretch; /* 左右のカラムの高さを強制的に揃える */
}
.news-column, .blog-column {
  flex: 1;
  display: flex;
  flex-direction: column; /* 見出し、リスト、ボタンを縦に並べる */
}
/* カラムの見出し */
.column-title {
  background-color: #009245;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 1.5rem;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column-title span {
  font-family: serif; /* ブログの部分を少しオシャレに */
  font-style: italic;
  font-size: 1.8rem;
  margin-left: 10px;
}
/* 記事ごとの枠設定 */
.column-list {
  flex-grow: 1; /* 余った高さをすべてこの記事エリアに割り当てる */
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* ニュース記事（1件が縦いっぱいに広がるようにする） */
.news-column .news-entry {
  flex-grow: 1; /* ニュース1件がブログ2件分の高さをカバー */
  display: flex;
  flex-direction: column;
}
.news-entry {
  font-size: 16px;
}
/* ブログ記事（2件が等分に広がるようにする） */
.blog-column .blog-entry {
  flex: 1; /* 2件あれば、それぞれが50%ずつの高さになる */
  display: flex;
  flex-direction: column;
  justify-content: center; /* タイトルを枠内の上下中央に */
}
/* 共通の調整 */
.news-entry, .blog-entry {
  padding: 20px;
  position: relative;
  margin-bottom: 10px;
}
/* 点線の修正 */
.news-entry::after, .blog-entry::after {
  content: "";
  position: absolute;
  /* 枠線の真下（外側）に配置 */
  left: -1px;
  right: -1px; /* 右も同様 */
  bottom: -8px;
  height: 2px;
  border-bottom: 2px dotted #00b45c;
  pointer-events: none; /* クリックの邪魔をしない */
}
/* 日付とNEWラベル */
.entry-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.6rem;
}
.entry-date {
  font-weight: bold;
  font-size: 16px;
}
.label-new {
  background-color: #f08345;
  color: #fff;
  font-size: 1rem;
  padding: 2px 5px;
  border-radius: 4px;
}
/* ニュース本文とリンク */
.entry-summary {
  font-size: 1.6rem;
  line-height: 1.7;
  margin-bottom: 15px;
}
.entry-summary span {
  font-size: 16px;
}
.entry-link, .blog-title {
  color: #0066cc;
  text-decoration: underline;
  display: block;
  text-align: right; /* ニュースのリンクは右寄せ */
}
.blog-title {
  text-align: left; /* ブログのタイトルは左寄せ */
  font-size: 1rem;
}
/* ボタンエリア */
.column-btn-area {
  margin-top: 50px;
  text-align: center;
}
/* スマホ対応 */
@media (max-width: 900px) {
  .news-blog-container {
    flex-direction: column;
    gap: 80px
  }
}
@media (max-width: 428px) {
  .column-title {
    font-size: 1.3rem;
  }
  .column-title span {
    font-size: 1.3rem;
  }
}
/* ==========================================================================
   注意喚起
   ========================================================================== */
.attention-section {
  background-color: #e6e6e6; /* 外側の薄いグレー背景 */
}
/* 白い大きなボックス */
.attention-box {
  background-color: #fff;
  display: flex;
  padding: 25px;
  align-items: stretch;
}
/* 左側：グリーンのタイトルエリア */
.attention-head {
  background-color: #a3d6c8; /* 淡いグリーン */
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}
.attention-title {
  font-family: serif;
  font-size: 2rem;
  color: #000;
  margin-bottom: 20px;
  letter-spacing: 0.2em;
}
/* 小さな一覧ボタン */
.btn-mini {
  background-color: #fff;
  color: #00817b;
  text-decoration: none;
  padding: 8px 25px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.btn-mini::after {
  content: "▶";
  font-size: 0.7rem;
  margin-left: 8px;
}
/* 右側：リンクエリア */
.attention-links {
  width: 65%;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
}
.attention-links li {
  padding: 20px 0;
  border-bottom: 2px dotted #48d1cc; /* 水色の点線 */
}
/* 最後の項目の下線は消す、または画像通りなら残す */
.attention-links li:last-child {
  border-bottom: none;
}
.attention-links li a {
  color: #0066cc;
  text-decoration: underline;
  font-size: 1.1rem;
}
/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .attention-box {
    flex-direction: column; /* スマホでは縦並び */
    padding: 15px;
  }
  .attention-head, .attention-links {
    width: 100%;
    padding-left: 0;
  }
  .attention-links {
    padding: 20px 10px;
  }
  .attention-links li {
    text-align: center;
  }
}