@charset "UTF-8";

/* ==========================================================================
   1. Variables & Base (変数・基本設定)
   ========================================================================== */
:root {
  /* 色管理 */
  --white-color: #fff;
  --black-color: #222;
  --primary-color: #649d27;
  --point-color: #e9ba00;
  --accent-color: #aa1823;

  /* コンテンツ幅 */
  --content-width-sm: 800px;
  --content-width: 936px;
  --content-width-lg: 1080px;
  --content-width-xl: 1200px;

  /* z-index */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-page-top: 50;
  --z-index-menu: 100;
  --z-index-header: 150;
  --z-index-modal: 200;
}

body {
  color: var(--black-color);
  font-family: "Klee One", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  overflow-x: hidden;
  padding-top: 72px;
}

/* リセット調整 */
*:focus {
  outline: none;
}

button,
span {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

/* ==========================================================================
   2. Layout (共通レイアウト枠・ヘッダー・フッター)
   ========================================================================== */

/* --- Container --- */
.l_container-sm,
.l_container,
.l_container-lg {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

.l_container-sm {
  max-width: calc(var(--content-width-sm) + 32px);
}

.l_container {
  max-width: calc(var(--content-width) + 32px);
}

.l_container-lg {
  max-width: calc(var(--content-width-lg) + 32px);
}

.l_contents {
  padding: 80px 0;
}

/* =========================================
   Header Layout (Common)
   ========================================= */
.l_header {
  width: 100%;
  height: 72px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-index-header);
  background-color: var(--white-color);
  position: fixed;
  top: 0;
  left: 0;
}

.l_header-logo {
  aspect-ratio: 1828 / 426;
  width: 182.8px;
}

.l_header-logo_img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   Hamburger Menu (SP Only)
   ========================================= */
.m_hamburger {
  width: 30px;
  height: 25px;
  position: relative;
  z-index: var(--z-index-modal);
  background: none;
  border: none;
  cursor: pointer;
}

.m_hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  background-color: var(--black-color);
  transition: 0.3s ease;
}

.m_hamburger-bar:nth-child(1) {
  top: 0;
}
.m_hamburger-bar:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.m_hamburger-bar:nth-child(3) {
  top: 100%;
  transform: translate(0, -50%);
}

/* ハンバーガーのアクティブ状態 */
.m_hamburger.is-active .m_hamburger-bar:nth-child(2) {
  opacity: 0;
}
.m_hamburger.is-active .m_hamburger-bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.m_hamburger.is-active .m_hamburger-bar:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* =========================================
   Navigation (SP Default / Mobile First)
   ========================================= */
.l_header-nav {
  position: fixed;
  top: 72px;
  right: -100%; /* 初期位置：画面外 */
  width: 100%;
  max-width: 320px;
  height: calc(100vh - 72px); /* ヘッダーの高さを引いた残り */
  background: color-mix(in srgb, var(--white-color) 95%, transparent);
  border-left: var(--point-color) 2px solid;
  transition: right 0.3s ease;
  z-index: var(--z-index-menu);
  overflow-y: auto; /* 縦スクロール有効 */
  -webkit-overflow-scrolling: touch;
}

.l_header-nav.is-active {
  right: 0; /* 表示 */
}

.l_header-nav_list {
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

.l_header-nav_item {
  font-family: "Klee One", cursive;
  font-weight: bold;
  color: var(--black-color);
}

/* リンク共通スタイル (SP) */
.l_header-nav_link {
  display: block;
  font-size: 20px;
  padding: 8px 0;
  text-decoration: none;
  position: relative;
  color: var(--black-color);
  cursor: pointer;
}

/* SPのみの左側アクセントバー */
.l_header-nav_link::before {
  content: "";
  width: 4px;
  height: 24px;
  background: var(--point-color);
  border-radius: 100vh;
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}

/* SNS Icons (SP) */
.l_header-nav_sns-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 16px;
}
.l_header-nav_sns_link {
  display: block;
  transition: opacity 0.3s ease;
}
.l_header-nav_sns_link:hover {
  opacity: 0.7;
}
.l_header-nav_sns_img {
  width: 48px;
  height: auto;
}
.l_header-nav_sns-wrapper:last-child .l_header-nav_sns_img {
  width: 60px;
}

/* --- アコーディオン / サブメニュー (SP) --- */
.l_header-nav_arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  margin-bottom: 3px;
  transition: transform 0.3s ease;
}

.js_accordion-item.is-open .l_header-nav_arrow {
  transform: rotate(225deg);
}

.l_header-nav_sublist {
  display: none; /* デフォルト非表示 */
  list-style: none;
  margin-top: 10px;
  padding-left: 10px;
  border-left: 1px solid #ddd;
}

.js_accordion-item.is-open .l_header-nav_sublist {
  display: block; /* SPでは縦並びブロック表示 */
  animation: fadeIn 0.3s ease;
}

.l_header-nav_subitem {
  margin-bottom: 10px;
}
.l_header-nav_subitem:last-child {
  margin-bottom: 0;
}

.l_header-nav_subitem a {
  display: block;
  text-decoration: none;
  color: var(--black-color);
  font-size: 16px;
  padding: 5px 0 5px 10px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   Desktop Style (min-width: 1080px)
   ========================================= */
@media screen and (min-width: 1080px) {
  /* --- Header Layout --- */
  /* .l_header {
    height: 100px;
    padding: 0 40px;
  } */
  /* .l_header-logo {
    width: 270px;
  } */
  /* ハンバーガー非表示 */
  .m_hamburger {
    display: none;
  }

  /* --- Navigation Reset & PC Style --- */
  .l_header-nav {
    position: static;
    right: auto;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    border: none;
    overflow: visible;
    display: block;
    transform: none;
    white-space: nowrap;
  }

  .l_header-nav_list {
    padding: 0;
    flex-direction: row; /* 横並び */
    align-items: center;
    gap: 16px; /* アイテム間の余白 */
    height: 100%;
  }

  .l_header-nav_link {
    font-size: 18px;
    padding: 10px 12px;
    background: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
  }

  /* PCではSP用のバーを消す */
  .l_header-nav_link::before {
    display: none;
  }

  .l_header-nav_link:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
    border-bottom-color: var(--primary-color);
  }

  /* CTA Button */
  .l_header-nav_link.l_header-nav_cta {
    background: var(--point-color);
    border-radius: 8px;
    border-bottom: none;
    padding: 10px 24px;
    color: var(--black-color);
  }
  .l_header-nav_link.l_header-nav_cta:hover {
    background: color-mix(in srgb, var(--point-color) 80%, white);
    transform: translateY(-4px);
    border-bottom: none;
  }

  /* SNS Icons (PC) */
  .l_header-nav_sns-box {
    margin-top: 0;
    gap: 16px;
    margin-left: 8px;
  }
  .l_header-nav_sns_img {
    width: 40px;
  }
  .l_header-nav_sns-wrapper:last-child .l_header-nav_sns_img {
    width: 50px;
  }

  /* --- Accordion / Submenu (PC: Hover & Horizontal) --- */

  /* 親アイテム */
  .js_accordion-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .l_header-nav_arrow {
    width: 6px;
    height: 6px;
    margin-left: 6px;
  }

  /* ホバーで矢印回転 */
  .js_accordion-item:hover .l_header-nav_arrow {
    transform: rotate(225deg);
  }

  /* サブメニュー本体 (PC) */
  .l_header-nav_sublist {
    /* Flexで横並び */
    display: flex;
    flex-direction: row;
    gap: 0; /* ボーダーで区切るためgapは0にしてpaddingで調整 */

    /* 配置：親の真下中央 */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    /* デザイン */
    background-color: var(--white-color);
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left: none; /* SPの線を消す */
    margin-top: 0;

    min-width: max-content;
    white-space: nowrap;

    /* ホバーアニメーション用 */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s,
      visibility 0.3s,
      transform 0.3s;
  }

  /* ホバー領域の拡張（マウスが離れないようにする） */
  .l_header-nav_sublist::before {
    content: "";
    position: absolute;
    top: -20px; /* 親要素との隙間を埋める */
    left: 0;
    width: 100%;
    height: 20px;
    display: block;
  }

  /* 親ホバー時に表示 */
  .js_accordion-item:hover .l_header-nav_sublist {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    display: flex;
  }

  /* サブアイテム (PC) */
  .l_header-nav_subitem {
    margin-bottom: 0;
    border-right: 1px solid #eee;
    padding: 0 20px;
  }

  .l_header-nav_subitem:first-child {
    padding-left: 10px;
  }
  .l_header-nav_subitem:last-child {
    border-right: none;
    padding-right: 10px;
  }

  .l_header-nav_subitem a {
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    transition: color 0.3s;
  }

  .l_header-nav_subitem a:hover {
    color: var(--primary-color);
  }
}

/* @keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
} */

/* --- Footer (共通レイアウト1：メイン) --- */
.l_footer-cta {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(249, 249, 249, 1) 30%,
    rgba(249, 249, 249, 1) 100%
  );
  padding: 100px 0 60px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .l_footer-cta {
    padding: 120px 0 60px;
  }
}

@media screen and (min-width: 1080px) {
  .l_footer-cta {
    padding: 140px 0 60px;
  }
}

.l_footer-cta_title {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 16px;
  font-family: "Klee One", cursive;
}

.l_footer-cta_text {
  font-size: 15px;
  margin-bottom: 32px;
  line-height: 1.8;
  color: var(--black-color);
}

.l_footer-cta_btn {
  display: inline-block;
  background-color: var(--point-color);
  color: var(--black-color);
  padding: 16px 60px;
  border-radius: 100vh;
  font-weight: bold;
  font-size: 18px;
  transition:
    opacity 0.3s,
    transform 0.3s;
  box-shadow: 0 4px 10px rgba(233, 186, 0, 0.4);
  text-decoration: none;
}

.l_footer-cta_btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Footer Main (Green Background) */
.l_footer-main {
  background-color: var(--primary-color);
  color: var(--white-color);
  padding: 30px 0;
}

.l_footer-main_inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Logo / Address / SNS (in Green Footer) */
.l_footer-logo {
  width: 200px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}

.l_footer-logo_img {
  width: 100%;
  height: auto;
  display: block;
}

.l_footer-address {
  font-style: normal;
  line-height: 1.8;
  font-size: 14px;
  margin-bottom: 24px;
  opacity: 0.9;
  text-align: center;
}

.l_footer-sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.l_footer-nav_sns_link {
  transition: opacity 0.3s ease;
}

.l_footer-nav_sns_link:hover {
  opacity: 0.7;
}

.l_footer-nav_sns_img {
  width: 40px;
}

.l_footer-nav_sns-wrapper:last-child .l_footer-nav_sns_img {
  width: 50px;
}

/* Footer Navigation (in Green Footer) */
.l_footer-nav {
  width: 100%;
}

.l_footer-nav_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.l_footer-nav_item {
  break-inside: avoid;
  page-break-inside: avoid;
}

.l_footer-nav_item > a {
  color: var(--white-color);
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.l_footer-nav_item > a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.l_footer-nav_label {
  display: block;
  font-weight: bold;
  font-size: 14px;
  color: var(--white-color);
  margin-bottom: 8px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

.l_footer-nav_sublist {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: 12px;
  margin-left: 2px;
}

.l_footer-nav_subitem a {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  padding: 4px 0;
  text-decoration: none;
  white-space: nowrap;
}

.l_footer-nav_subitem a:hover {
  text-decoration: underline;
  opacity: 1;
}

.l_footer-copyright {
  background-color: #4a751d;
  color: var(--white-color);
  text-align: center;
  padding: 16px;
  font-size: 12px;
}

/* Footer PC Layout (Green) */
@media screen and (min-width: 1080px) {
  .l_footer-cta_title {
    font-size: 32px;
  }
  .l_footer-main_inner {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0 40px;
  }
  .l_footer-info {
    width: 35%;
    text-align: left;
  }
  .l_footer-logo {
    margin-left: 0;
    margin-right: 0;
  }
  .l_footer-address {
    text-align: left;
  }
  .l_footer-sns {
    justify-content: flex-start;
  }
  .l_footer-nav {
    width: 40%;
    padding-top: 10px;
  }
  .l_footer-nav_list {
    display: block;
    column-count: 2;
    column-gap: 60px;
    width: fit-content;
    margin-left: auto;
    text-align: left;
  }
  .l_footer-nav_item {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   3. Components (共通パーツ)
   ========================================================================== */

/* --- Section Title (Top/General) --- */
.top-section_title {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .top-section_title {
    font-size: 24px;
  }
}

@media screen and (min-width: 1080px) {
  .top-section_title {
    font-size: 32px;
  }
}

.top-section_title:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: var(--point-color);
  opacity: 0.7;
  transform: skew(-10deg);
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .top-section_title:before {
    bottom: 8px;
  }
}

@media screen and (min-width: 1080px) {
  .top-section_title:before {
    bottom: 10px;
  }
}

.top-section_desc {
  font-weight: bold;
  text-align: center;
  margin-top: 24px;
}

@media screen and (min-width: 1080px) {
  .top-section_desc {
    font-size: 20px;
  }
}

/* --- Handwritten Button (手書き風ボタン) --- */
.top-about_btn-wrapper {
  margin-top: 60px;
  text-align: center;
}

.handwritten-btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 48px;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 255px 25px 225px 25px / 25px 225px 25px 255px;
  box-shadow: 2px 3px 0 var(--point-color);
}

.handwritten-btn .arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

/* Button Variations */
.handwritten-btn.red-ver {
  background-color: var(--accent-color);
  color: var(--white-color);
  box-shadow: 2px 3px 0 var(--point-color);
}

.handwritten-btn.yellow-ver {
  background-color: var(--point-color);
  color: var(--black-color);
  box-shadow: 2px 3px 0 var(--primary-color);
}

/* Hover Effects */
@media (hover: hover) {
  .handwritten-btn:hover {
    transform: translateY(-3px);
    box-shadow: 2px 5px 0 var(--point-color);
    opacity: 1;
  }
  .handwritten-btn.red-ver:hover {
    box-shadow: 2px 5px 0 var(--point-color);
  }
  .handwritten-btn.yellow-ver:hover {
    box-shadow: 2px 5px 0 var(--primary-color);
  }
  .handwritten-btn:hover .arrow {
    transform: translateX(5px);
  }
}

/* Active State (Override) */
.handwritten-btn:active,
.handwritten-btn.red-ver:active,
.handwritten-btn.yellow-ver:active {
  transform: translateY(3px) !important;
  box-shadow: none !important;
}

/* --- Scrolldown Indicator --- */
.scrolldown {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.scrolldown span {
  font-family: "Klee One", cursive;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--white-color);
}

.scrolldown::after {
  content: "";
  width: 2px;
  height: 60px;
  background: var(--white-color);
  animation: scrollLine 2s cubic-bezier(1, 0, 0, 1) infinite;
}

@media screen and (min-width: 1080px) {
  .scrolldown {
    left: auto;
    right: 80px;
    transform: none;
    bottom: 40px;
    color: var(--white-color);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  }
}

@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  50.1% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ==========================================================================
   4. Top Page (トップページ専用)
   ========================================================================== */

/* --- Body Background (Top) --- */
body.home {
  background-image: url("../img/和紙06.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

/* --- Key Visual (Top KV) --- */
.top-kv {
  width: 100%;
  height: calc(100vh - 72px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.3) 70%,
    rgba(100, 157, 39, 0.2) 100%
  );
}

.top-kv_img-area {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.top-kv-slider {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide-1 {
  background-image: url("../img/tour.jpg");
}
.slide-2 {
  background-image: url("../img/volunteer.jpg");
}
.slide-3 {
  background-image: url("../img/suzuyaki.jpg");
}

/* Text Overlay */
.top-kv_text_box {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 90%;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: bold;
  color: var(--primary-color);
  text-shadow:
    var(--white-color) -2px -2px 4px,
    var(--black-color) 2px 2px 4px;
}

.top-kv_text {
  display: block;
}
.top-kv_text:not(:last-child) {
  margin-bottom: 16px;
}
.top-kv_text_accent {
  color: var(--point-color);
}

/* PC KV Adjustments */
@media screen and (min-width: 1080px) {
  .top-kv_img-area {
    width: 70%;
    height: 100%;
    margin-left: auto;
    position: relative;
    top: auto;
    left: auto;
  }
  .swiper-slide {
    border-radius: 0% 0% 0% 40% / 0% 0% 0% 40%;
  }
  .top-kv_text_box {
    font-size: 56px;
    left: 20%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    text-align: left;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
}

/* --- About (Top) --- */
.top-about {
  background: linear-gradient(
    to bottom,
    rgba(100, 157, 39, 0.2) 0%,
    rgba(100, 157, 39, 0.2) 70%,
    rgba(255, 255, 255, 0.3) 100%
  );
  padding-top: 80px;
}

.top-about_inner {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.top-about_text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.top-about_text {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 2;
}

/* Polaroid Decoration */
.top-about_img-wrapper {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
}

.polaroid-decoration {
  position: relative;
  transform: rotate(3deg);
}

.polaroid-decoration img {
  width: 100%;
  height: auto;
  border: 12px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: block;
}

.polaroid-decoration::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  width: 140px;
  height: 40px;
  background-color: rgba(233, 186, 0, 0.7);
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

@media screen and (min-width: 1080px) {
  .top-about_text {
    font-size: 18px;
    text-align: left;
  }
  .top-about_inner {
    flex-direction: row;
    justify-content: center;
    gap: 60px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  .top-about_text-wrapper {
    width: 45%;
  }
  .top-about_img-wrapper {
    width: 55%;
    margin: 0;
  }
}

@media screen and (max-width: 768px) {
  .top-about_inner {
    flex-direction: column;
    gap: 30px;
  }
  .top-about_text-wrapper {
    text-align: center;
  }
  .top-about_img-wrapper {
    max-width: 500px;
    width: 90%;
  }
}

/* --- Activity (Top) --- */
.top-activity {
  padding: 100px 0 80px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.3) 85%,
    rgba(100, 157, 39, 0.2) 100%
  );
}

.activity-wrapper {
  margin-top: 40px;
}

.activity_list {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}

@media screen and (min-width: 768px) {
  .activity_list {
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.activity_item {
  width: 100%;
  max-width: 500px;
  height: 150px;
  margin: 0 auto;
  position: relative;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

@media screen and (min-width: 768px) {
  .activity_item {
    width: calc((100% - 24px) / 2);
    max-width: none;
  }
}

@media screen and (min-width: 1080px) {
  .activity_item {
    width: calc((100% - (24px * 2)) / 3);
    height: 240px;
  }
}

.activity_item::after {
  content: "詳しく見る >";
  font-size: 14px;
  font-weight: bold;
  color: var(--white-color);
  display: inline-block;
  padding: 16px 24px;
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}

/* Individual Backgrounds */
.activity_item.tour {
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)),
    url("../img/tour.jpg") center/cover no-repeat;
}
.activity_item.volunteer {
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)),
    url("../img/volunteer.jpg") center/cover no-repeat;
}
.activity_item.suzuyaki {
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)),
    url("../img/suzuyaki.jpg") center/cover no-repeat;
}

/* PC Hover Effects */
@media screen and (min-width: 1080px) {
  .activity_item.tour {
    background:
      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)),
      url("../img/tour.jpg") center/cover no-repeat;
  }
  .activity_item.volunteer {
    background:
      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)),
      url("../img/volunteer.jpg") center/cover no-repeat;
  }
  .activity_item.suzuyaki {
    background:
      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)),
      url("../img/suzuyaki.jpg") center/cover no-repeat;
  }

  .activity_item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 20;
    box-sizing: border-box;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--black-color);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.8;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
  }

  .activity_item.tour::before {
    content: "学校の修学旅行や企業の研修旅行を対象に、能登をフィールドとした学習プログラムを作成します。";
  }
  .activity_item.volunteer::before {
    content: "現地のニーズに応じて学生をボランティアに派遣し能登の震災復興に取り組んでいます。";
  }
  .activity_item.suzuyaki::before {
    content: "伝統工芸を守り、能登の地域文化を後世に残すため、珠洲焼の販売支援に取り組んでいます。";
  }

  .activity_item:hover::before {
    opacity: 1;
    visibility: visible;
  }

  .activity_item::after {
    content: "詳しく見る >";
    font-size: 14px;
    font-weight: bold;
    color: var(--white-color);
    display: inline-block;
    position: absolute;
    bottom: 16px;
    right: 24px;
    padding: 0 10px;
    z-index: 30;
    background-image: linear-gradient(
      var(--primary-color),
      var(--primary-color)
    );
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition:
      background-size 0.35s ease,
      color 0.3s ease;
    pointer-events: none;
  }

  .activity_item:hover::after {
    color: var(--black-color);
    background-size: 100% 2px;
  }

  .activity_item:hover .activity_title,
  .activity_item:hover .activity_title-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

.activity_link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.activity_title-wrapper {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 1080px) {
  .activity_title-wrapper {
    background: rgba(0, 0, 0, 0.4);
  }
}

.activity_title {
  font-size: 20px;
  font-weight: bold;
  color: var(--white-color);
}

@media screen and (min-width: 1080px) {
  .activity_title {
    font-size: 24px;
  }
}

/* --- News (Top) --- */
.top-news {
  padding-bottom: 40px;
  background: linear-gradient(
    to bottom,
    rgba(100, 157, 39, 0.2) 0%,
    rgba(100, 157, 39, 0.2) 80%,
    rgba(255, 255, 255, 0.3) 100%
  );
}

.top-news_list-wrapper {
  font-size: 16px;
  width: 100%;
  margin-top: 56px;
}

.top-news_list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-news_post {
  border-radius: 8px;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.top-news_post-link {
  display: grid;
  text-decoration: none;
  width: 100%;
}

.top-news_post_contents-wrapper {
  display: contents;
}

.top-news_post_thumb-wrapper {
  grid-area: img;
}
.top-news_post_data {
  grid-area: meta;
}
.top-news_post_title {
  grid-area: title;
}
.top-news_post_text-area {
  grid-area: txt;
}

.top-news_post_thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* SP Layout (News) */
@media screen and (max-width: 768px) {
  .top-news_post {
    border-radius: 0px;
  }
  .top-news_post:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  .top-news_post-link {
    grid-template-columns: 50% 1fr;
    grid-template-areas: "img meta" "title title" "txt txt";
    gap: 8px 15px;
    align-items: start;
  }
  .top-news_post_thumb-wrapper img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .top-news_post_data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .top-news_post_time {
    font-size: 14px;
    color: var(--black-color);
    margin-left: 2px;
  }
  .top-news_post_title {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
  }
  .top-news_post_text-area {
    display: none;
  }
}

/* PC Layout (News) */
@media screen and (min-width: 768px) {
  .top-news_post:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  .top-news_post:active {
    transform: translateY(-2px) scale(0.99);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
  }
  .top-news_post-link {
    grid-template-columns: 300px 1fr;
    grid-template-areas: "img meta" "img title" "img txt";
    gap: 0 24px;
    grid-template-rows: min-content min-content auto;
    padding: 0;
  }
  .top-news_post_thumb-wrapper img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .top-news_post_data,
  .top-news_post_title,
  .top-news_post_text-area {
    padding-right: 20px;
  }
  .top-news_post_data {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .top-news_post_time {
    font-size: 16px;
    color: var(--black-color);
  }
  .top-news_post_title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
  }
  .top-news_post_text-area {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 20px;
  }
}

.top-news_post_cat {
  background-color: var(--accent-color);
  color: var(--white-color);
  font-size: 14px;
  font-weight: bold;
  padding: 0 8px;
  border-radius: 4px;
  display: inline-block;
  margin-left: 8px;
}

.top-news_post_rm-text {
  width: fit-content;
  font-size: 14px;
  font-weight: bold;
  color: var(--black-color);
  position: relative;
  margin: 0;
}

.top-news_post_rm-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: 0.35s ease;
}

@media screen and (min-width: 1080px) {
  .top-news_post_rm-text::after {
    width: 0%;
  }
  .top-news_post:hover .top-news_post_rm-text::after {
    width: 100%;
  }
}

.top-news_to-news-page {
  text-align: center;
  margin-top: 60px;
}

/* --- CTA (Top / Bottom) --- */
.top-cta {
  padding: 100px 0 80px;
  background: rgba(255, 255, 255, 0.3);
}

@media screen and (min-width: 768px) {
  .top-cta {
    padding: 120px 0 80px;
  }
}

@media screen and (min-width: 1080px) {
  .top-cta {
    padding: 140px 0 80px;
  }
}

.top-cta_box-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.top-cta_box {
  width: 48%;
  padding: 50px 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top-cta_box.cta_box__member {
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    url("../img/volunteer.jpg") center/cover no-repeat;
}

.top-cta_box.cta_box__contact {
  background-color: #f0f8eb;
  background-image: radial-gradient(rgba(100, 157, 39, 0.2), transparent 20%);
  background-position: 0 0;
  background-size: 16px 16px;
  border: 3px dashed var(--primary-color);
  box-shadow: inset 0 0 8px 8px #fff;
}

.top-cta_box_title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
  color: var(--black-color);
}

.top-cta_btn {
  width: 100%;
  max-width: 300px;
}

.top-cta_btn_link {
  font-size: 20px;
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px 32px 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.top-cta_btn_link::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-left: 4px;
}

@media screen and (min-width: 1080px) {
  .top-cta_btn_link:hover::after {
    transform: rotate(45deg) translate(4px, -4px);
  }
}

.top-cta_btn_link:active {
  transform: scale(0.92);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
}

.cta_btn__member .top-cta_btn_link {
  background-color: var(--accent-color);
  color: var(--white-color);
  border: 4px solid var(--accent-color);
}

.cta_box__contact .top-cta_btn_link {
  background-color: var(--primary-color);
  color: var(--white-color);
  border: none;
}

@media screen and (max-width: 768px) {
  .top-cta_box-wrapper {
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 450px;
  }
  .top-cta_box {
    width: 100%;
    padding: 30px 20px;
  }
}

/* ==========================================================================
   5. Subpages (下層ページ共通・詳細)
   ========================================================================== */

/* --- Subpage: News --- */
body.blog {
  background-image: url("../img/和紙04.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

/* ▼▼▼ 修正箇所：KVエリア ▼▼▼ */
.news_kv {
  width: 100%;
  margin: 0; /* 外側の余白はゼロに */
  padding: 40px 0; /* 上下の余白（色をつけるためpaddingにする） */
  background: rgba(255, 255, 255, 0.3);
}

/* 内枠：HTMLの l_container_lg を中央寄せ */
.news_kv .l_container_lg {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.news_kv-wrapper {
  width: 65%;
  height: 300px;
  margin-left: auto;
}

@media screen and (min-width: 768px) {
  .news_kv-wrapper {
    height: 350px;
  }
}

.news_kv_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  opacity: 0.8;
}

.news_title-wrapper {
  width: 100%;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.news_title-box {
  color: var(--white-color);
  line-height: 1.8;
  text-align: center;
  width: 55%;
  height: 100px;
  background: color-mix(in srgb, var(--primary-color) 100%, transparent);
  border: 4px solid var(--point-color);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .news_title-box {
    height: 170px;
  }
}

.news_title-sub {
  font-size: 16px;
  font-weight: bold;
}
.news_title-main {
  font-size: 24px;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .news_title-sub {
    font-size: 24px;
  }
  .news_title-main {
    font-size: 32px;
  }
}

@media screen and (min-width: 1080px) {
  .news_title-sub {
    font-size: 32px;
  }
  .news_title-main {
    font-size: 40px;
  }
}

/* ▼▼▼ 修正箇所：ニュース一覧エリア ▼▼▼ */
.news {
  background: rgba(255, 255, 255, 0.3);

  /* ↓ これで「白い隙間」が消えます */
  margin-top: 0;
  overflow: hidden;

  /* ニュースの下にも少し余白が欲しい場合はここを調整 */
  padding-bottom: 80px;
}

/* --- Subpage: Activity / Tour / Volunteer / Suzuyaki --- */
body.tour {
  background-image: url("../img/和紙02.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

body.volunteer {
  background-image: url("../img/和紙03.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

body.suzuyaki {
  background-image: url("../img/和紙05.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

.activity-kv {
  padding: 80px 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
}

/* Magazine Style KV */
.activity-kv-magazine {
  padding: 80px 0 60px;
  position: relative;
}

.activity-kv-magazine_inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 400px;
}

.activity-kv-magazine_img {
  width: 75%;
  height: 400px;
  overflow: hidden;
  border-radius: 0 80px 0 80px;
  position: relative;
  z-index: 1;
}

.activity-kv-magazine_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.activity-kv-magazine_card {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  background-color: #fff;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  z-index: 2;
}

.activity-kv-magazine_card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 6px;
  background-color: var(--point-color);
  border-radius: 0 4px 4px 0;
}

.activity-kv-magazine_en {
  color: var(--primary-color);
  font-family: "Klee One", cursive;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  display: block;
}

.activity-kv-magazine_title {
  font-size: 32px;
  font-weight: bold;
  color: var(--black-color);
  margin-bottom: 20px;
  line-height: 1.4;
}

.activity-kv-magazine_desc {
  font-size: 15px;
  line-height: 1.8;
  color: #666;
}

/* Activity KV SP */
@media screen and (max-width: 767px) {
  .activity-kv-magazine {
    padding: 0 0 40px;
  }
  .activity-kv-magazine_inner {
    display: block;
    min-height: auto;
  }
  .activity-kv-magazine_img {
    width: 100%;
    height: 250px;
    border-radius: 0;
  }
  .activity-kv-magazine_card {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 90%;
    margin: -40px auto 0;
    padding: 30px 24px;
  }
  .activity-kv-magazine_title {
    font-size: 24px;
    margin-bottom: 16px;
  }
  .activity-kv-magazine_card::before {
    top: 16px;
    bottom: 16px;
  }
}

/* --- Subpage: About --- */
body.about {
  background-image: url("../img/和紙.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

/* About KV Area */
.about-kv {
  width: 100%;
  padding: 50px 0 100px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
}

.about-kv_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.about-kv_title-area {
  margin-bottom: 30px;
  position: relative;
  z-index: 10;
}

.about-kv_title {
  font-size: 30px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 10px;
  text-shadow:
    2px 2px 0 #fff,
    -2px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff;
}

.about-kv_desc {
  font-family: "Klee One", cursive;
  font-size: 1.1rem;
  color: var(--point-color);
  letter-spacing: 0.1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

/* About Photos */
.about-kv_photos-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 0 auto;
}

.about-photo-item {
  position: absolute;
  background-color: #fff;
  padding: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    z-index 0s;
  width: 240px;
}

.about-photo-item img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(10%);
}

.item-center::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 100px;
  height: 25px;
  background-color: rgba(233, 186, 0, 0.6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 10;
}

.item-left::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 35%;
  width: 90px;
  transform: rotate(-10deg);
  height: 25px;
  background-color: rgba(233, 186, 0, 0.6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 10;
}

.item-right::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 40%;
  transform: rotate(5deg);
  width: 80px;
  height: 25px;
  background-color: rgba(233, 186, 0, 0.6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 10;
}

/* About Photo Positioning (SP) */
.item-left {
  top: 25%;
  left: 50%;
  transform: translateX(-110%) rotate(-6deg);
  z-index: 1;
}
.item-left:hover {
  z-index: 100;
  transform: translateX(-110%) rotate(0deg) scale(1.1);
}

.item-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  z-index: 3;
}
.item-center::before {
  transform: translateX(-50%) rotate(-3deg);
}
.item-center:hover {
  z-index: 100;
  transform: translateX(-50%) rotate(0deg) scale(1.1);
}

.item-right {
  top: 10%;
  left: 50%;
  transform: translateX(10%) rotate(5deg);
  z-index: 2;
}
.item-right:hover {
  z-index: 100;
  transform: translateX(10%) rotate(0deg) scale(1.1);
}

/* About Photo Positioning (PC) */
@media screen and (min-width: 768px) {
  .about-kv {
    height: 500px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-kv_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .about-kv_title-area {
    width: 40%;
    text-align: left;
    padding-left: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .about-kv_title {
    font-size: 32px;
    margin-bottom: 20px;
  }
  .about-kv_desc {
    font-size: 20px;
    line-height: 2;
  }
  .about-kv_photos-wrapper {
    width: 60%;
    max-width: 650px;
    height: 320px;
  }
  .about-photo-item {
    width: 300px;
  }

  .item-center {
    display: none;
  }

  .item-left {
    top: 5%;
    left: -10%;
    transform: rotate(-4deg);
    z-index: 2;
  }
  .item-left:hover {
    z-index: 100;
    transform: rotate(0deg) scale(1.1);
  }

  .item-right {
    top: -15%;
    right: 0;
    left: auto;
    transform: rotate(3deg);
    z-index: 1;
  }
  .item-right:hover {
    z-index: 100;
    transform: rotate(0deg) scale(1.1);
  }
}

/* About Photo Positioning (Large Screen) */
@media screen and (min-width: 1080px) {
  .about-kv {
    height: 560px;
  }
  .about-kv_title-area {
    width: fit-content;
    padding-left: 0;
  }
  .about-kv_title {
    font-size: 40px;
  }
  .about-kv_desc {
    font-size: 18px;
  }
  .about-kv_photos-wrapper {
    width: 55%;
    max-width: 750px;
    height: 380px;
  }
  .about-photo-item {
    width: 320px;
  }

  .item-center {
    display: block;
    top: -10%;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    z-index: 3;
  }
  .item-center::before {
    transform: translateX(-50%) rotate(-5deg);
  }
  .item-center:hover {
    z-index: 100;
    transform: translateX(-50%) rotate(0deg) scale(1.1);
  }

  .item-left {
    top: 20%;
    left: -20%;
    transform: rotate(-10deg);
  }
  .item-left:hover {
    z-index: 100;
    transform: rotate(0deg) scale(1.1);
  }

  .item-right {
    top: 10px;
    right: -120px;
    transform: rotate(8deg);
  }
  .item-right:hover {
    z-index: 100;
    transform: rotate(0deg) scale(1.1);
  }
}

/* ============================================
   Page: About (概要ページ) - 法人概要テーブル
   ============================================ */

.about-info {
  padding: 80px 0 120px;
}

/* テーブル全体枠 */
.about-info_wrapper {
  margin-top: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.about-info_table {
  width: 100%;
  border-collapse: collapse;
}

/* 基本の線（すべてのth, tdに適用） */
.about-info_table th,
.about-info_table td {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}

/* 【スマホ・PC共通】
  最後の行の「内容(td)」だけ線を消す
  → これによりスマホでは一番下の線だけが消えます
*/
.about-info_table tr:last-child td {
  border-bottom: none;
}

/* 項目名 (左側) */
.about-info_table th {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 18px;
  display: block;
  margin-bottom: 8px;
  text-align: center;
}

/* 内容 (右側) */
.about-info_table td {
  display: block;
  color: var(--black-color);
  text-align: center;
}

/* 注釈 */
.u_note {
  font-size: 14px;
  color: #666;
  margin-left: 0.5em;
}

/* --- PC用レイアウト (768px以上) --- */
@media screen and (min-width: 768px) {
  .about-info_wrapper {
    padding: 60px;
  }

  .about-info_table th {
    display: table-cell;
    width: 30%;
    padding-right: 20px;
    margin-bottom: 0;
  }

  .about-info_table td {
    display: table-cell;
    width: 70%;
  }

  /* 【PCのみ】
     最後の行の「項目名(th)」の線も消す
     → tdの線は上で消しているので、これで両方消えます
  */
  .about-info_table tr:last-child th {
    border-bottom: none;
  }
}

/* --- Subpage: Contact --- */
body.contact {
  background-image: url("../img/和紙.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

.contact-kv {
  padding: 80px 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
}

.contact-kv_title {
  font-size: 32px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 8px;
}

.contact-kv_desc {
  font-size: 16px;
  font-weight: bold;
  color: var(--point-color);
  font-family: "Klee One", cursive;
  letter-spacing: 0.2em;
}

.contact-section {
  padding: 20px 0 120px;
  background: rgba(255, 255, 255, 0.3);
}

.contact-intro {
  text-align: center;
  margin-bottom: 60px;
  font-weight: bold;
  line-height: 1.8;
}

.u_pc-only {
  display: none;
}
@media screen and (min-width: 768px) {
  .u_pc-only {
    display: block;
  }
}

/* =========================================
   1. 変数定義 (色などをここで一括管理)
   ========================================= */
:root {
  --primary-color: #649d27; /* フォーカス枠の緑色に合わせました */
  --accent-color: #c0392b;  /* 必須バッジの赤 */
  --white-color: #ffffff;
  --black-color: #333333;
}

/* =========================================
   2. フォーム本体のスタイル (ご指定のスタイル)
   ========================================= */
.contact-form {
  width: 100%;
  max-width: 800px; /* PCで広がりすぎないよう追加 */
  margin: 0 auto;   /* 中央寄せ */
}

.contact-form_row {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 32px;
}

/* 最後の行の線は消す */
.contact-form_row:last-of-type {
  border-bottom: none;
}

/* ラベルエリア */
.contact-form_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: bold;
}

/* CF7が勝手に入れる改行を無効化 */
.contact-form_label p br {
  display: none;
}

/* 必須バッジ */
.contact-form_required {
  background-color: var(--accent-color);
  color: var(--white-color);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 入力エリア */
.contact-form_input {
  width: 100%;
  margin: 0;
}

/* テキスト・メール・テキストエリア・セレクト共通 */
.contact-form_input input[type="text"],
.contact-form_input input[type="email"],
.contact-form_input textarea,
.contact-form_input select {
  width: 100%;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fafafa;
  font-family: inherit;
  font-size: 16px;
  color: var(--black-color);
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  box-sizing: border-box; /* 枠線を含めた幅計算 */
}

/* テキストエリアの高さ */
.contact-form_input textarea {
  resize: vertical;
  min-height: 200px;
}

/* フォーカス時のデザイン */
.contact-form_input input:focus,
.contact-form_input textarea:focus,
.contact-form_input select:focus {
  outline: none;
  border-color: var(--primary-color);
  background-color: var(--white-color);
  box-shadow: 0 0 0 3px rgba(100, 157, 39, 0.1);
}

/* セレクトボックスの矢印 */
.select-wrapper {
  position: relative;
  width: 100%;
}
.select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: var(--primary-color) transparent transparent transparent;
  pointer-events: none;
}

/* =========================================
   3. チェックボックスのスタイル (前回の完成版)
   ========================================= */
.contact-form_check {
  display: flex !important; /* 強制的にフレックス */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 32px 0 40px;
  width: 100%;
}

/* CF7の自動挿入タグ対策 */
.contact-form_check br { display: none !important; }
.contact-form_check p { display: contents; }

/* ラベルエリア */
.contact-form_check-box {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.contact-form_check-box .wpcf7-list-item { margin: 0; }

/* input（非表示） */
.contact-form_check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* 四角い箱（ダミー） */
.contact-form_check-dummy {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background: var(--white-color);
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* チェックマーク */
.contact-form_check-dummy::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border-bottom: 2px solid var(--white-color);
  border-right: 2px solid var(--white-color);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* --- チェック時の動作 --- */
/* CF7構造対策: inputの隣のspanの中にあるdummyを対象にする */
.contact-form_check-input:checked + span .contact-form_check-dummy {
  border-color: var(--primary-color);
  background: var(--primary-color);
}
.contact-form_check-input:checked + span .contact-form_check-dummy::after {
  opacity: 1;
}

/* ホバー時 */
.contact-form_check-box:hover .contact-form_check-dummy {
  border-color: var(--primary-color);
}

/* テキスト部分 */
.contact-form_check-text {
  font-size: 14px;
  line-height: 1.5;
}
.contact-form_check-text a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: bold;
}

/* Contact PC Adjustments */
@media screen and (min-width: 768px) {
  .contact-kv_title {
    font-size: 40px;
  }
  .contact-form_row {
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .contact-form_label {
    width: 30%;
    margin-bottom: 0;
    padding-top: 16px;
  }
  .contact-form_input {
    width: 70%;
  }
}

.top-about_btn-wrapper p {
    margin: 0;
    text-align: center;
}

/* ついでに、ボタンの横に出るローディングアイコンが
   レイアウトを崩さないように絶対配置にする */
.top-about_btn-wrapper .wpcf7-spinner,
.top-about_btn-wrapper .ajax-loader {
    position: absolute;
    margin-top: 10px; /* 位置は微調整してください */
}

/* =========================================
   会員募集固定ボタン（全サイズ右上固定版）
   ========================================= */
.fixed-recruit-btn {
  position: fixed;
  right: 20px;
  z-index: 900; /* メニュー(z-index:999等)より下になるように調整 */

  /* ▼▼▼ 位置の設定（重要） ▼▼▼ */
  bottom: auto; /* 下固定を解除 */

  /* PCのヘッダー高さ(100px) + 余白 */
  top: 100px;

  /* ボタンの共通デザイン */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  text-decoration: none;
  color: #fff;
  background-color: #e64a3d;
  border-radius: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* ふわっと表示させるための設定 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px); /* 上から降りてくる演出 */
  transition:
    opacity 0.4s,
    visibility 0.4s,
    transform 0.4s,
    background-color 0.3s;
}

/* 表示状態（JSで付与） */
.fixed-recruit-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) {
  .fixed-recruit-btn:hover {
    background-color: #c0392b;
    transform: scale(1.05);
  }
}

.fixed-recruit-btn_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.fixed-recruit-btn_text {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
}

/* スマホ・タブレット幅（1080px以下）の微調整 */
@media screen and (max-width: 1080px) {
  .fixed-recruit-btn {
    /* スマホのヘッダー高さ(72px) + 余白 */
    top: 90px;

    /* 少し小さくする */
    width: 80px;
    height: 80px;
    right: 10px;
  }

  .fixed-recruit-btn_text {
    font-size: 11px;
  }
}

/* ==============================================
   News Single Page Design
   ============================================== */

/* 背景調整（和紙の上に見やすく配置） */
.news-single {
  /* padding: 60px 0 100px; */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(249, 249, 249, 0.3) 100%
  );
}

/* 記事カード（便箋のような白いエリア） */
.article-card {
  background-color: rgba(255, 255, 255, 0.95); /* ほんの少し透過 */
  padding: 40px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 優しい影 */
  margin-bottom: 60px;
  max-width: 900px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}

/* PC幅での余白調整 */
@media screen and (min-width: 768px) {
  .article-card {
    padding: 60px 80px;
  }
}

/* ============================================
   記事カードデザイン（修正版）
   ============================================ */

/* 記事カード（便箋のような白いエリア） */
.article-card {
  background-color: rgba(255, 255, 255, 0.95); /* ほんの少し透過 */
  padding: 40px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 優しい影 */
  margin-bottom: 60px;
  max-width: 900px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}

/* PC幅での余白調整 */
@media screen and (min-width: 768px) {
  .article-card {
    padding: 60px 80px;
  }
}

/* --- 1. 記事ヘッダー --- */
.article-header {
  margin-bottom: 40px;
  border-bottom: 2px dashed #ddd; /* 点線で区切る */
  padding-bottom: 20px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-family: "Klee One", cursive; /* 手書きフォント */
}

.article-date {
  color: #888;
  font-weight: bold;
}

.article-cat {
  background-color: var(
    --primary-color,
    #649d27
  ); /* 変数がない場合の色指定を追加 */
  color: #fff;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

.article-title {
  font-size: 24px;
  line-height: 1.5;
  color: var(--primary-color, #649d27);
  font-weight: bold;
  font-family: "Klee One", cursive;
}

@media screen and (min-width: 768px) {
  .article-title {
    font-size: 32px;
  }
}

/* --- 2. アイキャッチ画像 --- */
.article-thumb {
  margin-bottom: 50px;
  overflow: hidden;
  border-radius: 4px;
}

.article-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* --- 3. 記事本文エリア --- */
.article-body {
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}

/* 本文中の段落 */
.article-body p {
  margin-bottom: 2em;
}

/* --- 見出し H3（マーカー風デザイン） --- */
.article-body h3 {
  font-size: 22px;
  color: var(--primary-color, #649d27);
  font-family: "Klee One", cursive;
  margin-top: 60px;
  margin-bottom: 30px;
  padding-left: 15px;
  position: relative;
  border-left: 5px solid var(--primary-color, #649d27);
  background: linear-gradient(to right, rgba(100, 157, 39, 0.1), transparent);
  padding-top: 8px;
  padding-bottom: 8px;
}

/* --- 見出し H4（下線デザイン） --- */
.article-body h4 {
  font-size: 18px;
  color: #444;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--point-color, #ffd700); /* 黄色のライン */
}

/* --- リスト（箇条書き） --- */
.article-body ul,
.article-body ol {
  background-color: #f9f9f9;
  padding: 24px 24px 24px 40px;
  border-radius: 4px;
  margin-bottom: 2em;
}

.article-body li {
  list-style: disc; /* 点を表示 */
  margin-bottom: 8px;
}
.article-body ol li {
  list-style: decimal; /* 数字を表示 */
}

.article-body li:last-child {
  margin-bottom: 0;
}

/* --- ▼▼ 修正箇所：本文中の画像（高さ制限・トリミング版） ▼▼ --- */
/* WordPress標準の画像ブロックに対応させるためセレクタを変更しました */

.article-body figure {
  margin: 0 0 40px 0;
  text-align: center; /* 画像とキャプションを中央揃え */
}

.article-body img {
  /* PCでのサイズ設定 */
  max-width: 60%; /* 幅を親要素の60%に制限 */
  min-width: 300px; /* 最小幅を確保 */
  width: 100%; /* レスポンシブ対応 */

  /* 高さの設定（重要） */
  height: 250px; /* 高さを固定 */
  object-fit: cover; /* 枠に合わせてトリミング */

  /* 装飾 */
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  /* 中央寄せ */
  display: block;
  margin: 0 auto;
}

/* スマホ用調整（画面幅768px以下） */
@media screen and (max-width: 768px) {
  .article-body img {
    max-width: 100%; /* スマホでは幅いっぱいに戻す */
    min-width: auto;
    height: 200px; /* スマホでは少し高さを低くする */
  }

  .article-card {
    padding: 30px 20px; /* スマホ時のカード余白調整 */
  }
}

.article-body h5 {
  font-size: 14px; /* 文字サイズ */
  color: #666; /* 文字色（グレー） */
  margin-top: 10px; /* 画像との隙間 */
  margin-bottom: 0;
  font-weight: bold; /* 太字 */
  text-align: center; /* 中央寄せ */
  display: block; /* ブロック要素にする */
  line-height: 1.4; /* 行間を少し狭めに */
}

/* --- 4. 戻るボタンエリア --- */
.article-footer-nav {
  text-align: center;
  margin-top: 40px;
}

.btn-back-list {
  display: inline-block;
  padding: 12px 40px;
  background-color: #fff;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  font-family: "Klee One", cursive;
}

.btn-back-list:hover {
  background-color: var(--primary-color);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(100, 157, 39, 0.2);
}

.btn-back-list .arrow {
  margin-right: 8px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-back-list:hover .arrow {
  transform: translateX(-4px);
}

/* =========================================
   ニュース一覧のPCサイズ調整 (コンパクト化)
   ========================================= */
@media screen and (min-width: 768px) {
  /* 1. レイアウトのグリッド定義を更新 */
  .top-news_post-link {
    /* 画像エリアを200px、残りをテキストエリアに */
    grid-template-columns: 200px 1fr;

    /* 画像・タイトル・メタ情報などの配置バランス調整 */
    grid-template-areas:
      "img meta"
      "img title"
      "img txt";
    grid-template-rows: min-content 1fr min-content; /* タイトル部分を伸縮させる */
    gap: 0 20px; /* 画像とテキストの間の余白 */
    min-height: 120px; /* カードの最小高さを画像に合わせる */
  }

  /* 2. 画像サイズを固定 (200px x 120px) */
  .top-news_post_thumb-wrapper {
    width: 200px;
    height: 120px;
  }

  .top-news_post_thumb-wrapper img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto; /* 元のアスペクト比指定を解除 */
    object-fit: cover; /* トリミングして埋める */
  }

  /* 3. 各要素の余白を詰める */
  .top-news_post_data {
    margin-top: 5px; /* 上の余白を極小に */
    margin-bottom: 5px; /* タイトルとの間隔を詰める */
  }

  .top-news_post_data,
  .top-news_post_title,
  .top-news_post_text-area {
    padding-right: 0; /* 右の余白も不要なら削除 */
  }

  /* 4. タイトルの文字サイズ調整 */
  .top-news_post_title {
    font-size: 18px; /* 元の24pxから縮小 */
    line-height: 1.5;
    margin-bottom: 0;
    align-self: start; /* 上詰めで配置 */
  }

  /* 5. 「記事を読む」などのリンクエリア調整 */
  .top-news_post_text-area {
    padding-right: 16px;
    padding-bottom: px; /* 下の余白を詰める */
    align-items: flex-end;
  }

  /* ニュース間の余白も少し詰める */
  .top-news_list {
    gap: 24px; /* 元の40pxから縮小 */
  }
}

/* =========================================
   フッターCTA (会員登録・接触) のコンパクト化
   ========================================= */

/* 1. 全体の余白を縮小 */
.l_footer-cta {
  padding-top: 80px;
  padding-bottom: 60px;
}

/* 2. タイトルの文字サイズと下の余白を調整 */
.l_footer-cta_title {
  font-size: 20px;
  margin-bottom: 30px; /* 元の余白(おそらく40-50px)を詰める */
}

@media screen and (min-width: 1080px) {
  .l_footer-cta_title {
    font-size: 28px; /* PCでも大きすぎないサイズに */
  }
}

/* 3. CTAボックス（赤と黄色の枠）の調整 */
.top-cta_box {
  padding: 30px 20px; /* 内側の余白を減らす */
  min-height: auto; /* 不要な高さ指定があれば解除 */
}

.top-cta_box_title {
  font-size: 18px; /* ボックス内の見出しも小さく */
  margin-bottom: 20px;
}

/* 4. PC表示時のボックスレイアウト調整 */
@media screen and (min-width: 768px) {
  .top-cta_box-wrapper {
    max-width: 900px; /* 横幅が広がりすぎないように制限 */
    margin: 0 auto;
    gap: 20px; /* ボックス間の隙間を詰める */
  }

  .top-cta_box {
    padding: 40px; /* PCでの内側余白も程よく */
    width: calc((100% - 20px) / 2); /* gapに合わせて幅計算 */
  }

  .top-cta_box_title {
    font-size: 20px;
  }
}

/* 5. ボタン周りの余白微調整 */
.top-contact_btn {
  margin-top: 0; /* ボタン上の余白を詰める */
}

/* ==========================================================================
   Page: About (概要ページ) 
   ========================================================================== */
/* ============================================
   Page: About (概要ページ) - 団体の理念 (About Us)
   ============================================ */
.about {
  background: rgba(255, 255, 255, 0.3);
}

.about-us {
  padding: 0 0 80px; /* 下部余白 */
}

/* 枠のデザイン（他セクションと共通化） */
.about-us_wrapper {
  padding: 40px 20px;
  border-radius: 8px;
  /* 縦積みのレイアウト */
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 各ブロック */
.about-us_block {
  width: 100%;
}

/* 小見出しエリア */
.about-us_head {
  margin-bottom: 20px;
  text-align: center;
}

.about-us_title {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: var(--primary-color);
  border-bottom: 2px solid var(--point-color); /* 黄色の下線 */
  padding-bottom: 5px;
  letter-spacing: 0.1em;
}

/* 本文エリア */
.about-us_body {
  text-align: center; /* SPは中央揃え */
}

.about-us_text {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 1.5em;
  color: var(--black-color);
}

.about-us_text strong {
  background: linear-gradient(
    transparent 60%,
    rgba(233, 186, 0, 0.3) 60%
  ); /* 蛍光ペン風マーカー */
  font-weight: bold;
}

.about-us_text:last-child {
  margin-bottom: 0;
}

/* ============================================
   Responsive (PC: 768px以上)
   ============================================ */
@media screen and (min-width: 768px) {
  .about-us_wrapper {
    padding: 60px 80px; /* 横の余白を多めに */
  }

  .about-us_block {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 40px;
  }

  /* 最後のブロックは線なし */
  .about-us_block:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .about-us_head {
    width: 240px; /* 見出し幅固定 */
    text-align: left; /* 左揃え */
    flex-shrink: 0;
    padding-top: 5px; /* テキストとの高さ合わせ */
  }

  .about-us_title {
    font-size: 22px;
    /* PCでは左側に縦線を入れるデザインに変更 */
    border-bottom: none;
    border-left: 4px solid var(--primary-color);
    padding-bottom: 0;
    padding-left: 15px;
  }

  .about-us_body {
    flex: 1;
    text-align: left; /* 左揃え */
  }
}

.about-noto {
  padding: 0 0 120px;
}

/* --------------------------------------------
   Wrapper (半透明の白背景ボックス)
   -------------------------------------------- */
.about-noto_wrapper {
  padding: 30px 20px;
  border-radius: 8px;
}

/* ============================================
   About Noto: 上部リードエリア
   （top-aboutのデザインを踏襲）
   ============================================ */

/* --- コンテナ（全体枠） --- */
.about-noto_lead-area {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
}

/* --- テキストエリア --- */
.about-noto_text {
  width: 100%;
  text-align: center; /* スマホは中央揃え */
}

/* 各段落のスタイル */
.about-noto_desc {
  margin-bottom: 24px;
  line-height: 2;
  color: var(--black-color);
  text-align: inherit; /* 親(about-noto_text)の揃え位置に従う */
}

.about-noto_desc:last-child {
  margin-bottom: 0;
}

/* --- 画像エリア（ポラロイド風） --- */
.about-noto_image {
  width: 100%;
  max-width: 520px; /* スマホで大きくなりすぎないように */
  position: relative;
  transform: rotate(3deg); /* 全体を少し傾ける */
  margin: 0 auto;
}

/* 写真本体（白枠と影） */
.about-noto_image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* ここで「横4：縦3」の比率に固定します */
  object-fit: cover; /* 画像を歪ませず、枠いっぱいにトリミングして表示します */
  border: 12px solid #fff; /* ポラロイド風の白いフチ */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

/* マスキングテープ風あしらい */
.about-noto_image::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg); /* テープの傾き */
  width: 140px;
  height: 40px;
  background-color: rgba(233, 186, 0, 0.7); /* テープの色（黄色） */
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none; /* 下の画像をクリックできるように */
}

/* ============================================
   Responsive (PC: 1080px以上)
   ============================================ */
@media screen and (min-width: 1080px) {
  .about-noto_lead-area {
    flex-direction: row; /* 横並びに変更 */
    justify-content: center;
    gap: 60px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  .about-noto_text {
    width: 45%; /* 幅の比率 */
    text-align: left; /* PCは左揃えに戻す */
  }

  .about-noto_image {
    width: 55%; /* 幅の比率 */
    margin: 0;
  }
}

/* タブレット〜PC小さめ (768px〜1079px) の調整 */
@media screen and (min-width: 768px) and (max-width: 1079px) {
  .about-noto_lead-area {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   About Noto: 特徴データエリア
   ============================================ */

/* エリア全体の余白調整 */
.about-noto_data-area {
  border-top: 1px dashed #ccc; /* 点線をタイトル上に移動 */
  padding-top: 40px;
  margin-top: 40px;
  text-align: center;
}

/* 新しい大見出し「能登の特徴」 */
.about-noto_data-title {
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  letter-spacing: 0.1em;
}

/* タイトルの装飾（左右に黄色い線など） */
.about-noto_data-title::before,
.about-noto_data-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 2px;
  background-color: var(--point-color);
}

.about-noto_data-title::before {
  right: 100%;
  margin-right: 15px;
}

.about-noto_data-title::after {
  left: 100%;
  margin-left: 15px;
}

/* グリッドコンテナ */
.about-noto_data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  /* border-top は親要素に移動したので削除 */
}

/* 個別アイテム */
.noto-data_item {
  background-color: var(--white-color);
  padding: 24px 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #eee;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

/* メインテキスト（半島地形など） */
.noto-data_main {
  font-size: 24px;
  font-weight: bold;
  color: var(--black-color);
  line-height: 1.3;
  margin-bottom: 12px;
  white-space: nowrap;
}

/* サブテキスト */
.noto-data_sub {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  text-align: left; /* 読みやすさのため左揃え */
  width: 100%;
}

/* --- PC用レイアウト (768px以上) --- */
@media screen and (min-width: 768px) {
  .about-noto_data-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .noto-data_main {
    font-size: 20px; /* 横並び時は少し小さくして収まりよく */
  }
}

/* ==============================================
   New Suzuyaki Design (Premium & Modern)
   ============================================== */

/* --- 共通設定 --- */
.suzu-wrapper {
  background-color: rgba(255, 255, 255, 0.3);
  color: #222;
}

/* コンテナ */
.suzu-container {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 100px;
}

/* --- 1. イントロ --- */
.suzu-intro {
  text-align: center;
  padding: 80px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 60px;
}

.suzu-heading-lg {
  font-size: 32px;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.suzu-text-lead {
  font-size: 16px;
  line-height: 2.2;
  color: #555;
  font-family: sans-serif; /* 本文は読みやすさ重視でゴシック */
}

/* --- セクション共通 --- */
.suzu-section {
  margin-bottom: 100px;
}

.suzu-title-area {
  text-align: center;
  margin-bottom: 50px;
}

.suzu-title-en {
  display: block;
  font-family: sans-serif;
  color: #d32f2f; /* 赤 */
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: bold;
}

.suzu-title-jp {
  font-size: 24px;
  font-weight: bold;
}

/* --- 2. 機能性 (Grid & Card) --- */
.suzu-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media screen and (min-width: 768px) {
  .suzu-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.suzu-card {
  background: #fff;
  padding: 40px 30px;
  border: 1px solid #eee;
  text-align: center;
  transition: all 0.3s ease;
}

.suzu-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
  border-color: #222; /* ホバーで黒枠に */
}

.suzu-feature-num {
  font-size: 40px;
  font-weight: bold;
  color: #e5e5e5;
  line-height: 1;
  margin-bottom: 10px;
  font-family: sans-serif;
}

.suzu-card_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #d32f2f;
  display: inline-block;
  padding-bottom: 5px;
}

.suzu-card_text {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  text-align: left;
}

/* --- 3. 比較表 --- */
.suzu-table-wrapper {
  overflow-x: auto;
}

.suzu-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-family: sans-serif;
}

.suzu-table th,
.suzu-table td {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.suzu-table thead th {
  border-bottom: 2px solid #222;
  font-weight: bold;
}

.suzu-table .is-suzu {
  background-color: #f9f9f9;
  font-weight: bold;
  color: #d32f2f;
}

.suzu-table thead th.is-suzu {
  background-color: #222;
  color: #fff;
}

/* --- 4. タイムライン --- */
.suzu-timeline {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid #ddd; /* 縦線 */
  margin-left: 10px;
}

.suzu-tl-item {
  position: relative;
  margin-bottom: 50px;
  padding-left: 30px;
}

.suzu-tl-item:last-child {
  margin-bottom: 0;
}

/* 丸い点 */
.suzu-tl-point {
  position: absolute;
  top: 5px;
  left: -26px; /* 線の真上に配置 */
  width: 13px;
  height: 13px;
  background: #fff;
  border: 3px solid #ccc;
  border-radius: 50%;
}

.suzu-tl-point.active {
  border-color: #d32f2f;
  background: #d32f2f;
}

.suzu-tl-date {
  font-family: sans-serif;
  font-size: 12px;
  color: #999;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 5px;
}

.suzu-tl-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.suzu-tl-text {
  font-family: sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

/* 戦略ボックス */
.suzu-strategy-box {
  background: #fff0f0; /* 薄い赤背景 */
  padding: 20px;
  margin-top: 15px;
  border-left: 4px solid #d32f2f;
  font-family: sans-serif;
}

.suzu-strategy-box ul {
  list-style: none;
}

.suzu-strategy-box li {
  margin-bottom: 15px;
}

.suzu-strategy-box li:last-child {
  margin-bottom: 0;
}

.suzu-strategy-box strong {
  display: block;
  color: #d32f2f;
  font-weight: bold;
  margin-bottom: 5px;
}

.suzu-strategy-box span {
  font-size: 14px;
}

/* --- 5. 支援エリア & CTA --- */
.suzu-support-area {
  background-color: #222;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
  border-radius: 4px;
}

.suzu-support-title {
  font-size: 24px;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

.suzu-support-text {
  font-family: sans-serif;
  font-size: 15px;
  line-height: 2;
  opacity: 0.8;
  margin-bottom: 40px;
}

.suzu-btn {
  display: inline-block;
  padding: 15px 50px;
  background: #fff;
  color: #222;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: all 0.3s;
  letter-spacing: 0.1em;
}

.suzu-btn:hover {
  background: #d32f2f;
  color: #fff;
  transform: translateY(-3px);
}

/* ==============================================
   Tour Page Design (Trust & Learn)
   ============================================== */

/* --- 共通設定 --- */
.tour-wrapper {
  background-color: rgba(255, 255, 255, 0.3);
  color: #222;
}

.tour-container {
  max-width: 960px;
  margin: 0 auto;
}

/* タイトルエリア */
.tour-title-area {
  text-align: center;
  margin-bottom: 50px;
}
.tour-title-en {
  display: block;
  font-family: sans-serif;
  color: #006064; /* 深い青緑（知的な印象） */
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: bold;
}
.tour-title-jp {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.tour-title-sub {
  opacity: 0.7;
}

/* --- 1. イントロ --- */
.tour-intro {
  text-align: center;
  padding: 80px 0 60px;
  margin-bottom: 40px;
}
.tour-heading-lg {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
  color: #222;
}
.tour-text-lead {
  font-size: 16px;
  line-height: 2.2;
  color: #555;
  font-family: sans-serif;
}

/* --- 2. 3つの特徴 (Cards) --- */
.tour-section:not(:last-child) {
  margin-bottom: 100px;
}

.tour-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media screen and (min-width: 768px) {
  .tour-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tour-feature-card {
  background: #fff;
  padding: 40px 30px;
  border-top: 4px solid #006064; /* 青緑のアクセント */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}
.tour-feature-card:hover {
  transform: translateY(-5px);
}

.tour-feature-num {
  font-size: 40px;
  font-weight: bold;
  color: #e0f2f1; /* 非常に薄い青緑 */
  line-height: 1;
  margin-bottom: 10px;
  font-family: sans-serif;
}
.tour-feature-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #006064;
}
.tour-feature-text {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

/* --- 3. 実績 (Logos・カラー表示版) --- */
.tour-bg-gray {
  background-color: #f5f5f5;
  padding: 60px 20px;
  border-radius: 8px;
  /* スマホ版で画面幅いっぱいにする設定 */
  margin-left: -20px;
  margin-right: -20px;
}
@media screen and (min-width: 768px) {
  .tour-bg-gray {
    margin-left: 0;
    margin-right: 0;
    padding: 80px;
  }
}

.tour-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* ロゴ同士の間隔 */
}

.tour-logo-item {
  background: #fff;
  width: 160px; /* ロゴ枠の幅 */
  height: 100px; /* ロゴ枠の高さ */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 控えめな影 */

  /* 画像を上下左右中央に配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ロゴ画像のスタイル */
.tour-logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 比率を保って枠内に収める */
  /* 加工なし（最初からカラー） */
}

/* --- 4. 参加者の声 --- */
.tour-voice-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media screen and (min-width: 768px) {
  .tour-voice-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.tour-voice-item {
  background: #fff;
  border: 1px solid #ddd;
  padding: 30px;
  border-radius: 8px;
  position: relative;
}
/* 吹き出しのしっぽ */
.tour-voice-item::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  transform: rotate(45deg);
}

.tour-voice-icon {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: #006064;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 15px;
  font-family: sans-serif;
}
.tour-voice-text {
  font-family: sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

/* --- 5. メッセージボックス --- */
.tour-message-box {
  background: linear-gradient(135deg, #006064, #004d40);
  color: #fff;
  padding: 50px 30px;
  border-radius: 8px;
  text-align: center;
}
.tour-message-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}
.tour-message-text {
  font-family: sans-serif;
  font-size: 15px;
  line-height: 2;
  margin-bottom: 15px;
  opacity: 0.9;
}
.tour-message-text strong {
  color: #ffd54f; /* 黄色の強調 */
  font-weight: bold;
  border-bottom: 1px solid #ffd54f;
}

/* ==============================================
   Volunteer Page Design (Refined & Unified)
   ============================================== */

/* --- 共通設定 --- */
.vol-wrapper {
  background-color: rgba(255, 255, 255, 0.3);
  color: #222;
}

.vol-container {
  max-width: 960px;
  margin: 0 auto;
}

/* タイトルエリア */
.vol-title-area {
  text-align: center;
  margin-bottom: 50px;
}
.vol-title-en {
  display: block;
  font-family: sans-serif;
  color: #f57c00; /* 落ち着いたオレンジ */
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: bold;
}
.vol-title-jp {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* --- 1. イントロ --- */
.vol-intro {
  text-align: center;
  padding: 80px 0 60px;
}
.vol-heading-lg {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}
.vol-text-lead {
  font-size: 16px;
  line-height: 2.2;
  color: #555;
  font-family: sans-serif;
}

/* --- 2. 活動内容 (Cards) --- */
.vol-section {
  margin-bottom: 100px;
}

/* 親要素（コンテナ）の設定 */
.vol-features-grid {
  display: flex;             /* GridからFlexに変更 */
  flex-wrap: wrap;           /* 折り返しを許可 */
  justify-content: center;   /* コンテンツを中央寄せ */
  gap: 30px;
}

/* 子要素（カード）の設定：スマホなどの基本設定 */
.vol-feature-card {
  width: 100%;               /* スマホでは横幅いっぱい */
}

/* PCサイズ（768px以上）の設定 */
@media screen and (min-width: 768px) {
  .vol-feature-card {
    /* 3列にするための計算式：
      (全体の100% - ギャップ30px × 2つ分) ÷ 3枚 
    */
    width: calc((100% - 60px) / 3);
  }
}

/* ツアーページのデザインに合わせる */
.vol-feature-card {
  background: #fff;
  padding: 40px 30px;
  border-top: 4px solid #f57c00; /* オレンジライン */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s;
}
.vol-feature-card:hover {
  transform: translateY(-5px);
}

.vol-feature-num {
  font-size: 40px;
  font-weight: bold;
  color: #ffe4c9;
  line-height: 1;
  margin-bottom: 10px;
  font-family: sans-serif;
}

.vol-feature-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #f57c00;
}
.vol-feature-text {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

/* --- 3. 拠点エリア --- */
.vol-base-box {
  background-color: #fff;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .vol-base-box {
    flex-direction: row;
  }
}

.vol-base-content {
  padding: 50px;
  flex: 1;
}
.vol-base-img {
  flex: 1;
  min-height: 300px;
}
.vol-base-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vol-tag {
  background: #222;
  color: #fff;
  font-family: sans-serif;
  font-size: 11px;
  padding: 5px 12px;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-bottom: 20px;
}
.vol-base-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.4;
}
.vol-base-text {
  font-family: sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

/* --- 4. スケジュール --- */
.vol-bg-gray {
  background-color: #f9f9f9;
  padding: 60px 20px;
  margin-left: -20px;
  margin-right: -20px;
}
@media screen and (min-width: 768px) {
  .vol-bg-gray {
    margin-left: 0;
    margin-right: 0;
    padding: 80px;
  }
}

/* =========================================
   1. 実績・連携エリア (Impact Area)
   ========================================= */
.vol-impact-area {
  margin-top: 40px;
  background-color: #f5f7fa; /* 全体の背景（薄いグレー） */
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
}

/* --- ① 数字データ --- */
.vol-stats-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.vol-stat-item {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  min-width: 160px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 浮き上がる影 */
  flex: 1;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vol-stat-label {
  display: inline-block;
  font-size: 13px;
  background: #cc2222;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.vol-stat-num {
  display: block;
  font-size: 32px; /* 数字を少し大きく */
  font-weight: 700;
  line-height: 1;
  color: #333;
  font-family: "Noto Sans JP", sans-serif; /* 数字はゴシック系で見やすく */
}

.vol-stat-num small {
  font-size: 14px;
  margin-left: 4px;
  font-weight: 500;
}

/* --- ② 連携自治体（強調版） --- */
.vol-partner-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  max-width: 600px;
  margin: 0 auto; /* 中央寄せ */
  position: relative;
  border: 2px solid #eef0f4; /* うっすら枠線 */
}

/* タイトル「連携自治体」 */
.vol-partner-title {
  font-size: 16px;
  font-weight: 700;
  color: #555;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
}

/* タイトルの両脇に短い線を入れる装飾 */
.vol-partner-title::before,
.vol-partner-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: #ccc;
  vertical-align: middle;
  margin: 0 10px;
}

/* ロゴの並び */
.vol-partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* ロゴ同士の間隔 */
}

.partner-item.ishikawa-logo {
  width: auto;
  height: 80px;
}

.partner-item.kanagawa-logo {
  width: auto;
  height: 80px;
}

.partner-item img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.partner-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

/* =========================================
   SP対応 (レスポンシブ)
   ========================================= */
@media screen and (max-width: 768px) {
  .vol-impact-area {
    padding: 30px 20px;
  }

  /* 数字カードは横幅いっぱいに */
  .vol-stat-item {
    width: 100%;
    max-width: none;
    flex-direction: row; /* スマホでは横並び(ラベル左、数字右)も見やすい */
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
  }

  .vol-stat-label {
    margin-bottom: 0; /* 横並びにするので下の余白削除 */
  }

  /* 連携自治体 */
  .vol-partner-logos {
    gap: 20px;
  }

  .partner-item img {
    height: 40px; /* スマホでは少し控えめに */
  }
}

/* =========================================
   参加者の声 (Voice Section)
   ========================================= */

/* セクション全体 */
.vol-voice-section {
  margin: 80px 0;
}

/* 2人の声のラッパー（縦並びの枠） */
.vol-voice-container {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 人と人の間隔 */
  max-width: 800px;
  margin: 0 auto 50px; /* 中央寄せ & 下のリストとの余白 */
}

/* 個別の声アイテム（アイコン＋吹き出し） */
.vol-voice-item {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: 20px;
}

/* アイコンエリア */
.voice-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #eee; /* 画像がない時の背景色 */
  flex-shrink: 0; /* 縮まないようにする */
  overflow: hidden;
}

.voice-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 吹き出し部分 */
.voice-content {
  background: #f5f7fa; /* 薄いグレーの背景 */
  padding: 25px;
  border-radius: 12px;
  position: relative;
  width: 100%;
}

/* 吹き出しの三角（左側） */
.voice-content::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -12px;
  /* 三角形を作る記述 */
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #f5f7fa; /* 吹き出しと同じ色 */
}

/* テキスト本文 */
.voice-text {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 10px;
  color: #333;
}

/* マーカー強調（赤系） */
.red-marker {
  font-weight: bold;
  /* 下半分に蛍光ペン風の線を引く */
  background: linear-gradient(transparent 60%, #ffdddd 60%);
  color: #222;
}

/* 属性（高校生、など） */
.voice-meta {
  font-size: 13px;
  color: #666;
  text-align: right;
  font-weight: 500;
}

/* -----------------------------------------
   参加動機リスト（チェックリスト）
   ----------------------------------------- */
.vol-voice-check {
  background: #fff;
  border: 2px solid #eee;
  padding: 30px 40px;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 auto;
}

.check-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 15px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 10px;
  display: inline-block;
}

.vol-voice-check ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vol-voice-check li {
  position: relative;
  padding-left: 28px; /* チェックマーク分の余白 */
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
}

/* チェックマーク (疑似要素で表示) */
.vol-voice-check li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #333;
  font-weight: bold;
  font-family: sans-serif; /* 記号が崩れないように */
}

.vol-voice-check li:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------
   スマホ対応 (レスポンシブ)
   ----------------------------------------- */
@media screen and (max-width: 768px) {
  .vol-voice-section {
    margin: 60px 0;
  }

  .vol-voice-item {
    flex-direction: column; /* アイコンと吹き出しを縦積みに */
    align-items: center;
    gap: 15px;
  }

  .voice-content {
    text-align: left;
    padding: 20px;
  }

  /* 吹き出しの三角を「左」から「上」に移動 */
  .voice-content::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    /* 三角形の向きを変更 */
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-bottom: 12px solid #f5f7fa;
    border-top: none;
  }

  .voice-meta {
    text-align: right; /* スマホでも右寄せのままが見やすい */
  }

  .vol-voice-check {
    padding: 20px;
  }
}

/* --- 5. 募集要項・CTA --- */
.vol-info-area {
  background: #fff;
  border: 1px solid #f57c00; /* オレンジ枠 */
  padding: 50px;
  margin-top: 80px;
  text-align: center;
}

.vol-info-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #222;
}

.vol-info-list {
  text-align: left;
  display: inline-block;
  margin-bottom: 40px;
  font-family: sans-serif;
  font-size: 15px;
  color: #444;
}
.vol-info-list li {
  margin-bottom: 12px;
  line-height: 1.6;
}

.vol-cta-wrapper p {
  margin-bottom: 16px;
  font-weight: bold;
}
.vol-cta-wrapper div {
  margin-bottom: 20px;
}
.vol-caution {
  text-decoration: underline 1px solid var(--accent-color);
  text-underline-offset: 4px;
}

/* CTAボタン（オレンジVer） */
.handwritten-btn.orange-ver {
  background-color: #f57c00;
  color: #fff;
  border: none;
}
.handwritten-btn.orange-ver:hover {
  background-color: #ef6c00;
  transform: translateY(-2px);
}

/* ==========================================================================
   プライバシーポリシー用スタイル（追記分）
   ========================================================================== */

/* 背景色（.l_contents に追加して使う想定） */
body.privacy {
  background-image: url("../img/和紙06.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

.policy-page-bg {
  background-color: rgba(255, 255, 255, 0.3);
}

/* ページタイトルエリア（headerタグ不使用） */
.policy-title-area {
  text-align: center;
  margin-bottom: 40px;
}

.policy-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 10px;
  font-family: "Klee One", cursive; /* ベースの手書き風フォント */
}

.policy-subtitle {
  font-size: 14px;
  color: var(--point-color);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: "Noto Sans JP", sans-serif;
}

/* 白いカードデザイン */
.policy-card {
  background-color: var(--white-color);
  padding: 60px 80px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  /* 長文の可読性のため、ここだけゴシック体を優先 */
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}

.policy-intro {
  margin-bottom: 40px;
}

/* 条文セクション */
.policy-section {
  margin-bottom: 40px;
}

/* 見出し（H2） */
.policy-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--black-color);
  background-color: #f9f9f9;
  padding: 12px 15px;
  border-left: 5px solid var(--primary-color); /* みどり色 */
  margin-bottom: 20px;
}

.policy-section p {
  margin-bottom: 1.5em;
  font-size: 15px;
  line-height: 1.8;
}

/* リスト（ul, ol） */
.policy-section ul,
.policy-section ol {
  margin-bottom: 1.5em;
  padding: 20px 20px 20px 40px;
  background-color: #fcfcfc;
  border: 1px solid #eee;
  border-radius: 4px;
}

.policy-section li {
  list-style: disc;
  margin-bottom: 8px;
  font-size: 15px;
}

.policy-section ol li {
  list-style: decimal;
}

/* リンク色 */
.policy-card a {
  color: var(--primary-color);
  text-decoration: underline;
}

.policy-card a:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* お問い合わせ窓口の枠 */
.contact-info {
  border: 2px solid #eee;
  padding: 30px;
  border-radius: 4px;
}

.contact-info dl {
  display: flex;
  flex-wrap: wrap;
}

.contact-info dt {
  width: 30%;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  color: var(--primary-color);
}

.contact-info dd {
  width: 70%;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.contact-info dt:last-of-type,
.contact-info dd:last-of-type {
  border-bottom: none;
}

/* 制定日（右寄せ） */
.date-info {
  text-align: right;
  color: #888;
  font-size: 14px;
  margin-top: 40px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

/* スマホ対応（768px以下） */
@media screen and (max-width: 768px) {
  .policy-card {
    padding: 30px 20px;
  }

  .policy-title {
    font-size: 24px;
  }

  .contact-info {
    padding: 20px;
  }

  .contact-info dt,
  .contact-info dd {
    width: 100%;
    display: block;
    border-bottom: none;
  }

  .contact-info dt {
    padding-bottom: 0;
    font-size: 14px;
  }

  .contact-info dd {
    padding-top: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
  }
}

body.single {
  background-image: url("../img/和紙06.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-attachment: fixed;
}

/* ==========================================================================
   Thank You Page Styles
   ========================================================================== */

/* コンテナ全体 */
.p-thanks {
  text-align: center;
  padding: 40px 0;
}

/* --- アイコンエリア --- */
.p-thanks_icon {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}

/* 緑色の円とチェックマーク（CSSで描画） */
.p-thanks_check {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--primary-color); /* #649d27 */
  position: relative;
  box-shadow: 0 4px 10px rgba(100, 157, 39, 0.2);
}

.p-thanks_check::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 48%;
  width: 20px;
  height: 36px;
  border-bottom: 4px solid var(--white-color);
  border-right: 4px solid var(--white-color);
  transform: translate(-50%, -60%) rotate(45deg);
}

/* --- タイトル --- */
.p-thanks_title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 32px;
  color: var(--primary-color);
  letter-spacing: 0.1em;
}

/* --- 本文 --- */
.p-thanks_text {
  font-size: 16px;
  margin-bottom: 48px;
}

.p-thanks_text p {
  margin-bottom: 1.5em;
}

/* 注釈（少し小さく、薄く） */
.p-thanks_note {
  font-size: 14px;
  color: #666;
  margin-top: 24px;
}

/* --- ボタン --- */
.p-thanks_btn-wrapper {
  margin-top: 32px;
}

.p-thanks_btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white-color);
  text-decoration: none;
  font-weight: bold;
  padding: 16px 64px;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.p-thanks_btn:hover {
  background-color: var(--accent-color); /* ホバー時はアクセントカラー(#aa1823)にするなど */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  color: var(--white-color);
}

/* --- レスポンシブ対応 (SP) --- */
@media screen and (max-width: 768px) {
  .p-thanks {
    padding: 20px 0;
  }
  
  .p-thanks_check {
    width: 60px;
    height: 60px;
  }
  
  .p-thanks_check::after {
    width: 15px;
    height: 28px;
    border-width: 3px;
  }

  .p-thanks_title {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .p-thanks_text {
    font-size: 14px;
    margin-bottom: 40px;
    text-align: left; /* スマホでは左揃えの方が読みやすい場合がある */
    display: inline-block; /* 左揃えにしつつ全体を中央に寄せる */
  }

  /* SPのみ改行させるクラス */
  .u-sp-only {
    display: block; 
  }
}

/* PCではSP用改行を無効化 */
@media screen and (min-width: 769px) {
  .u-sp-only {
    display: none;
  }
}