@charset "utf-8";
/***************************************************************************************************
	page_top_mv.css
***************************************************************************************************/
/*
*/
#page_top .mv {
  position: absolute;
  left:50%;
  top:0;
  /* width:5000px; */
  translate: -50% 0;
  pointer-events: none;
}
#page_top .mv.show {
  animation:mv_kf_1 3s linear 0s 1 normal forwards;
}
@keyframes mv_kf_1 {
  100% { pointer-events: auto;}
}
#page_top .mv.hide {
  pointer-events: none;
}
/*  */
#page_top .mv .mv_t,
#page_top .mv .mv_b {
  position: absolute;
  left:50%;
  top:0;
  translate: -50% 0;
  height:calc(max(336px, min(576px, 48vh)) - 80px);
  text-align: center;
}
#page_top .mv .mv_t {
  top:110px;
}
#page_top .mv .mv_b {
  top:calc(110px + min(48px, max(28px, 4vh)) + calc(max(336px, min(576px, 48vh)) - 80px));
}
#page_top .mv .mv_t .wrap,
#page_top .mv .mv_b .wrap {
  display: block;
  height:100%;
  white-space: nowrap;
}
#page_top .mv .mv_t .wrap .content,
#page_top .mv .mv_b .wrap .content {
  display: block;
  height:100%;
}
#page_top .mv.anim_start .mv_t.anim_pause .wrap .content,
#page_top .mv.anim_start .mv_b.anim_pause .wrap .content {
  animation-play-state: paused;
}
#page_top .mv .mv_t .wrap .content {
  left:-25%;
}
#page_top .mv .mv_b .wrap .content {
  left:25%;
}
#page_top .mv.anim_start .mv_t .wrap .content {
  /* animation:mv_kf_2_1 100s linear 0s infinite normal both; */
  animation:mv_kf_2_1 165s linear 0s infinite normal both;
}
#page_top .mv.anim_start .mv_b .wrap .content {
  /* animation:mv_kf_2_2 100s linear 0s infinite normal both; */
  animation:mv_kf_2_2 135s linear 0s infinite normal both;
}
@keyframes mv_kf_2_1 {
  0% { left:-25%;}
  100% { left:25%;}
}
@keyframes mv_kf_2_2 {
  0% { left:25%;}
  100% { left:-25%;}
}
#page_top .mv.hide .mv_t .wrap .content {
  left:-25%;
  animation: none;
}
#page_top .mv.hide .mv_b .wrap .content {
  left:25%;
  animation: none;
}
#page_top .mv .deck {
  display: inline-block;
  width:calc(calc(max(336px, min(576px, 48vh)) - 80px) * .67);
  height: 100%;
}
#page_top .mv .deck.type_l {
  width:calc(calc(max(336px, min(576px, 48vh)) - 80px) * 1);
}
#page_top .mv .mv_t .deck {
  left:calc(calc(max(336px, min(576px, 48vh)) - 80px) * .1);
}
#page_top .mv .mv_b .deck {
  left:calc(calc(max(336px, min(576px, 48vh)) - 80px) * -.1);
}
#page_top .mv .deck::after {
	position: absolute;
	display: block;
	content: '';
  left:-1%;
  top:-1%;
  width: 102%;
  height: 102%;
  transform-origin: 100% 0;
	background-color: #ffffff;
}
#page_top .mv .mv_b .deck::after {
  transform-origin: 0 0;
}
#page_top .mv.show .deck::after {
  scale: 0 1;
  transition:scale 1.2s ease-out 0s;
}
#page_top .mv.hide .deck::after {
  scale: 1 1;
}
/*  */
#page_top .mv .p {
  position: absolute;
  display: block;
  cursor: pointer;
}
#page_top .mv .mv_t .p {
  left:3%;
  top:3%;
  right:3%;
  bottom:3%;
}
#page_top .mv .mv_b .p {
  left:3%;
  top:3%;
  right:3%;
  bottom:3%;
}
#page_top .mv .p .i {
  position: absolute;
  display: block;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#page_top .mv .p .i img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left:50%;
  top:50%;
  translate: -50% -50%;
  object-fit: cover;
}
#page_top .mv .p .t {
  position: absolute;
  display: block;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#page_top .mv .p .t img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left:50%;
  top:50%;
  translate: -50% -50%;
  object-fit: cover;
}
/*  */
/* #page_top .mv .p .glitch {
	position: absolute;
  display: block;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity: 0;
}
#page_top .mv .nm_hover .p .glitch {
  opacity: 1;
  transition:opacity .4s ease-out 0s;
}
#page_top .mv .p .glitch > span {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-position: 50% 59%;
  background-size: cover;
}
#page_top .mv .p .glitch > span:nth-child(1) {
	transform: translateX(-5%);
}
#page_top .mv .nm_hover .p .glitch > span:nth-child(1) {
	animation: glitch_kf_1 2s infinite linear alternate;
}
#page_top .mv .p .glitch > span:nth-child(2) {
	transform: translateX(3%) translateY(3%);
}
#page_top .mv .nm_hover .p .glitch > span:nth-child(2) {
	animation: glitch_kf_2 2.3s -.8s infinite linear alternate;
}
#page_top .mv .p .glitch > span:nth-child(3) {
	transform: translateX(5%);
}
#page_top .mv .nm_hover .p .glitch > span:nth-child(3) {
	animation: glitch_kf_3 1s infinite linear;
}
@keyframes glitch_kf_1 {
	0% {clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);}
	10% {clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);}
	20% {clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);}
	30% {clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);}
	40% {clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);}
	50% {clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);}
	60% {clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);}
	70% {clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);}
	80% {clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);}
	90% {clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);}
	100% {clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);}
}
@keyframes glitch_kf_2 {
	0% {clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);}
	15% {clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);}
	25% {clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);}
	30% {clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);}
	45% {clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);}
	50% {clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);}
	65% {clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);}
	75% {clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);}
	80% {clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);}
	95% {clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);}
	100% {clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);}
}
@keyframes glitch_kf_3 {
	0% {opacity: .2;}
	30%, 100% {opacity: 0;}
} */

/*
*/
#page_top .mv_txt_wrap {
  position:absolute;
  width:100%;
  /* max-width:5000px; */
  height:400px;
  left:50%;
  top:calc((min(1200px, max(700px, 100vh)) - 160px) * .5 + 110px);
  translate: -50% -50%;

  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
  mask-position: 50% 50%;
  mask-size: 0 100%;
  mask-repeat: no-repeat;  
}
#page_top .mv_txt_wrap.show {
  mask-size: 100% 100%;
  transition:mask-size .6s ease-out 1s;
}
/*  */
#page_top .mv_txt {
  position: absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
}
#page_top .mv_txt .content {
  display:block;
}
#page_top .show .mv_txt .content {
  animation:mv_txt_kf_1 20s linear 1.5s infinite normal both;
}
@keyframes mv_txt_kf_1 {
  0% { translate:0 0;}
  100% { translate:-100% 0;}
}
#page_top .mv_txt .content img {
  display: block;
  height:calc(min(48px, max(28px, 4vh)) + calc((max(336px, min(576px, 48vh)) - 80px) * .06) * 6.3);
  opacity:0;
}
#page_top .mv_txt .content::before {
	position: absolute;
	display: block;
	content: '';
	width: 10000px;
	height: 100%;
	left:50%;
	top:0;
  translate:-50% 0;
	background-image: url('../images/top_txt_01.svg');
	background-position: 50% 50%;
	background-size: auto 100%;
  background-repeat: repeat-x;
}

/*
*/
#page_top .mv_list {
  display:none;
}
/***************************************************************************************************
  responsive
***************************************************************************************************/
@media screen and (max-width: 1000px) {
/*
*/

#page_top .mv .mv_t,
#page_top .mv .mv_b {
  height:calc(max(288px, min(384px, 48vh)) - 40px);
}
#page_top .mv .mv_t {
  top:55px;
}
#page_top .mv .mv_b {
  top:calc(60px + min(32px, max(24px, 4vh)) + calc(max(288px, min(384px, 48vh)) - 40px));
}
#page_top .mv .deck {
  width:calc(calc(max(288px, min(384px, 48vh)) - 40px) * .67);
}
#page_top .mv .deck.type_l {
  width:calc(calc(max(288px, min(384px, 48vh)) - 40px) * 1);
}
#page_top .mv .mv_t .deck {
  left:calc(calc(max(288px, min(384px, 48vh)) - 40px) * .1);
}
#page_top .mv .mv_b .deck {
  left:calc(calc(max(288px, min(384px, 48vh)) - 40px) * -.1);
}
/*
*/
#page_top .mv_txt_wrap {
  top:calc((min(800px, max(600px, 100vh)) - 80px) * .5 + 55px);
  translate: -50% -50%;
}
/*  */
#page_top .mv_txt {
  left:0;
  translate:0 -49%;
}
#page_top .mv_txt .content img {
  height:calc(min(32px, max(24px, 4vh)) + calc((max(288px, min(384px, 48vh)) - 40px) * .06) * 6.4);
}
#page_top .show .mv_txt .content {
  animation-duration: 12s;
}
/*  */
}