@charset "UTF-8";
@import "../../include/css/common.sp.css";

/* ---------------------------------------------------------
	CSS Document whitening > visual
--------------------------------------------------------- */

#visual {
	margin: 0 0 10px;
}

/* ---------------------------------------------------------
	CSS Document whitening > toggle
--------------------------------------------------------- */

.toggle_title.point {
	margin: 10px 0;
	background: url(../images/07.png) no-repeat top;
}

.toggle_title.flow {
	background: url(../images/13.png) no-repeat top;
}

.toggle_title.case_01 {
	margin: 10px 0;
	background: url(../images/26.png) no-repeat top;
}

.toggle_title.faq {
	background: url(../images/32.png) no-repeat top;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_01
--------------------------------------------------------- */

.periodontitis_01 {
	margin: 20px 10px;
	font-size: 0;
}

.periodontitis_01 li {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	margin-bottom: 6px;
}

.periodontitis_01 li:nth-of-type(odd) {
	margin-right: 2%;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > x200case
--------------------------------------------------------- */

.x200case {
	margin-bottom: 10vw;
}

.x200case img {
	height: 16vw;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_02
--------------------------------------------------------- */

.periodontitis_02 {
	margin: 10px 10px 0;
	text-align: left;
}

.periodontitis_02 h2 {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 15px;
	padding-bottom: 2px;
	border-bottom: solid 1px #e19688;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 7vw;
	line-height: 1.1;
	color: #c4361a;
}

.periodontitis_02 h2:after {
	display: block;
	content: '';
	height: 1px;
	margin-top: 10px;
	background: #e19688;
}

.periodontitis_02 p span {
	background: #e9dac5;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_03
--------------------------------------------------------- */

.periodontitis_03 {
	margin: 0 10px 20px;
	text-align: left;
}

.periodontitis_03 p {
	margin-top: 15px;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_04
--------------------------------------------------------- */

.episode_03 {
	margin-bottom: 10px;
	font-size: 13px;
}

.episode_02 .f_left,
.episode_03 .f_left {
	overflow: hidden;
}

.episode_02 .f_left img {
	max-width: 115%;
	width: 115%;
}

.episode_03 .f_left img {
	max-width: 124%;
	width: 124%;
}

/* ---------------------------------------------------------
	CSS Document beforeafter
--------------------------------------------------------- */

.beforeafter {
	margin-bottom: 50px;
}

.beforeafter_01 {
	margin: 50px 20px 20px;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 32px;
	font-size: 6vw;
	line-height: 1.5;
	color: #c4361a;
}

.beforeafter_02 {
	margin: 0 20px 30px;
	font-weight: normal;
	font-size: 18px;
	font-size: 4.5vw;
	line-height: 1.5;
	color: #330004;
}

.beforeafter_10 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 5vw 10vw;
}

.beforeafter_10 li {
	width: 48%;
	margin-bottom: 4%;
}

.beforeafter_10 li:nth-of-type(even) {
	margin-left: 4%;
}

.beforeafter_10 img {
	height: 11.51846153846154vw;
}

.beforeafter_03 {
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 6vw;
	line-height: 1.5;
	color: #660000;
}

.beforeafter_04 {
	margin-bottom: 20px;
	padding: 3px 0;
	background: #e8e3e1;
	font-size: 0;
}

.beforeafter_05 {
	margin-bottom: 15px;
	background: linear-gradient(to bottom, #e18c53 0%, #d97158 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: none;
	text-align: center;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	font-size: 30px;
	font-size: 6vw;
	line-height: 1.3;
}

.beforeafter_06 {
	margin-bottom: 20px;
	text-align: center;
	font-size: 16px;
	font-size: 3vw;
	line-height: 1.5;
	color: #cccccc;
}

.beforeafter_07 {
	margin-bottom: 20px;
	text-align: center;
	font-size: 18px;
	font-size: 4vw;
	line-height: 1.5;
	color: #d7b394;
}

.beforeafter_08 {
	text-align: center;
	font-size: 0;
}

.beforeafter_08 a {
	display: inline-block;
	vertical-align: top;
	height: 64px;
	padding: 0 20px;
	border-radius: 5px;
	background: linear-gradient(to bottom, #580000 0%, #330000 100%);
	text-decoration: none;
	font-size: 20px;
	font-size: 4vw;
	line-height: 64px;
	color: #fff;
	position: relative;
}

.beforeafter_08 a:after {
	display: inline-block;
	vertical-align: middle;
	content: '';
	width: 0;
	height: 0;
	margin-top: -2px;
	margin-right: -5px;
	margin-left: 5px;
	border: solid 6px transparent;
	border-left: solid 10px #fff;
}

.beforeafter .case.beforeafter_09 {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 20px;
	font-size: 4vw;
	line-height: 1.5;
	color: #d7b394;
}

.beforeafter .case {
	padding: 20px 20px 50px;
	background: #000;
	text-align: left;
}

.beforeafter .case:nth-of-type(even) {
	background: #1f1f1f;
}

.beforeafter .case.beforeafter_09 {
	padding: 20px 0;
	text-align: center;
}

.beforeafter .case h3 {
	display: inline-block;
	vertical-align: top;
	height: 26px;
	margin-bottom: 10px;
	padding: 0 10px;
	background: #ceb398;
	font-weight: 500;
	font-size: 13px;
	line-height: 26px;
	color: #330004;
}

.beforeafter .case figure {
	margin: 0 0 10px;
}

.beforeafter .case figcaption {
	margin: 20px 0 15px;
	padding: 15px;
	background: #fff;
	text-align: center;
	font-size: 4vw;
	line-height: 1.5;
	color: #330004;
}

.beforeafter .case figcaption.left {
	padding: 15px;
	text-align: left;
	font-weight: 400;
	font-size: 3.5vw;
}

.beforeafter .case figcaption span.ttl {
	font-weight: 500;
	font-size: 4vw;
	color: #ab6100;
}

.beforeafter .case figure.w100 {
	margin: 10px 0 20px;
}

.beforeafter .case figure.w100 img {
	width: 100%;
}

.beforeafter .case p {
	text-align: justify;
	font-size: 3.5vw;
	color: #bebebe;
}

.beforeafter .case .movie {
	margin-bottom: 15px;
}

.beforeafter .case .caution {
	margin: 5vw 0 0;
}

.beforeafter_zoom_title {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 15px;
	padding-bottom: 2px;
	border-bottom: solid 1px #e19688;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 5vw;
	line-height: 1.1;
	color: #c4361a;
}

.beforeafter_zoom_title:after {
	display: block;
	content: '';
	height: 1px;
	margin-top: 0.4em;
	background: #e19688;
}

.beforeafter_figcaption_btn {
	display: flex;
	justify-content: center;
	margin-top: 1em;
}

.beforeafter_figcaption_btn a {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	border-radius: 3px;
	background: #6c0900;
	text-align: center;
	text-decoration: none;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	font-weight: 400;
	font-size: 3.5vw;
	letter-spacing: 0.05em;
	line-height: 12vw;
	color: #fff;
}

.beforeafter_figcaption_btn a.beforeafter_figcaption_btn_official {
	background: linear-gradient(to bottom, #ee8835 0%, #e1653d 100%);
}

.beforeafter_figcaption_btn a.beforeafter_figcaption_btn_document {
	background: linear-gradient(to bottom, #6c0900 0%, #430400 100%);
}

.beforeafter_figcaption_btn a:after {
	display: inline-block;
	vertical-align: 0;
	content: '';
	width: 0;
	height: 0;
	margin: 0 -0.8em 0 0.2em;
	border: solid 5px transparent;
	border-left: solid 8px #fff;
}

.beforeafter_figcaption_btn a:nth-of-type(2) {
	margin-left: 2%;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > flash
--------------------------------------------------------- */

#flash {
	margin: 20px 10px 20px;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_05
--------------------------------------------------------- */

.periodontitis_05,
.periodontitis_06,
.periodontitis_07,
.periodontitis_08 {
	margin: 0 10px 20px;
	text-align: left;
}

.periodontitis_05 td,
.periodontitis_06 td {
	padding: 10px;
	border: solid 1px #ddd;
	background: #fff;
}

.periodontitis_07 .center {
	margin-top: 15px;
}

.periodontitis_07 h3 {
	margin-bottom: 10px;
	text-align: center;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 7vw;
	line-height: 1.2;
	color: #c4361a;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_08
--------------------------------------------------------- */

.periodontitis_08 dl {
	margin-top: 10px;
	padding: 10px;
	border: solid 1px #ccbfbe;
	background: #f3efed;
}

.periodontitis_08 dt {
	margin-bottom: 5px;
	font-size: 16px;
	color: #5c0007;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_09
--------------------------------------------------------- */

.periodontitis_09 {
	margin: 15px 0 0;
	background: url(../images/line.png) repeat-x left 0;
}

.periodontitis_09 dl {
	padding: 15px 10px;
	background: url(../images/line.png) repeat-x left bottom;
	text-align: left;
}

.periodontitis_09 dt {
	margin-bottom: 10px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: #863f01;
	text-align: center;
	font-size: 16px;
	line-height: 30px;
	color: #fff;
}

.periodontitis_09 dt.level-02 {
	background: #934009;
}

.periodontitis_09 dt.level-03 {
	background: #a04110;
}

.periodontitis_09 dt.level-04 {
	background: #ad4218;
}

.periodontitis_09 dt.level-05 {
	background: #ba431f;
}

.periodontitis_09 dt.level-06 {
	background: #c74427;
}

.periodontitis_09 dt.level-07 {
	background: #d4452e;
}

.periodontitis_09 dt.level-08 {
	background: #e14636;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_10
--------------------------------------------------------- */

.periodontitis_10 {
	margin: 30px 0;
	font-weight: 500;
	font-size: 4vw;
	letter-spacing: 0.05em;
	line-height: 1.6;
}

.periodontitis_10 span {
	color: #830000;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_11
--------------------------------------------------------- */

.periodontitis_11 {
	margin: 0 10px 20px;
}

.periodontitis_11 .clearfix {
	margin: 0 0 20px;
}

.periodontitis_11 dl {
	margin-bottom: 10px;
	text-align: left;
}

.periodontitis_11 dt {
	margin: 0 0 5px;
	font-size: 17px;
	color: #863f01;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > price
--------------------------------------------------------- */

#price {
	margin: 40px 10px 20px;
}

#price p {
	font-size: 13px;
}

#price table {
	width: 100%;
	margin-bottom: 10px;
}

#price th {
	height: 26px;
	padding: 2px 0 0;
	background: #450506;
	background: -webkit-gradient(linear, left top, left bottom, from(#780c0a), to(#450506));
	background: -moz-linear-gradient(top, #780c0a, #450506);
	background: linear-gradient(to bottom, #780c0a, #450506);
	background: -ms-linear-gradient(top, #780c0a, #450506);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#780c0a', endColorstr='#450506', GradientType=0)";
	text-align: center;
	font-weight: normal;
	font-size: 16px;
	line-height: 26px;
	color: #fff;
}

#price td {
	width: 25%;
	padding: 7px 4px;
	border: solid 1px #dbd3d1;
	text-align: left;
	line-height: 1.4;
}

#price td.center {
	text-align: left;
}

#price td.td-Cgray {
	background: #ede9e8;
}

#price td.td-Cyellow {
	background: #f6efd0;
	text-align: center;
	color: #830000;
}

#price td span {
	font-size: 13px;
	color: #777;
}

#price table + p {
	text-align: left;
	font-size: 13px;
	line-height: 1.5;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > caution
--------------------------------------------------------- */

.caution {
	margin: 0 10px 40px;
	padding: 15px;
	border: solid 1px #ccbfbe;
	background: #f3efed;
	text-align: left;
	font-size: 11px;
	line-height: 1.5;
}

.caution li {
	margin-left: 8px;
	list-style: disc;
}

/* ---------------------------------------------------------
	CSS Document faq
--------------------------------------------------------- */

#faq_05 {
	margin-top: 30px;
}

#faq {
	margin: 0 10px;
}

#faq dl {
	margin: 10px 0 0;
	padding-top: 8px;
	border: solid 1px #c1b2b2;
	background: #fff;
	text-align: left;
}

#faq dt {
	padding-left: 48px;
	background: url(/lp/include/images/faq_03.png) no-repeat 10px;
	background-size: 30px auto;
	font-weight: bold;
	color: #660008;
}

#faq dt:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 40px;
}

#faq dt span {
	display: inline-block;
	vertical-align: middle;
	width: 98%;
}

#faq dd {
	padding: 17px 10px 5px;
	background: url(../images/faq_04.jpg) repeat-x top;
}

/* ---------------------------------------------------------
	CSS Document periodontitis > periodontitis_12
--------------------------------------------------------- */

.periodontitis_12 {
	margin: 0 10px;
}

.periodontitis_12 p img {
	margin-bottom: 10px;
}

/* ---------------------------------------------------------
	CSS Document search
--------------------------------------------------------- */

.search {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20px 0;
	border: solid 1px #ccc0bf;
	background: #fff;
}

/* ---------------------------------------------------------
	CSS Document s_many
--------------------------------------------------------- */

.s_many {
	font-size: 3.5vw;
	line-height: 8vw;
	color: #fff;
}

.s_many span {
	color: #ffd03a;
}