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

/*-----------------------------------------------

 * Modal

 * Header

 * Parts

 * Sub page

-------------------------------------------------*/

body{

    -webkit-text-size-adjust: 100%;

    background-color: #fff;

    color: #000;

    font-family: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;

    font-feature-settings: "palt";

    font-size: 14px;

    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: #6ccfee;

    color: #fff;

}

::-moz-selection{

    background: #6ccfee;

    color:#fff;

}

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

}



.c-gra {

	display: inline-block;

	background: #d2646a;

	background: linear-gradient(106deg, #d2646a 0%, #d2646a 40%, #8b6499 50%, #5b88b2 60%, #5b88b2 100%);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

  }

@keyframes anime-line {

	0% {

	  height: 0;

	  top: 0;

	}

	25%,

	50% {

	  height: 100%;

	  top: 0;

	}

	75%,

	100% {

	  height: 0;

	  top: 100%;

	}

  }





/*-----------------------------------------------

 * Modal

-------------------------------------------------*/



/**

 * modalBox

 * 基盤のモーダル

 */

 .modalBox{

    -webkit-overflow-scrolling: touch;

	-webkit-backdrop-filter: blur(7px);

    backdrop-filter: blur(7px);

	background: rgb(var(--color-blue));

    background: linear-gradient(0deg, rgba(var(--color-blue),.85) 0%, rgba(var(--color-green),.85) 100%);

    display: none;

    width: 100%;

    height: 100%;

    overflow: auto;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 9999;

}

.modalBox.is-info {

	background: rgba(255,255,255,.9);

}

.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-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

 */

.closeBtnWrap {

	width: min(8.33333vw,100px);

	height: min(8.33333vw,100px);

	position: absolute;

	top: 0;

	right: 0;

	z-index: 2;

}

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

	.closeBtnWrap {

		width: 13.33333vw;

		height: 13.33333vw;

	}

}



.closeBtn {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	width: 100%;

	height: 100%;

	position: relative;

	text-decoration: none;

	z-index: 1;

}



/* line */

.closeBtn__lineWrap {

	width: min(6.66666vw,80px);

	height: min(1.5vw,18px);

	position: relative;

	z-index: 1;

}

.closeBtn--line {

	display: block;

	width: 100%;

	height: min(0.33333vw,4px);

	margin: auto;

	position: absolute;

}

.closeBtn--line:nth-child(1) {

	top: 40%;

	transform: rotate(20deg);

	background:#76528e;

}

.closeBtn--line:nth-child(2) {

	bottom: 40%;

    transform: rotate(-20deg);

    background:#cc5c65;

}

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

	.closeBtn__lineWrap {

		width: 10.66666vw;

		height: 2.4vw;

		margin-top: 3vw;

	}

	.closeBtn--line {

		height: 0.6vw;

	}

}



/* text */

.closeBtn:after {

	content: "CLOSE";

	color: #5a89b3;

	display: block;

	font-size: var(--fontsize-12);

	margin-top: 8px;

}

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

	.closeBtn:after {

		margin-top: 1vw;

	}

}





/**

 * iframe

 */

/* common */

.commonIframe{

    width: 100%;

    height: 100%;

    display: block;

}



/* youtube */

.youtubeIframeWrap {

    width: 100%;

     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: fixed;

    bottom: 0;

    z-index: 999;

}

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

    .header {

        top: 0;

        bottom: auto;

    }

}



/* inner */

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

    .header__inner {

        -webkit-overflow-scrolling: touch;

        width: 100%;

        height: 100%;

        overflow: auto;

        position: fixed;

        top: 0;

        left: 0;

        padding: 80px 0;

        opacity: 0;

        pointer-events: none;

        z-index: 1;

        transition: opacity .5s ease-in-out;

    }

    .header.is-active .header__inner {

        opacity: 1;

        pointer-events: auto;

    }



    .header__inner:before {

        content: "";

        background: rgba(0,0,0,.8);

        position: fixed;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        z-index: 0;

    }

}



/**

 * headerNav

 */

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

    .headerNav {

        position: relative;

        z-index: 1;

    }



    .headerNavLists__item a {

        color: #fff;

    }

}



/**

 * navBtn

 */

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

    .header__navBtnWrap {

        background-color: #000;

        width: 50px;

        height: 50px;

        position: absolute;

        top: 0;

        right: 0;

        z-index: 2;

    }

    .header__navBtn {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        height: 100%;

        position: relative;

    }

    .header__navBtn__lineWrap {

        width: 24px;

        height: 13px;

        position: relative;

    }

    .header__navBtn--line {

        background-color: #fff;

        display: block;

        width: 100%;

        height: 1px;

        margin: auto;

        position: absolute;

    }

    .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;

    }

}





/*-----------------------------------------------

 * Parts

-------------------------------------------------*/

/**

 * SNS

 */

 

.snsBoxWrap{

	display: flex;

	margin: 0 auto;

	justify-content: center;

}



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

	.snsBox{

		

	}

}

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

	.snsBoxWrap{

		position: absolute;

		top: 24px;

		right: 20px;

	}

}

/**

 * shareLists

 */

.shareLists {

    display: flex;

}



/* item */

.shareLists__item {

    width: 20px;

    height: 20px;

}

.shareLists__item:not(:last-child) {

	margin-right: 20px;

}

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

	.shareLists__item {

		width: 30px;

    	height: 30px;

	}

	.shareLists__item:not(:last-child) {

		margin-right: 4vw;

	}

}



/* link */

.shareLists__link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    position: relative;

    text-decoration: none;

}

.shareLists__link:before {

    content: "";

    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%;

}



/* 各SNSパーツ */

.shareLists__item.is-twitter .shareLists__link:before {

	background-color: #5a89b3;

    width: 100%;

    height: 100%;

    -webkit-mask-image: url(../img/common/icon/icon_x.svg);

    mask-image: url(../img/common/icon/icon_x.svg);

}

.shareLists__item.is-facebook .shareLists__link:before {

	background-color: #76528e;

    width: 100%;

    height: 100%;

    -webkit-mask-image: url(../img/common/icon/icon_fb.svg);

    mask-image: url(../img/common/icon/icon_fb.svg);

}

.shareLists__item.is-line .shareLists__link:before {

	background-color: #cc5c65;

    width: 100%;

    height: 100%;

    -webkit-mask-image: url(../img/common/icon/icon_line.svg);

    mask-image: url(../img/common/icon/icon_line.svg);

}





/**

 * pager

 */

 .pagingListsWrap {

	margin-top: 40px;

}

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

	.pagingListsWrap {

		margin-top: 40px;

	}

}



/* lists */

.pagingLists {

	display: flex;

	align-items: center;

	justify-content: center;

}



/* item */

.pagingLists__item {

	width: 30px;

	height: 30px;

	margin: 0 5px;

}



/* link */

.pagingLists__link {

	background-color: #fff;

	border: 1px solid #e77069;

	color: #e77069;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 16px;

	width: 100%;

	height: 100%;

	position: relative;

	text-decoration: none!important;

	transition: background-color .4s ease,

				color .4s ease;

}

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

	.pagingLists__link {

		font-size: 14px;

	}

}

.pagingLists__link:hover {

	background-color: #e77069;

	color: #fff;

}



/* active */

.pagingLists__active {

	background-color: #e77069;

	border: 1px solid #e77069;

	color: #fff;

	display: flex;

	align-items: center;

	justify-content: center;

	position: relative;

	font-size: 16px;

	width: 100%;

	height: 100%;

}

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

	.pagingLists__active {

		font-size: 14px;

	}

}





/*-----------------------------------------------

 * Sub page

-------------------------------------------------*/

/**

 * subArticle

 */

.subArticle {

	padding-top: 4.66667vw;

	padding-bottom: 4.66667vw;

}

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

	.subArticle {

		padding-top: 0;

		padding-bottom: 0;

	}

}



/**

 * subHeader__title

 */

.subHeader__title {

	background-color: #5a89b3;

	display: inline-block;

	padding: 10px 4.66667vw;

}

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

	.subHeader__title {

		padding: 2vw 4.6vw;

		position: absolute;

		top: -19.5vw;

		left: 0;

	}

}



/* title img */

.subHeader__title:before {

	content: "";

	background-repeat: no-repeat;

	background-position: 0 0;

	background-size: 100%;

	display: block;

}



/* img */

.subHeader__title.is-news:before {

	background-image: url(../img/common/title/title_news.svg);

	width: 93px;

	height: 25px;

}

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

	.subHeader__title.is-news:before {

		width: 17vw;

		height: 4.7vw;

	}

}





/**

 * subContWrap

 */

#subContWrap {

	background: #fffffb url(../img/common/subpage/sub_bg.jpg) top right / cover;

	display: flex;

	flex-direction: column;

	min-height: 100vh;

	position: relative;

	z-index: 1;

	width: calc(100% - (100% / 3));

	margin-left: calc(100% / 3);

}

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

	#subContWrap {

		background-image: url(../img/common/subpage/sub_bg_sp.jpg);

		width: 100%;

		min-height: calc(100vh - 29.33333vw);

		margin-left: 0;

		top: 29.33333vw;

	}

}



/**

 * subVisualArea

 */

.subVisualArea {

	display: flex;

	align-items: center;

	justify-content: center;

	width: calc(100% / 3);

	height: 100%;

	min-height: 620px;

	overflow: hidden;

	position: fixed;

	top: 0;

	bottom: 0;

	z-index: 0;

}

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

	.subVisualArea {

		width: 100%;

		height: 29.33333vw;

		min-height: auto;

		bottom: auto;

	}

}



/* vs */

.subVisualArea__vs {

	width: calc(100% + (100% / 3));

	height: calc(100% + (100% / 3));

	position: absolute;

	top: 0;

	left: 50%;

	transform: translateX(-50%);

	z-index: 0;

}

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

	.subVisualArea__vs {

		width: 100%;

		height: auto;

		margin-top: -24vw;

		padding-top: 150.99833%;

		top: 50%;

		transform: translate(-50%,-50%);

	}

}



.subVisualArea__vs:before {

	content: "";

	background: url(../img/common/subpage/sub_visual.jpg) no-repeat center / cover;

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

}



/* animation */

.subVisualArea__vs:before {

	opacity: 0;

	transform: translateX(-10%);

	transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1),

				opacity 2s cubic-bezier(0.25, 1, 0.5, 1);

}

.subVisualArea__vs.is-ani:before {

	transition-delay: .3s;

	opacity: 1;

	transform: translateX(0);

}

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

	.subVisualArea__vs:before {

		transform: translateY(10%);

	}

	.subVisualArea__vs.is-ani:before {

		transform: translateY(0);

	}

}



/* logo */

.subVisualArea__logo {

	width: 90.25%;

	max-width: 361px;

	position: relative;

	z-index: 1;

}

.subVisualArea__logo img {

	width: 100%;

}

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

	.subVisualArea__logo {

		width: 40.26666vw;

	}

}



/**

 * subFooter

 */

.subFooter {

	margin-top: auto;

	padding-top: 60px;

	padding-bottom: 60px;

}

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

	.subFooter {

		position: relative;

	}

}



/* pagetop */

.subFooter__pagetop {

	width: 24px;

	height: 70px;

	position: absolute;

	bottom: 0;

	right: 28px;

	overflow: hidden;

	display: flex;

  }



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

	.subFooter__pagetop {

	  height: 90px;

	  position: absolute;

	  bottom: 0;

	  right: 16px;

	}

  }



  .subFooter__pagetop a {

	display: block;

	height: 100%;

	pointer-events: auto;

  }



  .subFooter__pagetop p {

	width: 1px;

	height: 100%;

	position: absolute;

	right: 0;

	bottom: 0;

	background: #d2646a;

	background: linear-gradient(106deg, #d2646a 0%, #d2646a 40%, #8b6499 50%, #5b88b2 60%, #5b88b2 100%);

	-webkit-text-fill-color: transparent;

	margin-left: -1px;

  }



  .subFooter__pagetop span.anime-line {

	position: absolute;

	left: 0;

	top: 0;

	right: 0;

	height: 0;

	background: #FFF;

	animation: anime-line 2s ease-in-out infinite reverse;

  }



  .subFooter__pagetop__txt {

	font-size: 12px;

	-webkit-writing-mode: vertical-rl;

		-ms-writing-mode: tb-rl;

			writing-mode: vertical-rl;

  }



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

	.subFooter__pagetop__txt {

	  padding-right: 2px;

	  font-size: 10px;

	}

  }



/* copyright */

.subFooter__copyright {

	color: #5e5e5f;

	display: block;

	font-size: 10px;

	text-align: center;

}

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

	.subFooter__copyright {

		transform: scale(0.8);

	}

}



/**

 * subShareLists

 */

.subShareLists {

	display: flex;

	align-items: center;

}



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

	.subShareLists.official_link {

		margin-right: 50px;

		

	}

}

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

	.subShareLists {

		flex-direction: column;

		justify-content: center;

		margin-bottom: 30px;

		position: relative;

		top: auto;

		right: auto;

		padding: 0 5vw;

	}

}



/* dt */

.subShareLists__dt {

	font-size: 12px;

    letter-spacing: .01em;

	margin-right: 28px;

}

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

	.subShareLists__dt {

		margin-right: 0;

		margin-bottom: 16px;

	}

}



/**

 * Animation

 */

/* 左からフェード */

.ani-left {

	opacity: 0;

	transform: translateX(-80px);

	transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1),

				opacity 1s cubic-bezier(0.25, 1, 0.5, 1);

}

.ani-left.is-ani {

	opacity: 1;

	transform: translateX(0);

}



/* 下からフェード */

.ani-bottom {

	opacity: 0;

	transform: translateY(30px);

	transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1),

				opacity 1s cubic-bezier(0.25, 1, 0.5, 1);

}

.ani-bottom.is-ani {

	opacity: 1;

	transform: translateX(0);

}



/* delay */

.is-delay3 {

	transition-delay: .3s;

}

.is-delay4 {

	transition-delay: .4s;

}

.is-delay5 {

	transition-delay: .5s;

}

.is-delay6 {

	transition-delay: .6s;

}