@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }

body { background-color:#C7E3F2; color: #333; position: relative; line-height: 1.8; font-size: 1.2rem; letter-spacing: .06rem;}

div#contact{font-family: "游明朝体","YuMincho","游明朝","Yu Mincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",'sans-serif'; font-weight: 500;}

table { border-collapse: collapse; border-spacing: 0; }

a { color: inherit; outline: none; text-decoration: none; }
a:link { color: #000; }
a:visited { color: #000; }
a:hover { color: #000; text-decoration: none; }
a:active { color: #000; }

#Main img{max-width:100%;}

/*上にもどる*/
#bck {position:fixed; right:4%; bottom:20px; display:none; z-index:100;}
#bck a { display:block; background:url(../backtotop.png) no-repeat; width:65px; height:30px; }
#bck a:hover{ background-position:bottom left;}
@media screen and (max-width:840px){
#bck{width:100%; margin-left:0; right:0; bottom:0;}
#bck a{position:absolute; right:4px; bottom:8px;}
}
/*--フッター*--*/
footer{text-align:center; font-size:0.6em;}

h2{font-size:1.9rem; color:#FFFFFF; background-color:#2085AB; text-align:center; padding:20px 0 25px;}

h3{font-size:1.5rem; font-weight:800; color:#2085AB; text-align:center;}
h3 span{display:block;}
h4{font-size:1.2rem;}

#Main{margin:0 auto; background-color:#FFFFFF; width:1033px; padding:0;}
div.Details{ padding:25px; margin-left:auto; margin-right:auto;}

.T30{margin-top:30px;}
.T60{margin-top:60px;}
.T90{margin-top:90px;}

/*------------------------------*/
#title{width:100%; text-align:center; padding:110px 0 0 0; line-height:0;}

#Point{font-size:1rem; padding:12px 0;}
#Point p{text-align:center;}
#Point .Details p{text-align:left;}
#Point strong{color:#CC0000;}
#Point img{max-width:100%;}

p.links{font-size:0.9em; margin-top:12px;}



/*抜けてもまた生え、一生育つ！*/
#grow p{text-align:center;}
#grow p span{display:block;}

.ill{margin:0 auto; display:table; width:100%;}
.ill:after{content:""; display:block; clear:both; visibility:hidden; height:0;}
.illL{ display:table-cell; vertical-align:middle; width:65%;}
.illL img{width:100%;}
.illR { display:table-cell; vertical-align:middle; max-width:100%; position: relative; display: inline-block; margin: 1.5em 0 1.5em 15px; padding: 7px 10px; max-width: 100%; color: #555; background: #e0edff;}
.illR:before {content: ""; position: absolute; top: 50%; left: -50px; margin-top: -15px; border: 15px solid transparent;  border-right: 50px solid #e0edff;}
.illR p {margin: 0; padding: 0; text-align:center; font-weight:bold; color:#003366;}
.illR span{display:block;}
.illR strong{font-size:1.5rem;}

/*自分の髪だから自然な仕上がり*/
#mine p{text-align:center;}

#japanese .choi{border:1px solid #CCCCCC; padding:12px; width:90%; margin:0 auto 30px; margin-top:30px;} 
#japanese .choiL, .choiR{display:table-cell; vertical-align:middle;}
#japanese .choiL{width:80%;}


#japanese .japanlist{display: table; table-layout: fixed; width:100%;}
#japanese .japanlist dl{width:29%; display:table-cell; padding:2%;}
#japanese .japanlist dt{color:#4291E8; text-align:center; font-weight:bold; border-bottom:1px dashed #666666;}
#japanese .japanlist dd{font-size:0.9em; line-height:1.5em;}


/*痛みや負担を最小限に*/
#ope_contents ul{list-style:none; text-align:center; font-size:120%; font-weight:bold;}
#ope_contents ul li{ color:#003399; margin:12px 0;}
#ope_contents ul li span{background: linear-gradient(transparent 30%, #FFFFCC 30%);}

/*施術の流れ*/
#flow h3{text-align:left; margin:20px 0 0;}
.circle {
  color: #fff;
 background: linear-gradient(#2085AB, #69B5CE); font-family: "游明朝体","YuMincho","游明朝","Yu Mincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",'sans-serif'; font-weight: 500;
  padding: 0;
  margin: 0;
  width:100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
}
#flow h3 span{display:table-cell; vertical-align:middle;}

#flow .flow01L, #flow .flow02L{float:left; width:68%;}
#flow .flow01R, #flow .flow02R{float:right;}

#flow .flow01, #flow .flow02{position: relative; display: inline-block; margin:0 0 1.5em 0; padding: 7px 10px 20px; min-width: 120px;  max-width: 100%;}
#flow .flow01:before, #flow .flow02:before{content: ""; position: absolute; top: 100%; left:40%; margin-left:0; border:60px solid transparent;  border-top: 30px solid #2085AB;}


table.comparison{width:100%;}
table.comparison th{background-color:#E4EBFC; width:48%;}
table.comparison th, table.comparison td{padding:8px; border:1px solid #CCCCCC; vertical-align:top;}
table.comparison div{ text-align:center;}

/*症例紹介*/
#ex h3{background-color:#D9E3FB; margin-top:60px; margin-bottom:12px; padding:12px 0; font-size:1.4em;}
#ex .photo{text-align:center;}
#ex hr{margin:40px 0; border:0; border-top:1px solid #CCCCFF;}
#ex sup{font-size:0.6em;}

#ex .ex_ph{float:left; padding-right:12px;}
#ex p:after{content:""; clear:both; display:block;}

#ex ul.ex_list{display:table; list-style:none;}
#ex ul.ex_list li{display:table-cell; width:40%; padding-right:2%; vertical-align:top;}
#ex ul.ex_list li img{max-width:100%; width:100%;}

.notes{font-size:0.8em;}

p.price{text-align:right;}
p.price span{font-size:0.75em;}

ul.prc{list-style:none; text-align:center; border:1px solid #CCCCCC; padding:2px;}
ul.prc li{display:inline;}
ul.prc li:after{content:" / ";}
ul.prc li:last-child:after{content:"";}
ul.prc span{font-size:0.75em;}

/**/
/*症例紹介 イラスト*/
div.topkind{float:left; margin:20px 0; width:46%; clear:right;}
div.topkindR{float:right;}
div.topkind table{border:1px solid #99CCFF; border-collapse:collapse; border-right:none; width:100%; line-height:1.5em;}
div.topkind table th, div.topkind table td{padding:4px; border-right:1px solid #99CCFF; text-align:center;}
div.topkind table th{background-color:#99CCFF;}
div.topkind p{margin-bottom:40px;}


/*費用*/
#price .notes{text-align:right;}
#price h3{text-align:left; margin:8px 0; padding:0 4px; font-size:130%; background-color:#ECF1FD;}
#price h3:before{content:"●";}
#price .headL{float:right; width:60%;}
#price .headR{float:left; width:38%;}
#price .head{margin-bottom:60px;}
#price .head:after{clear:both; content:""; display:block; height:0;}

#price table{border-left:1px solid #CCCCCC; width:100%;}
#price table th, #price table td{padding:8px; border-top:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
#price table th{background-color:#D9E3FB;}
#price table td{text-align:right;}
#price tr.tax td{font-size:0.75em; text-align:right; border-right:none; border-left:1px solid #FFFFFF; padding:0;}
#price .notes{font-size:0.9em;}
#price .blue{font-size:0.75em; color:#006699;}

@media screen and (max-width:1058px) {
#Main{width:98%; padding:0;}

#title{width:100%;}
#title img{ width:100%;}

#japanese dt span{display:block;}

.ill{width:auto;}
#flow .flow01L, #flow .flow02L{width:64%;}
}

@media screen and (max-width:960px){
.illL{width:70%;}
#flow .flow01L, #flow .flow02L{width:58%;}
#flow .flow01R, #flow .flow02R{width:40%;}

#grow p span{display:inline;}
table.comparison img{width:100%;}

ul.prc{list-style:none; text-align:center; border:1px solid #CCCCCC; padding:2px;}
ul.prc li{display:block;}
ul.prc li:after{content:"";}
ul.prc span{font-size:0.75em;}
}


@media screen and (max-width:800px){
#japanese .japanlist dl{display:block; width:auto; margin-bottom:30px;}
#japanese .japanlist dt span{display:inline;}
#japanese .japanlist div{text-align:center;}

}

@media screen and (max-width:720px){
div.Details{padding:8px;}

#title{padding-top:100px;}

#flow .flow01L, #flow .flow02L{width:auto; float:none;}
#flow .flow01R, #flow .flow02R{width:auto; float:none; text-align:center;}

#ex ul.ex_list{display:block;}
#ex ul.ex_list li{display:block; width:auto; margin-bottom:20px;}

}

@media screen and (max-width:696px){
.illL{width:auto; display:block;}
.illR{display:block; margin:30px auto 0 auto; width:70%;}
.illR:before {content: ""; position: absolute; top:-30px; left: 50%; margin-top: -15px; border: 15px solid transparent;  border-bottom: 30px solid #e0edff;}
.illR span{display:inline;}

#price .headL{float:none; width:auto; margin-top:12px;}
#price .headR{float:none; width:auto;}
}
@media screen and (max-width: 640px){
body { font-size: 1rem;}
h2{font-size:1.1em;}

h3 span{display:inline;}

/*#Point{font-size:0.7em;}
**/

#ex .ex_ph{display:block; float:none; padding-bottom:12px; padding-right:0;}

}

@media screen and (max-width:420px){
#price .notes span{display:block;}
#price .notes{text-align:center;}
}


/***********************************************************/
/***病院紹介********************************************************/
/***********************************************************/
/***********************************************************/
/*clinic*/
#clinic{}
#clinic h2{text-align:center;}

h3.drstitle{border:1px solid #003366; color:#003366; background-color:#EEEEEE; padding:2px 6px; margin:12px 0;}

/*病院案内*/
div.cln h3{text-align:left; color:#333333;}
div.cln h3 span{display:inline-block;}

div.cln{line-height:1.6em; margin:12px 0 40px; overflow:hidden; zoom:1;}
div.cln .add{float:left; width:55%; font-size:0.8em;}
div.cln .ph{float:right;}

div.cln dl{line-height:1.6em; margin:0;}
div.cln dt{color:#0066CC; margin-top:20px; border-left:12px solid #0066CC; padding-left:6px;}
div.cln dd{ margin:0 0 8px 16px; padding:0;}

/*Dr*/
#dr{background-color:#EAEEFF; padding:60px 0;}
.drs{margin:40px auto 50px auto; border:1px solid #CCCCCC; background-color:#FFFFFF; padding:6px; overflow:hidden; zoom:1; width:96%;}
.drs h4{font-size:1.6em; color:#000000; border-bottom:1px dotted #CCCCCC;}
.drs h4 span{font-size:0.8em; color:#FF6600; display:block;}
.drs .txt{font-size:0.8em;}
.drs .txt ul{list-style:none; margin:12px 0;}
.drs .txt .cc li{color:#336699;}
.drs .detail{float:left; width:76%;}
.drs .pht{float:left; padding-right:12px;}

@media screen and (max-width:1000px){
.drs .detail{width:72%;}
}

@media screen and (max-width:940px){
.drs .detail{width:68%;}
}

@media screen and (max-width:840px){
div.cln .add{float:none; width:auto;}
div.cln .ph{float:none; padding:0 0 0 12px;}
div.cln .ph img{display:inline;}
	
div.cln dt{width:auto; float:none;}
div.cln dd{float:none; padding:0 0 12px 4px; margin-left:0;}
iframe{width:98%;}

.drs .pht{width:28%;}
.drs .pht img{max-width:100%;}
}
@media screen and (max-width:740px){
p.links img{width:100%;}
}

@media screen and (max-width:680px){
/*症例紹介 イラスト*/
div.topkind{float:none; margin:20px 0; width:auto;}
div.topkindR{float:none;}
}

@media screen and (max-width:640px){
#detailes{width:100%;}
}

@media screen and (max-width:580px) {
h3 span{display:block;}

.drs h4{text-align:center;}
.drs .detail{width:auto; float:none;}
.drs .pht{float:none; padding-right:0; text-align:center; width:auto;}
}

@media screen and (max-width:480px){
.drs{width:auto;}
.drs h3 span.data{font-size:0.6em;}

#Main ul.flow li{padding:8px;}
#Main ul.flow li.arrow{margin:12px 0;}
}

@media screen and (max-width:400px){
#Point{font-size:0.65em;}

#Main dl.price{width:auto;}
#Main dl.price dt{width:auto; float:none;}
#Main dl.price dd{width:auto; float:none; margin:0;}
#Main dl.price span{margin:0;}
}