@charset "UTF-8";

/* ===============================
   ヘッダーエリア
================================*/
.site-logo img {
 width: 300px;
 height: auto;
 display: block;
}

/* 追従メニューの出し入れ */
.floating-menu {
 transition: transform 0.25s ease, opacity 0.2s ease;
 will-change: transform;
}
.floating-menu.is-hidden {
 transform: translateY(-120%); /* 上へ退避 */
 opacity: 0;
 pointer-events: none;
}

/* 目次開いてる時は常に出しておく（任意） */
.floating-toc.show ~ .floating-menu,
.floating-menu.force-show {
 transform: none !important;
 opacity: 1 !important;
 pointer-events: auto !important;
}

/* ▼ 共通レイアウト */
.main-header .wrap-l {
 position: relative;
}

.main-header {
 width: 100%;
 background-color: #fff; /* 必要に応じて変更 */
 padding: 0;
 margin: 0;
 overflow: hidden;
}

.main-header .header-section {
 width: 100%;
 margin: 15px auto;
}
@media screen and (min-width: 768px) {
 .main-header .header-section {
  margin: 20px auto;
 }
}

.main-header img {
 display: block;
 width: 100%;
 height: auto;
 object-fit: cover; /* 枠にフィット */
}

/* ▼ ヘッダー内コンテンツ */
.header-section {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 20px;
}

.site-title {
 width: 300px;
 font-size: 1.2rem;
 font-weight: bold;
 line-height: 1.4;
}
.site-title span {
 font-size: 1.2rem;
}

.header-center img {
 max-height: 80px;
 width: auto;
}

/* ▼ お問い合わせボタン */
.contact-btn {
 display: inline-block;
 width: 300px;
 text-align: center;
 background: #6e6e6e; /* 落ち着いたグレー */
 color: #fff;
 padding: 10px 20px;
 border-radius: 6px;
 font-weight: bold;
 text-decoration: none;
 transition: background 0.3s ease;
}
.contact-btn:hover {
 background: #555; /* ホバーで濃く */
}

/* ▼ スマホ用レイアウト */
@media (max-width: 768px) {
 .header-section {
  flex-direction: column;
  align-items: center;
  text-align: center;
 }
 .header-left,
 .header-right {
  flex: none;
 }
}

/* ===============================
   追従メニュー（くすみブルー調整済み）
================================*/
.floating-menu {
 position: fixed;
 top: 2%;
 right: 1%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 z-index: 9999;
}

/* ▼ 共通ボタン */
.fm-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 60px;
 height: 60px;
 background: #7a99a3; /* くすみブルー */
 border: none;
 font-size: 20px;
 color: #fff;
 cursor: pointer;
 border-radius: 12px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 transition: all 0.2s ease;
}
@media screen and (min-width: 768px) {
 .fm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  background: #7a99a3; /* くすみブルー */
  border: none;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
 }
}
.fm-btn:hover {
 background: #546e7a; /* 濃いくすみブルー */
 transform: translateY(-2px);
 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

/* ▼ お問い合わせ専用ボタン（やや小さめ） */
.fm-btn.contact {
 font-size: 12px;
 line-height: 1.2;
 text-align: center;
 text-decoration: none;
 padding: 4px;
 height: auto;
 min-height: 60px;
 white-space: nowrap;
}

/* ▼ 目次メニュー（開いた状態） */
.floating-toc {
 display: none;
 position: fixed;
 top: 4%;
 right: 19%;
 background: #7a99a3; /* ボタンと同色 */
 border-radius: 8px;
 padding: 4px 0;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 flex-direction: column;
 z-index: 9999;
 min-width: 160px;
}
@media screen and (min-width: 768px) {
 /* ▼ 目次メニュー（開いた状態） */
 .floating-toc {
  display: none;
  position: fixed;
  top: 3%;
  right: 5%;
  background: #7a99a3; /* ボタンと同色 */
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  z-index: 9999;
  min-width: 180px;
 }
}
/* ▼ メニュー内リンク */
.floating-toc a {
 padding: 12px 20px;
 color: #fff;
 text-decoration: none;
 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 font-weight: 500;
 font-size: 0.95rem;
 transition: background 0.2s ease;
 text-align: center;
}

/* 最後の項目のボーダー削除 */
.floating-toc a:last-child {
 border-bottom: none;
}

/* ▼ ホバー時（少し暗く） */
.floating-toc a:hover {
 background: #546e7a;
}

/* ▼ 表示時の切り替え */
.floating-toc.show {
 display: flex;
}
/* ハンバーガー三本線スタイル */
.fm-btn.menu {
 position: relative;
 padding: 0;
}

.fm-btn.menu .bar {
 display: block;
 position: absolute;
 width: 24px;
 height: 2.5px;
 background-color: #fff;
 left: 50%;
 transform: translateX(-50%);
 transition: all 0.3s ease;
 border-radius: 1px;
}

/* 三本の位置 */
.fm-btn.menu .bar.top {
 top: 18px;
}

.fm-btn.menu .bar.middle {
 top: 31px;
}

.fm-btn.menu .bar.bottom {
 top: 44px;
}

/* 開いたときのアニメーション */
.fm-btn.menu.open .bar.top {
 top: 31px;
 transform: translateX(-50%) rotate(45deg);
}

.fm-btn.menu.open .bar.middle {
 opacity: 0;
}

.fm-btn.menu.open .bar.bottom {
 top: 31px;
 transform: translateX(-50%) rotate(-45deg);
}
@media screen and (max-width: 768px) {
 .floating-menu .fm-btn.top,
 .floating-menu .fm-btn.contact {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
 }

 .floating-menu.show-menu .fm-btn.top,
 .floating-menu.show-menu .fm-btn.contact {
  display: flex;
  opacity: 1;
 }
}

/*===============================
  スライダーエリア
================================*/
.slider-section {
 background-color: red;
 color: #fff;
 overflow: hidden;
 padding-bottom: 30px;
}

.slider-header-text {
 text-align: center;
 padding-top: 10px;
 padding-bottom: 5px;
}

.slider-header-text p {
 text-align: center;
 font-weight: bold;
 font-size: 1.1em;
}
@media screen and (min-width: 768px) {
 .slider-header-text p {
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
 }
}
.slider-header-image {
 position: absolute;
 top: 8%;
 left: 50%;
 transform: translateX(-50%);
 z-index: 20;
}
@media screen and (min-width: 768px) {
 .slider-header-image {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
 }
}
.slider-header-image img {
 max-width: 350px;
 min-height: 60px;
}
@media screen and (min-width: 768px) {
 .slider-header-image img {
  max-width: 700px;
  min-height: 60px;
 }
}
.slider-main {
 position: relative;
 width: 100%;
 height: 65vh;
}
@media screen and (min-width: 768px) {
 .slider-main {
  position: relative;
  width: 100%;
  height: 90vh;
 }
}
.slider-swiper {
 width: 100%;
 height: 100%;
}

.swiper-wrapper {
 display: flex;
 height: 100%;
}

.swiper-slide {
 width: 33.333vw; /* 画面幅の1/3ずつ */
 height: 100%;
 flex-shrink: 0;
}
@media screen and (max-width: 768px) {
 .swiper-slide {
  height: 100%;
  flex: 0 0 auto;
  flex-shrink: 0;
 }
}
.swiper-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
@media screen and (min-width: 768px) {
 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
 }
}
/* 黒背景のオーバーレイ */
.slider-overlay {
 position: absolute;
 bottom: 2%;
 left: 50%;
 transform: translateX(-50%);
 background-color: rgba(0, 0, 0, 0.65);
 display: flex;
 align-items: center;
 padding: 16px;
 border-radius: 8px;
 z-index: 10;
 gap: 0px;
 min-width: 370px;
 flex-direction: row;
 justify-content: center;
}

@media screen and (min-width: 768px) {
 .slider-overlay {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 8px;
  z-index: 10;
  gap: 20px;
  min-width: 700px;
  flex-direction: row;
  justify-content: center;
 }
}
.slider-overlay .badge {
 height: 50px;
 margin-right: 0px;
}
@media screen and (min-width: 768px) {
 .slider-overlay .badge {
  height: auto;
  margin-right: 16px;
 }
}
.slider-caption {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.slider-caption .slider-caption-text {
 margin: 0;
 line-height: 1.2;
 font-size: 1.2em;
}
@media screen and (min-width: 768px) {
 .slider-caption .slider-caption-text {
  margin: 0;
  line-height: 1.2;
  font-size: 2.3em;
 }
}
.slider-caption .slider-caption-text02 {
 margin: 0;
 line-height: 1.2;
 font-size: 1.5em;
 font-weight: bold;
}
@media screen and (min-width: 768px) {
 .slider-caption .slider-caption-text02 {
  margin: 0;
  line-height: 1.2;
  font-size: 3.5em;
  font-weight: bold;
 }
}
.slider-caption img {
 margin-top: 12px;
 height: 20px;
}
@media screen and (min-width: 768px) {
 .slider-caption img {
  margin-top: 12px;
  height: 30px;
 }
}

/*===============================
section01
================================*/

/* ===============================
   section01 目次（リファイン）
   ※HTMLはそのまま
================================*/
.section-toc {
 background: #fff;
 padding: 16px 0 24px;
 margin-bottom: 24px;
}

/* PC: 中央寄せの整列 / SP: 2列グリッドで均等幅 */
.section-toc ul {
 display: grid;
 grid-template-columns: repeat(6, max-content); /* PC */
 justify-content: center;
 gap: 12px 16px;
 margin: 0;
 padding: 0;
 list-style: none;
}
@media (max-width: 768px) {
 .section-toc ul {
  grid-template-columns: repeat(2, 1fr); /* SP: 2列 */
  gap: 10px 12px;
  padding: 0 16px;
 }
}

.section-toc li {
 margin: 0;
}

/* ボタンの質感とタップしやすさ */
.section-toc a {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 44px; /* タップ最低高さ */
 padding: 10px 14px;
 border: 1px solid #d9d9d9;
 border-radius: 12px;
 background: #f8f8f8;
 color: #333;
 font-weight: 600;
 font-size: 0.95rem;
 text-decoration: none;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.04);
 transition: background 0.2s, border-color 0.2s, transform 0.08s ease;
 -webkit-tap-highlight-color: transparent;
}
.section-toc a:hover {
 background: #f0f0f0;
 border-color: #c6c6c6;
}
.section-toc a:active {
 transform: translateY(1px);
}
.section-toc a.active {
 background: #333;
 color: #fff;
 border-color: #333;
 box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.12) inset;
}

@media (max-width: 768px) {
 .section-toc a {
  font-size: 1rem; /* SPは少し大きく */
  padding: 12px 16px;
  border-radius: 14px;
 }
}

@media screen and (min-width: 768px) {
}
#lp-1 {
 width: 100%;
 padding: 0;
}
#section01 {
 padding-top: 25px;
 padding-bottom: 50px;
}
.section01-end {
 padding: 0;
}
.gray {
 background: #f1f1f1;
 padding-bottom: 40px;
 padding-top: 40px;
}

/* ▼ 三列構成のベーススタイル */
.section01-content.three-column-layout {
 display: flex;
 gap: 20px;
 align-items: center;
 justify-content: center;
}

.image-column {
 display: flex;
 flex-direction: column;
 gap: 20px;
 flex: 0 0 20%;
}

.section01-text-area {
 flex: 1;
}

.image-item {
 position: relative;
 overflow: hidden;
 border-radius: 4px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.right-images .image-item img {
 transform: scaleX(-1);
 transition: transform 0.3s ease;
}

.right-images .image-item:hover img {
 transform: scaleX(-1) scale(1.05);
}
.left-images .image-item img {
 transform: scaleX(-1);
 transition: transform 0.3s ease;
}

.left-images .image-item:hover img {
 transform: scaleX(-1) scale(1.05);
}
.image-item img {
 width: 100%;
 height: auto;
 object-fit: cover;
 display: block;
}

/* ▼ スマホ対応 */
@media screen and (max-width: 768px) {
 .section01-content.three-column-layout {
  flex-direction: column;
  gap: 30px;
 }

 .image-column {
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
 }

 .image-column.left-images {
  order: 1;
 }

 .section01-text-area {
  order: 2;
  padding: 0 10px;
 }

 .image-column.right-images {
  order: 3;
 }

 .image-column.left-images .image-item,
 .image-column.right-images .image-item {
  flex: 0 0 calc(50% - 8px);
 }

 /* ← 3枚目を中央揃え＆サイズ統一 */
 .image-column.left-images .image-item:nth-child(3) {
  margin-left: auto;
  margin-right: auto;
 }

 .image-item img {
  width: 100%;
  height: auto;
 }
}

/* ===============================
 *  lp-1 画像 - 左2右3レイアウト
 * =============================== */
.section01-content {
 display: flex;
 gap: 40px;
 margin-bottom: 40px;
 align-items: center;
}

@media screen and (max-width: 768px) {
 .section01-content {
  flex-direction: column;
  gap: 20px;
 }
}

.section01-text-area {
 flex: 0 0 62%;
}

.section01-images-area {
 flex: 0 0 35%;
}

@media screen and (max-width: 768px) {
 .section01-text-area,
 .section01-images-area {
  flex: 1;
 }
}

/* 画像グリッドのスタイル - 左2右3配置 */
.images-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: repeat(6, 1fr); /* 6行に分割して細かく制御 */
 gap: 15px;
 height: 100%;
}

/* 左列の画像 - 2枚を縦の中央に配置 */
.image-item:nth-child(1) {
 grid-column: 1;
 grid-row: 2 / 4; /* 2行目から4行目まで（中央上） */
}

.image-item:nth-child(2) {
 grid-column: 1;
 grid-row: 4 / 6; /* 4行目から6行目まで（中央下） */
}

/* 右列の画像 - 3枚を縦に並べる */
.image-item:nth-child(3) {
 grid-column: 2;
 grid-row: 1 / 3; /* 1行目から3行目まで */
}

.image-item:nth-child(4) {
 grid-column: 2;
 grid-row: 3 / 5; /* 3行目から5行目まで */
}

.image-item:nth-child(5) {
 grid-column: 2;
 grid-row: 5 / 7; /* 5行目から7行目まで */
}

.image-item {
 position: relative;
 overflow: hidden;
 border-radius: 4px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 aspect-ratio: 4/3; /* すべて同じ縦横比 */
}

.image-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s ease;
}

.image-item:hover img {
 transform: scale(1.05);
}

.image-caption {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
 color: white;
 padding: 15px 6px 6px;
 font-size: 0.75rem;
 text-align: center;
 font-weight: 500;
}

@media screen and (max-width: 768px) {
 .images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列グリッド */
  gap: 12px;
 }

 /* 他の画像は通常2列 */
 .image-item {
  aspect-ratio: 4/3;
  min-height: auto;
 }

 .image-caption {
  font-size: 0.9rem;
  padding: 20px 8px 8px;
 }
}

/* 既存のマルチクレールスタイルを無効化 */
.lp-1-marquee {
 display: none;
}

.section01-title {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-bottom: 30px;
}
.section01-title h1 {
 font-size: 2.2em;
}
@media screen and (min-width: 768px) {
 .section01-title h1 {
  font-size: 3em;
 }
}
.red {
 color: #cc0000;
}
.section01-text p {
 flex: 1;
 font-size: 1rem;
 line-height: 1.8;
 color: #333;
}
@media screen and (min-width: 768px) {
 .section01-text p {
  flex: 1;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333;
 }
}
.section01-text02 {
 flex: 1;
 font-size: 1rem;
 line-height: 1.8;
 color: #333;
}
@media (min-width: 768px) {
 .section01-text02 {
  flex: 1;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #333;
 }
}
.section01-text p {
 margin: 0 0 1.8em;
}
.section01-flex {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
 padding-top: 35px;
}
/* ===============================
 *  section02
 * =============================== */
#section02 {
 padding: 50px 0;
}
.lp-1-section02 {
}

.logo-flex {
 margin: 0px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
@media screen and (min-width: 768px) {
 .logo-flex {
  margin: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
}
.section02-header {
 width: 100%;
 height: 15vw;
 max-height: 140px;
 overflow: hidden;
}
@media screen and (min-width: 768px) {
 .section02-header {
  width: 100%;
  height: 13vw;
  max-height: 400px;
  overflow: hidden;
 }
}
.section02-header img {
 width: 100%;
 height: 100%; /* ← 高さ固定に変更 */
 object-fit: cover; /* はみ出しはトリミング */
}
@media screen and (min-width: 768px) {
 .section02-header img {
  width: 100%;
  height: auto;
  display: block;
 }
}
.section02-header02 {
 width: 100%;
 height: auto;
 max-height: 140px;
 overflow: hidden;
 padding: 25px 0;
}
@media screen and (min-width: 768px) {
 .section02-header02 {
  width: 100%;
  height: auto;
  max-height: 400px;
  overflow: hidden;
 }
}
.section02-header02 img {
 width: 100%;
 height: 100%; /* ← 高さ固定に変更 */
 object-fit: cover; /* はみ出しはトリミング */
}
@media screen and (min-width: 768px) {
 .section02-header02 img {
  width: 100%;
  height: auto;
  display: block;
 }
}
.lp-1-section02 .wrap-s {
 text-align: center;
 margin-top: 40px;
}
@media screen and (min-width: 768px) {
 .lp-1-section02 .wrap-s {
  text-align: center;
  margin-top: 40px;
 }
}
.section02-logo-row {
 display: flex;
 justify-content: space-between;
 gap: 30px;
 flex-wrap: wrap;
 margin-bottom: 20px;
 padding: 0 20px;
}
@media screen and (min-width: 768px) {
 .section02-logo-row {
  display: flex;
  justify-content: space-between;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0;
 }
}
.section02-logo-row a img {
 height: 60px;
 display: block;
}
.section02-series {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 padding: 0 20px;
}
@media screen and (min-width: 768px) {
 .section02-series {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0;
 }
}
.section02-series img {
 height: 33px;
}
@media screen and (min-width: 768px) {
 .section02-series img {
  height: 40px;
 }
}
.section02-text p {
 flex: 1;
 font-size: 1rem;
 line-height: 1.8;
 color: #333;
}
@media screen and (min-width: 768px) {
 .section02-text p {
  flex: 1;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #333;
 }
}
.section02-1 {
 padding: 50px 0;
}
.section02-text p {
 margin: 0 0 1.8em;
}
.section02-circles {
 display: flex;
 justify-content: space-between;
 flex-wrap: nowrap;
 gap: 0px;
 margin-top: 40px;
}
@media screen and (min-width: 768px) {
 .section02-circles {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 40px;
  margin-top: 40px;
 }
}
.circle {
 background-color: #ff6400;
 color: #fff;
 width: 270px;
 height: 270px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 font-weight: bold;
 font-size: 2.7rem;
 line-height: 1.6;
 padding: 10px;
}

@media (max-width: 768px) {
 .circle {
  width: 115px;
  height: 115px;
  font-size: 1.2rem;
 }
}
.circle span {
 text-align: center;
}

/* ===============================
 *  section02-2
 * =============================== */
.section02-2 {
 padding-top: 30px;
 background-color: #fff;
}
@media screen and (min-width: 768px) {
 .section02-2 {
  padding-block: 60px;
  background-color: #fff;
 }
}
.section02-2-image {
 text-align: center;
 margin-bottom: 30px;
}

.section02-2-image img {
 max-width: 100%;
 height: auto;
 display: inline-block;
}

.section02-2-text {
 font-size: 1rem;
 line-height: 1.8;
 color: #333;
 padding: 0px;
}
@media screen and (min-width: 768px) {
 .section02-2-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  padding: 0 40px;
 }
}
.section02-2-text p {
 margin: 0 0 1.8em;
}

/* ===============================
 *  section02-3
 * =============================== */
.section02-3-header-text {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 40px 0;
}
.section02-3-header-text h1 {
 font-size: 1.8em;
}
@media (min-width: 768px) {
 .section02-3-header-text h1 {
  font-size: 2em;
 }
}
.section02-3-flex {
 display: flex;
 gap: 30px;
 flex-wrap: wrap;
 justify-content: center;
 padding-bottom: 40px;
 flex-direction: column;
}
@media (min-width: 768px) {
 .section02-3-flex {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 40px;
  flex-direction: row;
 }
}
.section02-3-item {
 flex: 1 1 45%;
 text-align: center;
}

.section02-3-item img {
 width: 100%;
 height: auto;
 display: block;
}

.section02-3-item .caption {
 background: #7a99a3;
 color: #fff;
 font-weight: bold;
 padding: 10px 0px;
 /* margin-top: 10px; */
 font-size: 1rem;
 text-align: center;
}
@media (min-width: 768px) {
 .section02-3-item .caption {
  background: #7a99a3;
  color: #fff;
  font-weight: bold;
  padding: 10px 0px;
  /* margin-top: 10px; */
  font-size: 1rem;
  text-align: center;
 }
}
/* ===============================
 *  section02-4
 * =============================== */
.section02-4 {
 padding-top: 60px;
 background-color: #fff;
}
.section02-4-header02 {
 padding-top: 50px;
}
.section02-4-header h1 {
 text-align: center;
 font-size: 1.5rem;
 font-weight: bold;
 margin-bottom: 40px;
}
@media (min-width: 768px) {
 .section02-4-header h1 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 40px;
 }
}
.section02-4-flex {
 display: flex;
 gap: 40px;
 align-items: center;
 padding-bottom: 50px;
 flex-wrap: wrap;
 flex-direction: column;
 max-width: 1200px;
}

.section02-4-image {
 flex: 1 1 45%;
}

.section02-4-image img {
 width: 100%;
 height: auto;
 display: block;
 border: 1px solid #ccc;
}

.section02-4-content {
 flex: 1 1 50%;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.unit-title {
 font-size: 1.1rem;
 font-weight: bold;
 margin-bottom: 10px;
}
@media (min-width: 768px) {
 .unit-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
 }
}
.unit-title02 {
 font-size: 1.1rem;
 font-weight: bold;
 margin-top: 20px;
 margin-bottom: 10px;
}
@media (min-width: 768px) {
 .unit-title02 {
  font-size: 1.3rem;
  margin-top: 20px;
  font-weight: bold;
  margin-bottom: 10px;
 }
}
.unit-description {
 font-size: 1rem;
 margin-bottom: 20px;
}
@media (min-width: 768px) {
 .unit-description {
  font-size: 1.1rem;
  margin-bottom: 20px;
 }
}
.unit-spec-table {
 width: 1200px;
 border-collapse: collapse;
 font-size: 1.2rem;
}

.unit-spec-table th,
.unit-spec-table td {
 border: 1px solid #ccc;
 padding: 10px;
 vertical-align: top;
 text-align: left;
}

.unit-spec-table th {
 background-color: #f3f3f3;
 white-space: nowrap;
}

.unit-spec-table th,
.unit-spec-table td {
 border: 1px solid #ccc;
 padding: 10px;
 vertical-align: top;
 text-align: left;
}

.unit-spec-table th {
 background-color: #f3f3f3;
 white-space: nowrap;
}

@media screen and (max-width: 767px) {
 .unit-spec-table,
 .unit-spec-table thead {
  display: block;
  width: auto;
 }

 .unit-spec-table tr {
  display: block;
  border: 1px solid #ccc;
  margin-bottom: 16px;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
 }

 .unit-spec-table th,
 .unit-spec-table td {
  display: block;
  width: 100%;
  border: none;
  padding: 4px 0;
  font-size: 0.95rem;
 }

 .unit-spec-table th {
  font-weight: bold;
  background: transparent;
  margin-bottom: 4px;
 }

 .unit-spec-table td {
  font-size: 0.95rem;
  color: #333;
 }
}

/* ===============================
 *  section02-5
 * =============================== */
.section02-5 {
 padding-top: 30px;
 background-color: #fff;
}
@media (min-width: 768px) {
 .section02-5 {
  padding-top: 60px;
  padding-bottom: 1px;
  background-color: #fff;
 }
}
.section02-5-header h1 {
 text-align: center;
 font-size: 1.5rem;
 font-weight: bold;
 margin-bottom: 40px;
}
@media (min-width: 768px) {
 .section02-5-header h1 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 40px;
 }
}
.section02-5-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 20px;
 margin: 0 auto;
 text-align: center;
}

.option-item img {
 width: 100%;
 height: auto;
 margin: 0 auto 10px;
 background: #eee; /* 仮の背景（画像が未設定の場合） */
}

.option-item p {
 text-align: center;
 font-size: 0.95rem;
 font-weight: 500;
}
@media (min-width: 768px) {
 .option-item p {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
 }
}
/* モバイルで3つ折り返し */
@media (max-width: 768px) {
 .section02-5-grid {
  gap: 15px;
  grid-template-columns: repeat(2, 1fr);
 }
}
.section02-4-textarea {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.section02-4-areas {
 max-width: 900px;
}
/* ===============================
 *  section03
 * =============================== */
.section03 {
 background-color: #c80000;
 color: #fff;
 padding-block: 40px;
 text-align: center;
}
@media screen and (min-width: 768px) {
 .section03 {
  background-color: #c80000;
  color: #fff;
  padding-block: 80px;
  text-align: center;
 }
}
.section03-header img {
 width: 60px;
 height: auto;
 margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
 .section03-header img {
  min-width: 80px;
  height: auto;
  margin-bottom: 20px;
 }
}
.section03-header h1 {
 font-size: 2rem;
 font-weight: bold;
 margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
 .section03-header h1 {
  font-size: 2.7rem;
  font-weight: bold;
  margin-bottom: 60px;
 }
}
.section03-grid {
 display: flex;
 gap: 40px;
 flex-wrap: wrap;
 justify-content: center;
}

.section03-item {
 flex: 1 1 45%;
 text-align: left;
}

.section03-item img {
 width: 100%;
 height: auto;
 border: 1px solid #fff;
 margin-top: 10px;
}

.section03-label {
 font-weight: bold;
 margin-bottom: 8px;
 font-size: 1.4rem;
}
.section03-header {
 display: flex;
 flex-direction: column;
 align-items: center;
}

/* === モーダルレイヤー === */
.gallery-modal {
 position: fixed;
 inset: 0;
 z-index: 9999;
 display: none; /* 初期は非表示 */
}

.gallery-modal.active {
 display: block;
}

.gallery-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.7);
}

/* === モーダルラッパー === */
.gallery-wrapper {
 position: fixed; /* ← absolute ではなく fixed に */
 top: 50%;
 left: 48%;
 transform: translate(-50%, -50%);
 width: 90vw; /* ビューポート幅の 90% */
 max-width: 900px; /* PC では 900px 上限 */
 height: 80vh; /* 高さは 80% */
 max-height: 600px; /* 任意の上限 */
 background: #000;
 overflow: hidden; /* はみ出し防止 */
 border-radius: 8px;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
@media screen and (min-width: 768px) {
 .gallery-wrapper {
  position: fixed; /* ← absolute ではなく fixed に */
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 90vw; /* ビューポート幅の 90% */
  max-width: 900px; /* PC では 900px 上限 */
  height: 80vh; /* 高さは 80% */
  max-height: 600px; /* 任意の上限 */
  background: #000;
  overflow: hidden; /* はみ出し防止 */
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
 }
}
/* スマホでは高さ優先、横幅を100%付近に */
@media (max-width: 767px) {
 .gallery-wrapper {
  width: 96vw;
  height: 45vh;
  max-height: 90vh;
 }
}

/* 画像は余白なしで中央フィット */
.gallery-wrapper img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.gallery-close {
 position: absolute;
 top: 8px;
 right: 12px;
 font-size: 2rem;
 color: #fff;
 background: transparent;
 border: none;
 cursor: pointer;
 z-index: 2;
}

/* ===============================
 *  section04
 * =============================== */
.section04 {
 background-color: #f3f3f3;
 padding-block: 50px;
}
@media screen and (min-width: 768px) {
 .section04 {
  background-color: #f3f3f3;
  padding-block: 80px;
 }
}
.section04-header {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
 margin-bottom: 40px;
}

.section04-header h1 {
 font-size: 2rem;
 font-weight: bold;
 margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
 .section04-header h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 16px;
 }
}
.section04-header p {
 text-align: center;
 font-size: 1.1rem;
 color: #333;
 line-height: 1.6;
}

.faq-box {
 background: #fff;
 padding: 15px;
 border-radius: 4px;
 margin: 0 auto 30px;
 border: 1px solid #ccc;
}
@media screen and (min-width: 768px) {
 .faq-box {
  background: #fff;
  padding: 30px 40px;
  border-radius: 4px;
  margin: 0 auto 30px;
  border: 1px solid #ccc;
 }
}
.faq-q,
.faq-a {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 margin-bottom: 22px;
 font-size: 1rem;
 flex-direction: column;
}
@media screen and (min-width: 768px) {
 .faq-q,
 .faq-a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 1.1rem;
  flex-direction: row;
 }
}
.faq-a {
 margin-left: 0px;
}
@media screen and (min-width: 768px) {
 .faq-a {
  margin-left: 20px;
 }
}
.faq-label {
 font-weight: bold;
 color: #a03700; /* 赤茶系 Qラベル色 */
 white-space: nowrap;
}

.faq-q p {
 font-weight: bold;
 color: #a03700;
 font-size: 1.1rem;
 margin: 0;
}

.faq-a p {
 margin: 0;
 font-size: 1rem;
 color: #333;
 line-height: 1.8;
}
@media screen and (min-width: 768px) {
 .faq-a p {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.8;
 }
}
/* ---- フッター全体 ---- */
.site-footer {
 width: 100%;
 background: #597683; /* 画像の青灰色に近い色 */
 padding: 30px 0; /* 上下余白 */
 text-align: center;
}

/* ---- コピーライト文字 ---- */
.footer-copylp {
 margin: 0;
 font-size: 0.95rem; /* 13〜15px 程度 */
 color: #fff;
 letter-spacing: 0.05em;
 text-align: center;
}

/* 🖥 PC で少し大きくしたい場合 */
@media (min-width: 768px) {
 .footer-copylp {
  font-size: 1.05rem;
 }
}
.intro-title-box {
 background: #7a99a3;
 padding: 20px;
 text-align: center;
 margin-top: 40px;
}
@media (max-width: 768px) {
 .intro-title-box {
  background: #7a99a3;
  padding: 20px;
  text-align: center;
  margin-top: 10px;
 }
}
.intro-title {
 text-align: center;
 font-size: 1.5rem;
 color: #fff;
 line-height: 1.8;
 font-weight: bold;
}
@media (min-width: 768px) {
 .intro-title {
  text-align: center;
  font-size: 2rem;
  color: #fff;
  line-height: 1.8;
  font-weight: bold;
 }
}
.intro-title .series {
 font-size: 1.5rem;
 font-weight: bold;
}
@media (min-width: 768px) {
 .intro-title .series {
  font-size: 2rem;
  font-weight: bold;
 }
}
.intro-lead {
 margin-top: 25px;
 margin-bottom: 35px;
}
.intro-lead p {
 font-size: 1.4rem;
 line-height: 1.6;
 text-align: justify;
}
@media (min-width: 768px) {
 .intro-lead p {
  font-size: 1.8rem;
  line-height: 1.8;
  text-align: justify;
 }
}
.red {
 color: #cc0000;
 font-weight: bold;
}
.black {
 color: #000;
 font-weight: bold;
}
/* ========== GRAN / SPOT 縦並び構成 ========== */
.product-block {
 margin-bottom: 60px;
 text-align: center;
}

.product-block img {
 width: 100%;
 height: auto;
 display: block;
 margin: 0 auto;
}

.caption-block {
 background-color: #8b0000; /* 濃い赤 */
 color: #fff;
 padding: 20px 10px;
 text-align: center;
}

.caption-title {
 font-size: 1.4rem;
 font-weight: bold;
 margin-bottom: 8px;
}

.caption-sub {
 font-size: 1rem;
 opacity: 0.85;
}

/* ========== 商品コンセプト説明 ========== */
.product-concept-box {
 margin-top: 30px;
 padding: 0px;
 background: #fff;
}
@media (min-width: 768px) {
 .product-concept-box {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
 }
}
.product-concept-box h2 {
 font-size: 1.6rem;
 text-align: center;
 font-weight: bold;
 margin-bottom: 15px;
}
@media (min-width: 768px) {
 .product-concept-box h2 {
  font-size: 2.5rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 25px;
 }
}
.product-concept-box ul {
 list-style: disc;
 padding-left: 1.5em;
}
.product-concept-box li {
 font-size: 1.1rem;
 line-height: 1.8;
 margin-bottom: 10px;
}
@media (min-width: 768px) {
 .product-concept-box li {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 10px;
 }
}
/* === section02 写真エリア：最初の1枚を大きく、以降は小さめ === */
.main-photo-block {
 margin: 24px auto 36px;
 text-align: center;
}
.main-photo-block02 {
 margin: 5px auto 20px;
 text-align: center;
}
@media (min-width: 768px) {
 .main-photo-block02 {
  margin: 24px auto 36px;
  text-align: center;
 }
}
.main-photo-block img {
 width: 100%;
 height: auto;
 display: block;
 margin: 0 auto;
}
.main-photo-block02 img {
 width: 100%;
 height: auto;
 display: block;
 margin: 0 auto;
}
.caption-large {
 font-size: 1.12rem;
 font-weight: 700;
}

.photo-gallery-row {
 display: flex;
 flex-wrap: nowrap;
 gap: 10px;
 align-items: flex-start;
 justify-content: space-between;
 flex-direction: column;
}
@media (min-width: 768px) {
 .photo-gallery-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
 }
}
.gallery-item {
 text-align: center;
}
.gallery-item img {
 width: 100%;
 height: auto;
 display: block;
 border: 1px solid #ddd;
}

/* サイズバリエーション */
.gallery-item.medium {
 flex: 0 1 400px;
}
.gallery-item.small {
 flex: 0 1 360px;
}

/* SP最適化 */
@media (max-width: 768px) {
 .main-photo-block img {
  max-width: 100%;
 }
 .gallery-item.medium {
  flex: 1 1 100%;
 }
 .gallery-item.small {
  flex: 1 1 calc(50% - 10px);
 }
 .caption-large {
  font-size: 1.05rem;
 }
}
/* 左上ラベル */
.photo-label {
 position: absolute;
 top: 12px;
 left: 12px;
 background: #657e86;
 color: #fff;
 font-size: 1.1rem;
 font-weight: bold;
 padding: 5px 15px;
 border-radius: 4px;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 z-index: 2;
}
@media (min-width: 768px) {
 .photo-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #657e86;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 2;
 }
}
/* ラベルを正しく表示するための親要素調整 */
.main-photo-block,
.gallery-item {
 position: relative;
}
.main-photo-row {
 display: flex;
 gap: 0px;
 margin-bottom: 10px;
 flex-wrap: wrap;
 flex-direction: column;
}
@media (min-width: 768px) {
 .main-photo-row {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  flex-direction: row;
 }
}
.main-photo-block {
 flex: 1 1 48%;
 position: relative;
}
.main-photo-block02 {
 flex: 1 1 48%;
 position: relative;
}

/* ▼ 電話＋メール：親ボックス背景 */
.contact-call-box {
 background-color: #597683; /* くすみブルー */
 padding: 40px 20px;
}

.contact-call-inner {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 30px;
 max-width: 960px;
 margin: 0 auto;
}

/* ▼ 個別ボックス（クリック範囲全体） */
.contact-call-item {
 background: transparent;
 border: 1px solid #fff;
 border-radius: 8px;
 width: 430px;
 text-align: center;
 position: relative;
 overflow: hidden;
 cursor: pointer;
}

/* ▼ クリック範囲を拡張 */
.contact-call-item .main-link {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 30px 20px;
 text-decoration: none;
 color: #fff;
 height: 100%;
 width: 100%;
 transition: background-color 0.3s ease;
}

.contact-call-item .main-link:hover {
 background-color: rgba(255, 255, 255, 0.1);
}

/* ▼ 見出しテキスト */
.contact-call-item .label {
 font-size: 1.4rem;
 font-weight: bold;
 margin: 0 0 10px;
 line-height: 1.4;
}
@media (min-width: 768px) {
 .contact-call-item .label {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 10px;
  line-height: 1.4;
 }
}
/* ▼ 下の行にアイコンとテキストを表示 */
.contact-call-item .text {
 font-size: 1.5rem;
 font-weight: bold;
 display: flex;
 align-items: center;
 gap: 8px;
 line-height: 1.4;
}

/* ▼ アイコンサイズ */
.contact-call-item .text i {
 font-size: 1.2rem;
}

/* ▼ スマホ対応 */
@media screen and (max-width: 768px) {
 .contact-call-inner {
  flex-direction: column;
  align-items: center;
 }

 .contact-call-item {
  width: 90%;
 }
}

.photo-flex-block {
 display: flex;
 gap: 24px;
 flex-wrap: wrap;
 margin-bottom: 40px;
 align-items: flex-start;
}

/* 左の大きな画像 */
.photo-main-image {
 flex: 1 1 45%;
 position: relative;
}
.photo-main-image img {
 width: 100%;
 height: auto;
 display: block;
}

/* 右のサムネイル集 */
.photo-side-gallery {
 position: relative;
 flex: 1 1 38%;
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 justify-content: space-between;
}

.photo-thumb-item {
 flex: 0 1 48%;
 text-align: center;
}
.photo-thumb-item img {
 width: 100%;
 height: auto;
 border: 1px solid #ddd;
}

.photo-thumb-caption {
 font-size: 0.9rem;
 margin-top: 6px;
 color: #333;
}

.photo-thumb-label {
 position: absolute;
 top: 12px;
 left: 12px;
 background: #657e86;
 color: #fff;
 font-size: 1.3rem;
 font-weight: bold;
 padding: 5px 15px;
 border-radius: 4px;
 z-index: 2;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
 .photo-flex-block {
  flex-direction: column;
 }

 .photo-side-gallery {
  flex-direction: row;
  gap: 10px;
 }

 .photo-thumb-item {
  flex: auto;
 }

 .photo-thumb-label {
  font-size: 1rem;
  padding: 4px 10px;
 }
}
.section03-caption {
 font-size: 1.2rem;
 color: #fff;
 margin-top: 6px;
 text-align: center;
}
/* section02-4 画像2枚を横並び */
.section02-4-images {
 display: flex;
 gap: 40px;
 justify-content: center;
 margin-bottom: 30px;
}

.section02-4-images .section02-4-image {
 flex: 1 1 45%;
 text-align: center;
}

.section02-4-images img {
 width: 100%;
 height: auto;
 display: block;
 border: 1px solid #ccc;
}

/* スマホでは縦並び */
@media (max-width: 768px) {
 .section02-4-images {
  flex-direction: column;
  gap: 20px;
 }
}
.section02-4-flex-main {
 display: flex;
 flex-direction: column;
 align-items: center;
}
/* ===== 会社概要セクション ===== */
.company-sec {
 margin: 60px auto;
}

.company-title {
 font-size: 1.8rem;
 font-weight: bold;
 margin-bottom: 30px;
 text-align: center;
 color: #333;
}

.company-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 1rem;
}

.company-table th,
.company-table td {
 border: 1px solid #ccc;
 padding: 12px 16px;
 vertical-align: top;
 text-align: left;
}

.company-table th {
 width: 20%;
 background-color: #f5f5f5;
 font-weight: bold;
 white-space: nowrap;
}

/* 事業所の中の dl 表記 */
.company-table td dl {
 margin: 0 0 15px;
}

.company-table td dt {
 font-weight: bold;
 margin-bottom: 4px;
 color: #597683; /* 赤アクセント */
}

.company-table td dd {
 margin: 0 0 10px;
 font-size: 0.95rem;
 line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
 .company-table,
 .company-table tbody,
 .company-table tr,
 .company-table th,
 .company-table td {
  display: block;
  width: 100%;
 }

 .company-table th {
  background: #eee;
  padding: 10px;
  border-bottom: none;
 }

 .company-table td {
  padding: 10px 15px;
  border-top: none;
  border-bottom: 1px solid #ccc;
 }
}
/* フッターリンク基本スタイル */
.footer-link {
 color: #fff;
 text-decoration: none;
 position: relative;
 padding-bottom: 2px;
 transition: color 0.3s ease;
}

/* 下線風エフェクト（アニメーション） */
.footer-link::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 height: 2px;
 width: 100%;
 background-color: #fff;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease;
}

/* ホバー時に強調 */
.footer-link:hover {
 color: #ffe8e8;
}

.footer-link:hover::after {
 transform: scaleX(1);
}