@charset "UTF-8";

:root{}

@media (min-width: 768px) {
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
html, body { height: 100%; margin: 0; padding: 0;}
body.opening-page { background-color: #000; color: #fff; overflow: hidden; font-family: 'Noto Sans JP', sans-serif;}
#opening-content { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
#opening-content:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.48); position: absolute; top: 0; left: 0; z-index: 1;}
.opening-visual { text-align: center; position: relative; z-index: 100;}
.opening-logo { width: 240px; opacity: 0; transform: translateY(10px); animation: fadeInUp 1.2s ease forwards; animation-delay: 2s;}
.opening-logo img{ width: 100%; height: auto;}
.skip-opening { display: inline-block; color: rgba(255,255,255,0.72); text-decoration: none; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; position: relative; margin-top: 1.5em;}
.skip-opening { transition: all 0.3s ease; opacity: 0; position: relative; transform: translateY(10px); animation: fadeInUp 1s ease forwards; animation-delay: 4s;}
.skip-opening span{ display: inline-block; padding: 0.24em 0; position: relative;}
.skip-opening span:before{ content: ""; width: 0; height: 1px; background: #FFF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: width 0.3s ease 0s;}
.skip-opening:hover{ color: rgba(255,255,255,1.0);}
.skip-opening:hover span:before{ width: 100%;}
body.opening-page.fade-out { opacity: 0; transition: opacity 1s ease;}
.opening-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out;}
.opening-bg.active { opacity: 1;}
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 767px) {
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
html, body { height: 100%; margin: 0; padding: 0;}
body.opening-page { background-color: #000; color: #fff; overflow: hidden; font-family: 'Noto Sans JP', sans-serif;}
#opening-content { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
#opening-content:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.48); position: absolute; top: 0; left: 0; z-index: 1;}
#custom_menu_icon{ display: none !important;}
.opening-visual { text-align: center; position: relative; z-index: 100;}
.opening-logo { width: 48%; margin: 0px auto; opacity: 0; transform: translateY(10px); animation: fadeInUp 1.2s ease forwards; animation-delay: 2s;}
.opening-logo img{ width: 100%; height: auto;}
.skip-opening { display: inline-block; color: rgba(255,255,255,0.72); text-decoration: none; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; position: relative; margin-top: 1.5em;}
.skip-opening { transition: all 0.3s ease; opacity: 0; position: relative; transform: translateY(10px); animation: fadeInUp 1s ease forwards; animation-delay: 4s;}
.skip-opening span{ display: inline-block; padding: 0.24em 0; position: relative;}
.skip-opening span:before{ content: ""; width: 0; height: 1px; background: #FFF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: width 0.3s ease 0s;}
.skip-opening:hover{ color: rgba(255,255,255,1.0);}
.skip-opening:hover span:before{ width: 100%;}
body.opening-page.fade-out { opacity: 0; transition: opacity 1s ease;}
.opening-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out;}
.opening-bg.active { opacity: 1;}
}


/*=============================================================
	common
=============================================================*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.6em;
	font-family: -apple-system,"Noto Sans JP", BlinkMacSystemFont, "Helvetica Neue", YuGothic, Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-optical-sizing: auto;
	color: #333;
	background: #FFF;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position:relative;
}

a{color: rgba(51,51,51,1.0); text-decoration:underline; transition: all 0.3s ease 0s;}
a:hover{color: rgba(51,51,51,0.64); text-decoration:none;}

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}
input[type="submit"]{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}