@charset "UTF-8";
/********************************************************************************

common-sp.css

********************************************************************************/
/*============================================================
 css変数
*============================================================*/
:root {
	--common-inner-max-width: 100%;           /* 通常サイト幅 */
	--common-inner-max-width-wide: 100%;      /* ワイドサイト幅 */
	--common-inner-padding: 24px;               /* 通常サイト幅内余白 */
	--common-inner-padding-wide: 16px;          /* ワイドサイト幅内余白 */
}

/*============================================================
 system
*============================================================*/
/* pc-sp display switch
---------------------------------------- */
.forPC {
    display: none;
}
.forSP {
    display: inherit;
}

/*============================================================
 format
*============================================================*/
/* コンテンツ内
---------------------------------------- */
h1.page-title {
	font-size: 32px;
	line-height: 1.5;
}
h2.sec-title {
    font-size: 24px;
}
h3.block-title {
    font-size: 20px;
}

/*============================================================
 メインビジュアル(下層)
*============================================================*/
.page-lower #mainvisual {
	padding-top: calc( var(--common-header-height) + 24px);
	margin-bottom: 48px;
}

/*============================================================
 コンテンツ共通
*============================================================*/
/* 要素幅超スクロール
---------------------------------------- */
.block-wscroll-sp {
    width: calc(100vw - ((100vw - 100%) / 2));
    overflow-x: auto;
}
.block-wscroll-sp .block-wscroll-inner {
    width: max-content;
    padding: 0 var(--inner-padding) 16px 0;
}
.block-wscroll-sp .block-wscroll-inner > * {
    width: auto;
    white-space: nowrap;
}

/* カード
---------------------------------------- */
.block-card {
	gap: 22px;
	align-items: baseline;
}
.block-card .item {
    width: 46%;
	gap: 8px;
}
.block-card .item .info h2 {
	font-size: 16px;
	padding-right: 29px;
	margin-bottom: 0;
	line-height: 1.4;
}
.block-card .item:before {
	bottom: -2px;
}

/* ページ内リンクカード
---------------------------------------- */
.block-page-link .item {
	padding: 16px;
	gap: 16px;
}
.block-page-link .item-image {
	width: 80px;
	height: 80px;
}
.block-page-link .item-info {
	width: calc(100% - 96px);
}
.block-page-link .item-info h3 {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
}
.block-page-link .item-info p {
	-webkit-line-clamp: 1;
}

/* 下層ページ 共通ブロック
---------------------------------------- */
.page-lower .section .inner {
	max-width: 608px;
}
/* 共通 */
.page-lower .section .block {
	margin-bottom: 40px;
}

/* リスト */
.page-lower .section ul.disc.parts-boxes {
	gap: 16px 40px;
}
/* 表 */
.page-lower .section dl.data dt {
	float: none;
	width: 100%;
	margin-bottom: 12px;
}
.page-lower .section dl.data dd {
	margin-left: 0;
}
.page-lower .section dl.data.dt-200 dd {
	margin-left: 0;
}
.page-lower .section dl.data.dt-300 dd {
	margin-left: 0;
}
/* リスト折り返し */
.page-lower .section .overflow-wrap {
	gap: 16px;
}
.page-lower .section .overflow-wrap .item .icon {
	width: 24px;
}
/* リードブロック */
.page-lower .lead-block h2 {
	font-size: 24px;
	line-height: 1.5;
}
/* 基本ブロック 画像＋文章 */
.page-lower .basic-block {
	gap: 24px;
}
.page-lower .basic-block .image {
	width: 100%;
}
.page-lower .basic-block .image img {
	width: 100%;
}
.page-lower .basic-block .info {
	width: 100%;
}
/* スタイル付きリスト パターン1 */
.page-lower .list-block.style-1 .row {
	gap: 24px;
}
.page-lower .list-block.style-1 .item .image:before {
	left: -46px;
}
/* スタイル付きリスト パターン2 */
.page-lower .list-block.style-2 .row {
	gap: 24px 16px;
}
/* スタイル付きリスト パターン3 */
.page-lower .list-block.style-3 .row {
	gap: 32px;
}
.page-lower .list-block.style-3 .item {
	flex-direction: column;
	gap: 16px;
}
.page-lower .list-block.style-3 .item .label {
	width: 100%!important;
}
.page-lower .list-block.style-3 .item .label p {
	padding: 8px 16px;
	display: inline-block;
}
.page-lower .list-block.style-3 .item .info {
	width: 100%!important;
}
.page-lower .list-block.style-3 .item .info .h3-title {
	font-size: 20px;
}
/* 画像ブロック 2カラム */
.page-lower .image-2col .item {
	width: 100%;
}
/* TIPSブロック */
.page-lower .tips-block {
	gap: 18px;
}
.page-lower .tips-block .image {
	width: 62px;
}
.page-lower .tips-block .info {
	width: calc(100% - 80px);
}
.page-lower .tips-block .info .title {
	padding-left: 28px;
}
.page-lower .tips-block .info .title:before {
	width: 24px;
	height: 20px;
}
/* タブブロック */
.page-lower .tab-block .tab {
	padding: 12px 0 16px;
}
.page-lower .tab-block .tab p {
	font-size: 18px;
}
/* 背景グレーブロック */
.page-lower .bg-grey-block {
	padding: 24px 24px 32px;
}
.page-lower .section .note-block .text {
	width: calc(100% - 84px);
}
/* 詳細ページ */
.page-lower.single #sec-post .inner h2 {
	font-size: 24px;
}
.page-lower.single #sec-post .inner h3 {
	font-size: 20px;
	margin-top: 40px;
}
.page-lower.single #sec-post .inner h4 {
	font-size: 18px;
}

/*============================================================
 診療案内（下層ページ共通）
*============================================================*/
#dental-menu-link .sec-title {
	margin-bottom: 40px;
}
#dental-menu-link .sec-title img {
	width: 144px;
}

/*============================================================
 CTA
*============================================================*/
/* お問い合わせ
---------------------------------------- */

/*============================================================
 記事本文ブロック
*============================================================*/
/* 見出し
---------------------------------------- */

/*============================================================
 追従CTA
*============================================================*/
#fixed-cta {
	width: 100%;
}
#fixed-cta .tel {
	width: calc(100% - 170px);
}

/*============================================================
 footer
*============================================================*/
#site-footer {
	padding-top: 40px;
}
#site-footer .block {
	gap: 24px;
}
#site-footer .block .flogo {
	width: 100%;
	text-align: center;
}
#site-footer .block .flogo img {
	width: 240px;
}
#site-footer .block .flogo p {
	text-align: center;
	margin-top: 24px;
}
#site-footer .block .flogo p img {
	width: 300px;
}
#site-footer .block .access {
	width: 100%;
}
#site-footer .block .access .address {
	text-align: center;
	margin-bottom: 0;
}
#site-footer .parts-btn {
	width: 228px;
	margin-bottom: 24px!important;
}

/* メニューリスト
---------------------------------------- */
#site-footer #fnav .menu-list {
	flex-direction: column;
    text-align: center;
}

/*============================================================
 共通セクション 一般的なリスクや副作用
*============================================================*/
#sec-attention-remedy .bg-grey-block {
	padding: 24px 16px 32px;
}
#sec-attention-remedy .bg-grey-block ol.decimal {
	padding: 0 0 0 21px;
}


@media screen and (max-width: 560px) {
	.block-card {
		justify-content: flex-start;
	}
	
	.page-lower .list-block .item .info .text {
		font-size: 14px;
	}
	.page-lower .list-block.style-1 .row {
		max-width: 480px;
		margin: 0 auto;
	}
	.page-lower .list-block.style-1 .item {
		width: 159px;
	}
	.page-lower .list-block.style-1 .item .image {
		width: 159px;
	}
	.page-lower .list-block.style-1 .item .image:before {
		left: -20px;
		width: 14px;
		height: 10px;
	}
	.page-lower .list-block.style-1 .item .info .title {
		font-size: 16px;
	}
}

@media screen and (max-width: 480px) {
	/*============================================================
	 追従CTA
	*============================================================*/
	#fixed-cta {
		width: 100%;
	}
	#fixed-cta .tel {
		width: calc(100% - 170px);
	}
}


@media screen and (max-width: 375px) {
	/*============================================================
	 css変数
	*============================================================*/
	:root {
		--common-inner-padding: 16px;
	}
}