﻿/*

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 */
/* wrapper */
#inHeader,
#inFooter,
#inContent,
#breadcrumb ul,
#inTtlWrap{
width:80%;
margin:0 auto;
}
#ttlWrap #breadcrumb ul{width:auto;}
#inContent{padding-top:40px;padding-bottom:100px;}
#inContent.TOP{padding-top:1px;}
@media only screen and (max-width: 767px){
    #inContent{padding-top:1px;padding-bottom:60px;}
}
#inHeader,
#inFooter,
#inContent,
#breadcrumb ul,
#inTtlWrap{
max-width:1400px;
}

@media only screen and (max-width: 767px){
    /* wrapper */
    #inHeader,
    #content,
    #inFooter,
    #inContent,
    #breadcrumb ul,
    #inTtlWrap{
    width:90%;
    margin:0 auto;
    }
    #ttlWrap #breadcrumb ul{width:auto;}
}
/* header
--------------------------------------------- */
/*header{
background:url(/asset/img_cmn/header_bg.png) repeat-x 0 0;
background-size:auto 50%;
}

@media only screen and (max-width: 767px){
header{
    background:url(/asset/img_cmn/header_sp_bg.png) repeat-x 0 0 #FEB444;
        background-size:auto 100%;
    }
}*/

/* header TOP */
header .logo{
float:left;
width:16%;
line-height:1.1;
}
header .logo a,
header .logo a:link,
header .logo a:hover,
header .logo a:visited{color:#3366ff;}
header nav #hdSubNav ul,
header nav #hdSubNav ul li,
header nav p{
display:block;
float:left;
}
header nav p {
margin-left:10px;
}
header nav #hdSubNav{
float:right;
}
header nav #hdSubNav ul{
margin-top:1em;
}
header nav #hdSubNav li{
padding:3px 0 2px;
background-size:auto 100%;
background-position:0 50%;
background-repeat: no-repeat;
}
header nav #hdSubNav li a{
display:block;
border-left:solid 1px #707070;
padding:0 1em;
}
header nav #hdSubNav li:first-child a{
border-left:none;
}
header nav #hdSubNav li.navSubLine a:before{
content:" ";
display:inline-block;
margin-right:6px;
margin-bottom:-4px;
width:1.5em;
height:1.5em;
background:url(/asset/img_cmn/icon_line.svg) no-repeat 0 50% transparent;
background-size: auto 100%;
line-height:1.1;
}
header nav #hdSubNav p.hdContact a{
padding:0.6em 1em;
display:block;
border:solid 1px #F30202;
border-radius: 10px;
}

#inHeader{
padding-top:1em;
}
header nav #Gnav{
margin-top:1em;
}
@media only screen and (max-width: 1000px){
    header nav #Gnav li a{
    font-size:0.9em;
    }
}
@media only screen and (max-width: 900px){
    header nav #Gnav li a{
    font-size:0.7em;
    }
}
@media only screen and (max-width: 767px){
    header nav{
    padding:1em;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#ECF5B7;
    z-index:100;
    filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
    }
    header .logo,
    header nav #hdSubNav{
    float:none;
    }
    header .logo{
    width:50%;
    }
    #inHeader{
    padding-bottom:.8em;
    }
    header nav #Gnav li a{
    font-size:1em;
    }
}
header nav #hdSubNav:after,
header nav #hdSubNav ul:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}

/* following */
header.FixHd{
position: fixed;
width:100%;
background-color:#fff;
z-index: 50;
border-bottom:solid 1px #707070;
}

/* #Gnav
--------------------------------------------- */
header nav #Gnav{clear:both;padding:15px 0;}
header nav #Gnav li{
float:left;
width:15%;
text-align:center;

}
header nav #Gnav li:nth-child(1){
float:left;
width:18%;
}
header nav #Gnav li:nth-child(2){
float:left;
width:22%;
}
header nav #Gnav ul,
header nav #Gnav ul li{
/*background:url(/asset/img_cmn/bg_dot.png) repeat-y 0 0;*/
}
header nav #Gnav ul{
background-position: 100% 0;
}
header nav #Gnav li a{
display:block;
border-right:dotted 1px #707070;
}
header nav #Gnav li:first-child a{
border-left:dotted 1px #707070;
}

/* clear */
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: 767px){
    .GnavMenu + label{
    dispaly:block;
    width:9%;
    height:4em;
    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:fixed;
    top:15px;
    right:15px;
    z-index:101;
    font-size:10px;
    }
    header #SpGnav span{
    display:block;
    overflow: hidden;
    text-indent:-500px;
    }
    /* for SP */
    header nav #Gnav{
    border-top:solid 1px #000;
    padding-top:10px;
    }
    header nav #Gnav li{
    float:none !important;
    width:auto !important;
    text-align: left;
    }
    header nav #Gnav li a{
    display:block;
    border-bottom: dotted 1px #000;
    padding-top:6px;
    padding-bottom:6px;
    margin-left:.5em;
    margin-right:.5em;
    vertical-align: middle;
    position:relative;
    }
    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 li:first-child a{
    padding-left:0;
    border-left:none;
    }
    header nav #hdSubNav li:last-child a{
    padding-left:0;
    border-left:none;
    }
    header nav #hdSubNav ul{margin-top:0;padding-bottom:1em;}
    header nav #hdSubNav p.hdContact{float:none;width:90%;clear:both;text-align:center;}
    header nav #hdSubNav p.hdContact a{background-color:#F30202;border-radius:10px;}
    header nav #hdSubNav p.hdContact a,
    header nav #hdSubNav p.hdContact a:link,
    header nav #hdSubNav p.hdContact a:visited{color:#fff;}
    header nav #Gnav li:first-child a{border-left:none;}
    header nav #Gnav li a{border-right:none;}
}
@media screen and (min-width: 480px) and (max-device-width: 767px){
    .GnavMenu + label{
    width:5%;
    height:4em;
    }
}
/* 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;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
}

#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%;}
#sideNav h2{margin-top:1em;}
#mainContent{float:right;width:76%;}
#inContent:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}

/* topLnav */
.topLnav li{width:18.5%;float:left;}
.topLnav li a{
display:block;
margin-left:4%;
border-left:solid 1px #B8B5B5;
text-align:center;
text-decoration:none;
}
@media only screen and (max-width: 767px){
    .topLnav li a{
    font-size:0.8em;
    display:inline-block;
    white-space: nowrap;
    }
}
.topLnav li a,
.topLnav li a:link,
.topLnav li a:visited{color:#707070;}
.topLnav li a:hover{color:#718305;}
.topLnav li.on a,
.topLnav li.on a:link,
.topLnav li.on a:visited,
.topLnav li.on a:hover{color:#718305;}
.topLnav li:first-child a{border:none;}
.topLnav li a:after{
content:" ";
display:inline-block;
margin-left:6px;
margin-bottom:-2px;
width:1.2em;
height:1em;
background:url(/asset/img_cmn/icon_arrow.svg) no-repeat 0 50% transparent;
background-size: auto 100%;
}

.topLnav:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}
@media only screen and (max-width: 767px){
    .topLnav li{width:48%;}
    .topLnav li a{display:inline-block;border-left:solid 1px #B8B5B5 !important;padding-left:0.5em;}
}
/* #sideNav */
#sideNav li{
margin-bottom:15px;
}
#sideNav ul{
margin-left:1em;
}

/* 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:absolute;
width:2.5em;
height:2.5em;
left:auto;
right:0;
}
@media only screen and (max-width: 767px){
    #pageTop.FPosi{
        bottom:1em;
    }
}
#pageTop a{
float:right;
display:block;
width:2.5em;
height:2.5em;
text-indent:-500px;
overflow:hidden;
background:url(/asset/img_cmn/icon_pagetop.svg) no-repeat 0 0;
background-size:99% auto;
}

/* lnav */
.lnav li{width:48%;float:left;border-top:dotted 1px #C55E0F;border-bottom:dotted 1px #C55E0F;}
.lnav li a{display:block;padding:10px 0;text-align:center;}
.lnav li a:after{
content:" ";
display:inline-block;
margin-left:6px;
margin-bottom:-2px;
width:1em;
height:1em;
background:url(/asset/img_cmn/icon_arrow.svg) no-repeat 0 50% transparent;
background-size: auto 100%;
}
.lnav li.current a:after{
content:"";
background:none;
}
.lnav li{margin-left:4%;}
.lnav li:first-child{margin-left:0;}

.lnav ul:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}


/* footer
--------------------------------------------- */
/* trialWrap */
.trialWrap{
border-top:solid 1px #718305;
text-align:center;
padding-top:3em;
padding-bottom:4em;
}

/*footer*/
footer{
padding:30px 0 10px 0;
background-color:#ECF5B7;
}

.footerSns dl,
.footerSns dt,
.footerSns ul,
.footerSns ul li{
display:inline-block;
}
.footerSns address{font-size:0.8em;}
.footerSns{text-align:center;}
.footerSns ul li{margin-left:1em;margin-right:1em;width:2em;}
.footerSns dt img{width:80%;}
.footerSns p{font-size:0.8em;}
#inFooter nav li{
margin-top:10px;
float:left;
width:16.6%;
}


/* float reset */
#inFooter .fSitemapSub li,
#inFooter nav li li{
width:auto;
float: none;
}

/* fSitemap */
#inFooter .fSitemap{
padding-top:1em;
text-align:center;
}

/* .fSitemapSub */
#inFooter .fSitemapSub{
padding:40px 0;
text-align:center;
}
#inFooter .fSitemapSub li{
display:inline-block;
text-align: center;
margin-left:12px;
padding-left:12px;
line-height:1.2;
}
#inFooter .fSitemapSub li:first-child{
margin-left:0;
padding-left:0;
}

.fSitemapSub li{border-left:solid 1px #707070;}
.fSitemapSub li:first-child{border-left:none;}

#inFooter nav ul:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}
footer #Copyright{text-align:center;}
footer #Copyright b{font-weight:normal;}
@media only screen and (max-width: 767px){
    #fGnav .fSitemap{display:none;}
    #inFooter .fSitemapSub{
    padding:0 0 2rem 0;
    }
}
