@charset "utf-8";
/***********************************************************/
/***********************************************************/
/*--ヘッダー部分--*/
/***********************************************************/
/***********************************************************/
#logo{position:absolute; padding-top:12px; padding-left:12px;}


/*--フッター*--*/
footer{text-align:center; font-size:0.6em;}


/*-------------------------------------*/
/*フリーダイヤル・メールカウンセリング*/
/*-------------------------------------*/
div#contact{ line-height: 1.8; font-size: 1.4rem; letter-spacing: .06rem;}
div#contact div.logo{float:left;}
div#contact div.logo img{display:inline-block; vertical-align:-12px;}
div#contact div.logo span{font-size:0.65em; background-color:#8195B9; color:#FFFFFF; padding:2px 4px;}

div#contact div.logo_s{display:none;}

div#contact{display:fixed; position: absolute; z-index:1000; justify-content: space-between; transition:0.5s; background-color:#FFFFFF; width:100%; border-bottom:1px solid #CCCCCC; border-top:1px solid #CCCCCC; padding:2px 0; margin:0; line-height:0;}
div#contact.fixed{position:fixed; top:0; transition: .5s; visibility:visible;}

div#contact div{vertical-align:middle;}
div#contact div.details{width:1033px; margin:0 auto; display:block;}

div#contact div.Btn{float:right; padding:0 2px 3px; margin:0;}
div#contact div.reserve{margin:0; float:left; padding-left:2px;}
div#contact div.reserve{display:block; margin:0 0 0 5px; padding:0; width:81px; float:left;}
div#contact div.reserve a{display:block; width:auto;}
div#contact div.reserve img{width:100%;}

div#contact div.counseling{margin:0; float:left; padding-left:2px;}

#contact .counseling{display:none;}
#contact .counseling_s{display:block; margin:0 3px 0 6px; padding:0; width:81px; float:left;}
#contact .counseling_s a{display:block; width:auto;}
#contact .counseling_s img{width:100%;}

div#contact div.dial{text-align:center; line-height:1; float:left;}

div#contact div.dial_s{display:none;}
div#contact div.dial_s a{display:none;}

div#contact a.btn_dial{pointer-events: none; font-size:0.5em; color:#5F78A7;}
div#contact a.btn_dial span{font-size:3em;}
div#contact a.btn_counseling{ line-height:1.7;
	font-size:0.65em;
display: inline-block; letter-spacing:-1px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
background-color: #054A8A;
  background-image: -webkit-linear-gradient(top, #054d8f 0%, #195e9f 48%, #054A8A 49%, #054A8A 82%, #0658a5 100%);
  background-image: -moz-linear-gradient(top, #054d8f 0%, #195e9f 48%, #054A8A 49%, #054A8A 82%, #0658a5 100%);
  background-image: -o-linear-gradient(top, #054d8f 0%, #195e9f 48%, #054A8A 49%, #054A8A 82%, #0658a5 100%);
  background-image: linear-gradient(top, #054d8f 0%, #195e9f 48%, #054A8A 49%, #054A8A 82%, #0658a5 100%);
  border-color: hsl(209, 29%, 28%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding:4px 12px;
  }
div#contact a.btn_counseling strong{letter-spacing:2px; color:#FFFF66; font-size:0.75em;}
div#contact a.btn_counseling:hover{
color: #FFFFFF;
  background-color: #065299;
  background-image: -webkit-linear-gradient(top, #06559e 0%, #1c66ac 48%, #065299 49%, #065299 82%, #0760b4 100%);
  background-image: -moz-linear-gradient(top, #06559e 0%, #1c66ac 48%, #065299 49%, #065299 82%, #0760b4 100%);
  background-image: -o-linear-gradient(top, #06559e 0%, #1c66ac 48%, #065299 49%, #065299 82%, #0760b4 100%);
  background-image: linear-gradient(top, #06559e 0%, #1c66ac 48%, #065299 49%, #065299 82%, #0760b4 100%);
  border-color: hsl(209, 29%, 31%);
  }
div#contact a.btn_counseling:active {
  color: #FFFFFF;
  background-color: #04427b;
  background-image: -webkit-linear-gradient(top, #043d71 0%, #054A8A 100%);
  background-image: -moz-linear-gradient(top, #043d71 0%, #054A8A 100%);
  background-image: -o-linear-gradient(top, #043d71 0%, #054A8A 100%);
  background-image: linear-gradient(top, #043d71 0%, #054A8A 100%);
}


/*-----------------------------------*/
/*ページ内リンクメニュー*/
/*-----------------------------------*/
#Menu{font-size:0.65em; margin:0; padding:3px 0; clear:both; border-top:1px dotted #CCCCCC;}
#Menu ul{}
#Menu li{position:relative; list-style:none; float:left; padding:8px 6px 12px 12px; margin:0;}
#Menu li::after{position:absolute; display:block; top:0; right:-8px;}
#Menu a{color:#3366CC; position: relative;
display: inline-block;
padding: 0 11px 0 0;
vertical-align: middle;
text-decoration: none;}
#Menu a:hover{text-decoration:underline;}

#Menu a::before, #Menu a::after{
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
}

#Menu a::before{
width: 10px;
height: 10px;
-webkit-border-radius: 50%;
border-radius: 50%;
background:#FAE23D;
}
#Menu a::after{
right:1px;
top:3px;
box-sizing: border-box;
width: 4px;
height: 4px;
border: 4px solid transparent;
border-top: 4px solid #333399;
}

.cp_menu{display:none;}

@media screen and (max-width:1058px) {
div#contact{ font-size: 1.3rem;}
#logo{width:20%; padding:0;}
#logo img{width:100%;}

div#contact div.details{width:auto; margin:0 auto; display:block;}
}

@media screen and (max-width:890px){
div#contact div.logo span{font-size:0.5em; background-color:#8195B9; color:#FFFFFF; padding:2px 4px;}
}

@media screen and (max-width:830px){
div#contact div.logo{padding-left:8px; padding-bottom:2px; line-height:1; width:30%;}
div#contact div.logo img{display:block; vertical-align:top; width:100%;}
div#contact div.logo span{width:100%; display:block; text-align:center;}
}

@media screen and (max-width:720px){

#title{padding-top:100px;}

div#contact div.details{width:100%; margin:0; display:block;}

#Menu{display:none;}
.cp_menu { display:block; clear:both;
width:100%;
margin: 0 auto;
padding:0;
}
.cp_menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #000000;
line-height: 1; border-bottom:1px dotted #003399;
}
.cp_menu label {
display: block;
position: relative;
margin: 0 0 0 0;
padding:6px;
line-height: 1;
color: #ffffff;
background:#006699;
cursor: pointer;
}

.cp_menu input {
display: none
}
.cp_menu ul {
margin: 0;
padding: 0;
background:#F0F3FF;
list-style: none; font-size:0.75em;
}
.cp_menu li {
overflow-y: hidden;
max-height: 0;
transition: all 0.5s;
}
.cp_menu li a:hover{background-color:#D2DBFF;}

#cp_menu_bar1:checked ~ #link1 li{
max-height: 46px;
opacity: 1;
}

#arrow{
    fill: #fff;
    position: absolute;
    top: 6px;
    right:15px;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
}

.dropdown_arrow #arrow{
   	-webkit-transform: rotate(180deg);
	        transform: rotate(180deg);
}
}

@media screen and (max-width: 640px){
div#contact div.logo img{width:100%; padding-top:4px;}
div#contact a.btn_dial{pointer-events:visible;}
div#contact{ font-size: 1.2rem;}
}
@media screen and (max-width:600px){
div#contact div.dial{display:none;}
div#contact a.btn_dial{display:none;}

div#contact div.dial_s{ display:block; margin:0; padding:0; width:68px; float:left;}
div#contact div.dial_s a{display:block; width:auto;}
div#contact div.dial_s img{width:100%;}
}

@media screen and (max-width:570px){
div#contact div.logo{display:none;}
div#contact div.logo_s{display:block; float:left; width:35%; padding-top:4px;}
div#contact div.logo_s img{width:100%;}
}

@media screen and (max-width:550px){
div#contact a.btn_counseling{line-height:1.4; font-size:18px; height:53px;}
}

@media screen and (max-width:530px){
div#contact div.logo_s{ width:39%; padding:2px 0;}
div#contact div.logo_s img{width:100%; height:auto; vertical-align:middle; display:block;}
}

@media screen and (max-width:440px){
div#contact div.logo_s{ width:44%; padding:0 0 4px;}

div#contact div{vertical-align:middle;}

div#contact div.dial_s{width:55px;}
div#contact div.reserve{ width:65px;}
div#contact div.counseling_s{width:65px;}
}

@media screen and (max-width:363px){
div#contact div.logo_s{ width:43%;}

div#contact div{vertical-align:middle;}

div#contact div.dial_s{width:50px;}
div#contact div.reserve{ width:60px;}
div#contact div.counseling_s{width:60px;}
}

@media screen and (max-width:330px){
div#contact div.logo_s{ width:42%;}

div#contact div{vertical-align:middle;}

div#contact div.dial_s{width:45px;}
div#contact div.reserve{ width:55px;}
div#contact div.counseling_s{width:55px;}
}

@media screen and (max-width:309px){
div#contact div.dial_s{width:40px;}
div#contact div.reserve{ width:50px;}
div#contact div.counseling_s{width:50px;}
}

@media screen and (max-width:275px){
div#contact div.logo_s{ width:38%;}
}


@media print {
div#contact.fixed{position:relative; top:0; transition: .5s; visibility:visible;}
}