@charset "UTF-8";

/*リセット系*/
*{
margin:0;
padding:0;
border:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
img{
vertical-align:bottom;
pointer-events: none;
-ms-interpolation-mode: bicubic;
}
a img{
pointer-events: auto;
width:100%;
}
a:focus, *:focus {
outline:none;
}
html,body {
height: 100%;
}
ol, ul {
list-style-type: none;
}
a{
cursor: pointer;
position: relative;
}
img{
pointer-events: none;
}
a img{
width: 100%;
}
body{
/*font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;*/
font-family: 'Noto Sans JP', sans-serif;
background: rgb(255, 255, 255);
color: rgb(51, 51, 51);
position: relative;
}
.SPhover{
opacity: 0.7;
}
.mincho{
font-family: 'Noto Serif JP', serif;
}
article{
position: relative;
}
.pc,.pcInline{
display: none;
}
.blur{
filter: blur(20px);
/*transform: scale(1.35,1.35);*/
}


#loaderBG{
z-index: 100;
position: fixed;
background: rgb(255, 255, 255);
width: 100vw;
height: 100vh;
}
.spinner{
z-index: 100;
width: 10vw;
height: 10vw;
position: fixed;
border-radius: 100%;
margin: auto;
top: 42.5vh;
}
.spinner:nth-of-type(1){
background-color: rgba(255, 0, 0, 1.0);
animation: sk-scaleout1 1.8s infinite ease-in-out;
left: 45vw;
margin-top: -5vw;
}
.spinner:nth-of-type(2){
background-color: rgba(0, 255, 0, 1.0);
animation: sk-scaleout2 1.8s infinite ease-in-out;
left: 40.5vw;
}
.spinner:nth-of-type(3){
background-color: rgba(0, 0, 255, 1.0);
animation: sk-scaleout3 1.8s infinite ease-in-out;
left: 49.5vw;
}
@keyframes sk-scaleout1 {
  0% {
    transform: scale(0);
    opacity: 1;
  } 50% {
    transform: scale(1.0);
    opacity: 0;
  } 100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes sk-scaleout2 {
  0% {
    transform: scale(0);
    opacity: 1;
  } 10% {
    transform: scale(0);
    opacity: 1;
  } 60% {
    transform: scale(1.0);
    opacity: 0;
  } 100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes sk-scaleout3 {
  0% {
    transform: scale(0);
    opacity: 1;
  } 20% {
    transform: scale(0);
    opacity: 1;
  } 70% {
    transform: scale(1.0);
    opacity: 0;
  } 100% {
    transform: scale(0);
    opacity: 0;
  }
}

nav{
position: fixed;
z-index: 10;
padding: 3vw 4vw 4vw 4vw;
background: rgba(255, 255, 255, 1.0);
width: 94vw;
box-sizing: border-box;
top:0;
left: 3vw;
border-radius: 0 0 4vw 4vw;
}
nav div{
margin: 0;
}
nav div:nth-of-type(1){
font-size: 0;
width: 74vw;
}
nav div:nth-of-type(1) a,
nav div:nth-of-type(1) a img{
width: 100%;
}
nav div:nth-of-type(2) {
display: none;
}
nav div:nth-of-type(3) {
justify-content: flex-end;
}
.menu-trigger {
position: absolute;
width: 6vw;
height: 3vw;
cursor: pointer;
top:3.3vw;
right: 4vw;
background: none;
}
.menu-trigger span {
transition: all .4s;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
height: 1.6vw;
background-color: #f00;
border-radius: 1.4vw;
border: solid 0.5vw #FFF;
}
.menu-trigger span:nth-of-type(1) {
top: 0;
}
.menu-trigger span:nth-of-type(2) {
bottom: 0;
}
button.active span:nth-of-type(1) {
transform: translateY(0.7vw) rotate(-315deg);
}
button.active span:nth-of-type(2) {
transform: translateY(-0.7vw) rotate(315deg);
}
nav div:nth-of-type(4){
position: relative;
width: 80vw;
margin: 4vw auto 2vw auto;
display: block;
text-align: center;
display: none;
}
nav div:nth-of-type(4) a,
nav div:nth-of-type(4) span{
box-sizing: border-box;
display: inline-block;
width: 100%;
margin: 2vw auto;
padding: 4vw;
border-radius: 2vw;
text-decoration: none;
font-size: 3.2vw;
line-height: 1;
font-weight: bold;
}

nav div:nth-of-type(4) a{
background: rgb(255, 51, 51);
color: rgb(255, 255, 255);
}
nav div:nth-of-type(4) span{
background: rgb(233, 233 , 233);
color: rgb(204, 204, 204);
}
#menuBG{
position: fixed;
width: 100vw;
height: 150vh;
top:0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 3;
display: none;
}

footer{
box-sizing: border-box;
background: url("../images/bg_footer.png") top center no-repeat;
background-size: 200%;
padding: 20vw 0 3vw 0;
text-align: center;
margin-top: -30vw;
z-index: 2;
position: relative;
}
footer a{
display: inline-block;
font-size: 3vw;
margin:0 3vw;
color: rgb(51, 51, 51);
text-decoration: none;
}
footer a:nth-of-type(1){
display: block;
width: 40vw;
margin: 0 auto 5vw auto;
}
footer a:nth-of-type(1) img{
width: 100%;
}
footer p{
font-size: 2.4vw;
color: rgb(153, 153, 153);
margin-top: 5vw;
}


/*PC*/
@media screen and (min-width:835px){

.spinner{
width: 3vw;
height: 3vw;
}
.spinner{
top: 46vh;
}
.spinner:nth-of-type(1){
left: 48.5vw;
margin-top: -1.7vw;
}
.spinner:nth-of-type(2){
left: 47vw;
}
.spinner:nth-of-type(3){
left: 50vw;
}

.sp{
display: none;
}
.pc{
display: block;
}
.pcInline{
display: inline;
}

nav{
display: flex;
padding: 1vw 2vw 1.5vw 2vw;
width: 96vw;
left: 2vw;
border-radius: 0 0 1.5vw 1.5vw;
}
nav div:nth-of-type(1){
width: 35vw;
}
nav div:nth-of-type(2) {
display: flex;
justify-content: flex-end;
width: 65vw;
font-size: 1.1vw;
line-height: 1;
margin-top: 0.4vw;
}
nav div:nth-of-type(2) a{
display: inline-block;
position: relative;
color: rgb(51, 51, 51);
text-decoration: none;
margin-left: 2vw;
}
nav div:nth-of-type(2) a.menuEntry{
color: rgb(255, 0, 0);
font-weight: bold;
}
nav div:nth-of-type(2) a:before{
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 1.5px;
background: rgba(255, 0, 0, 0);
transform: scale(0, 1);
transform-origin: center;
transition: 0.3s;
}
nav div:nth-of-type(2) a:hover {
color: rgb(255, 0, 0);
}
nav div:nth-of-type(2) a:hover:before {
transform: scale(1);
background: rgba(255, 0, 0, 1);
}
nav div:nth-of-type(2) span{
display: inline-block;
color: rgb(204, 204, 204);
margin-left: 2vw;
}
nav div:nth-of-type(3),
nav div:nth-of-type(4){
display: none;
}

footer{
background: url("../images/bg_footer.png") top center no-repeat;
background-size: 170%;
padding: 7vw 0 1vw 0;
text-align: center;
margin-top: -20vw;
position: relative;
}
footer a{
display: inline-block;
font-size: 1.0vw;
margin:0 1vw;
color: rgb(51, 51, 51);
text-decoration: none;
}
footer a:nth-of-type(1){
display: block;
width: 15vw;
margin: 0 auto 1.5vw auto;
}
footer a:nth-of-type(1) img{
width: 100%;
}
footer p{
font-size: 0.8vw;
margin-top: 1vw;
}

}

/*PC*/
@media screen and (min-width:1400px){
nav{
padding: 14px 28px 21px 28px;
border-radius: 0 0 21px 21px;
}
nav div:nth-of-type(1){
width: 490px;
}
nav div:nth-of-type(2) {
font-size: 14px;
margin-top: 6px;
}
nav div:nth-of-type(2) a{
margin-left: 28px;
}
nav div:nth-of-type(2) span{
margin-left: 28px;
}

}