@charset "utf-8";


/**************************************************
	Reset Style
**************************************************/
body {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-height: 420px;
	overflow: hidden;
	background: #131313;
	background: #040305;
	color: #fff;
	text-align: center;
}

h1, h2, h3, h4, h5, h6, p, ul, li, dl {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-style: normal;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,"ＭＳ Ｐゴシック","MS P Gothic","Osaka",sans-serif;
}

ol {
	margin-left: 0;
	padding-left: 0;
}

img {
	border: 0;
	vertical-align: bottom;
	max-width: 100% !important;
}

ul li, ol li {
	list-style-type: none;
	list-style-position: outside;
}

table {
	border:0;
	border-collapse: collapse;
	border-spacing: 0;
}

caption { text-align: left; }

th, td {
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

strong, em {
	font-size: inherit;
	font-weight: normal;
	font-style: normal;
}

a,
a:link,
a:visited {
	color: #376E91;
	text-decoration: underline;
	transition: opacity 0.5s;
}
@media screen and (min-width: 751px) {
	a:hover {
		opacity: 0.5;
	}
}

.typos {
  font-family: 'Kan412Typos', sans-serif !important;
}


/**************************************************
	Teaser Title
**************************************************/
#title {
	position: relative;
	margin: 0 auto;
	width: 1920px;
	vertical-align: top;
}
#title .piece { position: absolute; display: block; opacity: 0;}
#title .piece01 { left: 238px; top: 210px;}
#title .piece17 { left: 1034px; top: 356px;}
#title .piece34 { left: 1606px; top: 482px;}
#title .piece09 { left: 670px; top: 334px;}
#title .piece19 { left: 1242px; top: 211px;}
#title .piece05 { left: 366px; top: 360px;}
#title .piece13 { left: 779px; top: 430px;}
#title .piece26 { left: 1363px; top: 424px;}
#title .piece07 { left: 471px; top: 514px;}
#title .piece22 { left: 1085px; top: 474px;}
#title .piece33 { left: 1647px; top: 430px;}
#title .piece11 { left: 748px; top: 385px;}
#title .piece15 { left: 973px; top: 332px;}
#title .piece12 { left: 757px; top: 359px;}
#title .piece28 { left: 1413px; top: 456px;}
#title .piece16 { left: 963px; top: 407px;}
#title .piece30 { left: 1509px; top: 448px;}
#title .piece03 { left: 219px; top: 396px;}
#title .piece23 { left: 1236px; top: 392px;}
#title .piece24 { left: 1351px; top: 355px;}
#title .piece29 { left: 1498px; top: 434px;}
#title .piece04 { left: 244px; top: 417px;}
#title .piece06 { left: 448px; top: 357px;}
#title .piece25 { left: 1273px; top: 481px;}
#title .piece35 { left: 105px; top: 219px;}
#title .piece14 { left: 738px; top: 482px;}
#title .piece21 { left: 1113px; top: 451px;}
#title .piece31 { left: 1616px; top: 385px;}
#title .piece10 { left: 652px; top: 497px;}
#title .piece32 { left: 1625px; top: 359px;}
#title .piece36 { left: 199px; top: 219px;}
#title .piece08 { left: 574px; top: 332px;}
#title .piece18 { left: 932px; top: 332px;}
#title .piece20 { left: 1085px; top: 321px;}
#title .piece02 { left: 87px; top: 428px;}
#title .piece27 { left: 1508px; top: 330px;}
#title .piece37 { left: 220px; top: 239px;}


/**************************************************
	Height Container
**************************************************/
.container {
	width: 100%;
	max-height: 620px;
	overflow: hidden;
}
.container img {
	width: 100%;
}


/**************************************************
	Teaser catch
**************************************************/
#catch {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 0;
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 4px;
	line-height: 1.8;
	opacity: 0;
}
.en #catch {
	font-weight: normal;
	letter-spacing: 2px;
}

#catch h1 {
	margin-top: 5em;
	font-size: 150%;
}

#catch h2 {
	margin-top: 5em;
	font-size: 115%;
}

#catch p {
	margin: 4em auto 0;
}

#catch .bnr {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1em;
}
#catch .bnr span {
	display: block;
}
#catch .bnr a {
	padding: 0 20px;
	text-align: center;
	vertical-align: middle;
}
#catch .bnr a img {
	object-fit: contain;
	height: 50px;
}
#catch .bnr a.bnr1 img { height: 70px;}
#catch .bnr a.bnr3 img { height: 40px;}
#catch .bnr a.bnr6 img { height: 40px;}
#catch .bnr a.bnr7 img { height: 60px;}
#catch .bnr a.bnr_edmde img { height: 60px;}

@media screen and (max-width: 800px) {
	#catch {
		max-width: 90%;
	}
	#catch .bnr {
		border-spacing: 10px 0;
	}
	#catch .bnr a {
		padding: 15px 0;
	}
}


#catch .bnrs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	margin: 1.25em auto 0;
	max-width: 1200px;
}
#catch .bnrs li {
	margin: 12px 1.7% 30px;
	width: 21.6%;
}
#catch .bnrs li a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 15px;
	width: 100%;
	height: 80px;
	border-radius: 1px;
	background-color: #fff;
}
#catch .bnrs li img {
	object-fit: contain;
	height: 60px;
}
#catch .bnrs li a.bnr_com00 {}
#catch .bnrs li a.bnr_com01 { background-color: #1D2C58;} #catch .bnrs li a.bnr_com01 img { height: 70px}
#catch .bnrs li a.bnr_com02 { background-color: #3E5EA6;} #catch .bnrs li a.bnr_com02 img { height: 56px}
#catch .bnrs li a.bnr_com04 {}
#catch .bnrs li a.bnr_com05 { background-color: #174192}
#catch .bnrs li a.bnr_com06 {} #catch .bnrs li a.bnr_com06 img { height: 46px}
#catch .bnrs li a.bnr_com07 {} #catch .bnrs li a.bnr_com07 img { height: 50px}
#catch .bnrs li a.bnr_com10 {}
#catch .bnrs li a.bnr_com14 {}
#catch .bnrs li a.bnr_com15 {} #catch .bnrs li a.bnr_com15 img { height: 78px}
#catch .bnrs li a.bnr_com16 {}
#catch .bnrs li a.bnr_com17 {}
#catch .bnrs li a.bnr_com18 {}
#catch .bnrs li a.bnr_com19 {} #catch .bnrs li a.bnr_com19 img { height: 33px}
#catch .bnrs li a.bnr_com20 {}
#catch .bnrs li a.bnr_com21 {}
#catch .bnrs li a.bnr_com23 {}
#catch .bnrs li a.bnr_dl01 { background-color: #e60012; padding: 36px;}

.bnr_com05 { pointer-events: none}


#catch h3 {
  margin-top: 2em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: underline;
}
#catch .bnrs.goods {
  justify-content: center;
}
#catch .bnrs.goods li {
  width: 29%;
}
.bnrs dl {
  margin: 0.6em 0 0;
  border-radius: 20px;
  background-color: #223;
}
.bnrs dl dt {
  padding-top: 10px;
  font-size: 90%;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.bnrs dl dd {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto;
  width: 84%;
  height: 200px;
  padding: 10px;
}
#catch .bnrs dl dd img {
  object-fit: contain;
  height: 180px;
}
@media screen and (max-width: 750px) {
	#catch .bnr {
		flex-wrap: wrap;
	}
	#catch .bnr a {
		width: 100%;
	}

	#catch .bnrs li,
	#catch .bnrs.goods li {
		width: 46%;
	}
	.bnrs dl {
		border-radius: 2vw;
	}
}


.movie {
	margin-top: 30px;
}

@media screen and (max-width: 750px) {
	.movie {
		margin-top: 6vw;
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	.movie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
}


/**************************************************
	SNS
**************************************************/
#sns {
	display: flex;
}
@media screen and (min-width: 751px) {
	#sns {
		justify-content: flex-end;
		position: absolute;
		top: 15px;
		right: 0;
		box-sizing: border-box;
		margin-top: 0;
		width: 100%;
		padding: 0 10px;
		text-align: right;
		opacity: 0;
	}
}
@media screen and (max-width: 750px) {
	#sns {
		margin-top: 100px;
		justify-content: center;
	}
}
#sns > div {
	display: inline-block;
	margin-left: 4px;
}
#sns iframe {
	margin: 0 !important;
}
.fb_iframe_widget > span {
	vertical-align: baseline !important;
}
.fb_iframe_widget span {
	height: 20px; z-index: 0; overflow: hidden;
}


/**************************************************
	Teaser Footer
**************************************************/
@media screen and (min-width: 751px) {
	#footer {
		position: relative;
		width: 100%;
		text-align: center;
		opacity: 0;
		margin-top: 100px;
		padding-bottom: 15px;
	}
	#footer p {
		display: inline-block;
		padding: 0 5px;
	}
	#footer img { width: 100%;}
	#footer .logo1 { width: 340px; display: block; margin: 0 auto;}
	#footer .logo2 { width: 180px; padding: 0 20px;}
	#footer .logo3 { width: 320px; padding: 0 20px;}
	#footer .copyright {
		padding-top: 10px;
		font-family: serif;
		font-size: 11px;
		letter-spacing: 1px;
		color: #aaa;
		display: block;
	}
}
@media screen and (max-width: 750px) {
	#footer {
		padding-bottom: 10px;
	}
	#footer .copyright {
		margin-top: 10vw;
		font-size: 2vw;
	}
}


/**************************************************
	Window Size Adjust
**************************************************/
@media screen and (max-width: 960px) {
/*
	#catch {
		margin-top: -40px;
		letter-spacing: 4px;
	}
*/
	.en #catch {
		letter-spacing: 1px;
	}
}
@media screen and (max-width: 820px) {
	#catch .forSP {
		display: block;
	}
}
@media screen and (max-height: 800px) {
/*
	#catch {
		padding-top: 80px;
		font-size: 16px;
	}
*/
	#footer {
		bottom: 10px;
	}
	#footer .logo1 { width: 260px;}
	#footer .logo2 { width: 140px;}
	#footer .logo3 { width: 260px;}
	#footer .copyright {
		font-size: 10px;
	}
}
@media screen and (max-height: 650px) and (min-width: 641px) {
/*
	#catch {
		padding-top: 130px;
		font-size: 16px;
	}
*/
}
@media screen and (max-width: 540px) and (max-height: 520px) {
	#title {
		opacity: 0.3;
	}
}

@media screen and (max-width: 640px) {
	#catch iframe {
		max-width: 100%;
	}
	#title {
		padding-top: 90vw;
	}
}


@media screen and (max-width: 750px) {
	#catch {
		font-size: 2.8vw !important;
	}
}


/**************************************************
	SP
**************************************************/
@media screen and (min-width: 581px) {
	.pcHidden {
		display: none;
	}
}
@media screen and (max-width: 580px) {
	.spHidden {
		display: none;
	}
/*
	#title {
		padding-top: 100px;
	}
*/
	#catch {
/*		margin-top: -80px;*/
		font-size: 16px;
	}
	.en #catch {
		letter-spacing: 0;
		font-size: 0.8em;
	}
/*
	#sns {
		bottom: 220px;
	}
*/
	#footer {
		bottom: 10px;
	}
	#footer p {
		display: block; margin: 0 auto;
	}
	#footer .logo1 { width: 260px;}
	#footer .logo2 { width: 140px; margin-bottom: 15px;}
	#footer .logo3 { width: 260px;}
	#footer img {
		max-width: 90%;
	}
}


/**/
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


/**************************************************
	header & global navigation
**************************************************/
@media screen and (min-width: 751px) {
	header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 100;
		opacity: 0;
	}

	header nav {
		overflow: hidden;
		position: relative;
		margin-top: 15px;
	}
	header nav li {
		display: inline-block;
		position: relative;
	}
	header nav li a {
		display: inline-block;
		box-sizing: border-box;
		width: 100px;
		height: 95px;
		margin-left: 5px;
		margin-right: 5px;
	/*
		font-size: 0.9rem;
		font-weight: bold;
		letter-spacing: 1px;
		text-align: left;
		text-decoration: none;
		color: #000;
	*/
	}
	header nav li a span {
		display: inline-block;
		width: 100px;
		height: 95px;
		overflow: hidden;
		white-space: nowrap;
		text-indent: 100%;
		z-index: 1;
		transition: .5s;
	}
	header nav li.nv1 a span,
	header nav li.nv2 a span,
	header nav li.nv3 a span,
	header nav li.nv4 a span,
	header nav li.nv5 a span,
	header nav li.nv6 a span { background: url(../images/nv_border_on@2x.png) -11px -9px no-repeat; background-size: 124px;}
	header nav li.nv1 a { background: url(../images/nv1.png) left top no-repeat;}
	header nav li.nv2 a { background: url(../images/nv2.png) left top no-repeat;}
	header nav li.nv3 a { background: url(../images/nv3.png) left top no-repeat;}
	header nav li.nv4 a { background: url(../images/nv4.png) left top no-repeat;}
	header nav li.nv5 a { background: url(../images/nv5.png) left top no-repeat;}
	header nav li.nv6 a { background: url(../images/nv6.png) left top no-repeat;}

	header nav li a span {
		opacity: 0;
	}
	header nav li.current a span,
	header nav li a:hover span {
	/*
		-webkit-transform: rotateX(360deg);
		transform: rotateX(360deg);
	*/
		opacity: 1;
	}
	header nav li a:hover {
		opacity: 1;
	}


	header nav li .label,
	header nav li .new {
		display: block;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 38px;
	/*	color: #b97700;*/
		font-family: 'Kan412Typos', sans-serif;
		font-size: 13px;
		text-align: center;
		line-height: 1;
	}
	header nav li .new {
		color: #b97700;
	}
}


@media screen and (max-width: 750px) {
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 10vh;
		background-color: rgba(0,0,0,0);
		z-index: 100;
		transition: background .5s;
	}
	header.active {
		height: 100vh;
		background-color: rgba(0,0,0,0.94);
	}
	header nav {
		position: fixed;
		top: 0;
		left: 100vw;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
	}
	header.active nav {
		left: 0;
		pointer-events: auto;
	}
	header nav ul {
		position: absolute;
		top: 50%;
		width: 100%;
		border-top: 1px solid rgba(255,255,255,0.6);
		transform: translateY(-50%) scaleY(0);
		transition-duration: .3s;
	}
	header.active nav ul {
		transform: translateY(-50%) scaleY(1);
	}
	header nav ul li {
		position: relative;
		font-family: 'Kan412Typos', sans-serif;
	}
	header nav ul li a {
		display: block;
		padding: 1.2em;
		border-bottom: 1px solid rgba(255,255,255,0.6);
		color: #fff !important;
		text-decoration: none !important;
	}
	header nav ul li span.new {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-9em, -50%);
		color: #b97700;
		font-size: 0.7rem;
	}
	
	
	.menu-btn {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 10px;
		right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 1000;
	}

	.menu-btn.active span {
		visibility: hidden;
	}

	.menu-btn.active span::before,
	.menu-btn.active span::after {
		top: 0;
		visibility: visible;
	}

	.menu-btn.active span::before {
		transform: rotate(45deg);
	}

	.menu-btn.active span::after {
		transform: rotate(135deg);
	}

	.menu-btn span {
		width: 20px;
		height: 2px;
		background: #ccc;
		position: relative;
	}

	.menu-btn span::before,
	.menu-btn span::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background: #ccc;
		left: 0;
		transition: 0.3s;
	}

	.menu-btn span::before {
		top: -8px;
	}

	.menu-btn span::after {
		top: 8px;
	}
}


/**************************************************
	Switch
**************************************************/
/*
.info {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	text-align: left;
	position: relative;
}
.info::before {
	content: '';
	width: 100%;
	height: 80%;
	position: absolute;
	top: 10%;
	left: 0;
	background-color: #191919;
	z-index: -1;
}
.info > *:first-child {
	margin-right: 4%;
	width: 25%;
	max-width: 275px;
	text-align: center;
}
.info dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 90%
}
.info dl:not(:first-child) {
	margin-top: 10px;
}
.info dl dt {
	width: 7em;
	font-size: 90%;
	letter-spacing: 0;
}
.info dl dd {
	margin: 0;
	padding: 0;
	width: auto;
}
*/
.info div.pkg {
	margin-top: 20px;
}
.info div.spec {
	display: flex;
	flex-wrap: wrap;
	margin: 30px auto;
	max-width: 630px;
	letter-spacing: 1px;
}
.info div dl {
	display: flex;
	justify-content: flex-start;
	width: 50%;
	text-align: left;
}
.info dl dt {
	width: 7em;
	font-size: 90%;
}
.info dl dd {
	margin: 0;
}

@media screen and (max-width: 750px) {
	.info div.spec {
	}
	.info div.spec dl {
		width: 100%;
	}
	.info dl dt {
		width: 43%;
		text-align: right
	}
}