@charset "utf-8";
/* ===============================================================

  共通部分 

=============================================================== */ :root {
  --green: #00a53d;
  --lightgreen: #eaf7e7;
}
html {
  scroll-padding-top: 150px;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  color: #333;
  background: #fff;
  line-height: 1.6;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}
/*
  テキスト設定
===================================================== */
h1 {
  margin-bottom: 0;
  font-weight: bold;
  color: #B2ABA7;
}
h1.parallelogram {
  position: relative;
  min-width: 8em;
  padding: .5rem 1em;
  color: #fff;
  z-index: 2;
}
h1.parallelogram::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(180, 0, 20, .8);
  transform: skew(-20deg);
  content: "";
  z-index: -1;
}
h2 {
  margin-bottom: 5rem;
  font-weight: 800;
  letter-spacing: 3px;
  line-height: 1em;
  font-size: 1.555rem;
  color: #fff;
  text-align: center;
}
@media (min-width: 768px) {
  h2 {
    font-size: 1.555rem;
  }
}
.heading_black_circles {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* SVGの横幅(310px)を最低幅として確保 */
  min-width: 310px;
  /* SVGの高さ(70px)付近に合わせて高さを確保 */
  min-height: 70px;
  padding: 0 40px;
  z-index: 1;
}
/* 背景にSVGを設置 */
.heading_black_circles::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* SVGのアスペクト比に合わせてサイズを指定 */
  width: 310px;
  height: 70px;
  z-index: -1;
  background-image: url("../images/common/circle_pattern.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
h4 {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.4;
}
@media (min-width: 992px) {
  h4 {
    font-size: 1.8rem;
  }
}
p {
  text-align: left;
}
a:hover {
  text-decoration: none;
}
.containerFull.align-items_center, .container.align-items_center {
  align-items: center;
}
/*
  キャプション付き画像
===================================================== */
.img_wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* コンテンツに合わせて調整 */
  margin-top: 50px; /* 上に飛び出すための余白 */
}
/* ★追加：右上サブ画像の配置 */
.sub_image {
  position: absolute;
  top: 0; /* 右上基準 */
  right: 0;
  width: 35%; /* ★親の幅に対するサイズ。適宜調整してください */
  margin: 0;
  z-index: 1; /* メイン画像の下に配置 */
}
/* サブ画像の画像自体の設定（264x352の比率を維持） */
.sub_image img {
  width: 100%;
  height: auto;
  aspect-ratio: 264 / 352; /* ★比率を固定 */
  display: block;
  object-fit: cover; /* 枠に収める */
  border: 2px solid #000; /* 必要なら枠線 */
}
@media (min-width: 768px) {
  .sub_image img {
    max-width: 264px;
  }
}
/* 画像：右下寄せ、サイズ85% */
.main_image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 85%;
  margin: 0;
  z-index: 2;
}
.main_image img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #000;
}
/* キャプション全体の配置（左上よりさらに上へ） */
.caption {
  position: absolute;
  top: -3em; /* 親要素の枠より上に飛び出させる */
  left: 0;
  z-index: 3;
  font-size: 1.2rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .caption {
    font-size: 1.888rem;
  }
}
/* 共通の帯スタイル */
.cap_title, .cap_body {
  display: inline-block;
  background-color: var(--green, #008000);
  color: #fff;
  padding: 4px 12px;
  line-height: 1.4;
}
/* 1行目固有 */
.cap_title {
  margin-bottom: 0px;
}
/* 2行目固有：左一字空け ＋ 画像に重なる */
.cap_body {
  margin-left: 1em; /* 左一字空け */
  /* 画像の左上に半分かかるように位置を微調整 */
  /* 画像の配置（width:85%）との兼ね合いで調整してください */
  transform: translateY(10px);
}
.deco_image {
  position: absolute;
  /* 左端に配置 */
  left: 0;
  /* 下端からの位置（メイン画像 85% とのバランスで調整） */
  bottom: 5%;
  /* 画像の実サイズを指定（%だと親要素が0の場合消えるため） */
  width: 214px;
  height: auto;
  z-index: 0; /* メイン画像の背面 */
  pointer-events: none;
}
.deco_image img {
  width: 100%;
  height: auto;
  display: block;
}
/*
  キャプション付き画像横テキスト
===================================================== */
.underlayer [class*="_liquid"] p:last-child {
  margin-bottom: 0;
} /*
  テキストセンタリング
===================================================== */
.pc_centering_text {
  margin: 0rem auto;
}
@media (min-width: 768px) {
  .pc_centering_text {
    max-width: 650px;
  }
}
@media (min-width: 992px) {
  .pc_centering_text {
    margin: 5rem auto;
  }
}
@media (min-width: 768px) {
  .pc_centering_text p {
    text-align: center;
  }
}
/*
  リキッド飾り
===================================================== */
/* カラム自体の設定 */
.blue_liquid, .yellow_liquid, .green_liquid, .orange_liquid {
  position: relative;
  z-index: 1;
  /* 1140px以下の時、はみ出した分を非表示にする */
  overflow: hidden;
  /* 上下中央揃え（親がGridなら不要ですが、念のため） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
}
@media (min-width: 768px) {
  .blue_liquid, .yellow_liquid, .green_liquid, .orange_liquid {
    min-height: 350px;
  }
}
/* 背景画像の配置 */
.blue_liquid::after {
  content: "";
  position: absolute;
  width: 426px;
  height: 276px;
  background: url("../images/common/liquid_blue.svg") no-repeat center right / contain;
  /* 基準の位置 */
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* これは固定して動かさない */
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  /* アニメーションを指定 */
  animation: floating_top 3s ease-in-out infinite;
}
.yellow_liquid::after {
  content: "";
  position: absolute;
  width: 426px;
  height: 276px;
  background: url("../images/common/liquid_yellow.svg") no-repeat center right / contain;
  /* 基準の位置 */
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* これは固定して動かさない */
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  /* アニメーションを指定 */
  animation: floating_top 3.5s ease-in-out infinite;
}
.green_liquid::after {
  content: "";
  position: absolute;
  width: 426px;
  height: 276px;
  background: url("../images/common/liquid_green.svg") no-repeat center right / contain;
  /* 基準の位置 */
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* これは固定して動かさない */
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  /* アニメーションを指定 */
  animation: floating_top 3s ease-in-out infinite;
}
.orange_liquid::after {
  content: "";
  position: absolute;
  width: 426px;
  height: 276px;
  background: url("../images/common/liquid_orange.svg") no-repeat center right / contain;
  /* 基準の位置 */
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* これは固定して動かさない */
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  /* アニメーションを指定 */
  animation: floating_top 3.5s ease-in-out infinite;
}
@keyframes floating_top {
  0% {
    top: 50%; /* スタート位置 */
  }
  50% {
    top: 45%; /* 2%分（またはpxで -15px など）上に浮かせる */
  }
  100% {
    top: 50%; /* 戻る */
  }
}
/* 画面幅が1140pxより大きい時 */
@media (min-width: 1141px) {
  .blue_liquid, .yellow_liquid, .green_liquid, .orange_liquid {
    /* コンテナの外側へ画像を出したいのでoverflowを解除 */
    overflow: visible;
  }
  .blue_liquid::after, .yellow_liquid::after, .green_liquid::after, .orange_liquid::after {
    /* 右端からさらにはみ出させる調整 */
    right: -100px;
  }
  .orange_liquid::after {
    left: -100px;
  }
}
/* スマホ等、非常に狭い画面での調整 */
@media (max-width: 767px) {
  .blue_liquid::after, .yellow_liquid::after, .green_liquid::after, .orange_liquid::after {
    width: 200px; /* 小さくする */
    right: -20px;
    opacity: 0.4; /* 文字を読みやすくするため薄く */
  }
}
.txt_wrap {
  line-height: 1.8;
}
.white_back {
  position: relative; /* 背景の基準点 */
  z-index: 0;
}
.bg_BluYlw {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  animation: fuwafuwa 10s ease-in-out infinite;
  background-image: /* 1. 【追加】上用の白グラデ（上から下へ白→透明） */ linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 200px), /* 2. 下用の白グラデ（下から上へ白→透明） */ linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 200px), /* 3. liquid画像（青） */ url("../images/common/liquid_blue2.svg"), /* 4. liquid画像（黄） */ url("../images/common/liquid_yellow.svg");
  /* グラデはリピートなし、画像は縦にリピート */
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
  /* グラデの高さ（200px）と、画像の間隔（800px）を指定 */
  background-size: 100% 200px, 100% 200px, 426px 1200px, 426px 1200px;
  /* 配置：1枚目は上端、2枚目は下端、画像は交互に */
  background-position:
    left top, /* 上の白グラデ */ left bottom, /* 下の白グラデ */ right -150px top 10%, left -150px top 60%;
  opacity: 0.5;
}
/* ふわふわ動く魔法の指示 */
@keyframes fuwafuwa {
  0%, 100% {
    /* 最初の位置（現在の指定位置） */
    transform: translateY(0) translateX(0);
  }
  33% {
    /* 少し右下にずらす */
    transform: translateY(25px) translateX(0);
  }
  66% {
    /* 少し左上にずらす */
    transform: translateY(-10px) translateX(0);
  }
}
/*
  背景設定
===================================================== */
/* [ ▼ 緑背景 ] ---------- */
.green_back {
  background: var(--lightgreen);
}
.green_back_wave {
  position: relative;
  background: var(--lightgreen);
  margin-top: 0;
  padding-top: 5rem;
  padding-bottom: calc(5rem + 19px);
}
@media (min-width: 768px) {
  .green_back_wave {
    padding-bottom: calc(5rem + 57px);
  }
}
.green_back_wave::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 0;
  width: 100%;
  height: 19px;
  background-image: url("../images/common/wave_lightgreen.svg");
  background-repeat: repeat-x;
  background-size: 182px 19px;
  z-index: 10;
}
@media (min-width: 768px) {
  .green_back_wave::before {
    top: -57px;
    height: 57px;
    background-size: 547px 57px;
  }
}
.green_back_wave .container:last-child {
  margin-bottom: 50px;
}
/* [ ▼ 白背景 ] ---------- */
.white_back {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background: #fff;
}
.white_back_wave {
  position: relative;
  background: #fff;
  margin-top: 0;
  padding-top: 5rem;
  padding-bottom: calc(5rem + 19px);
}
@media (min-width: 768px) {
  .white_back_wave {
    padding-bottom: calc(5rem + 57px);
  }
}
.white_back_wave::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 0;
  width: 100%;
  height: 19px;
  background-image: url("../images/common/wave_white.svg");
  background-repeat: repeat-x;
  background-size: 182px 19px;
  z-index: 10;
}
@media (min-width: 768px) {
  .white_back_wave::before {
    top: -57px;
    height: 57px;
    background-size: 547px 57px;
  }
}
.white_back_wave .container:last-child {
  margin-bottom: 50px;
}
/* [ ▼ 黄色背景 ] ---------- */
.yellow_back {
  background: #fffcd9;
}
.yellow_back_wave {
  position: relative;
  background: #fffcd9;
  margin-top: 0;
  padding-top: 5rem;
  padding-bottom: calc(5rem + 19px);
}
@media (min-width: 768px) {
  .yellow_back_wave {
    padding-bottom: calc(5rem + 57px);
  }
}
.yellow_back_wave::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 0;
  width: 100%;
  height: 19px;
  background-image: url("../images/common/wave_yellow.svg");
  background-repeat: repeat-x;
  background-size: 182px 19px;
  z-index: 10;
}
@media (min-width: 768px) {
  .yellow_back_wave::before {
    top: -57px;
    height: 57px;
    background-size: 547px 57px;
  }
}
/* 右寄せにするための親要素 */
.btn_wrapper {
  display: flex;
  justify-content: flex-end; /* 右側に寄せる */
  margin-top: 20px;
}
/*
  ボタン
===================================================== */
/* [ ▼ 詳しく見るボタン ] ---------- */
/* 右寄せの指定 */
.btn_wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
/* ボタン本体：背景黒・文字白・カプセル型 */
.btn_more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #000;
  color: #fff;
  padding: 1rem 3rem;
  border-radius: 99px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  transition: .3s ease;
}
@media (min-width: 768px) {
  .btn_more {
    padding: 10px 24px;
  }
}
.btn_more:hover {
  color: #fff;
  background: var(--green);
  text-decoration: none;
}
/* 矢印（＞）の部分 */
.arrow_only {
  display: inline-block;
  width: 7px; /* 矢印の幅 */
  height: 7px; /* 矢印の高さ */
  border-top: 2px solid #fff; /* 矢印の太さと色 */
  border-right: 2px solid #fff; /* 矢印の太さと色 */
  transform: rotate(45deg); /* 45度回転させて「＞」にする */
  transition: transform 0.3s ease;
  margin-left: 4px;
}
.btn_more:hover .arrow_only {
  /* ホバー時に少し右に跳ねるような動き */
  transform: translateX(4px) rotate(45deg);
}
/* ボタン共通設定 */
.btn_nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border: 2px solid #000;
  border-radius: 15px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.888rem;
  transition: 0.3s;
}
.btn_nav:hover {
  color: #fff;
  opacity: 0.8;
}
/* 個別の背景色 */
.btn_contact {
  background-color: #4fc5e0;
}
.btn_entry {
  background-color: #ff9d00;
}
.btn_line {
  background-color: #6bd1b8;
}
.btn_contact:hover, .btn_entry:hover, .btn_line:hover {
  background-color: var(--green);
}
/*
  背景液状
===================================================== */
.liquid_fade_area {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  /* ゴールの状態にしておく */
  --r-x: 0px;
  --r-opacity: 1;
  --l-x: 0px;
  --l-opacity: 1;
}
/* 疑似要素で画像を配置（初期状態はGSAPで制御するので、位置固定のみ） */
.liquid_fade_area::before, .liquid_fade_area::after {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}
/* 右上 */
.liquid_fade_area::before {
  top: 0;
  right: 0;
  width: 512px;
  height: 621px;
  aspect-ratio: 512 / 621;
  background-image: url("../images/common/common_liquid_R.png");
  opacity: var(--r-opacity);
  transform: translateX(var(--r-x));
}
/* 左下 */
.liquid_fade_area::after {
  top: 300px;
  left: 0;
  width: 507px;
  height: 673px;
  aspect-ratio: 507 / 673;
  background-image: url("../images/common/common_liquid_L.png");
  opacity: var(--l-opacity);
  transform: translateX(var(--l-x));
}
/* [ ▼ キャッチ文専用 ] ---------- */
.liquid_fade_area:has(.contents_catch) {
  min-height: 500px;
  position: relative;
  z-index: 0;
  display: block;
}
.liquid_fade_area:has(.contents_catch)::before {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  max-width: 402px;
  height: auto;
  z-index: 1;
  display: block;
  visibility: visible;
}
.liquid_fade_area:has(.contents_catch)::after {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  max-width: 366px;
  height: auto;
  z-index: 1;
  display: block;
  visibility: visible;
}
/*
  要素設定
===================================================== */
/* [ ▼ 画像レスポンシブ ] ---------- */
.img_fluid {
  max-width: 100%;
  height: auto;
}
/* [ ▼ 注意書き ] ---------- */
.caution {
  font-size: .85em;
}
/* [ ▼ マージン設定 ] ---------- */
.m_b_1 {
  margin-bottom: 1rem;
}
/* [ ▼ 順番入れ替え ] ---------- */
.order_1 {
  order: 1;
}
.order_2 {
  order: 2;
}
@media screen and (max-width: 767px) {
  .order_1 {
    order: 2;
  }
  .order_2 {
    order: 1;
  }
}
/* [ ▼ 下からふわっと出るアニメーション ] ---------- */
.reveal_up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s ease-out, transform 0.3s ease-out;
}
/* GSAPによってこのクラスがつくと動き出す */
.reveal_up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/*
  各デバイス設定
===================================================== */
/* [ ▼ スマホのみ非表示 ] ---------- */
@media (max-width: 767px) {
  .hideSp {
    display: none;
  }
}
/* [ ▼ タブレットのみ非表示 ] ---------- */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hideTab {
    display: none;
  }
}
/* [ ▼ パソコンのみ非表示 ] ---------- */
@media (min-width: 992px) {
  .hidePc {
    display: none;
  }
}
/* [ ▼ スマホミニのみ改行させる ] ---------- */
@media (max-width: 379px) {
  .brSpMini::before {
    content: "\A";
    white-space: pre;
  }
}
/* [ ▼ スマホのみ改行させる ] ---------- */
@media (max-width: 767px) {
  .brSp::before {
    content: "\A";
    white-space: pre;
  }
}
/* [ ▼ タブレットのみ改行させる ] ---------- */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .brTab::before {
    content: "\A";
    white-space: pre;
  }
}
/* [ ▼ パソコンのみ改行させる ] ---------- */
@media (min-width: 992px) {
  .brPc::before {
    content: "\A";
    white-space: pre;
  }
}
/*
  画像表示アニメーション
===================================================== */
.show_img_mask {
  position: relative;
  overflow: hidden;
  border: 2px solid #000;
}
.show_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 2;
  pointer-events: none;
}
.img_mask {
  position: relative;
  z-index: 1;
  display: block;
  filter: brightness(0);
  transform: scale(1.05);
  transition: filter 0.3s;
}
/*
  動画
===================================================== */
.movie_box {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 1rem auto 0;
  border: 2px solid #000;
  box-sizing: border-box;
}
.movie_box::after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  z-index: 100;
  background-image: url("../images/common/play.svg");
  background-size: contain;
  pointer-events: none;
}
@media (min-width: 992px) {
  .movie_box::after {
    width: 100px;
    height: 100px;
  }
}
.movie_box:hover::after {
  cursor: pointer;
}
.movie_box img {
  width: 100%;
  height: auto;
  transition: .4s ease;
  filter: brightness(60%);
  opacity: .9;
}
.movie_box img:hover {
  cursor: pointer;
  filter: none;
  opacity: 1;
}
.ed-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  z-index: 9999;
}
div#modalOverlay {
  width: 100%;
  height: 100%;
  display: flex;
  cursor: pointer;
}
.ed-closeModal {
  position: absolute;
  top: -35px;
  right: 5px;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.5;
}
.ed-closeModal::before, .ed-closeModal::after {
  content: "";
  width: 35px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  transform-origin: top left;
}
.ed-closeModal::before {
  left: 0;
}
.ed-closeModal::after {
  right: 0;
  transform: rotate(-45deg);
  transform-origin: top right;
}
.modalContent {
  width: 100%;
  max-width: 800px;
  margin: auto;
  position: relative;
}
.video_int {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  filter: drop-shadow(0px 2px 5px #313131);
}
.video iframe, .video_int iframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
/* ===============================================================

  ヘッダー

=============================================================== */
/* [ ▼ ナビゲーション ] --------------------------------------- */
/* --- 0. 基本設定 & 変数管理 --- */ :root {
  --header-height: 90px;
  --sns-nav-width: 144px;
  --main-green: #00a53d;
  --sub-gold: #846a3a;
}
/* タブレットサイズ (768px 〜 1199px) 用の変数 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  :root {
    --header-height: 177px;
  }
}
header * {
  box-sizing: border-box;
}
header ul, header li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
header li::before, header li::after {
  content: none !important;
}
/* --- 1. ヘッダー本体（常時固定） --- */
header.js_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999 !important;
  background: #fff;
  transition: all 0.4s ease;
  box-shadow: none;
  pointer-events: auto;
}
/* スクロール時の可変設定（PC用） */
header.js_header.is_scrolled {
  --header-height: 100px;
  padding: 10px 0;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}
/* 768px 〜 1199px 限定のヘッダー固定設定 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  header.js_header, header.js_header.is_scrolled {
    height: 145px !important;
    --header-height: 177px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
}
/* --- 2. メインナビゲーション構造 --- */
nav.g_nav {
  position: relative;
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: height 0.4s ease;
}
/* ロゴ配置 */
nav.g_nav .site_logo {
  position: absolute !important;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
nav.g_nav .site_logo h1 {
  display: flex !important;
  flex-direction: column;
  line-height: 1.1;
}
nav.g_nav .site_logo img {
  width: 300px !important;
  height: auto !important;
  transition: width 0.4s ease;
}
header.is_scrolled .site_logo img {
  width: 220px !important;
}
nav.g_nav .site_logo span {
  font-size: 1rem;
  font-weight: bold;
  margin-top: 8px;
  color: #000;
}
/* メインメニュー */
nav.g_nav > ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-right: calc(var(--sns-nav-width) + 0px);
  overflow: visible !important;
}
@media screen and (min-width: 1200px) and (max-width: 1380px) {
  nav.g_nav > ul {
    padding-right: calc(var(--sns-nav-width) + 0px)
  }
}
nav.g_nav > ul > li:not(.site_logo) {
  position: relative;
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  transition: height 0.4s ease;
}
@media screen and (min-width: 1200px) and (max-width: 1450px) {
  nav.g_nav > ul > li:not(.site_logo) {
    padding: 0 5px;
  }
}
nav.g_nav > ul > li > a {
  color: var(--main-green);
  font-weight: 800;
  text-decoration: none;
  font-size: 1.1rem;
}
@media screen and (min-width: 1200px) and (max-width: 1450px) {
  nav.g_nav > ul > li > a {
    padding: 0 5px;
    font-size: .8em;
  }
}
/* --- 3. 特殊ボタン --- */
.g_nav_entry a {
  background: var(--main-green);
  color: #fff !important;
  padding: 6px 30px !important;
  border-radius: 50vh;
}
.g_nav_corporate a {
  border: 1.5px solid var(--sub-gold);
  color: #3a342c !important;
  padding: 8px 20px !important;
  border-radius: 50vh;
  font-size: 0.8em !important;
  transition: all 0.3s;
  background: transparent;
}
@media screen and (min-width: 1200px) and (max-width: 1450px) {
  .g_nav_corporate a {
    font-size: .7em !important;
  }
}
.g_nav_corporate a:hover {
  background: #e1d7c3;
}
/* --- 4. サブメニューデザイン（PC / タブレット共通） --- */
.sub_menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  overflow: visible !important;
  z-index: 99999;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
nav.g_nav ul li.has_sub:hover > .sub_menu {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
.sub_menu_inner {
  background-color: rgba(0, 165, 61, 0.95) !important;
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  padding: 15px 0 !important;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.sub_menu ul {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 10px 40px !important;
  width: 100%;
  max-width: 1200px;
  padding: 0 40px;
}
.sub_menu a {
  display: flex !important;
  align-items: center;
  height: 45px !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 15px !important;
  text-decoration: none;
  white-space: nowrap;
}
.sub_menu a span {
  display: inline-block !important;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff !important;
  border-right: 2px solid #fff !important;
  transform: rotate(45deg);
  margin-right: 12px;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}
/* --- 4-1. PCサイズ (1200px以上) の判定強化 --- */
@media screen and (min-width: 1200px) {
  nav.g_nav > ul > li.has_sub {
    position: static !important;
    height: 90px !important;
  }
  header.js_header.is_scrolled nav.g_nav > ul > li.has_sub {
    height: 100px !important;
  }
  .sub_menu {
    top: 90px !important;
    padding-top: 10px !important;
    margin-top: -10px !important;
  }
  header.js_header.is_scrolled .sub_menu {
    top: 90px !important;
  }
}
/* --- 4-2. タブレットサイズ (768px 〜 1199px) の完全設定 --- */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* ロゴの横並び復元 */
  nav.g_nav .site_logo {
    top: 15px !important;
    left: 50%;
    transform: translateX(-50%);
  }
  nav.g_nav .site_logo h1 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px;
  }
  nav.g_nav .site_logo span {
    margin-top: 5px !important;
    white-space: nowrap;
  }
  /* メニュー配置の復元 */
  nav.g_nav > ul {
    justify-content: center !important;
    padding-right: 0;
  }
  nav.g_nav > ul > li:not(.site_logo) {
    margin-top: 15px !important;
    height: 60px !important;
  }
  /* 判定エリアと隙間ゼロ設定の統合 */
  nav.g_nav > ul > li.has_sub {
    height: 145px !important;
    display: flex !important;
    align-items: center !important;
    position: static !important;
  }
  .sub_menu {
    top: 144px !important;
    padding-top: 15px !important;
    margin-top: -15px !important;
  }
  .sub_menu_inner {
    padding: 15px 20px !important;
  }
}
/* --- 5. SNSナビ --- */
.sns_nav {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--main-green);
  padding: 4px 15px 4px 30px;
  border-bottom-left-radius: 40px;
  z-index: 1100;
  transition: transform 0.4s ease;
  transform-origin: right top;
}
header.js_header.is_scrolled .sns_nav {
  transform: scale(0.85);
}
.sns_nav ul {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sns_nav img {
  width: 18px !important;
  height: auto;
}
/* ===============================================================
   7. スマホ・タブレット用 (991px以下) アコーディオン & ドロワー
=============================================================== */
@media screen and (max-width: 991px) {
  /* 不要なPCパーツを隠す */
  .sns_nav {
    display: none !important;
  }
  /* --- ヘッダー・ロゴ調整 --- */
  header.js_header {
    height: 70px !important;
    background: #fff !important;
    padding: 0 !important;
  }
  .sp_logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }
  .sp_logo img {
    height: 25px;
    width: auto;
  }
  .sp_logo span {
    margin-left: 1em;
    font-size: .8em;
  }
  /* --- ハンバーガーボタン (js_hamburger) --- */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background: var(--main-green);
    z-index: 10001;
    cursor: pointer;
    gap: 7px;
  }
  .hamburger span {
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    transition: 0.3s ease;
  }
  /* JSの .is-active と連動した変形 */
  .hamburger.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
  /* --- ドロワーメニュー (js_drawer) --- */
  .drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, rgba(53, 188, 98, 1), rgba(194, 218, 110, 1));
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 80px 0 100px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
  /* JSの .is-active で出現 */
  .drawer.is-active {
    transform: translateY(0);
  }
  /* メニューリスト全体の横揺れをリセット */
  nav.g_nav, nav.g_nav > ul, nav.g_nav > ul > li {
    transform: none !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* ロゴ配置 */
  nav.g_nav .site_logo {
    position: absolute !important;
    left: 20px;
    top: -70px;
    transform: translateY(0%);
    z-index: 10;
    border-bottom: none !important;
  }
  nav.g_nav .site_logo img {
    width: 220px !important;
  }
  nav.g_nav .site_logo span {
    font-size: 0.8rem;
  }
  /* --- ナビゲーション構造の縦並び化 --- */
  nav.g_nav {
    height: auto !important;
    display: block !important;
  }
  nav.g_nav > ul {
    flex-direction: column !important;
    padding: 0 20px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  nav.g_nav > ul > li {
    width: 100%;
    height: auto !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: block !important;
  }
  nav.g_nav > ul > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px !important;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
  }
  /* アコーディオンの矢印アイコン */
  .has_sub > a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    transition: 0.3s;
    margin-right: 5px;
  }
  /* JSの .is-open と連動して回転 */
  .has_sub.is-open > a::after {
    transform: rotate(-45deg);
  }
  /* --- サブメニュー：タップ時の横ズレ・浮遊を完全に封印 --- */
  .sub_menu {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
    overflow: hidden;
    /* 基本配置のリセット */
    position: static !important;
    width: 100% !important;
    left: auto !important;
    transform: none !important; /* 横移動を解除 */
    /* 装飾 */
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
  }
  /* 重要：タップ中や開いている時にPC版の「中央寄せ」が
   復活しないように、あらゆる状態のtransformを強制上書き
*/
  nav.g_nav ul li.has_sub:hover > .sub_menu, .has_sub.is-open .sub_menu, .sub_menu:active, .sub_menu:focus {
    transform: none !important; /* 絶対に横に動かさない */
    left: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* JSの .is-open で表示切り替え */
  .has_sub.is-open .sub_menu {
    grid-template-rows: 1fr; /* 中身に合わせて「にょろっと」広がる */
  }
  .sub_menu_inner {
    min-height: 0;
    background: transparent !important;
    width: 100% !important;
    padding: 0 15px !important; /* 上下パディングは0にしておくのがコツ */
    left: 0 !important;
    transform: none !important;
  }
  .sub_menu ul {
    /* PC版の横並び(flex)が干渉しないよう、最初からblockで縦に固定 */
    display: block !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .sub_menu li {
    /* 各項目が確実に1行を占めるように設定 */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }
  .sub_menu a {
    /* PC版の高さ指定などをリセットし、スマホ用のクリック領域を確保 */
    display: block !important;
    height: auto !important;
    padding: 15px 10px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem !important;
  }
  .sub_menu ul li:last-child a {
    border-bottom: none;
  }
  .sub_menu a span {
    border-color: #fff !important;
  }
  /* --- ロゴ・ボタン類のSP微調整 --- */
  .drawer .site_logo {
    position: static !important;
    transform: none !important;
    height: 70px;
  }
  .drawer .site_logo span {
    color: #fff !important;
  }
  .g_nav_entry a {
    display: flex !important;
    justify-content: center !important;
  }
  .g_nav_corporate a {
    display: flex !important;
    justify-content: center !important;
    border: none;
    color: #3a342c !important;
    padding: 8px 20px;
    border-radius: 50vh;
    font-size: 1rem !important;
    transition: all 0.3s;
    background: #e1d7c3;
  }
  .g_nav_entry, .g_nav_corporate {
    margin: 15px 0 0 !important;
    border-bottom: none !important;
  }
  .g_nav_corporate {
    margin-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
  }
}
/* ===============================================================

  トップページ

=============================================================== */
/*
  メインビジュアル
===================================================== */
/* [ ▼ 外枠 ] ---------- */
.main_visual_area {
  position: relative;
  /* 横幅は 85% だが、高さが 80vh を超える場合はそれ以上横に広がらないようにする */
  /* 16/9 = 1.777... なので、80vh * 1.777 ≒ 142.2vh */
  width: min(85%, 80vh * 1.777);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 5px solid #000;
  outline: none;
  box-sizing: border-box;
}
@media screen and (max-width: 991px) {
  .main_visual_area {
    margin-top: calc(70px + 2rem);
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .main_visual_area {
    margin-top: 165px;
  }
}
@media screen and (min-width: 1200px) {
  .main_visual_area {
    margin-top: 165px;
  }
}
.main_visual_area.main_visual_back {
  background: #f5fdf3;
}
.main_visual_area.main_visual_back::before {
  background-image:
    url("../images/top/YOSHIDA_SPIRIT.svg"), url("../images/top/YOSHIDA_SPIRIT.svg");
}
/* [ ▼ 人物配置 ] ---------- */
.main_person {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 97%; /* エリアに対してどのくらいのサイズで出すか（任意） */
  z-index: 10; /* 四隅のアイテム(z-index: 10)より小さい値 */
  opacity: 0; /* 最初は隠しておく */
  animation: fade_in_person 1.5s ease-out 0.8s forwards; /* 少し遅れて表示 */
}
.main_person img {
  width: 100%;
  height: auto;
  display: block;
}
/* [ ▼ 液状アイテム ] ---------- */
.main_liquid {
  position: absolute;
  opacity: 0;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: forwards;
  z-index: 10;
}
/* 画像が親の幅を超えないようにし、比率を保つ */
.main_liquid img {
  width: 100%;
  height: auto;
  display: block;
}
/* 人物がふわっと出てくるアニメーション */
@keyframes fade_in_person {
  0% {
    opacity: 0;
    transform: translateY(20px); /* 下からスッと出る */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.main_tl {
  width: calc(280px / 3);
  animation-name: show_tl;
  z-index: 5;
}
.main_tr {
  width: calc(479px / 3);
  animation-name: show_tr;
  z-index: 5;
}
.main_bl {
  width: calc(489px / 3);
  animation-name: show_bl;
  z-index: 15;
}
.main_br {
  width: calc(478px / 3);
  animation-name: show_br;
  z-index: 15;
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .main_tl {
    width: calc(280px / 2);
  }
  .main_tr {
    width: calc(479px / 2);
  }
  .main_bl {
    width: calc(489px / 2);
  }
  .main_br {
    width: calc(478px / 2);
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .main_tl {
    width: calc(280px / 1.4);
  }
  .main_tr {
    width: calc(479px / 1.4);
  }
  .main_bl {
    width: calc(489px / 1.4);
  }
  .main_br {
    width: calc(478px / 1.4);
  }
}
@media (min-width: 992px) {
  .main_tl {
    width: 280px;
  }
  .main_tr {
    width: 479px;
  }
  .main_bl {
    width: 489px;
  }
  .main_br {
    width: 478px;
  }
}
/* 左上 */
@keyframes show_tl {
  0% {
    top: -20px;
    left: -20px;
    opacity: 0;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}
/* 右上 */
@keyframes show_tr {
  0% {
    top: -20px;
    right: -20px;
    opacity: 0;
  }
  100% {
    top: 0;
    right: 0;
    opacity: 1;
  }
}
/* 左下：bottom指定が効かない場合は top: 100% から逆算 */
@keyframes show_bl {
  0% {
    bottom: -20px;
    left: -20px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
/* 右下 */
@keyframes show_br {
  0% {
    bottom: -20px;
    right: -20px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    right: 0;
    opacity: 1;
  }
}
/* [ ▼ テキストアイテム ] ---------- */
.main_txt_inner_top {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%; /* テキストの大きさ */
  z-index: 100;
  opacity: 0;
  animation: fade_in_txt_L 0.6s ease-out 1.2s forwards; /* 図形が出揃った後に表示 */
}
.main_txt_inner_bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%; /* テキストの大きさ */
  z-index: 100;
  opacity: 0;
  animation: fade_in_txt_R 0.6s ease-out 1.2s forwards; /* 図形が出揃った後に表示 */
}
.main_txt_inner img {
  width: 100%;
  height: auto;
}
/* テキストのアニメーション（左からスッと出る） */
@keyframes fade_in_txt_L {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* （右から） */
@keyframes fade_in_txt_R {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* [ ▼ 図形アイテム ] ---------- */
/* 共通アニメーション */
@keyframes floating {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(20px, -20px) rotate(15deg);
  }
  66% {
    transform: translate(-15px, 15px) rotate(-10deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
/* 図形の共通設定 */
.float-shape {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  animation: floating 10s ease-in-out infinite;
  opacity: 0.5;
}
/* --- 形と色の定義 --- */
.c-g {
  width: 10px;
  height: 10px;
  border: 2px solid #17a45f;
  border-radius: 50%;
}
@media (min-width: 992px) {
  .c-g {
    width: 20px;
    height: 20px;
  }
}
.c-w {
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
.p-g {
  width: 12px;
  height: 12px;
  position: relative;
}
@media (min-width: 992px) {
  .p-g {
    width: 22px;
    height: 22px;
  }
}
.p-g::before, .p-g::after, .p-w::before, .p-w::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.p-g {
  color: #17a45f;
}
.p-w {
  width: 22px;
  height: 22px;
  color: #ffffff;
}
.p-g::before, .p-w::before {
  top: 45%;
  left: 0;
  width: 100%;
  height: 2px;
}
.p-g::after, .p-w::after {
  top: 0;
  left: 45%;
  width: 2px;
  height: 100%;
}
/* --- 20個の配置（中央を避けて四隅寄り） --- */
/* 左上エリア */
.s1 {
  top: 5%;
  left: 5%;
  animation-delay: 0s;
  transform: scale(1.2);
}
.s2 {
  top: 15%;
  left: 12%;
  animation-delay: -2s;
  transform: scale(0.8);
}
.s3 {
  top: 25%;
  left: 3%;
  animation-delay: -4s;
  transform: scale(1.0);
}
.s4 {
  top: 35%;
  left: 5%;
  animation-delay: -1s;
  transform: scale(0.9);
}
.s5 {
  top: 8%;
  left: 25%;
  animation-delay: -6s;
  transform: scale(1.1);
}
/* 右上エリア */
.s6 {
  top: 5%;
  right: 5%;
  animation-delay: -3s;
  transform: scale(0.7);
}
.s7 {
  top: 18%;
  right: 15%;
  animation-delay: -5s;
  transform: scale(1.2);
}
.s8 {
  top: 30%;
  right: 8%;
  animation-delay: -7s;
  transform: scale(1.0);
}
.s9 {
  top: 10%;
  right: 18%;
  animation-delay: -1.5s;
  transform: scale(0.8);
}
@media (min-width: 992px) {
  .s9 {
    top: 10%;
    right: 28%;
  }
}
.s10 {
  top: 40%;
  right: 4%;
  animation-delay: -8s;
  transform: scale(1.1);
}
/* 左下エリア */
.s11 {
  bottom: 5%;
  left: 8%;
  animation-delay: -2.5s;
  transform: scale(1.3);
}
.s12 {
  bottom: 15%;
  left: 20%;
  animation-delay: -4.5s;
  transform: scale(0.9);
}
.s13 {
  bottom: 25%;
  left: 4%;
  animation-delay: -9s;
  transform: scale(1.0);
}
.s14 {
  bottom: 35%;
  left: 12%;
  animation-delay: -3.5s;
  transform: scale(0.7);
}
.s15 {
  bottom: 10%;
  left: 28%;
  animation-delay: -11s;
  transform: scale(1.2);
}
/* 右下エリア */
.s16 {
  bottom: 8%;
  right: 12%;
  animation-delay: -5.5s;
  transform: scale(1.1);
}
.s17 {
  bottom: 20%;
  right: 3%;
  animation-delay: -0.5s;
  transform: scale(0.8);
}
.s18 {
  bottom: 30%;
  right: 20%;
  animation-delay: -7.5s;
  transform: scale(1.0);
}
.s19 {
  bottom: 42%;
  right: 10%;
  animation-delay: -2.2s;
  transform: scale(1.3);
}
.s20 {
  bottom: 15%;
  right: 30%;
  animation-delay: -6.8s;
  transform: scale(0.9);
}
/* --- トップ背景 --- */
.main_visual_area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 460px 128px;
  background-position: 0 0, 230px 64px;
  background-repeat: repeat;
  opacity: 1;
  z-index: 4;
}
/* [ ▼ 文字スクロール ] ---------- */
.marquee_area {
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
  line-height: 0.5;
}
.marquee_inner {
  display: flex;
  width: fit-content;
  animation: marquee-loop 20s linear infinite;
}
/* 各画像セット */
.marquee_content {
  display: flex;
  flex-shrink: 0; /* 幅が縮まないように固定 */
}
.marquee_content img {
  height: 28px; /* 文字画像の高さ */
  margin-right: 15px; /* 文字同士の隙間 */
}
@keyframes marquee-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 1つ目のセットが完全に左へ消えた瞬間、0%にパッと戻る */
    transform: translateX(-50%);
  }
}
/*
  新着情報
===================================================== */
.news_area {
  padding: 2rem;
  border: 2px solid #000;
  border-radius: 30px;
  background: var(--lightgreen);
}
@media screen and (min-width: 768px) {
  .news_area {
    padding: 2rem 3rem 1rem;
  }
}
@media screen and (min-width: 992px) {
  .news_area {
    padding: 2rem 3rem 1rem;
  }
}
@media screen and (min-width: 1200px) {
  .news_area {
    padding: 3rem 4rem 2rem;
  }
}
@media (min-width: 1440px) {
  .news_area {
    padding: 4rem 5rem 3rem;
  }
}
@media (min-width: 768px) {
  #news_recruit.liquid_fade_area {
    margin-bottom: 10rem;
  }
}
@media screen and (max-width: 767px) {
  #news_recruit.liquid_fade_area::before {
    width: 200px;
    height: auto;
  }
  #news_recruit.liquid_fade_area::after {
    top: 0;
    width: 200px;
    height: auto;
  }
}
ul#news_list {
  list-style: none;
  width: 100%;
  padding: 0;
}
ul#news_list li {
  margin: 0;
  padding: 1em .5em;
  border-bottom: 1px solid #000;
  display: none; /* 初期は非表示。JSで最初の5つを表示 */
}
ul#news_list li:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-top: 0;
  border-bottom: 0;
}
ul#news_list li .news_contents {
  width: 100%;
}
@media (min-width: 768px) {
  ul#news_list li .news_contents {
    display: flex;
    width: 100%;
  }
}
ul#news_list li p.news_title {
  font-size: 1.15rem;
  font-weight: 800;
}
ul#news_list li p.news_title a {
  color: var(--green);
  text-decoration: underline;
}
ul#news_list li p.date {
  display: inline-block;
  width: 5rem;
  margin-right: 1rem;
  font-size: .888rem;
  font-weight: bold;
  color: #000;
}
.latest {
  display: inline-block;
  width: 100%;
  padding: .2rem;
  text-align: center;
  font-weight: bold;
  font-size: .85em;
  background: #fff33f;
  color: #595757;
}
ul#news_list li p.genre {
  display: inline-block;
  width: 5rem;
  margin-right: 1rem;
  text-align: center;
}
ul#news_list li p.genre span {
  display: inline-block;
  width: 100%;
  padding: .2em;
  font-weight: bold;
  font-size: .777rem;
  border-radius: 2px;
  color: #fff;
}
@media screen and (max-width: 767px) {
  ul#news_list li .newsText_box {
    display: block;
    margin-top: 1rem;
  }
}
@media (min-width: 768px) {
  ul#news_list li .newsText_box {
    display: inline-block;
    flex: 1;
  }
}
ul#news_list li p.news_text {
  font-size: .95em;
}
ul#news_list li p.news_text:last-of-type {
  margin-bottom: 0;
}
.loadBtn_box {
  text-align: center;
}
.news_area button {
  position: relative;
  width: 16rem;
  margin: 10px;
  padding: 10px calc(20px + 1em) 10px 20px;
  border-radius: 50vh;
  cursor: pointer;
  transition: .3s;
  color: #fff !important;
}
.news_area button#load_more {
  border: none;
  outline: none;
  background: #000;
}
.news_area button#load_more:hover {
  color: #fff;
  background: var(--green);
}
.news_area button#close {
  box-sizing: border-box;
  background: #000;
  border: none;
}
.news_area button#close:hover {
  background: var(--green);
}
/* アイコン装飾 */
.icon-plus::before {
  content: "＋";
  position: absolute;
  right: 1em;
}
.icon-close::before {
  content: "×";
  position: absolute;
  right: 1em;
}
/* ===============================================================

  ヨシダ工業について

=============================================================== */
/*
  共通
===================================================== */
@media (min-width: 768px) {
  .toplayer .txt_wrap {
    margin-top: 5rem;
  }
}
@media (min-width: 768px) {
  #about .container.align-items_center .main_image img {
    max-width: 410px;
  }
}
/*
  オフィスツアー
===================================================== */
#recruit.toplayer .officetour {
  margin-top: 5rem;
  display: flow-root;
}
.h3_full_bg {
  position: relative;
  margin: 0 0 3rem;
  padding: 15px 0;
  padding-left: 15px;
  color: #fff;
  z-index: 1;
  width: calc(100% - 30px);
  margin-left: 0;
  margin-right: auto;
}
/* 1200px未満〜992px以上の画面用 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .h3_full_bg {
    width: auto;
    margin-right: calc((100% - 960px) / 2 + 15px);
    padding-left: calc((100% - 960px) / 2 + 15px);
  }
}
@media (min-width: 1200px) {
  .h3_full_bg {
    width: auto;
    margin-right: calc((100% - 1140px) / 2 + 15px);
    padding-left: calc((100% - 1140px) / 2 + 15px);
  }
}
/* アニメーション用の背景レイヤー */
.h3_full_bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #35bc62;
  border-radius: 0 50vh 50vh 0;
  z-index: -1; /* テキストの背面へ */
  /* 初期状態：左端を軸にして、横幅を0にする */
  transform: scaleX(0);
  transform-origin: left;
}
/* 実際に伸びる緑の棒 */
.bg_bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #35bc62;
  border-radius: 0 50vh 50vh 0;
  z-index: -1;
  /* GSAPで動かす前の初期状態 */
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.h3_full_bg_no_move {
  margin: 0 0 3rem;
  padding: 15px 0;
  background: #35bc62;
  padding-left: calc((100% - 1140px) / 2 + 15px);
  padding-right: 0;
  border-radius: 0 50vh 50vh 0;
  color: #fff;
}
/* 1200px以上の画面用 */
.h3_full_bg_no_move {
  margin-right: calc((100% - 1140px) / 2 + 15px);
}
/* 1200px未満〜992px以上の画面用 */
@media (max-width: 1199px) {
  .h3_full_bg_no_move {
    margin-right: calc((100% - 960px) / 2 + 15px);
  }
}
@media (max-width: 767px) {
  .h3_full_bg, .h3_full_bg_no_move {
    padding-right: 2em;
  }
}
.h3_full_bg h3, .h3_full_bg_no_move h3 {
  display: flex;
  align-items: flex-start; /* 丸の位置を1行目の高さに固定 */
  margin: 0;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1.35;
}
@media (min-width: 768px) {
  .h3_full_bg h3, .h3_full_bg_no_move h3 {
    font-size: 1.9rem;
    line-height: 1;
  }
}
.h3_full_bg h3::before, .h3_full_bg_no_move h3::before {
  content: "";
  display: inline-block;
  flex-shrink: 0; /* 丸が潰れないように固定 */
  width: 1.9rem;
  height: 1.9rem;
  background-color: #fff;
  border-radius: 50%;
  margin-right: .5em;
}
/* 以降、各ブレイクポイント（768, 576）に合わせてcalcの数値を引いていく */
/* [ ▼ オフィスツアースライダー ] ---------- */
.officetour .swiper {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.officetour .infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.officetour .infinite-slider .swiper-slide {
  height: 150px !important;
  width: auto !important;
}
@media (min-width: 992px) {
  .officetour .infinite-slider .swiper-slide {
    height: 300px !important;
  }
}
.officetour .infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
  border: 2px solid #000;
  box-sizing: border-box;
}
/* [ ▼ 詳細 ] ---------- */
.officetour figure:not(:last-child) {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .officetour figure:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.officetour figure img {
  border: 2px solid #000;
  box-sizing: border-box;
}
.officetour figcaption {
  display: flex;
  align-items: flex-start; /* 丸の位置を1行目の高さに固定 */
  margin-bottom: 1rem;
  color: var(--green);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
}
.officetour figcaption::before {
  content: "";
  display: inline-block;
  flex-shrink: 0; /* 丸が潰れないように固定 */
  width: 1.9rem;
  height: 1.9rem;
  background-color: var(--green);
  border-radius: 50%;
  margin-right: .5em;
  margin-top: 0.2rem; /* 1行目の文字の高さと微調整*/
}
/* ===============================================================

  ヨシダ工業の人々

=============================================================== */
/*
  インタビュー
===================================================== */
.img_switch {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 0; /* 画像下の余計な隙間を解消 */
}
/* ホバー時の画像をあらかじめ透明にして上に重ねておく */
.img_switch .img_hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease; /* 切り替わりの速さ */
  width: 100%;
}
/* 親（aタグ）にホバーしたら、ホバー用画像を表示 */
.img_switch:hover .img_hover {
  opacity: 1;
}
/* 元の画像も少し透明度を変えたりするとよりリッチになります（お好みで） */
.img_switch:hover .img_default {
  opacity: 0.8;
}
/* [ ▼ 問い合わせボタン ] ---------- */
.contact_btn_area {
  margin-top: 2rem;
}
.contact_btn_area .col-12 {
  margin-top: 1rem;
}
/* 丸の部分 */
.contact_btn_area .circle_arrow {
  position: relative;
  display: inline-block;
  width: 24px; /* 丸のサイズ */
  height: 24px;
  background-color: var(--green); /* 丸の色 */
  border-radius: 50%; /* 正円にする */
  vertical-align: middle;
}
/* 中の「＞」の部分 */
.contact_btn_area .circle_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%; /* 真ん中より少し左に置くと綺麗に見えます */
  width: 6px; /* 矢印の太さ（長さ） */
  height: 6px; /* 矢印の太さ（長さ） */
  border-top: 1px solid #fff; /* 矢印の線の太さと色 */
  border-right: 1px solid #fff; /* 矢印の線の太さと色 */
  transform: translateY(-50%) rotate(45deg); /* 45度回転させて「＞」にする */
}
.contact_btn_area a.btn_nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 15px 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  box-sizing: border-box;
  text-decoration: none;
}
/* 矢印パーツ（●の中に＞） */
.contact_btn_area .circle_arrow {
  position: relative;
  display: inline-block;
  width: 1.888rem;
  height: 1.888rem;
  background-color: #000;
  border-radius: 50%;
}
.contact_btn_area .circle_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30%;
  width: .5rem;
  height: .5rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
/*
  チームの仕事風景
===================================================== */
#recruit.toplayer .personal_interview img {
  border: 2px solid #000;
  box-sizing: border-box;
}
@media (max-width: 575px) {
  #recruit.toplayer .personal_interview img {
    margin-bottom: 1.5rem;
  }
}
#recruit.toplayer #person iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.team_interview_btn_wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}
@media (min-width: 768px) {
  #recruit.toplayer .personal_interview img {
    margin: 100px 0 60px;
  }
}
/* チーム紹介バナーボタン */
.c-btn-team-vision {
  display: flex;
  align-items: center;
  position: relative;
  width: 812px;
  height: 150px;
  background-color: #35bc62;
  border: 2px solid #000;
  border-radius: 12px; /* お好みで調整。角丸不要なら削除 */
  text-decoration: none;
  overflow: visible; /* はみ出しを許可する */
  padding-left: 40px; /* 左寄りのテキスト位置 */
  transition: opacity 0.3s;
}
.c-btn-team-vision:hover {
  opacity: 0.9;
  background-color: #ff9d00;
  transition: 0.3s;
}
/* テキスト（背景と同じ色の光彩をつける） */
.c-btn-team-vision span {
  position: relative;
  z-index: 3; /* 画像より上に配置 */
  color: #fff;
  font-size: 2.222rem;
  font-weight: bold;
  /* 背景と同じ var(--green) の光彩で視認性を確保 */
  text-shadow:
    0 0 10px #35bc62, 0 0 10px #35bc62, 0 0 10px #35bc62;
}
.c-btn-team-vision:hover span {
  text-shadow:
    0 0 10px #ff9d00, 0 0 10px #ff9d00, 0 0 10px #ff9d00;
  transition: 0.3s;
}
/* 背景画像（右下固定） */
.c-btn-team-vision .team-image {
  position: absolute;
  z-index: 1;
  right: 1rem; /* 右の黒丸ボタンと被らないよう調整 */
  bottom: 0; /* ★胴体を下辺にピタッとくっつける */
  width: auto; /* 横幅は自動 */
  height: 220px; /* ★ボタン(150px)より高くして、上にはみ出させる */
  object-fit: contain;
  object-position: bottom; /* 画像の下側を基準にする */
  pointer-events: none;
}
/* 右側の矢印円ボタン */
.c-btn-team-vision .arrow-circle {
  position: absolute;
  z-index: 4;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background-color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 矢印（>） */
.c-btn-team-vision .arrow-circle::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
  margin-left: -4px; /* 中心位置の微調整 */
}
@media (max-width: 575px) {
  .c-btn-team-vision {
    width: 100%; /* スマホ時は横幅いっぱい */
    height: 90px;
  }
  .c-btn-team-vision .team-image {
    width: 92%; /* スマホ時は75%くらいのサイズ感に */
  }
  .c-btn-team-vision span {
    font-size: 1.5rem;
  }
  .c-btn-team-vision .arrow-circle {
    width: 36px;
    height: 36px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .c-btn-team-vision {
    width: 100%; /* スマホ時は横幅いっぱい */
    height: 120px;
  }
  .c-btn-team-vision .team-image {
    width: 95%; /* スマホ時は75%くらいのサイズ感に */
  }
  .c-btn-team-vision span {
    font-size: 1.5rem;
  }
}
/*
  動画
===================================================== */
#toplayer .movie_interview.liquid_fade_area::before {
  width: 260px;
  height: 325px;
}
#toplayer .movie_interview.liquid_fade_area::after {
  width: 272px;
  height: 347px;
}
/* ===============================================================

  下層ページ共通

=============================================================== */
/*
  トップイメージ
===================================================== */
.top_frame {
  position: relative;
  width: calc(100% - 15px);
  aspect-ratio: 1140 / 510;
  margin: 0 auto;
  border: 1px solid #000;
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 768px) {
  .top_frame {
    width: calc(100% - 60px);
    margin: 165px auto 5rem;
    border: 2px solid #000;
  }
}
.top_frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 460px 128px;
  background-position: 0 0, 230px 64px;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
  opacity: 1;
}
/* --- オレンジ系グラデーション --- */
.top_frame.orange_gradation {
  background: linear-gradient(90deg, #ffdb5a 0%, #ff9d00 100%);
}
.top_frame.orange_gradation::before {
  background-image:
    url("../about/images/YOSHIDA_SPIRIT.svg"), url("../about/images/YOSHIDA_SPIRIT.svg");
}
/* --- 緑系グラデーション --- */
.top_frame.green_gradation {
  background: linear-gradient(90deg, #c2da6e 0%, #35bc62 100%);
}
.top_frame.green_gradation::before {
  background-image:
    url("../person/images/YOSHIDA_SPIRIT.svg"), url("../person/images/YOSHIDA_SPIRIT.svg");
}
.top_frame_no_img {
  position: relative;
  width: calc(100% - 15px);
  aspect-ratio: 1140 / 200;
  margin: 0 auto;
  border: 2px solid #000;
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 768px) {
  .top_frame_no_img {
    width: calc(100% - 60px);
    aspect-ratio: 1140 / 150;
    margin: 165px auto 5rem;
  }
}
.top_frame_no_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 460px 128px;
  background-position: 0 0, 230px 64px;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
  opacity: 1;
}
/* --- 青系グラデーション --- */
.top_frame_no_img.blue_gradation {
  background: linear-gradient(90deg, #b4e9ef 0%, #4fc5e0 100%);
}
.top_frame_no_img.blue_gradation::before {
  background-image:
    url("../information/images/YOSHIDA_SPIRIT.svg"), url("../information/images/YOSHIDA_SPIRIT.svg");
}
/* 中の画像ボックス（上10%、左右20%、下20%の空間） */
.inner_image_box {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 20%;
  box-sizing: border-box;
  overflow: hidden;
}
/* 画像の初期状態：暗転＋少しズーム */
.inner_image_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0); /* 真っ暗 */
  transform: scale(1.1); /* 少し拡大 */
  display: block;
}
/* ============================================================
   共通設定（Base）：幕の動きや枠線の基本
   ============================================================ */
.show_img_mask_box {
  position: relative;
  overflow: hidden;
  border: 2px solid #000; /* 全画像共通の枠線 */
  background-color: #000; /* 読み込み前のチラつき防止 */
}
/* 幕の共通スタイル */
.show_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 2;
}
/* 画像の共通初期状態 */
.show_img_mask_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0);
  transform: scale(1.1);
}
/* ============================================================
   コンテンツごとの個別設定（Modifier）
   ============================================================ */
/* トップページ：メインビジュアル用 */
.top_frame .show_img_mask_box {
  position: absolute; /* 親(top_frame)に対して絶対配置 */
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 20%;
}
/* タイトル文字 */
.top_title {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  position: absolute;
  left: 50%;
  bottom: -5px; /* ここで「5px分」だけ枠の外へ出す */
  transform: translateX(-50%);
  margin: 0;
  font-size: 6rem;
  color: #000;
  line-height: 1; /* 余計な行間を詰める */
  white-space: nowrap;
  z-index: 2;
}
@media screen and (max-width: 575px) {
  .top_title {
    font-size: 2rem;
    bottom: -3px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .top_title {
    font-size: 3rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .top_title {
    font-size: 4rem;
  }
}
@media screen and (min-width: 992px) and (max-width: 1399px) {
  .top_title {
    font-size: 5rem;
  }
}
@media (min-width: 1400px) {
  .top_title {
    font-size: 8rem;
  }
}
/*
  ページ内リンク
===================================================== */
.page_link_list {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: center; /* 要素が4つ未満、または2行目の時に中央に寄せる */
  gap: 15px; /* ボタン同士の間隔 */
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
.page_link_list li {
  /* 4個並びを基本とし、gap分(15px*3 / 4)を引く計算 */
  width: calc((100% - 45px) / 4);
  min-width: 200px; /* スマホで小さくなりすぎないよう調整 */
}
.page_link_list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 0; /* 上下に1emのパディング */
  background: #000;
  color: #fff;
  border-radius: 50vh; /* 角丸（お好みで調整） */
  text-decoration: none;
  font-weight: bold;
  transition: .3s ease;
}
.page_link_list li a:hover {
  opacity: 0.8;
  background: var(--green);
}
/* リンクテキストの右横に1em空けて▼を表示 */
.page_link_list li a::after {
  content: "▼";
  margin-left: 1em;
  font-size: 0.8em; /* 少し小さめにすると綺麗です */
}
/* スマホ用のレスポンシブ：2列にする場合 */
@media screen and (max-width: 575px) {
  .page_link_list li {
    width: calc((100% - 15px) / 2);
  }
}
@media screen and (max-width: 767px) and (min-width: 992px) {
  .page_link_list li {
    width: calc((100% - 15px) / 3);
  }
}
/*
  キャッチ文
===================================================== */
.contents_catch {
  position: relative;
  z-index: 5;
  text-align: center;
}
@media (min-width: 768px) {
  .contents_catch .container {
    max-width: 750px;
  }
}
.catch_heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  line-height: 2.2;
  letter-spacing: .1em;
  text-align: center;
}
@media (min-width: 768px) {
  .catch_heading {
    font-size: 2rem;
  }
}
.catch_heading {
  display: inline;
  background-color: var(--green);
  padding: 0.2em 0.5em;
  /* ボックスの装飾を「行ごとに独立」させる */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.catch_text {
  margin-top: 2.5rem;
}
@media (min-width: 992px) {
  .catch_heading .brPc {
    background: none !important; /* スパン自体に背景がつくと二重になるのを防ぐ */
    padding: 0 !important;
  }
}
@media screen and (max-width: 991px) {
  .catch_heading .brPc {
    /* 前の文字との間隔を空ける */
    margin-left: .5em;
  }
}
/*
  カウンター
===================================================== */
ol.count_list {
  counter-reset: step-counter; /* カウンターをリセット */
}
/* ===============================================================

  ヨシダ工業を知る

=============================================================== */
/*
  ヨシダ工業について
===================================================== */
/* [ ▼ オフィスツアー ] ---------- */
#recruit.underlayer .officetour p {
  margin-bottom: 0;
}
/*
  ヨシダ工業の仕事
===================================================== */
/* [ ▼ 導入テキスト ] ---------- */
#recruit.underlayer .contents_catch {
  margin-top: 5rem;
}
/* [ ▼ 製品紹介 ] ---------- */
ul.product_intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 20px; /* 上下40px、左右20pxの間隔（適宜調整） */
  max-width: 1140px; /* (300px * 3) + gap分 くらいの幅に設定 */
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  ul.product_intro {
    gap: 30px;
  }
}
ul.product_intro li {
  /* PC: 3列並ぶように幅を指定 */
  /* (100% - 余白合計) / 3 */
  width: calc((100% - 40px) / 3);
  width: 300px;
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  ul.product_intro li {
    width: 100%; /* 縦1列 */
    min-width: auto;
  }
}
@media (min-width: 768px) {
  ul.product_intro li:nth-child(-n+3) {
    margin-bottom: 0;
  }
}
.image_area {
  position: relative;
  width: 100%;
  height: 267px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.image_area img {
  width: 300px; /* PC固定幅 */
  height: auto;
  display: block;
}
.badge_text {
  position: absolute;
  left: 50%; /* 横のマージン分 */
  bottom: 0;
  /* 自身の高さの半分だけ下にずらす */
  transform: translate(-50%, 50%);
  white-space: nowrap; /* 改行を禁止 */
  word-break: keep-all; /* 単語の途中でも改行させない */
  overflow: visible; /* 文字がはみ出しても表示する */
  display: inline-block;
  padding: 0.2em 1em;
  background-color: #000;
  color: #fff;
  border-radius: 50vh; /* 角丸 */
  font-size: 1.1rem;
  font-weight: bold;
  z-index: 2;
}
ul.product_intro li p {
  /* バッジが半分はみ出しているので、その分の余白を確保 */
  margin-top: 3.5rem;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  ul.product_intro li, .image_area img {
    width: 100%;
  }
  .image_area {
    height: auto; /* スマホでは画像の高さに合わせる場合 */
    /* もし高さ267pxを維持したい場合は、ここを height: 267px; にしてください */
  }
}
/* [ ▼ チャレンジリスト ] ---------- */
.challenge_contents ol.count_list {
  align-items: flex-start;
}
.challenge_contents ol.count_list li {
  list-style: none;
  position: relative;
  counter-increment: step-counter;
}
@media (max-width: 767px) {
  .challenge_contents ol.count_list li {
    margin-top: 2rem;
    padding-bottom: 2rem;
  }
}
.challenge_contents ol.count_list li::before {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 15px;
  transform: translateY(-33%);
  width: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  z-index: 2;
}
@media (min-width: 768px) {
  .challenge_contents ol.count_list li:nth-child(even) {
    margin-top: calc(2rem + 5rem);
  }
}
.challenge_contents .step_inner {
  background: #fff;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 2rem;
}
.challenge_contents .step_inner h3 {
  margin: 2rem 0 1rem 0;
  font-size: 1.5rem;
  padding-bottom: 15px; /* 線との間の余白 */
  position: relative;
  background-image: radial-gradient(#35bc62 2.5px, transparent 3px); /* ドットの色とエッジのボケ調整 */
  background-position: bottom left;
  background-size: 14px 14px; /* 背景のタイルを間隔を含めたサイズ（14px四方）にする */
  background-repeat: repeat-x;
  text-align: center;
}
.challenge_contents .step_inner img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
/*
  ヨシダ工業の魅力
===================================================== */
/* [ ▼ 魅力リスト ] ---------- */
.miryoku_contents ol.count_list {
  align-items: flex-start;
}
.miryoku_contents ol.count_list li {
  list-style: none;
  position: relative;
  counter-increment: step-counter;
  margin-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .miryoku_contents ol.count_list li:first-child {
    margin-top: 4rem;
    padding-bottom: 2rem;
  }
}
.miryoku_contents ol.count_list li::before {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 15px;
  transform: translateY(-33%);
  width: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: bold;
  z-index: 2;
}
@media (min-width: 768px) {
  .miryoku_contents ol.count_list li:nth-child(even) {
    margin-top: calc(2rem + 5rem);
  }
}
.miryoku_contents .step_inner {
  background: #fff;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 2rem;
  height: 100%;
}
.miryoku_contents ol.count_list li:nth-child(3n+1) .step_inner {
  background: #dcf3f4;
}
.miryoku_contents ol.count_list li:nth-child(3n+2) .step_inner {
  background: #eaf7e7;
}
.miryoku_contents ol.count_list li:nth-child(3n+3) .step_inner {
  background: #fcf8e0;
}
.miryoku_contents .step_inner h3 {
  margin: 2rem 0 1rem 0;
  font-size: 1.3rem;
  padding-bottom: 15px; /* 線との間の余白 */
  position: relative;
  background-image: radial-gradient(#35bc62 2.5px, transparent 3px); /* ドットの色とエッジのボケ調整 */
  background-position: bottom left;
  background-size: 14px 14px; /* 背景のタイルを間隔を含めたサイズ（14px四方）にする */
  background-repeat: repeat-x;
  text-align: center;
}
@media (min-width: 768px) {
  .miryoku_contents .step_inner h3 {
    font-size: 1.5rem;
  }
}
.miryoku_contents .step_inner img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border: 2px solid #000;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .miryoku_contents ol.count_list li:nth-child(5) img {
    margin-top: 1rem;
  }
}
/* ===============================================================

  ヨシダ工業の人々

=============================================================== */
/*
  インタビュー
===================================================== */
/* --- 1. 全体ラッパー --- */
.interview_item {
  max-width: 800px;
  margin: 0 auto;
}
.interview_item::-webkit-details-marker {
  display: none;
}
.interview_item:not(:first-child) {
  margin-top: 4rem;
}
/* --- 2. 大きな枠（ヘッダー部分） --- */
.interview_header {
  display: flex;
  align-items: center;
  height: 220px;
  padding: 0 40px;
  cursor: pointer;
  /* 閉じている時の状態：全方向の枠と角丸 */
  border: 2px solid #000;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  transition: border-radius 0.2s ease;
}
@media (max-width: 767px) {
  .interview_header {
    /* 固定の高さを解除して、中身の量に合わせる */
    height: auto !important;
    /* 上下の余白を作って、枠内にゆとりを持たせる */
    padding: 30px 60px 30px 20px;
    /* 中身を縦に並べる設定 */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
/* 開いた時、ヘッダーの下側の角丸を消して直線にする */
.interview_item[open] .interview_header {
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0); /* 枠内の境界線をうっすら引く */
}
/* --- 3. 大きな枠（FAQエリア：枠の下半分） --- */
.inner_faq_area {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-radius: 0 0 20px 20px; /* 下側だけ角丸 */
  padding: 20px 30px;
  margin-top: -2px; /* ヘッダーとの隙間をなくして合体させる */
}
@media (min-width: 768px) {
  .inner_faq_area {
    padding-left: 50px;
    padding-right: 50px;
  }
}
/* --- 4. 3色ループの設定 --- */
/* 1人目：緑 */
.interview_item:nth-child(3n+1) .interview_header, .interview_item:nth-child(3n+1) .inner_faq_area {
  background-color: #eaf7e7;
}
/* 2人目：黄 */
.interview_item:nth-child(3n+2) .interview_header, .interview_item:nth-child(3n+2) .inner_faq_area {
  background-color: #fcf8e0;
}
/* 3人目：青 */
.interview_item:nth-child(3n+3) .interview_header, .interview_item:nth-child(3n+3) .inner_faq_area {
  background-color: #dcf3f4;
}
/* --- 5. FAQカード --- */
.inner_faq_area dl dt {
  display: flex;
  align-items: flex-start; /* 丸の位置を1行目の高さに固定 */
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--green);
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .inner_faq_area dl dt {
    font-size: 1.5rem;
  }
}
.inner_faq_area dl dt::before {
  content: "";
  display: inline-block;
  flex-shrink: 0; /* 丸が潰れないように固定 */
  width: 1.3rem;
  height: 1.3rem;
  background-color: var(--green);
  border-radius: 50%;
  margin-right: .5em;
  margin-top: 0.2rem; /* 1行目の文字の高さと微調整*/
}
@media (min-width: 768px) {
  .inner_faq_area dl dt::before {
    width: 1.9rem;
    height: 1.9rem;
  }
}
.a_fukidashi {
  position: relative;
  width: fit-content;
  margin-bottom: 2.5rem;
  padding: 12px 2rem;
}
.a_fukidashi::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  border: 2px solid #000;
  border-top: none;
  border-bottom-right-radius: 20px; /* 左下の角丸 */
  border-bottom-left-radius: 20px; /* 右下の角丸 */
  translate: -50%;
}
.a_fukidashi::after {
  content: "";
  position: absolute;
  top: calc(100% + 8px); /* フキダシのサイズに応じて調整してください */
  left: 3rem;
  width: 30px;
  height: 2px;
  box-sizing: border-box;
  background-color: #000;
  box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
  rotate: -50deg;
  translate: -50%;
}
.a_fukidashi p {
  margin-bottom: 0;
  font-size: 1.0625rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .a_fukidashi p {
    font-size: 1.125rem;
  }
}
/* --- 6. 枠の外（スケジュール・メッセージ：独立した白カード） --- */
.outer_extra_area {
  display: flex;
  flex-direction: column;
}
/* --- 7. 人物・テキスト・ボタンの調整 --- */
.person_box {
  flex: 0 0 45%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.person_box img {
  max-height: 110%;
  width: auto;
  vertical-align: bottom;
}
.info_box {
  flex: 0 0 35%;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .info_box {
    padding-top: 20px;
  }
}
.info_box .catch {
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--green, #009b4d);
}
.info_box .initial {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
  margin: 10px 0;
}
/* 偶数番目の反転 */
.interview_item:not(:last-child) {
  margin-bottom: 2rem;
}
.interview_item:nth-child(even) .interview_header {
  flex-direction: row-reverse;
}
.interview_item:nth-child(even) .info_box {
  text-align: right;
}
@media (max-width: 767px) {
  /* 親要素：右寄せを意識したパディングに調整 */
  .interview_header {
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
    padding: 30px 20px; /* 左右均等な余白 */
    position: relative;
  }
  .person_box {
    flex: 0 0 100%;
    margin-bottom: 20px;
    justify-content: center;
  }
  .person_box img {
    max-height: none; /* 制限を解除 */
    width: 80%; /* 好みの大きさに調整してください */
    height: auto;
  }
  .info_box {
    flex: 0 0 100%;
    padding: 0;
    margin-bottom: 20px; /* ボタンとの間に隙間を作る */
  }
  /* キャッチ：横一行 */
  .info_box .catch {
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.4;
  }
  /* 名前と部署を横並びに */
  .info_box_row {
    display: flex;
    align-items: baseline;
    gap: 15px; /* 名前と部署の間隔 */
    margin-top: 5px;
  }
  .info_box .initial {
    font-size: 2rem;
    margin: 0;
  }
  .info_box .dept {
    font-size: 0.9rem;
    margin: 0;
  }
  /* 3. ボタン：最下段の右寄せに固定 */
  .btn_box {
    position: static !important; /* 絶対配置を解除して流れに組み込む */
    flex: 0 0 100% !important; /* 横幅いっぱい確保 */
    display: flex !important;
    justify-content: flex-end !important; /* これで右寄せ */
    padding-top: 15px; /* 上のテキストとの距離 */
    margin-top: 10px;
  } /* 3. ボタン：最下段の右寄せに固定 */
  .btn_box {
    position: static !important; /* 絶対配置を解除して流れに組み込む */
    flex: 0 0 100% !important; /* 横幅いっぱい確保 */
    display: flex !important;
    justify-content: flex-end !important; /* これで右寄せ */
    padding-top: 15px; /* 上のテキストとの距離 */
    margin-top: 10px;
  }
}
@media (max-width: 991px) {
  .info_box .catch {
    br {
      display: none;
    } /* 改行を無視して一行に */
  }
}
/* プラスマイナスボタン */
.btn_box {
  flex: 0 0 20%;
  display: flex;
  justify-content: center;
}
.toggle_btn {
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
  position: relative;
}
.toggle_btn::before, .toggle_btn::after {
  content: "";
  position: absolute;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toggle_btn::before {
  width: 24px;
  height: 2px;
}
.toggle_btn::after {
  width: 2px;
  height: 24px;
  transition: 0.3s;
}
.interview_item[open] .toggle_btn::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.independent_card {
  margin-top: 2rem !important;
}
/* --- スケジュール全体（画面幅いっぱい） --- */
.independent_card.schedule_box {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #fffcd9;
  padding: 3rem 0;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden; /* 帯が右に突き抜けないように */
}
.work_img_box {
  margin-top: 1.5rem;
}
.work_img_box img {
  border: 2px solid #000;
  box-sizing: border-box;
}
/* --- タイトル帯：左端(0)から中央コンテンツの右端まで --- */
.h3_full_bg_schedule {
  margin: 0 0 30px 0;
  padding: 15px 0;
  background: #35bc62;
  color: #fff;
  border-left: none; /* 左端は画面に密着させるため線なし */
  border-radius: 0 50vh 50vh 0; /* 右端を半円にする */
  /* 【幅の計算】画面左端から中央800pxの右端まで */
  /* 50%（中央） + 400px（800pxの半分） */
  width: calc(50% + 400px);
  /* 【文字位置の計算】画面左端から中央800pxの左端までを余白にする */
  /* 50%（中央） - 400px（800pxの半分） */
  padding-left: calc(50% - 400px);
  box-sizing: border-box; /* paddingを含めて幅を計算 */
}
.h3_full_bg_schedule h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: bold;
}
/* --- スケジュール詳細（800px中央寄せ） --- */
.schedule_inner {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid #000;
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
}
/* PC：2列に並べる / スマホ：縦1列 */
.timeline_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px; /* 左右の間隔 */
}
.timeline_group {
  flex: 1;
  min-width: 300px; /* これより狭くなると折り返す */
}
/* 各項目 */
.timeline_item {
  display: flex;
  position: relative;
  padding-bottom: 1em; /* 棒線の長さ */
}
@media screen and (max-width: 768px) {
  .timeline_wrapper .timeline_group:last-child .timeline_item:last-child {
    padding-bottom: 0;
  }
}
@media (min-width: 768px) {
  .timeline_group .timeline_item:last-child {
    padding-bottom: 0;
  }
}
/* ドットと棒線の描画 */
.timeline_item::before {
  content: "";
  position: absolute;
  left: 0; /* ドットの中心合わせ */
  top: 0; /* ドットの位置 */
  width: 30px;
  height: 30px;
  background: var(--green);
  border-radius: 50%;
  z-index: 2;
}
.timeline_item::after {
  content: "";
  position: absolute;
  left: 12px; /* 線の位置（ドットの中心） */
  top: 15px;
  bottom: 0;
  width: 6px;
  background: var(--green);
  z-index: 1;
}
/* 最後の項目の線は消す */
.timeline_group .timeline_item:last-child::after {
  display: none;
}
/* 時間列 */
.time_col {
  width: calc(30px + 1em + 2.5em);
  padding-left: calc(30px + .5em); /* ドットからの距離 */
  color: var(--green);
  font-weight: bold;
  font-size: 1.1rem;
}
/* 内容列 */
.content_col {
  flex: 1;
  margin-top: .2rem;
  font-size: .9rem;
}
/* レスポンシブ調整（スマホ） */
@media (max-width: 767px) {
  .timeline_wrapper {
    flex-direction: column;
  }
  /* スマホの時、午前の最後から午後の最初に線を繋げる調整 */
  .timeline_group:first-child .timeline_item:last-child::after {
    display: block; /* 消していた線を復活 */
  }
}
/* --- レスポンシブ調整 --- */
@media (max-width: 840px) {
  .h3_full_bg_schedule {
    /* 画面幅が800px以下になったら、右端に少し余白(10%)を残す */
    width: 90%;
    padding-left: 20px;
  }
  .schedule_inner dl {
    grid-template-columns: 80px 1fr;
  }
}
/* [ ▼ ワークライフバランス・メッセージ ] ---------- */
.message_box {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
  background: #67c4ce;
  border-radius: 20px;
  color: #fff;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .message_box {
    padding: 30px;
  }
}
.message_box section {
  margin-bottom: 1.5rem;
}
.message_box .container {
  grid-gap: 0 30px;
}
.message_box h3 {
  display: flex;
  align-items: flex-start; /* 丸の位置を1行目の高さに固定 */
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .message_box h3 {
    font-size: 1.25rem;
  }
}
.message_box h3::before {
  content: "";
  display: inline-block;
  flex-shrink: 0; /* 丸が潰れないように固定 */
  width: 1.3rem;
  height: 1.3rem;
  background-color: #fff;
  border-radius: 50%;
  margin-right: .5em;
  margin-top: 0.2rem; /* 1行目の文字の高さと微調整*/
}
@media (min-width: 768px) {
  .message_box h3::before {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.message_box p {
  font-size: .95rem;
}
@media (max-width: 767px) {
  .message_box img {
    margin-bottom: 1rem;
  }
}
/* 吹き出し本体（共通） */
.message_fukidashi {
  color: #333;
}
.message_fukidashi p {
  position: relative;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  margin: 0;
  z-index: 1;
}
/* 吹き出しのしっぽ（指定の3点を結んだ形） */
.message_fukidashi p::after {
  content: "";
  position: absolute;
  background-color: #fff;
  /* しっぽのサイズ（四角形をイメージ） */
  width: 30px;
  height: 30px;
  /* 【ここが重要：3点を結ぶ】
     1. 左上 (0% 0%)
     2. 右上 (100% 0%)
     3. 左下 (0% 100%) 
     この3点をつなぐと、右下がカットされた直角三角形になります */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  z-index: -1;
}
@media (min-width: 768px) {
  .message_fukidashi p::after {
    /* 【ここが重要：3点を結ぶ】
     1. 左上 (0% 0%)
     2. 右上 (100% 0%)
     3. 左下 (0% 100%) 
     この3点をつなぐと、右下がカットされた直角三角形になります */
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  }
}
/* --- PC環境：右横の上下中央 --- */
@media (min-width: 768px) {
  .message_fukidashi {
    display: flex;
    align-items: center;
    grid-column: span 7;
  }
  .message_fukidashi p {
    max-width: 344px;
    margin-left: 15px; /* しっぽの幅に合わせて調整 */
  }
  .message_fukidashi p::after {
    /* 本体の左側に配置 */
    right: -29px;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* --- SP環境：上の左右中央 --- */
@media (max-width: 767.98px) {
  .message_fukidashi {
    grid-column: span 12;
    margin-top: 40px;
  }
  .message_fukidashi p {
    width: 100%;
  }
  .message_fukidashi p::after {
    /* 本体の上に配置（SPでは90度回転させるか、clip-pathを調整） */
    top: -29px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}
/*
  チームの仕事風景（下層）
===================================================== */
/* [ ▼ 共通 ] ---------- */
.team_faq_contents {
  margin-top: 5rem;
  display: flow-root;
}
.team_faq_contents .h3_full_bg {
  margin-bottom: 5rem;
}
/* [ ▼ チームインタビュー ] ---------- */
.team_faq_area dl dt {
  display: flex;
  align-items: flex-start; /* 丸の位置を1行目の高さに固定 */
  margin-bottom: 3rem;
  color: var(--green);
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .team_faq_area dl dt {
    font-size: 1.5rem;
  }
}
.team_faq_area dl dt::before {
  content: "";
  display: inline-block;
  flex-shrink: 0; /* 丸が潰れないように固定 */
  width: 1.3rem;
  height: 1.3rem;
  background-color: var(--green);
  border-radius: 50%;
  margin-right: .5em;
  margin-top: 0.2rem; /* 1行目の文字の高さと微調整*/
}
@media (min-width: 768px) {
  .team_faq_area dl dt::before {
    width: 1.9rem;
    height: 1.9rem;
  }
}
/* --- FAQエリア全体の調整 --- */
.team_faq_area dl {
  margin: 0;
}
.team_faq_area dt {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: #000;
  padding-left: 10px;
}
/* --- dd（回答）の基本スタイル --- */
.team_faq_area dd {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 40px 0;
  width: 100%;
}
/* 人の画像 */
.faq_person {
  flex: 0 0 86px;
}
.faq_person img {
  width: 86px;
  height: auto;
  display: block;
}
/* --- 吹き出し本体（共通） --- */
.faq_balloon {
  position: relative;
  width: 70%;
  padding: 2rem 2.5rem;
  border: 2px solid #000;
  border-radius: 30px;
  line-height: 1.6;
}
/* --- しっぽのベース（黒線になる部分） --- */
.faq_balloon::before, .faq_balloon::after {
  content: "";
  position: absolute;
  top: 15px;
  /* clip-pathで「左下がない四角形（直角三角形）」を作る */
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* 外側の黒い三角（2px分大きく見せる） */
.faq_balloon::before {
  width: 15px;
  height: 15px;
  background-color: #000;
  left: -15px;
  z-index: 1;
}
/* 内側の塗りつぶし三角（背景色と同じ） */
.faq_balloon::after {
  width: 11px;
  height: 11px;
  top: 17px; /* 位置をずらして線を表現 */
  left: -11px;
  z-index: 2;
}
/* --- 奇数番目（左側・緑系） --- */
.team_faq_area dd:nth-of-type(odd) .faq_balloon {
  background-color: #ebefd8;
}
.team_faq_area dd:nth-of-type(odd) .faq_balloon::after {
  background-color: #ebefd8;
}
/* --- 偶数番目（右側・黄系・反転） --- */
.team_faq_area dd:nth-of-type(even) .faq_balloon {
  background-color: #f4efdc;
}
.team_faq_area dd:nth-of-type(even) .faq_balloon::after {
  background-color: #f4efdc;
}
.team_faq_area dd:nth-of-type(even) .faq_balloon::before, .team_faq_area dd:nth-of-type(even) .faq_balloon::after {
  left: auto;
  right: -15px;
  /* 左右反転 */
  transform: scaleX(-1);
}
.team_faq_area dd:nth-of-type(even) .faq_balloon::after {
  right: -11px;
}
/* --- 偶数番目（左右反転・色違い） --- */
.team_faq_area dd:nth-of-type(even) {
  flex-direction: row-reverse; /* 左右逆転 */
}
/* スマホ対応 */
@media (max-width: 767px) {
  .faq_balloon {
    width: 100%; /* スマホでは横幅を広げる */
  }
  .faq_person {
    flex: 0 0 60px; /* 画像を少し小さく */
  }
  .faq_person img {
    width: 60px;
  }
}
/* 画像の設定 */
.team_img {
  position: relative;
  overflow: hidden;
  text-align: center;
  z-index: 0;
}
.team_img img {
  border: 2px solid #000;
  box-sizing: border-box;
}
#team .show_img_mask {
  position: relative;
  overflow: hidden;
  border: 2px solid #000;
}
#team .show_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 2;
  pointer-events: none;
}
#team .img_mask {
  position: relative;
  z-index: 1;
  display: block;
  filter: brightness(0);
  transform: scale(1.05);
  transition: filter 0.3s;
}
/*
  働き方リアルボイス
===================================================== */
/* [ ▼ 共通 ] ---------- */
.realvoice_contents .h3_full_bg {
  margin-bottom: 5rem;
}
.realvoice_contents dl dt {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  color: var(--green);
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .realvoice_contents dl dt {
    font-size: 1.5rem;
  }
}
.realvoice_contents dl dt::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  background-color: var(--green);
  border-radius: 50%;
  margin-right: .5em;
  margin-top: 0.2rem;
}
@media (min-width: 768px) {
  .realvoice_contents dl dt::before {
    width: 1.9rem;
    height: 1.9rem;
  }
}
.number_circle {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  background-color: #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}
@media (min-width: 768px) {
  .number_circle {
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
  }
}
.number_circle::before {
  content: attr(data-num) !important;
}
.staff_info {
  color: #fff;
}
.staff_info .initial {
  font-size: 2.2rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .staff_info .initial {
    font-size: 2.5rem;
  }
}
/* 顔写真 */
.face_photo {
  flex: 0 0 90px;
  margin-left: auto; /* 写真を右端に寄せる（お好みで） */
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.face_photo img {
  width: 90px;
}
/* --- コメント --- */
.voice_body {
  font-size: 1rem;
  line-height: 1.8;
}
.voice_body p {
  margin: 0;
}
/* スライド全体の通り道 */
.splide__track {
  padding: 80px 0 !important;
  overflow: visible !important;
}
/* スライドカード：PCサイズを強制固定 */
.splide__slide {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  height: 300px !important;
  margin: 0 10px !important; /* gapの代わり（左右計20px） */
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
  transition: transform 0.6s ease !important;
  flex-shrink: 0 !important;
  list-style: none;
}
/* --- 青系グラデーション --- */
.blue_gradation li {
  background: linear-gradient(90deg, #b4e9ef 0%, #4fc5e0 100%);
}
/* --- オレンジ系グラデーション --- */
.orange_gradation li {
  background: linear-gradient(90deg, #ffdb5a 0%, #ff9d00 100%);
}
/* --- 緑系グラデーション --- */
.green_gradation li {
  background: linear-gradient(90deg, #c2da6e 0%, #35bc62 100%);
}
/* スマホ用レスポンシブ */
@media (max-width: 575px) {
  .splide__slide {
    width: 80vw !important;
    min-width: 80vw !important;
    max-width: 80vw !important;
    height: auto !important;
    min-height: 300px !important;
    margin: 0 5px !important;
  }
}
/* コンテンツ用独自クラス（変更なし） */
.voice_header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
/* ===============================================================

  募集要項／各種制度

=============================================================== */
/*
  採用メッセージ
===================================================== */
#ceo_massage .img_wrap {
  max-width: calc(469px * (16 / 9));
  max-height: 469px;
  aspect-ratio: 330 / 398;
  margin-top: 0;
}
@media (max-width: 767px) {
  #ceo_massage .img_wrap {
    aspect-ratio: 330 / 398;
    margin-bottom: 2rem;
  }
}
@media (max-width: 767px) {
  #ceo_massage .caption {
    top: 0;
  }
}
@media (min-width: 768px) {
  #ceo_massage .caption {
    top: 0;
  }
}
#ceo_massage .main_image {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%; /* 親の幅いっぱいに広げる */
  height: 100%; /* 親の高さ（16:9）いっぱいに広げる */
  margin: 0;
  z-index: 1;
}
@media (max-width: 767px) {
  /* 画像：右下寄せ、サイズ85% */
  #ceo_massage .main_image {
    width: 85%;
    max-width: 330px;
  }
}
#ceo_massage .main_image img {
  width: 100%;
  height: 100%;
  /* ★ここが最重要：縦横比を維持したまま、枠内に収める */
  object-fit: contain;
  /* 必要に応じて画像の配置位置を調整（右寄せにするなら right） */
  object-position: right bottom;
  display: block;
  border: none;
}
@media (max-width: 767px) {
  #ceo_massage .main_image img {
    width: 100%;
    aspect-ratio: 330 / 469;
    height: auto;
  }
}
/*
  求める人物像
===================================================== */
.request_contents {
  position: relative;
  z-index: 0;
  padding: 100px 20px;
  overflow: hidden;
  background-color: #ffffff;
}
/* --- 1. アニメーション専用の外枠 --- */
.bg-dot {
  position: absolute;
  z-index: -1;
  width: 400px;
  height: 235px;
  pointer-events: none;
  /* ここで「移動」のアニメーションだけをかける */
  animation: fuwafuwa-move 20s ease-in-out infinite alternate;
}
/* --- 2. ドットと形を持つ中身 --- */
.bg-dot i {
  display: block;
  width: 100%;
  height: 100%;
  background-size: 5.5px 5.5px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 334.78 196.15'%3E%3Cpath d='M28.53,151.83c26.53,24.14,63.87,28.85,94.62,15.01v.02c.17-.08.32-.14.49-.22.11-.05.22-.09.33-.14,54.71-24.5,71.26-17.46,103.62,12.6v-.03c.17.15.31.32.47.47,26.05,23.71,66.39,21.82,90.11-4.23,23.71-26.05,21.82-66.39-4.23-90.1-16.76-15.26-39.43-19.85-59.79-14.29v-.06c-42.81,11.72-60.69,10.27-98.24-37.5l-.03.11c-2.96-3.76-6.18-7.39-9.84-10.72C110.39-9.71,55.19-7.12,22.74,28.53c-32.45,35.65-29.86,90.85,5.79,123.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 334.78 196.15'%3E%3Cpath d='M28.53,151.83c26.53,24.14,63.87,28.85,94.62,15.01v.02c.17-.08.32-.14.49-.22.11-.05.22-.09.33-.14,54.71-24.5,71.26-17.46,103.62,12.6v-.03c.17.15.31.32.47.47,26.05,23.71,66.39,21.82,90.11-4.23,23.71-26.05,21.82-66.39-4.23-90.1-16.76-15.26-39.43-19.85-59.79-14.29v-.06c-42.81,11.72-60.69,10.27-98.24-37.5l-.03.11c-2.96-3.76-6.18-7.39-9.84-10.72C110.39-9.71,55.19-7.12,22.74,28.53c-32.45,35.65-29.86,90.85,5.79,123.3Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  /* ここで「回転」のアニメーションだけをかける */
  animation: fuwafuwa-rotate 10s ease-in-out infinite alternate;
}
/* 色分け */
.bg-dot:nth-of-type(odd) i {
  background-image: radial-gradient(#ffb300 25%, transparent 25%);
}
.bg-dot:nth-of-type(even) i {
  background-image: radial-gradient(#008e2b 25%, transparent 25%);
}
/* 個別配置：top/leftを0以上にして絶対に見切れないように */
.bg-dot:nth-of-type(1) {
  top: 5%;
  left: 5%;
  animation-delay: 0s;
}
.bg-dot:nth-of-type(1) i {
  transform: rotate(10deg);
}
.bg-dot:nth-of-type(2) {
  top: 15%;
  right: 5%;
  animation-delay: -5s;
}
.bg-dot:nth-of-type(2) i {
  transform: rotate(140deg);
}
.bg-dot:nth-of-type(3) {
  top: 40%;
  left: -10%;
  animation-delay: -2s;
}
.bg-dot:nth-of-type(3) i {
  transform: rotate(-30deg);
}
.bg-dot:nth-of-type(4) {
  top: 60%;
  right: 10%;
  animation-delay: -8s;
}
.bg-dot:nth-of-type(4) i {
  transform: rotate(0deg);
}
.bg-dot:nth-of-type(5) {
  bottom: 10%;
  left: 20%;
  animation-delay: -4s;
}
.bg-dot:nth-of-type(5) i {
  transform: rotate(45deg);
}
/* --- アニメーション設定 --- */
/* 外枠の移動（ゆっくり大きく動く） */
@keyframes fuwafuwa-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(40px, 30px);
  }
}
/* 中身の回転と揺れ（ゆらゆらする） */
@keyframes fuwafuwa-rotate {
  0% {
    transform: rotate(inherit) scale(1);
  }
  100% {
    transform: rotate(calc(inherit + 15deg)) scale(1.05);
  }
}
.request_contents ol.count_list {
  align-items: flex-start;
}
.request_contents ol.count_list li {
  list-style: none;
  position: relative;
  counter-increment: step-counter;
  margin-top: 4rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .request_contents ol.count_list li {
    margin-top: 0;
    padding-bottom: 0;
  }
}
.request_contents ol.count_list li::before {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 15px;
  transform: translateY(-33%);
  width: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  z-index: 2;
}
@media (min-width: 768px) {
  .request_contents ol.count_list li:nth-child(even) {
    margin-top: calc(2rem + 2rem);
  }
}
.request_contents .step_inner {
  background: linear-gradient(90deg, #b4e9ef 0%, #4fc5e0 100%);
  border-radius: 30px;
  padding: 2rem;
  height: 100%;
}
@media (min-width: 768px) {
  .request_contents .step_inner {
    padding: 2rem 4rem 3.5rem;
  }
}
.request_contents .step_inner h3 {
  margin: 4rem 0 1rem;
  font-size: 1.5rem;
  color: #fff;
  padding-bottom: 15px; /* 線との間の余白 */
  position: relative;
  text-shadow: 1px 1px 10px rgba(59, 169, 193, 0.6);
}
.request_contents .step_inner p {
  margin-bottom: 0;
}
/* [ ▼ 掲げるミッション ] ---------- */
.mission_contents ol.count_list {
  align-items: flex-start;
}
.mission_contents ol.count_list li {
  list-style: none;
  position: relative;
  counter-increment: step-counter;
  margin-top: 4rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .mission_contents ol.count_list li {
    margin-top: 0;
    padding-bottom: 0;
  }
}
.mission_contents ol.count_list li::before {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 15px;
  transform: translateY(-33%);
  width: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  z-index: 2;
}
@media (max-width: 991px) {
  .mission_contents ol.count_list li {
    margin-top: 1.5rem;
  }
}
@media (min-width: 992px) {
  .mission_contents ol.count_list li:nth-child(even) {
    margin-top: calc(4rem + 5rem);
  }
}
.mission_contents .step_inner {
  background: #fff;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 2rem;
  height: 100%;
}
@media (min-width: 768px) {
  .mission_contents .step_inner {
    padding: 2rem 4rem 3rem;
  }
}
.mission_contents .step_inner h3 {
  margin: 4rem 0 1rem;
  font-size: 1.5rem;
  color: var(--green);
  padding-bottom: 15px; /* 線との間の余白 */
  position: relative;
}
.mission_contents .step_inner p {
  margin-bottom: 0;
}
/*
  数字で見るヨシダ工業
===================================================== */
/* [ ▼ 数字で見るヨシダ工業 ] ---------- */
.data_contents ul li {
  list-style: none;
  position: relative;
}
@media (max-width: 767px) {
  .data_contents ul li:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}
.data_contents dl {
  position: relative;
  overflow: hidden; /* 円がはみ出さないように */
  background-color: #ffffff;
  background-image: radial-gradient(#dfe8ba 1.5px, transparent 2px);
  background-size: 10px 10px;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 2rem;
  height: 100%;
  text-align: center;
  z-index: 1;
}
.data_contents dl::before {
  content: "";
  position: absolute;
  /* 2. 円のサイズ（横幅の90%） */
  width: 90%;
  aspect-ratio: 1 / 1; /* 正円を維持 */
  background-color: #fffcd9;
  border-radius: 50%;
  /* 3. 配置：下辺に沿って、頭1/3だけ出す */
  bottom: 0;
  left: 50%;
  /* 50%左にずらしてから、下に「高さの2/3」分沈める */
  transform: translate(-50%, 66.6%);
  z-index: -1; /* 背景として扱う */
}
/* 親要素：最低限の高さを作り、下の余白を確保 */
.data_contents dl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 全体の高さを確保。数字と重なる場合はここを大きく
     padding-bottomはsub_textの居場所
  */
  min-height: 150px;
  padding-bottom: 40px;
  height: 100%;
  color: var(--green);
}
@media (min-width: 992px) {
  .data_contents dl {
    min-height: 220px;
  }
}
.data_contents dl dt {
  margin-bottom: 2rem;
  padding: .5em 1em;
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 50vh;
  color: #fff;
  background: var(--green);
}
/* ddの中のコンテンツ：アイコンと数字を並べる */
.data_contents dd .item_tate_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-grow: 1; /* 余ったスペースを埋めて中央に配置 */
  width: 100%;
}
.data_contents dd .item_yoko_box {
  display: flex;
  flex-direction: row; /* 横方向に並べる（これが重要！） */
  align-items: flex-end; /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
  gap: 0; /* アイコンとグラフの間の隙間 */
  width: 100%; /* 親の幅いっぱいに広げる */
}
/* 数字エリア：少し下に余白を */
.data_contents dd .num_area {
  line-height: 1;
  font-weight: bold;
}
.data_contents dd .num_area .number {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 8rem;
  letter-spacing: -0.05em;
}
.data_contents dd .num_area .unit {
  margin-left: 0.1em;
  font-size: 3.5rem;
}
/* 補助文：dlの下辺に固定 */
.data_contents dd .sub_text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
  text-align: center;
  font-size: 1.166rem;
  font-weight: bold;
  display: block;
  z-index: 3;
}
.data_contents dd .sub_text.caution {
  font-size: .95rem;
  font-weight: normal;
  color: #000;
}
/* グラフの親要素 */
.pie-chart-container {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0; /* これが最重要！ 0を指定すると親が狭くても潰れない */
  margin: 0;
}
@media (min-width: 992px) {
  .pie-chart-container {
    width: 220px;
    height: 220px;
  }
}
/* 円グラフ本体 */
.pie-chart-full {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.pie-chart-full.danjo {
  background: conic-gradient(#bcd359 0% 50%, #67c4ce 50% 100%);
}
.pie-chart-full.bunkeirikei {
  background: conic-gradient(#bcd359 0% 71%, #67c4ce 29% 100%);
}
/* グラフの上のパーセンテージ（共通スタイル） */
.percent-label {
  font-family: "Poppins", sans-serif;
  position: absolute;
  color: #fff; /* 背景色に合わせて。濃い色なら白が映えます */
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 読みやすくするための影 */
  letter-spacing: -0.005em;
}
@media (min-width: 992px) {
  .percent-label {
    font-size: 3rem;
  }
}
.percent-label .unit {
  margin-left: 0.1em;
  font-size: 1rem;
}
@media (min-width: 992px) {
  .percent-label .unit {
    font-size: 1.8rem;
  }
}
/* 各数字の配置（%に合わせて位置を微調整） */
.percent_man {
  top: 50%;
  transform: translateY(-50%); /* 上下中央の場合はこちらも追加 */
  right: 5%;
}
.percent_women {
  top: 50%;
  transform: translateY(-50%); /* 上下中央の場合はこちらも追加 */
  left: 5%;
}
.percent_bunkei {
  top: 60%;
  right: 20%;
}
.percent_rikei {
  top: 25%;
  left: 12%;
}
/* イラストアイコン */
.suji_icon {
  max-height: 90px;
  flex-shrink: 0;
}
/* item_yoko の直下にある div（アイコンを囲っている箱）の設定 */
.item_yoko_box > div {
  flex-grow: 0; /* ★勝手に広がらないようにする */
  flex-shrink: 0; /* ★潰れないようにする */
  display: flex; /* 中の img を制御しやすくする */
  align-items: center;
  justify-content: center;
}
/* アイコンを囲っている div の設定 */
.item_yoko_box > div:has(.suji_icon) {
  width: calc((100% - 150px) / 2); /* ★ここを全アイコン共通の幅に固定（少し余裕を持たせる） */
  flex-shrink: 0; /* 潰れないように固定 */
  display: flex;
  justify-content: center; /* 中の画像を左右中央に */
  align-items: center; /* 中の画像を上下中央に */
}
@media (min-width: 992px) {
  .item_yoko_box > div:has(.suji_icon) {
    width: calc((100% - 220px) / 2); /* ★ここを全アイコン共通の幅に固定（少し余裕を持たせる） */
  }
}
.item_yoko_box .suji_icon_box .suji_icon {
  display: block;
  width: 100%;
  height: auto;
}
.item_yoko_box .suji_icon_box_L {
  padding-right: 10px;
}
.item_yoko_box .suji_icon_box_R {
  padding-left: 10px;
}
/*
  応募フロー
===================================================== */
/* [ ▼ 応募フロー ] ---------- */
/* リスト全体のスタイル */
.process_list {
  list-style: none;
  max-width: 800px;
  margin: 3rem auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px; /* ステップごとの間隔 */
  counter-reset: flow-count; /* 数字のカウントをリセット */
}
/* 各リスト項目（横並びの土台） */
.process_list li {
  display: flex;
  align-items: center; /* 垂直中央揃え */
  gap: 20px; /* 各要素の間隔 */
  counter-increment: flow-count; /* 数字を1ずつ増やす */
  position: relative;
}
/* 01, 02 などの数字（黒丸背景） */
.process_list li::before {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  content: counter(flow-count, decimal-leading-zero); /* 01形式で表示 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #000; /* 黒丸背景 */
  color: #fff; /* 数字は白 */
  border-radius: 50%;
  font-size: 1.2rem;
  flex-shrink: 0; /* 円が潰れないように固定 */
}
/* アイコン（96x96） */
.process_list li img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
}
/* dlエリア（定義リスト） */
.process_list li dl {
  margin: 0;
  flex-grow: 1;
}
/* 【項目名】（var--green） */
.process_list li dt {
  color: var(--green);
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 8px; /* ddとの隙間 */
}
/* 説明文 */
.process_list li dd {
  margin: 0; /* デフォルトのインデントをリセット */
  font-size: 1rem;
  line-height: 1.7;
}
.process_list li dd a {
  display: inline-block;
  width: 200px;
  flex-shrink: 0;
}
.process_list li dd a img {
  width: 100%;
  height: auto;
}
/*
  募集要項
===================================================== */
/* [ ▼ 募集要項 ] ---------- */
.requirements_contents ul li {
  display: flex;
  flex-direction: column;
  list-style: none;
  position: relative;
}
.requirements_contents ul li dl {
  flex-grow: 1; /* 親(li)の高さに合わせて伸びる */
  border-bottom: 2px solid #c2da6e;
}
.requirements_contents ul li dl dt {
  display: inline-block;
  margin-bottom: 2rem;
  padding: .5em 1em;
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 50vh;
  color: #fff;
  background: #000;
}
/*
  よくある質問
===================================================== */
/* [ ▼ よくある質問 ] ---------- */
/* --- FAQリスト全体の基本形 --- */
.faq_list {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* --- 各アイテムの外枠 --- */
.faq_item {
  border: 2px solid #000;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
}
/* --- 質問エリア（ここが「＋」の土台） --- */
.faq_item summary {
  padding: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none; /* 三角を消す(1) */
  position: relative;
}
/* 三角を消す(2) */
.faq_item summary::-webkit-details-marker {
  display: none;
}
/* 左側の「Q」 */
.faq_item summary::before {
  content: "Q";
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;
  margin-right: 15px;
  color: var(--green);
}
/* --- 右側の「＋」アイコン用（黒丸） --- */
.faq_open_icon {
  margin-left: auto;
  position: relative;
  width: 32px; /* 32pxくらいがバランスが良いです */
  height: 32px;
  background-color: #000;
  border-radius: 50%;
  flex-shrink: 0;
}
/* ＋の横棒（before） */
.faq_open_icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px; /* 棒の長さ */
  height: 2px; /* 棒の太さ */
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
/* ＋の縦棒（after） */
.faq_open_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px; /* 棒の太さ */
  height: 16px; /* 棒の長さ */
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
/* --- 開いたときの設定（縦棒を90度回して、横棒と重ねる ＝ 「ー」に見える） --- */
.faq_item[open] .faq_open_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/* --- 回答エリア --- */
.faq_answer {
  padding: 0 55px 20px 55px; /* Qの幅分左をあけると綺麗 */
  display: flex;
  gap: 15px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.faq_answer::before {
  content: "A";
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;
  color: #ff9d00;
}
/* ===============================================================

  リンクエリア

=============================================================== */
aside .container {
  align-items: center;
}
@media (max-width: 575px) {
  aside .container .col-12 {
    margin-bottom: 1rem;
  }
}
aside a.btn_nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 15px 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  box-sizing: border-box;
  text-decoration: none;
}
/* 矢印パーツ（●の中に＞） */
aside .circle_arrow {
  position: relative;
  display: inline-block;
  width: 1.888rem;
  height: 1.888rem;
  background-color: #000;
  border-radius: 50%;
}
aside .circle_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30%;
  width: .5rem;
  height: .5rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
aside .sns_links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 575px) {
  aside .nav_right.sns_links {
    gap: 40px;
  }
  aside .sns_links img {
    width: 40px;
    height: auto;
  }
}
/* ===============================================================

  トップへ移動ボタン  

=============================================================== */
/* --- 上部に戻るボタン：継承・巨大化防止版 --- */
#up {
  position: fixed;
  bottom: 10px;
  right: 5px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  /* ★【スマホサイズ】器の大きさを固定 */
  width: 60px; /* 80pxだとスマホでデカいと言われる事が多いので60pxに調整 */
  height: 60px;
}
@media (min-width: 768px) {
  #up {
    bottom: 10px;
    right: 20px;
    /* ★【PCサイズ】器を本来の100pxに固定 */
    width: 100px;
    height: 100px;
  }
}
/* クラスがついたら表示（JS側と連動） */
#up.is_up_visible {
  opacity: 1 !important;
  visibility: visible !important;
}
#up a {
  display: block;
  width: 100%;
  height: 100%;
}
#up a img {
  display: block;
  /* ★修正：親要素（#up）のサイズに100%従わせる */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
/* スマホ時の画像微調整（元の指定を継承） */
@media (max-width: 767px) {
  #up a img {
    margin-left: auto;
    /* 親が60pxなので、その中で100%表示 */
    width: 100% !important;
  }
}
/* ===============================================================

  フッター

=============================================================== */
footer {
  color: #fff;
  background: var(--green);
}
footer a {
  color: #fff;
  transition: .3s ease-out;
}
footer a:hover {
  text-decoration: none;
}
/*
  フッターナビ
===================================================== */
/* [ ▼ フッターナビ背景 ] ---------- */
.footNav_back_wave {
  position: relative;
  background: var(--green);
  margin-top: 0;
  padding-top: 5rem;
  padding-bottom: calc(5rem + 20px);
}
@media (min-width: 768px) {
  .footNav_back_wave {
    padding-bottom: calc(5rem + 58px);
  }
}
.footNav_back_wave::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: url("../images/common/wave_green.svg");
  background-repeat: repeat-x;
  background-size: 182px 20px;
  z-index: 10;
}
@media (min-width: 768px) {
  .footNav_back_wave::before {
    top: -58px;
    height: 58px;
    background-size: 547px 58px;
  }
}
/* [ ▼ フッターナビ ] ---------- */
@media (max-width: 575px) {
  .footNav_back_wave .col-6:not(:last-child) dl {
    margin-bottom: 3rem;
  }
  .footNav_back_wave .col-6:last-child :last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .footNav dl {
    margin-bottom: 0;
  }
}
.footNav dl dt {
  margin-bottom: 1rem;
}
.footNav dl dd ul {
  padding: 0;
  list-style: none;
}
.footNav dl dd ul li {
  font-size: .857em;
}
@media (max-width: 767px) {
  .footNav dl dd ul li {
    margin-bottom: 1rem;
    font-size: .9em;
    line-height: 1.4;
  }
}
.footNav a:hover {
  color: #ffdf00;
}
/*
  フッターリンク
===================================================== */
/* ヘッダー全体の並び */
@media (min-width: 992px) {
  .footLink_nav {
    display: flex;
    justify-content: space-between; /* 左右に振り分け */
    align-items: center;
  }
}
@media (max-width: 991px) {
  /* 親要素を縦並びに */
  .footLink_nav {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    gap: 25px; /* 上下のブロック間の隙間 */
  }
}
.nav_left {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 中央寄せ（左寄せなら flex-start） */
  gap: 15px; /* ボタン同士の隙間 */
  width: 100%;
}
.nav_left .btn_nav {
  width: 100%; /* スマホの時はボタンを横幅いっぱいに広げると押しやすい */
  max-width: 300px; /* 広がりすぎないように制限（任意） */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* PCサイズ（992px以上）の設定 */
@media (min-width: 992px) {
  .nav_left {
    flex-direction: row; /* 横並びに戻す */
    align-items: center;
    gap: 20px; /* PC用の隙間 */
  }
  .nav_left .btn_nav {
    width: auto; /* PCでは文字量に合わせた幅に戻す */
  }
}
.footLink_contents .btn_nav {
  border-radius: 10px;
  font-size: 14px;
}
/* 矢印パーツ（●の中に＞） */
.footLink_contents .circle_arrow {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
}
.footLink_contents .circle_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%;
  width: 5px;
  height: 5px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
/* 右寄せSNSリンク */
.sns_links {
  display: flex;
  list-style: none;
  gap: 15px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.sns_links img {
  width: 24px; /* アイコンサイズ調整 */
  height: auto;
  display: block;
}
@media (max-width: 991px) {
  /* SNSアイコンのブロック */
  .nav_right.sns_links {
    display: flex;
    flex-direction: row; /* ★ここは横並びを維持 */
    justify-content: center;
    gap: 20px; /* アイコン同士の隙間 */
    padding: 0;
    list-style: none;
  }
  .nav_right.sns_links li {
    flex-shrink: 0;
  }
}
/* [ ▼ フッターリンク背景 ] ---------- */
.footLink_contents {
  position: relative;
  background: var(--green);
  margin-top: 0;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.footLink_contents::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 0;
  width: 100%;
  height: 19px;
  background-image: url("../images/common/wave_green_topborder.svg");
  background-repeat: repeat-x;
  background-size: 176px 19px;
  z-index: 10;
}
@media (min-width: 768px) {
  .footLink_contents::before {
    top: -59px;
    height: 59px;
    background-size: 547px 59px;
  }
}
.footLink_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footLink_pagelink {
  display: flex;
  gap: 30px;
}
.footlogo {
  width: 300px;
}
/*
  コピーライト
===================================================== */
.copyright_contents {
  background: #000;
}
.footer_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: #000;
}
.copyright_links {
  display: flex;
  gap: 30px;
}
/* ボタン全体のスタイル */
.btn_arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* 文字と丸の間の距離 */
  text-decoration: none;
  transition: opacity 0.3s;
}
/* 丸の部分 */
.copyright_contents .circle_arrow {
  position: relative;
  display: inline-block;
  width: 24px; /* 丸のサイズ */
  height: 24px;
  background-color: var(--green); /* 丸の色 */
  border-radius: 50%; /* 正円にする */
  vertical-align: middle;
}
/* 中の「＞」の部分 */
.copyright_contents .circle_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%; /* 真ん中より少し左に置くと綺麗に見えます */
  width: 6px; /* 矢印の太さ（長さ） */
  height: 6px; /* 矢印の太さ（長さ） */
  border-top: 1px solid #fff; /* 矢印の線の太さと色 */
  border-right: 1px solid #fff; /* 矢印の線の太さと色 */
  transform: translateY(-50%) rotate(45deg); /* 45度回転させて「＞」にする */
}
/* 既存のボタン用スタイル（微調整） */
.btn_arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 14px;
}
.copyright_links a {
  transition: .3s ease-out;
}
.copyright_links a:hover {
  color: #ff9d00;
}
.copyright small {
  font-size: 12px;
}
/* スマホ対応：画面が狭いときは縦に並べる */
@media (max-width: 768px) {
  .footer_bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  .copyright_links {
    justify-content: center;
    gap: 20px;
  }
}