/* はるのそら歯科 — トークン・リセット・共通の部品
   寸法・文字の大きさ・字間・行間は、参考サイトのトップ（PC 1440px・スマホ 390px）の CSS を測った値。
   色は参考の組み方（生成りの地＋白い面＋黄色の差し色＋淡い黄色の面＋もう1色の差し色）にそろえ、
   文字と2つ目の差し色の色相を「春の空」の青みに替えた */

@font-face {
  font-family: "Noto Sans JP";
  src: url("../assets/fonts/noto-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("../assets/fonts/noto-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("../assets/fonts/josefin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../assets/fonts/zenkaku-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #faf8f1;          /* 地（生成り） */
  --white: #fff;          /* 白い面（四角・箱・フッター） */
  --panel: #e8f1f4;       /* 淡い空色の面（診療案内の地・予約の箱。参考のベージュの面の役） */
  --ink: #3b4656;         /* 本文（地の上 9.0・白の上 9.6） */
  --ink-sub: #5d6878;     /* 補助の文字（地の上 5.4） */
  --line: rgba(59, 70, 86, 0.15);
  --yellow: #f5c431;      /* 差し色（ボタン・丸・縦の英字） */
  --yellow-pale: #fcefb0; /* 淡い黄色（四角い面・マーカー・絵の丸） */
  --sky: #5aa9d6;         /* 絵の中の面 */
  --sky-deep: #2b6f9f;    /* Web予約の地（白い文字 5.4）・ホバーの文字 */
  --shadow: 0 3px 15px rgba(59, 70, 86, 0.1);

  --f-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-en: "Josefin Sans", "Noto Sans JP", sans-serif;
  --f-copy: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}
html:not(.js) { scroll-behavior: auto; }

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 120px; }
  body { font-size: 16px; }
}

h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
h1, h2, h3 { font-weight: 700; font-size: inherit; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
small { font-size: inherit; }
table { border-collapse: collapse; }
th { font-weight: 700; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.en {
  font-family: var(--f-en);
  font-weight: 600;
}

/* 注記の帯 */
.demo {
  position: relative;
  z-index: 3000;
  padding: 7px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.demo a { text-decoration: underline; text-underline-offset: 3px; }

/* 中身の幅（参考 .u-inner：スマホは左右 25px、PC は 1080px） */
.inner {
  padding-left: 25px;
  padding-right: 25px;
}
@media (min-width: 1024px) {
  .inner {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1159px) {
  .inner { max-width: calc(100% - 80px); }
}

/* 黄色いマーカー（参考 .c-marker-yellow） */
.marker { background: linear-gradient(transparent 68%, var(--yellow-pale) 0%); }

/* 段の見出し：小さな日本語＋大きな英字（小文字のまま、字間は詰めて言葉として読ませる） */
.head__ja {
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.head__en {
  font-size: 38px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
@media (min-width: 1024px) {
  .head__ja { font-size: 18px; }
  .head__en { font-size: 85px; }
}

/* 丸いボタン（参考 .c-btn02） */
.btn {
  max-width: 270px;
  margin: 40px auto 0;
}
.btn a {
  position: relative;
  display: block;
  padding: 14px 40px 15px;
  border-radius: 50px;
  background: var(--yellow);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-align: center;
  transition: background-color 0.6s ease, color 0.6s ease, letter-spacing 0.6s ease;
}
.btn svg {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 14px;
  height: 10px;
  transform: translateY(-50%) rotate(90deg);
}
@media (min-width: 1024px) {
  .btn { max-width: 320px; margin-top: 50px; }
  .btn a { border-radius: 64px; padding: 19px 50px 21px; }
  .btn svg { right: 25px; }
  .btn a:hover { background: var(--sky-deep); color: #fff; letter-spacing: 0.3em; }
}

/* 下線のリンク（参考 .c-btn01） */
.link {
  margin-top: 20px;
  text-align: center;
}
.link a {
  position: relative;
  display: inline-block;
  padding: 0 22px 8px 0;
  border-bottom: 2px solid var(--yellow);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
  transition: color 0.6s ease, border-color 0.6s ease;
}
.link svg {
  position: absolute;
  top: 5px;
  right: 0;
  width: 14px;
  height: 10px;
  transform: rotate(90deg);
}
@media (min-width: 1024px) {
  .link { margin-top: 30px; }
  .link a { padding: 0 24px 9px 0; border-bottom-width: 3px; font-size: 14px; }
  .link a:hover { color: var(--sky-deep); border-bottom-color: var(--sky-deep); }
}

/* 画面に入ったら下からふわっと出る（参考 fadein-up：30px・0.6秒） */
.js .anime {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .anime.is-in { opacity: 1; transform: none; }

/* 大きな英字：1文字ずつ、ばらばらの順に 60px 下から出る（参考 fadein-up-random） */
.anime-letters span { display: inline-block; }
.anime-letters .w { white-space: nowrap; }
.js .anime-letters .w { opacity: 1; transform: none; }
.ib { display: inline-block; }
.nw { white-space: nowrap; }
.js .anime-letters span {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .is-in .anime-letters span,
.js .anime-letters.is-in span { opacity: 1; transform: none; }
.anime-letters .w span:nth-child(1) { transition-delay: 0.24s; }
.anime-letters .w span:nth-child(2) { transition-delay: 0.06s; }
.anime-letters .w span:nth-child(3) { transition-delay: 0.42s; }
.anime-letters span:nth-child(1) { transition-delay: 0s; }
.anime-letters span:nth-child(2) { transition-delay: 0.36s; }
.anime-letters span:nth-child(3) { transition-delay: 0.12s; }
.anime-letters span:nth-child(4) { transition-delay: 0.24s; }
.anime-letters span:nth-child(5) { transition-delay: 0.48s; }
.anime-letters span:nth-child(6) { transition-delay: 0.06s; }
.anime-letters span:nth-child(7) { transition-delay: 0.3s; }
.anime-letters span:nth-child(8) { transition-delay: 0.18s; }
.anime-letters span:nth-child(9) { transition-delay: 0.42s; }
.js .anime-head .head__ja { opacity: 0; transition: opacity 0.6s ease 0.7s; }
.js .is-in .anime-head .head__ja { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .anime,
  .js .anime-letters span,
  .js .anime-head .head__ja { opacity: 1; transform: none; transition: none; }
}
.pos-r { object-position: 85% 50% !important; }