/* ==========================================================================
   見えない矯正治療 裏側矯正（リンガル矯正）ページ 共通パーツ
   ========================================================================== */

/* 共通 H2（obi__ttlに付与） */
.lingual__ttl {
	margin-bottom: 50px;
	font-size: 26px;
	padding: 1em;
	color: #7E5F41;
}
.lingual__ttl strong {
	font-size: 1.15em;
}

/* 共通 H3（左に線） */
.lingual__subttl {
	position: relative;
	padding-left: 20px;
	margin-bottom: 1.2em;
	font-size: 22px;
	font-weight: 600;
	color: #7E5F41;
	font-family: "Noto Serif JP", serif;
}
.lingual__subttl:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	bottom: 0.1em;
	width: 7px;
	background-color: #B2A483;
}

/* ==========================================================================
   イントロ
   ========================================================================== */
.lingual__intro {
	padding: 90px 0 70px;
}
.lingual__intro--content {
	max-width: 940px;
}
.lingual__intro--catch {
	width: fit-content;
	margin: 0 auto 1.6em;
	padding-bottom: 0.8em;
	border-bottom: solid 1px #B1883A;
	color: #7E5F41;
	line-height: 1.4;
}
.lingual__intro--catch span {
	font-size: 1em;
	display: block;
	margin-bottom: 0.3em;
}
.lingual__intro--lead {
	font-size: 15px;
	text-align: left;
}
.lingual__intro--lead p {
	margin-bottom: 1.5em;
}
.lingual__intro--lead p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   メニュー
   ========================================================================== */
.lingual__menu {
	padding-bottom: 70px;
}
.lingual__menu--list {
	gap: 0;
}
.lingual__menu--content {
	text-decoration: unset;
	transition: opacity 0.3s;
}
.lingual__menu--content:hover {
	opacity: 0.75;
}

/* ==========================================================================
   裏側矯正とは
   ========================================================================== */
.lingual__about {
	padding: 70px 0;
	background: hsl(30deg 14.63% 48.24% / 5%);
}
.lingual__about--body {
	max-width: 1000px;
}
.lingual__about--description {
	margin-bottom: 60px;
}
.lingual__about--text {
	line-height: 2;
}
.lingual__about--sub--text {
	line-height: 2;
}

/* ==========================================================================
   メリット・デメリット
   ========================================================================== */
.lingual__meritdemerit {
	padding: 70px 0;
}
.lingual__meritdemerit--merit_ttl {
	margin-bottom: 30px;
}
.lingual__meritdemerit--demerit_ttl {
	margin: 70px 0 30px;
}
.lingual__merit--list,
.lingual__demerit--list {
	margin-top: 10px;
}
.lingual__merit--card,
.lingual__demerit--card {
	position: relative;
	margin-top: 36px;
	margin-bottom: 30px;
	border: solid 1px #A5915E;
	border-radius: 0 8px 8px 8px;
	overflow: visible;
	background: #F1EEE7;
}
.lingual__merit--card__ribbon {
	position: absolute;
	top: -36px;
	left: -1px;
	background: #A5915E;
	color: #fff;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1px;
	padding: 0.4em 1.5em;
	width: 50%;
	border-radius: 6px 6px 0 0;
}
.lingual__demerit--card__ribbon {
	position: absolute;
	top: -36px;
	left: -1px;
	background: #707070;
	color: #fff;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1px;
	padding: 0.4em 1.5em;
	width: 50%;
	border-radius: 6px 6px 0 0;
}
.lingual__merit--card__body,
.lingual__demerit--card__body {
	padding: 24px 22px;
}
.lingual__merit--card__ttl {
	color: #7E5F41;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 0.8em;
	text-align: center;
	letter-spacing: -0.05em;
}
.lingual__merit--card__ttl::after {
	content: "";
	display: block;
	width: 5em;
	height: 1px;
	background: #000000;
	margin: 0.4em auto 0;
}
.lingual__demerit--card__ttl {
	color: #545454;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 0.8em;
	text-align: center;
	letter-spacing: -0.05em;
}
.lingual__demerit--card__ttl::after {
	content: "";
	display: block;
	width: 5em;
	height: 1px;
	background: #545454;
	margin: 0.4em auto 0;
}
.lingual__merit--card__text,
.lingual__demerit--card__text {
	font-size: 14px;
	line-height: 1.9;
	color: #333;
}
.lingual__merit--card__text p,
.lingual__demerit--card__text p {
	margin-bottom: 1em;
}
.lingual__merit--card__text p:last-child,
.lingual__demerit--card__text p:last-child {
	margin-bottom: 0;
}
.lingual__demerit--card__note {
	margin-top: 14px;
	padding: 14px 16px;
	border: solid 1px #A5915E;
	background: #fff;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.8;
	color: #333;
}

/* ==========================================================================
   症例
   ========================================================================== */
.lingual__case {
	padding: 70px 0;
	background: hsl(30deg 14.63% 48.24% / 5%);
}
.lingual__case--swiper-outer {
	width: 100%;
}
@media (min-width: 769px) {
	.lingual__case--swiper-outer {
		display: none !important;
	}
}
.lingual__case--swiper {
	width: 100%;
	overflow: hidden;
}
.lingual__case--swiper .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
}
.lingual__case--swiper-pagination {
	text-align: center;
	margin-top: 14px;
}
.lingual__case--swiper-pagination .swiper-pagination-bullet-active {
	background: #A5915E;
}
.lingual__case--note {
	font-size: 11px;
	line-height: 1.8;
	color: #666;
	margin-top: 10px;
}
.lingual__case--note a {
	color: #7E5F41;
	text-decoration: underline;
}

/* ==========================================================================
   当グループの裏側矯正の特徴
   ========================================================================== */
.lingual__feature {
	padding: 70px 0;
}
.lingual__feature--body {
	max-width: 940px;
}
.lingual__feature--item {
	margin-bottom: 50px;
}
.lingual__feature--item:last-child {
	margin-bottom: 0;
}
.lingual__feature--item__text {
	line-height: 2;
}

/* ==========================================================================
   裏側矯正の費用相場
   ========================================================================== */
.lingual__price {
	padding: 70px 0;
	background: hsl(30deg 14.63% 48.24% / 5%);
}
.lingual__price--body {
	max-width: 900px;
}
.lingual__price--lead {
	font-size: 15px;
	line-height: 2;
	margin-bottom: 50px;
}
.lingual__price--list {
	list-style: none;
	margin-bottom: 30px;
}
.lingual__price--list li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: 1.6em;
}
.lingual__price--list li:last-child {
	margin-bottom: 0;
}
.lingual__price--list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background: #A5915E;
}
.lingual__price--list__label {
	font-size: 14px;
	font-weight: 400;
	color: #333;
	margin-bottom: 0.4em;
}
.lingual__price--list__value {
	font-size: 17px;
	font-weight: 400;
	color: #333;
}
.lingual__price--list__value strong {
	font-weight: 700;
}
.lingual__price--list__note {
	font-size: 13px;
	font-weight: 400;
	color: #777;
	margin-left: 0.6em;
}
.lingual__price--notes {
	font-size: 13px;
	line-height: 1.9;
	color: #777;
}

/* ==========================================================================
   代表理事が伝えたい裏側矯正の注意点
   ========================================================================== */
.lingual__doctor {
	padding: 70px 0;
}
.lingual__doctor--body {
	max-width: 1000px;
}
.lingual__doctor--content {
	margin-bottom: 50px;
}
.lingual__doctor--img_name {
	margin-top: 1em;
	font-size: 14px;
	line-height: 1.7;
	color: #545454;
}
.lingual__doctor--content .lingual__doctor--img {
	width: 35%;
}
.lingual__doctor--lead {
	width: 63%;
	font-size: 15px;
	line-height: 2;
}
.lingual__doctor--full {
	font-size: 15px;
	line-height: 2;
}

/* ==========================================================================
   裏側矯正治療の流れ
   ========================================================================== */
.lingual__flow {
	padding: 70px 0;
	background: hsl(30deg 14.63% 48.24% / 5%);
}
.lingual__flow--img {
	max-width: 300px;
	margin: 0 auto;
}

/* ==========================================================================
   FAQ・よくある質問（clinic-mouthpiece.php の cl_brava__qa と同UI）
   ========================================================================== */
.lingual__qa {
	padding: 70px 0;
}
.lingual__qa--body {
	max-width: 1000px;
}
.lingual__qa--list--content {
	border-radius: 8px;
	margin-bottom: 16px;
	overflow: hidden;
	background: #fff;
}
.lingual__qa--list--ttl {
	cursor: pointer;
	padding: 20px;
	margin: 0;
	border-bottom: 1px solid #B1883A;
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 22px;
}
.lingual__qa--list--ttl::after {
	content: '+';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: bold;
	color: #666;
	transition: transform 0.3s ease, color 0.3s ease;
}
.lingual__qa--list--ttl.active::after {
	transform: translateY(-50%) rotate(45deg);
	color: #333;
}
.lingual__qa--list--ttl img {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
}
.lingual__qa--list--ttl span {
	font-size: 20px;
	font-weight: 400;
	color: #545454;
	line-height: 1.5;
	padding-right: 40px;
}
.lingual__qa--list--description {
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
	background: #fff;
	font-size: 18px;
	display: flex;
	gap: 20px;
}
.lingual__qa--list--content.opening .lingual__qa--list--description {
	max-height: 500px;
	padding: 20px;
	border-top: none;
}
.lingual__qa--list--content.closing .lingual__qa--list--description {
	max-height: 0;
	padding: 0 20px;
	border-top: none;
}
.lingual__qa--list--description img {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
}
.lingual__qa--list--description p {
	margin: 0 0 1em;
	line-height: 1.8;
	color: #555;
	font-size: 15px;
}
.lingual__qa--list--description p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 768px) {
	.lingual__ttl {
		margin-bottom: 30px;
		font-size: 19px;
		padding: 0.8em;
	}
	.lingual__subttl {
		font-size: 18px;
	}
	.lingual__intro {
		padding: 60px 0 40px;
	}
	.lingual__intro--catch {
		text-align: center;
		margin: 0 auto 1.2em;
	}
	.lingual__intro--lead {
		text-align: left;
	}
	.lingual__menu {
		padding-bottom: 40px;
	}
	.lingual__menu--content {
		width: 49%;
		margin-bottom: 2%;
	}
	.lingual__menu--content:nth-child(2n) {
		margin-right: 0;
	}
	.lingual__about {
		padding: 40px 0;
	}
	.lingual__about--img {
		width: 100%;
		margin-bottom: 20px;
	}
	.lingual__about--text {
		width: 100%;
		margin-left: 0;
		font-size: 15px;
	}
	.lingual__about--description {
		margin-bottom: 40px;
	}
	.lingual__about--sub--text {
		font-size: 15px;
	}
	.lingual__meritdemerit {
		padding: 40px 0;
	}
	.lingual__meritdemerit--demerit_ttl {
		margin: 40px 0 20px;
	}
	.lingual__merit--card,
	.lingual__demerit--card {
		width: 100%;
		margin-right: 0;
		margin-top: 36px;
	}
	.lingual__merit--card__ttl,
	.lingual__demerit--card__ttl {
		font-size: 16px;
	}
	.lingual__case {
		padding: 40px 0;
	}
	.lingual__feature {
		padding: 40px 0;
	}
	.lingual__feature--item {
		margin-bottom: 35px;
	}
	.lingual__feature--item__text {
		font-size: 15px;
	}
	.lingual__price {
		padding: 40px 0;
	}
	.lingual__price--lead {
		font-size: 15px;
		margin-bottom: 30px;
	}
	.lingual__price--list__label {
		font-size: 16px;
	}
	.lingual__price--list__value {
		font-size: 19px;
	}
	.lingual__doctor {
		padding: 40px 0;
	}
	.lingual__doctor--content .lingual__doctor--img {
		width: 100%;
		margin-bottom: 20px;
	}
	.lingual__doctor--lead {
		width: 100%;
		margin-left: 0;
		font-size: 15px;
	}
	.lingual__doctor--content {
		margin-bottom: 30px;
	}
	.lingual__doctor--full {
		font-size: 15px;
	}
	.lingual__flow {
		padding: 40px 0;
	}
	.lingual__qa {
		padding: 40px 0;
	}
	.lingual__qa--list--ttl {
		padding: 16px;
		gap: 10px;
	}
	.lingual__qa--list--ttl span {
		font-size: 14px;
		padding-right: 35px;
	}
	.lingual__qa--list--ttl::after {
		right: 16px;
		font-size: 20px;
	}
	.lingual__qa--list--content.opening .lingual__qa--list--description {
		padding: 16px;
		gap: 10px;
	}
	.lingual__qa--list--content.closing .lingual__qa--list--description {
		padding: 0 16px;
		gap: 10px;
	}
	.lingual__qa--list--ttl img,
	.lingual__qa--list--description img {
		width: 35px;
		height: 35px;
	}
	.lingual__qa--list--description p {
		font-size: 14px;
	}
}