@charset "utf-8";
/*-----------------------------------------------
 * common.css
 * レスポンシブは基本スタイルを引き継ぐ（PCファースト）
 * @media screen and (max-width:767px)
-------------------------------------------------*/
/*-----------------------------------------------
 * Reset, root
 * Bace
 * Modal
 * Header
 * Footer
 * Parts
-------------------------------------------------*/
/*-----------------------------------------------
 * Reset, root
-------------------------------------------------*/
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;}

:root {
	--common-min-width: 1200px;
	--common-min-height: 640px;

	/* メインで使用するサイズやカラー */
	--main-font-size: 16px;
	--main-font-family: "Noto Serif JP","Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

	--color-main: #fe0048;

	/* easing */
	--easing-outquart: cubic-bezier(0.25, 1, 0.5, 1);


	/* vw min 計算 => min(calc(数値 / var(--vw-min) * 100vw), 数値); */
	--vw-min: 1200;

	/* FONT */
	--font-ja: "Noto Serif JP", serif;
	--font-en: "Oswald", serif;
	--font-en-num: "Cormorant Infant", serif;
	--font-ja-sub: "Zen Old Mincho", serif;/* BOOK ONLY */
	--font-gothic: "Noto Sans JP", serif;


	 /* Noto Serif JP 200 to 900
	 Oswald 200 to 700*/
}
@media screen and (max-width:767px){
	:root {
		--common-min-width: 100%;
		--common-min-height: auto;
		--main-font-size: 12px;
		/* vw min 計算 => min(calc(数値 / var(--vw-min) * 100vw), 数値); */
		--vw-min: 750;

	}
}


@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;
}


/*-----------------------------------------------
 * Bace
-------------------------------------------------*/
body{
	-webkit-text-size-adjust: 100%;
	background-color: #fff;
	color: #000;
	font-family: var(--main-font-family);
	font-size: var(--main-font-size);
	font-weight: normal;
	letter-spacing: 0.07em;
	line-height: 1.8;
	word-wrap: break-word;
}
.pc{ display: block; }
.sp{ display: none; }
a{ color: #222; }
a:hover{ text-decoration: none; }
.ah { transition: opacity .3s ease; }
.ah:hover { opacity: .7; }
::selection{
	background: #B7D4F9;
	color: #000;
}
::-moz-selection{
	background: #B7D4F9;
	color: #000;
}
@media screen and (max-width:767px){
	.sp{ display: block; }
	.pc{ display: none; }
	.ah:hover { opacity: 1; }
}

/**
 * scroll bar
 */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: #fff;
}
::-webkit-scrollbar-thumb {
	background: #000;
	margin: 2px;
	box-shadow: none;
}


/**
 * Wrap
 * 大枠のwrap指定
 */
/* fullWrap */
#fullWrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}


/*-----------------------------------------------
 * Modal
-------------------------------------------------*/
/**
 * modalBox
 * 基盤のモーダル
 */
.modalBox{
	-webkit-overflow-scrolling: touch;
	background: rgba(255, 255, 255, .9);
	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;
}
.oneModal.is-show {
	display: block;
}

/* oneModalIn */
.oneModalIn{
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	width: 100%;
	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%;
	}
}

/**
 * closeBtn
 */
 /*
.closeBtn{
	width: 80px;
	height: 80px;
	position: absolute;
	top:20px;
	right: 20px;
	z-index: 2;
}
@media screen and (max-width:767px){
	.closeBtn{
		width: calc(100 / var(--vw-min)* 100vw);
        height: calc(100 / var(--vw-min)* 100vw);
	}
}
.closeBtn a {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #ff004d;
	position: relative;
	display: block;
	transition: all 0.6s ease;
}
@media screen and (max-width:767px){
	.closeBtn a {
		width: 100%;
		height:  100%;
	}
}
.closeBtn a:hover {
	transform: scale(1.1);
}

.closeBtn a:before {
	display: block;
	content: "";
	background: url(../img/common/icon/icon_close.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
}*/

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

/* youtube */
.youtubeIframeWrap {
	width: 70%;
	max-width: 159.993vh;
	position: relative;
}
@media screen and (max-width:767px){
	.youtubeIframeWrap {
		width: 100%;
		max-width: 100%;
		margin: 50px 0;
	}
}
.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: fixed;
	top: 0;
	z-index: 999;
	pointer-events: none;
	font-family: var(--font-en);
}

/* PC HEADER */

@media screen and (min-width:768px){
	.header{
		width: calc(100vw - calc(445 / var(--vw-min)* 100vw));
		min-width: 763px;
		width: calc(763 / var(--vw-min) * 100vw);
		/*width: 763px;*/
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}	
}
@media screen and (max-width:1500px){
	.header{
		min-width: unset;
		width: 50%;
	}
}
@media screen and (max-width:767px){
	.header {
		width: 100%;
		pointer-events: all;
		padding: calc(30 / var(--vw-min) * 100vw) 0;
	}
	
}
/* inner */
.header__inner {
	/*height: 80px;*/
    position: sticky;
    left: 0;
    top: 46px;
	pointer-events: all;
	padding: 20px 0 0;
	transition:  all .4s ease;
}
.index .header__inner {
	padding: 50px 0 0;
}
.thin .header__inner {
	padding: 20px 0 0;
}

@media screen and (max-width:767px){
	.header__inner {
		background-color: #fe0048;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		padding: 0;
	}
}

/**
 * headerNav
 */
.headerNav,
.headerNav__inner,
.headerNav__cont {
	width: 100%;
	height: 100%;
}

@media screen and (max-width:767px){
	.headerNav {
		height: calc(100% + 1px);
		position: relative;
	}
	.headerNav__inner {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: auto;
		min-height: 100%;
		margin: 0 auto;
		position: relative;
		flex-direction: column;
		padding-top: calc(30 / var(--vw-min)* 100vw);
		padding-bottom: 0;
	}
	.headerNav__cont {
		height: auto;
		margin: 0 0;
		position: relative;
	}
}

/**
 * headerNavLists
 */
.headerNavLists {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.headerNavLists__item {
	height: 100%;
	margin: 0 10px;
}
.headerNavLists__item a {
	color: #000;
}
@media screen and (max-width:767px){
	.headerNavLists {
		display: block;
	}
	.headerNavLists__item {
		height: auto;
		padding: 0;
		margin-left: 0;
	}
	.headerNavLists__item:not(:first-child) {
		margin-top: 0;
	}
}

/* a */
.headerNavLists__item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 16px;
	font-weight: 400;
	padding: 0 2px;
    line-height: 1;
	position: relative;
	text-decoration: none;
}
.headerNavLists__item > a > span{
	color: var(--color-main);
}
@media screen and (max-width:767px){
	.headerNavLists__item > a {
		display: inline-block;
		height: auto;
		padding: 0;
	}
}

/* hover active */
.headerNavLists__item a::after{
	content: "";
	width: 100%;
	height: 100%;
	display: inline-block;
	/*background-color: #FFF;*/
	position: absolute;
	bottom:calc(-3 / var(--vw-min) * 100vw);
	bottom: -1px;
	left: 0;
	z-index: -1;
	margin: auto;
	/*opacity: 0;*/
	transition: all .4s ease;
}
@media screen and (max-width:767px){
	.headerNavLists__item a::after{
		display: none;
	}
	.headerNavLists__item.is-active a::after{
		display: inline-block;
	}
}
.headerNavLists__item.is-active a::after,
.headerNavLists__item:hover a::after {
	opacity: 1;
	background-color: #000;
}
.headerNavLists__item.is-active a,
.headerNavLists__item:hover a {
	-webkit-text-stroke: unset;
    text-stroke: unset;
    paint-order: unset;
	color: #FFF;
}

.headerNavLists__item{
    font-size: 20px;
}
.headerNavLists__item a{
    font-size: 20px;
    -webkit-text-stroke: 4px #FFF;
    text-stroke: 4px #FFF;
    paint-order: stroke;
    letter-spacing: 0.04em;
	/*font-weight: bold;*/
}
.headerNavLists__item > a.is-active {
	-webkit-text-stroke: unset;
    text-stroke: unset;
    paint-order: unset;
	/*background: #000;*/
	color: #FFF;
}
.headerNavLists__item:hover > a {
	-webkit-text-stroke: unset;
    text-stroke: unset;
    paint-order: unset;
	/*background: #000;*/
	color: #FFF;
}
@media screen and (max-width:767px){
	.headerNavLists__item{
		font-size: 20px;
		margin-bottom: calc(50 / var(--vw-min) * 100vw);
	}
	.headerNavLists__item a{
		font-size: calc(80 / var(--vw-min) * 100vw);
		line-height: 1;
		-webkit-text-stroke: unset;
		text-stroke: unset;
		paint-order: unset;
		color: #FFF;
	}
	.headerNavLists__item a >span{
		color: #FFF;
	}
}


/**
 * navBtn
 */
@media screen and (max-width:767px){
	.header__navBtnWrap {
		background-color:  #FFF;
		width: calc(100 / var(--vw-min) * 100vw);
		height: calc(100 / var(--vw-min) * 100vw);
		position: absolute;
		top: calc(180 / var(--vw-min) * 100vw);
		right: calc(35 / var(--vw-min) * 100vw);
		z-index: 2;
		border-radius: 50%;
		transition: all .4s ease;
	}
	.thin .header:not(.is-active) .header__navBtnWrap {
		top: 20px;
		border: 2px solid var(--color-main);
	}
	.header__navBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.header__navBtn__lineWrap {
		width: calc(30 / var(--vw-min)* 100vw);
		height: calc(25 / var(--vw-min)* 100vw);
		position: relative;
	}
	.header__navBtn--line {
		background-color: var(--color-main);
		display: block;
		width: 100%;
		height: calc(6 / var(--vw-min)* 100vw);
		margin: auto;
		position: absolute;
		border-radius: 5px;
	}
	.header__navBtn--line:nth-child(1) {
		top: 0;
	}
	.header__navBtn--line:nth-child(2) {
		top: 0;
		bottom: 0;
	}
	.header__navBtn--line:nth-child(3) {
		bottom: 0;
	}
}

/**
 * active
 */
@media screen and (max-width:767px){
	.header__inner {
		transform: translateX(100%);
		transition: transform .5s var(--easing-outquart);
	}
	.header.is-active .header__inner {
		transform: translateX(0);
	}
	.header__navBtn--line {
		transition: transform .3s ease,
					opacity .3s ease;
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(1) {
		transform: rotate(35deg);
		top: calc(10 / var(--vw-min)* 100vw);
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(3) {
		transform: rotate(-35deg);
		bottom: calc(9/ var(--vw-min)* 100vw);
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(2) {
		transform: translateX(20%);
		opacity: 0;
	}
}

.headerNavListsWrap{
	display: flex;
	position: relative;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width:1500px){
	.headerNavListsWrap{
		padding-left: 80px;
	}
}
.headerNavListsWrap::before{
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: var(--color-main);;
	z-index: -1;
}
@media screen and (max-width:767px){
	.headerNavListsWrap{
		flex-direction: column;
		align-items: flex-start;
		padding:calc(50 / var(--vw-min) * 100vw) calc(72 / var(--vw-min) * 100vw) 0;
	}
	.headerNavListsWrap::before{
		display: none;
	}
}


/* nav_ttl */
.nav__ttl{
    font-size: 10px;
    left: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    color: var(--color-main);
    -webkit-text-stroke: 4px #FFF;
    text-stroke: 4px #FFF;
    paint-order: stroke;
    position: absolute;
    display: flex ;
    align-items: center;
	font-weight: 500;
}
@media screen and (max-width:767px){
	.nav__ttl{
		font-size: calc(28 / var(--vw-min) * 100vw);
		left: unset;
		top: unset;
		bottom:unset;
		margin: unset;
		color: #000;
		-webkit-text-stroke:0;
		text-stroke: 0;
		paint-order:unset;
		position: relative;
		display: flex ;
		align-items: center;
		font-weight: bold;
        letter-spacing: 0.04em;
		line-height: 1;
		margin-bottom: calc(45 / var(--vw-min)* 100vw);
	}
}


/* header logo SP*/
.header__logo{
	width:calc(617 / var(--vw-min) * 100vw);
    height: calc(190 / var(--vw-min) * 100vw);
    background: url(../img/common/logo.png) no-repeat center center / contain;
	margin: 0 auto;
	z-index: 1000;
	transition: all .4s ease;
	transform-origin: top center;
}
.index .header__logo._flex{
	display: none;
}
.header__logo a{
	display: block;
	height: 100%;
	width: 100%;
}
@media screen and (max-width:767px){
	.thin .header__logo._flex{
		width:calc(300 / var(--vw-min) * 100vw);
		height: calc(100 / var(--vw-min) * 100vw);
	
	}
	.index .header__logo._flex{
		display: none;
	}

}


.fv__logo{
	width:calc(617 / var(--vw-min) * 100vw);
    height: calc(190 / var(--vw-min) * 100vw);
    background: url(../img/common/logo.png) no-repeat center center / contain;
	margin: 0 auto;
	transition: all .4s ease;
}
@media screen and (max-width:767px){
	.thin .fv__logo{
		width:calc(300 / var(--vw-min) * 100vw);
		height: calc(100 / var(--vw-min) * 100vw);
		position: fixed;
		top: 20px;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 1;
	}

}
/*-----------------------------------------------
 * Parts
-------------------------------------------------*/
/**
 * shareLists
 */
 .shareListsBlock{
	position: fixed;
	left: 30px;
	bottom: 50px;
	display: flex;
	flex-direction: column;
    align-items: center;
 }
 @media screen and (max-width:767px){
	.shareListsBlock{
		position: relative;
		left: unset;
		bottom: unset;
		flex-direction: row;
		margin-bottom: calc(50 / var(--vw-min) * 100vw);
	 }
}


 .shareLists__ttl{
	font-family: var(--font-en);
	font-size: 10px;
	color: #000;
	letter-spacing: 0;
	margin-bottom: 20px;
 }
.shareLists {
	display: flex;
	flex-direction: column;
}
@media screen and (max-width:767px){
	.shareLists__ttl{
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-right: calc(20 / var(--vw-min) * 100vw);
		margin-bottom: unset;
	 }
	.shareLists {
		flex-direction: row;
	}
}


/* item */
.shareLists__item {
	width: 30px;
	height: 30px;
	margin-bottom: 30px;
}
@media screen and (max-width:767px){
	.shareLists__item {
		width: calc(56 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
		margin-bottom: 0;
		margin: 0 calc(30 / var(--vw-min) * 100vw);;
	}
}

/* link */
.shareLists__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
	pointer-events: all;
}
.shareLists__link:before {
	content: "";
	background-color: #000;
	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-x .shareLists__link:before {
	width: 26px;
	height: 26px;
	-webkit-mask-image: url(../img/common/sns/icon_x.svg);
	mask-image: url(../img/common/sns/icon_x.svg);
}
.shareLists__item.is-facebook .shareLists__link:before {
	width: 26px;
	height: 26px;
	-webkit-mask-image: url(../img/common/sns/icon_fb.svg);
	mask-image: url(../img/common/sns/icon_fb.svg);
}
.shareLists__item.is-line .shareLists__link:before {
	width: 26px;
	height: 26px;
	-webkit-mask-image: url(../img/common/sns/icon_line.svg);
	mask-image: url(../img/common/sns/icon_line.svg);
}
@media screen and (max-width:767px){
	.shareLists__item.is-x .shareLists__link:before {
		width:calc(56 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
	}
	.shareLists__item.is-facebook .shareLists__link:before {
		width:calc(56 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
	}
	.shareLists__item.is-line .shareLists__link:before {
		width: calc(56 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
	}
}












#fullWrap{
    min-width: 1200px;
}
@media screen and (max-width:767px){
    #fullWrap{
        min-width: unset;
    }
}
.fullWrap__inner{
    position: relative;
}

@media screen and (max-width:767px){
    .sub .fullWrap__inner::before {
        pointer-events: none;
        position: absolute;
        width: 50%;
        height: calc(286 / var(--vw-min) * 100vw);
        position: absolute;
        right: 0;
        top: 0;
        content: "";
        display: block;
        background-color: var(--color-main);
        z-index: -1;
    }
}
.fv__logo{
    width: min(calc(670 / var(--vw-min) * 100vw), 670px);
    height: min(calc(200 / var(--vw-min) * 100vw), 200px);
    background: url(../img/common/logo.png) no-repeat center center / contain;
}
@media screen and (max-width:1500px){
	.fv__logo{
		width: 80%;
	}	
}
/*----------------
 * VISUAL
----------------*/
.visualArea{
    /*width: calc(445 / var(--vw-min) * 100vw);*/
    min-width: 437px;
	width: calc(100% - 763px);
	width: calc(437 / var(--vw-min) * 100vw);
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
	background: #000;
}
@media screen and (max-width:1500px){
	.visualArea{
		min-width: unset;
		width: 50%;
	}
}
@media screen and (min-width:768px){
	.visualArea{
		z-index: 1000;
	}
}
.visualArea__inner{
    width: 100%;
    /*height: calc(620 / var(--vw-min) * 100vw);
    min-height:max(100vh, 620px);*/
	/*height: 100vh;
    position: sticky;
    top: 0;
    right: 0;
	*/
	min-height: 100vh;
    position: sticky;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
}
.visual__item{
    width: 100%;
    height: 100%;
	background-color: #000;
	display: flex;
	align-items: center;
	scrollbar-width: none;
    overflow-y: scroll;
}
.visual__item::-webkit-scrollbar {
    display: none;
}
.visual__item img{
    width: 100%;
    height: auto;
}
.visual__item.visual1{
    background: url(../img/visual/visual3_top.jpg) no-repeat center center;
    background-size: cover;
	transition: all .4s ease;
	min-height: 100vh;

	height: calc(620 / var(--vw-min) * 100vw);
}
@media screen and (max-width:767px){
    .visualArea{
        width: 100%;
        min-width: unset;
        position: relative;
        height: unset;
        right: unset;
        top: unset;
    }
    .visualArea__inner{
        width: 100%;
        height: unset;
        min-height: unset;
        position: relative;
        top: unset;
        right: unset;
    }
    .visual__item{
        width: 100%;
        /*height: calc(1075 / var(--vw-min) * 100vw);*/
    }
    .visual__item.visual1{
        background: url(../img/visual/visual3_top.jpg) no-repeat;
        background-size: cover;
		min-height: unset;
		height: calc(1055 / var(--vw-min)* 100vw);
    }

	.sub .visualArea{
       display: none;
    }
}

/* CONTENTS */
.contentsArea{
    min-width: 763px;
	width: calc(763 / var(--vw-min) * 100vw);
	/*width: 763px;*/
    position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
@media screen and (max-width:1500px){
	.contentsArea{
		min-width: unset;
		width: 50%;
		min-height: 1500px;
	}
}
@media screen and (max-width:767px){
    .contentsArea{
        width:100%;
        min-width: unset;
		min-height: unset;
    }
	.sub .contentsArea{
		padding-top: calc(260 / var(--vw-min)* 100vw);
	 }
}

/*----------------
 * officialLink
----------------*/
.officialLink{
    display: flex;
    /*width: calc(100% - calc(445 / var(--vw-min) * 100vw));
    min-width: 755px;*/
    position: sticky;
    left: 0;
    top: 0;
	z-index: 10;
}
.officialLink__item{
    background-color: #000;
    width: 50%;
}  
.officialLink__item a{
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
	display: flex;
    align-items: center;
    justify-content: center;
	height: 46px;
	transition: all .4s ease;
} 
.officialLink__item.link_x a{
	background-color:  var(--color-main);
} 

.officialLink__item.link_t a{
	background-color:  #333;
} 

/* hover */
.officialLink__item.link_x a:hover,.officialLink__item.link_t a:hover{
	background-color:  #000;
} 
.officialLink__item.link_netflix a:hover{
	background-color:  var(--color-main);
} 


.officialLink__txt{
	font-size: 20px;
    color: #FFF;
	font-weight: 600;
}
.officialLink__item.link_x .officialLink__txt,
.officialLink__item.link_t .officialLink__txt {
	font-family: var(--font-en);
	position: relative;
	padding-right: 25px;
}
.officialLink__item.link_netflix .officialLink__txt{
	font-family: var(--font-en);
	position: relative;
} 
.officialLink__item.link_x .officialLink__txt::before{
	content: "";
	background-color: #FFF;
	display: block;
	position: absolute;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;t
	transition: background-color .4s ease;
	width: 19px;
	height: 19px;
	-webkit-mask-image: url(../img/common/sns/icon_x.svg);
	mask-image: url(../img/common/sns/icon_x.svg);
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.officialLink__item.link_t .officialLink__txt::before{
	content: "";
	background-color: #FFF;
	display: block;
	position: absolute;
	-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;
	width: 19px;
	height: 19px;
	-webkit-mask-image: url(../img/common/sns/icon_t.svg);
	mask-image: url(../img/common/sns/icon_t.svg);
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
@media screen and (max-width:767px){
    .officialLink{
        width: 100%;
        min-width: unset;
        position: absolute;
        left: 0;
        top: unset;
        bottom: 0;
    }
    .officialLink__item a{
        height: calc(80 / var(--vw-min) * 100vw);
    } 
}

/*----------------
 * section
----------------*/
.section__contents{
    padding: 30px;
    font-size: 16px;
    line-height: calc(32/ 16);
    max-width: 763px;
	margin: 0 auto;
}
.section__inner{
    padding: 60px 0;
}
@media screen and (max-width:767px){
    .section__contents{
        padding: calc(40 / var(--vw-min) * 100vw) calc(60 / var(--vw-min) * 100vw);
        font-size: calc(24 / var(--vw-min) * 100vw);
        line-height: calc(32/ 16);
    }
    .section__inner{
        padding: 0;
    }
}
/* ttl */
.section__ttl{
    background: var(--color-main);
    color: #FFF;
    font-family: var(--font-en);
    font-size: 32px;
    text-align:  center;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width:767px){
    .section__contents{
        padding: calc(40 / var(--vw-min) * 100vw) calc(60 / var(--vw-min) * 100vw);
        font-size: calc(24 / var(--vw-min) * 100vw);
        line-height: calc(32/ 16);
    }
    .section__ttl{
		font-size: calc(40 / var(--vw-min) * 100vw);
		height: calc(90 / var(--vw-min) * 100vw);
	}
}
/*-----------------------------------------------
 * FOOTER
-------------------------------------------------*/
footer{
    /*padding-bottom:  calc(100 / var(--vw-min)* 100vw);*/
}
@media screen and (max-width:767px){
    footer{
        padding-bottom:  calc(100 / var(--vw-min)* 100vw); 
    } 
}
/* copyright cookie-policy */
.ftBlock{
    display: flex;
	justify-content: center;
    padding-right: 30px;
	align-items: center;
}
.copyright{
    font-size: 10px;
    font-weight: bold;
    line-height: 1em;
}
.cookie-policy{
    font-size: 10px;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #CCC;
    line-height: 0.8em;
}
.cookie-policy a{
	pointer-events: all;
	text-decoration: none;
	font-weight: 700;
}
.cookie-policy a:hover{
	text-decoration: underline;
}
@media screen and (max-width:1500px){
    .ftBlock{
		padding-right: 20px;
		align-items: center;
		width: calc(100% - 150px);
		justify-content: flex-end;
	}
	.copyright{
		text-align: center;
	}
}
@media screen and (max-width:767px){
	.ftBlock{
        display: flex;
        justify-content: center;
        padding-right: 0;
		height: auto!important;
		flex-direction: row;
        align-items: center;
    }
    .copyright{
        font-size: calc(11 / var(--vw-min)* 100vw);
        font-weight: bold;
        line-height: 1em;
    }
    .cookie-policy{
        font-size: calc(11 / var(--vw-min)* 100vw);
        padding-left: 10px;
        margin-left: 10px;
        border-left: 1px solid #CCC;
        line-height: 0.8em;
		padding-bottom: 0 ;
		margin-top: 0;
    }
}


/* bnr */
.bnrList__item{
	width: 150px;
}
.bnrList__item img{
	width: 100%;
	height: auto;
}
.bnrList__item a{
	pointer-events: all;
}
@media screen and (max-width:767px){
    .bnrList{
        margin-bottom:  calc(50 / var(--vw-min)* 100vw);

    }
	.bnrList__item{
		width: calc(250 / var(--vw-min)* 100vw);
		margin: 0 calc(5 / var(--vw-min)* 100vw);
	}
}

/* backBtn */
.backBtn{
	background-color: var(--color-main);
	position: fixed;
    bottom: 0;
    left: 0;
}
.backBtn a{
	color: #FFF;
	font-family: var(--font-en);
	text-decoration: none;
	width: 120px;
	height: 37px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .4s ease;
}
.backBtn span{
	padding-left: 25px;
	position: relative;
}
.backBtn span::before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 17px;
	height: 17px;
	mask: url(../img/common/arrow.png) no-repeat center center / contain;
	background-color: #FFF;
	transform: rotate(90deg);
	transition: all .4s ease;
}
.backBtn:hover a{
	color: #000;
	transform:translateX(-5px);
}
.backBtn:hover span::before{
	background-color: #000;
}
@media screen and (max-width:767px){
	.backBtn{
		width: 100%;
		background-color: var(--color-main);
		margin-bottom: calc(20 / var(--vw-min)* 100vw);
		position: relative;
	}
	.backBtn a{
		font-size: calc(30 / var(--vw-min)* 100vw);
		width: 100%;
		height: calc(90 / var(--vw-min)* 100vw);
	}
	.backBtn span{
		padding-left: 25px;
		position: relative;
	}

}
.sub__footer{
	display: flex;
	justify-content: flex-start;
    align-items: center;
	padding-bottom: 0;
	margin-top: auto;
	position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}
.sub__footer > .ftBlock{
	/*width: calc(100% - 120px);*/
	width: 100%;
	height: 37px;
	padding-left: 120px;
}
@media screen and (max-width:767px){
    footer.sub__footer{
		flex-direction: column;
        padding-bottom:  calc(100 / var(--vw-min)* 100vw); 
		position: relative;
		padding-left: 0;
    }
}

/* ani */
.js-scrani{
	opacity: 0;
	transition: all .4s ease;
	transform: translateY(20px);
}
.js-scrani.is-ani{
	opacity: 1;
	transform: translateY(0);
}
.section__contents.js-scrani{
	transition-delay: .4s;
}


/* MODAL CLOSE */
.modal__close {
	position: absolute;
	right:30px;
	top:30px;
	width:80px;
	height:80px;
	z-index: 2;
}
@media screen and (max-width:767px){
	.modal__close{
		right:30px;
		top:30px;
		width: calc(100 / var(--vw-min)* 100vw);
        height: calc(100 / var(--vw-min)* 100vw);
	}
}
.modal__close a {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--color-main);
	position: relative;
	display: block;
	transition: all 0.6s ease;
}
.modal__close a:before,
.modal__close a:after {
	position: absolute;
	content:'';
	width:50px;
	height:4px;
	top:50%;
	left:15px;
	background:#FFF;
	border-radius: 5px;
	margin-top:-2px;
	transition: all .4s ease;
}
@media screen and (max-width:767px){
	.modal__close a:before,
	.modal__close a:after {
		width: calc(60 / var(--vw-min)* 100vw);
        height: calc(6 / var(--vw-min)* 100vw);
		left:calc(20 / var(--vw-min)* 100vw);
		margin-top:calc(-4/ var(--vw-min)* 100vw);
	}
}
.modal__close a:before {
	transform: rotate(45deg)
}
.modal__close a:after {
	transform: rotate(-45deg)
}
.modal__close:hover a:before {
	transform: rotate(35deg)
}
.modal__close:hover a:after {
	transform: rotate(-35deg)
}