@charset "utf-8";
/*-------- about css --------*/

/* モバイルレイアウト : 480 px およびそれ以下. */

/* --------------------------------------------------------
#mainImg
-------------------------------------------------------- */

#mainImg2 {
	background:url(../img/bg_01_sp.png) no-repeat;
	background-size:cover;
}

/* --------------------------------------------------------
main - section
-------------------------------------------------------- */
section h5{
	display:block;
	font:normal 18px "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#663300;
	border-left: solid 5px #CC9966;
	border-bottom: solid 1px #CC9966;
	padding:2% 0 2% 3%;
	margin: 5% 0 0;
}

.correct{width:100%;}
dl{	margin:0;	padding:0;}
dl dt{	margin:0;	padding:0;}
dl dd{	margin:0;	padding:0;}

/* メリット */
.merit{
	display:inline-block;
	background:#FF9999;
	margin:0 0 3%;
	padding:2% 5%;
	color:#FFF;
	font-weight:bold;
	border-radius:50px;
}

/* デメリット */
.demerit{
	display:inline-block;
	background:#DA6363;
	margin:0 0 3%;
	padding:2% 5%;
	color:#FFF;
	font-weight:bold;
	border-radius:50px;
}

/* メリット・デメリット　リスト */
ul.mdList{	margin:0 0 5% 2%;}
ul.mdList li {	position: relative;	padding:0 0 0 1.3em;}
ul.mdList li::before {
   content: "●";
   position:absolute;
   top: 0;
   left: 0;
   color:#A3D800;
   font-size:18px;
}

/* 画像の影 */
img.imgShadow{	margin-bottom:25px;	box-shadow: 10px 10px 0 #E5F4B3;}

/* 料金 */
ul.priceList{	display:flex;	justify-content: space-between;}
ul.priceList li:last-of-type{	color:#663300;	font-weight:bold;	font-size:18px;}
.right{	text-align:right;}

/* 治療回数 */
.period{
	margin-bottom: 5%;
	padding: 3% 5%;
	border: #CC9966 dashed 1px;
}
.period span{
	display: block;
	padding: 0;
	color: #DA6363;
	font-weight: bold;
}

.period2 span{
	margin-right: 1em;
	display: inline-block;
}

/* 治療の流れ */
.flow{
	position:relative;
	margin:15% auto 5%;
	padding:10% 5% 5%;
	background-color:#FFFAEE;
	border: #CCCC99 solid 1px;
	box-sizing: border-box;
}

.flow h6{
	position: absolute;
	left: 5%;
	top: -9%;
	margin:0;
	padding: 1% 3%;
	color: #3F1F00;
	font-size:18px;
	font-weight: normal;
	background-color: #FFF;
	border: #CCCC99 solid 1px;
}
.flow ol{	margin:0 0 0 5%;	padding:0;	counter-reset: number;}
.flow ol li {
	position: relative;
	margin:0 0 3%;
	padding:0 0 0 45px;
	color:#3F1F00;
	font-size:18px;
	line-height:34px;
}
.flow ol li span{	font-size:13px;
display: inline-block;}
.flow ol li::before {
	counter-increment: number;
	content: counter(number) " ";
	position:absolute;
	top: 0;
	left: 0;
	width:30px;
	height:30px;
	color:#A3D800;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	line-height:30px;
	background:#FFF;
	border:#D3EC80 solid 1px;
}
section:nth-child(2) h4{
  height: 75px;
}
.whitening .flow, .invisalign02 .flow{
	margin-top: 10%;
}
.whitening .flow li {
	position: relative;
	margin:0 0 3%;
	padding:0;
	color:#3F1F00;
	font-size:18px;
	line-height:34px;
}
.whitening .flow li span{
	display: inline-block;
}
.kangaekata h5{
display: block;
    font: normal 18px "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    color: #467F2B;
		border-left: none;
		border: none;
		padding: 0;
}
.kangaekata h5:last-of-type{
margin-top: 5%;
}
.kangaekata {
	border: solid 3px #D0F3A0;
	margin-bottom: 5%;
	padding: 5% 3%;
}
.kangaekata ul li{
	display: inline-block;
	margin: 0 15px 0 0;
}
.kangaekata ul li::before {
	    content: "●";
    color: #A3D800;
    font-size: 18px;
}
.kangaekata p{
	margin-bottom: 0;
}
.kangaekata p span{
	display: inline-block;
}
.correct span{
	display: inline-block;
}

/* モバイルレイアウト : 480 px およびそれ以下. */

details {
  margin: 5% 0;
}

.details-summary {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5em calc(1.5em + 18px) 0.5em 1.5em; /* calc(余白em + 右端のプラス分の余白) */
  background-color: #e9e9e9;
  /* transition: all 0.3s; */
}

.details-summary:hover {
  cursor: pointer;
  opacity: 0.8;
}

.details-summary .btn {
  position: absolute;
  top: 50%;
  right: 4%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  transform-origin: center center; /* 回転の起点 */
  transition-duration: 0.2s;
}

.details-summary .btn:before, .details-summary .btn:after {
  content: "";
  background-color: #585858;
  border-radius: 10px;
  display: block;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.details-summary .btn:before {
  width: 4px;
  height: 18px;
  top: 50%;
  left: 50%;
}

.details-summary.is-active .btn {
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center center; /* 回転の起点 */
}

.details-summary.is-active .btn:before {
  content: none;
}

.details-summary::-webkit-details-marker {
  display: none;
}
.noteBox ol{
  padding: 0 0 0 2em;
	margin: 0;
}
.noteBox ol li{
	list-style: decimal;
}
.details-content {
  padding: 1em 1.5em;
	border: #585858 1px solid;
	background-color: #f7f7f7;
	margin: 1em 0;
}

.details-content p {
  margin: 0 0 20px;
}

.details-content p:last-of-type {
  margin: 0 0 0;
}

/* タブレットレイアウト : 981 px～。モバイルレイアウトからスタイルを継承。 */
@media print, screen and (min-width: 768px) {

details {
  margin: 20px auto;
}


}
/* タブレットレイアウト : 768 px～。モバイルレイアウトからスタイルを継承。 */

@media print, screen and (min-width: 768px) {

/* --------------------------------------------------------
#mainImg
-------------------------------------------------------- */

#mainImg2{	 background:url(../img/bg_01.png);}

/* --------------------------------------------------------
main - section
-------------------------------------------------------- */
section h5{	padding:5px 10px;	margin:0 0 15px;	width:100%;}

.correct{width:100%;}
dl{	margin:0;	padding:0;	display:flex;	flex-direction: row-reverse;	justify-content: space-between;}
dl dt{	margin:0;	padding:0;	width:580px;}
dl dd{	margin:0;	padding:0;	width:360px;}

/* メリット */
.merit{	margin:0 0 15px;	padding:5px 15px;}

/* デメリット */
.demerit{	margin:0 0 15px;	padding:5px 15px;}

/* メリット・デメリット　リスト */
ul.mdList{	margin:0 0 5% 2%;}
ul.mdList li {	display: inline-block;	margin: 0 15px 0 0;}

/* 料金 */
ul.priceList{	display:flex;	justify-content: space-between;}
ul.priceList li:last-of-type{	color:#663300;	font-weight:bold;	font-size:18px;}
.right{	text-align:right;}

/* 治療回数 */
.period{
	padding: 10px 15px;
	display: flex;
}
.period span{
	margin-right: 1em;
	padding: 0;
	display: block;
	white-space: nowrap;
}

/* 治療の流れ */
.flow{	width: 100%;	margin: 20px auto 0;	padding: 40px 30px 15px;}
.flow h6{left: 30px;	top: -25px;	margin: 0;	padding: 1% 3%;}
.flow ol{	margin:0;}
.flow ol li {	margin:0 0 10px;	padding:0 30px 0 40px;	display:inline-block;}
.arrow::after {
	content: '';
    position: absolute;
    top: 40%;
    transform: rotate(45deg) translateY(-50%);
    width: 12px;
    height: 12px;
    border-width: 3px 3px 0 0;
    border-style: solid;
    border-color: #A3D900;
}
section:nth-child(2) h4{
  height: 50px;
}
.flow ol li::after:lasy-of-type{	display:none;}
.whitening .flow, .invisalign02 .flow{
	margin-top: 50px;
}
.whitening .flow li{	margin:0 0 10px;	padding:0 30px 0 40px;	display:inline-block;}
.kangaekata {
	margin-bottom: 30px;
	padding: 30px;
}
.kangaekata h5:last-of-type{
margin-top: 20px;
}
}
/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {}