@charset "UTF-8";


/* 共通
------------------------------------------------------------------ */

.container{
max-width:1100px;
height:auto;
margin:0.5em auto;
padding:0.5em;
}

section,
.cont{
height:auto;
margin:1em auto;
padding:10px;
}


.img-box-center{
margin:10px auto;
text-align:center;
}

.img-box-left{
float:left;
margin:0 1em 1em 0;
}

.img-box-right{
float:right;
margin:0 0 1em 1em;
}

.img-box-center img,
.img-box-left img,
.img-box-right img{
display:inline-block;
max-width:100%;
height:auto;
margin:5px;
}


.br-tb{
display:none;
}

.br-pc{
display:none;
}



.top-title{
padding:2px 3px;
background-color:#d3e1f4;
color:#555;
font-size:90%;
font-weight:normal;
text-align:center;
}


mark{
font-weight:700;
}

.marker_yellow{ 
background: -webkit-linear-gradient(transparent 50%, #E2E213 50%);
background:    -moz-linear-gradient(transparent 50%, #E2E213 50%);
background:      -o-linear-gradient(transparent 50%, #E2E213 50%);
background:     -ms-linear-gradient(transparent 50%, #E2E213 50%);
background:         linear-gradient(transparent 50%, #E2E213 50%);
}

.marker_b{ 
background: linear-gradient(transparent 30%, #D0E8FF 30%);
}

.marker_g{ 
background: linear-gradient(transparent 30%, #D1EAB7 30%);
}

.marker_bg{ 
background: linear-gradient(transparent 30%, #CBE7ED 30%);
}

.marker_p{ 
background: linear-gradient(transparent 30%, #F5DCEA 30%);
}

.marker_y{ 
background: linear-gradient(transparent 30%, #FFEEBB 30%);
}



/*レイアウト
----------------------------------------------------*/
#wrapper{
margin:0;
padding:0;
}



/*ヘッダー
----------------------------------------------------*/
header{
position:relative;
z-index:1000;
}

#header_inner{
margin:0 auto;
padding:0 5px;
line-height:1;
}



/*グローバルナビ
----------------------------------------*/
#gnav-base.fixed,
#gnav-base-top.fixed{
position:fixed;
left:0;
top:0;
width:100%;
background-color:rgba(255,255,255,1);
box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
height:100px;
}

#gnav-base,
#gnav-base-top{
position:absolute;
top:0;
left:0;
width:100%;
margin:0 auto;
background-color:rgba(255,255,255,1);
box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
text-align:center;
height:100px;
}

#gnav-base-wrap{
position:relative;
max-width:1120px;
margin:0 auto;	
}




#logo-col{
z-index:2000;
}

#logo-col a{
display:flex;
align-items:center;
height:55px;
}

#logo-col a img{
width:200px;
height:auto;
margin:0 auto;
}


.sp-nav{
list-style-type:none;
text-align:center;
z-index:50;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
padding-bottom:5px;
}


.sp-nav li{
flex:30%;
font-size:100%;
}

.sp-nav li a{
display:block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:1em 0.1em;
text-decoration:none;
color:#333;
background-color:#FFF;
}

.sp-nav li:nth-child(1) a,
.sp-nav li:nth-child(4) a{
border-left:none;
}

.sp-nav li a:hover{
background-color:rgba(238,238,238,0.5);
-moz-transition:0.25s linear;
-webkit-transition:0.25s linear;
-o-transition:0.25s linear;
transition:0.25s linear;
}

.sp-nav li a{
-moz-transition:0.25s linear;
-webkit-transition:0.25s linear;
-o-transition:0.25s linear;
transition:0.25s linear;
}


.cl-navi > li{
display:block;
margin:0 5px;
}

.cl-navi > li a{
display:block;
padding:10px;
color:#333;
text-decoration:none;
text-align:center;
background-color:#EBEBEB;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

.cl-navi > li a:hover,
.cl-navi > li.on a{
color:#FFFFFF;
background-color:#91A8D5;
}



/* #call-sp
--------------------*/
#call-sp {
position:absolute;
top:5px;
right:50px;
width:40px;
height:40px;
background-color:#5DB1BA;
text-align:center;
z-index:2000;
}

#call-sp i {
line-height:40px;
font-size:140%;
vertical-align:middle;
}

#call-sp a {
display:block;
width:40px;
height:40px;
color:#FFF;
text-decoration:none;
cursor:pointer
}

#call-sp a.active {
color:#E4E4E4;
}

/* #call-pc
--------------------*/
#call-pc {
display:none;
}



/*フッター
----------------------------------------------------*/
footer{
position:relative;
clear:both;
height:100%;
padding:10px 0;
text-align:center;
background-color:#879acd;
}

footer .container{
position:relative;
padding:10px;
clear:both;
text-align:center;
}


/* foot-navi
---------------------------------------- */
.foot-navi div{
margin-bottom:20px;
}

ul.footer-support{
width:90%;
margin:0 auto;
padding:0 5px;
line-height:1.4;
text-align:left;
}

ul.footer-support li{
border-bottom:rgba(225,255,255,0.3) solid 1px;
}

ul.footer-support li a{
position:relative;
display:block;
padding:10px 10px 10px 25px;
color:#FFF;
text-decoration:none;
}

ul.footer-support li a:before{
position:absolute;
left:10px;
top:12px;
content:'\f0da';
color:#FFCC00;
font-family:'FontAwesome';
line-height:1;
}

ul.footer-support li a:hover {
background-color:rgba(0,0,0,0.3);
}

/* foot-company
---------------------------------------- */

.footer-logo-col{
margin:0 auto;
padding:0 0.5em;
}

.footer-logo-col img{
max-width:280px;
height:auto;
}

.text{
margin:1px auto;
padding:1em;
color:#FFF;
}


.footer-tel a{
color:#FFF !important;
text-decoration:none;
}


/* フッターコピーライト
---------------------------------------- */
.foot-copy{
height:90px;
padding:10px 5px 5px;
font-size:12px;
text-align:center;
background-color:#879acd;
color:#FFF;
margin-bottom:60px;
}


/* return-top
-------------------------------------- */
#return-top {
position:fixed;
display:block;
z-index:10;
right:9px;
bottom:15px;

list-style-type:none;
margin:0;
padding:0;
line-height:1;
text-align:center;

z-index:2000;
}

#return-top li{
display:block;
margin:4px;
}

#return-top a{
display:block;
color:#FFF;
padding:10px 11px;
font-size:12px;
line-height:12px;
background:rgba(51,51,51,0.8);
text-decoration:none;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}

#return-top a i{
margin-bottom:3px;
}

#return-top a:hover{
text-decoration:none;
background:rgba(51,51,51,0.9);
}



/* info-bottom
-------------------------------------------- */
#info-bottom{
width:100%;
display:block;
text-align:center;
position:fixed;
bottom:0;
z-index:1000;
}

.info-bottom-inner{
max-width:800px;
display:flex;
justify-content:center;
margin:0 auto;
text-align:center;
}

.info{
flex:1;
}

.info{
position:relative;
display:block;
max-width:230px;
margin:10px auto;
}

.info a{
position:relative;
display:block;
max-width:230px;
padding:1%;
box-sizing:border-box;
color:#FFF;
font-size:18px;
text-shadow:0 0 4px #00000045;
border:#FFF solid 2px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
text-decoration:none;
}

#contact-quote a{
background-color:#547A83;
}

#contact-quote a span{
display:block;
color:#FF0;
font-size:14px;
}

#contact-quote a:before{
position:absolute;
left:3%;
top:50%;
content:'\f002';
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:140%;
color:#FFFFCC;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translateY(-50%);
}

#contact-quote a:after{
position:absolute;
right:3%;
top:50%;
content:'\f101';
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:140%;
color:#FFFFCC;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translateY(-50%);
}


#contact-quote a:hover{
filter:brightness(90%) contrast(120%);
}


#call-pc{
background-color:#FFF;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}



@media all and  (min-width:700px) {
	
.br-sp{
display:none;
}

.br-tb{
display:block;
}


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


/*グローバルナビ
----------------------------------------*/
#gnav-base.fixed,
#gnav-base-top.fixed{
position:fixed;
left:0;
top:0;
width:100%;
background-color:rgba(255,255,255,1);
box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.1);
height:65px;
}

#gnav-base,
#gnav-base-top{
height:65px;
}

#logo-col{
position:absolute;
top:0;
left:0;
text-align:left;
}

#logo-col a img{
max-width:200px;
height:auto;	
}

#sp-nav-cont{
position:absolute;
top:20px;
right:10px;
width:480px;
}



/* #call-sp
--------------------*/
#call-sp{
display:none;
}
	
/* #call-pc
--------------------*/
#call-pc{
display:block;
}


/*フッター
----------------------------------------------------*/
footer{
height:100%;
}

footer .container{
max-width:1200px;
margin-left:auto;
margin-right:auto;
}


/* foot-navi
----------------------------------------*/
ul.footer-support{
margin:1em auto;
display:inline-block;
*display:inline;
*zoom:1;
border-bottom:none;
}

ul.footer-support li{
display:inline-block;
margin:0 1em !important;
border:none !important;
}

ul.footer-support li:last-child{
border-bottom:none;
}

ul.footer-support li a{
padding:5px 10px;
}

ul.footer-support li a:hover{
background-image:rgba(0,0,0,0.1);
}

ul.footer-support li:last-child a{
border-right:none;
}

ul.footer-support li a:before{
display:none;
}




/* foot-company
----------------------------------------*/
#foot-company{
display:flex;
justify-content:center;
margin-top:50px;
}

#foot-company div{
padding-top:0;
}


.footer-logo-col{
margin:0 10px 0 0;	
}

.text{
margin:0 20px 0 0;
text-align:left;
}

.footer-sns-col{
margin:0 20px0 40px;	
}

.foot-copy{
padding:3em 0;
}


.foot-copy{
flex:0 0 100%;
}


/* return-top
-------------------------------------- */
#return-top {
position:fixed;
left:auto;
right:6px;
bottom:15px;

bottom:150px;
}


/* info-bottom
-------------------------------------------- */

#info-bottom{
background-color:#879acd;
}

.info-bottom-inner{
padding:10px;
justify-content:space-around;
flex-direction:row;
}

.info{
max-width:320px;
}

.info a{
max-width:320px;
font-size:20px;
}

#contact-quote a span{
font-size:16px;
}

}



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

/*ヘッダー
----------------------------------------------------*/
#logo-col a{
height:65px;
}

}



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

	
.br-tb{
display:none;
}

.br-pc{
display:block;
}

/*ヘッダー
----------------------------------------------------*/

#logo-col a img{
max-width:260px;
height:auto;	
}

.gnav li a{
padding:1em 2em;
}


ul.footer-support li{
margin:0 0.2em !important;
}



/* p.copyright
-------------------------------------- */
p.copyright{
position:absolute;
left:0;
bottom:0;
margin:0;
padding:0	
}


}



@media all and (min-width:1100px) {
.gnav li a{
font-size:14px;
}


}

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

#logo-col a{
display:flex;
align-items:center;
height:65px;
max-width:48%;
}

#logo-col a img{
width:340px;
height:auto;
}

.foot-navi div{
padding-left:50px;
}

.foot-navi ul{
display:flex;
justify-content:center;
}


}