@charset "UTF-8";
/* =====================================================================
   brushup.css  （2026-09-26 ブラッシュアップ）
   ---------------------------------------------------------------------
   ・全ページの </head> 直前で読み込み（sp.css より後 ＝ 最優先）
   ・スマホ専用の指定は「html.mobile-ua」から書き始めています
     （sp.css と同じ判定。PC表示には影響しません）
   ・このファイルの読み込み1行を外せば、修正前の見た目に戻ります
   ---------------------------------------------------------------------
   目次
     0. 共通（互換モード対策）
     1. TOP ①  NEWS & TOPICS のお知らせ
     2. TOP ②  医院情報（住所・TEL・診療時間）／フッターの診療時間表
     3. TOP ③  「詳しくはこちら」ボタンを右寄せ
     4. ⑤  ご挨拶：研修履歴のアイコン
     5. ⑥  スマホメニュー（タップしやすく）
     6. ⑦  虫歯・歯周病の進行（スライダー）
     7. ⑧⑩ 下層ページの見出し階層・本文の開始位置（スマホ）
     8. ⑨  料金表（スマホ）
     9. ダイレクトボンディングの「料金計算例」ラベル
    10. 動画のサムネイル（iPhone対策）
   ===================================================================== */


/* =====================================================================
   0. 共通
   ===================================================================== */
/* doctype が無いページ（互換モード）で、メニュー部品が画面1枚分の
   高さになり上部に大きな空白ができていた問題の保険 */
html.mobile-ua #HEAD .sp-block .pure-container {
	height: auto;
}


/* =====================================================================
   1. TOP ①  NEWS & TOPICS のお知らせ
   ===================================================================== */
.news-notice {
	margin: 18px 0 22px;
}
.news-notice dd.red-t {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 12px 20px;
	background: #fdf4f4;
	border: 1px solid #f0cfd2;
	border-radius: 6px;
	color: #c8202d;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
}
.news-notice__badge {
	flex-shrink: 0;
	display: inline-block;
	padding: 2px 12px;
	border-radius: 999px;
	background: #c8202d;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .08em;
	line-height: 1.8;
}
.news-notice__text .nw {
	display: inline-block;
}
html.mobile-ua .news-notice {
	margin: 34px 0 30px;
}
html.mobile-ua .news-notice dd.red-t {
	gap: 26px;
	padding: 26px 34px;
	border-radius: 10px;
	font-size: 36px;
	line-height: 1.55;
	text-align: center;
}
html.mobile-ua .news-notice__badge {
	padding: 6px 20px;
	font-size: 26px !important;
	line-height: 1.6;
}
html.mobile-ua .news-notice__text,
html.mobile-ua .news-notice__text .nw {
	font-size: 36px !important;
}


/* =====================================================================
   2. TOP ②  医院情報／診療時間表
      太字をやめ、住所・TEL・表の文字サイズをそろえる
   ===================================================================== */
.week table th,
.week table td,
.week table thead th,
.week table tbody th {
	font-weight: normal !important;
}
.clinic-tel a {
	font-weight: normal !important;
}

/* スマホ */
html.mobile-ua .clinic-info .main-box {
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}
.clinic-address .nw {
	display: inline-block;
}
html.mobile-ua .clinic-address .nw {
	font-size: 32px !important;
}
html.mobile-ua .clinic-info .clinic-address {
	font-size: 32px !important;
	line-height: 1.6;
	color: #333 !important;
	margin: 0 0 6px !important;
}
html.mobile-ua .clinic-info .clinic-tel {
	font-size: 32px !important;
	line-height: 1.6 !important;
	margin: 0 0 26px !important;
}
html.mobile-ua .clinic-info .clinic-tel a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 34px !important;
	line-height: 1.6 !important;
	color: #0d234f !important;
	letter-spacing: .06em;
	text-decoration: none;
}
html.mobile-ua .clinic-info .clinic-tel a::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 34px;
	background-color: #0d234f;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E") no-repeat center / contain;
}
html.mobile-ua .week table th,
html.mobile-ua .week table td {
	font-size: 32px !important;
	color: #333 !important;
}
html.mobile-ua .week table thead th {
	font-size: 30px !important;
	letter-spacing: .04em;
}
html.mobile-ua .clinic-info .week p {
	font-size: 29px !important;
	line-height: 1.7 !important;
	font-weight: normal !important;
	color: #555 !important;
}
html.mobile-ua .clinic-info .week .text-danger {
	font-size: 29px !important;
	line-height: 1.7 !important;
}
/* フッターの注釈も太字をやめる */
html.mobile-ua #footer .week p {
	font-weight: normal !important;
}


/* =====================================================================
   3. TOP ③  「詳しくはこちら」ボタン（PC・スマホとも右寄せ）
   ===================================================================== */
.treatment-feature-content .btn-detail {
	display: table;
	margin: 12px 0 0 auto;
	padding: 8px 26px 8px 32px;
}
.treatment-feature-content .btn-detail::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 2px 12px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
}
html.mobile-ua .treatment-feature-content .btn-detail {
	display: table;
	margin: 10px 0 0 auto;
	padding: 16px 36px 16px 44px;
	font-size: 30px;
}
html.mobile-ua .treatment-feature-content .btn-detail::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 0 3px 18px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
}


/* =====================================================================
   4. ⑤  ご挨拶：研修履歴
      ・赤い●が上にずれていた → 1行目の中央にそろえる
      ・院長の発表・講演などはマイクのアイコンに統一
   ===================================================================== */
#A01 .hist-list li {
	position: relative;
	padding-left: 1.5em !important;
	text-indent: 0 !important;
	line-height: 1.6 !important;
}
#A01 .hist-list li::before {
	content: "" !important;
	position: absolute !important;
	left: .5em !important;
	top: .8em !important;       /* 1行目の中央（line-height 1.6 の半分） */
	width: .3em;
	height: .3em;
	margin-top: -.15em;
	border-radius: 50%;
	background: #c9c0b0;
	font-size: inherit !important;
	vertical-align: baseline !important;
}
#A01 .hist-list li.sem::before {
	left: 0 !important;
	width: 1.15em;
	height: 1.15em;
	margin-top: -.575em;
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23b3424a'/%3E%3Cpath transform='translate(4.8 5.1) scale(0.6)' fill='%23fff' d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E") no-repeat center / contain;
}
#A01 .hist-list li .sub {
	line-height: 1.6 !important;
}
/* 注記「（マイク）：赤字は院長が行ったセミナーや発表などです。」 */
#A01 .hist-note::before {
	content: none !important;
}
#A01 .hist-note__icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-right: .1em;
	vertical-align: -.25em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23b3424a'/%3E%3Cpath transform='translate(4.8 5.1) scale(0.6)' fill='%23fff' d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =====================================================================
   5. ⑥  スマホメニュー
      1項目の高さ 約112px（実寸 約45px）＝指でタップしやすいサイズに
   ===================================================================== */
html.mobile-ua .pure-drawer {
	background-color: #2f3a46 !important;
}
html.mobile-ua .nav-primary {
	padding: 150px 0 220px !important;
	border-bottom: none !important;
}
html.mobile-ua .nav-primary li {
	position: relative;
	padding: 0 !important;
	border-top: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
	font-size: 36px !important;
	line-height: 1.4 !important;
	color: #fff !important;
}
html.mobile-ua .nav-primary li > a {
	display: flex !important;
	align-items: center;
	min-height: 112px;
	padding: 20px 100px 20px 52px;
	box-sizing: border-box;
	color: #fff !important;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, .12);
}
html.mobile-ua .nav-primary li > a::after {
	content: "";
	position: absolute;
	right: 50px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-top: 3px solid rgba(255, 255, 255, .55);
	border-right: 3px solid rgba(255, 255, 255, .55);
	transform: rotate(45deg);
}
html.mobile-ua .nav-primary li > a:hover,
html.mobile-ua .nav-primary li > a:active {
	background-color: rgba(255, 255, 255, .08) !important;
}
html.mobile-ua .nav-primary li i.icon-angle-right {
	display: none;
}
/* 見出し（リンクなし）：初めての方へ・治療について など */
html.mobile-ua .nav-primary li.nav-head {
	padding: 58px 52px 18px !important;
	font-size: 27px !important;
	letter-spacing: .18em;
	color: #aebbc9 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
}
/* 下の階層 */
html.mobile-ua .nav-primary li.nav-sub > a {
	min-height: 104px;
	padding-left: 92px;
	font-size: 34px;
}
html.mobile-ua .nav-primary li.nav-sub > a::before {
	content: "";
	position: absolute;
	left: 56px;
	top: 50%;
	width: 18px;
	height: 2px;
	background: rgba(255, 255, 255, .35);
}
/* HOME */
html.mobile-ua .nav-primary li.sp-top {
	background: #34495e;
}
/* 表示中のページ */
html.mobile-ua .nav-primary li.is-current > a {
	background: linear-gradient(90deg, #e8894a 0, #e8894a 8px, rgba(255, 255, 255, .1) 8px) !important;
}


/* =====================================================================
   6. ⑦  虫歯・歯周病の進行
      PC：5枚を横並び ／ スマホ：1枚ずつ大きく見せるスワイプ式
   ===================================================================== */
.decay-progress {
	position: relative;
	padding: 6px 0 4px;
}
.decay-progress__head {
	text-align: center;
	margin: 0 0 26px;
}
.decay-progress__en {
	display: block;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
	font-size: 13px;
	letter-spacing: .32em;
	color: #9a8a6a;
	margin-bottom: 6px;
}
.decay-progress__title {
	margin: 0;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif CJK JP", serif !important;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.4;
	color: #22364a;
	letter-spacing: .08em;
}
.decay-progress__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin: 14px auto 0;
	background: linear-gradient(90deg, #34495e 0 50%, #b89b67 50% 100%);
}
.decay-progress__lead {
	margin: 14px 0 0 !important;
	font-size: 14px;
	line-height: 1.7;
	color: #555;
	text-align: center !important;
}
.decay-progress__lead .nw {
	display: inline-block;
}
.decay-progress__viewport {
	position: relative;
}
.decay-progress__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.decay-card {
	margin: 0;
	padding: 0;
	list-style: none;
}
.decay-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #dde2e8;
	border-radius: 10px;
	overflow: hidden;
	color: #333 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(34, 54, 74, .06);
	transition: box-shadow .2s, transform .2s;
}
.decay-card__link:hover {
	box-shadow: 0 6px 18px rgba(34, 54, 74, .14);
	transform: translateY(-2px);
}
.decay-card__letter {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #34495e;
	color: #fff;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
	font-size: 15px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
}
/* 画像上部の黒帯（「イラストクリックで…」）と下の小さい文字をトリミング */
.decay-card__fig {
	display: block;
	background: #f4f1ee;
	padding: 12px 12px;
}
.decay-card__crop {
	display: block;
	width: 100%;
	max-width: 180px;
	margin: 0 auto;
	aspect-ratio: 180 / 175;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(34, 54, 74, .08);
}
.decay-card__crop img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin-top: -13.889%;   /* 25px ÷ 180px */
}
.decay-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	padding: 12px 12px 14px;
}
.decay-card__stage {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid #aab6c3;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1.6;
	color: #34495e;
	letter-spacing: .04em;
}
.decay-card__name {
	display: block;
	margin-top: 6px;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.45;
	color: #22364a;
}
.decay-card__text {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.65;
	color: #555;
}
.decay-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 12px;
	font-weight: bold;
	color: #34495e;
	letter-spacing: .06em;
}
.decay-card__more::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
}
.decay-progress__nav {
	display: none;
}

/* ---- スマホ：スワイプ式 ---- */
html.mobile-ua .decay-progress {
	margin-left: -36px;          /* 本文インデント分を戻して枠いっぱいに */
	padding: 10px 0 6px;
}
html.mobile-ua .decay-progress__head {
	margin-bottom: 36px;
}
html.mobile-ua .decay-progress__en {
	font-size: 24px;
	margin-bottom: 10px;
}
html.mobile-ua .decay-progress__title {
	font-size: 48px;
}
html.mobile-ua .decay-progress__title::after {
	width: 96px;
	height: 4px;
	margin-top: 24px;
}
html.mobile-ua .decay-progress__lead {
	margin-top: 24px !important;
	font-size: 30px;
	line-height: 1.7;
}
html.mobile-ua .decay-progress__viewport {
	margin: 0 -32px;             /* 白い枠の端まで広げる */
}
html.mobile-ua .decay-progress__track {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 6px 13% 30px;
	scrollbar-width: none;
}
html.mobile-ua .decay-progress__track::-webkit-scrollbar {
	display: none;
}
html.mobile-ua .decay-card {
	flex: 0 0 74%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
html.mobile-ua .decay-card__link {
	border-radius: 18px;
	box-shadow: 0 6px 22px rgba(34, 54, 74, .12);
	transition: transform .3s, opacity .3s;
}
html.mobile-ua .decay-card:not(.is-active) .decay-card__link {
	opacity: .55;
	transform: scale(.94);
}
/* ※ sp.css に「span の文字サイズを一律36px」の指定があるため !important で上書き */
html.mobile-ua .decay-card__letter {
	left: 26px;
	top: 26px;
	width: 66px;
	height: 66px;
	font-size: 34px !important;
	line-height: 66px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
html.mobile-ua .decay-card__fig {
	padding: 36px 36px;
}
html.mobile-ua .decay-card__crop {
	max-width: 420px;
	border-radius: 16px;
}
html.mobile-ua .decay-card__body {
	padding: 30px 38px 36px;
}
html.mobile-ua .decay-card__stage {
	padding: 4px 20px;
	font-size: 26px !important;
}
html.mobile-ua .decay-card__name {
	margin-top: 16px;
	font-size: 46px !important;
}
html.mobile-ua .decay-card__text {
	margin-top: 14px;
	font-size: 31px !important;
	line-height: 1.75;
}
html.mobile-ua .decay-card__more {
	gap: 14px;
	padding-top: 24px;
	font-size: 29px !important;
}
html.mobile-ua .decay-card__more::after {
	width: 12px;
	height: 12px;
	border-width: 3px;
	margin-top: -6px;
}
html.mobile-ua .decay-progress__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-top: 4px;
}
.decay-progress__arrow {
	position: relative;
	width: 92px;
	height: 92px;
	padding: 0;
	border: 2px solid #34495e;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.decay-progress__arrow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -13px;
	border-top: 4px solid #34495e;
	border-right: 4px solid #34495e;
	transform: rotate(45deg);
}
.decay-progress__arrow--prev::before {
	margin-left: -5px;
	transform: rotate(-135deg);
}
.decay-progress__arrow:disabled {
	opacity: .3;
	cursor: default;
}
.decay-progress__dots {
	display: flex;
	align-items: center;
	gap: 18px;
}
.decay-progress__dot {
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: #c8d0d8;
	cursor: pointer;
	transition: width .25s, background-color .25s;
	-webkit-appearance: none;
	appearance: none;
}
.decay-progress__dot[aria-current="true"] {
	width: 52px;
	background: #34495e;
}


/* =====================================================================
   7. ⑧⑩ 下層ページの見出し階層・本文の開始位置（スマホ）
      大項目 ………… 枠の内側の端から
      中項目 ………… 少し内側（左に細いアクセント線）
      小項目・本文 … 中項目の文字位置にそろえて、さらに内側
      文字サイズ： ページ名 46 ／ 大項目 42 ／ 中項目 40 ／ 本文 36
      （960px 基準。実際のスマホでは約0.4倍）
   ===================================================================== */
html.mobile-ua #wrap .main-box.wh-bg {
	padding: 40px 32px 36px 68px !important;   /* 左 = 32 + 本文インデント36 */
	box-sizing: border-box;
}
/* 枠いっぱいに戻す要素（パンくず・ページ名・大項目・リード文） */
html.mobile-ua #wrap .main-box.wh-bg .pan,
html.mobile-ua #wrap .main-box.wh-bg .title-main,
html.mobile-ua #wrap .main-box.wh-bg .title-l,
html.mobile-ua #wrap .main-box.wh-bg .title-l-w,
html.mobile-ua #wrap .main-box.wh-bg .title-l-1,
html.mobile-ua #wrap .main-box.wh-bg .line-l,
html.mobile-ua #wrap .main-box.wh-bg .line-lg {
	margin-left: -36px !important;
}

/* パンくず・ページ名 */
html.mobile-ua #wrap .main-box.wh-bg .pan {
	font-size: 25px !important;
	line-height: 1.6 !important;
	color: #7b7466 !important;
	margin-bottom: 16px !important;
}
html.mobile-ua #wrap .main-box.wh-bg .title-main {
	font-size: 46px !important;
	line-height: 1.45 !important;
	letter-spacing: .06em;
	padding-bottom: 18px !important;
	margin-bottom: 44px !important;
}

/* 大項目 */
html.mobile-ua #wrap .main-box.wh-bg .title-l,
html.mobile-ua #wrap .main-box.wh-bg .title-l-w {
	height: auto !important;
	font-size: 42px !important;
	line-height: 1.45 !important;
	padding: 24px 30px 26px 34px !important;
	margin-bottom: 30px !important;
	letter-spacing: .06em !important;
	border-radius: 6px !important;
}

/* リード文（オレンジ文字の枠） */
html.mobile-ua #wrap .main-box.wh-bg .line-l,
html.mobile-ua #wrap .main-box.wh-bg .line-lg {
	padding: 28px 34px !important;
	line-height: 1.7 !important;
	margin-bottom: 40px !important;
}

/* 中項目 */
html.mobile-ua #wrap .main-box.wh-bg .title-g2,
html.mobile-ua #wrap .main-box.wh-bg .title-g {
	position: relative;
	font-size: 40px !important;
	line-height: 1.5 !important;
	margin-left: -24px !important;          /* 本文より 24px 外側 */
	padding: 2px 0 14px 24px !important;    /* 文字は本文と同じ位置 */
	border-bottom: 1px solid #c3cbd4 !important;
	margin-bottom: 26px !important;
	float: none;
}
html.mobile-ua #wrap .main-box.wh-bg .title-g2::before,
html.mobile-ua #wrap .main-box.wh-bg .title-g::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 18px;
	width: 7px;
	border-radius: 4px;
	background: #34495e;
}
/* 中央寄せの中項目（キャッチコピー）はアクセント線なし */
html.mobile-ua #wrap .main-box.wh-bg .title-g2.center,
html.mobile-ua #wrap .main-box.wh-bg .title-g2[style*="center"] {
	margin-left: 0 !important;
	padding-left: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	text-align: center !important;
}
html.mobile-ua #wrap .main-box.wh-bg .title-g2.center::before,
html.mobile-ua #wrap .main-box.wh-bg .title-g2[style*="center"]::before {
	display: none;
}
/* 中項目の後ろのタグ（保険適応 など） */
html.mobile-ua #wrap .main-box.wh-bg .title-g2 .tag-hoken {
	font-size: 28px !important;
	vertical-align: 4px;
	margin-left: 10px;
}

/* 小項目（「■保険診療の場合」「前歯」などのラベル） */
html.mobile-ua #wrap .main-box.wh-bg p.bold.ml-1 {
	margin-left: 0 !important;
	font-size: 38px !important;
	color: #22364a;
}

/* 本文 */
html.mobile-ua #wrap .main-box.wh-bg p {
	line-height: 1.8;
}
/* 「・」の箇条書き：点が本文の開始位置より左にはみ出さないように */
html.mobile-ua #wrap .main-box.wh-bg ul:not([class]) {
	padding-left: 1.2em;
}

/* 本文インデントで幅が狭くなった分、860px などの固定幅の部品
   （写真の枠・リンクボタン・動画など）が枠からはみ出さないように */
html.mobile-ua #wrap .main-box.wh-bg * {
	max-width: 100%;
}
html.mobile-ua #wrap .main-box.wh-bg img,
html.mobile-ua #wrap .main-box.wh-bg table,
html.mobile-ua #wrap .main-box.wh-bg iframe,
html.mobile-ua #wrap .main-box.wh-bg video {
	max-width: 100% !important;
}
/* ↑の例外：左へ引き出している見出し類とスライダー */
html.mobile-ua #wrap .main-box.wh-bg .pan,
html.mobile-ua #wrap .main-box.wh-bg .title-main,
html.mobile-ua #wrap .main-box.wh-bg .title-l,
html.mobile-ua #wrap .main-box.wh-bg .title-l-w,
html.mobile-ua #wrap .main-box.wh-bg .title-l-1,
html.mobile-ua #wrap .main-box.wh-bg .line-l,
html.mobile-ua #wrap .main-box.wh-bg .line-lg,
html.mobile-ua #wrap .main-box.wh-bg .title-g2,
html.mobile-ua #wrap .main-box.wh-bg .title-g,
html.mobile-ua #wrap .main-box.wh-bg .decay-progress,
html.mobile-ua #wrap .main-box.wh-bg .decay-progress__viewport,
html.mobile-ua #wrap .main-box.wh-bg .decay-progress__track {
	max-width: none;
}
/* 幅の狭い枠からはみ出す前提で置かれていた写真は、枠を全幅にして中央に置く
   （ご挨拶の院長写真・予防管理の経過写真・設備紹介のECR） */
html.mobile-ua #wrap .main-box.wh-bg .left-n1,
html.mobile-ua #wrap .main-box.wh-bg .right-n2,
html.mobile-ua #wrap .main-box.wh-bg .movie2-3.fac-2 {
	float: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: center;
}
html.mobile-ua #wrap .main-box.wh-bg .left-n1 img {
	display: block;
	width: 460px !important;
	margin: 20px auto 56px !important;
	box-shadow: 0 8px 24px rgba(34, 54, 74, .18);
}
html.mobile-ua #wrap .main-box.wh-bg .right-n2 img {
	display: block;
	float: none !important;
	width: 500px !important;
	margin: 0 auto 30px !important;
}
html.mobile-ua #wrap .main-box.wh-bg .movie2-3.fac-2 img {
	display: block;
	width: 600px !important;
	margin: 0 auto !important;
}
/* 入力フォームと横長の料金表は、枠いっぱいの幅のまま使う */
html.mobile-ua #wrap .main-box.wh-bg table.tableBase03,
html.mobile-ua #wrap .main-box.wh-bg table.p-table10 {
	margin-left: -36px !important;
	width: calc(100% + 36px) !important;
	max-width: none !important;
}


/* =====================================================================
   8. ⑨  料金表（スマホ）
      ・幅 860px 固定で右端が切れていた → 枠の幅に合わせる
      ・文字が枠の上に寄っていた → 上下中央、左右に余白
   ===================================================================== */
html.mobile-ua #wrap .p-table1 {
	width: 100% !important;
	box-sizing: border-box;
	padding: 0 !important;
	border: 1px solid #c3cbd4 !important;
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}
html.mobile-ua #wrap .p-table1 tbody,
html.mobile-ua #wrap .p-table1 tr {
	display: block !important;
	width: 100% !important;
}
html.mobile-ua #wrap .p-table1 tr td.sp-no {
	display: none !important;
}
html.mobile-ua #wrap .p-table1 tr td:not(.sp-no) {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 22px 30px !important;
	line-height: 1.6 !important;
	border-bottom: 1px solid #e3e7ec !important;
}
html.mobile-ua #wrap .p-table1 tr:last-child td:last-child {
	border-bottom: none !important;
}
/* 項目名（前歯・初診料 など） */
html.mobile-ua #wrap .p-table1 tr td.table-l:not(.bg-tt):not(.bg-tt1):not(.bg-tt2) {
	background: #f3f5f8 !important;
}
html.mobile-ua #wrap .p-table1 tr td.back-c,
html.mobile-ua #wrap .p-table1 tr td:has(> span.table-l) {
	background: #f3f5f8 !important;
	color: #22364a !important;
	font-size: 33px !important;
	font-weight: bold;
}
html.mobile-ua #wrap .p-table1 td span.table-l {
	font-size: inherit !important;
}
html.mobile-ua #wrap .p-table1 tr td.table-l {
	color: #22364a !important;
	font-size: 33px !important;
}
/* 金額 */
html.mobile-ua #wrap .p-table1 .red-t {
	display: inline !important;
	font-size: 36px !important;
	color: #c62833 !important;
}
/* 金額だけの1行の料金枠（例：1歯 ¥55,000） */
html.mobile-ua #wrap .p-table1 tr td.sp-ha1 {
	display: flex !important;
	align-items: center;
	min-height: 120px;
	padding: 28px 34px !important;
	background: #fff !important;
	border-bottom: none !important;
}

/* =====================================================================
   9. ダイレクトボンディングの「料金計算例」ラベル（process-2.html）
      計算例の図と料金の枠に、上からタブ状のラベルを付けて
      単価の表と区別できるようにする
   ===================================================================== */
.calc-example {
	margin: 34px 0 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}
.calc-example__label {
	display: inline-block;
	padding: 8px 18px 7px;
	border-radius: 6px 6px 0 0;
	background: #d9772f;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: .14em;
	line-height: 1.2;
}
table.t-1.t-calc {
	margin-top: 0 !important;
	border: 2px solid #d9772f !important;
}
html.mobile-ua .calc-example {
	margin-top: 50px !important;
}
html.mobile-ua .calc-example__label {
	padding: 14px 30px 12px;
	border-radius: 10px 10px 0 0;
	font-size: 30px !important;
}
html.mobile-ua table.t-1.t-calc {
	border-width: 4px !important;
}

/* =====================================================================
   10. 動画のサムネイル（process-2.html）
       iPhoneのSafariでは video の poster が表示されないことがあるため、
       サムネイルを画像として表示し、タップで動画に切り替えて再生する
       （JavaScriptが動かない環境では通常の動画プレーヤーのまま）
   ===================================================================== */
.movie-mp4.is-poster video {
	display: none !important;
}
.movie-poster {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
}
.movie-poster img {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
}
.movie-poster__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
	transition: background-color .2s, transform .2s;
}
.movie-poster__play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -13px 0 0 -8px;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
}
.movie-poster:hover .movie-poster__play,
.movie-poster:focus-visible .movie-poster__play {
	background: rgba(52, 73, 94, .9);
	transform: scale(1.06);
}
html.mobile-ua .movie-poster__play {
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
}
html.mobile-ua .movie-poster__play::before {
	margin: -28px 0 0 -17px;
	border-width: 28px 0 28px 48px;
}