/*

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,
#inFooter,
#inContent,
.inCon,
.inContactBnr,
#breadcrumb ul,
#indexttlWrap,
header nav #inNav{
width:80%;
margin:0 auto !important;
}
.inConMin{
width:80%;
margin:0 auto !important;
}
#ttlWrap #breadcrumb ul{width:auto;}
.inCon,
#inHeader{position:relative}
#inContent{padding-top:40px;padding-bottom:60px;}
@media only screen and (max-width: 767px){
}
#inHeader,
#inFooter,
#inContent,
.inCon,
.inContactBnr,
#indexttlWrap,
#breadcrumb ul,
header nav #inNav{
max-width:1400px;
}
@media only screen and (max-width: 1300px){
    /* wrapper */
    #inHeader,
    #inFooter,
    #inContent,
    .inCon,
    .inContactBnr,
    #breadcrumb ul,
    #indexttlWrap,
    header nav #inNav{
    width:90%;
    margin:0 auto;
    }
    #ttlWrap #breadcrumb ul{width:auto;}
    .inConMin{
    width:80%;
    margin:0 auto !important;
    }
}
@media only screen and (max-width: 1100px){
    /* wrapper */
    #inHeader,
    #inFooter,
    #inContent,
    .inCon,
    .inContactBnr,
    #breadcrumb ul,
    #indexttlWrap,
    header nav #inNav{
    width:94%;
    margin:0 auto;
    }
    #ttlWrap #breadcrumb ul{width:auto;}
    .inConMin{
    width:80%;
    margin:0 auto !important;
    }
}
@media only screen and (max-width: 767px){
    /* wrapper */
    #inHeader,
    #inFooter,
    #inContent,
    .inCon,
    .inContactBnr,
    #indexttlWrap,
    #breadcrumb ul,
    header #inNav{
    width:90%;
    margin:0 auto;
    }
    #ttlWrap #breadcrumb ul{width:auto;}
    .inConMin{
    width:90%;
    margin:0 auto !important;
    }
}
/* header
--------------------------------------------- */
#headWrap{
position:relative;
overflow:hidden;
}
.works #headWrap,
.category-works #headWrap{
height:70vh;
}
@media only screen and (max-width: 1332px){
    .works #headWrap,
    .category-works #headWrap{
    height:50vh;
    }
}
@media only screen and (max-width: 960px){
    .works #headWrap,
    .category-works #headWrap{
    height:40vh;
    }
}
@media only screen and (max-width: 910px){
    .works #headWrap,
    .category-works #headWrap{
    height:50vh
    }
}
/* header TOP */
header .logo{
float:left;
width:40%;
line-height:1.1;
padding-bottom:0.5em;
position:relative;
z-index:2;
}
header .logo a,
header .logo a:link,
header .logo a:hover,
header .logo a:visited{color:#2A684C;}

#inHeader{
padding-top:0.5em;
padding-bottom:0.5em;
}

header nav #Gnav li a{position:relative;}


/* following */
/*header.FixHd{
position: fixed;
width:100%;
background-color:#fff;
z-index: 50;
border-bottom:solid 1px #707070;
}
header.FixHd .logo,
header.FixHd #hdSubNav{display:none;}
header.FixHd #inHeader{padding-top:0;}*/



/* #Gnav
--------------------------------------------- */
header nav #Gnav{margin:3em 0;}

header nav{
animation: SlideIn 0.6s alternate;
opacity: 0.8;

}
header nav #inNav{
display: table;
vertical-align: middle;
padding:0 2em;
}
header nav #Gnav{
vertical-align: middle;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 0.8;
    transform: translateX(0);
  }
}
header nav #Gnav ul li span{
margin-left:1em;
}
header nav #Gnav ul li.current a{
color:#ccc;
}
header nav #Gnav ul li.current a span{
opacity: 1;
}
header nav #Gnav ul ul li{
display: inline-block;
}
header nav #Gnav ul ul{padding-left:1em;}
header nav #Gnav ul ul li:after{
content:"/";
margin-left: 1em;
margin-right: 1em;
}
header nav #Gnav ul.navSub{
margin-top:3em;
}
header nav #Gnav li{
margin-top:5px;
}
/* clear */
#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;}

/* open menu */
.GnavMenu + label{
dispaly:block;
width:5em;
height:5em;
cursor: pointer;
background: url(/asset/img_cmn/menu.svg) transparent no-repeat 50% 50%;
background-size:82% auto;
}
header.FixHd #SpGnav{
background-color:#fff;
border-radius: 100px;
background-size:50% auto;
margin-top:0;
}
header nav{
position:fixed;
top:0;
right:0;
bottom:0;
background-color:#2F4899;
z-index:100;
filter:alpha(opacity=96);
-moz-opacity: 0.96;
opacity: 0.96;
height:100vh;
width:100%;
color:#fff;
}
header nav a,
header nav a:link,
header nav a:visited{
color:#fff;
}

header nav {display:none;}
.GnavMenu:checked + label + nav{display:table;}
.GnavMenu:checked + label{background:none;background-color:transparent !important;}
.GnavMenu:checked + label:before{
    content:"×";
    display:block;
    font-size:4em;
    line-height: 1.1;
    color:#fff;
}
header{position:relative;}
header #SpGnav{
display:block;
/*position:fixed;*/
position:absolute;
top:50%;
right:15px;
z-index:101;
font-size:10px;
margin-top:-2em;
}
    
@media only screen and (max-width: 1024px){
    header.FixHd #inHeader{width:50%;}
    header.FixHd #SpGnav,
    header #SpGnav{
    top:15px;
    right:15px;
    }
}
header #SpGnav span{
display:block;
overflow: hidden;
text-indent:-500px;
}
header nav #Gnav li span{opacity: 0;margin-right:1em;}
#Gnav li a:hover span{
margin-right:1em;
}
header nav #Gnav li a:hover span{
animation: fadeIn 1s ease 0s 1 alternate;
opacity: 1;
}
@keyframes fadeIn { /*animetion-nameで設定した値を書く*/
0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}

.FixHd #inHeader{position:fixed;left:50%;width:40%;z-index:100;}
.FixHd #inHeader .logo{display:none;}

@media only screen and (max-width: 1024px){
    .GnavMenu + label{
    background-size:60% auto;
    }
    header #SpGnav{
    margin-top:0;
    }
}
@media only screen and (max-width: 767px){
    header #SpGnav{right:0;margin-top:-1em;}
    .FixHd #SpGnav{right:13px;}
    .GnavMenu + label{
    dispaly:block;
    width:3.5em;
    height:3.5em;
    cursor: pointer;
    }
    header .logo,
    header nav #hdSubNav{
    float:none;
    }
    header .logo{
    width:80%;
    font-size:1em;
    line-height: 1;
    margin-top:0;
    }
    header.FixHd #inHeader{width:49%;}
    header.FixHd .logo,
    header.FixHd #hdSubNav{display:block;}
    header nav #inNav{padding:0 1.5em;}

    .FixHd header #SpGnav{
    top:15px;
    }

}

/* 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;
}

#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{
margin-left:1em;
}

/* pageTop */
#inContent{position:relative;}
#pageTop{
position:fixed;
left:50%;
bottom:1em;
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.under{
margin-top:8em;
}
.lnav ul{display: table;width:100%;}
.lnav li{display:table-cell;width:16.5%;margin-top:0.5em;}
.lnav li a{
display:block;
padding:10px 0;
text-align:center;
border-right:solid 1px #707070;
line-height: 1.3;
}
.lnav li:first-child a{
border-left:solid 1px #707070;
}


.lnav li.current a{
background-color:#EAEDF5;
}

.lnav li:first-child{margin-left:0;}

.lnav ul:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}
@media only screen and (max-width: 1024px){
    .lnav.under{
    margin-top:4em;
    }
    .lnav ul{display: block;font-size:90%;}
    .lnav li{display:inline-block;width:32%;}
    .lnav li:nth-child(3n+1) a{
    border-left:solid 1px #707070;
    }
}

/* footer
--------------------------------------------- */
/*footer*/
footer a, footer a:link,footer a:hover, footer a:visited{color:#000;}
footer{
padding:30px 0 10px 0;
color:#000;
}
.fSitemap li{
display:inline-block;
margin-left:1em;
margin-right: 1em;
}
.fSitemap li:first-child{
margin-left:0;
}
.fSitemap li span{
margin-left:1em;
font-size:80%;
opacity: 0;
}
.fSitemap li a:hover span{
animation: fadeIn 1s ease 0s 1 alternate;
opacity: 1;
}
@keyframes fadeIn { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}

footer .companyName{
margin-top:2em;
}

/* .footRight */
#inFooter .footLeft{
width:38%;
float:left;
}
.footRight{
width:60%;
float:right;
text-align:right;
}

#inFooter nav ul:after{
content:'';
visibility: hidden;
display: block;
height:0;
line-height:1;
clear:both;
}

#inFooter .fsns img{
width:auto;
}
#inFooter .fsns dt,
#inFooter .fsns dd{display:inline-block;}
#inFooter .fsns dt{margin-right:1em;}
#inFooter .fsns dd img{margin-right:0.5em;}
#inFooter p.flogo{
width:80%;
}
.footRight{
text-align:right;
}

footer #Copyright{clear:both;padding-top:2em;}
footer #Copyright b{font-weight:normal;}



@media only screen and (max-width: 1024px){
    #inFooter .footLeft,
    #inFooter .footRight{
    width:auto;
    float:none;
    }
    #inFooter .footRight{margin-top:1em;}
}

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

    .fSitemap{
    text-align: left;
    }
    .fSitemap li{
    margin-right: 1em;
    margin-left: 0;
    }
    .fSitemap li a{
    font-size:12px;
    }
}