@charset "UTF-8";
/* CSS Document */

/* ==================================================
BASE (RESET)
================================================== */
html { box-sizing: border-box; width: 100%; margin: 0; padding: 0; }
*, *::after, *::before { box-sizing: inherit; }
body { position: relative; width: 100%; margin: 0; padding: 0; text-align: center; }
#allWrap { width: 100%; margin: 0 auto; }

h1, h2, h3, h4, h5, h6, p { font-size: 100%; font-weight: inherit; margin: 0; padding: 0; }
ul, ol, dl { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
ol, li { list-style: none; }
dt, dd { font-weight: inherit; font-style: normal; margin: 0; padding: 0; }
table{ border-collapse: collapse; border-spacing: 0; }
th, td { font-size: inherit; font-weight: inherit; font-style: normal; empty-cells: show; }
input, select { vertical-align: middle; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
pre { white-space: pre-wrap; }
em, strong, i, b { font-style: normal; font-weight: inherit; }
figure { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background: transparent; }
img { font-size: 0; line-height: 0; border: 0; vertical-align: bottom; }
img, object, embed, video { max-width: 100%; }
/*レスポンシブ対応*/
img, svg { max-width: 100%; height: auto; }
/* ---------- */
a { font-size: inherit; margin: 0; padding: 0; background: transparent; vertical-align: baseline; }


/* ==================================================
FONT
================================================== */
html { font-size: 62.5%; }

body,
#allWrap {
	font-family: source-han-sans-japanese,sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0;
	color: #000;
	
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt", "liga";
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* iPhoneの文字サイズバグの回避 */
}

/* Adobe Fonts

■源ノ角ゴシック JP Regular
font-family: source-han-sans-japanese,sans-serif;
font-weight: 400;
font-style: normal;

■源ノ角ゴシック JP Bold
font-family: source-han-sans-japanese,sans-serif;
font-weight: 700;
font-style: normal;

■Vinyl OT Regular
font-family: vinyl,sans-serif;
font-weight: 400;
font-style: normal;

*/

.webfontEn { font-family: vinyl,sans-serif; }
.webfontMix { font-family: vinyl,source-han-sans-japanese,sans-serif; }


#allWrap { font-size: 1.6rem; }

/* ==================================================
LINK
================================================== */
a { outline: 0; transition: opacity 0.4s ease-out 0s, color 0.4s ease-out 0s, background-color 0.4s ease-out 0s; }
a:link { text-decoration: none; color: #555; }
a:visited { text-decoration: none; color: #555; }
a:hover { text-decoration: none; color: #555; opacity: 0.75; }
a:active { text-decoration: none; color: #555; }
:focus { outline: 0; }

/* ==================================================
VIEW SWITCH
================================================== */

/* View Switch
------------------------------ */
@media screen and (min-width: 641px) {
.spOnly { display: none !important; }
}

@media screen and (max-width: 640px) {
.pcOnly { display: none !important; }
}


/* ==================================================
PAGE BASE
================================================== */
body {
	min-width: 320px;
	background-color: #face00;
}

#allWrap {
	width: 100%;
	min-width: 320px;
	text-align: center;
	overflow: hidden;
	position: relative;
	animation: intro-fadein 1s ease-in 1s both;
}

@keyframes intro-fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


/* RESET CSS CUSTOM */
i {
	display: inline-block;
}

::before, ::after {
	display: inline-block;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/**/


/*#innerWrap {
	max-width: 800px;
	margin: 0 auto;
}*/

/* ==================================================
GLOBAL NAVIGATION
================================================== */
#navWrap {
	position: fixed;
	width: 100%;
	height: 54px;
	border-bottom: 4px solid #fff;
	z-index: 1000;
}

#navWrap .inner {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-direction: row;
	height: 50px;
}

@media screen and (max-width: 1000px) {
#navWrap .ttl {
	width: calc(100% - 90px);
	background: #000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	height: 50px;
	padding-left: 20px;
}

#navWrap .ttl a {
}

#navWrap .ttl a img {
}

#navWrap .menu {
	width: 90px;
}

#navWrap .menu .trigger {
	width: 90px;
	background: #face00;
	height: 50px;
	border-left: 4px solid #fff;
	position: relative;
}

#navWrap .menu .trigger em {
	position: absolute;
	width: 30px;
	height: 4px;
	background: #000;
	border-radius: 3px;
	top: calc(50% - 2px);
	right: 24px;
	transition: all 0.6s ease-out 0s;
}

#navWrap .menu .trigger em::before,
#navWrap .menu .trigger em::after {
	content: "";
	display: block;
	width: 30px;
	height: 4px;
	background: #000;
	position: absolute;
	border-radius: 3px;
	transition: all 0.4s ease-out 0s;
}

#navWrap .menu .trigger em::before {
	top: -8px;
	right: 0;
	width: 36px;
}

#navWrap .menu .trigger em::after {
	top: 8px;
	right: 0;
	width: 16px;
}

/**/
#navWrap .menu.menuOpen .trigger em {
	background: rgba(0,0,0,0);
	transform: rotate(180deg);
}

#navWrap .menu.menuOpen .trigger em::before,
#navWrap .menu.menuOpen .trigger em::after {
}

#navWrap .menu.menuOpen .trigger em::before {
	top: 0;
	right: 0;
	width: 30px;
	transform: rotate(45deg);
}

#navWrap .menu.menuOpen .trigger em::after {
	top: 0;
	right: 0;
	width: 30px;
	transform: rotate(-45deg);
}
/**/

#navWrap .menu .box {
	width: 280px;
	position: absolute;
	top: 54px;
	right: -300px;
	text-align: right;
	background: #000;
	border-left: 4px solid #fff;
	border-bottom: 4px solid #fff;
	padding: 30px 30px 30px 0;
	transition: all 0.6s ease-out 0s;
}

#navWrap .menu.menuOpen .box {
	right: 0;
}

#navWrap .menu .box ul {
}

#navWrap .menu .box ul li {
}

#navWrap .menu .box ul li:not(:last-child) {
	margin-bottom: 20px;
}

#navWrap .menu .box ul li a {
	color: #fff;
	font-family: vinyl,sans-serif;
	font-size: 2.2rem;
	line-height: 1.2;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

#navWrap .menu .box ul li a:hover {
	color: #face00;
	opacity: 1;
}

#navWrap .menu .box ul li a i {
}

#navWrap .menu .box ul li a span {
	width: 40px;
}

#navWrap .menu .box ul li a span .svgStyle {
	display: block;
	margin-left: auto;
}

#navWrap .menu .box ul li a.comingsoon {
	pointer-events: none;
	opacity: 0.3;
}

#navWrap .menu .box ul li a.comingsoon i {
}

#navWrap .menu .box ul li a.comingsoon span {
}
}


@media screen and (min-width: 1001px) {
	#navWrap {}

	#navWrap .inner {}

	#navWrap .ttl {
		width: 28%;
		background: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
		height: 100%;
		padding: 0 20px;
	}

	#navWrap .ttl a {
	}

	#navWrap .ttl a img {
	}

	#navWrap .menu {
		width: 72%;
		height: 100%;
		background: #face00;
	}

	#navWrap .menu .trigger { display: none; }

	#navWrap .menu .box {
	height: 100%;
	}

	#navWrap .menu .box ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		height: 100%;
	}

	#navWrap .menu .box ul li {
		
	margin: 0 10px;
	}

	#navWrap .menu .box ul li:not(:last-child) {
		
	}

	#navWrap .menu .box ul li a {
		
	color: #000;
	font-family: vinyl,sans-serif;
	font-size: 2.2rem;
	line-height: 1.2;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row-reverse;
		transition: all 0.4s ease-out 0s;
	}

	#navWrap .menu .box ul li a:hover {
		transform: translateY(4px);
	}

	#navWrap .menu .box ul li a i {
		
	}

	#navWrap .menu .box ul li a span {
		
	}

	#navWrap .menu .box ul li a span .svgStyle {
		
	display: block;
	margin-right: 8px;
	transform: translateY(-1px);
	}

	#navWrap .menu .box ul li a.comingsoon {
			pointer-events: none;
	opacity: 0.3;
	}

	#navWrap .menu .box ul li a.comingsoon i {
		
	}

	#navWrap .menu .box ul li a.comingsoon span {
		
	}
}



/* ==================================================
HEADER
================================================== */
#hdrWrap {
	padding: 94px 40px 40px;
	border-bottom: 4px solid #fff;
}

#hdrWrap .inner {
	padding: 30px;
	border: 6px solid #fff;
	max-width: 1600px;
	margin: 0 auto;
}

#hdrWrap .inner .ttl {
}

#hdrWrap .inner .ttl img {
}


/* ==================================================
CONTENTS
================================================== */
#cntWrap {
}

@media screen and (min-width: 901px) {
}


/* ==================================================
GIGYA SHARE
================================================== */
#snsArea {
}

#gigyaShare {
}


/* ==================================================
FOOTER
================================================== */
#ftrWrap {
	line-height: 1.2;
	padding: 35px 20px 30px;
	border-bottom: 2px solid #fff;
}

#ftrWrap .jwaveLogo {
	margin-bottom: 16px;
}

#ftrWrap .jwaveLogo img {
}

#ftrWrap .copyright {
	font-size: 1.4rem;
	font-weight: 700;
}

#ftrWrap .copyright b {
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ==================================================
OTHERS
================================================== */
/* scrollto */
.scrollto {}

/* clrfix */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }

/* iOS フルサイズディスプレイ対応 */
.vfit-cover {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}


/* ==================================================
SVG
================================================== */
.svgStyle {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */
/*
<svg class="svgStyle icon-time"><use xlink:href="/special/live2020/asset/img/common/symbol-defs.svg#icon-time"></use></svg>
<svg class="svgStyle icon-goods"><use xlink:href="/special/live2020/asset/img/common/symbol-defs.svg#icon-goods"></use></svg>
<svg class="svgStyle icon-message"><use xlink:href="/special/live2020/asset/img/common/symbol-defs.svg#icon-message"></use></svg>
<svg class="svgStyle icon-gallery"><use xlink:href="/special/live2020/asset/img/common/symbol-defs.svg#icon-gallery"></use></svg>
<svg class="svgStyle icon-live"><use xlink:href="/special/live2020/asset/img/common/symbol-defs.svg#icon-live"></use></svg>
*/



/*


<!-- #################################################################################################### -->
<!-- ##########　HTML コメントアウト記述ルール　######################################################### -->
<!-- #################################################################################################### -->


<!-- ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ///// メインコンテンツエリア（編集エリア） ///////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->

<!-- //////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->

<!-- ==================== 大ブロックエリア ==================== -->
<!-- ==================== //大ブロックエリア ==================== -->

<!-- ***** 中ブロックエリア *************** -->
<!-- ***** //中ブロックエリア *************** -->

<!-- #ID名 -->
<!-- //#ID名 -->

<!-- .class名 -->
<!-- //.class名 -->

<!-- [memo] -->
<!-- //[memo] -->


<!-- ※※※※※ INCLUDE - HEADER ※※※※※ -->
<!--#include virtual="/common/inc_header.html"-->
<!-- ※※※※※ //INCLUDE - HEADER ※※※※※ -->

<!-- ※※※※※ INCLUDE - FOOTER ※※※※※ -->
<!--#include virtual="/common/inc_footer.html"-->
<!-- ※※※※※ //INCLUDE - FOOTER ※※※※※ -->

<!--
[ id/class Name List ]
wrap > area > group > set > box or block

[ memmo ]
TOPページ → <body class="pageHome">
Newsページ(第2階層) → <body class="pageNews dir2nd">
-->
*/


/* #################################################################################################### */
/* ##########　CSS コメントアウト記述ルール　########################################################## */
/* #################################################################################################### */


/* //////////////////////////////////////////////////////////////////// */
/* ///// ブロック区切り /////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

/* ==================================================
大見出し
================================================== */

/* 中見出し（他、説明など）
------------------------------ */

/* ### 小見出し 1 ### */
/* ### ----- ### */

/* 小見出し 2 */
/* ----- */


/**/