@charset "utf-8";




/* -------（リセットCSS）-----------------------------------------------*/ 


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{
margin:0;
padding:0;
}

fieldset,img{
	border:0;
    height: auto;
}
address,caption,cite,code,dfn,em,th,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
p{
text-justify:inter-ideograph;
margin: 0 0 1em 0;
}

header, section, article, footer, article, aside, time ,nav { display: block; }

figure{ line-height:0;}

img {
-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

@charset "utf-8";

*{ box-sizing: border-box;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: 'Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
    font-weight: 500;
	font-size: 16px;
	line-height: 1.5em;
    /*font-feature-settings : "palt";*/ 
	color: #646464;
	background-color: #fff;
	background-size: 100%;
	background-attachment: fixed;
	width: 100%; overflow: hidden;
}

/* key color */
:root {
  --sitekey:#00a0ea;
  --premium:#cba044;
  --regular:#e97643;
}
body.login:before{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/movie_bg.png); background-size: cover; transition: 0s; pointer-events: none; z-index: -1; content: ""; display: block; opacity: 0.6;}

html {overflow-y:scroll; height:100%;}

a {color: #009fe7;text-decoration: none; outline:none; }
a:hover { opacity:0.7;}
a.active{color: #009fe7;}

.pc_only{ display:block;}
.sp_only{ display:none !important;}


@media only screen and (max-width: 768px){
	body { background-image: none; font-feature-settings : "palt"; }
	main.in{ padding: 70px 0 35px;}
	main.loginmain{ padding-top: 60px;}

	.pc_only{ display:none;}
	.sp_only{ display:block !important;}
}



/* =waku
------------------------------------------------------------------------------------------*/
.l-border {pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; }
.l-border__elm {position: absolute; background-color: #fff3d8; }
.l-border__elm--bottom, .l-border__elm--top {height: 0.8vw; right: 0; left: 0; }
.l-border__elm--left, .l-border__elm--right {width: 0.8vw; top: 0; bottom: 0; }
.l-border__elm--top {top: 0; }
.l-border__elm--right {right: 0; }
.l-border__elm--bottom {bottom: 0; }
.l-border__elm--left {left: 0; }



/* =BTN
------------------------------------------------------------------------------------------*/
.btn{ position: relative; display: block; transition: 0.3s; }
.btn a{ display: block; background-color: #fff; padding: 1.2em 1em; color: #00a0e9!important; text-align: center;line-height: 1em; border: 1px solid #00a0e9; }
.btn a:hover{opacity: 1!important;}
.btn:hover{opacity:0.7;}
.arrow{ position:relative;}
.arrow::after {content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 4px; height: 4px; border: 2px solid; border-color: transparent #00a0e9 #00a0e9 transparent; transform: rotate(-45deg ) translate3d(0px, -50%, 0px); transition: 0.3s;}
.arrow.wht::after { border-color: transparent #fff #fff transparent;}
.link-off a{pointer-events: none!important; background-color: #dcdcdc!important; box-shadow: none!important;}
.alertcolor{ color: #c00;}

@media only screen and (max-width: 768px) {
    .btn a{ font-size: 16px; line-height: 1.5em;  padding: 0.7em 0;}
}


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}



/********************** 404 *******************************/
.error_404{ max-width: 470px; width: 94%; margin: 270px auto;}
.error_404 .stit{ font-size: 64px; font-weight: 400; letter-spacing: 0.05em; margin-bottom: 34px; line-height: 1em; text-align: center;}
.error_404 p{ font-size: 14px; line-height: 1.5em; text-align: left;}

@media (max-width: 768px){
	.error_404{ margin: 160px auto;}
	.error_404 .stit{ font-size: 40px; margin-bottom: 24px;}
	.error_404 p{ font-size: 13px; text-align: left;}
}

/* = end
------------------------------------------------------------------------------------------*/
#end{  width: 90%; max-width: 600px; height: 100svh; margin: 0 auto ; display: flex; align-items: center;}
#end .end_block{ width: 100%; margin-bottom: 50px;}
#end h1 { margin-bottom: 40px;}
#end h1 img{ width: 50%;}
#end .endtxt{ font-size: 24px; font-weight: bold; margin-bottom: 60px;}
#end .btn{ margin-bottom: 10px;}

@media (max-width: 768px){
	#end .end_block{ margin-bottom: 0px;}
	#end .endtxt{ font-size: 18px; margin-bottom: 60px;}
}

/* = anime
------------------------------------------------------------------------------------------*/
    @keyframes fade-in {
      0% {display: none;opacity: 0;}
      1% { display: block; opacity: 0; }
      100% {display: block;opacity: 1;}
    }


.play.fade_up {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



.play.fade_r {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.play.fade_down {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.play.fade_l {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeIn {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeI;
 animation-name: fadeIn;
 visibility: visible !important;
}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}