@charset "utf-8";

/*------------------------------------------------------------------------------
 ANCHORS
 -------------------------------------------------------------------------------*/

a:link,
a:visited,
a:hover,
a:active	{ color: #48001a; text-decoration: none; cursor : pointer!important;}


/*------------------------------------------------------------------------------
 ROOT（CSS変数を設定）
 -------------------------------------------------------------------------------*/
:root {
	--color-orange: #f39800;
  }

/*------------------------------------------------------------------------------
 FONTS
 -------------------------------------------------------------------------------*/

body, input, select, textarea, table, th, td, li ,a {
/*	font-family: Ryumin Regular KL,Ryumin Bold KL,"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif,Helvetica;*/

}
body, input, select, textarea {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	*font-size: 75%;
	color: #fff;
	line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight:normal;
}
strong, em {
	font-style: normal;
	font-weight: bold;
}

/*------------------------------------------------------------------------------
 BODY
 -------------------------------------------------------------------------------*/
html {
    height: 100%;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}
body {
	overflow-y: scroll;
	overflow-y: visible;
	height:100%;
	min-height: 100%;
}

/* body::before {
    background-image: url("../img/bg_contents.png");
    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    background-size: auto;
    background-position: center top;
    content: '';

    z-index: -999;
} */

.sp{
	display: none !important;
}




/* ----------------
index
----------------*/

.index {
    position: relative;
}
.index:after {
    position: fixed;
    content: '';
    display: block;
    z-index: -1 ;
    width: 100%;
    height: 100vh;
    background: url(../img/kakemeru_bg.jpg) no-repeat center;
    background-size: cover;
    top: 0;
    left: 0;
}
body {
    margin: 0;
}
div {
    box-sizing: border-box;
}
.w100 {
	width: 100% ;
	height: auto ;
}



#wrapper {
    width: 100%;
    position: relative;
    z-index: 0;
}
.wrapper_box {
    position: relative;
    max-width: 1800px;
    padding: 0 ;
    width: 100%;
    display: flex ;
    flex-direction: row;
    margin: 0 auto ;
    right: 0;
    left: 0;
	justify-content: center ;
}



/* ----------------
loading
----------------*/
#loading {
	position: fixed;
    z-index: 9999;
	width: 100vw ;
	height: 100vh ;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(150deg, #587ebf, #19398a 33%, #1b3a66);
}
.loading_box {
	max-width: 500px;
	max-height: 500px ;
	width: 100% ;
	height: 100% ;
	position: absolute ;
	top: 50% ;
	left: 50% ;
	transform: translate(-50%, -50% );
	z-index: 5;
}
#loadingTxt {
	position: absolute ;
	top: 50% ;
	left: 50% ;
	transform: translate(-50%, -50% );
	font-size: 25px ;
	letter-spacing: 4px;
	font-family: sicprintempspetit, sans-serif;
	text-align: center ;
	filter: drop-shadow(0 0 10px #103998);
	display: flex ;
	z-index: 10 ;
	p {
		transform: translateY(20px) ;
		opacity: 0;
		animation: loadTxt 2s infinite backwards ;
		&:nth-child(2) {
			animation-delay: 0.1s;
		}
		&:nth-child(3) {
			animation-delay: 0.2s;
		}
		&:nth-child(4) {
			animation-delay: 0.3s;
		}
		&:nth-child(5) {
			animation-delay: 0.4s;
		}
		&:nth-child(6) {
			animation-delay: 0.5s;
		}
		&:nth-child(7) {
			animation-delay: 0.6s;
		}
		&:nth-child(8) {
			animation-delay: 0.7s;
		}
	}
}
#loadingMoon {
	position: absolute ;
	width: 100% ;
	padding-bottom: 100% ;
	top: 0 ;
	left: 0 ;
	background: url(../img/loading_moon.png) no-repeat center top;
	background-size: contain ;
	animation: loadMoon 3s ease-in-out infinite ;
}

@keyframes loadMoon {
	0%, 100% {
		opacity: .2;
	}
	50% {
		opacity: .7 ;
	}
}
@keyframes loadTxtwrap {
	0%, 90% {
		opacity: 1 ;
	}
	100% {
		opacity: 0 ;
	}
}
@keyframes loadTxt {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	60% {
		opacity: 1 ;
	}
	90% {
		opacity: 1 ;
		transform: translateY(0);
	}
	100% {
		opacity: 0 ;
		transform: translateY(0);
	}
}




/* ----------------
hero
----------------*/

.hero_wrap {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.hero_container {
    width: 50%;
	max-width: 900px ;
    min-height: 100%;
    position: fixed;
    top: 0;

}
.hero_mainvisual {
    position: relative ;
    width: 100% ;
    height: 128vh;
    min-height: 600px ;
    /* background: url(../img/hero_bg.png) no-repeat top right; */
    /* background-size: contain ; */
} 
.hero_mainvisual_bg {
    position: absolute;
    width: 100% ;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/hero_bg_02.png) no-repeat top right;
    background-size: contain;
	z-index: -10 ;
	transform: scale(1.2, 1.2);
	transition: .5s;
	&:after {
		content: '';
		position: absolute;
    	width: 100% ;
    	height: 100%;
    	top: 0;
    	left: 0;
    	background: url(../img/hero_bg_01.png) no-repeat top right;
    	background-size: contain;
		transform: translateY(100px);
		opacity: 0 ;
		transition: .5s .4s ease-in-out;
	}
}
.hero_title {
    position: absolute;
    width: 70%;
    height: 20%;
    background: rgba(255, 255, 255, 0.635);
    top: 57%;
    right: 13%;
    background: url(../img/hero_title.png) no-repeat right;
    background-size: contain;
	opacity: 0;
	transition: .25s .5s;
	text-indent: -9999px;
}
.hero_badge {
	position: absolute ;
	width: 25% ;
	height: 20vh ;
	min-height: 100px ;
	top: 46% ;
	right: 0.5% ;
	background: url(../img/hero_badge.png) no-repeat top right ;
	background-size: contain ;
	opacity: 0;
	transition: .25s .5s;
	text-indent: -9999px;
}
.hero_lead {
	position: absolute ;
	width: 70%;
    height: 30%;
	top: 26% ;
	right: 0.5% ;
	background: url(../img/hero_lead.png) no-repeat center right;
	background-size: contain ;
	transform: translatex(100px);
	opacity: 0 ;
	transition: .25s .7s ease-in;
	text-indent: -9999px;
}
.hero_credit {
	position: absolute ;
	width: 15% ;
	height: 7% ;
	top: 74%;
    right: 2.5%;
	background: url(../img/hero_credit.svg) no-repeat center right;
	background-size: contain ;
	opacity: 0 ;
	transition: .25s .5s;
}
.hero_bnr {
    position: fixed ;
    bottom: 2%;
    left: 0 ;
    width: 150px;
    height: auto ;
    background: rgb(255, 55, 90);
	transform: translatex(-50px);
	opacity: 0 ;
	transition: .25s .9s ease-in;

}
.hero_bnr_close {
	position: absolute ;
	width: 30px;
	height: 30px;
	top: -40px ;
	left: 10px ;
	cursor: pointer;
	span {
		display: block ;
		width: 30px ;
		height: 0;
		border-bottom: 1px solid #f00 ;
		position: relative;
		top: 50%;
		&:first-child {
			transform: rotate(45deg);
			
		}
		&:last-child {
			transform: rotate(-45deg);
		}
	}
	
}

.hero_container.loaded {
	.hero_mainvisual_bg {
		transform: scale(1);
		&:after {
			transform: translateY(0);
			opacity: 1 ;
		}
	}
	.hero_title {
		opacity: 1 ;
	}
	.hero_badge {
		opacity: 1 ;
	}
	.hero_lead {
		transform: translatex(0);
		opacity: 1 ;
	}
	.hero_bnr {
		transform: translatex(0);
		opacity: 1 ;
	}
	.hero_credit {
		opacity: 1 ;
	}
}
.hero_container .hero_bnr.is-click {
	transform: translateX(-500px);
	opacity: 0 ;
	transition: .5s 0s ;
}

.hero_wrap.hero_mvResize {
	.hero_container {
		display: flex ;
		align-items: center ;
	}
	.hero_mainvisual {
			height: 0;
			min-height: auto;
			padding-top: 141%;
	}
	.hero_title {
		width: 80%;
		height: 30%;
		bottom: 4%;
		top: auto ;
	}
	.hero_credit {
		top: auto ;
		bottom: 2% ;
	}
    
}


@media screen and (min-width: 1500px) {
	.hero_credit {
		width: 13%;
		top: 70%;
	}
}
@media screen and (max-width: 1500px) {
    .wrapper_box {
    	max-width: 1500px;
	}
	.hero_mainvisual {
		height: 120vh;
	}
	.hero_title {
		width: 65%;
		height: 20%;
		top: 60%;
		right: 15vh;
	}
	.hero_badge {
		top: 50% ;
		right: 0.5% ;
	}
	.hero_lead {
		top: 30% ;
		right: 0.5% ;
	}

	
}
@media screen and (max-width: 1500px) and (max-height: 600px) {
	.hero_title {
		right: 10% ;
	}
}
@media screen and (max-width: 1350px)  {
	.hero_title {
		right: 0 ;
		left: 0 ;
		margin: 0 auto ;
	}
	.hero_bnr {
		width: 130px;
	
	}
}

@media screen and (max-width: 850px) {
    .wrapper_box {
        display: block ;
    }
    .hero_wrap {
        z-index: 2;
    width: 100%;
	}
	.hero_container {
		width: 100%;
		position: relative;
	
	}
	.hero_mainvisual {
		position: relative ;
		width: 100% ;
		height: 0;
		padding-top: 141%;
		min-height: auto ;
		background-size: cover ;
		mask-image: linear-gradient(to bottom, black 96%, transparent 99.5%);
		-webkit-mask-image: linear-gradient(to bottom, black 96%, transparent 99.5%);
	}
	.hero_mainvisual_bg {
		
	}
	.hero_title {
		width: 80%;
		height: 30%;
		top: auto;
		bottom: 5.5% ;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	.hero_badge {
		height: 20% ;
		top: auto;
        bottom: -1%;
        right: auto;
        left: 0;
	}
	.hero_lead {
		width: 80% ;
		height: 35% ;
		/* top: 30% ;
		right: 0.5% ; */
	}
	.hero_credit {
		top: auto ;
		bottom: 5%;
	}
	.hero_bnr {
		bottom: 2%;
		left: auto ;
		right: 0 ;
		width: 240px;
		height: 90px;
		transform: translatex(50px);
	}
	.hero_bnr_close {
		left: auto ;
		right: 10px ;
	}
	.hero_container .hero_bnr.is-click {
		transform: translateX(500px);
	}
}



/* ----------------
Contents
----------------*/

.contents {
    z-index: 2;
    position: relative;
	width: 50% ;
	max-width: 650px ;
	border-right: 1px solid #DE9A3C;
	border-left: 1px solid #DE9A3C;
    filter: drop-shadow(0 0 10px #102658);
    background: linear-gradient(180deg, rgb(22, 135, 237), rgb(20, 55, 90)) ;
	overflow: hidden ;
}

.section_title {
	height: 80px ;
	width: 100% ;
	img {
		height: 100% ;
		width: auto ;
		position: relative ;
		display: block ;
	}
}
.section_title_r {
	img {
		right: -10px ;
		margin-left: auto ;
	}
}
.section_title_l {
	img {
		left: -10px ;
	}
}

.subtitle {
	display: inline-block ;
	margin: 0 auto ;
	font-size: 16px ;
	letter-spacing: 2px ;
	margin-bottom: 20px ;
	position: relative ;
	&::before, &::after {
		content: '';
		width: 20px ;
		height: 20px ;
		position: absolute ;
		top: 50% ;
		transform: translateY(-50% );
	}
	&::before {
		left: -50px ;
	}
	&::after {
		right: -50px ;
	}
}
.subtitle_gold {
	color: #bc9939 ;
	&::before, &::after {
		content: '';
		background: url(../img/subtitle_icon_gold.svg) no-repeat center ;
	}
}
.subtitle_white {
	&::before, &::after {
		content: '';
		background:  url(../img/subtitle_icon_white.svg) no-repeat center ;
	}
}

@media screen and (max-width: 1500px) {
	.contents {
		max-width: 450px ;
		
	}
}

@media screen and (max-width: 850px)  {
	.contents {
		z-index: 1;
		width: 100%;
		max-width: 850px ;
		padding-top: 100px;
		margin-top: -100px;
		filter: none ;
	}

}



/* ----------------
Story
----------------*/
#Story {
	background: #153562 ;
	background-image: url(../img/story_intro_bg.png) ;
	background-position: top center ;
	background-repeat: no-repeat ;
	background-size: contain ;
	position: relative ;
	z-index: -1 ;
} 
.story_intro {
	position: relative ;
	padding-bottom: calc(55.8% + 100px) ;
	margin-top: -100px ;
}
.story_intro_butterfly {
	position: absolute ;
	width: 100%;
	padding-bottom: 55.8% ;
	top: 110px;
	right: 0;
}
.story_intro_butterfly01, .story_intro_butterfly02, .story_intro_moon {
	position: absolute ;
	padding-bottom: 55.8% ;
	top: 110px ;
	left: 0 ;
	right: 0 ;
}
.story_intro_butterfly01 {
	background: url(../img/story_intro_butterfly01.png) no-repeat center ;
	background-size: contain ;
	animation: butterfly01 1s ease-in-out infinite alternate;
	top: 0 ;
}
.story_intro_butterfly02 {
	background: url(../img/story_intro_butterfly02.png) no-repeat center ;
	background-size: contain ;
	animation: butterfly02 1s ease-in-out infinite alternate;
	top: 0 ;
}
.story_intro_moon {
	background: url(../img/story_intro_moon.png) no-repeat center ;
	background-size: contain ;
}
@keyframes butterfly01 {
	0% {
	  transform: translateX(-3px);
	}
	100% {
	  transform: translateX(0);
	}
  }
  @keyframes butterfly02 {
	0% {
	  transform: translateY(-3px);
	}
	100% {
	  transform: translateY(0);
	}
  }

.story_txt {
	padding: 0 5% ;
	position: relative ;
	p {
		font-size: 1.6rem ;
		line-height: 2.3 ;
		span {
			position: relative;
		}
		.story_txt_ruby {
			position: absolute ;
			top: -20px ;
			font-size: 11px;
			right: 0;
            left: 0;
            width: 100%;
            text-align: center;
			color: #fff ;
		}
		span.effect {
			padding: 2px 3px ;
			margin: 0 2px;
			position: relative ;
			z-index: 1 ;
			color: transparent ;

			.story_txt_ruby {
				color: transparent ;
				transition: .25s .5s;
			}
			&::before {
				content: '';
				width: 100% ;
				height: 100% ;
				position: absolute ;
				top: 0 ;
				left: 0 ;
				opacity: 0 ;
				background: #ff0000;
				transition-duration: .05s ;
				transition-delay: .5s ;
				z-index: -1 ;
			}
			&::after {
				content: '';
				position: absolute ;
				width: 0% ;
				height: 100% ;
				background: #fff ;
				top: 0 ;
				left: 0 ;
				z-index: 2;
			}
			&.is-active {
				color: #fff ;
				transition-delay: .5s ;
				&::before {
					opacity: 1 ;
				}
				&::after {
					animation: slide-in .25s .25s forwards, slide-out .25s .5s forwards;
				}
				.story_txt_ruby {
					color: #fff ;
				}
			}
		}
	}
}
.story_txt_r {
	text-align: right ;
	position: relative ;
	z-index: 1 ;
	margin-top: -35px ;
}

@keyframes slide-in {
	0% {
	  width: 0;
	  left: 0;
	}
	100% {
	  width: 100%;
	  left: 0;
	}
  }
  
@keyframes slide-out {
	0% {
	  width: 100%;
	  left: 0;
	}
	100% {
	  width: 0;
	  left: 100%;
	}
}

.story_txt_lead {
	position: relative ;
}
.story_txt_lead_bg {
	width: 100%;
	margin: 100px 0 ;
	opacity: 0 ;
	img {
		width: 100%;
		height: auto ;
		clip-path: inset(0 50% 0 50%);
	}
  }
.story_txt_lead.is-active {
	.story_txt_lead_bg {
		opacity: 1 ;
		img {
			transition: clip-path .5s ease .5s;
			clip-path: inset(0 0% 0 0%);
		}
	}
}
.story_txt_lead_img1, .story_txt_lead_img2 {
	width: 20% ;
	position: absolute ;
	top: 50% ;
	transform: translateY(-50%);
	img {
		width: 100%;
		height: auto ;
		clip-path: inset(0 0 100% 0);
	}
	&::before, &::after {
		content: '';
		position: absolute ;
		display: block;
		width: 0 ;
		height: 0 ;
	}
}
.story_txt_lead_img1 {
	right: 3% ;
	&::before {
		top: 0 ;
		left: 20% ;
		transition: all .25s ease 1s ;
	}
	&::after {
		top: 0 ;
		right: 0 ;
		transition: all .25s ease 1.25s ;
	}
}
.story_txt_lead_img2 {
	left: 3% ;
	&::before {
		bottom: 0 ;
		left: 0 ;
		transition: all .25s ease 1.75s ;
	}
	&::after {
		bottom: 60% ;
		left: 0 ;
		transition: all .25s ease 1.5s ;
	}
}
.story_txt_lead.is-active {
	.story_txt_lead_img1 {
		img {
			transition: clip-path 1s ease .75s;
			clip-path: inset(0 0 0 0);
		}
		&::before {
			width: 80% ;
			border-top: 1px solid #fff ;
		}
		&::after {
			height: 60% ;
			border-left: 1px solid #fff ;
		}
	}
	.story_txt_lead_img2 {
		img {
			transition: clip-path 1s ease 1s;
			clip-path: inset(0 0 0 0);
		}
		&::before {
			width: 80% ;
			border-top: 1px solid #fff ;
		}
		&::after {
			height: 60% ;
			bottom: 0 ;
			border-left: 1px solid #fff ;
		}
	}
}
.story_txt_chach {
	width: 90% ;
	margin: 0 auto ;
	padding: 25px 0 150px ;
	opacity: 0 ;
	transition: .5s;
	&.is-active {
		opacity: 1;
	}
}


.story_coma1 {
	/* -webkit-mask: url(../img/story_coma1_mask.svg) no-repeat center;
	mask: url(../img/story_coma1_mask.svg) no-repeat center;
	mask-size: cover ; */
	
	position: absolute ;
	bottom: 0 ;
	left: -20px ;
	z-index: -1 ;
	width: 60% ;
}
.story_coma1_inner {
	
}
.story_coma2 {	
	position: absolute ;
	top: 10px;
	right: 15% ;
	z-index: -1 ;
	width: 30% ;
}
.story_coma3 {	
	position: absolute ;
	bottom: 160px;
    right: 2%;
	z-index: -1 ;
	width: 30% ;
}


@media screen and (min-width: 1500px) {
	.story_txt_lead_bg {
		margin: 150px 0;
	}
	
}

@media screen and (max-width: 850px)  {
	.story_txt {
		p {
			font-size: 1.4rem ;
			.story_txt_ruby {
				font-size: 10px;
			}
		}
		
	}
}




/* ----------------
Books
----------------*/
#Books {
	background: #000 ;
	margin-top: 100px ;

	.section_inner {
		position: relative ;
		&::after {
			content: '';
			position: absolute;
			width: 100% ;
			padding-bottom: 73.3% ;
			background: url(../img/books_endbg.png) no-repeat center bottom;
			background-size: cover ;
			bottom: 0 ;
			left: 0 ;
			z-index: 0 ;
		}
	}
}

.books_dungeon_wrap {
	position: relative ;
}
.books_dungeon1 {
	width: 100% ;
	padding-bottom: 41.66% ;
	background: url(../img/story_dungeon1.png) no-repeat center ;
	background-size: contain;
	position: absolute ;
	top: -200px;
}
.books_dungeon2 {
	width: 100% ;
	padding-bottom: 36.66% ;
	background: url(../img/story_dungeon2.png) no-repeat center ;
	background-size: contain;
	position: absolute ;
	top: -66px ;
}

.books_swiper {
	margin-top: 50px ;
	position: relative ;
	transform: translateY(100px);
	opacity: 0 ;
	transition: .75s ease-out ;
	&.is-active {
		opacity: 1 ;
		transform: translateY(0);
	}
}

.books_subtitle {
	text-align: center ;
}


.books_swiper_wrap {
	position: relative ;
	z-index: 1 ;
}

.books_swiper_center {
	width: 55%;
	position: relative ;
	z-index: 2 ;
}
.books_swiper_l {
	width: 23%;
	position: absolute ;
	top: 23%;
	left: -4%;
	z-index: 1;
}
.books_swiper_r {
	width: 23%;
	position: absolute ;
	top: 23%;
	right: -4% ;
	z-index: 1 ;
}
.books_slide_list {
	width: 100% ;
	height: 100% ;
}
.books_slide_list_item {
	width: 100% !important;
	box-sizing: border-box ;
}
.books_slide_list_item_image {
	width: 99.8% ;
	display: block ;
}


.books_nav_box {
	width: 100% ;
	height: auto ;
	position: relative ;
	top: -110px ;
	z-index: 10 ;
}
.books_nav {
	width: 35px ;
	height: 35px ;
	background: #1e00c4 ;
	border-radius: 50% ;
	cursor: pointer;
	position: absolute ;
	&::after {
		content: '';
		width: 13px;
		height: 7px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0 ;
		left: 0 ;
		margin: 0 auto ;
		background: url(../img/books_slide_nav.svg) no-repeat center;
		background-size: contain;

	}
	&.prev {
		right: 80% ;
		top: 0 ;
		&::after {
			transform: rotate(180deg) translateY(50%);
		}
	}
	&.next {
		left: 80% ;
		top: 0 ;
	}
}

.slide-text {
	width: 90% ;
	transform: translateY(-100px );
	font-size: 25px ;
	text-align: center;
	transition: .25s .5s ;
	margin: 0 auto ;
	position: relative ;
	z-index: -1 ;
	.books_slide_list_item_txt {
		background: url(../img/books_slide_txtbg.svg) no-repeat center top ;
		background-size: contain ;
		width: 100%;
		padding-bottom: 21.86% ;
		position: relative ;

	}
	.books_slide_list_item_txt_inner {
		display: flex;
		justify-content: center;
		position: absolute ;
		top: 48% ;
		transform: translateY(-50%);
		right: 0 ;
		left: 0 ;
		font-family: sicprintempspetit, sans-serif;
		letter-spacing: 2px ;
	}
	span {
		padding: 2px ;
		margin-right: 10px ;
		background: #fff ;
		font-size: 11px ;
		color: #1e00c4 ;
		align-self: center;
		line-height: 1 ;
		letter-spacing: 1px ;
	}
}
.swiper-slide-active .slide-text {
	transform: translateY(0);
}


.books_link_wrap {
	display: flex ;
	justify-content: center ;
	gap: 10px;
	margin-top: 25px ;
	padding-bottom: 25px ;
}
.books_link_inner {
	a {
		display: block ;
		width: 100% ;
		img {
			height: 100% ;
			width: auto ;
		}
	}
	.sample_none img {
		filter: grayscale(100%);
	}
}
.books_link_sample {
	width: 51% ;
}
.books_link_buy {
	width: 40%;
}


.books_dungeon_scroll1 {
	position: absolute ;
	top: 50px ;
	right: 0 ;
	width: 60% ;
	z-index: 0;
}
.books_dungeon_scroll2 {
	position: absolute ;
	bottom: -50px ;
	left: 0 ;
	width: 60% ;
	z-index: 0;
}
.books_dungeon_scroll3 {
	position: absolute ;
	top: 150px ;
	right: 0 ;
	width: 40% ;
	z-index: 0;
}
.books_dungeon_scroll4 {
	position: absolute ;
	bottom: -50px ;
	left: 0 ;
	width: 80% ;
	z-index: 0;
}


.coronaex_wrap {
	position: relative ;
	z-index: 1 ;
	margin-top: 25px;
	opacity: 0 ;
	transform: translateY(100px);
	transition: .75s ease-out ;
	&.is-active {
		opacity: 1 ;
		transform: translateY(0);
	}
}
.coronaex_bg1 {
	width: 100% ;
	padding-bottom: 81.3%;
	background: url(../img/coronaex_bg01.png) no-repeat center ;
	background-size: contain;
	position: absolute ;
	top: 0 ;
}
.coronaex_bg2 {
	width: 100% ;
	padding-bottom: 81.3%;
	background: url(../img/coronaex_bg02.png) no-repeat center ;
	background-size: contain;
	position: absolute ;
	top: 0 ;
}
.coronaex_bg3 {
	width: 100% ;
	padding-bottom: 81.3%;
	background: url(../img/coronaex_bg03.png) no-repeat center ;
	background-size: contain;
	position: absolute ;
	top: 0 ;
}
.coronaex_inner {
	padding: 100px 25% ;
	position: relative ;
	&::after {
		content: '';
		position: absolute;
		width: 27% ;
		height: 20% ;
		background: url(../img/coronaex_subtxt.svg) no-repeat center top ;
		top: 20% ;
		left: 3% ;
	}
}
.coronaex_inner_lead {
	width: 100% ;
	filter: drop-shadow(0 0 10px #000);
}
.coronaex_link {
	position: relative ;
	margin-top: 25px ;
	a {
		display: block ;
		width: 100% ;
		img {
			filter: drop-shadow(0 0 5px #c4aa2a);
			opacity: 1 ;
			transition: .25s ;
		}
		&:hover img {
			opacity: .8 ;
		}
	}
}

.comingsoon_wrap {
	position: relative ;
	z-index: 1 ;
}
.comingsoon_inner {
	width: 100% ;
	padding: 5% 5% 75px ;
	font-weight: bold ;
}
.comingsoon_txt_l {
	text-align: left ;
	font-size: 20px ;
	font-family: sicprintempspetit, sans-serif;
	opacity: 0 ;
	transform: translateX(-100px);
	transition: .25s ease-out ;
}
.comingsoon_txt_r {
	text-align: right ;
	font-size: 30px ;
	font-family: sicprintempspetit, sans-serif;
	opacity: 0 ;
	transform: translateX(100px);
	transition: .25s .25s ease-out ;
}
.comingsoon_door {
	width: 100%;
	opacity: 0 ;
	transform: translateY(100px);
	transition: 1s .5s ease-out ;
}
.comingsoon_wrap.is-active {
	.comingsoon_txt_l {
		opacity: 1 ;
		transform: translateX(0);
		transition: .75s ease-out ;
	}
	.comingsoon_txt_r {
		opacity: 1 ;
		transform: translatex(0);
	}
	.comingsoon_door {
		opacity: 1 ;
		transform: translateY(0);
	}
}

@media screen and (min-width: 1500px) {
	.comingsoon_wrap {
		margin-top: 50px ;
	}
}


/* ----------------
footer
----------------*/
#footer {
    margin: 0 auto;
	padding: 75px 0;
    text-align: center;
    font-size: 14px;
	position: relative ;
	background: #000 ;
	border-top: 1px solid #1e00c4 ;
}
.footer_inner {
	width: 100% ;
	padding: 0 5%;
}

.share_list {
	text-align: center ;
	ul {
		display: flex ;
		justify-content: center ;
		align-items: center ;
		gap: 3% ;
		li {
			width: 40px ;
			height: 40px ;
		}
		li.share_x {
			width: auto ;
			height: 54px ;
			padding: 5px ;
			border: 2px solid #f00 ;
			border-radius: 40px ;
			box-sizing: border-box ;
			background: #000 ;
			box-shadow: 0 5px #f00;
			transform: translateY(0);
			transition: .25s ;
			a {
				display: flex ;
				color: #f00;
			}
			p {
				line-height: 40px ;
				padding: 0 5px ;
				font-size: 15px ;
			}
			img {
				width: 40px;
				height: 40px;
			}
			&:hover {
				transform: translateY(3px);
				box-shadow: 0 2px #f00 ;
			}
		}
	}
}

.footer_tobooks {
	width: 100px ;
	margin: 0 auto ;
	margin-top: 75px ;

}
.copylight {
	margin-top: 25px ;
	font-size: 10px ;
	text-align: center ;
}