﻿/*

Editor	: C.I.
Version	: 1.0
Since	: 2019-12-25

	[Index]
	header, content, footer

*/
/* reset
--------------------------------------------- */
header a,
header a:link,
header a:visited{text-decoration:none;}
footer a,
footer a:link,
footer a:visited{text-decoration:none;}

header h1,
header h2,
header h1 + h2,
header h3,
header h2 + h3,
header h4,
header h3 + h4,
header h5,
header h6,
header p,
header ul,
header dl,
header table,
header ol,
header figure,
footer h1,
footer h2,
footer h1 + h2,
footer h3,
footer h2 + h3,
footer h4,
footer h3 + h4,
footer h5,
footer h6,
footer p,
footer ul,
footer dl,
footer table,
footer ol,
footer figure,
#breadcrumb ul{
margin-top:0;
}

/* inWrapper
--------------------------------------------- */
/* wrapper */
#inHeader{
width:96%;
margin:0 auto;
}
footer #Copyright,
#TopUnderlinks,
#inFooter,
#inContent,
.inCon,
#breadcrumb ul{
width:70%;
margin:0 auto;
}
.inCon2{
width:50%;
margin:0 auto;
}
#ttlWrap #breadcrumb ul{width:auto;}
#inContent{padding-top:60px;padding-bottom:60px;}
.inCon{position:relative;padding-top:60px;padding-bottom:60px;}
.inConB{background-color:#F5F8F8;}
.inConBB{background-color:#E6F0F0}
#contents > .inCon:first-child{padding-top:20px;}
@media only screen and (max-width: 767px){
    #inContent{padding-top:1em;padding-bottom:60px;}
    #contents > .inCon:first-child{padding-top:1em;}
    .inCon{position:relative;padding-top:4em;padding-bottom:4em;}
}
footer #Copyright,
#inHeader,
#TopUnderlinks,
#inHeader,
#inFooter,
#inContent,
.inCon,
#breadcrumb ul{
max-width:1980px;
margin:0 auto;
}
@media only screen and (max-width: 1250px){
    footer #Copyright,
    #inHeader,
    #TopUnderlinks,
    #content,
    #inFooter,
    #inContent,
    .inCon,
    #breadcrumb ul{
    width:96%;
    margin:0 auto;
    }
}
@media only screen and (max-width: 767px){
    /* wrapper */
    footer #Copyright,
    #inHeader,
    #TopUnderlinks,
    .inCon2,
    #inHeader,
    #content,
    #inFooter,
    #inContent,
    .inCon,
    #breadcrumb ul{
    width:90%;
    margin:0 auto;
    }
    #ttlWrap #breadcrumb ul{width:auto;}
}
/* header
--------------------------------------------- */

header{
border-bottom:solid 4px #222;
padding-bottom:5px;
}
/* header TOP */
header .logo{
float:left;
width:20%;
line-height:1.1;
padding-bottom:0.2em;
}
header .logo span{
font-size:12px;
line-height: 1.1;
padding-bottom:0.2em;
}
header .logo img{width:auto;height:2.5em;}

header .logo span,
header .logo a{display:block;}
header .logo a,
header .logo a:link,
header .logo a:hover,
header .logo a:visited{color:#222;}


header nav #hdSubNav{
float:right;
}
header nav #hdSubNav p{
line-height: 1.1;
margin-left:1em;
font-size: 110%;
vertical-align: middle;
}
header nav #hdSubNav p.navSubTel{
font-size:1.3em;
font-weight: bold;
line-height: 1.4;
text-align: center;
}
header nav #hdSubNav p.navSubTel span{
font-size:12px;
font-weight: normal;
display: block;
}
header nav #hdSubNav p.navSubContact a{
display: inline-block;
background-color:#00D5AF;
padding:1em 3em;
}
header nav #hdSubNav p.navSubContact a:before{
content:"";
display: inline-block;
width: 1.3em;
height:1em;
background:url("/asset/img_cmn/icon_email.png") 0 0 no-repeat;
background-size: auto 100% ;
vertical-align: middle;
margin-left:0.3em;
}
header nav #hdSubNav .navSubTel{font-weight: bold;text-align: center;font-size:1.8em;}
header nav #hdSubNav .navSubTel span{font-size:60%;font-weight: normal;}
header nav #hdSubNav .navSubTel a:before{
content:"";
display: inline-block;
width: 1em;
height:1em;
background:url("/asset/img_cmn/icon_phone.png") 0 0 no-repeat;
background-size: auto 90% ;
vertical-align: middle;
margin-left:0.3em;
}

#inHeader{
padding-top:10px;
}
header nav #Gnav{
float:left;
margin-left:2em;
margin-top:2em;
}
header nav #Gnav li a{position:relative;}



/* following */
header.FixHd{
position: fixed;
width:100%;
background-color:#fff;
z-index: 50;
top:0;
padding-bottom:0;
}
header.FixHd .logo{display: none;}
header.FixHd #hdSubNav p{display: inline-block;}
header.FixHd #Gnav{margin:0;padding:10px;}

header.FixHd #inHeader{padding-top:0;}
@media only screen and (max-width: 1425px){
    header .logo img{width:auto;height:2em;}
}
@media only screen and (max-width: 1334px){
    header{font-size:90%;}
}
@media only screen and (max-width: 1265px){
    header .logo{width:auto;}
}
@media only screen and (max-width: 1192px){
    header .logo{width:15%;}
}
@media only screen and (max-width: 1082px){
    header.FixHd nav #hdSubNav p.navSubContact a{padding:1em 1.5em;}
    header.FixHd nav #hdSubNav p.navSubTel{font-size:1.1em;}   
}
@media only screen and (max-width: 1068px){
    header nav #hdSubNav p.navSubContact a{padding:1em 1.5em;}
    header nav #hdSubNav p.navSubTel{font-size:1.1em;}
}
@media only screen and (max-width: 1024px){
    header .logo img{height:1em;margin-left: 0.5em;}
    header nav #hdSubNav p.navSubContact a{padding:1.2em 1em;}
}
@media only screen and (max-width: 888px){
    header{font-size:80%;}
}
@media only screen and (max-width: 1024px){
    header{font-size:100%;}
    header .logo img{height:0.8em;}
    #inHeader{
    padding-top:0.1em;
    padding-bottom:0.3em;
    }
    header .logo{
    text-align:left;
    }
    header .logo img{
    margin-left:0;
    margin-top:0;
    height:2.5em;
    }
    header nav{
    padding:1em;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:100;
    filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
    }
    header .logo,
    header nav #hdSubNav{
    float:none;
    }
    header .logo{
    width:90%;
    font-size:1em;
    line-height: 1;
    margin-top:0.5em;
    }
    header .logo span{
    font-size:10px;
    }
    header .logo img{height:2em;}
    header.FixHd .logo,
    header.FixHd #hdSubNav{display:block;}
    header.FixHd .logo span{display: none;}

    header nav #Gnav li a:before{
    content:none;
    }
    header nav #hdSubNav p.navSubTel{
    padding-left:0;
    margin-left:0;
    border-left:none;
    display:block;
    }
    header nav #hdSubNav li{padding:0;}
    header nav #hdSubNav p{
    margin-left:0;
    margin-top:5px;
    text-align:center;
    float:none;
    width:100%;
    }
    #hdSubNav{width:100%;display: block;}
}


/* #Gnav
--------------------------------------------- */
header nav #Gnav{padding:1em 0;}
header nav #Gnav li{
display: inline-block;
margin-left:1.5em;
text-align: center;
}
@media only screen and (max-width: 1251px){
    header nav #Gnav li{
    margin-left:1em;
    }
}
@media only screen and (max-width: 1197px){
    header nav #Gnav{padding:0.5em 0;}
}
header nav #Gnav li.current-menu-item a{
position:relative;
}
header nav #Gnav li.current-menu-item a:after{
content:"";
width:2em;
height:1px;
border-top:solid 4px #00D5AF;
position:absolute;
bottom:-0.8em;
left:50%;
margin-left:-1em;
}
header nav #Gnav li:first-child{
margin-left:0;
}
header nav li:last-child:after{
content:none;
}

/* clear */
#inHeader nav:after,
#inHeader:after,
header nav #Gnav ul:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}
header .GnavMenu,
header #SpGnav{display:none;}

@media only screen and (max-width: 1024px){
    .GnavMenu + label{
    dispaly:block;
    width:30px;
    height:30px;
    cursor: pointer;
    }
    .GnavMenu + label{
        background: url(/asset/img_cmn/menu.svg) transparent no-repeat 0 0;
        background-size:100% auto;
    }
    
    header nav {display:none;}
    .GnavMenu:checked + label + nav{display:block;}
    .GnavMenu:checked + label{background-image:none;}
    .GnavMenu:checked + label:before{
        content:"×";
        display:block;
        font-size:4em;
        line-height: 1.1;
    }
    header{position:relative;}
    header #SpGnav{
    display:block;
    position:absolute;
    top:10px;
    right:15px;
    z-index:101;
    font-size:10px;
    }
    header #SpGnav span{
    display:block;
    overflow: hidden;
    text-indent:-500px;
    }
    /* for SP */
    header nav #Gnav{
    float:none;
    margin-top:30px !important;
    margin-left:0 !important;
    padding:10px;
    }
    header nav #Gnav li{
    float:left;
    width:48%;
    text-align: left;
    display: block;
    margin-right: 2%;
    margin-left:0;
    }
    header nav #Gnav li.current-menu-item{
    font-weight: 700;
    }
    header nav #Gnav li a{
    display:block;
    border-bottom: solid 2px #222;
    padding-top:6px;
    padding-bottom:6px;
    vertical-align: middle;
    position:relative;
    }
    header nav #Gnav li.current-menu-item a{
    font-weight: 700;
    border-bottom: solid 2px #00C1D1;
    color:#00C1D1;
    }
    header nav #Gnav li.current-menu-item a:after{
    content: none;
    }
    header nav #Gnav li:after{content:none;}
    header nav #Gnav li a:after{
    content:'>';
    position:absolute;
    right:0;
    top:50%;
    margin-top:-.9rem;
    }
    header nav #Gnav ul li,
    header nav #Gnav ul{background-image:none;}
    header nav #hdSubNav p.navSubTel a{color:#333;}
    header nav #hdSubNav p.navSubContact a{padding:1.3em;display: block;margin-top:0.5em;}
    header nav #Gnav ul{padding-right:0;}
}
@media screen and (min-width: 480px) and (max-device-width: 767px){
    .GnavMenu + label{
    width:25px;
    height:25px;
    }
}
@media only screen and (max-width: 767px){
    header nav #Gnav li{
    float:none;
    width:auto;
    text-align: left;
    display: block;
    margin-left: 0;
    }
}

/* contents
--------------------------------------------- */

#breadcrumb li{
display:inline-block;
margin-left:8px;
}
#breadcrumb li:first-child{
margin-left:0;
}
#breadcrumb li:before{
content:'>';
margin-right:5px;
}
#breadcrumb li:first-child:before{
content:'';
margin-left:0;
}
#breadcrumb{
padding-top:5px;
padding-bottom:7px;
}
.inConHd{
padding-top:4em;
background-image:none;
background-color:#F4F4F5;
padding-bottom:8em;
}
@media only screen and (max-width: 767px){
    .inConHd{
    padding-top:4em;
    padding-bottom:4em;
    }
}
#ttlWrap #breadcrumb{border:none;}

@media only screen and (max-width: 767px){
    #breadcrumb li:last-child{
    display:none;
    }
    #breadcrumb li:after{
    content:none;
    margin-left:0;
    }
    #breadcrumb li:before,
    #breadcrumb li:first-child:before{
    content:'<';
    margin-right:5px;
    }
}

/* wrap */
#sideNav{float:left;width:20%;}
#mainContent{float:right;width:76%;}
#mainWrap:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}
@media only screen and (max-width: 767px){
    #sideNav,
    #mainContent{float:none;width:auto;}
    #sideNav{
    margin-top:2em;
    padding-top:2em;
    border-top:solid 1px #707070;
    }
}

/* #sideNav */
#sideNav li{
margin-bottom:15px;
}
#sideNav ul{
padding-bottom:1em;
border-bottom: solid 1px #C5DDDE;
}
#sideNav nav ul li a:before{
content:"●";
color:#00C1D1;
font-size:10px;
margin-right:10px;
vertical-align: middle;
}

/* pageTop */
#inContent{position:relative;}
#pageTop{
position:fixed;
left:50%;
bottom:3em;
width:40%;
height:1px;
}
@media only screen and (max-width: 767px){
    #pageTop{
        width:45%;
    }
}

#pageTop.FPosi{
position:static;
width:auto;
height:auto;
left:auto;
right:0;
bottom:auto;
top:0;
background-color:#3E4545;
}
@media only screen and (max-width: 767px){
    #pageTop.FPosi{
        bottom:1em;
    }
}
#pageTop a{
float:right;
display:block;
width:2em;
height:2em;
/*text-indent:-500px;
overflow:hidden;*/
background:url(/asset/img_cmn/icon_pagetop.svg) no-repeat 50% 50%;
background-size:auto 80%;
text-decoration: none;
border-bottom:solid 3px #fff;
background-color:#3E4545;
text-indent:0.5em;
}
#pageTop a span{display: none;}
#pageTop.FPosi a span{display: inline;}
#pageTop.FPosi a{width:9em;height:auto;background-position:95% 50%;}
.pageTopW .inCon{
padding-top:0.6em;
padding-bottom: 1em;
position:relative;
}
@media only screen and (max-width: 767px){
    .pageTopW .inCon{
    padding-top:5px;
    padding-bottom: 10px;

    }
}
.pageTopW .inCon:after{
content:"";
display: block;
height:0;
visibility: hidden;
clear: both;
}
.pageTopW{
background-color:#3E4545;
}

/* footer
--------------------------------------------- */
/*footer*/

footer{
padding:1em 0 0 0;
background-color:#323636;
color:#fff;
}
footer a,
footer a:link,
footer a:visited{color:#fff;}

#inFooter .linkBtn{margin-top:1em;}
#inFooter .linkBtn li a{
padding:12px;
color:#222;
}
#inFooter .linkBtn li a:before{
content:"";
display: inline-block;
width: 1em;
height:0.8em;
background:url("/asset/img_cmn/icon_email.png") 0 50% no-repeat;
background-size: 100% auto;
vertical-align: middle;
margin-right:5px;
}
#inFooter .linkBtn li a{
background-image:none;
}
#inFooter{
position:relative;
}
/* float reset */
#inFooter nav li li:before{
content:'-';
margin-right:5px;
}
#inFooter .flogo span.sub{font-size:12px; display: block;}
#inFooter .flogo img{
height:6em;
width: auto;
}
#inFooter .flogo + address{
margin-top:10px;
}
#inFooter .footerTop .col1 strong{/* tel*/
font-size:1.5em;
display: block;
line-height: 1.2;
}
#inFooter .footerTop .col1 strong.TelNum:before{
content:"";
display: inline-block;
background:url("/asset/img_cmn/icon_phone_f.png") 0 50%  no-repeat;
background-size:  100% auto;
width:1em;
height:1em;
vertical-align: middle;
margin-right: 0.5em;
}
#inFooter .footerTop .col1 strong.TelFNum{
font-size:1.2em;
}
#inFooter .footerTop .col1 strong.TelFNum:before{
content:"";
display: inline-block;
background:url("/asset/img_cmn/icon_freed.svg") 0 50%  no-repeat;
background-size: auto 100% ;
width:1.5em;
height:0.8em;
vertical-align: middle;
margin-right: 0.2em;
}
#inFooter .footerTop .col1 .fnotes{font-size:12px;}
#inFooter .footerTop .col1 p{margin-top:5px;}

#inFooter .footerBtm{
margin-top:1.5em;
padding-bottom: 1em;
}
/* .fSitemapSub */
#inFooter .fSitemapSub{
margin-top:4em;
text-align:center;
}

.fSitemapSub li a,
.fSitemapSub li,
.fSitemap ul li a,
.fSitemap ul li{
display: inline-block;
}
.fSitemap ul li{
margin-right: 1em;
}
.fSitemapSub li:before{
content:"/";
display:inline-block;
margin-left: 5px;
margin-right: 5px;
}
.fSitemapSub li:first-child:before{
content:"";
}

footer:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}
footer #Copyright{
text-align: right;
color:#9DABAC;
}
footer #Copyright b{font-weight:normal;}

.pageTopW a{color:#fff;}
@media only screen and (max-width: 1306px){
    #inFooter .fTel{font-size:150%;}
}
@media only screen and (max-width: 1024px){
    #inFooter .fTel{font-size:130%;}
    footer{font-size:80%;}
}
@media only screen and (max-width: 767px){
    #inFooter .fSitemapSub{
    padding:0 0 2rem 0;
    }
    #inFooter .footerTop .col1,
    #inFooter .footerBtm{
    text-align: center;
    }
    #inFooter .footerTop .col1{
    margin-top:2em;
    }
    footer{padding:0.5em 0;}
    #inFooter .flogo{margin-top:1em;}
    #inFooter .fTel{font-size:120%;}
    #fGnav{padding-top:2em;}
    #inFooter .fSitemapSub,
    .flogo,
    #inFooter .flogo + address{text-align: center;}
}
