@charset "UTF-8";

/* =========================================================
   トンボ歯科クリニック 採用LP　共通スタイル
   （ページ送りの器・固定ヘッダー・見出し・ボタン・カード・フッターなど）
   ========================================================= */

/* ===== 変数 ===== */
:root {
  --site-header-height: 70px;
  --column-width: 480px;
  --gutter: 24px;
  --color-base: #99d7e8;
  --color-base-deep: #2b7f99;
  --color-accent: #fbb03b;
  --color-text: #5a5552;
  --color-heading: #4a4440;
  --color-bg: #fffaf4;
  --color-pale-blue: #e6f5fa;
  --color-pale-orange: #fff1dc;
  --color-card: #ffffff;
  --color-line: #d9eef5;
  --color-sample: #8a8480;
  --color-error: #c8473d;
  --radius-card: 40px;
  --radius-leaf: 84px 10px;
  --font-ja: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Quicksand", "Zen Maru Gothic", sans-serif;
}

/* ===== リセット・基本 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background-color: var(--color-pale-blue);
  color: var(--color-text);
  font-family: var(--font-ja);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
fieldset,
address {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

strong {
  font-weight: 700;
}

small {
  font-size: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--color-base-deep);
  outline-offset: 3px;
}

.fv :focus-visible {
  outline-color: #fff;
}

.nowrap {
  display: inline-block;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ===== ページ送りの器（演出0） ===== */
.swipe-container {
  position: relative;
  width: min(100%, var(--column-width));
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background-color: var(--color-bg);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.swipe-container::-webkit-scrollbar {
  display: none;
}

/* 長尺セクションの中を読んでいる間だけ、スナップを外す（演出0-3） */
.swipe-container.is-free-scroll {
  scroll-snap-type: none;
}

/* PC（マウス・トラックパッド）：CSSのスナップは外し、次の画面への吸着は common.js で行う */
.is-pc-scroll .swipe-container {
  scroll-snap-type: none;
}

.swipe-section {
  position: relative;
  box-sizing: border-box;
  height: calc(100vh - var(--site-header-height));
  height: calc(100dvh - var(--site-header-height));
  min-height: calc(100vh - var(--site-header-height));
  min-height: calc(100dvh - var(--site-header-height));
  max-height: calc(100vh - var(--site-header-height));
  max-height: calc(100dvh - var(--site-header-height));
  scroll-margin-top: var(--site-header-height);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* FVだけはヘッダーを引かず全画面（FV表示中はヘッダーを隠すため） */
.swipe-section--fv {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  scroll-margin-top: 0;
}

/* 長尺セクション（演出0-3）：1画面より長くなってよい */
.swipe-section--long {
  height: auto;
  min-height: calc(100vh - var(--site-header-height));
  min-height: calc(100dvh - var(--site-header-height));
  max-height: none;
  scroll-snap-stop: normal;
}

/* 長尺セクションの下端にもスナップ位置を作る */
.snap-end {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  scroll-snap-align: end;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .swipe-container {
    scroll-behavior: auto;
  }
}

/* ===== PC表示時の左右の境目（中央列の左右の辺だけ） ===== */
.column-frame {
  display: none;
}

@media (min-width: 481px) {
  .column-frame {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 40;
    width: var(--column-width);
    transform: translateX(-50%);
    border-right: 1px solid rgba(74, 68, 64, 0.06);
    border-left: 1px solid rgba(74, 68, 64, 0.06);
    box-shadow:
      -16px 0 32px -18px rgba(74, 68, 64, 0.22),
      16px 0 32px -18px rgba(74, 68, 64, 0.22);
    pointer-events: none;
  }
}

/* ===== PC表示時の左右の背景と、右側のボタン ===== */
.pc-side,
.pc-nav {
  display: none;
}

@media (min-width: 481px) {
  .swipe-container {
    z-index: 1;
  }

  /* 中央の列の左右に見える背景（中央は列で隠れる） */
  .pc-side {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--color-pale-blue);
    background-image: url("../images/common/pc-bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
  }
}

/* 右側の余白に「募集要項」「エントリー」のボタン（余白が十分ある幅だけ） */
@media (min-width: 900px) {
  .pc-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    top: 50%;
    right: calc((100% - var(--column-width)) / 4);
    z-index: 35;
    transform: translate(50%, -50%);
  }

  /* 大きいボタン共通の最小幅（260px）は外し、文字の両側の余白を詰める
     （.btn--large より後ろの指定に負けないよう、.pc-nav から書く） */
  .pc-nav .pc-nav__btn {
    width: min(200px, calc((100vw - var(--column-width)) / 2 - 48px));
    min-width: 0;
    padding: 0 20px;
  }
}

/* ===== 固定ヘッダー（演出0-4） ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 30;
  width: min(100%, var(--column-width));
  height: var(--site-header-height);
  transform: translateX(-50%);
  background-color: var(--color-bg);
  transition:
    opacity 0.2s linear,
    visibility 0.2s linear;
}

.intro-active .site-header {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 0 10px 0 14px;
}

/* ロゴマークの右に医院名 */
.site-header__logo {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
}

.site-header__logo img {
  flex: 0 0 auto;
  width: 32px;
  height: auto;
}

.site-header__name {
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-heading);
}

.site-header__nav {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.site-header__nav .btn--small {
  padding: 0 10px;
  font-size: 11.5px;
}

/* 幅の狭いスマホでは、医院名とボタンの文字を小さくして1行に収める */
@media (max-width: 374px) {
  .site-header__inner {
    gap: 6px;
    padding: 0 8px 0 10px;
  }

  .site-header__logo {
    gap: 5px;
  }

  .site-header__logo img {
    width: 28px;
  }

  .site-header__name {
    font-size: 11px;
    letter-spacing: 0;
  }

  .site-header__nav {
    gap: 4px;
  }

  .site-header__nav .btn--small {
    padding: 0 8px;
    font-size: 10.5px;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* ===== ボタン（両端が丸いピル型＋左に小さな三角） ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 32px;
  border: 2px solid var(--color-accent);
  border-radius: 40px;
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s linear,
    border-color 0.2s linear,
    color 0.2s linear;
}

/* 文字の左の、小さな右向きの三角（▶） */
.btn__icon {
  flex: 0 0 auto;
  width: 8px;
  height: 10px;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.btn--large {
  min-width: 260px;
  min-height: 58px;
  font-size: 1.0625rem;
}

.btn--small {
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.btn--outline {
  border-color: var(--color-base);
  background-color: #fff;
  color: var(--color-text);
  font-weight: 500;
}

/* ホバーで色を変えるのはリンク・ボタンだけ */
@media (hover: hover) {
  a.btn--primary:hover,
  button.btn--primary:hover {
    border-color: #f39f1d;
    background-color: #f39f1d;
  }

  a.btn--outline:hover {
    background-color: var(--color-pale-blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ===== セクションの基本 ===== */
.section {
  overflow: hidden;
  padding: 32px var(--gutter) 28px;
}

.section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

/* 中身が少ないセクションは、上下の真ん中に寄せる */
.section__inner--center {
  justify-content: center;
}

.section--cream {
  background-color: var(--color-bg);
}

.section--blue {
  background-color: var(--color-pale-blue);
}

.section--orange {
  background-color: var(--color-pale-orange);
}

/* 背の低い端末（高さ667px前後）では、余白を詰めて1画面に収める */
@media (max-height: 700px) {
  .section {
    padding-top: 22px;
    padding-bottom: 20px;
  }

  .section__inner {
    gap: 14px;
  }
}

/* ===== セクション見出し（英字の小文字＋日本語見出し・中央揃え） ===== */
.section-head {
  flex: 0 0 auto;
  text-align: center;
}

.section-head__en {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(2rem, 9vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-base);
}

/* 見出し横の小さな丸い点（引用符のような2つの点） */
.section-head__deco {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.section-head__deco::before,
.section-head__deco::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.section-head__deco::before {
  width: 7px;
  height: 7px;
  background-color: var(--color-base);
}

.section-head__deco::after {
  width: 5px;
  height: 5px;
  background-color: var(--color-accent);
}

.section-head__deco--left::before {
  top: 0;
  left: 0;
}

.section-head__deco--left::after {
  right: 0;
  bottom: 0;
}

.section-head__deco--right::before {
  top: 0;
  right: 0;
}

.section-head__deco--right::after {
  bottom: 0;
  left: 0;
}

.section-head__title {
  margin-top: 6px;
  font-weight: 700;
  font-size: clamp(1.25rem, 5.4vw, 1.5rem);
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--color-heading);
}

@media (max-height: 700px) {
  .section-head__en {
    font-size: clamp(1.75rem, 8vw, 2.125rem);
  }

  .section-head__title {
    margin-top: 2px;
    font-size: clamp(1.1875rem, 5.2vw, 1.375rem);
    line-height: 1.5;
  }
}

/* ===== 本文 ===== */
.section-text {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: left;
  text-wrap: pretty;
}

.section-text p + p {
  margin-top: 0.9em;
}

/* 【 】で囲まれた強調：太字＋オレンジのマーカー（文字の下半分） */
.mark {
  font-weight: 700;
  background-image: linear-gradient(
    transparent 55%,
    var(--color-accent) 55%,
    var(--color-accent) 92%,
    transparent 92%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ===== カード・写真の枠 ===== */
.card {
  border-radius: var(--radius-card);
  background-color: var(--color-card);
}

/* 対角の2つの角だけ大きく丸めた、葉っぱのような形 */
.leaf {
  border-radius: var(--radius-leaf);
}

/* 写真は枠の中に object-fit: cover で収める（差し替えで縦横比が変わっても崩れない） */
.photo {
  position: relative;
  overflow: hidden;
  background-color: var(--color-line);
}

.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 残りの高さいっぱいに広がる写真の枠 */
.photo--fill {
  flex: 1 1 0;
  min-height: 120px;
}

/* 人物写真は円形に切り抜く */
.photo--circle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* ===== セクション末尾のボタン ===== */
.section-cta {
  display: flex;
  justify-content: center;
}

/* ===== フッター ===== */
.site-footer {
  padding: 40px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background-color: var(--color-pale-blue);
  text-align: center;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-footer__logo img {
  width: 44px;
  height: auto;
}

.site-footer__name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  color: var(--color-heading);
}

.site-footer__info {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.8;
}

.site-footer__info a {
  text-decoration: none;
}

.site-footer__copy {
  margin-top: 20px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* ===== セクションに入ったときの「ふわっ」とした出方（演出C） ===== */
/* 1. 見出し横の小さな丸い点：左の点は左から、右の点は右から */
.is-js .section-head__deco--left {
  opacity: 0;
  transform: translateX(-12px);
}

.is-js .section-head__deco--right {
  opacity: 0;
  transform: translateX(12px);
}

.is-js .is-active .section-head__deco--left {
  animation: deco-from-left 2s ease both;
}

.is-js .is-active .section-head__deco--right {
  animation: deco-from-right 2s ease both;
}

@keyframes deco-from-left {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes deco-from-right {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2. 文字：英字の見出し → 日本語の見出し → 本文・カードの順に、下から（0.12秒ずつずらす。ずらし幅は JS で --fade-delay に入れる） */
.is-js .js-fade {
  opacity: 0;
}

.is-js .is-active .js-fade {
  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--fade-delay, 0s) both;
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. 写真：下から上へ開くように現れる（0.5秒遅れて開始） */
.is-js .js-reveal {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.is-js .is-active .js-reveal {
  animation: reveal-up 1.3s cubic-bezier(0.19, 1, 0.22, 1) 0.5s both;
}

@keyframes reveal-up {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* 動きを減らす設定では、最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .is-js .section-head__deco--left,
  .is-js .section-head__deco--right,
  .is-js .is-active .section-head__deco--left,
  .is-js .is-active .section-head__deco--right,
  .is-js .js-fade,
  .is-js .is-active .js-fade {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .is-js .js-reveal,
  .is-js .is-active .js-reveal {
    clip-path: none;
    animation: none;
  }
}

/* ===== 花びらのゆらぎ（演出D・常時） ===== */
/* セクションの上の角（見出しより上の余白）などに置く。揺れる60pxの幅も含めて列の内側に収める */
.petals {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 対角の2つの角を丸めた、花びら・葉っぱの形 */
.petal {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 100% 0;
  animation: petal-sway 3s ease-in-out infinite alternate;
  will-change: transform;
}

.petal--small {
  width: 15px;
  height: 15px;
}

.petal--blue {
  background-image: linear-gradient(
    135deg,
    rgba(153, 215, 232, 0.9) 0%,
    rgba(153, 215, 232, 0.25) 100%
  );
}

.petal--orange {
  background-image: linear-gradient(
    135deg,
    rgba(251, 176, 59, 0.75) 0%,
    rgba(251, 176, 59, 0.2) 100%
  );
}

/* 置く位置（右側は、右へ60px揺れても端から出ないよう、その分だけ内側に置く） */
.petal--tl {
  top: 6px;
  left: 10px;
}

.petal--tr {
  top: 10px;
  right: 72px;
}

.petal--bl {
  bottom: 12px;
  left: 14px;
}

.petal--br {
  right: 76px;
  bottom: 10px;
}

/* 真ん中あたりの左右（文字に重なってもよい。大きく淡くして、読みにくくならないようにする） */
.petal--ml {
  top: 44%;
  left: -8px;
}

.petal--mr {
  top: 64%;
  right: 66px;
}

.petal--large {
  width: 46px;
  height: 46px;
  opacity: 0.5;
}

/* 周期を花びらごとにずらす（そろって揺れないように） */
.petal--2s {
  animation-duration: 2s;
}

.petal--3s {
  animation-duration: 3s;
}

.petal--3-5s {
  animation-duration: 3.5s;
}

.petal--4s {
  animation-duration: 4s;
}

@keyframes petal-sway {
  0% {
    transform: translateX(0) rotate(-20deg);
  }

  100% {
    transform: translateX(60px) rotate(0deg);
  }
}

/* 背の低い端末では、見出しとの間が狭くなるので小さく・上に寄せる */
@media (max-height: 700px) {
  .petal {
    width: 16px;
    height: 16px;
  }

  .petal--small {
    width: 11px;
    height: 11px;
  }

  .petal--large {
    width: 36px;
    height: 36px;
  }

  .petal--tl {
    top: 3px;
  }

  .petal--tr {
    top: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .petal {
    animation: none;
    transform: rotate(-10deg);
  }
}