@charset "utf-8";

header {
  width: 100%;
  position: fixed;
  top: 0;
  margin:0 auto;
  text-align: center;
  z-index: 1000;
}


/*-----------slider----------------------------------*/



div.slider{
	width:100%;
	height:400px;
	background:  url("../images/slide1.jpg") no-repeat scroll 50% 50% / cover ;

}

ul#slide_text{
	color:#fff;
}


.mask {
	display: none;
	position:absolute;
	top: 45%;
	right: 5%;
	width: 60%;
	height: 200px;
	background-color: rgba(0,0,0,0.4);
	text-align: center;
	line-height: 18px;
	}
	
	

.mask p{
	width: 150px;
	margin: 25px auto;
	color: #fff;
	font-size: 85.714286%;
	text-align: justify;
}

/*-----------#strong point(未使用)-----------------------------------*/
ul#strong_point{
	width:98%;
	max-width: 960px;
	height:320px;
	margin:0 auto;
}

ul#strong_point li{
	float:left;
	width:49%;
	height:146px;
	margin:0 auto;
	padding: 10px 0 0 0;
	text-align: center;
	border-right:dotted 3px #ffe800;
	border-bottom:dotted 3px #ffe800;

}

ul#strong_point li:nth-child(even){
	border-right:none;
}

ul#strong_point li:nth-last-child(2){
	border-bottom:none;
}


ul#strong_point li:last-child{
	border-bottom:none;
}

ul#strong_point li div.inner_strong_point{
	height:100px;
}

ul#strong_point li p.strong_point_text{
	height:39px;
	margin:5px 0;
	color:#000;
	font-size:12px;
	line-height:18px;
}

ul#strong_point li p.strong_point_text strong{
	font-size:18px;
	
}

ul#strong_point li p.icon{
	height:50px;
	margin:0;
}

ul#strong_point li p.detail_btn{
	height:27px;
	margin:0;
	line-height:27px;
}

ul#strong_point li p a{
	padding:5px;
	font-size:11px;
	color:#000;
	border:solid 1px #ffe800;
}

ul#strong_point li p a:hover{
	background-color: #ffe800;
}

/*------------google_reviews---------------------------*/

#google_reviews{
	padding-top:80px;
	padding-bottom:20px;
	background-color:#f3f3f3;
	box-sizing: border-box;
	text-align: center;
}

#google_reviews div.container{
	width:90%;
	max-width: 960px;
	margin:20px auto;
	background-color:#f3f3f3;
	border-radius: 10px; 
}


/*-----------doc commenet-----------------------------------*/

div#doc_comment{
	width:100%;
	padding:20px 0;
	background-color:#ffe800;
	box-sizing: border-box;
}

div#doc_comment div.container{
	width:90%;
	max-width: 960px;
	margin:20px auto;
	background-color:#fff;
	border-radius: 10px; 
}



div#doc_comment div.container div#doc_photo{
	margin:0 auto;
	text-align: center;
	
}

div#doc_comment div.container div img{
	height:220px;
	margin:20px auto 0;
	vertical-align: bottom;
}

div#doc_comment div.container #doc_comment_text{
	width:95%;
	margin:0 auto 10px;
	padding:15px 8px;
	color:#000;
	box-sizing: border-box;

}

div#doc_comment div.container h2{
	color:#000;
	font-size:1.2rem;
}
div#doc_comment div.container #doc_comment_text h2{
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align: justify;
    background: linear-gradient(rgba(0,0,0,0) 90%, #ffe800 0%);
    display: inline;
}

div#doc_comment div.container #doc_comment_text h3{
	margin:10px auto 10px 0;
	color:#000;
	font-size:1.5rem;
	font-weight: bold;
	text-align: justify;
}

div#doc_comment div.container #doc_comment_text p{
	font-size:1.0rem;
	text-align: justify;
}

div#doc_comment div.container #doc_comment_text .doc_career{
	padding: 10px;
	border: 1px solid #ADADAD;
	background-color: #f3f3f3;
	font-size:0.8rem;
}

div#doc_comment div.container #doc_comment_text .doc_career dt {
float: left ;
clear: left ;
margin-right: 0.5em ;
width: 120px ;
}

div#doc_comment div.container #doc_comment_text .doc_career dd {
float: left ;
margin-left: 1em ;
}

/*------------pickup---------------------------------*/
div#pickup{
	width:90%;
	max-width: 960px;
	margin:80px auto;
}

div#pickup h2{
	margin-bottom:40px;
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}

div#pickup img{
	width: 100%;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	margin-bottom: 20px;
}

div#pickup img:hover{
	width: 100%;
	opacity: 0.6;
}


/*------------before_after---------------------------------*/

#before_after{

	padding-top:20px;
	padding-bottom:20px;
	box-sizing: border-box;
	text-align: center;

}

#before_after div{
	width:90%;
	max-width: 960px;
	margin:20px auto;

}

#before_after h2{
	height:30px;
	margin-bottom:10px;
	padding:20px 5px;
	color:#000;
	font-size:1.5rem;
	font-weight: bold;
	text-align:center;
	
}

#before_after h3{
	height:100%;
	margin-top:-60px;
	padding:0;
	font-size:2.0rem;
	font-weight: bold;	
	color:#333333;
    background: linear-gradient(rgba(0,0,0,0) 90%, #ffe800 0%);
    display: inline;
}

#before_after img{
	width: 100%;
	margin-top:50px;
}

#before_after .before_after_attention{
	text-align: right;
	margin: 30px 0;
}


#before_after blockquote {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #333333;
    border-left: 4px solid #ffe800;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
	z-index: -100;
	text-align: left;
}

#before_after blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    vertical-align: middle;
    content: " “　";
    font-family: "sans-serif";
    color: #ffe800;
    font-size: 90px;
    line-height: 1;
}

#before_after blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

#before_after blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

#before_after .square_btn {
	width: 100%;
    display: inline-block;
    padding: 1.2em 1em;
    text-decoration: none;
	text-align: center;
    color: #67c5ff;
	font-size: 1.2rem;
    border: solid 2px  #979797;
    border-radius: 60px;
    transition: .6s;
	box-sizing: border-box;
	margin:40px auto 0 auto;
}

#before_after .square_btn:hover {
    background: #ffe800;
    color: #000000;
}


/*------------nayami---------------------------------*/
div#nayami{
	width:90%;
	max-width: 960px;
	margin:80px auto;
}

div#nayami h2{
	margin-bottom:40px;
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}

.nayami_block{
	margin-bottom:30px;
	box-sizing: border-box;
	border:solid 1px #e3e3e3;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}

.nayami_block dl dd{
	padding: 10px 10px 0;
	box-sizing: border-box;
}

.nayami_block dl dd h4{
	margin-bottom:0;
	font-size:1.2rem;
	font-weight:bold;
}

.nayami_block dl dd p{
	font-size:1.0rem;
	text-align: justify;
}

.nayami_image img{
	width:100%;
}

div#nayami .nayami_block .sub_head{
	height:30px;
	margin:0 auto;
	font-size:1.0rem;
	font-weight:bold;
	text-align: center;
	line-height:30px;
	}

/*------------icon_doc---------------------------*/
.icon_doc	{position: relative}

.badge	{position: absolute;
	top: -30px;
	right: 0px}

.badge	{

	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}

/*------------other_symptom---------------------------*/

#other_nayami {
	width: 100%;
	text-align: center;
}

 #other_nayami h3{
	margin:0 auto 20px auto;
	 padding: 20px ;
	 background-color: #C3C3C3;
	color:#ffffff;
	font-size:1.0rem;
	font-weight: bold;
	text-align:left;
}

#other_nayami .wrap{width:100%;display:flex;justify-content: center;padding:0;list-style: none;}
#other_nayami .box1{width:calc(100% / 3);margin:2px; background-color: #ffe800; transition: .6s;}
#other_nayami .box2{width:calc(100% / 4);margin:2px;background-color: #ffe800; transition: .6s;}
#other_nayami .box1:hover, .box2:hover{opacity:0.6;}
#other_nayami p{text-align:center;color:#333333;font-weight:bold;margin:35px auto;}
/*.other_nayami  p:after {
	content:"　＞＞";
}*/



/*------------clinic---------------------------------*/
div#clinic{
	width:90%;
	max-width: 960px;
	margin:80px auto;
}

div#clinic h2{
	margin-bottom:40px;
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}



/*------------treatment_menu---------------------------*/

#treatment_menu{
	padding-top:80px;
	padding-bottom:20px;
	background-color:#f3f3f3;
	box-sizing: border-box;
}

#treatment_menu h2{
	height:30px;
	margin-bottom:30px;
	padding:20px 5px;
	color:#000;
	font-size:18px;
	font-weight: bold;
	text-align:center;
}


div#youtube{
	width:90%;
	max-width: 960px;
	margin:80px auto;
}

div#youtube h2{
	margin-bottom:40px;
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}

.youtube_video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.youtube_video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


#treatment_menu ul li{
	width:90%;
	height: auto;
	margin:0 auto 20px;
	padding:20px 15px;
	background-color:#fff;
	box-sizing: border-box;
	border-radius: 10px;
	/*border:solid 1px #000;*/
	/*list-style: square url('../images/logo_black_mini.png') inside;*/
}


#treatment_menu ul li dl dt h4{
	color:#000;
	font-size:1.2rem;
	font-weight: bold;

}

#treatment_menu ul li dl dt img{
	margin: 20px auto;
	text-align: center;
	width: 100%;

}


#treatment_menu ul li dl{
	margin-bottom:20px;
}

#treatment_menu ul li .button{
	width:60%;
	margin:0 auto;
	padding:5px;
	background-color:#ffe800;
	color:#000;
	text-align: center;
	border-radius: 50px;
	
  -moz-transition:0.6s ease;
  -webkit-transition:0.6s ease;
  -o-transition:0.6s ease;
  -ms-transition:0.6s ease;
	
	
}

#treatment_menu ul li .button a{
	color:#000;
	font-weight:500;
	}

#treatment_menu ul li .button:hover{
	background-color:#ffb800;
	}

#treatment_menu ul li .button a:hover{
	color:#000;
	}


/*------------treatment_step---------------------------------*/

div#treatment_step{
	width:90%;
	max-width: 960px;
	margin:80px auto;
	padding-top:80px;
	padding-bottom: 20px;
	border-bottom:1px #999999 solid;
	box-sizing: border-box;
}

div#treatment_step h2{
	margin-bottom:40px;
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}

div#treatment_step img{
	width: 100%;
}

div#treatment_step ol {
	counter-reset: li;
	margin-top: 20px;
}

div#treatment_step ol > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
	padding-left: 2.5em; /*li:before分左に余白を。調整可*/
	margin-bottom: 1.0em;/*リストの数字がくっついてしまう場合*/
	
}

div#treatment_step ol > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1em;
	background: #ffe800; /*薄いピンク*/
	border: 1px solid #ffe800; /*濃いピンク*/
	color: #333333; /*白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3em; /*幅を決めるheightと同じ数値に*/
	height: 1.3em; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: 0em; /*項目の基準、左にあわせる*/
	top: 2px; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.4;/*数字の位置あわせで数値を指定*/
}




/*------------testimony---------------------------------*/

div#testimony{

	padding-top:20px;
	padding-bottom:20px;
	box-sizing: border-box;
	text-align: center;

}

div#testimony div{
	width:90%;
	max-width: 960px;
	margin:80px auto;

}

#testimony h2{
	height:30px;
	margin-bottom:50px;
	padding:20px 5px;
	color:#000;
	font-size:1.5rem;
	font-weight: bold;
	text-align:center;
	
}

#testimony h3{
	height:100%;
	margin-top:-60px;
	padding:0;
	font-size:2.0rem;
	font-weight: bold;	
	color:#333333;
    background: linear-gradient(rgba(0,0,0,0) 90%, #ffe800 0%);
    display: inline;
}

#testimony img{
	width: 100%;
	margin-top:50px;
}

#testimony .doc_name{
	text-align: right;
	margin: 30px 0;
}


#testimony blockquote {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #333333;
    border-left: 4px solid #ffe800;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
	z-index: -100;
	text-align: left;
}

#testimony blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    vertical-align: middle;
    content: " “　";
    font-family: "sans-serif";
    color: #ffe800;
    font-size: 90px;
    line-height: 1;
}

#testimony blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

#testimony blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}






/*------------twitterbox---------------------------------*/
div#twitterbox{
	/*width:90%;
	max-width: 960px;
	margin:80px auto;*/
	padding-top:80px;
	padding-bottom:20px;
	background-color:#FFFCE4;
	box-sizing: border-box;

}

div#twitterbox div{
	width:60%;
	max-width: 960px;
	margin:80px auto;

}

div#twitterbox h2{
	height:30px;
	margin-bottom:30px;
	padding:20px 5px;
	color:#000;
	font-size:1.5rem;
	font-weight: bold;
	text-align:center;
}

/*------------instagrambox---------------------------------*/
div#instagrambox{
	width:90%;
	max-width: 960px;
	margin:0 auto;
	padding-top:80px;
	padding-bottom:20px;
	background-color:#FFFFFF;
	box-sizing: border-box;

}

div#instagrambox div{
	width:70%;
	max-width: 960px;
	margin:0 auto;

}

/*------------access---------------------------------*/


#access{
	padding-top:80px;
	padding-bottom:20px;
	background-color:#f3f3f3;
	box-sizing: border-box;
	text-align: center;
}



#access h2{
	height:30px;
	margin-bottom:20px;
	padding:20px 5px;
	color:#000;
	font-size:1.5rem;
	font-weight: bold;
	text-align:center;
}

#access h3{
	height:100%;
	margin-top:0;
	margin-bottom:30px;
	padding:0;
	color:#FFE800;
	font-size:2.0rem;
	font-weight: bold;
	color:#333333;	background: linear-gradient(rgba(0,0,0,0) 90%, #ffe800 0%);
	display: inline;
}

.accessbox{
	width:90%;
	max-width: 960px;
	margin:80px auto;
	text-align: left;
}

.access_type ul	{margin: 0;
	padding: 0;
	list-style: none}

.access_type li {
	display: block;
	padding: 20px;
	border-bottom: dotted 1px #dddddd;
	color: #000000;
	font-size: 1.0rem;
	line-height: 1.5rem;
}

.access_type .text	{
	float: none;
	width: auto;
	margin-left: 60px;
	padding-left: 15px;
	color: #666666;
}

.access_type img	{float: left;
	width: 60px;
}

.access_type span	{
	display: block;
	font-weight: bold;
}






/*------------------------------------------------------
plus�����̃X�^�C��:
------------------------------------------------------*/
@media screen and (min-width: 414px){


#treatment_menu ul li dl{
	margin-bottom:30px;
}

}

/*------------------------------------------------------
�^�u���b�g�����̃X�^�C��:
------------------------------------------------------*/

@media screen and (min-width: 640px){

div.slider{
	height:500px;

}
	

.mask{
	height: 400px;
}

.mask p{
	width: 300px;
	margin: 0 auto;
	line-height: 70px;
	text-align: center;
}

ul#strong_point{
	height:146px;
	margin:10px auto;

}

ul#strong_point li{
	width:24%;
	padding:0;
	border-bottom:none;
}

ul#strong_point li:nth-child(even){
	border-right:dotted 3px #ffe800;
}

ul#strong_point li:last-child{
	border-right:none;
}

div#doc_comment div.container{
	width:95%;
	margin:50px auto;
	box-sizing: border-box;
}

div#doc_comment div.container div#doc_photo{
	float:left;
	width:30%;
	padding:80px 0 0 0;
	box-sizing: border-box;
}


div#doc_comment div.container div img{
	width:100%;
	height:100%;
}

div#doc_comment div.container #doc_comment_text{
	float:left;
	width:70%;
	padding:30px 30px 20px;
	box-sizing: border-box;
}

div#doc_comment div.container #doc_comment_text h2{
	font-size:1.2rem;
	margin-bottom: 15px;
}

div#doc_comment div.container #doc_comment_text p{
	font-size:1.0rem;
}


/*-------------------nayami--------------------------*/

div#nayami{
	width:94%;
	margin:80px auto 30px;
}

div#nayami h2{
	margin-bottom:40px;
	font-size:1.2rem;
}

.nayami_block{
	float:left;
	width:50%;
	padding:10px;
	box-sizing: border-box;
	border:none;
	box-shadow: none;
}

	
.badge	{
	right: 200px
}


/*------------other_symptom---------------------------*/

#other_nayami {
	width: 100%;
	text-align: center;
}


#other_nayami h3{
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}
	
/*-------------------treatment--------------------------*/

#treatment_menu ul li .button{
	width:40%;
}

div#treatment_menu h2{
	margin-bottom:40px;
	font-size:24px;
}

div#access h2{
	margin-bottom:40px;
	font-size:24px;
}

}
/*------------------------------------------------------
						PC
------------------------------------------------------*/
@media screen and (min-width: 768px){


.mask p{
	width:85%;
	font-size: 16px;
}

ul#strong_point{
	height:110px;
}

ul#strong_point li{
	height:110px;

	}

ul#strong_point li div.inner_strong_point{
	height:60px;
	padding: 0 7%;
	text-align:center;
	}


ul#strong_point li p.icon{
	float:left;
	width:60px;
	height:60px;
	margin:0;
}

ul#strong_point li p.icon img{
	width:40px;
	height:40px;
}

	

ul#strong_point li p.detail_btn{
	height:27px;
	margin:5px auto;
	line-height:27px;
}


div#doc_comment div.container #doc_comment_text h2{
	font-size:20px;
}

div#doc_comment div.container #doc_comment_text p{
	font-size:15px;
}

.nayami_block{
	float:left;
	width:33.333333%;
	padding:10px;
	box-sizing: border-box;
	border:none;
}

#treatment_menu ul li{
	max-width: 650px;
	height: auto;
}

#treatment_menu ul li .button{
	width:35%;
	}
	

}
	


/*------------------------------------------------------
						PC
------------------------------------------------------*/
@media screen and (min-width: 960px){

ul#strong_point li:first-child{
	border-left:dotted 3px #ffe800;
}

ul#strong_point li:last-child{
	border-right:dotted 3px #ffe800;
}






}