@charset "UTF-8";
/* =========================================================
   トップページ ヘッダー＋ファーストビュー（2026年 承認案）
   Figma: 09 トップ｜承認案 PC 1440 / 10 トップ｜承認案 SP 430
   --u = デザイン上の1px。画面幅に合わせて縮小する。
     1024px以上 : PCデザイン（1440基準、1440px以上は等倍）
     1023px以下 : SPデザイン（430基準、最大640px幅）
   ========================================================= */

:root {
  --tp-brown: #643510;
  --tp-orange: #e38300;
  --tp-star: #ed964e;
  --tp-red: #e56e43;
  --tp-red-text: #d96e45;
  --tp-bg: #fcf7ef;
  --tp-peach: #fce5d1;
  --tp-thead: #fff3e7;
  --tp-line: #e4e1dc;
  --tp-line-in: #efebe6;
  --tp-divider: #eeece8;
  --tp-shadow: #f1e5d8;
  --tp-gray: #777;
  --tp-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --tp-serif: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --u: calc(min(100vw, 640px) / 430);
  --tp-header-h: calc(58 * var(--u));
}
@media (min-width: 1024px) {
  :root {
    --u: calc(min(100vw, 1440px) / 1440);
    --tp-header-h: calc(78 * var(--u));
  }
}

/* 既存style.cssの全体指定（* のフォント、svgの絶対配置、h1の余白）を打ち消す */
.tp-header, .tp-header *, .tp-fv, .tp-fv * {
  font-family: var(--tp-sans);
  box-sizing: border-box;
}
:where(.tp-header, .tp-fv) svg {
  position: static;
  top: auto;
  width: auto;
  height: auto;
  display: block;
  overflow: visible;
}

/* ---------------------------------------------------------
   ヘッダー
   --------------------------------------------------------- */
.tp-header {
  background: #fff;
  height: var(--tp-header-h);
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.tp-header__inner {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 calc(16 * var(--u)) 0 calc(20 * var(--u));
}
.tp-header__logo { display: block; flex-shrink: 0; transition: opacity .3s; }
.tp-header__logo:hover { opacity: .7; }
.tp-header__logo img {
  display: block;
  height: calc(44 * var(--u));
  width: auto;
}

.tp-nav { display: none; }
.tp-nav a {
  color: var(--tp-brown);
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  transition: opacity .25s;
  white-space: nowrap;
}
.tp-nav a::after {
  background: var(--tp-orange);
  bottom: calc(-6 * var(--u));
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease-out;
  width: 100%;
}
.tp-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ハンバーガー（main.js の .hamburger クリックでドロワーが開く） */
.tp-header .tp-burger.hamburger {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--tp-brown);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  margin: 0;
  padding: calc(4 * var(--u));
}
.tp-burger__lines {
  display: block;
  height: calc(16 * var(--u));
  position: relative;
  width: calc(25 * var(--u));
}
.tp-burger__lines i {
  background: var(--tp-brown);
  border-radius: 2px;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transition: transform .3s, opacity .3s, top .3s;
  width: 100%;
}
.tp-burger__lines i:nth-child(1) { top: 0; }
.tp-burger__lines i:nth-child(2) { top: calc(50% - 1px); }
.tp-burger__lines i:nth-child(3) { top: calc(100% - 2px); }
.tp-burger.is-active .tp-burger__lines i:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.tp-burger.is-active .tp-burger__lines i:nth-child(2) { opacity: 0; }
.tp-burger.is-active .tp-burger__lines i:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }
.tp-burger__txt {
  font-size: calc(10 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* ドロワーをヘッダーの下に出す */
.modal { top: var(--tp-header-h) !important; z-index: 9999; }

@media (min-width: 1024px) {
  .tp-header__inner { padding: 0 calc(99 * var(--u)) 0 calc(30 * var(--u)); }
  .tp-header__logo img { height: calc(64 * var(--u)); }
  .tp-nav {
    align-items: center;
    display: flex;
    gap: calc(35 * var(--u));
  }
  .tp-header .tp-burger.hamburger { display: none; }
  .modal { display: none !important; }
}

/* ---------------------------------------------------------
   ファーストビュー（共通）
   --------------------------------------------------------- */
.tp-fv {
  background: var(--tp-bg);
  color: var(--tp-brown);
  overflow: hidden;
  padding-top: var(--tp-header-h);
  position: relative;
}
.tp-fv__inner {
  margin: 0 auto;
  max-width: 640px;
  padding: 0 calc(12 * var(--u)) calc(49 * var(--u));
  position: relative;
}
.tp-fv__head { position: relative; text-align: center; }
.tp-fv__h1 {
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  padding-top: calc(32 * var(--u));
  white-space: nowrap;
}
.tp-fv__sep { color: #c9b3a1; font-weight: 400; margin: 0 .1em; }
.tp-fv__sparkle {
  position: absolute !important;
  right: calc(6 * var(--u));
  top: calc(14 * var(--u));
  width: calc(29 * var(--u)) !important;
}
.tp-fv__catch {
  font-family: var(--tp-serif) !important;
  font-weight: 700;
  line-height: 1.4;
  margin-top: calc(2 * var(--u));
}
.tp-fv__catch span { display: block; font-family: var(--tp-serif); white-space: nowrap; }
.tp-fv__catch-l1 { font-size: calc(46 * var(--u)); }
.tp-fv__catch-l2 { font-size: calc(40 * var(--u)); margin-top: calc(-4 * var(--u)); }
.tp-fv__underline {
  height: calc(16 * var(--u)) !important;
  margin: calc(7 * var(--u)) auto 0;
  width: calc(394 * var(--u)) !important;
}
.tp-fv__lead {
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  margin-top: calc(8 * var(--u)) !important;
  white-space: nowrap;
}

/* 写真（不定形の切り抜き） */
.tp-fv__photo {
  height: calc(230 * var(--u));
  margin: calc(10 * var(--u)) calc(-13 * var(--u)) 0 calc(-8 * var(--u));
  overflow: hidden;
  -webkit-clip-path: url(#tpFvClipSp);
  clip-path: url(#tpFvClipSp);
}
.tp-fv__photo img {
  display: block;
  height: calc(281 * var(--u));
  margin: calc(-8 * var(--u)) 0 0 calc(8.5 * var(--u));
  max-width: none;
  object-fit: cover;
  width: calc(418 * var(--u));
}

/* 特徴3つ */
.tp-fv__points {
  display: flex;
  gap: calc(8 * var(--u));
  list-style: none;
  margin: calc(12 * var(--u)) 0 0;
  padding: 0;
}
.tp-fv__points li {
  align-items: center;
  background: var(--tp-peach);
  border-radius: 999px;
  display: flex;
  flex: 1 1 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  height: calc(49 * var(--u));
  justify-content: center;
  white-space: nowrap;
}

/* 診療時間カード */
.tp-fv__info {
  background: #fff;
  border-radius: calc(22 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 var(--tp-shadow);
  margin-top: calc(12 * var(--u));
  padding: calc(17 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
}
.tp-fv__table {
  border: 1px solid var(--tp-line);
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.tp-fv__table th, .tp-fv__table td {
  border-top: 1px solid var(--tp-line-in);
  color: var(--tp-brown);
  font-size: calc(11 * var(--u));
  font-weight: 700;
  height: calc(25 * var(--u));
  line-height: 1;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
.tp-fv__table thead th { background: var(--tp-thead); border-top: 0; }
.tp-fv__table .tp-col-time { padding-left: calc(8 * var(--u)); text-align: left; width: 27.6%; }
.tp-fv__table td { font-size: calc(12 * var(--u)); font-weight: 400; }
.tp-fv__table .on { color: var(--tp-orange); }
.tp-fv__table .off { color: var(--tp-gray); }
.tp-fv__table .star { color: var(--tp-orange); }
.tp-fv__note {
  align-items: center;
  display: flex;
  font-size: calc(13 * var(--u));
  gap: calc(7 * var(--u));
  margin-top: calc(6 * var(--u)) !important;
}
.tp-fv__note::before { color: var(--tp-star); content: "★"; font-size: calc(17 * var(--u)); line-height: 1; }

.tp-fv__contact {
  border-top: 1px solid var(--tp-divider);
  margin-top: calc(16 * var(--u));
  padding-top: calc(11 * var(--u));
  text-align: center;
}
.tp-fv__contact-head {
  align-items: center;
  display: flex;
  gap: calc(7 * var(--u));
  justify-content: flex-start;
}
.tp-fv__badge {
  background: var(--tp-red);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  height: calc(28 * var(--u));
  justify-content: center;
  align-items: center;
  width: calc(131 * var(--u));
}
.tp-fv__reserve {
  color: var(--tp-red-text);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}
.tp-fv__tel {
  color: var(--tp-brown) !important;
  display: inline-block;
  font-size: calc(36 * var(--u));
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.35;
  margin-top: calc(-4 * var(--u));
}
.tp-fv__hours { font-size: calc(14 * var(--u)); line-height: 1.6; }
.tp-fv__hours .tp-fv__closed { display: none; }

/* ---------------------------------------------------------
   ファーストビュー（PC：1024px以上）
   Figmaの座標をそのまま --u 倍で配置
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .tp-fv__inner {
    height: calc(682 * var(--u));
    max-width: 1440px;
    padding: 0;
    position: static;
  }
  .tp-fv__inner > * { position: absolute; z-index: 2; }
  .tp-fv__inner > .tp-fv__photo { z-index: 1; }
  .tp-fv__inner::before { content: none; }

  .tp-fv__head {
    left: calc(max(0px, (100vw - 1440px) / 2) + 62 * var(--u));
    text-align: left;
    top: calc(var(--tp-header-h) + 52 * var(--u));
  }
  .tp-fv__h1 { font-size: calc(22 * var(--u)); padding: 0 0 0 calc(2 * var(--u)); }
  .tp-fv__sparkle {
    left: calc(450 * var(--u));
    right: auto;
    top: calc(-25 * var(--u));
    width: calc(41 * var(--u)) !important;
  }
  .tp-fv__catch { line-height: 1.44; margin-top: calc(6 * var(--u)); }
  .tp-fv__catch-l1 { font-size: calc(70 * var(--u)); }
  .tp-fv__catch-l2 { font-size: calc(62 * var(--u)); margin-top: calc(-1 * var(--u)); }
  .tp-fv__underline {
    height: calc(14 * var(--u)) !important;
    margin: calc(-8 * var(--u)) 0 0 calc(12 * var(--u));
    width: calc(524 * var(--u)) !important;
  }
  .tp-fv__lead { font-size: calc(20 * var(--u)); margin: calc(9 * var(--u)) 0 0 calc(3 * var(--u)) !important; }

  .tp-fv__photo {
    height: calc(582 * var(--u));
    margin: 0;
    right: calc(-17 * var(--u));
    top: var(--tp-header-h);
    width: calc(838 * var(--u));
    -webkit-clip-path: url(#tpFvClipPc);
    clip-path: url(#tpFvClipPc);
  }
  .tp-fv__photo img {
    height: calc(552 * var(--u));
    margin: 0 0 0 calc(16 * var(--u));
    width: calc(805 * var(--u));
  }

  .tp-fv__points {
    gap: calc(15 * var(--u));
    left: calc(max(0px, (100vw - 1440px) / 2) + 64 * var(--u));
    margin: 0;
    top: calc(var(--tp-header-h) + 340 * var(--u));
  }
  .tp-fv__points li {
    border-radius: calc(32 * var(--u));
    flex: 0 0 auto;
    font-size: calc(18 * var(--u));
    height: calc(64 * var(--u));
    width: calc(187 * var(--u));
  }

  .tp-fv__info {
    align-items: flex-start;
    border-radius: calc(24 * var(--u));
    box-shadow: 0 calc(5 * var(--u)) 0 var(--tp-shadow);
    display: flex;
    height: calc(205 * var(--u));
    left: calc(max(0px, (100vw - 1440px) / 2) + 32 * var(--u));
    margin: 0;
    padding: calc(25 * var(--u)) 0 0 calc(28 * var(--u));
    top: calc(var(--tp-header-h) + 445 * var(--u));
    width: calc(902 * var(--u));
  }
  .tp-fv__hours-wrap { flex: 0 0 calc(490 * var(--u)); }
  .tp-fv__table th, .tp-fv__table td { font-size: calc(18 * var(--u)); height: calc(37 * var(--u)); }
  .tp-fv__table td { font-size: calc(19 * var(--u)); }
  .tp-fv__table .tp-col-time { padding-left: calc(10 * var(--u)); width: 32.4%; }
  .tp-fv__note { font-size: calc(18 * var(--u)); gap: calc(2 * var(--u)); margin-top: calc(8 * var(--u)) !important; }
  .tp-fv__note::before { font-size: calc(22 * var(--u)); }

  .tp-fv__contact {
    border-left: 1px solid var(--tp-divider);
    border-top: 0;
    height: calc(165 * var(--u));
    margin: calc(-3 * var(--u)) 0 0 calc(24 * var(--u));
    padding: 0 0 0 calc(28 * var(--u));
    text-align: left;
  }
  .tp-fv__contact-head { align-items: flex-start; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(-5 * var(--u)); }
  .tp-fv__badge { font-size: calc(18 * var(--u)); height: calc(32 * var(--u)); width: calc(179 * var(--u)); }
  .tp-fv__reserve { font-size: calc(17 * var(--u)); }
  .tp-fv__tel { font-size: calc(34 * var(--u)); line-height: 1.4; margin-top: 0; }
  .tp-fv__hours { font-size: calc(13 * var(--u)); line-height: 1.62; }
  .tp-fv__hours .tp-fv__closed { display: inline; }
}

/* ---------------------------------------------------------
   下層ページ用：固定ヘッダーの高さ分の余白
   767px以下は既存ページ側に74pxの上余白があるため不要
   --------------------------------------------------------- */
.tp-header-spacer { display: none; }
@media (min-width: 768px) {
  .tp-header-spacer { display: block; height: var(--tp-header-h); }
}