@charset "UTF-8";


.top-title{
text-align:center;
}


/* カウンター
------------------------------- */
#counter{
width:280px;
margin:0 auto;
padding:3px;
text-align:center;
font-size:90%;
}

#counter span{
padding:0 3px;
color:#066;
font-weight:700;
}

#counter li{
display:inline-block;
vertical-align:middle;
}


/* bgm
------------------------------- */
#bgm{
margin:10px auto;
padding:3px;
text-align:center;
}


/* topic-col
------------------------------------- */
.topic-col .container{
max-width:1000px;
margin-top:0;
padding-top:0;
}


#topic-link{
position:static;
width:100%;
margin:5px auto 0;
text-align:center;
font-size:120%;
}

#topic-link li{
position:static;
width:100%;
margin:5px auto 0;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}

#topic-link li:hover{
position:relative;
top:1px;
}

#topic-link a{
display:block;
position:relative;
padding:10px 0;
text-decoration:none;
color:#400000;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 0 10px 0 rgba(102,102,102,0.3);
box-shadow:0 0 10px 0 rgba(102,102,102,0.3);
text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

#topic-link a span:before{
position:absolute;
left:4%;
top:25%;
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:20px;
color:#FFF;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

#topic-link a span:after{
position:absolute;
right:2%;
top:25%;
content:'\f105';
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:20px;
color:#FFF;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

#topic-link a:hover, #topic-link a:focus {
text-decoration:none;
background-color:FFF;
padding:10px 0;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}


/* お客様の声
------------------------------- */
#customer-voice-page{
background-color:#F4BE2F;
max-width:80%;
}

#customer-voice-page a:hover{
opacity:0.8;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

#topic-link #customer-voice-page a span:before{
content:'\f086';
}




/* .cont-outline
------------------------------- */
.cont-outline{
text-align:left;
font-size:120%;
}

.cont-outline .container{
max-width:960px;
margin-left:auto;
margin-right:auto;
}


.cont-outline .container h1{
font-size:5vw;
font-weight:normal;
margin-bottom:15px;
color:#006;
color:#FFF;
}


.top-message{
margin:0 auto 0;
padding:0.2em 0;
background-color:#00509F;
text-align:center;
}

.top-message .container{
max-width:900px;
margin-left:auto;
margin-right:auto;
}

#top-catch{
font-size:4vw;
color:#FF6;
margin:0 !important;
padding:0;
font-weight:normal;
text-align:center;
text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

#top-message-text{
margin:1em;
padding:1em;
background-color:#FFF;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border:#004080 solid 1px;
-webkit-box-shadow:0 0 8px 0 rgba(0,0,0,0.3) inset;
box-shadow:0 0 8px 0 rgba(0,0,0,0.3) inset;	
}


#top-message-text p{
font-size:16px;
margin:0;
padding:0.5em 0;
color:#333;
text-align:left;
}



/* 無料相談・お問合せ
------------------------------- */
.free-consultation{
margin:10px auto 0;
padding:0.3em;
}

.fc-title{
position:relative;
margin-bottom:5px;
padding:0.5em;
background-color:#FF7F00;
color:#FFF;
font-size:100%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-weight:normal;
text-align:center;
}

.fc-title span{
color:#FF0;
}

.fc-title:before{
content:"";
position:absolute;
top:100%;
left:50%;
margin-left:-10px;
border:10px solid transparent;
border-top:10px solid #FF7F00;
}

.free-consultation p{
margin-bottom:0;
padding:5px;
}


.fc-link{
position:static;
width:100%;
margin:20px auto 10px;
text-align:center;
}

.fc-link a{
min-width:300px;
display:inline-block;
text-decoration:none;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
padding:9px;
background-color:#00B259;
color:#FFF;

-webkit-box-shadow:0 0 10px 0 rgba(102,102,102,0.3);
box-shadow:0 0 10px 0 rgba(102,102,102,0.3);
}

.fc-link a:after{
content:"\f138";
font-family:FontAwesome;
font-weight:normal;
margin-left:0.5em;
color:#FFF;
}

.fc-link a:hover {
position:relative;
top:1px;
}





/* phototherapy
------------------------------- */
.phototherapy{
margin:0.5em auto 1em;
padding:0.2em;
font-size:120%;
text-align:center;
}

.phototherapy .container{
max-width:900px;
margin-left:auto;
margin-right:auto;
background: -webkit-repeating-linear-gradient(-45deg, #FFF0F8, #FFF0F8 3px,#FFF9FC 3px, #FFF9FC 7px);
background: repeating-linear-gradient(-45deg, #FFF0F8, #FFF0F8 3px,#FFF9FC 3px, #FFF9FC 7px);
border:solid 10px #FFD5EA;
}


.phototherapy h2{
font-size:4vw;
color:#F66;
margin:0 !important;
padding:0;
font-weight:normal;
text-align:center;
text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

.phototherapy h3{
margin-bottom:2em;
}


.phototherapy-text{
margin:0.5em 1em 1em;
padding:1em;
background-color:#FFF;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border:#FFD5EA solid 5px;
}


.phototherapy p{
font-size:16px;
margin:0;
padding:0.5em 0;
color:#333;
text-align:left;
}


.phototherapy hr{
margin:2em auto;
max-width:120%;
height:2px;
border:0;
background:linear-gradient(left, #FFF, #FFBDDE ,#FFF);
background:-webkit-linear-gradient(left, #FFF, #FFBDDE ,#FFF);
background:-moz-linear-gradient(left, #FFF, #FFBDDE ,#FFF);
}



div.fp-col{
position:relative;
}


ul.fp{
margin:1em 0;
padding:0.5em;
background-color:#FEFCE4;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;

border:dashed 4px #8AC4DF;
-webkit-box-shadow: 0px 0px 0px 10px #FEFCE4, 5px 5px 15px rgba(0, 0, 0, 0.3);
-moz-box-box-shadow: 0px 0px 0px 10px #FEFCE4, 5px 5px 15px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 0px 10px #FEFCE4, 5px 5px 15px rgba(0, 0, 0, 0.3);
  
}



div.fp-col i{
position:absolute;
top:-30px;
right:15px;
font-size:450%;
color:#F60;
background-color:#FEFCE4;
}


ul.fp li{
position: relative;
padding:0.5em 1em 0.5em 2em;
margin-bottom:5px;
border-bottom:1px dashed #8AC4DF;
font-size:80%;
text-align:left;
}


ul.fp li:after,
ul.fp li:before{
content: "";
position:absolute;
border-radius:50%;
}

ul.fp li:before{
left: 0.2em;
width: 17px;
height: 17px;
background: rgba(129,194,250,0.5);
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

ul.fp li:after{
top:1.1em;
left:0.7em;
width:14px;
height:14px;
background: rgba(129,194,250,0.3);
}






/* yurukiki
------------------------------- */
.yurukiki{
margin:2em auto 1em;
padding:0;
font-size:120%;
text-align:center;
}

.yurukiki .container{
max-width:900px;
margin-left:auto;
margin-right:auto;
background: -webkit-repeating-linear-gradient(-45deg, #F0F8FF, #F0F8FF 3px,#E9F4FF 3px, #E9F4FF 7px);
background: repeating-linear-gradient(-45deg, #F0F8FF, #F0F8FF 3px,#E9F4FF 3px, #E9F4FF 7px);
border:solid 10px #D6EBFF;
}


.yurukiki h2{
font-size:4vw;
color:#69F;
margin:0 !important;
padding:0;
font-weight:normal;
text-align:center;
text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

.yurukiki-text{
margin:0.5em 1em 1em;
padding:1em;
background-color:#FFF;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border:#D6EBFF solid 5px;
}


.yurukiki p{
font-size:16px;
margin:0;
padding:0.5em 0;
color:#333;
text-align:left;
}


.yurukiki hr{
margin:2em auto;
max-width:120%;
height:2px;
border:0;
background:linear-gradient(left, #FFF, #D6EBFF ,#FFF);
background:-webkit-linear-gradient(left, #FFF, #D6EBFF ,#FFF);
background:-moz-linear-gradient(left, #FFF, #D6EBFF ,#FFF);
}}



/* 姓名判断
------------------------------- */
.seimei{
margin:2em auto 1em;
padding:0;
font-size:120%;
text-align:center;
}

.seimei .container{
max-width:900px;
margin-left:auto;
margin-right:auto;
background: -webkit-repeating-linear-gradient(-45deg, #FFEFDF, #FFEFDF 3px,#FFE3C8 3px, #FFE3C8 7px);
background: repeating-linear-gradient(-45deg, #FFEFDF, #FFEFDF 3px,#FFE3C8 3px, #FFE3C8 7px);
border:solid 10px #FFBA75;
}


.seimei h2{
font-size:4vw;
color:#FF8000;
margin:0 !important;
padding:0;
font-weight:normal;
text-align:center;
text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

.seimei-text{
margin:0.5em 1em 1em;
padding:1em;
background-color:#FFF;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border:#FFBA75 solid 5px;
}


.seimei p{
font-size:16px;
margin:0;
padding:0.5em 0;
color:#333;
text-align:left;
}








@media all and (min-width:500px) {

#top-catch{
font-size:20px;
text-align:center;
}

}



@media all and (min-width:700px) {


/* .count-sns-col
----------------------------------------------------*/
.count-sns-col .container{
position:relative;
max-width:900px;
height:1.5em;
}

#counter{
text-align:left;
position:absolute;
top:5px;
left:5px;	
}

#share{
position:absolute;
top:0;
right:5px;
}


/* #topic-link
------------------------------- */
#topic-link{
margin:1em auto 0;
max-width:70%;
}

/* .cont-outline
------------------------------- */
.top-message{
margin:1em auto 0;
}

.cont-outline .container h1{
font-size:30px;
}

/* #top-catch
------------------------------- */
#top-catch{
text-align:center;
}

.phototherapy h2{
font-size:30px;
}

div.fp-col i{
position:absolute;
top:-20px;
right:35px;
font-size:650%;
color:#F60;
background-color:#FEFCE4;
}


.yurukiki h2{
font-size:30px;
}


.seimei h2{
font-size:30px;
}


/* 無料相談・お問合せ
------------------------------- */
.fc-col{
display:flex;
align-items:center;
justify-content:center;
}

.fc-col div{
flex:1;
}

.fc-title{
margin-left:2em;
padding:0.3em;
}

.fc-title:before{
content:"";
position:absolute;
top:50%;
left:100%;
margin-top:-20px;
border:20px solid transparent;
border-left:20px solid #FF7F00;
}

.fc-link{
margin:10px auto 10px;
}


}




@media all and (min-width:960px) {

#topic-link{
font-size:160%;
max-width:50%;
}


.cont-outline .container h1{
font-size:40px;
}

/* 無料相談・お問合せ
------------------------------- */

.fc-col{
text-align:center;	
}

.fc-title{
max-width:450px;
font-size:120%;
}

.fc-link a{
min-width:380px;
font-size:120%;
}

.free-consultation p{
text-align:center;
}


}