@charset "utf-8";

/* CSS Document */

* { margin:0; padding:0;} 
html { margin-bottom:0px; height:100%; overflow-y:scroll; }
body{padding:0px;margin:0px;outline:none;font-family: "Noto Sans JP", sans-serif !important;}
img {border:none;max-width:100%;width:auto;}


#pagebody{text-align:center;overflow:hidden;width:100%;
}
article{max-width:980px;margin:0 auto;width:100%;}

#pagebody header{background:#000;}

header{position:relative;}
header picture{opacity:0.4;transition:4s;}
header h1{position:absolute;z-index:2;
left:0;top:50%;width:100%;height:50px;
margin-top:-25px;
}




#pagebody footer{background:#000;}
#pagebody footer{background:#000;}

article{width:100%;}


section{opacity:0;transition:4s;}
section{opacity:1;}


.sctBox{font:300 2vw / 1 'Noto Sans jp';padding:2em;}
.sctBox p{line-height:2;margin:0 auto;padding:1em 0;text-align:left;}
.sctBox h2{font-size:1.5em;margin:0 auto;padding:2em 0;text-align:center;letter-spacing:2px;}
.sctBox h2 span{display:inline-block;box-shadow:0 2px 0;padding-bottom:0.5em;}

.sctBox h3{font-size:1.2em;padding:2em 0;text-align:center;letter-spacing:2px;
display:inline-block;box-shadow:0 2px 0;padding-bottom:0.5em;}

#sct01,
#sct04{background:#eee;}
#sct06{background:#000;color:#fff;}
#sct01{padding:4em 2em}


#sct02 div{box-sizing:border-box;width:88vw;margin:0 auto;
padding:2vw 0;
}

#sct04 ul{display:block;letter-spacing:-1em;
box-sizing:border-box;
padding:1em;}

#sct04 ul>li{display:inline-block;
letter-spacing:1px;width:50%;
box-sizing:border-box;vertical-align:top;
padding:1em;background:#fff;
box-shadow:0 0 0 1em #eee inset;}

#sct04 ul>li picture{display:block;padding-top:2em;}
#sct04 ul>li p{text-align:center;padding-top:0;}

#sct03>div{padding:2em 0em;}
#sct03>div>a{display:block;position:relative;margin:0 0.5em;text-decoration:none;color:inherit;}

#sct03>div>a>p{display:block;position:absolute;z-index:1;color:#fff;
font-size:1.2em;padding:0;
margin-top:-1em;top:50%;letter-spacing:2px;
margin-left:2em;
}



#sct03>div>a>p span{display:block;margin-top:0em;
font-size:0.75em;line-height:1em;}


#sct03>div>a{overflow:hidden;color:#fff;}
#sct03>div>a::after{content:'';display:inline-block;
position:absolute;width:1em;height:1em;line-height:1;
box-shadow:-2px 2px 0 0 inset;top:50%;
right:1em;margin-top:-0.5em;
transform:rotate(45deg);
transition:0.2s;
}

#sct03>div>a img{transition:0.4s;}
#sct03>div>a:hover img{transform:scale(1.05);}
#sct03>div>a:hover::after{
font-size:0.7em;
}



#sct03>div>a picture{display:block;font-size:0;}

@media screen and (min-width: 1000px) {
nav li a{font-size:20px;padding:10px;}

.sctBox{font-size:20px}

#sct02 div{width:880px}


}

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

.sctBox{font-size:14px}
#sct04>ul>li{width:100%;letter-spacing:2px;}
}