/* =========================================================
   Home Hero Section (100vh Full Screen Edition)
========================================================= */

.home-hero {
  position: relative;
  width: 100%;
  /* dynamic viewport heightを使用し、スマホのバーを除いた「本当の全画面」にする */
  height: 100vh;
  height: 94dvh;
  background-color: #05101c;
  overflow: hidden;
}

.home-hero-swiper {
  width: 100%;
  height: 100%;
}

/* --- Background Images (PC Default) --- */
.slide-01 {
  background-image: url('/img/hero/home/hero-home-pc.jpg');
}
.slide-02 {
  background-image: url('/img/hero/home/hero-initiatives-pc.jpg');
}
.slide-03 {
  background-image: url('/img/hero/home/hero-nitei-pc.jpg');
}
.slide-04 {
  background-image: url('/img/hero/home/hero-recruit-pc.jpg');
}

/* --- Background Images (Smartphone / Tablet) --- */
@media (max-width: 768px) {
  .slide-01 {
    background-image: url('/img/hero/home/hero-home-sp.jpg');
  }
  .slide-02 {
    background-image: url('/img/hero/home/hero-initiatives-sp.jpg');
  }
  .slide-03 {
    background-image: url('/img/hero/home/hero-nitei-sp.jpg');
  }
  .slide-04 {
    background-image: url('/img/hero/home/hero-recruit-sp.jpg');
  }
}

/* 背景ズーム演出 */
.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 10s linear;
  z-index: 1;
}

.swiper-slide-active .slide-bg {
  transform: scale(1.1);
}

/* --- Swiper ページネーション（ドット）のカスタム --- */

/* 通常時（非アクティブ）のドット */
.home-hero .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff; /* ドット自体の色：白 */
  opacity: 0.4; /* 透明度：60% */
  margin: 10px 6px !important;
  transition: all 0.3s ease;
}

/* 現在表示中のドット（アクティブ） */
.home-hero .swiper-pagination-bullet-active {
  background: var(--color-white); /* ブランドカラー（シアン系） */
  opacity: 1; /* 透明度：100% */
  width: 24px; /* アクティブ時だけ横長にする（洗練された印象になります） */
  border-radius: 5px;
}

/* テキストを浮き立たせるオーバーレイ */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(5, 16, 28, 0.7) 0%,
    rgba(5, 16, 28, 0.2) 50%,
    rgba(5, 16, 28, 0.4) 100%
  );
  z-index: 2;
}

/* コンテンツ配置 */
.slide-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
}

.slide-label {
  font-family: var(--ff-sans);
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.3em;
  font-size: 0.95rem; /* わずかにサイズアップ */
  margin-bottom: 20px;

  /* --- 視認性向上のための追加 --- */
  display: flex;
  align-items: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* 文字の周りに薄い影 */
}

/* ラベルの左側にラインを追加して存在感を強調 */
.slide-label::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1.5px;
  background-color: var(--color-white);
  margin-right: 15px;
}

.slide-title {
  font-family: var(--ff-serif);
  font-size: clamp(2.8rem, 6vw, 4.5rem); /* 全画面に合わせて少し大きく */
  line-height: 1.25;
  color: #fff;
  margin-bottom: 30px;
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.702);
}

.slide-title span {
  color: var(--color-primary);
}

.slide-desc {
  max-width: 650px;
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 45px;
  text-align: justify;
}

/* ガラスモルフィズムボタン */
.btn-hero-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 18px 52px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 4px solid var(--color-primary);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  z-index: 1;
}

.btn-hero-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: -1;
}

.btn-hero-link:hover::before {
  left: 0;
}
.btn-hero-link:hover {
  transform: translateX(8px);
  box-shadow: 0 12px 40px rgba(0, 161, 233, 0.4);
}

.btn-hero-link::after {
  content: '→';
  margin-left: 20px;
  transition: transform 0.3s;
}
.btn-hero-link:hover::after {
  transform: translateX(5px);
}

/* --- 100vhにおける重要パーツ：スクロールダウン --- */
.hero-scroll-down {
  position: absolute;
  bottom: 60px; /* 画面下部ギリギリに配置 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-align: center;
}

/* 縦線の動的なアニメーション */
.hero-scroll-down::before {
  content: '';
  display: block;
  width: 1px;
  height: 80px; /* 線を少し長めにして「下」を意識させる */
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 15px;
  position: relative;
  overflow: hidden;
}

.hero-scroll-down::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 80px;
  background: var(--color-white);
  animation: scrollLineAnim 2.5s infinite;
}

@keyframes scrollLineAnim {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  40% {
    transform: scaleY(1);
    transform-origin: top;
  }
  41% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  80% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* スマホ調整 */
@media (max-width: 768px) {
  .slide-title {
    font-size: 2.3rem;
  }
  .slide-desc {
    font-size: 0.9rem;
    line-height: 1.8;
  }
  .btn-hero-link {
    padding: 15px 35px;
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   Home Mission Section
   - 余白を広く取り、メッセージの重みを演出
========================================================= */

.home-mission {
  padding: 140px 0;
  background-color: #fff;
}

/* 1. PC版の基本設定 (センター配置) */
.mission-box {
  text-align: center;
  /* 幅を適切に絞ることで、センター配置のバランスを保つ */
  max-width: 920px;
  margin: 0 auto;
}

.home-mission .ja-title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--color-primary-dark);
  line-height: 1.5;
  margin-bottom: 50px;
}

/* PC版ではspanをブロック化して意図した位置で改行させる */
.home-mission .ja-title span,
.home-mission .lead-text span {
  display: block; /* 改行させる */
}

.home-mission .lead-text {
  font-size: 1.15rem;
  line-height: 2.2;
  color: #444;
  margin-bottom: 2rem;
}

/* 2. モバイル版の設定 (レフト配置・改行解除) */
@media (max-width: 768px) {
  .home-mission {
    padding: 80px 0;
  }

  .mission-box {
    text-align: left; /* 左寄せに変更 */
    padding: 0 5%;
  }

  /* モバイルではspanの改行を解除し、自然な流しにする */
  .home-mission .ja-title span,
  .home-mission .lead-text span {
    display: inline; /* 改行を解除 */
  }

  .home-mission .ja-title {
    font-size: 1.75rem;
    line-height: 1.4;
    margin-bottom: 30px;
  }

  .home-mission .lead-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    /* 単語の途中で変に切れないように調整 */
    word-break: break-all;
    overflow-wrap: break-word;
  }
}

/* =========================================================
   Home Services Section
   - グレー背景に映える白いカードデザイン
========================================================= */

.home-services {
  /* Missionセクションとのバランスを取る余白 */
  padding: 120px 0;
  background-color: #f8f9fa; /* 薄いグレー */
}

/* 1. Grid Layout */
.about-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 60px;
}

/* 2. Card Base */
.about-nav-card {
  display: block;
  background-color: #fff;
  text-decoration: none;
  border-radius: 4px; /* あえて角丸を小さくし、医療の誠実さを表現 */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. Image Area & Zoom Effect */
.card-image {
  width: 100%;
  aspect-ratio: 16 / 10; /* 写真を一定の比率で固定 */
  overflow: hidden;
  background-color: #eee;
}

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

/* 4. Content Area */
.card-content {
  padding: 40px;
}

.card-label {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.card-content h3 {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  color: var(--color-primary-dark);
  margin-bottom: 20px;
  line-height: 1.4;
}

.card-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 30px;
}

/* 5. Link Text Animation */
.card-link-text {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
}

.card-link-text .arrow {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

/* 6. Hover States */
.about-nav-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.about-nav-card:hover .card-image img {
  transform: scale(1.08); /* わずかにズーム */
}

.about-nav-card:hover .card-link-text {
  color: var(--color-primary);
}

.about-nav-card:hover .arrow {
  transform: translateX(8px);
}

/* 7. Responsive (Mobile) */
@media (max-width: 992px) {
  .about-nav-grid {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .home-services {
    padding: 80px 0;
  }

  .about-nav-grid {
    grid-template-columns: 1fr; /* スマホでは縦並び */
    gap: 40px;
  }

  .card-content {
    padding: 30px 25px;
    text-align: left; /* モバイルでは左寄せ */
  }

  .card-content h3 {
    font-size: 1.3rem;
  }
}

/* =========================================================
   Home Initiatives Section
========================================================= */

.home-initiatives {
  padding: 120px 0;
  background-color: #fff;
}

/* Swiperコンテナの溢れ出しを防ぐ */
.init-swiper {
  padding-bottom: 50px; /* ページネーション用の余白 */
}

/* カードデザイン */
.init-nav-item {
  display: flex;
  flex-direction: column;
  height: auto;
  background: #fff;
  text-decoration: none;
  border: 1px solid var(--color-gray-border, #eee);
  transition: all 0.3s ease;
}

.init-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

.init-body {
  padding: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.init-num {
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}

.init-body h3 {
  font-family: var(--ff-serif);
  font-size: 1.4rem;
  color: var(--color-primary-dark);
  margin-bottom: 15px;
}

.init-body p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #666;
  margin-bottom: 25px;
  flex-grow: 1;
}

.init-more {
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  position: relative;
  padding-bottom: 5px;
}

.init-more::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 1px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

/* Hover Effect */
.init-nav-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
.init-nav-item:hover .init-image img {
  transform: scale(1.05);
}
.init-nav-item:hover .init-more::after {
  width: 100%;
}

/* Responsive: PCではSwiperの挙動を調整（1100px以上） */
@media (min-width: 1101px) {
  .init-swiper {
    overflow: visible; /* コンテナ外に影が見えるように */
  }
}

/* Responsive: Mobile用調整 */
@media (max-width: 768px) {
  .home-initiatives {
    padding: 80px 0;
  }
  .init-body {
    padding: 20px;
  }
}

/* =========================================================
   Home Nintei Section (Special Banner)
========================================================= */

.home-nintei {
  padding: 100px 0;
}

.home-nintei-banner {
  position: relative;
  border-radius: 16px; /* 角を少し丸めて特別感を出す */
  overflow: hidden;
  padding: 100px 80px;
  color: #fff;

  /* 背景画像の設定 */
  background-image: url('/img/hero/nintei/hero-1920.jpg'); /* 準備される画像 */
  background-size: cover;
  background-position: center;

  /* 影をつけて浮き上がらせる */
  box-shadow: 0 20px 60px rgba(27, 75, 141, 0.2);
}

/* 画像の上に色を重ねて文字を読みやすくする（グラデーション） */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    rgba(27, 75, 141, 0.95) 0%,
    rgba(27, 75, 141, 0.8) 40%,
    rgba(27, 75, 141, 0.4) 100%
  );
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.banner-tag {
  display: inline-block;
  background-color: var(--color-primary); /* 明るいシアン */
  color: #fff;
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 100px;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.banner-title {
  font-family: var(--ff-serif); /* 明朝体で権威性を出す */
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

.banner-desc {
  font-size: 1.1rem;
  line-height: 1.8;
  opacity: 0.9;
  margin-bottom: 45px;
}

/* PC版での改行制御 */
.banner-desc span {
  display: block;
}

/* 特別なボタンデザイン */
.btn-nintei {
  display: inline-flex;
  align-items: center;
  background-color: #fff; /* 白ボタンで強力に目立たせる */
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 700;
  padding: 20px 50px;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.btn-nintei .arrow {
  margin-left: 15px;
  transition: transform 0.3s ease;
}

.btn-nintei:hover {
  background-color: var(--color-primary);
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 161, 233, 0.3);
}

.btn-nintei:hover .arrow {
  transform: translateX(8px);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .home-nintei {
    padding: 60px 0;
  }
  .home-nintei-banner {
    padding: 60px 30px;
    border-radius: 0; /* スマホでは画面端まで広げてもOK */
    margin: 0 -5.5%; /* コンテナを無視して横いっぱいに */
  }
  .banner-title {
    font-size: 1.6rem;
  }
  .banner-desc span {
    display: inline; /* スマホでは改行解除 */
  }
  .btn-nintei {
    width: 100%;
    justify-content: center;
    padding: 18px 20px;
  }
}

/* =========================================================
   Home Recruit Section (Gallery Stream Edition)
   - PC: Multi-photo Grid + Parallax
   - Mobile: Horizontal Scroll Gallery
========================================================= */

.home-recruit {
  padding: 120px 0;
  background-color: #fff;
  overflow: hidden; /* パララックスのはみ出しとスクロールの制御 */
}

/* レイアウト：テキスト(1) と 画像(1.3) の比率 */
.recruit-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 30px;
  align-items: center;
}

/* --- テキストエリア --- */
.recruit-text-side .ja-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--color-primary-dark);
  line-height: 1.4;
  margin-bottom: 30px;
}

.recruit-lead {
  font-size: 1.05rem;
  line-height: 2;
  color: #444;
  margin-bottom: 40px;
}

/* 採用ボタン：2列グリッド */
.recruit-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

.btn-recruit-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fcfdfe;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-recruit-card .btn-tag {
  font-family: var(--ff-sans);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.btn-recruit-card .btn-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.btn-recruit-card .btn-name span {
  font-size: 0.8rem;
  display: block;
  font-weight: 400;
  color: #718096;
  margin-top: 4px;
}

.btn-recruit-card:hover {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px rgba(0, 161, 233, 0.1);
}

/* 見学申し込み（メインCTA） */
.btn-visit-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px;
  background-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-visit-main:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 161, 233, 0.3);
}

/* --- ビジュアルエリア (Gallery Grid) --- */
.recruit-gallery-scroll {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr; /* 左に大きなメイン、右に小2枚×2 */
  grid-template-rows: repeat(2, 200px);
  gap: 20px;
  position: relative;
  padding: 40px 0;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  background: #eee;
  will-change: transform;
  transition: transform 0.1s linear; /* JSパララックス用 */
}

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

.gallery-item:hover img {
  transform: scale(1.08);
}

/* PC配置指定 */
.item-main {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.item-sub1 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.item-sub2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.item-sub3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.item-sub4 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* --- Mobile Adjustments --- */
@media (max-width: 1100px) {
  .recruit-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .home-recruit {
    padding: 80px 0;
  }

  /* テキストと画像の順番を整理 */
  .recruit-text-side {
    order: 1;
  }
  .recruit-visual-side {
    order: 2;
    margin: 40px 0;
  }
  .recruit-action-area {
    order: 3;
  }

  /* コンテナを左右いっぱいに広げる */
  .recruit-visual-side {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }

  /* 横スクロールギャラリーへの転換 */
  .recruit-gallery-scroll {
    display: flex; /* Gridを解除 */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 5vw 40px; /* 左右に余白、下に影用の余白 */
    gap: 15px;

    /* スクロールバー非表示 */
    -ms-overflow-style: none;
    scrollbar-width: none;

    /* 慣性スクロールとスナップ */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .recruit-gallery-scroll::-webkit-scrollbar {
    display: none;
  }

  .gallery-item {
    flex: 0 0 280px; /* 横幅280pxで固定 */
    aspect-ratio: 4 / 3; /* スマホで見やすい比率 */
    scroll-snap-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

    /* スマホではパララックスを停止（JSとの干渉防止） */
    transform: none !important;
  }

  .recruit-btn-grid {
    grid-template-columns: 1fr;
  }
}