@charset "UTF-8";

/* ============================================
   共通設定・変数
   ============================================ */
:root {
  --main-blue: #5fa8d3;
  /* 指定のブルー */
  --text-white: #ffffff;
  --text-black: #1b4965; /* デザインカンプ指定の濃紺 */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-title:
    "BIZ UDPGothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo,
    sans-serif;
}

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  color: var(--text-white);
  line-height: 1.6;
  background-color: var(--main-blue);
  /* 全体の背景色 */
  margin: 0;
}

/* リンクの基本設定 */
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

/* ============================================
   ヘッダー（PCでもハンバーガーメニュー）
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px; /* デザインカンプに合わせて低く */
  z-index: 1000;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ロゴ周辺 */
.header__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ヘッダーロゴ（基本はスクロール時に表示） */
.header__logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-black);
  letter-spacing: 0.05em;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* スクロール時に表示 */
.header.is-scrolled .header__logo {
  opacity: 1;
  visibility: visible;
}

/* PC版のみヘッダー左上に常時表示 */
@media screen and (min-width: 769px) {
  .header__logo {
    opacity: 1;
    visibility: visible;
  }
}

/* ヘッダーの右側（電話番号・CTA・ハンバーガー） */
.header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 15px; /* 各要素の間隔 */
}

/* 電話番号 */
.header__tel {
  font-size: 1rem;
  font-weight: 700;
  color: #1b4965;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* お問い合わせボタン */
.header__cta {
  display: inline-block;
  padding: 6px 15px;
  border: 1px solid #1b4965;
  border-radius: 20px;
  color: #1b4965;
  font-weight: 700;
  font-size: 0.8rem;
  background-color: #fff;
  transition: all 0.3s;
  white-space: nowrap;
}

.header__cta:hover {
  background-color: #1b4965;
  color: #fff;
}

/* ハンバーガーメニューボタン */
.hamburger-menu {
  position: relative;
  width: 30px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  flex-shrink: 0;
}

/* ハンバーガーの3本線 */
.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #1b4965;
  position: absolute;
  left: 0;
  transition: all 0.4s;
}

.hamburger-menu span:nth-child(1) {
  top: 0;
}

.hamburger-menu span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-menu span:nth-child(3) {
  bottom: 0;
}

/* ハンバーガーが開いた時の×印アニメーション */
.hamburger-menu.is-active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger-menu.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.is-active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* 閉じるボタン（×） */
.menu-close {
  display: none;
}

/* ナビゲーションメニュー（スライドイン） */
.header__nav {
  position: fixed;
  top: 0;
  right: -100%;
  /* 最初は画面外（右）に隠す */
  width: 300px;
  /* メニュー幅 */
  height: 100vh;
  background-color: #fff;
  color: var(--text-black);
  /* メニュー内は黒文字 */
  padding-top: 100px;
  transition: right 0.4s ease-in-out;
  z-index: 1000;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

/* JSでクラスがついた時に表示 */
.header__nav.is-active {
  right: 0;
}

.header__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header__nav li a {
  display: block;
  padding: 20px 40px;
  font-weight: 700;
}

/* ============================================
   ヒーローエリア
   ============================================ */
/* ============================================
   ヒーローエリア（メインビジュアル）
   ============================================ */
.hero-main {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面いっぱいの高さ */
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 50px; /* ヘッダー分 */
  box-sizing: border-box;
  overflow: hidden; /* poemのはみ出しを制御 */
  z-index: 1;
}

/* 背景画像（斜め切り抜き） */
.hero-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/hero-main.webp");
  background-size: cover;
  background-position: center 40%; /* 建物を中央寄りに、空を上部に見せる */
  background-attachment: fixed; /* 背景を固定 */
  /* 斜めの切り抜き：左下(0 100%)から右側少し上(100% 85%)へ */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  z-index: -1;
}

/* オレンジ色のライン削除 */
/* .hero-main::after {
    content: "";
    ...
} */

/* 青いオーバーレイ（画像のみに掛ける場合） */
/* 必要であれば .hero-main::before に filter や linear-gradient を追加するか、
   もう一層追加しますが、今回はデザインカンプのクリアな感じに合わせます */

.hero-main__inner {
  width: 90%;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  color: #fff;
  /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);  不要なシャドウ削除 */
}

/* タイトル */
.hero-title {
  font-family: var(--font-title);
  font-size: clamp(
    2rem,
    5vw,
    3.5rem
  ); /* レスポンシブ対応: 最小2rem、最大3.5rem */
  font-weight: 700;
  color: #1b4965;
  letter-spacing: 0.15em; /* カーニング調整 */
  line-height: 1.3;
  margin-bottom: 15px;
  white-space: nowrap; /* 改行防止 */
  /* 白いフチ取り（細め） */
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* フェードインアニメーション */
  opacity: 0;
  animation: fadeInFromTop 1s ease-out forwards;
}

.hero-sub {
  font-family: var(--font-title);
  font-size: clamp(1rem, 2vw, 1.4rem); /* フォントサイズ拡大 */
  font-weight: 700;
  color: #1b4965;
  margin-bottom: 40px;
  letter-spacing: 0.1em; /* カーニング調整 */
  white-space: nowrap; /* 改行防止 */
  /* 白いフチ取り（細め） */
  -webkit-text-stroke: 1px #fff;
  paint-order: stroke fill;
  /* フェードインアニメーション（0.3秒遅延） */
  opacity: 0;
  animation: fadeInFromTop 1s ease-out 0.3s forwards;
}

/* ============================================
   ヒーローエリア（イントロダクション）
   ============================================ */
.hero-intro {
  background-color: var(--main-blue); /* 背景色：青 */
  color: #fff;
  padding: 60px 0 100px; /* 左右paddingはinnerで制御するので0に */
  position: relative;
  z-index: 0;
}

.hero-intro__inner {
  width: 90%;
  max-width: 1200px; /* 上のメインビジュアルと合わせる */
  margin: 0 auto;
  text-align: left; /* 左揃え */
}

.hero-intro h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: 700;
}

.hero-intro p {
  font-size: 1rem;
  line-height: 2;
  /* text-align: left;  親で指定しているので不要だが明記しても良い */
}

/* バナーのキラッと光るホバーエフェクト */
.shiny-banner {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.shiny-banner:hover {
  opacity: 1 !important; /* グローバルリンクのopacityを無効化 */
}

.shiny-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  z-index: 2;
}

.shiny-banner:hover::before {
  animation: shine-effect 0.6s ease-in-out;
}

@keyframes shine-effect {
  0% {
    left: -150%;
  }
  100% {
    left: 200%;
  }
}

/* ============================================
   フェードインアニメーション（上から下へ）
   ============================================ */
@keyframes fadeInFromTop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   流れるテキスト（#poem）アニメーション
   ============================================ */
#poem {
  position: absolute;
  bottom: 15%;
  left: 0;
  width: max-content; /* テキストの実際の幅に合わせる */
  white-space: nowrap;
  font-size: 2.5rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  opacity: 0; /* 開始前は非表示 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
  pointer-events: none;
  transform: translateX(100vw); /* 開始前は画面外に配置 */

  /* アニメーション設定: 2秒遅延後にスタート */
  animation: scroll-text 50s linear 2s infinite;
  animation-fill-mode: forwards;
}

@keyframes scroll-text {
  0% {
    opacity: 0.8;
    transform: translateX(100vw); /* 画面右端からスタート */
  }
  100% {
    opacity: 0.8;
    transform: translateX(-100%); /* テキスト全体が左に出るまで */
  }
}

/* ============================================
   サービス案内セクション
   ============================================ */
.service-section {
  background-color: var(--main-blue);
  padding: 120px 5%; /* ゆとりのある余白 */
  color: #fff;
}

.service-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: left; /* 左上配置（カンプ参照） */
  margin-bottom: 60px; /* 余白を拡大 (40px -> 60px) */
  letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
  .service-title {
    margin-bottom: 40px; /* スマホでは40pxに戻す */
    font-size: 2rem; /* スマホ用フォントサイズ調整 */
  }
}

/* 2カラムレイアウト（PC） */
.service-wrapper {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

/* スマホ表示（縦並び） */
@media screen and (max-width: 768px) {
  .service-wrapper {
    flex-direction: column;
    gap: 40px; /* スマホ時のボックス間隔を追加 */
  }
}

/* サービスラッパー（PC） */
.service-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 40px; /* PC時のボックス間隔を追加（余白確保） */
}

/* サービスボックス（枠） */
.service-box {
  flex: 1;
  border: 2px solid #fff;
  padding: 5%; /* 余白を拡大 */
  box-sizing: border-box;
}

.box-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
}

.box-title .highlight {
  font-size: 2.4rem; /* テナント様/オーナー様を大きく */
  display: block; /* 改行 */
  margin-top: 5px;
}

.box-desc {
  margin-bottom: 40px;
  font-size: 1rem;
  line-height: 1.8;
}

/* フローリスト */
.flow-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.flow-item {
  position: relative;
  /* 矢印（下）のスペースを確保するためmargin-bottom */
  margin-bottom: 30px;
}

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

/* 矢印（各アイテムの間） */
.flow-item:not(:last-child)::after {
  content: ""; /* V字を作成する簡易的な方法 or 画像 */
  position: absolute;
  bottom: -22px;
  left: 20px; /* 番号の下あたりに配置、調整必要 */
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* ステップの白い帯 */
.step-label {
  display: block;
  background-color: #fff;
  color: var(--text-black);
  padding: 15px 20px;
  font-weight: 700;
  border-radius: 4px;
  position: relative; /* ポップアップ位置基準 */
}

/* ステップ内のコンテンツラッパー（フレックスで横並び） */
.step-content {
  display: flex;
  align-items: center;
  position: relative; /* ポップアップ位置基準 */
}

.step-content .step-label {
  flex: 1; /* 幅いっぱい */
}

/* ポップアップトリガーボタン（？） */
.btn-popup-trigger {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #00cfc1; /* グリーン */
  color: #fff;
  border: 2px solid #fff;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2;
  position: absolute; /* 絶対配置に変更 */
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(50%, -50%); /* 右端の中心に乗るように調整 */
}

/* ポップアップコメント（吹き出し） */
.popup-comment {
  display: none; /* 初期非表示 */
  position: absolute;
  /* 上下配置（ボタンの下側に表示） */
  top: 100%;
  right: -10px; /* ボタンの右端に合わせて配置（少しはみ出し許容） */
  left: auto; /* 左基準をリセット */
  transform: none; /* 中央揃え解除 */
  margin-top: 15px; /* ボタンとの距離 */

  background-color: #00cfc1;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 280px;
  font-size: 0.95rem;
  line-height: 1.6;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 吹き出しの三角（上向き ▲） */
.popup-comment::before {
  content: "";
  position: absolute;
  bottom: 100%; /* 上側に配置 */
  right: 18px; /* ボタンの中心付近に来るように調整 */
  left: auto;
  transform: none;
  border-style: solid;
  border-width: 0 10px 10px 10px; /* 上向き三角形 */
  border-color: transparent transparent #00cfc1 transparent;
}

/* スマホでのポップアップ調整 */
@media screen and (max-width: 768px) {
  .popup-comment {
    width: 260px;
    right: 0; /* 右端合わせ */
  }
}

/* アクティブ時に表示 */
.popup-comment.is-active {
  display: block;
  animation: fadeIn 0.3s ease;
}

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

/* スマホ専用改行（PCでは非表示） */
.sp-br {
  display: none;
}

/* -------------------------------------------
   ヒーローエリアのレスポンシブ微調整
------------------------------------------- */
@media screen and (max-width: 768px) {
  .sp-br {
    display: inline;
  }
  .hero-title {
    font-size: 2.6rem !important; /* H2(2rem)より明確に大きく、画面に収まるバランス */
    line-height: 1.3 !important;
    white-space: normal !important;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    -webkit-text-stroke: 0 !important;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
  }
  .hero-title .cross-mark {
    font-size: 1.5rem; /* ×マークは少し小さくしてバランスをとる */
    vertical-align: middle;
    margin: 10px 0;
    display: inline-block;
  }
  .hero-sub {
    font-size: 1.2rem !important;
    white-space: normal !important;
    letter-spacing: 0.05em;
    line-height: 2;
  }
  #poem {
    font-size: 2rem;
    bottom: 10%;
  }
  /* 背景画像のclip-path調整 */
  .hero-main::before,
  .hero-main::after {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
}

/*　実績紹介
   ============================================ */
.works-section {
  background-color: var(--main-blue); /* 背景色：青 */
  padding: 120px 0; /* ゆとりのある余白 */
  color: #fff;
  overflow: hidden; /* コンテナからはみ出るスライドを制御 */
}

.works-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: 40px;
  padding-left: 5%; /* スライダーの左端（padding-left: 5%）と合わせる */
  /* max-width: 1200px;  <-- 削除: スライダーが全幅のため、タイトルも合わせる */
  /* margin-left: auto; */
  /* margin-right: auto; */
}

/* スライダーコンテナ */
#works-slider {
  padding-left: 5%; /* 左端の開始位置を調整 */
}

/* カードのデザイン */
.works-card {
  border: 2px solid #fff;
  box-sizing: border-box;
  position: relative;
  /* 背景画像がある場合はここに設定するか、imgで配置 */
  background-color: transparent; /* 背景は透過 */
  min-height: 350px;
  display: flex; /* PC表示：横並び */
  align-items: center; /* 上下中央 */
}

/* カード内の画像のみ、または背景として扱う */
.works-image {
  width: 45%; /* 左側半分弱 */
  height: 100%;
  padding: 4%; /* 相対値に変更 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 拡大時にはみ出さないようにする */
}

.works-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease; /* ホバー時のアニメーション */
}

/* カードホバー時に画像を拡大 */
a.works-card:hover .works-image img {
  transform: scale(1.08);
}

/* PC版ホバー時のopacity削除 */
a.works-card:hover {
  opacity: 1;
}

/* カード内のテキスト情報 */
.works-catch {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #fff;
  border-left: 6px solid #fff;
  margin-bottom: 15px;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .works-catch {
    font-size: 0.9rem;
  }
}

.works-content {
  flex: 1;
  padding: 30px;
  text-align: right; /* 右寄せ */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
  justify-content: center;
}

.works-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
}

.works-subname {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  margin-top: 5px;
}

.works-address {
  font-style: normal;
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.8;
}

.works-tags {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}

.tag {
  background-color: #fff;
  color: var(--main-blue);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 4px; /* タグの角丸 */
}

/* 「詳しく見る」リンク */
.works-link {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Coming Soon カード (削除済み：汎用クラスに統合) */
/* .works-card--comingsoon {} */

/*　スライダーの部分
   ============================================ */

/* 矢印を枠線の丸いデザインに変更 */
.splide__arrow {
  background: transparent;
  border: 1px solid #fff;
  opacity: 1;
  width: 3rem;
  height: 3rem;
}

.splide__arrow svg {
  fill: #fff;
  height: 1.2rem;
  width: 1.2rem;
}

.splide__arrow--prev {
  left: -4rem; /* コンテナの外に出す場合（レイアウトによる） */
  /* 今回はスライダーの下、左寄りに配置するデザインなら位置調整が必要だが、
       デフォルト位置またはコンテナ下部に移動する場合もある。
       画像を見ると、スライダーの下に中央揃えで配置されているように見える。 */
}

.splide__arrow--next {
  right: -4rem;
}

/* ページネーションと矢印を下のコントロールエリアにまとめるカスタムが必要かもしれないが、
   まずはデフォルト配置を調整してみる */
/* .splide__arrows {} */

/* ドット（ページネーション）の位置と色 */
.splide__pagination {
  bottom: -30px;
  /* スライダーの外側に配置 */
}

.splide__pagination__page {
  background: rgba(255, 255, 255, 0.5);
  border: none;
}

.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.2);
}

/* 矢印の位置調整（画像に合わせて下に配置するならCSSのみでは限界がある場合もあるが、relativeで飛ばす） */
/* 一旦デフォルト（左右）で配置し、要望があれば下に移動 */

/* レスポンシブ対応（タブレット） */
@media screen and (max-width: 1024px) {
  .works-card {
    flex-direction: column; /* 縦並び */
    min-height: auto;
    height: 100%;
    padding-bottom: 20px;
  }

  .works-image {
    width: 100%;
    padding: 0;
    margin-left: 0;
    margin-bottom: 0;
  }

  /* 画像のアスペクト比を統一して高さの崩れを防止 */
  .works-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .works-content {
    padding: 20px 25px;
    align-items: flex-start; /* 左寄せ */
    text-align: left;
  }

  .works-tags {
    justify-content: flex-start;
  }
}

/* レスポンシブ対応（モバイル） */
@media screen and (max-width: 768px) {
  .works-section {
    padding: 60px 5%;
  }
  .works-title {
    padding-left: 20px;
    font-size: 2rem;
  }
  #works-slider {
    padding-left: 0; /* モバイルは中央揃えまたは左端 */
  }

  .works-content {
    padding: 15px 20px;
  }

  .works-name {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }

  .splide__pagination {
    bottom: -25px;
  }
}

/* ============================================
   対応エリアセクション
   ============================================ */
.area-section {
  background-color: var(--main-blue);
  padding: 120px 5%; /* ゆとりのある余白 */
  color: #fff;
}

.area-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
}

/* タブメニュー */
.tab-menu {
  display: flex;
  gap: 8px; /* タブ間に余白を追加 */
  margin-bottom: 0;
}

.tab-btn {
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid #fff; /* 白枠を追加 */
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  background-color: transparent; /* 非アクティブは背景透明 */
  color: #fff;
}

.tab-btn.is-active {
  background-color: #00cfc1; /* アクティブのみ緑背景 */
  color: #fff;
}

.tab-btn:hover {
  opacity: 0.9;
}

/* タブパネル（コンテンツボックス） */
.tab-content {
  display: grid;
  /* グリッド1セルに重ねて配置することで、高さが最大のコンテンツに合わせる */
  grid-template-areas: "stack";
}

.tab-panel {
  grid-area: stack;
  border: 2px solid #fff;
  padding: 40px;
  background-color: transparent;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  /* デフォルト（非表示）の状態 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* クリックなどを無効化 */
  z-index: 0;
}

/* 表示状態（上書き） */
/* JSで hidden属性が削除される、または is-show が付与されるが、
   Grid重ね合わせの場合は hidden="active" のような制御よりも
   クラスでの制御が確実だが、既存JSは hidden 属性操作もしているため
   [hidden] セレクタも考慮する */

.tab-panel.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  /* display: block; は不要（Gridアイテムのため） */
  display: block; /* ただしGridアイテムとして機能させるためblock/initialが必要だが、
                       display:none から切り替えるわけではないので、
                       Grid直下なら display 値は block でOK（grid itemになる） */
}

/* 既存JSが hidden 属性をつけるため、それを打ち消す必要があるかもしれないが、
   CSS Grid重ね合わせの場合、display:none になると高さが消える。
   したがって、hidden属性がついていても display:block (or initial) を強制し、
   visibility で隠す必要がある。 */

.tab-panel[hidden] {
  display: block !important; /* Gridアイテムとして高さを維持するために表示はする */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

/* エリアグループ（dl/dt/dd） */
.area-group {
  margin: 0;
  padding: 0;
}

.area-group dt {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 25px;
}

.area-group dt:first-child {
  margin-top: 0;
}

.area-group dd {
  margin: 8px 0 0 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

/* レスポンシブ（スマホ） */
@media screen and (max-width: 768px) {
  /* ヘッダー（モバイル対応） */
  .header {
    padding: 0 10px;
    height: 50px;
  }

  .header__logo {
    display: none; /* モバイルではロゴを非表示（ヒーローに表示されるため） */
  }

  .header__right {
    gap: 8px;
  }

  .header__tel {
    font-size: 0.75rem;
  }

  .header__cta {
    padding: 4px 10px;
    font-size: 0.65rem;
  }

  .hamburger-menu {
    width: 25px;
    height: 18px;
  }

  /* ヒーロータイトル（モバイル対応） */
  .hero-title {
    font-size: clamp(1.2rem, 4.5vw, 2rem);
    -webkit-text-stroke: 1px #fff;
  }

  .hero-sub {
    font-size: clamp(0.6rem, 2vw, 0.9rem);
    -webkit-text-stroke: 0.5px #fff;
  }

  #poem {
    font-size: 1.5rem;
  }

  .area-section {
    padding: 60px 5%;
  }

  .area-section h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .tab-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .tab-panel {
    padding: 25px;
  }

  .area-group dt {
    font-size: 0.95rem;
    margin-top: 20px;
  }

  .area-group dd {
    font-size: 0.85rem;
  }
}

/* ============================================
   FAQセクション
   ============================================ */
.faq-section {
  background-color: var(--main-blue);
  padding: 120px 5%; /* ゆとりのある余白 */
}

.faq-inner {
  max-width: 900px;
  margin: 0 auto;
}

.faq-main-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 40px;
}

.faq-main-title .sub-title {
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 20px;
  letter-spacing: 0.1em;
}

/* FAQタブメニュー */
.faq-tab-menu {
  display: flex;
  gap: 0;
  margin-bottom: 30px;
}

.faq-tab-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

/* 1つ目のタブ: 左側のバーのみ（::before） */
.faq-tab-btn:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease;
}

/* 2つ目以降のタブ: 左側と右側のバー（::before + ::after） */
.faq-tab-btn:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease;
}

.faq-tab-btn:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: rgba(255, 255, 255, 0.5);
}

/* アクティブ時のバーを白に */
.faq-tab-btn.is-active {
  color: #fff;
}

.faq-tab-btn.is-active::before {
  background-color: #fff;
}

.faq-tab-btn {
  padding-left: 15px;
  padding-right: 15px;
}

/* FAQパネル */
.faq-panel {
  display: none;
}

.faq-panel.is-show {
  display: block;
}

.faq-panel[hidden] {
  display: none;
}

/* FAQアイテム（アコーディオン） */
.faq-item {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  list-style: none; /* デフォルトの矢印を消す */
}

.faq-question::-webkit-details-marker {
  display: none; /* Chromeのデフォルトマーカーを消す */
}

/* アコーディオンアイコン */
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: 20px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.faq-icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

/* 開いた時のアイコン */
.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item[open] .faq-icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* 回答部分 */
.faq-answer {
  padding: 0 25px 25px 25px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.8;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0 25px;
  padding-top: 20px;
  margin-top: 0;
}

.faq-answer p {
  margin: 0;
}

/* レスポンシブ（FAQセクション） */
@media screen and (max-width: 768px) {
  .faq-section {
    padding: 60px 5%;
  }

  .faq-main-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }

  .faq-main-title .sub-title {
    font-size: 1.1rem;
    margin-left: 15px;
  }

  .faq-tab-btn {
    font-size: 0.85rem;
    padding: 8px 12px;
  }

  .faq-question {
    font-size: 0.9rem;
    padding: 15px 20px;
  }

  .faq-answer {
    font-size: 0.85rem;
    padding: 0 20px 20px 20px;
    margin: 0 20px;
  }
}

/* ============================================
   セクション間仕切り画像（パララックス効果）
   ============================================ */
.section-divider {
  width: 100%;
  height: 350px; /* 斜め切り抜き分を考慮して高く */
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* パララックス効果 */
  background-repeat: no-repeat;
  /* 斜めの切り抜き：上部は左から右へ下がる、下部は左から右へ上がる */
  clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
  margin-top: -50px; /* 上のセクションとの重なりを調整 */
  margin-bottom: -50px; /* 下のセクションとの重なりを調整 */
  position: relative;
  z-index: 1;
}

/* 各仕切り画像（仮画像：後で差し替え） */
.section-divider--1 {
  background-image: url("../images/divider-1.webp");
}

.section-divider--2 {
  background-image: url("../images/divider-2.webp");
}

.section-divider--3 {
  background-image: url("../images/divider-3.webp");
}

.section-divider--4 {
  background-image: url("../images/divider-4.webp");
}

/* レスポンシブ（セクション間仕切り） */
@media screen and (max-width: 768px) {
  .section-divider {
    height: 250px;
    /* モバイルでもfixed維持 */
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    margin-top: -30px;
    margin-bottom: -30px;
  }
}

/* iOS Safari (iPhone/iPad)の background-attachment: fixed 画像拡大バグ対策 */
@supports (-webkit-touch-callout: none) {
  .hero-main::before,
  .section-divider {
    background-attachment: scroll;
  }
}

/* ============================================
   フッター
   ============================================ */
.site-footer {
  background-color: #fff;
  padding: 20px 5%;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.copyright {
  font-size: 0.875rem;
  color: #1b4965;
  letter-spacing: 0.15em; /* カーニングを広く */
}

.copyright small {
  font-size: inherit;
}

/* SNSリスト */
.footer-sns-list {
  display: flex;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-sns-item {
  display: flex;
  align-items: center;
}

.footer-sns-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1b4965;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-sns-item a:hover {
  opacity: 0.7;
}

/* Font Awesome アイコンサイズ（24px x 24px相当） */
.footer-sns-item i {
  font-size: 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* レスポンシブ（フッター） */
@media screen and (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 15px;
  }

  .copyright {
    font-size: 0.75rem;
    text-align: center;
  }

  .footer-sns-list {
    gap: 20px;
  }

  .footer-sns-item i {
    font-size: 22px;
    width: 22px;
    height: 22px;
  }
}

/* ============================================
   事例詳細ページ（achievement）
   ============================================ */

/* サブページではヘッダーロゴを常に表示 */
body:has(.case-study-detail) .header__logo {
  opacity: 1;
  visibility: visible;
}

.case-study-detail {
  background-color: var(--main-blue);
  padding: 80px 5% 60px;
  min-height: 100vh;
  color: #fff;
}

/* パンくずナビゲーション */
.breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.breadcrumb li {
  font-size: 0.75rem;
  color: #fff;
  letter-spacing: 0.05em;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.breadcrumb a:hover {
  opacity: 0.7;
}

/* ページタイトル */
.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px;
  letter-spacing: 0.15em;
}

/* 事例コンテンツ */
.case-content {
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid #fff; /* 白い枠線 */
  padding: 30px 35px;
  background-color: transparent;
}

/* 事例ボディ（2カラム） */
.case-body {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* 左カラム（テキスト） */
.case-text-col {
  flex: 1;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

/* 右カラム（ギャラリー） */
.case-gallery-col {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 事例ヘッダー（タグ・企業名） */
.case-header {
  margin-bottom: 50px;
}

/* タグ（事例詳細ページ用に上書き） */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.case-tags .tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  background-color: #fff;
  color: #1b4965;
  border-radius: 0;
  letter-spacing: 0.02em;
}

.case-tags time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 10px;
  letter-spacing: 0.03em;
}

/* 企業名 */
.case-company-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.08em;
}

.case-company-name .representative {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* イントロダクション */
.case-intro {
  margin-bottom: 45px;
  padding-bottom: 0;
  border-bottom: none;
}

.case-intro p {
  font-size: 0.95rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
}

/* インタビューQ&A */
.interview-item {
  margin-bottom: 40px;
}

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

.interview-item h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.interview-item .answer p {
  font-size: 0.95rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
}

/* ギャラリー画像 */
.case-gallery-col figure {
  margin: 0;
}

.case-gallery-col img {
  width: 100%;
  height: auto;
  display: block;
}

.case-gallery-col figcaption {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  text-align: left; /* 改行されても読みやすいよう左揃えに変更 */
  margin-top: 4px;
  line-height: 1.5; /* 少し行間を広げて読みやすく */
  letter-spacing: 0.03em;
  word-break: auto-phrase; /* 単語の途中で不自然に改行されるのを防ぐ（最新ブラウザ用） */
}

/* レスポンシブ（事例詳細ページ） */
@media screen and (max-width: 900px) {
  .case-body {
    flex-direction: column;
  }

  .case-gallery-col {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }

  .case-gallery-col figure {
    width: calc(50% - 6px);
  }
}

@media screen and (max-width: 768px) {
  .case-study-detail {
    padding: 70px 4% 50px;
  }

  .case-content {
    padding: 18px;
  }

  .page-title {
    font-size: 1.5rem;
    margin-bottom: 25px;
  }

  .case-text-col {
    padding: 0;
  }

  .case-company-name {
    font-size: 1.3rem;
  }

  .interview-item h2 {
    font-size: 1.05rem;
  }

  .interview-item .answer p {
    font-size: 0.95rem;
  }

  .case-intro p {
    font-size: 0.95rem;
  }

  .case-gallery-col figure {
    width: 100%;
  }

  .breadcrumb li {
    font-size: 0.7rem;
  }
}

/* ============================================
   会社概要セクション
   ============================================ */
.company-section {
  background-color: var(--main-blue);
  padding: 120px 5%;
  color: #fff;
}

.company-inner {
  max-width: 900px;
  margin: 0 auto;
}

.company-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff; /* 白 */
  margin-bottom: 40px;
  letter-spacing: 0.1em;
}

/* 会社概要テーブル */
.company-table {
  width: 100%;
  border-collapse: separate; /* thを独立させるため */
  border-spacing: 0 10px; /* 上下の間隔 */
  border: none;
  background-color: transparent;
}

/* 最後の行のボーダー調整はtdで行う */

.company-table th,
.company-table td {
  padding: 15px 25px;
  vertical-align: middle; /* 上下中央揃え */
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.8;
}

.company-table th {
  width: 140px;
  background-color: transparent;
  color: #fff;
  font-weight: 700;
  border: 2px solid #fff; /* 白い太枠 */
  text-align: center;
  letter-spacing: 0.1em;
  white-space: nowrap;
  /* padding-left/rightは上記共通設定で適用 */
}

/* thをボタン風に（以前のスタイルを上書き） */
/* .company-table th { ... } 重複削除 */

.company-table td {
  color: #fff;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 白い細線 */
}

/* レスポンシブ（会社概要セクション） */
@media screen and (max-width: 768px) {
  .company-section {
    padding: 60px 5%;
  }

  .company-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
  }

  .company-table th {
    border: 2px solid #fff;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
  }

  .company-table td {
    padding-top: 5px;
    padding-bottom: 30px; /* 下線がなくなった分、項目間の区切りとして下余白を少しだけ広げる */
    border-bottom: none;
  }

  .company-table tr:last-child td {
    border-bottom: none;
  }
}

/* ============================================
   アクセスセクション
   ============================================ */
.access-section {
  background-color: var(--main-blue);
  padding: 120px 5%;
  color: #fff;
}

.access-inner {
  max-width: 900px;
  margin: 0 auto;
}

.access-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff; /* 白 */
  margin-bottom: 40px;
  letter-spacing: 0.1em;
}

.access-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  border: 2px solid #fff;
  padding: 30px;
  background-color: transparent;
}

/* 左カラム（会社情報） */
.access-info {
  flex: 1;
}

.access-company-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff; /* 白 */
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}

.access-address {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #fff;
  margin-bottom: 20px;
}

.access-address p {
  margin: 0 0 5px 0;
}

.postal-code {
  margin-bottom: 5px;
}

.address-line {
  margin-bottom: 10px;
}

.tel-fax {
  color: #fff; /* 白 */
  font-weight: 700;
}

.access-directions {
  font-size: 0.85rem;
  line-height: 1.8;
  color: #fff;
  margin-bottom: 15px;
}

.access-directions p {
  margin: 0;
}

.parking {
  margin-top: 10px;
  font-weight: 700;
}

.access-notice {
  font-size: 0.85rem;
  line-height: 1.8;
  color: #fff; /* 白 */
}

.access-notice p {
  margin: 0;
}

/* 右カラム（Google Map） */
.access-map {
  width: 350px;
  flex-shrink: 0;
}

.access-map iframe {
  width: 100%;
  height: 280px;
  border: none;
}

/* レスポンシブ（アクセスセクション） */
@media screen and (max-width: 768px) {
  .access-section {
    padding: 60px 5%;
  }

  .access-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .access-content {
    flex-direction: column;
    padding: 25px 20px;
    gap: 25px;
  }

  .access-info {
    width: 100%;
  }

  .access-company-name {
    font-size: 1.2rem;
  }

  .access-map {
    width: 100%;
  }

  .access-map iframe {
    height: 250px;
  }
}

/* ============================================
   事例ページ下部 CTAエリア
   ============================================ */
.case-bottom-cta {
  position: relative;
  text-align: center;
  padding: 4.5rem 2rem;
  margin-top: 4rem;
  border-radius: 8px;
  overflow: hidden;
  /* 背景画像（HTMLでインライン指定） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 濃紺の半透明オーバーレイ */
.case-bottom-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(27, 73, 101, 0.82);
  z-index: 1;
}

/* 子要素をオーバーレイの上に表示 */
.case-bottom-cta__text,
.case-bottom-cta__btn {
  position: relative;
  z-index: 2;
}

.case-bottom-cta__text {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.8;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.case-bottom-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ff8c00;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 3rem;
  border-radius: 40px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.case-bottom-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 1;
}

/* キラッと光るシャインエフェクト */
.case-bottom-cta__btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 20px;
  height: 200%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { left: -50%; }
  100% { left: 150%; }
}

.case-bottom-cta__btn i {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.case-bottom-cta__btn:hover i {
  transform: translateX(5px);
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .case-bottom-cta {
    padding: 3rem 1.25rem;
    margin-top: 3rem;
  }
  .case-bottom-cta__text {
    font-size: 1.1rem;
  }
  .case-bottom-cta__btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
  }
}