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

#loader_anim {
	display: none;
}

section {
	position: relative;
	z-index: 0;
	padding: 10rem 0 12rem;
}

#movie-block {
	padding: 10rem 0 0rem;
}

section h2 {
	font-size: 4rem;
	line-height: 1.2;
	text-align: center;
	font-family: "Noto Sans JP", YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "Avenir Next", 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
}

section h2 span {
	display: block;
	font-size: 1.8rem;
	color: #DD3333;
}

section img {
	width: 100%;
}

.download a {
	height: 32px;
	border-radius: 32px;
	line-height: 32px;
	font-size: 1.2rem;
}



/* --------------------------------------------------
#mv
-------------------------------------------------- */

#mv {
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	text-align: center;
}

#mv:before {
	font-family: 'icomoon';
	content: "\e901";
	position: absolute;
	color: #fff;
	z-index: 999;
	font-size: 4.0vw;
	margin-left: -1.5vw;
	left: 50%;
	top:0;
}

#mv header {
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	display:table;
	table-layout:fixed;
	vertical-align:top;
}

.hed-wrap {
	height:100%;
	width: 50%;
	color:#FFF;
	display:table-cell;
	vertical-align: top;
}

.hed-wrap:first-of-type::before{
	content:"";
	background:#DD3333;
	width:50%;
	height:100vw;
	position:absolute;
	left:0;
	top:0;
	background:url(../img/top/bg_header_l.svg) no-repeat right top;
	background-size:100% auto;
}

.hed-wrap:last-of-type::before{
	content:"";
	background:#DD3333;
	width:50%;
	height:100vw;
	position:absolute;
	right:0;
	top:0;
	background:url(../img/top/bg_header_r.svg) no-repeat left top;
	background-size:100% auto;
}

.left-hed {
	position:relative;
	z-index:1;
}

.left-hed h1 {
	position:absolute;
	top:20px;
	left:20px;
}

.right-hed {
	position:relative;
	z-index:1;
}

.right-hed dl{
	position:absolute;
	top:15px;
	width:30%;
	right:15px;
	font-size:0.8vw;
	vertical-align:middle;
	display:inline-block;
}

.right-hed dt{
	vertical-align:middle;
	text-align:center;
}

.right-hed dt span {
	display: block;
	font-size: 3rem;
}

.right-hed dl dd{
	width:80%;
}
.right-hed dl dd ul li{
	margin-bottom:5px;
	width:50%;
}

.right-hed dl dd ul li a{
	width:100%;
	color:#FFF;
	display:block;
}



/* -----  @media screen and (max-width: 1280px)  ------ */

@media screen and (max-width: 1280px) {
	
	.right-hed dl dd{
		width:70%;
	}
	.right-hed dl dd ul li{
		width:100%;
	}
}


/* -----  @media screen and (max-width: 800px)  ------ */

@media screen and (max-width: 800px) {
	
	
	/* --------------------------------------------------
	#mv
	-------------------------------------------------- */
	
	#mv:before {
		content: normal;
	}

	.hed-wrap {
		height:100%;
		width: 100%;
		color:#FFF;
		display:block;
		background:#DD3333;
	}
	
	.hed-wrap:first-of-type::before{
		content:none;
	}
	.hed-wrap:last-of-type::before{
		content:none;
	}
	
	.left-hed {
		position:relative;
		z-index:1;
		padding:20px 20px 0 20px;
	}
	
	.left-hed h1 {
		position: relative;
		top:auto;
		left:auto;
		width:300px;
		max-width:400px;
		height:auto;
		margin:0 auto;
	}
	
	.right-hed {
		position:relative;
		z-index:1;
	}
	
	.right-hed dl{
		position: relative;
		width:100%;
		margin:0 auto;
		right:auto;
		top:auto;
		font-size:2vw;
		vertical-align:middle;
		display:block;
	}
	
	.right-hed dt{
		vertical-align:middle;
		text-align:center;
	}
	
	.right-hed dl dd{
		vertical-align:middle;
		text-align:center;
		width:100%;
	}
	
	.right-hed dl dd ul li{
		vertical-align:middle;
		display:inline-block;
		text-align:center;
		margin-bottom:5px;
		width:50%;
	}
	
	.right-hed dl dd ul li a{
		width:100%;
		color:#FFF;
		display:block;
	}

}

/* -----  @media screen and (max-width: 600px)  ------ */

@media screen and (max-width: 600px) {
	
	.right-hed dt span {
		font-size: 2.4rem;
	}

	.right-hed dl{
		font-size: 11px;
	}
}

/* guide-wrap */
.sp-buttons {
	position: absolute !important;
	bottom: 20px;
	right: 60px;
	z-index: 1;
	width: auto !important;
}

/* guide-wrap */
#mv .guide-wrap {
	position: absolute;
	bottom: 14%;
	left: 50%;
	margin-top: -155px;
	margin-left: -130px;
	text-align: center;
}

#mv .about {
	margin-bottom: 40px;
	position:relative;
	display: table;
}

#mv .about a {
	display: table-cell;
	vertical-align: middle;
	width: 260px;
	height: 220px;
	font-size: 3.1rem;
	font-weight: 500;
	text-decoration: underline;
	background: #fff;
	color: #DD3333;
	font-family: "Noto Sans JP", YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "Avenir Next", 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
	padding: 100px 12px 12px 12px;
	line-height: 1.2;
}

#mv .about a::after,
#mv .about a::before,
#mv .about a span::after,
#mv .about a span::before {
  background-color: #DD3333;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
#mv .about a::after {
    height: 4px;
    left: -4px;
    top: -4px;
    width: 0px;
}
/* 右下へ配置 */
#mv .about a::before {
  bottom: -4px;
  height: 4px;
  right: -4px;
  width: 0px;
}
/* 左下へ配置 */
#mv .about a span::after {
  bottom: -4px;
  height: 0px;
  left: -4px;
  width: 4px;
}
/* 右下へ配置 */
#mv .about a span::before {
  height: 0px;
  right: -4px;
  top: -4px;
  width: 4px;
}

/* hover */
#mv .about a:hover::after,
#mv .about a:hover::before {
  width: 100%;
  width: calc(100% + 4px);
}
#mv .about a:hover span::after,
#mv .about a:hover span::before {
  height: 100%;
  height: calc(100% + 4px);
}

#mv .about.icon-fan:before {
	display: block;
	font-size: 6rem;
	color: #DD3333;
	text-decoration: none;
	position: absolute;
	top: 40px;
	left: 50%;
	margin-left: -40px;
}

#mv .guide-wrap a {
	width: 260px;
}

#mv .guide-wrap .icon-fan {
	padding: 0;
}

/* pageDown */
.pageDown {
	left: 50%;
	margin-left: -24px;
	position: absolute;
	bottom: 80px;
	z-index: 9999;
}

.pageDown a {
	color: #fff;
}
.pageDown a span {
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	box-sizing: border-box;
	height: 24px;
	left: 50%;
	margin-left: -12px;
	margin-top: 16px;
	position: absolute;
	top: 0;
	transform: rotate(-45deg);
	width: 24px;
}



/* --------------------------------------------------
#info
-------------------------------------------------- */

#info {
	overflow: hidden;
}

#info:before {
	content: " ";
	background: url(../img/top/bg-mark01.svg) no-repeat;
	width:24vw;
	height:24vw;
	position:absolute;
	left: -100px;
	top: -50px;
	background-size:100% 100%;
	z-index: -1;
}
#info:after {
	content: " ";
	background: url(../img/top/bg-mark02.svg) no-repeat;
	width:24vw;
	height:24vw;
	position:absolute;
	right: -100px;
	bottom: 50px;
	background-size:100% 100%;
	z-index: -1;
}
#info .download {
	margin: 0 0 80px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#info .download a {
	width: 80%;
	height: 60px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
  justify-content: center;
	font-size: 2.3rem;
	border-radius: 60px;
	line-height: 1;
}

#info nav {
	text-align: center;
	margin-bottom: 15rem;
}

#info nav ul {
	text-align: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#info nav ul li {
	width: 23%;
	margin-bottom: 30px;
	background: #DD3333;
	position: relative;
}

#info nav ul li a {
	display: block;
	color: #fff;
	padding: 20px 10px 30px;
	font-size: 2.2rem;
	height: 100%;
	line-height: 1.3;
}

#info nav ul li a:after {
	display: block;
	content: "\f107";
	font-family: FontAwesome;
	position: absolute;
	bottom: -4px;
	left: 50%;
	margin-left: -0.8rem;
}

#info .inner-in {
	max-width :1280px;
	margin: 3.6rem auto 0;
	border: 4px solid #DD3333;
	padding: 4.8rem 4rem;
}

#info .inner-in ul {
}

#info .inner-in ul li {
	margin-bottom: 1.8rem;
}

#info .inner-in ul li dl dt {
	background: #666;
	display: inline-block;
	color: #fff;
	margin-bottom: 8px;
	padding: 0 12px;
}

#info .inner-in ul li dl dd a{
	font-size: 1.8rem;
	text-decoration: underline;
}

#info .btn {
	text-align: center;
}

#info .btn a {
	padding: 0 30px;
}



/* --------------------------------------------------
guide-category
-------------------------------------------------- */

.guide-category .guide-wrap,
.guide-procession .guide-wrap{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.guide-wrap ul {
	width: 100%;
}

.guide-wrap li {
	padding: 20px 20px 100px;
}

.guide-wrap .guide-box .pht {
	position: relative;
}

.guide-wrap .guide-box figure {
	overflow: hidden;
	padding-top: 69.7%;
	position: relative;
	text-align: center;
	width: 100%;
}

.guide-wrap .guide-box figure img {
	position: absolute;
	top: -200%;
	bottom: -200%;
	left: -200%;
	right: -200%;
	margin: auto;
	width: auto;
	height: auto;
	max-width:120%;
	max-height:200%;
	transition: transform .4s linear;
}

.guide-category .guide-box {
	width: 50%;
	display: table;
}

.guide-category .pht,
.guide-category .detail {
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	
}

.guide-category figure{
	padding-right: 4%;
}

.guide-category .detail {
	text-align: right;
	width: 44%;
	padding-left: 20px;
}

audio {
	width: 100%;
}

.guide-category .detail h3 {
	font-size: 2rem;
	text-align: left;
	margin-bottom: 1.2rem;
	line-height: 1.2;
}

.guide-box h3 .icon-fan:before {
	color: #666;
}

.detail .btn {
	margin-top: 1.2rem;
}

.guide-category .guide-wrap, .guide-procession .guide-wrap {
	margin-top: 24px;
	padding-top: 12px;
}



/* --------------------------------------------------
guide-procession
-------------------------------------------------- */

.guide-procession {
	background: #F3BCB0;
}

.guide-procession .guide-box {
	width: 25%;
}

.guide-procession .guide-box h3 {
	font-size: 1.8rem;
	line-height: 1.2;
	padding: 1.2rem 0;
}

.guide-procession .guide-box h3 span:nth-of-type(2) {
	font-size: 80%;
}

.guide-procession .guide-box figure {
	position: relative;
}

.guide-procession .guide-box figure .btn {
	position: absolute ;
	right: 10px;
	bottom: 5px;
}

.guide-procession .guide-box .detail .btn {
	display: none;
}

.guide-category .guide-wrap,
.guide-procession .guide-wrap {
}

	/* -----  @media screen and (max-width: 1440px)  ------ */

	@media screen and (max-width: 1440px) {

	}



	/* -----  @media screen and (max-width: 1280px)  ------ */

	@media screen and (max-width: 1280px) {


	}




	/* -----  @media screen and (max-width: 1024px)  ------ */

	@media screen and (max-width: 1024px) {


	}



	/* -----  @media screen and (max-width: 960px)  ------ */

	@media screen and (max-width: 960px) {


	}



	/* -----  @media screen and (max-width: 800px)  ------ */
	
	@media screen and (max-width: 800px) {

	/* --------------------------------------------------
	#mv
	-------------------------------------------------- */

	#mv .guide-wrap {
		left: 50%;
		margin-left: -110px;
		margin-top: -155px;
		position: absolute;
		text-align: center;
		bottom: 14%;
	}
	
	#mv .guide-wrap a {
		width: 220px;
	}
	
	#mv .about a {
		width: 220px;
		height: 186px;
		font-size: 2.4rem;
		}
	
	section {
		padding: 2.4rem 0;
	}
	
	#movie-block {
		padding: 2.4rem 0 0;
	}

	section h2 {
		font-size: 2.8rem;
		border: 4px solid #666;
		padding: 8px;
	}
	
	section h2 span {
		font-size: 1.5rem;
	}
	


/* --------------------------------------------------
guide-category
-------------------------------------------------- */

	.guide-wrap {
	}
	
	.guide-wrap li {
		padding: 20px 0px 100px;
	}
	
	.guide-wrap .guide-box .pht {
	}
	
	.guide-category .guide-box {
		width: 100%;
	}
	
	.guide-procession .guide-box {
		position: relative;
		width: 100%;
		display: table;
	}
	
	.guide-box .pht,
	.guide-box .detail {
		vertical-align: middle;
		display: table-cell;
		
	}
	
	.guide-box figure{
	}
	
	.guide-box .detail {
		text-align: right;
		width: 50%;
		padding-left: 12px;
	}
	
	.guide-box .detail h3 {
		font-size: 2rem;
		text-align: left;
		margin-bottom: 1.2rem;
		line-height: 1.2;
	}
	
	.guide-box h3 .icon-fan:before {
		color: #666;
	}
	
	.guide-procession .guide-box figure .btn {
		display: none;
	}
	
	.guide-procession .guide-box .detail .btn {
		display: block;
	}
	
	.guide-procession .guide-box h3 {
		padding: 0;
	}
	
	
	
	/* --------------------------------------------------
	#info
	-------------------------------------------------- */
	
	#info {
		margin-bottom: 80px;
	}
	
	#info nav {
		margin-bottom: 6rem;
		text-align: center;
	}
	
	#info .download {
		margin: 0 0 80px;
	}
	
	#info .download a {
		border-radius: 60px;
		font-size: 1.8rem;
		width: 100%;
	}
	
	#info nav ul li a {
		font-size: 1.7rem;
	}
	
	#info .inner-in ul li dl dd a{
		font-size: 1.5rem;
	}
	
	
	
	/* --------------------------------------------------
	guide-procession
	-------------------------------------------------- */
	
	.guide-procession {
		background: none;
	}
	
	.guide-category h2,
	.guide-procession h2 {
		cursor:pointer;
		position: relative;
	}
	.guide-category h2:after,
	.guide-procession h2:after{
		content: "↓";
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		margin-top: -20px;
	}
	.guide-category h2.open:after,
	.guide-procession h2.open:after{
		content: "↑";
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		margin-top: -20px;
	}
	
	.guide-category .guide-wrap,
	.guide-procession .guide-wrap {
		display: none;
	}
	
	
	
	/* --------------------------------------------------
	footer
	-------------------------------------------------- */
	
	footer {
	}


	}



	/* -----  @media screen and (max-width: 768px)  ------ */
	
	@media screen and (max-width: 768px) {


	}



	/* -----  @media screen and (max-width: 680px)  ------ */
	
	@media screen and (max-width: 680px) {

/* --------------------------------------------------
contents
-------------------------------------------------- */

	.icon-new {
		font-size: 2rem;
	}
	
	section h2 {
		font-size: 1.8rem;
	}
	
	section h2 span {
		font-size: 1.2rem;
	}


	/* --------------------------------------------------
	#mv
	-------------------------------------------------- */

	#mv::before {
		content: normal;
	}



	/* --------------------------------------------------
	guide-category
	-------------------------------------------------- */
	
.guide-box .detail h3 {
	font-size: 1.6rem;
	text-align: left;
	margin-bottom: 1.2rem;
	line-height: 1.2;
}

	
	/* --------------------------------------------------
	guide-procession
	-------------------------------------------------- */
	
	.guide-category h2:after,
	.guide-procession h2:after{
		content: "↓";
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		margin-top: -12px;
	}
	.guide-category h2.open:after,
	.guide-procession h2.open:after{
		content: "↑";
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		margin-top: -12px;
	}



/* --------------------------------------------------
#info
-------------------------------------------------- */

	#info:before {
		content: normal;
	}
	#info:after {
		content: normal;
	}
	#info .download a {
		font-size: 1.5rem;
	}
	#info nav ul {
		display: flex;
		justify-content: space-between;
		text-align: center;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	#info nav ul li {
		margin-bottom: 20px;
		width: 48%;
	}
	#info nav ul li:nth-child(2n) {
		margin-right: 0;
	}
	#info nav ul li a {
		font-size: 1.5rem;
	}
	#info .inner-in {
		max-width :1280px;
		padding: 2.4rem 1.4rem;
	}
	#info .inner-in ul li dl dt {
		font-size: 1.2rem;
	}
	#info .inner-in ul li dl dd a{
		font-size: 1.4rem;
	}



	}



	/* -----  @media screen and (max-width: 600px)  ------ */
	
	@media screen and (max-width: 600px) {
	
	
	}



	/* -----  @media screen and (max-width: 420px)  ------ */
	
	@media screen and (max-width: 420px) {

	section h2 {
		font-size: 1.7rem;
	}
	
	section h2 span {
		font-size: 1.1rem;
	}

	.download a {
		font-size: 1.1rem;
	}

	.guide-box figure, .guide-box .detail {
		display: block;
	}

	.guide-box .detail {
		width: 100%;
	}

	.guide-box .detail h3 {
		font-size: 1.5rem;
		margin: 1.2rem 0;
	}

	.sp-buttons {
		bottom: 10px;
		position: absolute;
		right: 50%;
		margin-right: -54px;
		width: auto;
		z-index: 1;
	}

	.sp-button {
		height: 10px !important;
		width: 10px !important;
	}



/* --------------------------------------------------
#mv
-------------------------------------------------- */

	#mv .guide-wrap {
		left: 50%;
		margin-left: -110px;
		margin-top: -155px;
		position: absolute;
		text-align: center;
		bottom: 20%;
	}
	

	/* pageDown */
	.pageDown {
		left: 50%;
		margin-left: -17px;
		position: absolute;
		bottom: 80px;
		z-index: 9999;
	}

	.pageDown a span {
		top: -6px;
	}


/* --------------------------------------------------
guide-category
-------------------------------------------------- */

.guide-wrap {
}

.guide-wrap .guide-box .pht {
}

.guide-category .guide-box {
	width: 100%;
}

.guide-procession .guide-box {
	position: relative;
	width: 100%;
}

.guide-box .pht,
.guide-box .detail {
	vertical-align: middle;
	display: block;
	width: 100%;
	
}

.guide-box figure{
}

.guide-box .detail {
	text-align: right;
	padding-left: 0;
}

	}



	/* -----  @media screen and (max-width: 384px)  ------ */
	
	@media screen and (max-width: 384px) {


	}



	/* -----  @media screen and (max-width: 384px)  ------ */
	
	@media screen and (max-width: 384px) {

	}



	/* -----  @media screen and (max-width: 736px)  ------ */

	@media screen and (min-width: 568px) and (max-width: 736px) {

	}



	/* -----  @media screen and (min-width: 1280px)  ------ */

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

#info nav ul li a:hover:after {
	display: block;
	content: "\f107";
	font-family: FontAwesome;
	position: absolute;
	bottom: -6px;
	left: 50%;
	margin-left: -0.8rem;
}

	}





#movie-block div{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

#movie-block div iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}