/* ==========================================================================
   mz-common.css — 水野歯科医院 共通レイヤー
   ==========================================================================
   全ページで読み込まれる。投稿関連ページ・コンタクトページでも同じヘッダー・
   フッターを使うため、ここに書くのはヘッダー / グローバルナビ / SP メニュー /
   下層メインビジュアル / フッターバナー / フッター / ページトップ /
   SP 固定ボタン だけに限定する。

   octheme 標準デザイン（.blog-*, .contact-*, .oc-*）へ影響を出さないため、
   本ファイルでは以下を禁止している。
     - 要素セレクター単独（h1 / h2 / a / table / input / button など）
     - 汎用クラス（.parts / .free / .text / .b_01 / .b_02 / .wrap / .box など）
   すべてのルールは #mz-header / #mz-footer / .mz-* 配下に限定する。

   本文レイアウトは css/mz-static.css（TOP と固定ページのみ読み込み）が持つ。
   ========================================================================== */

:root {
	/* 旧サイトは Morisawa TypeSquare の A1明朝 / A-OTF A1 Mincho Std Bold。
	   ライセンスがドメイン単位のため Noto Serif JP で代替している。
	   実体はテーマ同梱の fonts/notoserif_jp/（@font-face は css/mz-fonts.css）。
	   TypeSquare を復活させる場合はこの 1 行を差し替える。 */
	--mz-font-serif: "Noto Serif JP", "游明朝", yumincho, "Hiragino Mincho ProN", serif;
	--mz-font-sans: meiryo, "メイリオ", verdana, "游ゴシック", yugothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--mz-color-text: #514e47;
	--mz-color-link: #172c44;
	--mz-color-nav: #413223;
	--mz-color-nav-hover-bg: #514e47;
	--mz-color-submenu-bg: #878379;
	--mz-color-footer-bg: #e6edf6;
	--mz-color-footer-heading: #063267;
	--mz-color-footer-text: #323232;
	--mz-color-guide-bg: #0b65a8;
	--mz-header-height: 150px;
	--mz-content-width: 1000px;
}

/* --------------------------------------------------------------------------
   レイアウトの土台
   -------------------------------------------------------------------------- */

.mz-wrapper {
	position: relative;
	width: 100%;
	/* ヘッダーが position: fixed のため、その高さ分を確保する */
	padding-top: var(--mz-header-height);
	background: #fff;
}

/* WordPress 管理バー表示時にヘッダーが隠れないようにする */
body.admin-bar .mz-header {
	top: 32px;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

.mz-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	background: #fff;
	font-family: var(--mz-font-sans);

	/* 旧サイトでは body（15px / line-height 2 / letter-spacing .18em）を継承していた。
	   octheme の body は 16px / 1.8 のため、ヘッダー配下だけ明示的に戻す。 */
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.18em;
	color: var(--mz-color-text);
}

.mz-header__block {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	max-width: var(--mz-content-width);
	margin: 17px auto 0;
}

.mz-header__logo {
	width: 29%;
	margin: 0;
	line-height: 1;
}

/* TOP ではロゴが h1 になる。theme.json の :root :where(h1)（詳細度 0,1,0）と
   同点にならないよう、タイポグラフィだけ詳細度 (0,2,0) で指定する。
   幅などのレイアウトは上の (0,1,0) のままにして、メディアクエリでの
   上書き（SP で width: 45%）が効くようにしている。 */
.mz-header .mz-header__logo {
	font-size: 0;
	font-weight: normal;
}

.mz-header__logo img {
	width: 100%;
	height: auto;
}

.mz-header__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0 0 5px;
	padding: 0;
	list-style: none;
}

.mz-header__contact {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mz-header__tel,
.mz-header__web {
	width: auto;
	height: 60px;
}

/* SP のみ表示するハンバーガー */
.mz-header__menu {
	display: none;
}

.mz-menu-toggle {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.mz-menu-toggle img {
	width: 43px;
	height: 43px;
}

/* --------------------------------------------------------------------------
   グローバルナビゲーション
   -------------------------------------------------------------------------- */

.mz-header__menu-block {
	width: 100%;
	background: #fff;
}

.mz-header__nav {
	max-width: var(--mz-content-width);
	margin: 0 auto;
	padding: 5px 0 15px;
}

.mz-gnav {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-gnav__item {
	position: relative;
	flex: 1 1 20%;
	text-align: center;
	border-right: 1px solid #ccc;
}

.mz-gnav__item--nav01 {
	flex: 0 0 19.3%;
	border-left: 1px solid #ccc;
}

.mz-gnav__link {
	display: block;
	width: 100%;
	padding: 9px 0;
	border: 0;
	background: none;
	font-family: var(--mz-font-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--mz-color-nav);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s;
}

.mz-gnav__link:hover,
.mz-gnav__link:focus-visible {
	color: #fff;
	background: var(--mz-color-nav-hover-bg);
}

.mz-gnav__submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 100%;
	min-width: 230px;
	margin-top: 0;
}

.mz-gnav__item--has-sub:hover .mz-gnav__submenu,
.mz-gnav__item--has-sub:focus-within .mz-gnav__submenu {
	display: block;
}

.mz-gnav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-gnav__subitem {
	background: var(--mz-color-submenu-bg);
	border-bottom: 1px solid #777;
	letter-spacing: 1px;
}

.mz-gnav__subitem:last-child {
	border-bottom: none;
}

.mz-gnav__subitem a {
	display: block;
	padding: 9px 8px 7px;
	font-family: var(--mz-font-sans);
	/* 旧サイト PC: structure_4.css の .header_menu .g_nav .submenu li.g_nav_sub_row a
	   （15px / line-height normal）が plimo 側の 14px より詳細度で勝っていた。 */
	font-size: 15px;
	line-height: normal;
	color: #fff;
	text-decoration: none;
}

.mz-gnav__subitem a:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   下層ページ メインビジュアル（共通カバー）
   -------------------------------------------------------------------------- */

/* 旧: `.under #mainimage { background: url(img_under_01_pc.png) no-repeat center top #ccc; }`
   （背景画像は plimo_structure_4.css の `.under #mainimage { background-image: none }` で
   打ち消されており、実際に効いていたのは背景色 #ccc だけ） */
.mz-mainimage {
	background-color: #ccc;
}

/* 旧: `.gnv_tmp_h2_bg`。タイトル帯の背景はこの内側の要素が持つ。
   外側（.mz-mainimage）に持たせると、下に写真が入る shinbi / whitening で
   background-size: cover の基準ボックスが写真の高さぶん伸びてしまう。 */
.mz-mainimage__inner {
	background: url("../img/mz/bg/bg_h2.jpg") center / cover no-repeat;
	text-align: center;
}

/* 旧: shinbi / whitening のタイトル帯下の全幅写真。
   旧サイトは `.wrapper img { width: 100%; height: auto }` が効いて全幅表示だった。
   旧は display: inline だが `img { vertical-align: top }` のため行下の余白は 0 で、
   block と同じ実測値（帯 + 写真 = #mainimage の高さ）になる。 */
.mz-mainimage__img {
	display: block;
	width: 100%;
	height: auto;
}

/* h1 で出力するため theme.json の :root :where(h1)（詳細度 0,1,0）と
   同点にならないよう、詳細度を (0,2,0) に上げている。
   旧サイトの実効値は `.under #mainimage h2 { padding: 50px 0 65px }`
   （詳細度 1,1,1）で、`.gnv_tmp_h2_bg h2 { padding: 57px 0 60px }` に勝っていた。 */
.mz-mainimage .mz-mainimage__title {
	margin: 0;
	padding: 50px 0 65px;
	font-family: var(--mz-font-serif);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 4px;
	color: #fff;
}

/* --------------------------------------------------------------------------
   フッター上部の共通バナー
   -------------------------------------------------------------------------- */

.mz-footer-banners {
	padding: 25px 0;
	background: #fff;
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.18em;
}

.mz-footer-banners__inner {
	width: 100%;
	max-width: var(--mz-content-width);
	margin: 0 auto;
}

.mz-footer-banners__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-footer-banners__list li {
	width: 30%;
	padding-bottom: 30px;
}

.mz-footer-banners__list li + li {
	margin-left: 5%;
}

.mz-footer-banners__list img {
	width: 100%;
	height: auto;
}

.mz-footer-banners__list a:hover img {
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */

.mz-footer {
	position: relative;
	z-index: 600;
	background: var(--mz-color-footer-bg);
	font-family: var(--mz-font-sans);

	/* ヘッダーと同じく、旧サイトの body 継承値を明示的に戻す。 */
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.18em;
	color: var(--mz-color-footer-text);
}

.mz-footer__block {
	width: 100%;
	max-width: var(--mz-content-width);
	margin: 0 auto;
	padding: 0 20px;
}

.mz-footer__inner {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 15px;
}

.mz-footer__nav-box {
	display: flex;
	flex-wrap: wrap;
	width: 55%;
	padding: 35px 0 5px;
	letter-spacing: 2px;
}

.mz-footer__access-box {
	width: 45%;
	padding: 35px 0 5px 32px;
}

.mz-footer__ttl {
	width: 100%;
	margin: 0;
	padding: 0 20px 25px 0;
	font-family: var(--mz-font-serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 6px;
	color: var(--mz-color-footer-heading);
	text-align: left;
}

.mz-footer__access-box .mz-footer__ttl {
	padding-bottom: 30px;
}

.mz-footer__nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-footer__nav--left {
	width: 42%;
}

.mz-footer__nav--right {
	width: 49%;
	margin-left: 9%;
}

.mz-footer__nav li {
	display: block;
	margin: 0;
	line-height: 2.8;
}

.mz-footer__nav a {
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--mz-color-footer-text);
	text-decoration: none;
}

.mz-footer__nav a:hover {
	opacity: 0.8;
}

.mz-footer__access {
	margin: 0;
}

.mz-footer__access dt,
.mz-footer__access dd {
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--mz-color-footer-text);
}

.mz-footer__access dd {
	margin: 0;
	padding-bottom: 4px;
	margin-bottom: 34px;
}

.mz-footer__access dd:last-child {
	margin-bottom: 0;
}

/* フッター最下部（サイトマップ / お問い合わせ / コピーライト） */

.mz-footer__guide-block {
	background: var(--mz-color-guide-bg);
}

.mz-footer__guide {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--mz-content-width);
	margin: 0 auto;
	padding: 17px 20px;
	list-style: none;
}

.mz-footer__guide-links a {
	display: inline-block;
	padding: 0 0 0 10px;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}

.mz-footer__guide-links a:hover {
	opacity: 0.8;
}

.mz-footer__copyright span {
	display: block;
	font-size: 14px;
	/* 旧サイトは line-height を指定せず body の 2 を継承していたため、
	   .mz-footer の line-height: 2 をそのまま継承させる。 */
	color: #fff;
	text-align: right;
}

/* --------------------------------------------------------------------------
   ページトップ / SP 固定ボタン
   -------------------------------------------------------------------------- */

.mz-pagetop {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	line-height: 0;
}

.mz-pagetop.is-visible {
	display: block;
}

.mz-pagetop img {
	width: 60px;
	height: 60px;
}

.mz-fixed-btn {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   タブレット
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1000px) {
	.mz-header__block,
	.mz-header__nav,
	.mz-footer__block,
	.mz-footer__guide,
	.mz-footer-banners__inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.mz-footer__nav-box,
	.mz-footer__access-box {
		width: 100%;
	}

	.mz-footer__access-box {
		padding: 0 0 5px 20px;
	}

	.mz-footer__nav--left,
	.mz-footer__nav--right {
		width: 100%;
		margin-left: 0;
	}

	.mz-footer__ttl {
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.mz-footer__access dd {
		margin-bottom: 20px;
	}

	.mz-footer__guide {
		justify-content: center;
		text-align: center;
	}

	.mz-footer__copyright span {
		text-align: center;
	}
}

@media screen and (max-width: 860px) {
	:root {
		--mz-header-height: 125px;
	}

	.mz-header__tel,
	.mz-header__web {
		height: 52px;
	}
}

/* --------------------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	:root {
		--mz-header-height: 0px;
	}

	.mz-wrapper {
		padding-top: 0;
	}

	.mz-header {
		position: relative;
		padding: 10px 0;
		/* 旧サイトは SP で body を 1.4rem(=14px) に落としていた */
		font-size: 14px;
	}

	.mz-footer,
	.mz-footer-banners {
		font-size: 14px;
	}

	body.admin-bar .mz-header {
		top: 0;
	}

	.mz-header__block {
		align-items: center;
		margin: 0 auto;
		padding: 0 10px;
	}

	.mz-header__logo {
		width: 45%;
	}

	/* PC 用の電話・WEB 予約画像は SP では下部固定ボタンに置き換わる */
	.mz-header__contact {
		display: none;
	}

	.mz-header__menu {
		display: block;
	}

	/* SP ではメニューを閉じた状態から始め、MENU ボタンで開く */
	.mz-header__menu-block {
		display: none;
		background: #514e47;
	}

	.mz-header__menu-block.is-open {
		display: block;
	}

	.mz-header__nav {
		padding: 0;
	}

	.mz-gnav {
		display: block;
	}

	.mz-gnav__item,
	.mz-gnav__item--nav01 {
		flex: none;
		width: 100%;
		border: 0;
		text-align: left;
	}

	.mz-gnav__link {
		padding: 12px 16px;
		/* 旧サイト SP: structure_4.css の 18px を plimo_structure_4.css が 14px へ上書き。
		   line-height は structure_4.css の 22px。 */
		font-size: 14px;
		line-height: 22px;
		color: #fff;
		background: #514e47;
		border-bottom: 1px solid #777;
		text-align: left;
	}

	.mz-gnav__link:hover,
	.mz-gnav__link:focus-visible {
		color: #fff;
		background: #514e47;
	}

	.mz-gnav__toggle {
		position: relative;
	}

	.mz-gnav__toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		transition: transform 0.2s;
	}

	.mz-gnav__toggle[aria-expanded="true"]::after {
		margin-top: -2px;
		transform: rotate(225deg);
	}

	/* SP ではホバーではなくボタンのトグルで開閉する */
	.mz-gnav__item--has-sub:hover .mz-gnav__submenu,
	.mz-gnav__item--has-sub:focus-within .mz-gnav__submenu {
		display: none;
	}

	.mz-gnav__submenu {
		position: static;
		width: 100%;
		min-width: 0;
	}

	.mz-gnav__submenu.is-open {
		display: block;
	}

	.mz-gnav__subitem a {
		padding: 12px 16px 12px 30px;
		font-size: 14px;
		line-height: 22px;
		text-align: left;
	}

	/* 旧サイト SP: plimo_content_4.css の
	   `.under #mainimage h2 { font-size: 3rem; padding: 50px 0 }` と
	   `.under #mainimage p, .under #mainimage h2 { padding-left: 0 }` */
	.mz-mainimage .mz-mainimage__title {
		padding: 50px 0;
		font-size: 30px;
	}

	.mz-footer-banners__list {
		display: block;
	}

	.mz-footer-banners__list li {
		width: 100%;
		max-width: 540px;
		margin: 0 auto 25px;
		padding-bottom: 0;
	}

	.mz-footer-banners__list li + li {
		margin-left: auto;
	}

	.mz-footer__guide-links a,
	.mz-footer__copyright span {
		/* 旧サイト SP: plimo_content_4.css が 15px へ上書きしていた */
		font-size: 15px;
		text-align: center;
	}

	/* 下部固定ボタン分の余白 */
	.mz-footer {
		margin-bottom: 74px;
	}

	.mz-pagetop {
		display: none !important;
	}

	.mz-fixed-btn {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 950;
		width: 100%;
		background: #fff;
	}

	.mz-fixed-btn li {
		line-height: 0;
	}

	.mz-fixed-btn__tel {
		width: 44.16%;
	}

	.mz-fixed-btn__web {
		width: 44.5%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mz-fixed-btn__top {
		width: 11.34%;
	}

	.mz-fixed-btn img {
		width: 100%;
		height: auto;
	}

	.mz-fixed-btn__web img {
		width: auto;
		max-height: 53px;
	}
}

@media screen and (max-width: 600px) {
	/* 旧サイト: plimo_content_4.css の .gnv_tmp_h2_bg h2 { 3rem = 30px; letter-spacing: 1px } */
	.mz-mainimage .mz-mainimage__title {
		font-size: 30px;
		letter-spacing: 1px;
	}
}