@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,th,td,pre,code,blockquote,form,fieldset,legend,input,textarea,figcaption,figure{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#FFF}hr{display:none}img{vertical-align:bottom}select,input,button,textarea{font-size:99%}table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}.hd{display:block;width:0;height:0;overflow:hidden}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section,main{display:block}*{margin:0;padding:0;box-sizing:border-box;max-height:999999px;outline:none;}*:focus{outline: none;}button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;}
/*-----------------------------------------------
 * Bace
 * Modal
 * Header
 * Parts
-------------------------------------------------*/
/*-----------------------------------------------
 * Bace
-------------------------------------------------*/
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
body{
	-webkit-text-size-adjust: 100%;
	background-color: #000;
	color: #fff;
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-feature-settings: "palt";
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.07em;
	line-height: 1.8;
	word-wrap: break-word;
}

:root{
	--font-family-eng: 'Roboto Condensed', sans-serif;
	--main-color-red: #d62b40;
}


.f_ro{
	font-family: 'Roboto Condensed', sans-serif;
}
.pc{ display: block; }
.sp{ display: none; }
.ssp{display: none;}
.nsp{display: none;}
a{ color: #222; }
a:hover{ text-decoration: none; }
.ah { transition: opacity .3s ease; }
.ah:hover { opacity: .7; }
::selection{
	background: #6ccfee;
	color: #fff;
}
::-moz-selection{
	background: #6ccfee;
	color:#fff;
}
#fullWrap{
	min-width: 1200px;
	width: 100%;
	position: relative;
}
.sp_movie{
	display: none;
}
@media screen and (max-width:767px){ 
	html{
		font-size: 62.5%;
	}
	body{
		font-size: 10px; 
		font-size: 1rem;
		min-width: 320px;
	}
	.sp{ display: block; }
	.pc{ display: none; }
	.ah:hover { opacity: 1; }
	#fullWrap{min-width: 100%;}
	.sp_movie{display: block;}
}

@media screen and (max-width: 767px) and (min-width: 360px){
	.ssp{
		display: none;
	}
	.nsp{
		display: block;
	}
}
@media screen and (max-width: 359px){
	.ssp{
		display: block;
	}
	.nsp{
		display: none;
	}
}


/* ScrollBar Setting */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #263339;
}
::-webkit-scrollbar-thumb {
	background: #d62b40;
	border-radius: 4px;
	margin: 2px;
	box-shadow: none;
}
html{
	scrollbar-color: #d62b40 #263339;
	scrollbar-width: thin;
}



/***
 * InPage
 **/
.inPage{
	width: 100%;
	position: relative;
}
.inPage .content{
	padding-bottom: 13.3334%;
}
.inPage .contentIn{
	width: 100%;
}
.inPage .contentbg{
	margin-top: 0;
}
.inPage .content{
	padding-top: 0;
}
@media screen and (min-width: 767px){
	.inPage:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 80px;
		background-color: #000;
	}
	.inPage .contentIn{
		min-height: calc(100vh - max(13.3334vw, 160px) - 400px);
	}
}
@media screen and (max-width: 767px){
	.inPage .content {
		padding-bottom: 17.0667%;
	}
}


/*-----------------------------------------------
 * Modal
-------------------------------------------------*/

/**
 * modalBox
 * 基盤のモーダル
 */
.modalBox{
	-webkit-overflow-scrolling: touch;
	background: rgba(0,0,0,85%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.oneModal{
	display: none;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

/* oneModalIn */
.oneModalIn{
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	width: 100%;
	min-width: 1200px;
	min-height: 100%;
	margin: 0 auto;
	position: relative;
}
.oneModalIn__cont{
	padding: 50px 0;
}
@media screen and (max-width:767px){
	.oneModalIn{
		min-width: 100%;
	}
	.oneModalIn__cont{
		width: 100%;
		padding: 30px 0;
	}
}

/**
 * closeBtn
 */
.closeBtn{
	width: 80px;
	height: 80px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
@media screen and (max-width:767px){
	.closeBtn{
		width: 40px;
		height: 40px;
	}
}
.closeBtn a{
	background: url(../img/common/close.svg) no-repeat center / cover;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid #fff;
}

/**
 * iframe
 */
/* common */
.commonIframe{
	width: 100%;
	height: 100%;
	display: block;
}

/* youtube */
.youtubeIframeWrap {
	width: 86.6667%;
	max-width: 159.993vh;
	position: relative;
}
@media screen and (max-width:767px){
	.youtubeIframeWrap {
		width: 100%;
		max-width: 100%;
	}
}
.youtubeIframeWrap:before{
	content: "";
	display: block;
	padding-top: 56.25%;
	z-index: 0;
}
.youtubeIframe{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}


/*-----------------------------------------------
 * Header
-------------------------------------------------*/
.header {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 999;
	transition: opacity .3s ease;
}
@media screen and (max-width:767px){
	.header {
		top: 0;
		bottom: auto;
	}
}
body.is-footer .header{
	opacity: 0;
	pointer-events: none;
}


/* Label */
.contentsHeader{
	width: 100%;
	position: sticky;
	top: 0;
}
.headerlabel{
	width: 100%;
	position: relative;
	padding: 22px 160px 22px 40px;
/*	padding: 2% 13.3334% 2% 3.3334%;*/
	background-color: rgba(0,0,0,80%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header_logo{
	width: 80px;
	padding-top: 36px;
	position: relative;
/*	width: 7.14285%;
	padding-top: 3.2143%;*/
}
.header_logo a{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.header_snsLists{
	display: flex;
	align-items: center;
}
.header_snsTitle{
	font-size: 12px;
	line-height: 1;
	font-family: var(--font-family-eng);
	padding-right: 24px;
}
.header_snsLink{
	width: 20px;
	height: 20px;
}
.header_snsLink:not(:last-child){
	margin-right: 24px;
}
.header_snsLink a{
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: .3s ease;
}
.header_snsLink a:hover{
	background-color: var(--main-color-red);
}

@media screen and (max-width: 767px){
	.headerlabel{
		display: none;
	}
}



/* inner */
.header__inner {
	-webkit-overflow-scrolling: touch;
	width: 100%;
	height: 100%;
	overflow: auto;
	top: 0;
	left: 0;
	padding: 0 0;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transition: opacity .5s ease-in-out;
	position: fixed;
}
.header.is-active .header__inner {
	opacity: 1;
	pointer-events: auto;
}

.header__inner:before {
	content: "";
	background: rgba(0,0,0,1) url(../img/common/bg_nav.jpg) no-repeat right center / cover;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
}

@media screen and (max-width: 767px){
	.header__inner:before {
		background-image: url(../img/common/bg_nav_sp.jpg);
		background-position: center top;
		background-size: 100%;
	}
}

/**
 * header__innerContent
 */
.header__innerContent {
	width: 100%;
	min-height: 100vh;
	position: relative;
	z-index: 1;
	padding: 3.3334% 6.6667% 6.6667%;
}
.header__logo{
	width: 186px;
	padding-top: 80px;
	margin-bottom: 40px;
	position: relative;
}
.header__logo a.logo{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.headerNav{
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding-top: 40px;
}
.header .menuTitle{
	position: absolute;
	top: 0;
	left: -3.8462%;
	width: 7.6923%;
	font-family: var(--font-family-eng);
	font-size: 10px;
	margin-top: 9px;
	line-height: 1;
	display: inline-block;
	text-align: center;
}
.headerNavLists{
	width: 50%;
}
.header .menuList:not(:last-child){
	margin-bottom: 24px;
	line-height: 1;
}
.header .menuList__link{
	font-size: 24px;
	line-height: 1;
	display: inline-block;
	position: relative;
	color: #FFF;
	font-family: var(--font-family-eng);
	text-decoration: none;
	transition: .3s ease-out;
}
.header .menuList__link:before{
	content: '';
	position: absolute;
	bottom: 1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(var(--main-color-red), var(--main-color-red)) right center/0 100% no-repeat;
	transition: background-size .3s ease-out;
}
.header .menuList__link:hover,
.header .menuList__link.is-active{
	color: var(--main-color-red);
}
.header .menuList__link:hover::before {
	background-position: left center;
	background-size: 100% 100%;
}

.headerSNS{
	width: 100%;
	position: relative;
	margin-top: 11.5385%;
	padding-top: 40px;
}
.headerSNSLists{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.headerSNSLists .menuList{
	width: 50%;
}
.headerSNSLists .menuList:nth-last-child(-n+2){
	margin-bottom: 0px;
}

.menu__twi span,
.menu__yt span{
	display: inline-block;
	padding-right: 36px;
	position: relative;
}
.menu__twi span:after,
.menu__yt span:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 20px;
	height: 20px;
	margin: auto 0;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	transition: .3s ease-out;
	background-color: #fff;
}
.menuList__link.menu__twi:hover span:after,
.menuList__link.menu__yt:hover span:after{
	background-color: var(--main-color-red);
}
.menu__twi span:after{
	-webkit-mask-image: url(../img/common/icon_tw.svg);
}
.menu__yt span:after{
	-webkit-mask-image: url(../img/common/icon_yt.svg);
}

@media screen and (max-width: 767px){
	.header__innerContent{
		padding: 72px 6.4% 12.8%;
	}
	.header__logo{
		width: 110px;
		padding-top: 48px;
		margin: 0 auto;
		margin-bottom: 24px;
	}
	.headerNav{
		padding-top: 32px;
	}
	.header .menuTitle{
		left: 0;
		width: 100%;
		margin-top: 0;
		text-align: left;
	}
	.headerNavLists{
		width: 50%;
	}
	.header .menuList{
		width: 100%;
		padding-right: 1em;
	}
	.header .menuList:not(:last-child){
		line-height: 1.25;
		margin-bottom: 24px;
	}
	.header .menuList__link{
		font-size: 1.6rem;
		display: inline;
	}
	.headerSNS{
		margin-top: 180px;
		padding-top: 48px;
	}
	.headerSNSLists .menuList{
		width: 50%;
	}
}



/**
 * navBtn
 */
@media screen and (min-width: 768px){
	.btn_menuWrap{
		width: 120px;
		height: 160px;
		overflow: hidden;
		position: absolute;
		right: 0;
		top: calc(50% - 80px);
		z-index: 2;
	}
	.header__innerContent .btn_menuWrap{
		position: absolute;
		top: -40px;
	}
	.header__navBtn{
		width: 80px;
		height: 80px;
		position: absolute;
		top: calc(50% - 40px);
		right: 0;
		text-decoration: none;
		z-index: 2;
		display: block;
	}
	.header__navBtn__lineWrap{
		width: 32px;
		height: 32px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.header__navBtn--line{
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #FFF;
	}
	.header__navBtn--line:nth-of-type(1){
		top: 0;
	}
	.header__navBtn--line:nth-of-type(2){
		bottom: 0;
	}

	.header__innerContent .header__navBtn--line:nth-of-type(1){
		transform: rotate(45deg);
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.header__innerContent .header__navBtn--line:nth-of-type(2){
		transform: rotate(-45deg);
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.header__navBtn--text{
		font-family: var(--font-family-eng);
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		color: #FFF;
		letter-spacing: 0;
		background-color: #000;
		position: relative;
	}

	.header_navBtn_circle{
		width: 160px;
		height: 160px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.header_navBtn_circle svg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transform: rotate(0deg);
	}
	.header_navBtn_circle circle{
		cx: 80px;
		cy: 80px;
		r: 79px;
	}

	.header_navBtn_circle .circle_bg circle{
		stroke: rgba(255,255,255,40%);
	}
	.header_navBtn_circle .circle_active circle{
		stroke: #FFF;
/*		animation: p_circle-out__navBtn 1s forwards;*/
	}
	a.header__navBtn:hover ~ .header_navBtn_circle .circle_active circle{
		stroke: #FFF;
/*		animation: p_circle__navBtn 1s forwards;*/
	}


}


@media screen and (max-width:767px){
	.header__navBtnWrap {
		width: 48px;
		height: 48px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}
	.header__navBtn {
		background-color: var(--main-color-red);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: relative;
		text-decoration: none;
	}
	.header__navBtn__lineWrap {
		width: 24px;
		height: 24px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.header__navBtn--line {
		background-color: #fff;
		display: block;
		width: 100%;
		height: 1px;
		margin: auto;
		position: absolute;
		transition: .3s ease;
	}
	.header__navBtn--line:nth-child(1) {
		top: 0;
	}
	.header__navBtn--line:nth-child(2) {
		bottom: 0;
	}

	.header__navBtn.is-active{
		background-color: #fff;
	}
	.header__navBtn--text{
		font-family: var(--font-family-eng);
		font-size: 1rem;
		line-height: 1;
		display: inline-block;
		color: #FFF;
		letter-spacing: 0;
		background-color: transparent;
		position: relative;
		transition: .3s ease;
	}
	.header__navBtn--text:before{
		content: 'MENU';
		font-family: var(--font-family-eng);
		font-size: 1rem;
		line-height: 1;
		letter-spacing: 0;
	}

	.header__navBtn.is-active .header__navBtn--line {
		background-color: var(--main-color-red);
		top: 0;
		bottom: 0;
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(1) {
		transform: rotate(45deg);
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(2) {
		transform: rotate(-45deg);
	}

	.header__navBtn.is-active .header__navBtn--text{
		background-color: #fff;
		color: var(--main-color-red);
	}
	.header__navBtn.is-active .header__navBtn--text:before{
		content: 'CLOSE';
	}
}


/*-----------------------------------------------
 * Parts
-------------------------------------------------*/
/**
 * Logo
 */
.logo{
	background: url(../img/common/logo.svg) no-repeat center / contain;
}


/**
 * SVG CIRCLE
 */
.circleWrap{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.circle_bg,.circle_active{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	transform: rotate(-90deg);
}
.circle_bg circle,.circle_active circle{
	fill: transparent;
	stroke-width: 1px;
}


@keyframes p_circle-out__eighty{
	0% {
		stroke-dasharray: 252 252; /*-- 円の直径(80)x3.14 --*/
	}
	100% {
		stroke-dasharray: 0 252;
	}
}
@keyframes p_circle__eighty{
	0% {
		stroke-dasharray: 0 252; /*-- 円の直径(80)x3.14 --*/
	}
	100% {
		stroke-dasharray: 252 252;
	}
}
@keyframes p_circle-out__twentyfour{
	0% {
		stroke-dasharray: 76 76; /*-- 円の直径(24)x3.14 --*/
	}
	100% {
		stroke-dasharray: 0 76;
	}
}
@keyframes p_circle__twentyfour{
	0% {
		stroke-dasharray: 0 76; /*-- 円の直径(24)x3.14 --*/
	}
	100% {
		stroke-dasharray: 76 76;
	}
}

@keyframes p_circle-out__navBtn{
	0% {
		stroke-dasharray: 502 502; /*-- 円の直径(160)x3.14 --*/
	}
	100% {
		stroke-dasharray: 0 502;
	}
}
@keyframes p_circle__navBtn{
	0% {
		stroke-dasharray: 0 502; /*-- 円の直径(160)x3.14 --*/
	}
	100% {
		stroke-dasharray: 502 502;
	}
}

/**
 * Circle ani
 **/
.plink__toTop .circle_active,
.plink__toNext .circle_active,
.plink__toOnair .circle_active{
	stroke-dasharray: 400 400;
	stroke-dashoffset: 0;
/*	animation: ani_circle_a 2s infinite, ani_circle_b 2s infinite;*/
}


@keyframes ani_circle_a {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: -800;
	}
}
@keyframes ani_circle_b {
	from {
		transform: none;
	}
	to {
		transform: rotate(360deg);
	}
}




/**
 * Icon
 */
.icon_yt{
	background: url(../img/common/icon_yt.svg) no-repeat center / contain;
}
.icon_yt-m{
	-webkit-mask: url(../img/common/icon_yt.svg) no-repeat center / contain;
	mask: url(../img/common/icon_yt.svg) no-repeat center / contain;
}
.icon_tw{
	background: url(../img/common/icon_tw.svg) no-repeat center / contain;
}
.icon_tw-m{
	-webkit-mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
	mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
}


/**
 * SHAREWRAP
 */
.shareWrap{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 3.3334%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
}
.shareWrap .shareLists{
	z-index: 5;
}

/**
 * shareLists
 */
.shareLists {
	display: block;
	position: relative;
}

/**
 * ShareTitle
 */
.shareLists__ttl{
	display: block;
	text-align: center;
	font-family: var(--font-family-eng);
	font-size: 12px;
	line-height: 1;
}

/* item */
.shareLists__item {
	width: 20px;
	height: 20px;
	margin: 48px auto;
}
.shareLists__item:nth-of-type(1){
	margin-top: 24px;
}

/* link */
.shareLists__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.shareLists__link:before {
	content: "";
	background-color: #FFF;
	display: block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	transition: background-color .4s ease;
}
.shareLists__link:hover:before {
	background-color: #ff0000;
}

/* 各SNSパーツ */
.shareLists__item.is-twitter .shareLists__link:before {
	width: 26px;
	height: 26px;
	-webkit-mask-image: url(../img/common/icon_tw.svg);
	mask-image: url(../img/common/icon_tw.svg);
}
.shareLists__item.is-facebook .shareLists__link:before {
	width: 26px;
	height: 26px;
	-webkit-mask-image: url(../img/common/icon_fb.svg);
	mask-image: url(../img/common/icon_fb.svg);
}
.shareLists__item.is-line .shareLists__link:before {
	width: 26px;
	height: 26px;
	-webkit-mask-image: url(../img/common/icon_line.svg);
	mask-image: url(../img/common/icon_line.svg);
}


/**
 * contents BG
 */
.contentlinebgWrap{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: -1;
}
.contentsbg__line{
	width: 1px;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: rgba(255,255,255,16%);
}
.contentsbg__line.line_l{
	left: 6.6667%;
}
.contentsbg__line.line_c{
	left: 50%;
	right: 50%;
}
.contentsbg__line.line_r{
	right: 6.6667%;
}
@media screen and (max-width: 767px){
	.contentsbg__line.line_l{
		left: 6.4%;
	}
	.contentsbg__line.line_r{
		right: 6.4%;
	}
}



/**
 * Cursor
 */
.cursor{
	display: flex;
	width: 80px;
	height: 80px;
	position: fixed;
	margin: 0 auto;
	opacity: 0;
	transition: .2s ease;
	z-index: -1;
}
body.is-fullMOV .cursor{
	opacity: 1;
	transform: scale(1);
	z-index: unset;
}
.cursor_active circle{
	stroke: #FFF;
/*	animation: p_circle-out__eighty 0.2s forwards;*/
	animation-delay: 0s;
}
body.is-fullMOV .cursor_active circle{
/*	animation: p_circle__eighty 1s forwards;*/
	animation-delay: .35s;
}
.circle_icon.icon_play{
	width: 18px;
	height: 18px;
	-webkit-mask: url(../img/common/icon_play.svg) no-repeat center / contain;
	mask: url(../img/common/icon_play.svg) no-repeat center / contain;
	position: absolute;
	top: 0;
	left: 6px;
	bottom: 0;
	right: 0;
	margin: auto;
	background-color: #fff;
}
body.is-fullMOV .cursor .circle_icon.icon_yt{
	background-color: var(--main-color-red);
}
@media screen and (max-width: 767px){
	.cursor{
		display: none;
	}
}


/**
 * Movie Circle
 **/
.movie_circle{
	position: absolute;
	width: 80px;
	height: 80px;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
}
.movie_circle .icon_play{
	width: 18px;
	height: 18px;
	-webkit-mask: url(../img/common/icon_play.svg) no-repeat center / contain;
	mask: url(../img/common/icon_play.svg) no-repeat center / contain;
	position: absolute;
	top: 0;
	left: 6px;
	bottom: 0;
	right: 0;
	margin: auto;
	background-color: #fff;
}
.movie_circle .circle_active circle{
	stroke: #FFF;
/*	animation: p_circle-out__eighty 1s forwards;*/
}
.js-youtubePlay:hover .circle_active circle{
/*	animation: p_circle__eighty 1s forwards;*/
}

@media screen and (max-width: 767px){
	.movie_circle{
		width: 60px;
		height: 60px;
		top: calc(50% - 30px);
		left: calc(50% - 30px);
	}
	.movie_circle .icon_play{
		width: 14px;
		height: 14px;
		left: 5px;
	}
}


/**
 * common > Content
 */
.contentsWrap{
	position: relative;
}
.content{
	width: 100%;
	position: relative;
	padding-top: 80px;
	padding-bottom: calc(13.3334% - 80px);
}
.contentIn{
	width: 100%;
	position: relative;
	padding-top: 6.6667%;
	padding-left: 6.6667%;
	padding-right: 6.6667%;
}
@media screen and (max-width: 767px){
	.content{
		padding-top: 0;
		padding-bottom: 12.8%;
	}
	.contentIn{
		padding-top: 12.8%;
		padding-left: 6.4%;
		padding-right: 6.4%;
	}
}


/**
 * common > Content Background
 */

.contentsbg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -2;
}
.contentbg{
	width: 100%;
	height: 320px;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 80px;
	pointer-events: none;
	z-index: 1;
}
.contentbg_clip{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.contentbgIn{
	width: 100%;
	top: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.contentbg_picture{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
}
.contentbg_picture source,
.contentbg_picture img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
@media screen and (max-width: 767px){
	.contentbg{
		height: 160px;
		margin-top: 0;
	}
	.contentbgIn{
		position: fixed;
	}
}


/**
 * common > Content h2
 */

.cont_h2{
	width: 100%;
	padding: 239px 6.6667% 0;
	position: relative;
	z-index: 2;
}
.cont_h2:before,
.cont_h2:after{
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	background-color: rgba(255,255,255,16%);
	z-index: 2;
}
.cont_h2:before{
	top: 0;
}
.cont_h2:after{
	bottom: 0;
}
.cont_h2_txt{
	width: 100%;
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
}
.cont_h2_txt:after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 1px;
	background-color: #fff;
	z-index: 2;
}
.cont_h2_txt--eng{
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;
/*	mix-blend-mode: difference;*/
	position: relative;
	z-index: 2;

	font-size: 112px;
	font-weight: 700;
	line-height: 0.71429;
	font-family: var(--font-family-eng);
	letter-spacing: -0.02em;
}
.cont_h2_txt--ja{
	font-size: 16px;
	line-height: 1;
	background-color: #000;
	color: #FFF;
	position: absolute;
	right: 0;
	display: inline-block;
	z-index: 2;
}
@media screen and (max-width: 767px){
	.cont_h2{
		padding: 112px 6.4% 0;
	}
}


/**
 * common > btn_link
 */
.btn_pagelink{
	width: 360px;
	margin: 64px auto 0;
}
.btn_pagelink a{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	text-decoration: none;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 64px;
	color: #fff;
	border-top: 1px solid rgba(254,254,254,.4);
	border-bottom: 1px solid rgba(254,254,254,.4);
	transition:  .3s ease-out;
}
.btn_pagelink a:hover{
	color: #fff;
}
.btn_pagelink a:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(var(--main-color-red), var(--main-color-red)) right center/0 100% no-repeat;
	transition: background-size .3s ease-out;
}
.btn_pagelink a:hover::before {
	background-position: left center;
	background-size: 100% 100%;
}

.btn_pagelink_txt{
	position: relative;
}
.btn_pagelink_txt.twlink{
	display: inline-block;
	padding: 0 0 0 40px;
	position: relative;
}
.btn_pagelink_txt.twlink:before{
	content: '';
	position: absolute;
	top: calc(50% - 9px);
	left: 0;
	width: 20px;
	height: 18px;
	-webkit-mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
	mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
	background: #fff;
	transition: .3s ease-out;
}
.btn_pagelink a:hover .btn_pagelink_txt.twlink:before{
	background: #fff;
}
.btn_pagelink_line{
	position: absolute;
	right: -40px;
	width: 80px;
	height: 1px;
	background-color: rgba(254,254,254,.4);
}
.btn_pagelink_line:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	/*background: linear-gradient(#c62c2c, #c62c2c) right center/0 100% no-repeat;*/
	background: linear-gradient(#fff, #fff) right center/0 100% no-repeat;
	transition: background-size .3s ease-out;
}
.btn_pagelink a:hover .btn_pagelink_line:before{
	background-position: left center;
	background-size: 100% 100%;
}

/* toback */
.btn_pagelink.--toback a:before{
	background-position: left center;
}
.btn_pagelink.--toback a:hover::before{
	background-position: right center;
}
.btn_pagelink.--toback .btn_pagelink_line:before{
	background: linear-gradient(#fff, #fff) left center/0 100% no-repeat;
}
.btn_pagelink.--toback a:hover .btn_pagelink_line:before{
	background-position: right center;
}
.btn_pagelink.--toback .btn_pagelink_line{
	right: unset;
	left: -40px;
}

@media screen and (max-width: 767px){
	.btn_pagelink{
		width: 77.9817%;
		max-width: 255px;
		margin: 36px auto 0;
	}
	.btn_pagelink a{
		height: 48px;
		font-size: 1.2rem;
	}
	.btn_pagelink_line{
		width: 18.8236%;
		right: -9.4118%;
	}
	.btn_pagelink.--toback .btn_pagelink_line{
		right: unset;
		left: -9.4118%;
	}
}


/** MOVIE **/
#fullMovie,
#footerMovie{
	position: absolute;
	top: -50%;
	width: 100%;
	height: 200%;
}

/*-----------------------------------------------
 * Footer
-------------------------------------------------*/

.footer{
	width: 100%;
	min-height: 640px;
	height: 100vh;
	position: relative;
}
.logoWrap{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.logo_set{
	width: 100%;
	height: max(23.3334vw, 280px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.footer .logo{
	width: 400px;
	padding-top: 175px;
	width: 33.3334%;
	padding-top: 14.5834%;
	margin: 0 auto 3.3334%;
	position: relative;
	z-index: 3;
}
.onairTxt{
	width: 300px;
	padding-top: 24px;
	width: 25%;
	padding-top: 2%;
	margin: 0 auto;
	background: url(../img/top/onair_text2.svg) no-repeat center / contain;
	z-index: 3;
	position: relative;
}
.onairTxt_option{
	font-size: 12px;;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	margin-top: 24px;
}
.onairTxt_ondemandTxt{
	width: 360px;
	width: 30%;
	padding-top: 22px;
	padding-top: 1.8334%;
	background: url(../img/top/onairTxt_ondemandTxt.svg) no-repeat center / contain;
	margin: 26px auto 0;
}

.footerIn{
	position: relative;
	width: 100%;
	height: 100%;
}

.plink__toTop{
	width: 6.6667%;
	height: 120px;
	position: absolute;
	left: 3.3334%;
	top: 0;
	z-index: 5;
}
.btn_plink--circle a{
	display: flex;
	width: 80px;
	height: 80px;
	position: relative;
	margin: 0 auto;
}
.plink__toTop.btn_plink--circle a{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.btn_plink--circle circle{
	cx: 40px;
	cy: 40px;
	r: 39px;
}
.btn_plink--circle .circle_bg circle{
	stroke: rgba(255,255,255,40%);
}
.btn_plink--circle .circle_active circle{
	stroke: #FFF;
/*	animation: p_circle-out__eighty 1s forwards;*/
}
.btn_plink--circle a:hover .circle_active circle{
	stroke: #FFF;
/*	animation: p_circle__eighty 1s forwards;*/
}
.btn_plink--circle .circle_txt{
	display: block;
	width: 100%;
	position: absolute;
	font-family: var(--font-family-eng);
	line-height: 1;
	font-size: 12px;
	color: #FFF;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.scru{
	width: 1px;
	height: 56px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background-color: rgba(255,255,255, 40%);
	overflow: hidden;
}
.scru span{
	background-color: #fff;
	width: 1px;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
}
.b_scru {
/*	animation: scrollUp 2.4s ease-in-out infinite;*/
}
@keyframes scrollUp {
	0% { top: 100%; }
	70%, 100% { top: -100%; }
}


.full_moviePlay{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
}
.full_moviePlay a{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.copyright{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin-bottom: 42px;
	font-size: 12px;
	line-height: 1;
	text-align: center;
	opacity: 40%;
	z-index: 10;
}

@media screen and (min-width: 768px){
	.sp-footerMovieWrap{
		display: none;
	}
	.footerMovieWrap{
		display: block;
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		z-index: -3;
	}
}

@media screen and (max-width: 767px){
	.footer{
		min-width: 100%;
		height: auto;
		min-height: unset;
		padding: calc(14.9334% + 84px) 0 24px;
	}
	.footer .logoWrap{
		width: 100%;
		margin-top: 0;
		position: relative;
		bottom: unset;
	}
	.logo_set{
		position: relative;
		height: auto;
		bottom: unset;
	}
	.footer .logo{
		width: 462px;
		width: 61.6%;
		padding-top: 200px;
		padding-top: 26.6667%;
		margin: 0 auto 8.5334%;
	}
	.onairTxt{
		width: 450px;
		width: 60%;
		padding-top: 36px;
		padding-top: 4.8%;
	}
	.onairTxt_option{
		margin-top: 10px;
		font-size: 1rem;
		line-height: 2;
	}
	.onairTxt_ondemandTxt{
		width: min(72%, 540px);
		padding-top: min(4.4%, 33px);
		margin-top: 5.3334%;
	}

	.footerIn{
		position: unset;
		height: auto;
	}
	.plink__toTop{
		width: 60px;
		height: 84px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.btn_plink--circle a{
		width: 60px;
		height: 60px;
	}
	.btn_plink--circle a{
		width: 60px;
		height: 60px;
	}
	.btn_plink--circle circle{
		cx: 30px;
		cy: 30px;
		r: 29px;
	}
	.btn_plink--circle .circle_txt{
		font-size: 1rem;
	}
	.scru{
		height: 36px;
	}
	.copyright{
		font-size: 1rem;
		padding: 0 6.4%;
		line-height: 1.4;
		position: relative;
		margin-bottom: 0;
	}
	.footer .full_moviePlay{
		display: none;
	}

	.footer .shareWrap{
		position: relative;
/*		margin-top: min(149.7334vw, 1123px);*/
		width: 100%;
		top: unset;
		bottom: unset;
		right: unset;
	}

	.footer .shareLists{
		margin: 32px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer .shareLists__ttl{
		margin: 0 16px 0 0;
	}
	.footer .shareLists__item{
		margin: 0 16px;
	}
}



.plink__toTop .circle_active circle,
.plink__toNext .circle_active circle,
.plink__toOnair .circle_active circle{
	animation: unset!important;
}


/* GRID LIST */
.grid__lists {
	display: flex;
	flex-wrap: wrap;
	width:100%;
	border-top:1px solid rgba(40,40,40,1);
	position: relative;
}
.grid__lists:before {
	content:'';
	position: absolute;
	left:0;
	bottom:0;
	right:0;
	height:1px;
	background:rgb(40,40,40);
}
.grid__list {
	margin:-1px 0 0;
	width:25%;
	border-bottom:1px solid rgba(40,40,40,1);
	border-top:1px solid rgba(40,40,40,1);
}
.grid__list:nth-child(odd) {
	border-right:1px solid rgba(40,40,40,1);
}
.grid__item {
	display: block;
	height:100%;
	padding:40px;
	position: relative;
	color:#FFF;
	text-decoration: none;
}
.grid__item:before {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	top:0;
	background: linear-gradient(var(--main-color-red), var(--main-color-red)) right center/0 100% no-repeat;
	transition: background-size .3s ease-out;
}
.grid__item:hover:before {
	background-position: left center;
	background-size: 100% 100%;
}
.grid__thumb {
	position: relative;
	width:100%;
	padding-top:100%;
	background:#FFF;
	margin-bottom:1em;
}
.grid__thumb img {
	display: block;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	object-fit: contain;
}
.grid__name {
	font-size:16px;
	line-height:2;
	letter-spacing: 0.025em;
	position: relative;
}
@media screen and (max-width: 768px){
	.grid__list {
		width:50%;
	}
	.grid__item {
		padding:6.4vw;
	}
	.grid__name {
		font-size:1.3rem;
	}
}
.grid__item_icon:after{
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	bottom: 0;
	right: 0;
	-webkit-mask: url(../img/common/icon_news.svg) no-repeat center / contain;
	mask: url(../img/common/icon_news.svg) no-repeat center / contain;
	background: #fff;
	transition: .3s ease;
}