@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
visibility:hidden;
}
.clearfix{ display: inline-block; }
/* Hides from IE Mac */
* html .clearfix{ height: 1%; }
.clearfix{ display:block; }

/* ---------- 初期 ---------- */
body { letter-spacing: 0.01em; font-family: noto-sans-cjk-jp, sans-serif; -webkit-text-size-adjust: 100%;}
img { max-width: 100%;}
a { text-decoration: none;}
strong { font-weight: bold;}
/* ---------- /共通部分 ---------- */
#jougetyuou { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#kadomaru { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
#resbtn { -webkit-appearance: none;}
#gurade { background: -moz-linear-gradient(開始位置, 開始色, 終了色); 
background: -webkit-linear-gradient(開始位置, 開始色, 終了色); 
background: linear-gradient(to 方向, 開始色, 終了色); }
.ancr { position: relative; transition: 0.5s;}
.anca { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10; cursor: pointer;}
.ancr:hover { opacity: 0.75; transition: 0.5s; cursor: pointer;}
/* ---------- /参考タグ部分 ---------- */

.wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}

/* PC */
@media screen and (min-width: 769px) {
	
h1 { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; z-index: 3; width: 22vw;}
h1 a:hover { cursor: pointer;}
h1 img { width: 22vw;}

	figure {

  overflow: hidden;
}
	
	.panel { margin-top: 20px; text-align: center;}
	.panel a {  padding: 10px 20px;
  background: none; font-size: 10px;
  border: none; display: inline-block;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 3px;
		cursor: pointer; color: #fff;}
  .panel a:after, .panel a:before
   { content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 2px solid #fff;
    transition: transform .2s;}
  .panel a:after
   { transform: translate(3px, 3px) ;}
  .panel a:before
   { transform: translate(-3px, -3px);}
  
    .panel a:hover:after, .panel a:hover:before
     { transform: translate(0);}
	
	
	
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}


.logo { position: absolute; left: 2%; top: 2vw; width: 17%; z-index: 3;}
.logo img { width: 100%; height: auto;}

.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  
}
video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.10);
  z-index: 2;
}
}

/* SP */
@media screen and (max-width: 768px) {
	
h1 { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; z-index: 3; width: 52%;}
h1 a:hover { cursor: pointer;}
h1 img { width: 100%; height: auto;}

.logo { position: absolute; left: 4%; top: 4vw; width: 47%; z-index: 3;}
.logo img { width: 100%; height: auto;}

.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  
}
video {
  min-width: 200%;
  min-height: 100vh; position: relative; left: -70vw;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.10);
  z-index: 2;
}
	
	
	
	.panel { margin-top: 20px; text-align: center;}
	.panel a {  padding: 10px 20px;
  background: none; font-size: 10px;
  border: none; display: inline-block;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 3px;
		cursor: pointer; color: #fff;}
  .panel a:after, .panel a:before
   { content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 2px solid #fff;
    transition: transform .2s;}
  .panel a:after
   { transform: translate(3px, 3px) ;}
  .panel a:before
   { transform: translate(-3px, -3px);}
  
    .panel a:hover:after, .panel a:hover:before
     { transform: translate(0);}
	
	
	
}


@keyframes sdl {
  0% {
    transform: scale(0, 1);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scale(0, 1);
    transform-origin: 100% 0;
  }
}

@keyframes swipeRight {
	0% {
    width: 0;
  }
  50% {
    width: 11vw;
  }
  50.1% {
    width: 11vw;
  }
  100% {
    width: 22vw;
  }
}
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-34px);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
	50.1% {
    opacity: 1;
    transform: translateX(0);
  }
	100% {
    opacity: 0;
    transform: translateX(34px);
  }
}