/* =========================================================
   Muraoka Dental — PC TOP (Figma: PC TOP / PCtop 1440px)
   Design tokens:
   ========================================================= */
:root {
	--color-text: #555555;          /* color.555555 */
	--color-brown: #837450;         /* color.837450 */
	--color-gold: #c2a570;          /* color.c2a570 */
	--color-cream: #fbf8f3;         /* color.f7f0e4 */
	--color-gray: #d9d9d9;          /* color.d9d9d9 */
	--color-border: #dbdbdb;        /* color.dbdbdb */
	--color-gold-light: #d8c7a6;    /* color.d8c7a6 */
	--color-white: #ffffff;         /* color.ffffff */
	/* design gaps (not in design.md tokens; sampled from mock): */
	--color-warm-gray: #b0aba0;     /* footer / hours header  */
	--color-section-gray: #f8f8f8;  /* clinic info section bg */
	--color-badge-border: #cbb48f;  /* hero badge border      */
	--font-en: 'Marcellus', serif;
	--font-jp: 'Shippori Mincho', serif;
	--font-zen: 'Zen Old Mincho', serif; /* 予約ボタン用 (Figma: Zen_Old_Mincho) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.sp-only { display: none; }
.menu-toggle { display: none; }
.sp-menu { display: none; }
.sp-fixed-reserve { display: none; }
body {
	min-width: 1440px;
	font-family: var(--font-jp);
	font-weight: 500;
	color: var(--color-text);
	background: var(--color-white);
	letter-spacing: 0.1em;
}
/* height:auto は必須。functions.php が <img> に width/height 属性を補っているため、
   これが無いとCSSで幅だけ指定した画像が属性の高さのまま縦に伸びる。 */
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; transition: opacity .2s; }

/* ---------- shared ---------- */
.chev-right { width: 5px; height: 10px; }
.chev-down { width: 10px; height: 5px; }
.chev-right--gold, .chev-down--gold { color: var(--color-gold); }

.sec-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	font-weight: 400;
}
.sec-head--left { align-items: flex-start; text-align: left; }
.sec-head__en {
	font-family: var(--font-en);
	font-size: 72px;
	letter-spacing: 0.1em;
	color: var(--color-text);
	line-height: 1;
}
.sec-head__en--sm { font-size: 48px; }
.sec-head__jp {
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--color-gold);
	line-height: 1;
}
.watermark {
	font-family: var(--font-en);
	font-size: 200px;
	line-height: 1;
	color: var(--color-white);
	pointer-events: none;
	white-space: nowrap;
}

.more-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 150px;
	padding: 10px;
	border-bottom: 1px solid var(--color-text);
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	line-height: 1;
	color: var(--color-text);
}
.more-link .chev-right { color: var(--color-gold); }

.news-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	height: 16px;
	padding: 0 8px;
	font-size: 11px;
	line-height: 1;
	color: var(--color-white);
}
.news-label--gold { background: var(--color-gold); }
.news-label--dark { background: var(--color-text); }

/* 幅は160px固定。space-between だと「矯正歯科」のような短いラベルで
   文字と矢印が両端に離れ、ピルごとに大きさが違って見えるため中央寄せにしている。 */
.pill-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 160px;
	height: 30px;
	padding: 0 10px;
	border-radius: 100px;
	background: var(--color-text);
	color: var(--color-white);
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.pill-btn .chev-right { flex-shrink: 0; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	background: var(--color-white);
}
.site-brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding-left: 24px;
	flex-shrink: 0;
}
.site-brand__mark { width: 64px; height: auto; flex-shrink: 0; }
.site-brand__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-brand__ja { font-size: 22px; letter-spacing: 0.1em; line-height: 1; color: var(--color-text); white-space: nowrap; }
.site-brand__en { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.08em; line-height: 1; color: var(--color-gold); }
.site-header__right { display: flex; align-items: center; height: 100%; }
.global-nav { height: 100%; margin-right: 40px; }
.global-nav__list { display: flex; align-items: center; gap: 30px; height: 100%; }
.global-nav__list > li {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
}
.global-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1;
	transition: color .2s;
}
.global-nav__item .chev-down { color: var(--color-gold); transition: transform .2s; }
.global-nav__list > li:hover > .global-nav__item { color: var(--color-gold); opacity: 1; }
.global-nav__list > li.has-child:hover > .global-nav__item .chev-down { transform: rotate(180deg); }

/* dropdown (Figma 2059:1634) */
.global-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 237px;
	padding: 30px 20px;
	background: var(--color-white);
	border-top: 10px solid var(--color-gold);
	border-radius: 0 0 10px 10px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
}
.global-nav__list > li.has-child:hover > .global-nav__dropdown {
	opacity: 1;
	visibility: visible;
}
.global-nav__dropdown li { border-bottom: 1px solid var(--color-gray); }
.global-nav__dropdown a {
	display: block;
	padding: 20px 10px;
	font-size: 18px;
	letter-spacing: 0.1em;
	line-height: 1.25;
	color: var(--color-brown);
	white-space: nowrap;
}

/* 診療案内のメガメニュー。
   全28ページを1列に並べると1000px超の縦長になり画面に収まらないため、
   カテゴリごとの4カラムにしている。
   位置は親と同じ中央寄せ（left:50% / translateX(-50%)）をそのまま使う。
   幅860pxなら 1440px 幅の中に収まる（項目中央が約x=730のため left≈300 / right≈1160）。
   right指定で寄せると左端にはみ出したので、中央寄せのままにしてある。
   1カラム185pxは「オフィスホワイトニング」「エレクトロポレーション」が
   1行に収まる幅（それより狭いと2行に折り返す）。 */
.global-nav__dropdown--mega {
	display: flex;
	gap: 20px;
	width: 860px;
	padding: 26px 30px;
}
.global-nav__col { flex: 1; min-width: 0; }
.global-nav__col-title {
	margin-bottom: 6px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-gold);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--color-gold);
	white-space: nowrap;
}
.global-nav__dropdown--mega a {
	padding: 11px 4px;
	font-size: 15px;
	white-space: normal;
}
.header-reserve { display: flex; height: 100%; }
.header-reserve__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 160px;
	height: 100%;
	color: var(--color-white);
	font-family: var(--font-zen);
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 1;
}
.header-reserve__btn--tel { background: var(--color-text); }
.header-reserve__btn--web { background: var(--color-gold); }
.header-reserve__btn .ico-tel { width: 18px; height: 18px; }
.header-reserve__btn .ico-mail { width: 20px; height: 16px; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
	position: relative;
	height: 900px;
	overflow: hidden;
	background: var(--color-cream); /* 画像読み込み前の下地 */
}
/* キービジュアルのスライド。3枚をクロスフェードで切り替える（assets/js/hero.js）。
   ゆっくり拡大させて静止画でも動きが出るようにしている。 */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1.6s ease-in-out;
}
.hero__slide.is-active {
	opacity: 1;
	transform: scale(1);
	transition: opacity 1.6s ease-in-out, transform 7s ease-out;
}
/* JSが動かない場合でも1枚目は見える（is-active はPHP側で付与済みのため） */
@media (prefers-reduced-motion: reduce) {
	.hero__slide { transition: none; transform: none; }
	.hero__slide.is-active { transform: none; transition: none; }
}
/* 新KVは明色のため、キャッチコピー可読性用の暖色オーバーレイを左側に敷く */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1; /* スライドより前面。これが無いと後ろに回ってコピーが読めなくなる */
	/* 内装パースは全体的に明るいため、左側の帯を濃いめにして白文字の可読性を確保する */
	background: linear-gradient(90deg, rgba(90, 78, 58, .62) 0%, rgba(90, 78, 58, .42) 30%, rgba(90, 78, 58, 0) 60%);
	pointer-events: none;
}
.hero__content { position: absolute; left: calc(50% - 640px); top: 243px; z-index: 2; }
.hero__catch {
	font-size: 68px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.12;
	color: var(--color-white);
}
.hero__badges { display: flex; margin-top: 59px; }
.hero__badges li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 240px;
	margin-right: -10px;
	border: 2.25px solid var(--color-badge-border);
	border-radius: 50%;
	background: linear-gradient(61deg, #f2ece3 9.6%, #ffffff 48.3%, #f2ece3 88.6%);
	font-size: 30px;
	letter-spacing: 0.1em;
	color: var(--color-brown);
}

/* =========================================================
   News / Blog
   ========================================================= */
.news { padding-top: 120px; }
.news__inner, .blog__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 950px;
	margin: 0 auto;
}
.news__more, .blog__more { position: absolute; left: 0; bottom: 0; }
.news__side, .blog__side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 300px;
	flex-shrink: 0;
}
.news__list, .blog__list { width: 650px; }
.news-row a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 40px;
}
.news-row:last-child a { padding-bottom: 0; }
.news-row__body { width: 621px; }
.news-row__meta, .blog-row__meta { display: flex; align-items: center; gap: 10px; }
.news-row__meta time, .blog-row__meta time {
	font-size: 13px;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--color-text);
}
.news-row__title { margin-top: 12px; font-size: 16px; line-height: 1; }
.news-row .chev-right, .blog-row .chev-right { width: 7px; height: 13px; }

/* =========================================================
   INFORMATION 医院の特徴
   ========================================================= */
.info {
	position: relative;
	width: 1440px;
	height: 895px;
	margin: 160px auto 0;
}
.info__card {
	position: absolute;
	left: 150px;
	top: 25px;
	width: 1140px;
	height: 870px;
	border-radius: 20px;
	background: var(--color-cream);
}
.info__head { position: absolute; left: 0; top: 0; width: 100%; }
.info__list { position: absolute; left: 440px; top: 155px; width: 560px; }
.info__list li {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 26px 10px;
	border-bottom: 1px solid var(--color-gray);
}
.info__list p { font-size: 24px; letter-spacing: 0.1em; line-height: 1.5; }
.info__list em {
	font-style: normal;
	font-weight: 800;
	color: var(--color-gold);
}
.check {
	position: relative;
	flex-shrink: 0;
	width: 29px;
	height: 29px;
	border-radius: 7px;
	border: 1.5px solid var(--color-gold);
	background: var(--color-white);
}
.check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 5px;
	width: 12px;
	height: 8px;
	border-left: 2.5px solid var(--color-gold);
	border-bottom: 2.5px solid var(--color-gold);
	transform: rotate(-45deg);
}
.info__photo { position: absolute; }
.info__photo--1 { left: 0; top: 85px; width: 288px; }
.info__photo--2 { left: 42px; top: 571px; width: 338px; }
.info__photo--3 { right: 0; top: 292px; width: 343px; }

/* =========================================================
   お悩み (For your concerns)
   ========================================================= */
.concerns { margin-top: 160px; text-align: center; }
.concerns__en {
	font-family: var(--font-en);
	font-size: 20px;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--color-gold);
}
.concerns__title {
	margin-top: 30px;
	font-size: 44px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
}
.concerns__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	width: 1280px;
	margin: 60px auto 0;
}
.concern-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	width: 302px;
	height: 230px;
	padding: 30px 0;
	border: 2px solid var(--color-gray);
	border-radius: 10px;
	background: var(--color-white);
}
/* アイコンはSVG/PNGごとに元の縦横比がバラバラで、以前はHTML側の
   style="width:121px" 等で1枚ずつ指定していたため大きさが揃わなかった。
   高さを固定し幅を成り行きにすることで、横並びにしたときの見た目を統一する。
   （SP版 sp.css でも同じ考え方で max-height を指定している） */
/* width:auto は使わないこと。アイコンの多くがSVGで、内部にwidth/height属性を
   持たないものがあるため auto だと幅0に潰れる（PNGのアイコンだけ表示される状態になる）。
   固定ボックス＋object-fit:contain なら、SVG/PNGどちらでも同じ占有サイズになり、
   元の縦横比も保たれる。 */
/* flex-shrink:0 が必須。.concern-card は縦方向のflexコンテナで、
   カード高さ230pxに対して中身が収まりきらないとアイコンだけが縮み、
   height:76px を指定してもカードごとに68〜76pxとバラついてしまう。 */
.concern-card__icon {
	flex-shrink: 0;
	width: 110px;
	height: 76px;
	object-fit: contain;
}
.concern-card__title { font-size: 24px; letter-spacing: 0.1em; line-height: 1.3; }

/* =========================================================
   CLINIC INFORMATION
   ========================================================= */
.clinic {
	margin-top: 160px;
	padding: 160px 0;
	background: var(--color-section-gray);
}
.clinic + .cta, .cta + .clinic { margin-top: 0; }
.clinic__body {
	display: flex;
	justify-content: space-between;
	width: 1280px;
	margin: 60px auto 0;
}
.clinic__map { width: 700px; }
.clinic__map-link { position: relative; display: block; width: 100%; height: 490px; overflow: hidden; }
.clinic__map-link iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.clinic__map-note {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: 4px;
	background: rgba(85, 85, 85, .85);
	color: var(--color-white);
	font-size: 14px;
	letter-spacing: 0.06em;
	line-height: 1;
}
.clinic__map-note svg { width: 12px; height: 15px; }
.clinic__map-link:hover .clinic__map-note { background: var(--color-brown); }
.clinic__detail { width: 539px; }
.clinic-table { width: 100%; border-collapse: collapse; }
.clinic-table th, .clinic-table td {
	padding: 18px 10px;
	border-bottom: 1px solid var(--color-border);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: left;
	vertical-align: middle;
	line-height: 1;
}
.clinic-table tr:first-child th, .clinic-table tr:first-child td { border-top: 1px solid var(--color-border); }
.clinic-table th { width: 110px; }
.clinic-table__tel { font-size: 30px !important; }
.hours-lead {
	margin-top: 30px;
	font-size: 17px;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--color-text);
}
.hours-lead strong { color: var(--color-brown); font-weight: 600; }
.hours-table {
	width: 100%;
	margin-top: 16px;
	border-collapse: collapse;
	table-layout: fixed;
}
.hours-table th, .hours-table td {
	border: 1px solid var(--color-border);
	text-align: center;
	vertical-align: middle;
	letter-spacing: 0.06em;
}
.hours-table thead th {
	padding: 14px 4px;
	background: var(--color-warm-gray);
	color: var(--color-white);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}
.hours-table__corner { width: 118px; background: var(--color-brown) !important; }
.hours-table__sub {
	display: block;
	margin-top: 6px;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.08em;
	opacity: .85;
}
.hours-table tbody th {
	width: 118px;
	padding: 26px 4px;
	background: var(--color-cream);
	color: var(--color-brown);
	font-size: 19px;
	font-weight: 500;
}
.hours-table tbody td {
	padding: 26px 4px;
	background: var(--color-white);
	font-size: 20px;
	font-weight: 500;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.hours-table td .sep { margin: 0 4px; color: var(--color-gold); }
.hours-notes {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hours-notes li {
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0.06em;
}
.hours-notes li::before {
	content: "※";
	position: absolute;
	left: 0;
	color: var(--color-gold);
}
.hours-notes__closed { padding-left: 0 !important; font-size: 16px !important; }
.hours-notes__closed::before { content: "" !important; }
.hours-notes__label {
	display: inline-block;
	margin-right: 12px;
	padding: 3px 12px;
	background: var(--color-brown);
	color: var(--color-white);
	font-size: 13px;
	letter-spacing: 0.1em;
}

/* =========================================================
   CTA
   ========================================================= */
.cta {
	height: 395px;
	background: var(--color-gold);
	text-align: center;
}
.cta__title {
	padding-top: 100px;
	font-size: 46px;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--color-white);
}
.cta__buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 60px;
}
.cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 360px;
	height: 100px;
	border-radius: 50px;
	font-size: 22px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.cta-btn--tel { border: 1px solid var(--color-white); color: var(--color-white); }
.cta-btn--web { background: var(--color-white); color: var(--color-text); }
.cta-btn .ico-tel { width: 36px; height: 37px; }
.cta-btn .ico-mail { width: 40px; height: 32px; }
.cta-btn .chev-right { width: 10px; height: 20px; }

/* =========================================================
   Our Philosophy
   ========================================================= */
.philosophy {
	position: relative;
	height: 1013px;
	padding-top: 160px;
	background-size: cover;
	background-position: center;
	text-align: center;
}
.philosophy__watermark { position: absolute; left: calc(50% - 567px); top: 285px; }
.philosophy__body { position: relative; }
.philosophy__catch {
	margin-top: 100px;
	font-size: 50px;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--color-gold);
}
.philosophy__text {
	margin-top: 80px;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 2.4;
}
.philosophy__director { margin-top: 80px; }
.philosophy__director-en {
	font-family: var(--font-en);
	font-size: 24px;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--color-gold);
}
.philosophy__director-name { margin-top: 20px; font-size: 24px; letter-spacing: 0.1em; line-height: 1; }

/* =========================================================
   Concept
   ========================================================= */
.concept { padding-top: 160px; height: 1012px; }
.concept__cards {
	display: flex;
	justify-content: space-between;
	width: 1280px;
	margin: 85px auto 0;
}
.concept-card { width: 411px; text-align: center; }
.concept-card--offset { margin-top: 80px; }
.concept-card__num {
	font-family: var(--font-en);
	font-size: 80px;
	line-height: 1;
	color: var(--color-gold);
}
.concept-card img { width: 411px; height: 240px; object-fit: cover; margin-top: 20px; }
.concept-card__title {
	margin-top: 40px;
	font-size: 25px;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--color-gold);
}
.concept-card__text {
	margin-top: 40px;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.9;
}

/* =========================================================
   Why Choose Us / Reasons
   ========================================================= */
.reasons {
	position: relative;
	height: 3264px;
	background-size: cover;
	background-position: center;
}
.reasons__head { position: absolute; left: 0; top: 160px; width: 100%; }
/* 座標は1440pxデザイン基準。ワイド画面でも中央に寄るよう calc(50% ± offset) で指定 */
.reasons__watermark { position: absolute; left: calc(50% - 165px); top: 259px; }
.reason-block__ph-a, .reason-block__ph-b { position: absolute; }
.reason-item { position: absolute; width: 519px; }
.reason-block--1 .reason-block__ph-b { left: calc(50% - 600px); top: 325px; width: 220px; }
.reason-block--1 .reason-block__ph-a { left: calc(50% - 360px); top: 365px; width: 280px; }
.reason-block--1 .reason-item { left: calc(50% - 20px); top: 365px; }
.reason-block--2 .reason-block__ph-a { left: calc(50% + 80px); top: 852px; width: 280px; }
.reason-block--2 .reason-block__ph-b { left: calc(50% + 380px); top: 812px; width: 220px; }
.reason-block--2 .reason-item { left: calc(50% - 499px); top: 852px; }
.reason-block--3 .reason-block__ph-a { left: calc(50% - 600px); top: 1299px; width: 280px; }
.reason-block--3 .reason-block__ph-b { left: calc(50% - 300px); top: 1349px; width: 220px; }
.reason-block--3 .reason-item { left: calc(50% - 20px); top: 1339px; }
.reason-block--4 .reason-block__ph-a { left: calc(50% + 80px); top: 1746px; width: 280px; }
.reason-block--4 .reason-block__ph-b { left: calc(50% + 380px); top: 1786px; width: 220px; }
.reason-block--4 .reason-item { left: calc(50% - 499px); top: 1786px; }
.reason-block--5 .reason-block__ph-b { left: calc(50% - 600px); top: 2193px; width: 220px; }
.reason-block--5 .reason-block__ph-a { left: calc(50% - 360px); top: 2233px; width: 280px; }
.reason-block--5 .reason-item { left: calc(50% - 20px); top: 2233px; }
.reason-block--6 .reason-block__ph-a { left: calc(50% + 80px); top: 2717px; width: 280px; }
.reason-block--6 .reason-block__ph-b { left: calc(50% + 380px); top: 2677px; width: 220px; }
.reason-block--6 .reason-item { left: calc(50% - 499px); top: 2717px; }
.reason-item__num {
	font-family: var(--font-en);
	font-size: 120px;
	line-height: 0.7;
	color: var(--color-gold);
}
.reason-item__title {
	margin-top: 40px;
	font-size: 28px;
	letter-spacing: 0.1em;
	line-height: 1.3;
	color: var(--color-gold);
}
.reason-item__text {
	margin-top: 38px;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.8;
}

/* =========================================================
   Service
   ========================================================= */
.service { padding-top: 160px; height: 1195px; }
.service__grid {
	display: grid;
	grid-template-columns: repeat(5, 240px);
	gap: 20px;
	justify-content: center;
	margin-top: 60px;
}
.service-card:nth-child(11) { grid-column-start: 2; }
.service-card a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 240px;
	height: 230px;
	border: 2px solid var(--color-gray);
	border-radius: 10px;
	background: var(--color-white);
	text-align: center;
}
.service-card__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 117px;
	margin-top: 20px;
}
.service-card__title { margin-top: 18px; font-size: 20px; letter-spacing: 0.1em; line-height: 1; }
.service-card__en {
	margin-top: 12px;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1;
	color: var(--color-gold);
}
.service-card .chev-down--gold { width: 16px; height: 8px; margin-top: auto; margin-bottom: 22px; }

/* =========================================================
   Pick Up Menu
   ========================================================= */
.pickup { height: 791px; }
.pickup__cards {
	display: flex;
	justify-content: space-between;
	width: 1280px;
	margin: 20px auto 0;
}
.pickup-card { width: 411px; text-align: center; }
.pickup-card--offset { margin-top: 80px; }
.pickup-card img { width: 411px; height: 260px; object-fit: cover; }
.pickup-card__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 109px;
	height: 32px;
	padding: 0 20px;
	margin-top: 30px;
	border-radius: 100px;
	background: var(--color-gold);
	color: var(--color-white);
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.pickup-card__title {
	margin-top: 30px;
	font-size: 30px;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--color-gold);
}
.pickup-card__text {
	margin-top: 30px;
	font-size: 17px;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

/* =========================================================
   Message from the Director
   ========================================================= */
.doctors {
	padding: 160px 0;
	background-size: cover;
	background-position: center bottom;
}
.doctors__grid {
	display: flex;
	justify-content: center;
	gap: 40px;
	width: 1280px;
	margin: 60px auto 0;
}
.doctor-card { width: 224px; text-align: center; }
.doctor-card__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--color-cream);
	overflow: hidden;
}
.doctor-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-card__photo--none {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-gold-light);
}
.doctor-card__role {
	margin-top: 20px;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--color-gold);
}
.doctor-card__name {
	margin-top: 10px;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 1.4;
}
.doctors__btn { margin: 60px auto 0; }

.director {
	height: 1068px;
	padding-top: 160px;
	background-size: cover;
	background-position: center bottom;
}
.director__body {
	display: flex;
	justify-content: space-between;
	width: 1192px;
	margin: 100px auto 0;
}
.director__message { width: 628px; }
.director__catch {
	font-size: 28px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: var(--color-gold);
}
.director__text {
	margin-top: 52px;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 2.4;
}
.director__sign { margin-top: 62px; text-align: right; padding-right: 23px; }
.director__sign-title { font-size: 17px; letter-spacing: 0.1em; line-height: 1; }
.director__sign-name { margin-top: 20px; font-size: 24px; letter-spacing: 0.1em; line-height: 1; }
.director__photo { width: 506px; height: 723px; object-fit: cover; }

/* =========================================================
   CASE
   ========================================================= */
.case { margin-top: 160px; }
.case__inner {
	position: relative;
	display: flex;
	width: 1200px;
	margin: 0 auto;
}
.case__images {
	position: relative;
	display: flex;
	width: 400px;
	flex-shrink: 0;
}
.case__fig { width: 200px; }
.case__fig img { width: 200px; height: 295px; object-fit: cover; }
.case__cap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 25px;
	font-family: var(--font-en);
	font-size: 18px;
	letter-spacing: 0.2em;
	line-height: 1;
	color: var(--color-white);
}
.case__cap--before { background: var(--color-text); }
.case__cap--after { background: var(--color-gold); }
.case__arrow {
	position: absolute;
	left: 180px;
	top: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-gold);
	box-shadow: 0 0 10px rgba(0, 0, 0, .08);
}
.case__arrow svg { width: 8px; height: 16px; }
.case__content {
	flex-grow: 1;
	padding: 67px 0 0 80px;
	background: var(--color-cream);
}
.case__lead { margin-top: 40px; font-size: 20px; letter-spacing: 0.1em; line-height: 1.4; }
.case__circle-btn {
	position: absolute;
	right: 80px;
	top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 200px;
	height: 200px;
	border: 1px solid var(--color-gold);
	border-radius: 50%;
	background: linear-gradient(61deg, #f2ece3 9.6%, #ffffff 48.3%, #f2ece3 88.6%);
	font-size: 17px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.case__circle-btn .chev-right { width: 8px; height: 16px; color: var(--color-gold); }

/* =========================================================
   Price banner
   ========================================================= */
.price-banner { margin-top: 160px; }
.price-banner__link { display: block; transition: opacity .25s; }
.price-banner__link:hover { opacity: .85; }
.price-banner img { width: 100%; display: block; }

/* =========================================================
   EQUIPMENT
   ========================================================= */
.equipment {
	padding: 160px 0;
	background: var(--color-cream);
}
.equipment__cards {
	display: flex;
	justify-content: space-between;
	width: 1280px;
	margin: 105px auto 0;
}
.equipment-card { width: 411px; text-align: center; }
.equipment-card--offset { margin-top: 80px; }
.equipment-card__img { width: 411px; height: 260px; background: var(--color-gray); }
.equipment-card__img img { width: 100%; height: 100%; object-fit: cover; }
.equipment-card__title {
	margin-top: 30px;
	font-size: 25px;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--color-gold);
}
.equipment-card__text {
	margin-top: 30px;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: left;
}
.equipment__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	width: 360px;
	height: 80px;
	margin: 100px auto 0;
	border: 1px solid var(--color-gold);
	border-radius: 40px;
	background: var(--color-white);
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.equipment__btn .chev-right { width: 10px; height: 20px; color: var(--color-gold); }

/* =========================================================
   BLOG
   ========================================================= */
.blog-sec { padding-top: 145px; padding-bottom: 160px; }
.blog-row a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 40px;
}
.blog-row:last-child a { padding-bottom: 0; }
.blog-row__thumb {
	flex-shrink: 0;
	width: 120px;
	height: 70px;
	margin-right: 20px;
	background: #ebebeb;
	overflow: hidden;
}
.blog-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-row__body { width: 480px; margin-right: auto; }
.blog-row__title { margin-top: 12px; font-size: 16px; line-height: 1; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background: var(--color-warm-gray);
	color: var(--color-white);
	padding: 60px 85px 20px;
}
.site-footer__inner { display: flex; width: 1270px; margin: 0 auto; }
.site-footer__clinic {
	width: 500px;
	flex-shrink: 0;
	border-right: 1px solid rgba(255, 255, 255, .6);
	text-align: center;
}
.site-footer__brand { display: flex; justify-content: center; }
.site-footer__logo { width: 230px; height: auto; }
.site-footer__address { margin-top: 40px; }
.site-footer__address p, .site-footer__hours p {
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1;
	margin-bottom: 20px;
}
.site-footer__hours { margin-top: 36px; }
.site-footer__reserve {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 36px;
}
.footer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 187px;
	height: 52px;
	border-radius: 26px;
	font-size: 13px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.footer-btn--tel { border: 1px solid var(--color-white); color: var(--color-white); }
.footer-btn--web { background: var(--color-text); color: var(--color-white); }
.footer-btn .ico-tel { width: 19px; height: 19px; }
.footer-btn .ico-mail { width: 21px; height: 16px; }
.footer-btn .chev-right { width: 5px; height: 10px; }
.site-footer__sns {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 42px;
}
.site-footer__sns a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
}
.site-footer__nav {
	display: flex;
	gap: 30px;
	padding-left: 100px;
}
.site-footer__col { width: 160px; }
.footer-nav-group { margin-bottom: 40px; }
.footer-nav-group__title {
	padding: 10px 0;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--color-white);
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.footer-nav-group li { margin-bottom: 26px; }
.footer-nav-group a { font-size: 16px; letter-spacing: 0.1em; line-height: 1.6; }
.site-footer__copyright {
	margin-top: 40px;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-align: center;
}

/* ---------- scroll top ---------- */
.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--color-text);
	color: var(--color-white);
}
.scroll-top svg { width: 20px; height: 10px; }