/* ============================================================
   精密審美会 採用サイト — TOPページ固有スタイル
   Figma: TOP-PC (30:11) / TOP-SP 準拠
   ============================================================ */

/* ----------------------------------------------------------
   FV — Swiperスライダー
   Figma: TOP-HI (167:420) w=1340 h=720
   参考: https://careers.nulab.com/ (Nulab風 横スクロール)
   構造: 4枚グリッドパネル(1340x720)がスライド単位
   HI04: 0,0 → 738×327
   HI01: 754,0 → 586×673 (gap-x: 16px)
   HI02: 0,346 → 361×327 (gap-y: 19px)
   HI03: 373,346 → 361×327 (gap-x: 12px)
   ---------------------------------------------------------- */
.top-fv {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-white);
}

/* スライダー本体 */
.top-fv .swiper {
  width: 100%;
  height: 720px;
}

/* 等速スクロール: Swiperのデフォルト ease-out → linear に上書き */
.top-fv .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* 各スライドは4枚グリッドの1パネル = 1340px幅 */
.top-fv__panel {
  width: 1340px !important;
  height: 720px;
  flex: 0 0 1340px;
}

/* Figma準拠のグリッド配置 (position absolute) */
.top-fv__grid {
  position: relative;
  width: 1340px;
  height: 673px; /* HI01の高さ = 最大高 */
}

.top-fv__cell {
  position: absolute;
  overflow: hidden;
}

.top-fv__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 左上: HI04 — 738×327 at (0, 0) */
.top-fv__cell--lt {
  top: 0;
  left: 0;
  width: 738px;
  height: 327px;
}

/* 右（全高）: HI01 — 586×673 at (754, 0) */
.top-fv__cell--rt {
  top: 0;
  left: 754px;
  width: 586px;
  height: 673px;
}

/* 左下左: HI02 — 361×327 at (0, 346) */
.top-fv__cell--lb {
  top: 346px;
  left: 0;
  width: 361px;
  height: 327px;
}

/* 左下右: HI03 — 361×327 at (373, 346) */
.top-fv__cell--rb {
  top: 346px;
  left: 373px;
  width: 361px;
  height: 327px;
}

/* プレースホルダー（後日差し替え分） */
.top-fv__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;
  color: #666;
  font-size: 14px;
  text-align: center;
}

/* "Challenge" 背景テキスト
   Figma: relX=9, relY=504 (FV内), 914×216, opacity=1.0 */
.top-fv__challenge {
  position: absolute;
  bottom: 0;
  left: 9px;
  width: 914px;
  max-width: 65%;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------------------------
   タイトルセクション「歯科業界で挑戦し続ける」
   Figma: TOP-ttl (167:418) y=500
   波形装飾: TOP-bg (167:419) — タイトルの背景として左右に配置
   bg-left: 440×269 at y=403, bg-right: 422×574 at y=251
   ---------------------------------------------------------- */
.top-title {
  position: relative;
  padding: 60px 0 40px;
  z-index: 2;
  overflow: visible;
}

/* 波形装飾（タイトルの背景） */
.top-title__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.top-title__deco--left {
  left: 0;
  bottom: -40px;
  width: 440px;
}

.top-title__deco--right {
  right: 0;
  top: -100px;
  width: 422px;
}

.top-title__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.top-title__row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}

.top-title__img {
  display: block;
}

/* Figma: ttl01 345×67 */
.top-title__img--01 {
  height: 67px;
  align-self: flex-end;
}

/* Figma: ttl02 324×134 */
.top-title__img--02 {
  height: 134px;
  margin-left: 8px;
}

/* Figma: ttl03 257×66 */
.top-title__img--03 {
  height: 66px;
  align-self: flex-end;
  margin-left: 0;
}


/* ----------------------------------------------------------
   お知らせ
   Figma: TOP-info (167:399) 1000×68 bg:#EEF8FF
   コメント: ホバーでアイコン色反転、テキスト下に下線#1556A6、テキスト#1556A6
   ---------------------------------------------------------- */
.top-info {
}

.top-info__inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  background: #eef8ff;
}

.top-info__content {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 0;
}

/* Figma: 「お知らせ」 16px #1556A6 ls:1.28 */
.top-info__label {
  font-size: 16px;
  font-weight: 400;
  color: #1556A6;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 1.28px;
  padding-right: 27px;
}

/* Figma: Vector 7 — 縦線 h=44 stroke:#1556A6 */
.top-info__divider {
  width: 1px;
  height: 44px;
  background: #1556A6;
  flex-shrink: 0;
}

.top-info__item {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
  padding-left: 23px;
}

/* Figma: 日付 14px #333 ls:2.66 */
.top-info__date {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 2.66px;
}

/* Figma: テキスト 14px #333 ls:1.12 */
.top-info__title {
  font-size: 14px;
  color: #333;
  letter-spacing: 1.12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-base);
}

a.top-info__title:hover {
  color: #1556A6;
}

/* 「お知らせを見る」ボタン
   Figma: 14px #000 ls:1.12
   ホバー: テキスト#1556A6 + 下線#1556A6 + アイコン色反転 */
.top-info__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #000;
  letter-spacing: 1.12px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: color var(--transition-base);
  text-decoration: none;
}

.top-info__more-icon {
  display: inline-flex;
  transition: color var(--transition-base), background var(--transition-base);
}

.top-info__more-icon svg {
  transition: all var(--transition-base);
}

/* 通常: 線のみの丸アイコン */
.top-info__more-icon svg circle {
  fill: transparent;
  stroke: currentColor;
  transition: fill var(--transition-base), stroke var(--transition-base);
}

.top-info__more-icon svg path {
  stroke: currentColor;
  transition: stroke var(--transition-base);
}

/* ホバー: テキスト#1556A6 + 下線 + アイコン反転（丸塗り、矢印白） */
.top-info__more:hover {
  color: #1556A6;
  text-decoration: underline;
  text-decoration-color: #1556A6;
  text-underline-offset: 4px;
}

.top-info__more:hover .top-info__more-icon svg circle {
  fill: #1556A6;
  stroke: #1556A6;
}

.top-info__more:hover .top-info__more-icon svg path {
  stroke: #fff;
}


/* ----------------------------------------------------------
   精密審美会について
   Figma: Group 59 (167:1305) w=1040 h=651
   構造: outer(1040×651) > card(1000×500 offset 40,56) + photo(562×651 at 0,0)
   ---------------------------------------------------------- */
.top-about {
  padding: 0;
}

/* 全体コンテナ: Figma 1040×651 */
.top-about__outer {
  position: relative;
  max-width: 1040px;
  margin: 56px auto 0;
  /* Figmaのアスペクト比を維持 */
  aspect-ratio: 1040 / 651;
}

/* グラデーションカード: Figma Rectangle 67, rX=40 rY=56, 1000×500
   グラデーション反転: 擬似要素 + opacity でスムーズにアニメーション
   参考: vool.jp/blog/linear-gradient-animations/ */
.top-about__card {
  position: absolute;
  top: 56px;
  left: 40px;
  right: 0;
  bottom: calc(651px - 56px - 500px); /* = 95px */
  background: linear-gradient(90deg, #c6e1ee 0%, #32a9e1 100%);
}

.top-about__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #32a9e1 0%, #c6e1ee 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ホバーで擬似要素のopacityを1に → 滑らかなグラデーション反転 */
.top-about__outer:hover .top-about__card::after {
  opacity: 1;
}

/* テキストコンテンツ: カード右側に配置 */
.top-about__content {
  position: absolute;
  /* Figma: テキスト rX=565 → カード内での位置 = 565-40 = 525 */
  left: 525px;
  top: 120px;
  color: #fff;
  z-index: 2;
}

/* Figma: Noto Sans 18px Bold ls:1.44, 白背景+紺文字で視認性向上 */
.top-about__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1.44px;
  line-height: 1;
  margin-bottom: 8px;
  display: inline-block;
  background: #fff;
  color: #1556A6;
  padding: 6px 12px 8px; /* 視覚的垂直中央: top < bottom (日本語フォント補正) */
}

/* Figma: Noto Sans 35px Bold ls:2.8, 白背景+紺文字 */
.top-about__heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 2.8px;
  line-height: 1;
  margin-bottom: 48px;
  display: inline-block;
  background: #fff;
  color: #1556A6;
  padding: 6px 14px 10px; /* 視覚的垂直中央: top < bottom (日本語フォント補正) */
}

.top-about__catch {
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 1.28px;
}

/* ボタン: Figma Component 3 — 45×45 白丸 + >>>アイコン */
.top-about__btn {
  position: absolute;
  bottom: 19px;
  right: 32px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 2;
}

.top-about__btn svg path {
  transition: stroke 0.3s ease;
}

/* ホバー: アイコン色反転 */
.top-about__outer:hover .top-about__btn {
  background: #1556A6;
}

.top-about__outer:hover .top-about__btn svg path {
  stroke: #fff;
}

/* 画像: Figma newvalue-img rX=0 rY=0 562×651 — カードからはみ出し */
.top-about__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 54%; /* 562/1040 ≈ 54% */
  height: 100%;
  z-index: 1;
}

.top-about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* ホバー: 画像zoom */
.top-about__outer:hover .top-about__photo img {
  transform: scale(1.05);
}


/* ----------------------------------------------------------
   募集職種
   Figma: Rectangle 7 (167:1308) 背景 #EEF8FF w=1200 h=1213
   カード: 白背景, 900×164, 角丸10px, グラデーション無し
   ---------------------------------------------------------- */
.top-recruit {
  padding: 80px 0 0; /* bottom は bg の padding + message の padding-top で確保 */
}

.top-recruit__bg {
  background: #eef8ff;
  border-radius: 0 50px 0 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px;
}

.top-recruit__header {
  position: relative;
  text-align: left;
  margin-bottom: 4px;
  padding-top: 20px;
}

/* Figma: recruit-img rX=132 rY=83 w=447×96 — 見出しの背後に重なる */
.top-recruit__ttl-img {
  max-width: 447px;
  display: block;
  margin-bottom: -30px;
  margin-left: 32px;
}

/* Figma: fs=32 fw=400 color=#1556A6 ls=2.56 */
.top-recruit__heading {
  font-size: 32px;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: 2.56px;
  line-height: 1.53;
}

/* Figma: 「募集職種」中央 + 左右罫線 (Vector 8/9 w=396 stroke:#333) */
.top-recruit__divider {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 32px 0 24px;
  max-width: 900px;
}

.top-recruit__divider-line {
  flex: 1;
  height: 1px;
  background: #333;
}

/* Figma: fs=24 fw=400 color=#333 */
.top-recruit__sub {
  font-size: 24px;
  font-weight: 400;
  color: #333;
  letter-spacing: 1.92px;
  white-space: nowrap;
}

.top-recruit__intro {
  margin-bottom: 48px;
  max-width: 998px;
}

.top-recruit__intro p {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  letter-spacing: 1.28px;
}

/* 横長バナー型カード (Figma: w=900 h=164, 白背景, 角丸10px) */
.top-recruit__cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 900px;
}

.top-recruit__card {
  position: relative;
  width: 100%;
  height: 164px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff;
}

/* 背景画像 — Figma: カード右半分に配置 */
.top-recruit__card-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: 0;
}

.top-recruit__card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* ホバー: 画像zoom */
.top-recruit__card:hover .top-recruit__card-bg img {
  transform: scale(1.08);
}

/* カード内テキスト — Figma: 左寄せ、下にタグ */
.top-recruit__card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 40px;
  width: 100%;
}

.top-recruit__card-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* Figma: 歯科医師 fs=24 fw=400 color=#333 */
.top-recruit__card-ja {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1.92px;
  color: #333;
}

/* Figma: Doctor fs=14 fw=400 color=#32A9E1 */
.top-recruit__card-en {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  color: #32A9E1;
}

/* カード内タグボタン — Figma: 左寄せ */
.top-recruit__card-btns {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Figma: アイコン(線のみ丸+矢印) + テキスト#333 fs=14
   ホバー: お知らせと同じ — テキスト#1556A6 + 下線 + アイコン反転 */
.top-recruit__card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  letter-spacing: 1.12px;
  transition: color var(--transition-base);
  text-decoration: none;
}

.top-recruit__card-btn:hover {
  color: #1556A6;
  text-decoration: underline;
  text-decoration-color: #1556A6;
  text-underline-offset: 4px;
}

/* アイコン: お知らせと同じ構造のホバー反転 */
.top-recruit__card-btn-icon {
  display: inline-flex;
}

.top-recruit__card-btn-icon svg circle {
  fill: transparent;
  stroke: currentColor;
  transition: fill var(--transition-base), stroke var(--transition-base);
}

.top-recruit__card-btn-icon svg path {
  stroke: currentColor;
  transition: stroke var(--transition-base);
}

/* ホバー: 丸塗り#1556A6 + 矢印白 */
.top-recruit__card-btn:hover .top-recruit__card-btn-icon svg circle {
  fill: #1556A6;
  stroke: #1556A6;
}

.top-recruit__card-btn:hover .top-recruit__card-btn-icon svg path {
  stroke: #fff;
}


/* ----------------------------------------------------------
   メッセージ
   Figma: Message bg rX=77 rY=71, 見出し rX=38 rY=139
   ---------------------------------------------------------- */
.top-message {
  padding: 80px 0 40px;
}

.top-message__header {
  margin-bottom: 4px;
}

/* Figma: Message bg rX=77 rY=71 — 見出しの背後に重なる (重なり47px) */
.top-message__ttl-img {
  max-width: 533px;
  display: block;
  margin-bottom: -50px;
  margin-left: 32px;
}

.top-message__heading {
  font-size: 32px;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: 2.56px;
  margin-bottom: 24px;
}

.top-message__body {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  letter-spacing: 1.28px;
  margin-bottom: 0;
  max-width: 998px;
}

/* ボタン: スライダー下、右寄せ */
.top-message__btn-wrap {
  display: flex;
  justify-content: flex-end;
  padding-top: 32px;
  padding-bottom: 20px;
}

/* Component 4 準拠: W300×H50, ピル型, テキスト左 + >>>右 */
.top-message__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  height: 50px;
  background: #1556A6;
  color: var(--color-white);
  padding: 0 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0; /* Figma: ls=0 */
  transition: background 0.3s ease;
}

.top-message__btn:hover {
  background: #333;
}

.top-message__btn span,
.top-message__btn-icon {
  position: relative;
  z-index: 1;
}

.top-message__btn-icon {
  display: inline-flex;
  align-items: center;
}

.top-message__btn-icon svg path {
  transition: stroke 0.3s ease;
}



/* ----------------------------------------------------------
   人物スライダー
   Figma: Frame 125 (169:403) w=1920 h=300
   layoutMode: HORIZONTAL, itemSpacing: 24px
   各スライド: 300×300, cornerRadius: 10px
   ---------------------------------------------------------- */
.top-people {
  padding: 20px 0;
  overflow: hidden;
}

.top-people .swiper {
  overflow: visible;
}

/* 等速スクロール */
.top-people .swiper-wrapper {
  transition-timing-function: linear !important;
}

.top-people__slide {
  width: 300px !important;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.top-people__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.top-people__placeholder {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;
  color: #666;
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
  border-radius: 10px;
}


/* ----------------------------------------------------------
   One Dayカード
   Figma: Group 64/65 (170:452/460) w=488 h=263
   Rectangle 75: y+47 h=216 (グラデーション、下部82%)
   arisawa 4: w=267 h=263 (人物透過PNG)
   Group 63: right254 top122 (テキスト)
   Component 3: 43x43 cornerRadius=50 left425 top200 (>>>アイコン)
   ---------------------------------------------------------- */
.top-oneday {
  padding: 0 0 80px;
}

.top-oneday__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* カード外枠: overflow:hidden（コメント指示：画像はみ出し非表示） */
.top-oneday__card {
  display: block;
  position: relative;
  height: 263px;
  text-decoration: none;
  overflow: hidden;
}

/* 青グラデーション: Rectangle 75 — カード下部82% */
.top-oneday__gradient {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 216px;
  border-radius: 10px;
  /* Figma: rgb(198,225,238) → rgb(50,169,225) */
  background: linear-gradient(to right, rgb(198, 225, 238) 0%, rgb(50, 169, 225) 100%);
}

/* 人物写真: arisawa 4 — 左寄せ、カード全高 */
.top-oneday__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
  height: 100%;
  z-index: 1;
}

.top-oneday__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  display: block;
  transition: transform var(--transition-slow);
}

.top-oneday__card:hover .top-oneday__photo img {
  transform: scale(1.03);
}

/* プレースホルダー（衛生士画像未定） */
.top-oneday__photo--placeholder {
  background: transparent;
}

/* テキスト: Group 63 — Figma実測 top:122px right:98px */
.top-oneday__text {
  position: absolute;
  right: 98px;
  top: 122px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Figma: top-about__sub と同スタイル — 白背景+紺文字 */
.top-oneday__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1556A6;
  letter-spacing: 1.12px;
  margin-bottom: 8px;
  display: inline-block;
  background: #fff;
  padding: 2px 10px;
}

/* Figma: top-about__heading と同スタイル — 白背景+紺文字、大きめ */
.top-oneday__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #1556A6;
  letter-spacing: 1.76px;
  line-height: 1.4;
  display: inline-block;
  background: #fff;
  padding: 4px 12px;
}

/* >>> アイコン: Component 3 — top-about__btn と同スタイル */
.top-oneday__icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.3s ease;
}

.top-oneday__icon svg path {
  transition: stroke 0.3s ease;
}

.top-oneday__card:hover .top-oneday__icon {
  background: #1556A6;
}

.top-oneday__card:hover .top-oneday__icon svg path {
  stroke: #fff;
}


/* ----------------------------------------------------------
   医院紹介
   Figma: Rectangle 8 (170:472) 背景 #EEF8FF w=1200 h=1280
   カード: ~320x222 グリッド（3+3+1）
   ---------------------------------------------------------- */
.top-clinics {
  padding: 0 0 80px;
}

.top-clinics__bg {
  background: #eef8ff;
  border-radius: 0 50px 0 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px;
}

.top-clinics__header {
  margin-bottom: 12px;
}

/* Figma実測: Clinics-img 2 (170:476)
   x=-6460 → コンテンツ左端(-6492)から右に32px
   y=4116, h=98 → 下端 y=4214
   見出し y=4184 → タイトル画像に30px重なる */
.top-clinics__ttl-img {
  max-width: 382px;
  margin-left: 32px;
  margin-bottom: -30px;
  display: block;
}

.top-clinics__heading {
  font-size: 32px;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: 2.56px;
  line-height: 1.53;
  position: relative;
  z-index: 1;
}

.top-clinics__intro {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  letter-spacing: 1.12px;
  margin-bottom: 48px;
  max-width: 998px;
}

/* Figma: 3+3+1 配置 各~320x222 */
.top-clinics__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.top-clinics__card {
  display: block;
  text-decoration: none;
  position: relative;
}

.top-clinics__card-img {
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 320 / 222;
  position: relative;
}

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

/* コメント: 「画像拡大時overflow hidden」 */
.top-clinics__card:hover .top-clinics__card-img img {
  transform: scale(1.1);
}

/* ホバー: グラデーションオーバーレイ + 英語テキスト表示 */
/* Figma: 線形 #C6E1EE(0%) → #80D7EA(100%) 60% opacity */
.top-clinics__card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(to right, #C6E1EE, #80D7EA);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.top-clinics__card:hover .top-clinics__card-img::after {
  opacity: 0.6;
}

/* 英語テキスト: ホバー時に表示 — 上下左右中央 */
.top-clinics__card-en {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 4px;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.top-clinics__card:hover .top-clinics__card-en {
  opacity: 1;
}

/* 最後のカード（7番目 = 3+3+1の1）は中央配置 */
.top-clinics__card:nth-child(7) {
  grid-column: 1;
}


/* ============================================================
   JS: フワッと表示（IntersectionObserver）
   コメント(y=1157): 「画面下部200pxでフワッと現れてください」
   ============================================================ */
.js-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   SP レスポンシブ (max-width: 768px)
   Figma: TOP-SP (33:176) 430×9289px 準拠
   ============================================================ */
@media (max-width: 768px) {

  /* ----------------------------------------------------------
     FV スライダー
     PC: 1340×673 グリッドパネル → SP: scale(0.52) で縮小表示
     BUG FIX: flex-basis を上書きしてパネル間隙間を解消
     ---------------------------------------------------------- */
  .top-fv .swiper {
    height: 350px;
  }

  .top-fv__panel {
    /* scale(0.52) での視覚幅: 1340×0.52 = 697px */
    width: 697px !important;
    height: 350px;
    flex: 0 0 697px; /* KEY FIX: PC flex: 0 0 1340px を上書き */
  }

  .top-fv__grid {
    /* PCのグリッドサイズを維持し、transform で縮小 */
    width: 1340px;
    height: 673px;
    transform: scale(0.52);
    transform-origin: top left;
  }

  /* Challenge テキスト画像 — FVから19pxはみ出し、中央揃え */
  .top-fv__challenge {
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 385px;
  }


  /* ----------------------------------------------------------
     お知らせ
     Figma SP: 386×219, bg=#eef7ff, pos=(22,563)
     構造: ラベル(14px)+「お知らせを見る」(12px)→区切り線(344×1)→日付(14px)→本文(14px,lh=21)
     ---------------------------------------------------------- */
  .top-info {
    padding: 0 22px;
    margin-top: 32px; /* FVスライダーとの余白 */
  }

  .top-info__inner {
    max-width: 386px;
    margin: 0 auto;
    padding: 26px 23px 30px;
    background: #eef7ff;
    border-radius: 0;
  }

  .top-info__content {
    flex-wrap: wrap;
    height: auto;
    gap: 0;
    align-items: center;
  }

  /* Figma SP: 「お知らせ」fs=14, color=#1556a6, pos=(45,589) → padding内(23,26) */
  .top-info__label {
    font-size: 14px;
    color: #1556a6;
    letter-spacing: 0;
    padding-right: 0;
    order: 1;
    line-height: 19px;
  }

  /* Figma SP: 「お知らせを見る」fs=12, color=#333 + ○アイコン18×18 */
  .top-info__more {
    order: 2;
    margin-left: auto;
    font-size: 12px;
    letter-spacing: 0;
    gap: 6px;
  }

  /* Figma SP: アイコンは塗り丸 18×18 bg=#1556a6 */
  .top-info__more-icon svg {
    width: 18px;
    height: 18px;
  }

  .top-info__more-icon svg circle {
    fill: #1556a6;
    stroke: #1556a6;
  }

  .top-info__more-icon svg path {
    stroke: #fff;
  }

  /* Figma SP: 区切り線 344×1 bg=#1556a6, pos=(45,622) → top段下に表示 */
  .top-info__divider {
    display: block;
    width: 100%;
    height: 1px;
    background: #1556a6;
    order: 3;
    margin-top: 7px;
  }

  /* Figma SP: 日付+テキスト — pos=(45,645)/(45,673) → 区切り線の下 */
  .top-info__item {
    flex: none; /* PC flex:1 を上書き — 幅0縮小を防止 */
    width: 100%;
    order: 4;
    flex-direction: column;
    gap: 9px;
    padding-left: 0;
    padding-top: 16px;
    align-items: flex-start;
    min-width: 100%; /* PC min-width:0 を上書き */
  }

  /* Figma SP: 日付 fs=14, color=#333 */
  .top-info__date {
    font-size: 14px;
    color: #333;
    letter-spacing: 0;
    line-height: 19px;
  }

  /* Figma SP: テキスト fs=14, lh=21, color=#333, 344×75 */
  .top-info__title {
    font-size: 14px;
    color: #333;
    white-space: normal;
    line-height: 21px;
    letter-spacing: 0;
    max-width: 344px;
    overflow: visible; /* PC overflow:hidden を上書き */
    text-overflow: clip;
  }


  /* ----------------------------------------------------------
     タイトル「歯科業界で挑戦し続ける」
     Figma SP: 背景 430×403 at pos=(0,782)
     ttl01「歯科業界で」: pos=(95,872) 239×46  → rel(95, 90)
     ttl02「挑戦」:       pos=(22,943) 233×96  → rel(22, 161)
     ttl03「し続ける」:   pos=(246,997) 162×42 → rel(246, 215)
     ---------------------------------------------------------- */
  .top-title {
    padding: 0;
    margin-top: 0;
    overflow: visible;
    z-index: 0; /* PC z-index:2 → SP 0 に下げ、次セクションの背後に回す */
  }

  .top-title__inner {
    padding: 0;
    max-width: 430px;
    position: relative;
    z-index: 1; /* bg-sp.pngの上に配置 */
  }

  /* SP: position relative でabsolute配置の基準にする */
  .top-title__row {
    position: relative;
    display: block;
    height: 60vw; /* 430px時≈258px, 360px時≈216px */
    max-height: 260px;
  }

  /* 各画像をFigma座標に基づいてabsolute配置（%で指定） */
  .top-title__img--01,
  .top-title__img--02,
  .top-title__img--03 {
    position: absolute;
    align-self: auto;
  }

  /* ttl01「歯科業界で」: 430基準 left:95/430=22.1%, top:90/260=34.6%, h:46/260=17.7% */
  .top-title__img--01 {
    height: 17.7%;
    width: auto;
    left: 22.1%;
    top: 34.6%;
  }

  /* ttl02「挑戦」: 430基準 left:22/430=5.1%, top:161/260=61.9%, h:96/260=36.9% */
  .top-title__img--02 {
    height: 36.9%;
    width: auto;
    left: 5.1%;
    top: 61.9%;
    margin-left: 0;
  }

  /* ttl03「し続ける」: 430基準 left:246/430=57.2%, top:215/260=82.7%, h:42/260=16.2% */
  .top-title__img--03 {
    height: 16.2%;
    width: auto;
    left: 57.2%;
    top: 82.7%;
  }

  /* SP統合背景: Figma bg-sp.png 430×403 — セクション全体の背景 */
  .top-title__deco--sp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }


  /* ----------------------------------------------------------
     精密審美会について
     Figma SP: カード 386×628 cr=10, 画像 344×399 (カード上に配置)
     PC横並び → SP縦積み
     ---------------------------------------------------------- */
  .top-about {
    padding: 0 22px;
    position: relative;
    z-index: 1; /* bg-sp.png の上に表示 */
    overflow: visible; /* section共通の overflow-x:hidden を上書き */
  }

  .top-about__outer {
    max-width: 386px;
    margin: 146px auto 0; /* タイトルロゴから146px */
    aspect-ratio: unset;
    min-height: 628px;
  }

  /* グラデカード: pos=(22,1185) → 外枠左端合わせ */
  .top-about__card {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 628px;
    border-radius: 10px;
    overflow: hidden; /* border-radius を子要素にも適用 */
    background: linear-gradient(180deg, #C6E1EE 0%, #32A9E1 100%); /* SP: 上→下 */
  }

  .top-about__card::after {
    border-radius: inherit;
    background: linear-gradient(0deg, #C6E1EE 0%, #32A9E1 100%); /* SPホバー用反転 */
  }

  /* 画像: カード上端から-55pxはみ出し */
  .top-about__photo {
    top: -55px;
    left: 21px;
    width: calc(100% - 42px); /* 左右21px分を差し引き → 386時=344px */
    max-width: 344px;
    height: 399px;
    overflow: visible; /* 幅縮小時に画像がはみ出しても表示 */
  }

  .top-about__photo img {
    border-radius: 0;
    width: auto; /* 幅は高さから自動算出 */
    height: 100%; /* 高さ399pxを維持 */
    object-fit: unset;
    max-width: none; /* base.css の max-width:100% を解除 */
  }

  /* テキスト: カード内 pos=(43,1552) → top=367px */
  .top-about__content {
    left: 21px;
    top: 367px;
    width: calc(100% - 42px); /* 左右21px余白 → 386時=344px */
    max-width: 344px;
  }

  .top-about__sub {
    font-size: clamp(14px, 3.72vw, 16px);
    letter-spacing: 0;
    line-height: 1;
    padding: 4px 8px 5px;
    margin-bottom: 10px;
  }

  .top-about__heading {
    font-size: clamp(24px, 6.7vw, 28.8px); /* 360px≈24px, 430px=28.8px */
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 24px;
    padding: 4px 10px 7px;
  }

  .top-about__catch {
    font-size: clamp(14.5px, 3.72vw, 16px); /* 360px≈14.5px, 430px=16px */
    line-height: 26px;
    letter-spacing: 0;
  }

  /* >>>ボタン: pos=(344,1748) → bottom≈17px, right≈22px */
  .top-about__btn {
    bottom: 17px;
    right: 22px;
    width: 43px;
    height: 43px;
  }


  /* ----------------------------------------------------------
     募集職種
     Figma SP: 背景 430×1559, rcr=[0,50,0,50], bg=#eef7ff
     見出し fs=30.4, カード 385×250/250/310, gap=30px
     ---------------------------------------------------------- */
  .top-recruit {
    padding: 0;
    margin-top: 80px; /* 精密審美会セクションとの余白 */
  }

  .top-recruit__bg {
    max-width: 100%;
    margin: 0;
    padding: 50px 22px 60px;
    border-radius: 0 50px 0 50px;
  }

  /* .inner の padding を解除（.top-recruit__bg が既に padding:22px を持つため） */
  .top-recruit__inner.inner {
    padding: 0;
  }

  .top-recruit__header {
    padding-top: 0;
  }

  .top-recruit__ttl-img {
    max-width: 258px;
    margin-left: 23px;
    margin-bottom: -20px;
  }

  /* Figma SP: fs=30.4, ls=2.43, lh=41.4 */
  .top-recruit__heading {
    font-size: 30.4px;
    letter-spacing: 2.43px;
    line-height: 41.4px;
  }

  /* Figma SP: 助詞「の」「を」は fs=27.4, ls=2.192 */
  .top-recruit__heading .heading-particle {
    font-size: 27.4px;
    letter-spacing: 2.192px;
  }

  .top-recruit__intro {
    margin-bottom: 48px;
  }

  .top-recruit__intro p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1.28px;
  }

  /* Figma SP: 「募集職種」fs=20, ls=1.6 */
  .top-recruit__sub {
    font-size: 20px;
    letter-spacing: 1.6px;
  }

  .top-recruit__divider {
    margin: 0 0 57px; /* Figma SP: 「ー募集職種ー」とカード間の余白 */
    max-width: 100%;
  }

  .top-recruit__cards {
    gap: 30px;
    max-width: 100%;
  }

  /* カード: Figma SP 385×250, cr=10, bg=#fff, shadow */
  .top-recruit__card {
    height: 250px;
    min-height: unset;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
  }

  /* 歯科助手カード: Figma SP 385×310 */
  .top-recruit__card:nth-child(3) {
    height: 310px;
  }

  /* 背景画像: カード右側に配置 */
  .top-recruit__card-bg {
    width: 55%;
    right: 0;
  }

  /* 画像左端のフェード（白→透明） */
  .top-recruit__card-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, #fff 0%, transparent 100%);
    z-index: 1;
  }

  .top-recruit__card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 30px;
    width: 100%;
  }

  .top-recruit__card-name {
    gap: 10px;
    margin-bottom: 16px;
  }

  /* Figma SP: fs=20, ls=1.6 */
  .top-recruit__card-ja {
    font-size: 20px;
    letter-spacing: 1.6px;
  }

  /* pc-only/sp-only が display:block のため span 内で改行されるのを防止 */
  .top-recruit__card-ja .sp-only {
    display: inline;
  }

  .top-recruit__card-btns {
    flex-direction: column;
    align-items: flex-start; /* PC align-items:center を上書き → 左揃え */
    gap: 0;
  }

  /* Figma SP: アイコン21×21 塗り丸 + テキスト fs=16, ls=1.28 */
  .top-recruit__card-btn {
    font-size: 16px;
    letter-spacing: 1.28px;
    gap: 14px;
    padding: 12px 0;
  }

  .top-recruit__card-btn-icon svg {
    width: 21px;
    height: 21px;
  }

  /* SP: アイコンは常に塗り丸（PCのホバー時と同じ見た目） */
  .top-recruit__card-btn-icon svg circle {
    fill: #1556a6;
    stroke: #1556a6;
  }

  .top-recruit__card-btn-icon svg path {
    stroke: #fff;
  }


  /* ----------------------------------------------------------
     メッセージ
     Figma SP: 見出し fs=30.4, ls=2.43
     ---------------------------------------------------------- */
  .top-message {
    padding: 80px 0 0;
  }

  .top-message__inner {
    padding: 0 22px;
  }

  .top-message__ttl-img {
    max-width: 299px;
    margin-left: 21px;
    margin-bottom: -30px;
  }

  /* Figma SP: fs=30.4, ls=2.43, lh=41.4 */
  .top-message__heading {
    font-size: 30.4px;
    letter-spacing: 2.43px;
    line-height: 41.4px;
    margin-bottom: 28px;
  }

  /* Figma SP: 助詞「からの」は fs=27.4, ls=2.192 */
  .top-message__heading .heading-particle {
    font-size: 27.4px;
    letter-spacing: 2.192px;
  }

  .top-message__body {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1.28px;
    max-width: 387px;
  }


  /* ----------------------------------------------------------
     人物スライダー
     Figma SP: 各スライド 344×344, cr=10
     両端に少しはみ出し（Mask group 33px）
     ---------------------------------------------------------- */
  .top-people {
    padding: 40px 0;
  }

  .top-people__slide {
    width: 280px !important;
    height: 280px;
    border-radius: 10px;
  }


  /* ----------------------------------------------------------
     メッセージボタン
     Figma SP: Component 1, 388×65, cr=30
     ---------------------------------------------------------- */
  .top-message__btn-wrap {
    justify-content: center;
    padding: 50px 22px 0;
  }

  .top-message__btn {
    width: 388px;
    max-width: 100%;
    height: 65px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
  }


  /* ----------------------------------------------------------
     One Day カード
     Figma SP: Group 37, 386×193 (グラデ161px + 人物はみ出し)
     1列表示, gap=39px
     ---------------------------------------------------------- */
  .top-oneday {
    padding: 50px 0 0;
  }

  .top-oneday__inner {
    padding: 0 22px;
  }

  .top-oneday__grid {
    grid-template-columns: 1fr;
    gap: 39px;
  }

  /* Figma SP: カード 386×193 */
  .top-oneday__card {
    height: 193px;
  }

  /* グラデーション: Figma SP 386×161 */
  .top-oneday__gradient {
    height: 161px;
    border-radius: 10px;
  }

  /* 人物: Figma SP 196×193 */
  .top-oneday__photo {
    width: 196px;
    height: 193px;
  }

  /* テキスト: Figma SP pos≈(201,531相対) — 人物の右側, 360px対応で左寄せ */
  .top-oneday__text {
    right: auto;
    left: 149px;
    top: auto;
    bottom: 55px; /* 干渉回避: 50→55 (5px上へ) */
  }

  /* Figma SP: fs=14, ラベル背景112×27 */
  .top-oneday__label {
    font-size: 14px;
    padding: 3px 7px;
  }

  /* Figma SP: fs=20, 名前背景131×30 */
  .top-oneday__name {
    font-size: 20px;
    padding: 2px 8px;
  }

  /* >>>アイコン: 白丸背景付きシェブロン */
  .top-oneday__icon {
    width: 36px;
    height: 36px;
    right: 10px; /* 16→10 (6px右へ) */
    bottom: 10px; /* 干渉回避: 16→10 (6px下へ) */
  }

  .top-oneday__icon svg {
    width: 13px;
    height: 9px;
  }


  /* ----------------------------------------------------------
     医院紹介
     Figma SP: 背景 430×1105, rcr=[0,50,0,50], bg=#eef7ff
     2列グリッド, 各189.6×135.4, gap≈16px
     ---------------------------------------------------------- */
  .top-clinics {
    padding: 80px 0 80px;
  }

  .top-clinics__bg {
    max-width: 100%;
    margin: 0;
    padding: 50px 22px 60px;
    border-radius: 0 50px 0 50px;
  }

  /* .inner の padding を解除（.top-clinics__bg が既に padding:22px を持つため） */
  .top-clinics__inner.inner {
    padding: 0;
  }

  .top-clinics__ttl-img {
    max-width: 215px;
    margin-left: 21px;
    margin-bottom: -20px;
  }

  /* Figma SP: fs=30.4, ls=2.43, lh=41.4 */
  .top-clinics__heading {
    font-size: 30.4px;
    letter-spacing: 2.43px;
    line-height: 41.4px;
  }

  .top-clinics__intro {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1.28px;
    margin-bottom: 57px;
  }

  /* Figma SP: 2列, 各189.6×135.4, gap≈16px, cr=10 */
  .top-clinics__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .top-clinics__card-img {
    aspect-ratio: 189.6 / 135.4;
    border-radius: 10px;
  }

  .top-clinics__card:nth-child(7) {
    grid-column: 1;
  }

  /* 英語テキストをSPでは非表示（タッチでホバーが効かないため） */
  .top-clinics__card-en {
    display: none;
  }
}

/* ===== SP: 横オーバーフロー防止 ===== */
@media (max-width: 768px) {
  .top-fv,
  .top-fv .swiper,
  section,
  .footer-cta,
  .footer-banners,
  .footer {
    max-width: 100vw;
    overflow-x: hidden;
  }
}