@charset "UTF-8";

#HeaderArea,
#SiteIdentity,
#Footer {
	position: relative;
	z-index: 1;
}

#PageTopBottom {
	display: none!important;
}

#Contents,
.GridSet,
.Grid4 {
	width: auto!important;
	max-width: none!important;
	padding: 0!important;
	margin: 0!important;
}

.Grid4 {
	background: #000000!important;
}

#Contents main {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	min-height: calc( 100vh - 188px )!important;
	padding-top: 50px;
	padding-bottom: 80px;
	padding-left: calc( ( 100vw - 1275px ) / 2 );
	padding-right: calc( ( 100vw - 1275px ) / 2 );
	color: #ffffff;
	background: url(/image/root/bg.png) rgba(0,0,0,0.3) repeat left top / 6px auto;
}
#Contents main.noMesh {
	background: none;
}
@media screen and ( max-width: 767px ) {
	#Contents main {
		min-height: calc( 100vh - 217px )!important;
	}
}


#Contents main a {
	color: #ffffff;
}

#Contents main h1 {
	padding: 0!important;
	margin: 0px 0 40px;
	text-align: center!important;
	color: #ffffff!important;
	font-size: 50px;
	background: rgba(0,0,0,0.3)!important;
	user-select: none;
}
@media screen and ( max-width: 767px ) {
	#Contents main h1 {
		font-size: 30px;
	}
}

#Contents main h2 {
	padding: 0!important;
	margin: 40px 0 20px;
	text-align: center!important;
	color: #ffffff!important;
	font-size: 2em;
	background: rgba(0,0,0,0.3)!important;
	user-select: none;
}
@media screen and ( max-width: 500px ) {
	#Contents main h2 {
		font-size: 1.4em;
	}
}

#Contents main p {
	padding: 0 20px;
	font-size: 24px;
	line-height: 1.2;
}
#Contents main.noMesh.bgtype-bgvideo01 p,
#Contents main.noMesh.bgtype-bgvideo02 p,
#Contents main.noMesh.bgtype-bgvideo05 p,
#Contents main.noMesh.bgtype-bgvideo06 p,
#Contents main.noMesh.bgtype-bgvideo07 p,
#Contents main.noMesh.bgtype-bgvideo08 p {
	background: rgba(0,0,0,0.3)!important;
}
@media screen and ( max-width: 767px ) {
	#Contents main p {
		font-size: 20px;
	}
}

#Contents main nav {
	display: block;
	padding: 30px 15px 0;
}

#Contents main nav a {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: calc( 20% - 10px );
	padding: 10px 0;
	margin: 5px;
	font-size: 1.4em;
	text-decoration: none;
	background: rgba(114,114,114,0.88);
	border-radius: 10px;
	user-select: none;
}
#Contents main nav a:hover {
	background: #B1000E;
}
#Contents main nav a::after {
	content: "";
	position: absolute;
	right: 10px;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border-style: solid;
	border-color: #ffffff;
	border-width: 2px 2px 0 0;
	overflow: hidden;
	transform-origin: center;
	transform: rotate(45deg);
}
@media screen and ( max-width: 1200px ) {
	#Contents main nav a {
		width: calc( 25% - 10px );
	}
}
@media screen and ( max-width: 960px ) {
	#Contents main nav a {
		width: calc( 33.33% - 10px );
	}
}
@media screen and ( max-width: 710px ) {
	#Contents main nav a {
		width: calc( 50% - 10px );
		font-size: 1.4em;
	}
}
@media screen and ( max-width: 500px ) {
	#Contents main nav a {
		font-size: 14px;
		padding: 5px 10px 5px 0;
	}
	#Contents main nav a::after {
		right: 10px;
		width: 7px;
		height: 7px;
	}
}
#Contents main.noMesh.bgtype-bgvideo01 nav a,
#Contents main.noMesh.bgtype-bgvideo02 nav a,
#Contents main.noMesh.bgtype-bgvideo05 nav a,
#Contents main.noMesh.bgtype-bgvideo06 nav a,
#Contents main.noMesh.bgtype-bgvideo07 nav a,
#Contents main.noMesh.bgtype-bgvideo08 nav a {
	background: rgba(0,0,0,0.4);
}


#Contents #bg {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	background: #000000;
	overflow: hidden;
	opacity: 0;
	transition: opacity 5000ms linear;
}

#Contents #bg > * {
	display: none;
}
#Contents #bg[class^="bgtype-bgvideo"] > #bgVideo,
#Contents #bg.bgtype-video > .video-js,
#Contents #bg.bgtype-static > #bgImg,
#Contents #bg.bgtype-slide > #bgImg {
	display: block;
}
#Contents #bg > * {
	position: relative;
	width: 100vw!important;
	height: calc( 100vw * 9 / 16 )!important;
}
@media screen and ( max-aspect-ratio: 16 / 9 ) {
	#Contents #bg > * {
		position: absolute;
		left: calc( 50% - ( 50vh * 16 / 9 ) );
		top: 0;
		width: calc( 100vh * 16 / 9 )!important;
		height: 100vh!important;
	}
}

#Contents #bg .video-js video {
	width: 100%!important;
	height: auto!important;
}


#Contents #bg #bgImg img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}
#Contents #bg.bgtype-static > #bgImg img:nth-child( n + 2 ) {
	display: none;
}

#Contents #bg.bgtype-slide > #bgImg img {
	opacity: 0;
	transition: opacity 1000ms linear;
}


#cookieBoxOverlay {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	display: none;
	justify-content: center;
	align-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	padding: 0 20px;
	background: rgba(0,0,0,0.8);
}
#cookieBoxOverlay.on {
	display: flex;
	animation: ovFadeIn 300ms linear;
}

@keyframes ovFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#cookieBox {
	box-sizing: border-box;
	padding: 20px;
	background: rgba(255,255,255,0.8);
	border-radius: 20px;
}
@media screen and ( max-width: 767px ) {
	#cookieBox {
		padding: 10px;
		border-radius: 10px;
	}
}

#cookieBox_lang {
	display: flex;
	justify-content: center;
}
#cookieBox_lang > span {
	padding: 5px 10px;
	margin: 0 5px;
	border-radius: 5px;
	background: #aaaaaa;
	cursor: pointer;
	opacity: 0.5;
	user-select: none;
	font-size: 16px;
	word-break: keep-all;
	white-space: nowrap;
}
@media screen and ( max-width: 767px ) {
	#cookieBox_lang > span {
		font-size: 12px;
	}
}
@media screen and ( max-width: 374px ) {
	#cookieBox_lang > span {
		padding: 5px;
		margin: 0 3px;
		font-size: 10px;
	}
}

#cookieBox_lang > span:hover {
	opacity: 1;
}

#cookieBox[lang="en"] #cookieBox_lang > span[lang="en"],
#cookieBox[lang="ja"] #cookieBox_lang > span[lang="ja"],
#cookieBox[lang="zh-tw"] #cookieBox_lang > span[lang="zh-tw"],
#cookieBox[lang="zh-cn"] #cookieBox_lang > span[lang="zh-cn"]{
	opacity: 1;
	cursor: default;
}

#cookieBox_summary [lang],
#cookieBox_btn [lang] {
	display: none;
}
#cookieBox[lang="en"] #cookieBox_summary [lang="en"] ,
#cookieBox[lang="ja"] #cookieBox_summary [lang="ja"] ,
#cookieBox[lang="zh-tw"] #cookieBox_summary [lang="zh-tw"] ,
#cookieBox[lang="zh-cn"] #cookieBox_summary [lang="zh-cn"] ,
#cookieBox[lang="en"] #cookieBox_btn [lang="en"],
#cookieBox[lang="ja"] #cookieBox_btn [lang="ja"] ,
#cookieBox[lang="zh-tw"] #cookieBox_btn [lang="zh-tw"],
#cookieBox[lang="zh-cn"] #cookieBox_btn [lang="zh-cn"] {
	display: block;
}

#cookieBox_summary {
	padding: 10px 0;
	font-size: 16px;
}
@media screen and ( max-width: 767px ) {
	#cookieBox_summary {
		font-size: 14px;
	}
}

#cookieBox_btn {
	display: flex;
	justify-content: center;
	user-select: none;
}
#cookieBox_btn > div {
	font-size: 16px;
	padding: 5px 20px;
	margin: 0 5px;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
#cookieBox_btn > div:hover {
	opacity: 0.6;
}
#cookieBox_btn > div#cookieBox_btn-accept {
	background-color: #1C7721;
}
#cookieBox_btn > div#cookieBox_btn-reject {
	background-color: #cc0000;
}

@media screen and (max-width: 994px){
.JS #Contents img, .JS .Contents img, .JS #PopUpContents img, .JS .FatBanner img {
    max-width:initial;
}
}

@media screen and (min-width: 995px) and (max-width: 1304px){

.OptionWideRWD #Contents img, .OptionWideRWD .Contents img, .OptionWideRWD #PopUpContents img, .OptionWideRWD .FatBanner img {
	max-width:initial;
	}
}