/* CSS Document */

/* ALL_setting
================================================== */
*{
	margin:0;
	padding:0;
	font-family: fot-tsukuaoldmin-pr6n, Meiryo, sans-serif, monospace;
	font-size: 16px;
}

.a_link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

img{vertical-align: bottom;}

.clear{clear: both;}

.pc{ display: inherit!important; }
.sp{ display: none!important; }
@media screen and (max-width: 699px){
.pc{ display: none!important; }
.sp{ display: inherit!important; }
}

/* FONTS
================================================== */

.tsukuaoldmin{font-family: fot-tsukuaoldmin-pr6n, sans-serif;}
.parlare{font-family: parlare, sans-serif;}
.the-seasons{font-family: the-seasons, sans-serif;}

/* MENU
================================================== */

.header_logo{
	width: 6%;
	position: fixed;
	z-index: 100;
	background-color: white;
	box-sizing: border-box;
	padding: 0.4% 0.8%;
	filter: drop-shadow(0px 0px 4px #ccc);
	margin: 0 0 0 1%;
	pointer-events: none;
	opacity: 0;
	transition: all 0.5s ease 0s;
}

.header_logo_fixed{
	pointer-events: all;
	opacity: 1;
}

.header_logo_fix{
	width: 6%;
	position: fixed;
	z-index: 100;
	background-color: white;
	box-sizing: border-box;
	padding: 0.4% 0.8%;
	filter: drop-shadow(0px 0px 4px #ccc);
	margin: 0 0 0 1%;
	/*pointer-events: none;*/
	opacity: 1;
	transition: all 0.5s ease 0s;
}

.menu_box{
	width: 100%;
	position: fixed;
	z-index: 99;
	background-image: linear-gradient(0deg, rgba(40, 178, 230, 0) 0%, rgba(40, 178, 230, 1) 100%);
	padding: 0.8% 0 1.5%;
	text-align: center;
	font-family: the-seasons, sans-serif;
	color: white;
	font-size: 1em;
}

.menu_box a{
	font-family: the-seasons, sans-serif;
	color: white;
	font-size: 1em;
	text-decoration: none;
	padding: 0 15px;
	letter-spacing: 0.1em;
	font-weight: 100;
}

/* loading_setting
================================================== */
#loader {
	width: 100%;
	height: 100vh;
	display: table;
	position: fixed;
	_position: absolute;
	z-index: 9999;
}

.loader_box{
	width: 15%;
	margin: auto;
	height: 100vh;
	display: table;
}

.loader_table_cell{
	display: table-cell;
	vertical-align: middle;
}

.loader_logo{
	position: fixed;
	z-index: 999;
	width: 11%;
	top: 46.7%;
	left: 52.5%;
	transform: translate(-50%,-50%);
	animation:5s linear infinite rotation;
}

@keyframes rotation{
  0%{ transform:translate(-50%,-50%) rotate(0) ;}
  100%{ transform:translate(-50%,-50%) rotate(360deg) ; }
}

.loder_logo2{
	position: fixed;
	z-index: 998;
	width: 20%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#fade {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover;
	width:100%;
	height:100vh;
	display: none;
	
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 9998;
}

.fade_normal{
	background-color: white!important;
}

@media screen and (max-width: 1299px){
	.loader_box{
		width: 90%;
		margin: auto;
		height: 100vh;
	}
	
	.loader_logo{
		position: fixed;
		z-index: 999;
		width: 27%;
		top: 48%;
		left: 54.8%;
		transform: translate(-50%,-50%);
		animation:5s linear infinite rotation;
	}

	.loder_logo2{
		position: fixed;
		z-index: 998;
		width: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}	

}

/* scroll_animation_setting
================================================== */

.scroll_fade{
	opacity: 0;
}

.scroll_fade_up{
	opacity: 0;
}

.scroll_fade_down{
	opacity: 0;
	position: relative;
	z-index: 1;
}

.scroll_fade_left{
	opacity: 0;
}

.scroll_fade_right{
	opacity: 0;
}

.slick-active{
    animation-name: fadeanime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}

.fade {
    animation-name: fadeanime;
	animation-delay: 1s;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes fadeanime{
	from {opacity: 0;}
	to {opacity: 1;}
}


.fadeup{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.fadedown{
animation-name:fadeDownAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-50px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.fadeleft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

.faderight{
animation-name:fadeRightAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* First_view_setting
================================================== */

.first_view_wrapper{
	width: 100%;
	height: 100vh;
	min-height: 900px;
	background-image: url("../image/fv_main_bg.jpg?b");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	position: relative;
	z-index: 2;
}

.fv_sp_img{
	display: none;
}

.fv_logo{
	width: 22%;
	min-width: 400px;
	margin: auto;
	padding: 2.5% 0 0 0;
	opacity:0;
	position: absolute;
	top: 1%;
	left: 50%;
	transform: translate(-50%,0%);
}

.fv_logo_fade{
	animation-name:fadelogo;
	animation-delay: 1s;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadelogo{
  from {
    opacity: 0;
	transform:translate(-50%,0%) translateY(-50px);
  }

  to {
    opacity: 1;
	transform:translate(-50%,0%) translateY(0);
  }
}

.fv_logo img{
	filter: drop-shadow(0px 0px 30px rgba(18, 146, 214, 1)) drop-shadow(0px 0px 30px rgba(18, 146, 214, 1));
}

.fv_text_box{
	text-shadow:
2px 2px 40px #fff,
-2px 2px 40px #fff,
2px -2px 40px #fff,
-2px -2px 40px #fff,
1px 1px 20px #fff,
-1px 1px 20px #fff,
1px -1px 20px #fff,
-1px -1px 20px #fff;
	;
}

.fv_text_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(2.6rem, 1.3vw, 5.2rem);
	position: absolute;
	bottom: 13%;
	left: 50%;
	transform: translate(-50%,0%);
	color: #7ca0d1;
}

.fv_text_style2{
	font-family: the-seasons, sans-serif;
	font-size: clamp(4.2rem, 2.2vw, 5rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	position: absolute;
	bottom: 16%;
	left: 50%;
	transform: translate(-50%,0%);
	color: #231815;
}

.fv_text_style3{
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-size: clamp(1.4rem, 1vw, 1.6rem);
	position: absolute;
	letter-spacing: 0.4em;
	bottom: 24%;
	left: 50%;
	transform: translate(-50%,0%);
}


.fv_catch{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	top: 8%;
	left: 31%;
	font-size: clamp(1.2rem, 1vw, 1.4rem);
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	color: white;
	letter-spacing: 0.2em;
	line-height: 1.7em;
	text-shadow: 0 0 20px #1191d6,0 0 20px #1191d6,0 0 20px #1191d6;
	opacity: 0;
}

.fv_catch span{
	letter-spacing: -0em;
	font-size: 1em;
}

.fv_link_bt_style1{
	width: 20%;
	position: absolute;
	bottom: 5%;
	left: 3%;
	display: block;
}

.fv_link_bt_style1_sp{
	display: none;
}

.fv_link_bt_style2{
	width: 14%;
	position: absolute;
	top: 5%;
	right: 1%;
	display: block;
}

.key_white_logo{
	width:4%;
	position: absolute;
	bottom:30px;
	right: 50px;
	display: block;
}

.key_black_logo{
	display: none;
}

.news_info_box{
	box-sizing: border-box;
	display: inline-block;
	letter-spacing: normal;
	background-color: white;
	padding: 0 0 0 0;
	margin: 0 10px;
	position: relative;
}

.news_img{
	padding: 8% 8% 4% 8%;
	box-sizing: border-box;
}

.news_data{
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 1.4vw;
	line-height: 0.8vw;
	font-family: the-seasons, sans-serif;
	letter-spacing: 0.1em;
	color: #95D436;
}

.news_box_page{
	width: 100%;
	letter-spacing: -1em;
}

.news_text{
	font-size: clamp(0.6rem, 1vw, 0.8rem);
	line-height: 1vw;
	padding: 0 8%;
	min-height: 140px;
	text-align: left;
}

.news_box_slick{
	width: 100%;
	padding-left: 2%;
	box-sizing: border-box;
	margin: 20px auto;
}

.news_box:hover{
	opacity: 0.8;
}





/* Gallery_setting
================================================== */

.gallery_wrapper{
	width: 100%;
	min-height: 100vh;
	height: auto;
	background-image: url("../image/gallery_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center bottom;
	position: relative;
	z-index: 10;
}

.gallery_box{
	width: 100%;
	text-align: center;
	padding: 7% 0 2%;
	position: relative;
	z-index: 10;
	height: 100vh;
	min-height: 1000px;
}

.gallery_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: white;
}

.gallery_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #f7d1f4;
}

.gallery_screen_1{
	position: relative;
	top: 0;
	width: 60%;
	min-width: 800px;
	margin: auto;
}

.gallery_screen_2{
	position: relative;
	top: 0;
	width: 60%;
	margin: auto;
	min-width: 800px;
}
.gallery_cg_box_1{
	display: none;
	flex-wrap: wrap;
	width: 100%;
	margin: auto;
	top: 0;
	left: 0%;
	padding: 1% 0 ;
	z-index: 10;
	opacity: 0;
	animation-duration:1s;
	animation-fill-mode:forwards;
	pointer-events: none;
	position: relative;
}

.gallery_cg_box_1.active{
	display: flex;
    animation-name: fadeanime;
    animation-duration:1s;
    animation-fill-mode:forwards;
	pointer-events: auto;
}

.gallery_cg_box_2{
	display: none;
	flex-wrap: wrap;
	width: 100%;
	margin: auto;
	top: 0;
	left: 0%;
	padding: 1% 0 ;
	z-index: 10;
	opacity: 0;
	animation-duration:1s;
	animation-fill-mode:forwards;
	pointer-events: none;
	position: relative;
}

.gallery_cg_box_2.active{
	display: flex;
    animation-name: fadeanime;
    animation-duration:1s;
    animation-fill-mode:forwards;
	pointer-events: auto;
}

.gallery_cg_thum_1{
	width: 25%;
	box-sizing: border-box;
	padding: 1%;
}

.gallery_cg_thum_1:hover{
	opacity: 0.8;
}

.gallery_bt_box{
	display: flex;
	flex-wrap: wrap;
	width: 26%;
	margin: 20px auto 0px;
	position: relative;
	z-index: 10;
}

.gallery_bt_style1{
	width: 47%;
	box-sizing: border-box;
	padding: 1%;
	border-radius: 30px;
	color: white;
	border: 1px solid #fff;
	margin: 0 1.5%;
	cursor: pointer;
}

.gallery_bt_style1.active{
	background-color: white;
	color: #75baf5;
}

.gallery_bt_style2{
	width: 47%;
	box-sizing: border-box;
	padding: 1%;
	border-radius: 30px;
	color: white;
	border: 1px solid #fff;
	margin: 0 1.5%;
	cursor: pointer;
}

.gallery_bt_style2.active{
	background-color: white;
	color: #75baf5;
}


.fade {
    animation-name: fadeanime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes fadeanime{
	from {opacity: 0;}
	to {opacity: 1;}
}

/* Contents_setting
================================================== */

.contents_wraper{
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.intro_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/intro_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}
.story_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/story_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.news_wrapper{
	width: 100%;
	min-height: 400px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/news_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.character_wrapper{
	width: 100%;
	position: relative;
	overflow: hidden;
}

.general_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/general_bg.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.special_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/news_bg.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.event_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/event_bg.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}


.download_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/download_bg.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.sound_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/sound_bg.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.movie_wrapper{
	background-color: white;
	position: relative;
	z-index: 99;
}

.spec_wrapper{
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url("../image/spec_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right bottom;
}

.character_box_bg{
	width: 100%;
	padding: 2% 0 0;
	min-height: 800px;
	background-image: url("../image/character_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.event_box{
	border-top: 1px solid #000;
	margin: 20px 0 0 0;
	padding: 10px 0 0 0;
}

.special_bt_box{
	position: relative;
	border: 1px solid #000;
	padding: 10px 20px;
	text-align: center;
}

.special_bt_box:hover{
	background-color: #2EB3E6;
	color: white;
	border: 1px solid #fff;
}

.event_text_box_style1{
	display: flex;
	vertical-align: top;
}

.event_text_img_style1{
	width: 40%;
	padding-right: 3%;
}

.event_text_style1{
	width: 57%;
}

.event_text_style2{
	background-color: #2EB3E6;
	color: white;
	padding: 10px;
	margin-top: 10px;
	line-height: 1.4em;
}


/* Footer_setting
================================================== */

.footer_wrapper{
	background-image: url("../image/footer_bg.png");
	background-repeat: repeat-x;
	background-position: top center;
	padding: 2% 0;
	position: relative;
}

.footer_wrapper2{
	background-image: url("../image/footer_bg.png");
	background-repeat: repeat-x;
	background-position: top center;
	padding: 10% 0 2%;
	position: relative;
}

.footer_data_box{
	position: relative;
	margin-top: 10px;
}

.footer_logo{
	width: 10%;
	margin: auto;
	position: relative;
	z-index: 99;
}

.footer_sns_box{
	width:8%;
	margin: 80px auto 0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;	
	position: relative;
	z-index: 99;
}

.footer_sns_bt{
	width:calc(100%/3);
	padding: 5%;
	height:auto;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	position: relative;
}

.footer_copyright{
	text-align: center;
	font-size: 0.9em;
	padding: 0.5% 0 0 0;
}

.footer_data_1{
	font-family: the-seasons, sans-serif;
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
	font-weight: 300;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translate(-50%,0%);
	color: #231815;
}

.footer_data_2{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1.3vw, 1.4rem);
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translate(-50%,0%);
	color: #7ca0d1;
}

.footer_sp_logo{
	display: none;
}

/* scroll_bg_setting
================================================== */

.leaf_box{
	position: absolute;
	top: 0;
	width: 100%;
}

.leaf_sp_box{
	display: none;
}

.leaf_bg1,.leaf_bg2,.leaf_bg3 {
	top:0;
	left:0;
	width:100%;
	height:15000px;
}

.leaf_bg1_sp,.leaf_bg2_sp,.leaf_bg3_sp {
	display: none;
}

.intro_leaf_bg1 {
	background-image:url(../image/intro_leaf_1.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 9;
}

.intro_leaf_bg2 {
	background-image:url(../image/intro_leaf_2.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 9;
}

.intro_leaf_bg3 {
	background-image:url(../image/intro_leaf_3.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 9;
}

.story_leaf_bg1 {
	background-image:url(../image/story_leaf_1.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 7;
}

.story_leaf_bg2 {
	background-image:url(../image/story_leaf_2.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 7;
}

.story_leaf_bg3 {
	background-image:url(../image/story_leaf_3.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 7;
}

.character_leaf_bg1 {
	background-image:url("../image/character_leaf_1.png");
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 5;
}

.character_leaf_bg2 {
	background-image:url("../image/character_leaf_2.png");
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 5;
}

.character_leaf_bg3 {
	background-image:url("../image/character_leaf_3.png");
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 5;
}

.gallery_leaf_bg1 {
	background-image:url(../image/gallery_leaf_1.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 7;
}

.gallery_leaf_bg2 {
	background-image:url(../image/gallery_leaf_2.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 7;
}

.gallery_leaf_bg3 {
	background-image:url(../image/gallery_leaf_3.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100%;
	z-index: 7;
}

.skrollable {
	position:absolute;
}

.intro_box{
	width: 100%;
	text-align: center;
	padding: 16% 0 ;
	position: relative;
	z-index: 10;
}

.news_box{
	width: 100%;
	text-align: center;
	padding: 4% 0 ;
	position: relative;
	z-index: 10;
}

.news_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: white;
}

.news_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #95D436;
}




.intro_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}

.intro_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #d7a732;
}

.intro_text_style1{
	font-size: clamp(1.0rem, 1vw, 1.2rem);
	padding: 30px 0;
}

.intro_sub_title_style2{
	font-style: italic;
	font-size: clamp(1.0rem, 1vw, 1.2rem);
}

.story_box{
	width: 100%;
	text-align: center;
	padding: 12% 0;
	position: relative;
	z-index: 10;
}

.story_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: white;
}

.story_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #cc719c;
}

.story_text_style1{
	font-size: clamp(1.0rem, 1vw, 1.2rem);
	padding: 30px 0;
	color: white;
}

.story_bg{
	width: 18%;
	position: absolute;
	right: 15%;
	bottom: 1px;
	z-index: 9;
}

.character_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-align: center;
	position: absolute;
	top: 100px;
	left: 50%;
	color: white;
	transform: translate(-50%,0%);
	text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
	z-index: 11;
}

.character_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #4ddaf2;
	text-align: center;
	position: absolute;
	top: 150px;
	left: 50%;
	transform: translate(-50%,0%);
	text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
	z-index: 11;
}

.character_box{
	width: 70%;
	min-width: 950px;
	height: auto;
	margin: auto;
	position: relative;
	z-index: 10;
}

.character_thumb_box .slick-track{
	display: flex!important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.character_thumb_box .slick-track::after{
    content: '';
    width: 100%;
}

.character_thumb_slick:nth-child(n+6){
	order: 1;
}

.character_thumb_slick{
	width: 70px!important;
}




.character_thumb_box div{
	letter-spacing: normal;
	position: relative;
	cursor: pointer;
}


.character_thumb_box .slick-list .slick-track {
	transform:unset!important;
}

.character_thumb_box div :hover{
	opacity: 0.7;
}

.character_bt_img_1{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_1.png");
	background-size: contain;
}

.slick-current .character_bt_img_1{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_1_a.png");
	background-size: contain;
}

.character_bt_img_2{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_2.png");
	background-size: contain;
}

.slick-current .character_bt_img_2{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_2_a.png");
	background-size: contain;
}

.character_bt_img_3{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_3.png");
	background-size: contain;
}

.slick-current .character_bt_img_3{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_3_a.png");
	background-size: contain;
}

.character_bt_img_4{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_4.png");
	background-size: contain;
}

.slick-current .character_bt_img_4{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_4_a.png");
	background-size: contain;
}

.character_bt_img_5{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_5.png");
	background-size: contain;
}

.slick-current .character_bt_img_5{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_5_a.png");
	background-size: contain;
}

.character_bt_img_6{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_6.png");
	background-size: contain;
}

.slick-current .character_bt_img_6{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_6_a.png");
	background-size: contain;
}

.character_bt_img_7{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_7.png");
	background-size: contain;
}

.slick-current .character_bt_img_7{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_7_a.png");
	background-size: contain;
}

.character_bt_img_8{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_8.png");
	background-size: contain;
}

.slick-current .character_bt_img_8{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_8_a.png");
	background-size: contain;
}

.character_bt_img_9{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_9.png");
	background-size: contain;
}

.slick-current .character_bt_img_9{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_9_a.png");
	background-size: contain;
}

.character_bt_img_10{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_10.png");
	background-size: contain;
}

.slick-current .character_bt_img_10{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_10_a.png");
	background-size: contain;
}

.character_bt_img_11{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_11.png");
	background-size: contain;
}

.slick-current .character_bt_img_11{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_11_a.png");
	background-size: contain;
}

.character_bt_img_12{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_12.png");
	background-size: contain;
}

.slick-current .character_bt_img_12{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_12_a.png");
	background-size: contain;
}

.character_bt_img_13{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_13.png");
	background-size: contain;
}

.slick-current .character_bt_img_13{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_13_a.png");
	background-size: contain;
}

.character_bt_img_14{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_14.png");
	background-size: contain;
}

.slick-current .character_bt_img_14{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_14_a.png");
	background-size: contain;
}

.character_bt_img_15{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_15.png");
	background-size: contain;
}

.slick-current .character_bt_img_15{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_15_a.png");
	background-size: contain;
}

.character_bt_img_16{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_16.png");
	background-size: contain;
}

.slick-current .character_bt_img_16{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_16_a.png");
	background-size: contain;
}

.character_bt_img_17{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_17.png");
	background-size: contain;
}

.slick-current .character_bt_img_17{
	width: 70px;
	height: 70px;
	background-image: url("../image/character_bt_17_a.png");
	background-size: contain;
}

.character_contents_box{
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 12%;
	width: 900px;
	transform: translate(-50%,0%);
}


.character_image{
	width: 54%;
	vertical-align: top;
	opacity:0;
	margin: 0 0 6% 0;
}

.slick-current .character_image{
	animation-name:charaAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes charaAnime{
  from {
    opacity: 0;
	transform: translateY(-100px) rotate(-10deg);
  }

  to {
    opacity: 1;
	transform: translateY(0) rotate(0deg);
  }
}

.character_text_box{
	position: absolute;
	vertical-align: top;
	top: 20%;
	left: 52%;
	filter: drop-shadow(0px 0px 4px #1688ca);
	z-index: 2;
}

.character_text_border{
	background-image: url("../image/character_border.png");
	background-size: cover;
	width: 100%;
	height: 1px;
}


.character_text_style1{
	font-size: clamp(1.2rem, 1vw, 1.6rem);
	letter-spacing: 0.2em;
	color: white;
}

.character_text_style2{
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	letter-spacing: 0.1em;
	color: white;
	display: inline-block;

}

.character_text_style3{
	color: white;
}

.character_text_style3 span{
	font-style: italic;
}

.character_text_style2 span{
	display: inline-block;
	vertical-align: 8px;
	font-size: 0.4em;
	padding: 0 0 0 10px;
}

.character_text_title_style1{
	font-style: italic;
	color: white;
	font-size: 0.8em;
	padding: 14px 0 0 0;
}

.character_text_box_2{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #8fdbe9;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_2{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #ffdc61;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_3{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #ffaab7;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_4{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #ffa555;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_5{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #c498d7;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_6{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #E8EF89;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_7{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #A4DEBF;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_8{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #927AC1;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_9{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #FFDEC0;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_10{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #43BA17;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_11{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #C42675;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_12{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #EA8B8B;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_13{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #CE6042;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_14{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #3BA3CC;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_15{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #303C42;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_16{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #7c9fd0;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_text_box_2_17{
	font-family: parlare, sans-serif;
	font-size: clamp(6rem, 5vw, 8rem);
	position: absolute;
	color: #7ae0e5;
	bottom: 26%;
	left: 44%;
	z-index: 1;
}

.character_image_text_1{
	position: absolute;
	top: 16%;
	left: 4%;
	z-index: 1;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.character_image_text_1 span{
	font-size: clamp(1.2rem, 1vw, 1.6rem);
	background-color: #fff;
	padding: 4px 2px;
}

.character_cv_voice_box{
	display: flex;
	
  align-items: center;
}

.character_cv_title{
	font-style: italic;
	color: white;
	font-size: 0.8em;
	line-height: 1.2em;
}

.character_cv_text{
	color: white;
	line-height: 1.2em;
	padding: 0 0 0 10px;
}

.character_voice_title{
	font-style: italic;
	color: white;
	font-size: 0.8em;
	line-height: 1.6em;
	padding: 0 0 0 15px;
}

.character_voice_icon{
	width: 14px;
	padding: 0 5px 0 10px;
}

.character_voice_bt{
	width: 30px;
	padding: 0 5px;
}

.character_cast_comment{
	width: 180px;
	padding: 10px 0 0 0;
	cursor:pointer;
}

.character_cast_comment:hover{
	opacity: 0.6;
}

.character_slider_box{
	margin-top: 300px;
}

.character_slider_wrapper{
	margin: 0 0 0 0;
}

.character_thumb_slick{
	float: none!important;
}

.movie_box_slick{
	height: auto;
}


.movie_box{
	transition: all 0.5s ease 0s;
	position: relative;
}

.movie_box img{
	filter:blur(10px);
	
}

.slick-active img{
	filter:blur(0px)!important;
}

.movie_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-align: center;
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translate(-50%,0%);
	text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
	pointer-events: none;
	z-index: 11;
}

.movie_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #4fc69a;
	text-align: center;
	position: absolute;
	top: 150px;
	left: 50%;
	transform: translate(-50%,0%);
	text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
	z-index: 11;
}

.movie_bt{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: 2;
	width: 4%;
	pointer-events: none;
}

.spec_box{
	width: 50%;
	margin: auto;
	text-align: center;
	padding: 8% 0 8%;
	position: relative;
	z-index: 10;
}

.spec_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: white;
}

.spec_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #b5a383;
}

.spec_table_box{
	display: flex;
	margin: 30px 0 40px 0 ;
}




.spec_table_box2{
	display: block;
}

.spec_table_box_style1_left{
	width: 25%;
	box-sizing: border-box;
}

.spec_table_box_style1_right{
	width: 75%;
	padding: 0 0 0 4%;
	box-sizing: border-box;
}

.spec_td_style1{
	width: 20%;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	color: white;
	font-size: 0.7vw;
	display: block;
	box-sizing: border-box;
}

.spec_td_style2{
	font-size: 0.7vw;
	color: white;
	text-align: left;
	padding: 0 0 0 15px;
	display: block;
	width: 30%;
	box-sizing: border-box;
}

.spec_td_style2_3{
	font-size: 0.7vw;
	color: white;
	text-align: left;
	padding: 0 0 0 15px;
	display: block;
	width: 80%;
	box-sizing: border-box;
}



.spec_table_style2{
	border-spacing: 0px;
}

.spec_tr_style1{
	display: flex;
	align-items:center;
	margin: 0 0 10px 0;
}

.spec_tr_style2{
	display: flex;
	align-items:center;
	margin: 0 0 5px 0;
	border-bottom: 1px solid #fff;
}

.spec_tr_style3{
	display: flex;
	align-items:center;
	padding: 0 0 5px 0;
	margin: 0 0 5px 0;
	border-bottom: 1px solid #fff;
}

.spec_td_style3{
	width: 20%;
	background-color: rgb(255 255 255 / 0.5);
	border-top: 1px solid #fff;
	font-size: 0.7vw;
	color: white;
	box-sizing: border-box;
}

.spec_td_style3_2{
	width: 40%;
	background-color: rgb(255 255 255 / 0.5);
	border-top: 1px solid #fff;
	font-size: 0.7vw;
	color: white;
	box-sizing: border-box;
}

.spec_td_style4{
	width: 20%;
	box-sizing: border-box;
	font-size: 0.7vw;
	color: white;
	border-right: 1px solid #fff;
}

.spec_td_style5{
	width: 80%;
	box-sizing: border-box;
	font-size: 0.7vw;
	color: white;
}

.spec_td_style6{
	width: 40%;
	font-size: 0.7vw;
	color: white;
	box-sizing: border-box;
	border-right: 1px solid #fff;
}

.spec_td_style7{
	width: 40%;
	font-size: 0.7vw;
	color: white;
	box-sizing: border-box;
}

.general_box{
	width: 50%;
	margin: 6% auto;
	box-sizing: border-box;
	padding: 3% 2%;
	position: relative;
	background-color: white;
	z-index: 10;
}

.general_text_wrapper{
	border-top: 1px solid #000;
	margin: 3% 0 0 0;
	padding: 3% 0 0 0;
}

.shop_title{
	font-family: the-seasons, sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: black;
	text-align: center;
}

.shop_sub_title_style1{
	font-family: parlare, sans-serif;
	font-size: clamp(1.0rem, 1vw, 1.4rem);
	color: #2EB3E6;
	text-align: center;
}

.shop_title_style1{
	border: 1px solid #2EB3E6;
	padding: 2px;
	text-align: center;
	color: #2EB3E6;
	font-size: 1vw;
}

.shop_text_style1{
	padding: 14px 0;
	font-size: 0.7vw;
	text-align: center;
}

.shop_text_style2{
	padding: 6px 10px;
	margin: 10px 0 30px;
	font-size: 0.7vw;
	line-height: 1.0vw;
	text-align: left;
	color: black;
	border:1px solid #2EB3E6;
}

.shop_text_style2 span{
	font-size: 0.8em;
}

.shop_link_box{
	display: flex;
	column-gap: 20px;
}

.shop_img_style1{
	width: 80%;
	margin: auto;
}

.shop_img_style2{
	width: 100%;
	margin: 15px  auto 0;
}

.shop_img_style3{
	width: 80%;
	margin: 15px  auto 0;
}

.shop_box_wrapper_1{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0;
}

.shop_box_wrapper_2{
	width: 50%;
	display: block;
	margin: 30px auto;
}

.shop_box_wrapper_3{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0;
}

.shop_box_style1{
	width: 50%;
	box-sizing: border-box;
	padding: 0 2%;
}

.shop_box_style2{
	width: 100%;
	box-sizing: border-box;
	padding: 0 2%;
}

.am_img_style1{
	width: 80%;
	margin: auto;
	padding: 20px 0 0 0;
}

.shop_title_style2 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  color: #2EB3E6;
}

.shop_box_style3{
	width: 50%;
	box-sizing: border-box;
	margin: 30px 0 0 0;
	padding: 0 2%;
}

.shop_title_style2:before, .shop_title_style2:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.shop_title_style2:before {
  border-left: solid 1px #2EB3E6;
  border-top: solid 1px #2EB3E6;
  border-bottom: solid 1px #2EB3E6;
  left: 0;
}
.shop_title_style2:after {
  content: '';
  border-top: solid 1px #2EB3E6;
  border-right: solid 1px #2EB3E6;
  border-bottom: solid 1px #2EB3E6;
  right: 0;
}

.shop_link_style1{
	width: 50%;
	text-align: center;
	border: 1px solid #000;
	border-radius: 20px;
	font-size: 0.8vw;
	margin: auto;
	position: relative;
}

.special_text_box_style1{
	width: 80%;
	margin: auto;
}

.special_text_wrapper{
	border-top: 1px solid #000;
	margin: 3% 0 0 0;
	padding: 3% 0 0 0;
	position: relative;
}

.special_title_box{
	position: relative;
	margin: 15px 0 15px;
}

.special_text_style2{
	margin: 15px 0 10px;
}

.special_text_style2 span{
	background-color: #2EB3E6;
	color: #fff;
	padding: 4px 12px;
	font-size: 0.7vw;
}

.special_text_style3{
	padding-left: 10px;
	font-size: 0.9vw;
	border-left: 2px solid #2EB3E6;
}

.special_text_style3 a{
	font-size: 1.0vw;
}

.special_text_style3 span{
	font-size: 0.6vw;
}

.special_title{
  font-size: 1.2vw;
  text-align: center;
  color: #2EB3E6;
  padding: 0 10px;
}

.special_title:before, .special_title:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;

  height: 100%;
  display: inline-block;
}
.special_title:before {
  border-left: solid 1px #2EB3E6;
  border-top: solid 1px #2EB3E6;
  border-bottom: solid 1px #2EB3E6;
  left: 0;
}
.special_title:after {
  content: '';
  border-top: solid 1px #2EB3E6;
  border-right: solid 1px #2EB3E6;
  border-bottom: solid 1px #2EB3E6;
  right: 0;
}

.special_link_bt_style1{
	width: 60%;
	margin: auto;
	border: 1px solid #2EB3E6;
	border-radius: 30px;
	text-align: center;
	padding: 8px 10px;
	position: relative;
}

.special_link_bt_style1:hover{
	background-color: #2EB3E6;
	color: white;
}

.special_icon_box_wrapper{
	width: 90%;
	margin: 20px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.special_icon_box{
	width: 33%;
	box-sizing: border-box;
	padding: 0 2%;
	text-align: center;
}

.special_icon_box a{
	text-decoration: none;
}

.special_icon_box2{
	width: 100%;
	box-sizing: border-box;
	padding: 2% 2%;
	text-align: center;
}

.illust_box_wrapper{
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction:row-reverse;
	box-sizing: border-box;
	padding: 3% 4% ;
	background-color: white;
}

.illust_box_style1{
	width: 50%;
	box-sizing: border-box;
	
}

.illust_box_style2{
	width: 50%;
	box-sizing: border-box;
	padding: 0 30px 0 0px;
}

.illust_text_style1{
	font-family: parlare, sans-serif;
	margin: 0 0 10px 0;
}

.illust_text_style1 span{
	font-family: parlare, sans-serif;
	background-color: rgb(46, 179, 230);
	padding: 4px 8px;
	color: white;
}

.illust_text_style2{
	font-size: 1.4em;
	color: rgb(46, 179, 230);
}

.illust_text_style3{
	font-size: 1.4em;
	text-align: center;
	background-color: rgb(46, 179, 230);
	color: white;
	margin: 0 0 20px 0;
}

.illust_main_box_wrapper{
	width: 100%;
	box-sizing: border-box;
	padding: 0 2%;
	display: flex;
	flex-wrap: wrap;
}

.illust_main_box{
	width: 33%;
	box-sizing: border-box;
	padding: 0 1%;
	position: relative;
	margin: 0 0 30px 0;
}

.illust_main_box:hover{
	opacity: 0.8;
}

.illust_main_img{
	margin: 10px 0 0 0;
}

.illust_bt_box_style1{
	width: 50%;
	margin: 20px auto;
	border: 1px solid #000;
	text-align: center;
	padding: 5px;
	border-radius: 30px;
	position: relative;
}

.illust_footer_box{
	width: 100%;
	border-top: 1px solid #000;
	margin: 50px 0 0 0;
}

.illust_header_box{
	width: 100%;
	border-top: 1px solid #000;
	margin: 10px 0;
	padding: 10px 0 0 0;
}

.illust_ouen_bt{
	text-align: center;
	border: 1px solid #000;
	padding: 6px;
	box-sizing: border-box;
	border-radius: 30px;
	margin: 10px 0 0 0;
}

.news_box_wrapper{
	width: 100%;
	margin: auto;
	display: block;
	box-sizing: border-box;
	padding: 3% 4% ;
	background-color: white;
}

.news_text_style1{
	font-family: parlare, sans-serif;
	margin: 0 0 10px 0;
}

.news_text_style1 span{
	font-family: parlare, sans-serif;
	background-color: rgb(46, 179, 230);
	padding: 4px 8px;
	color: white;
}

.news_text_style2{
	font-size: 1.4em;
	color: rgb(46, 179, 230);
}

.news_bt_box_style1{
	width: 50%;
	margin: 20px auto;
	border: 1px solid #000;
	text-align: center;
	padding: 5px;
	border-radius: 30px;
	position: relative;
}

.news_text_comment_style1{
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
}

.news_text_comment_style2{
	text-align: right;
}

#download_trial_image {
	height: 450px;
	width: 800px;
	position: relative;
	overflow: auto;
	padding-bottom: 20px;
	margin:auto;
}

#download_trial_image>div {
    position: absolute;
    top: 0;
    opacity: 0;
}

.download_text_box_style1{
	width: 800px;
	margin: auto;
}

.download_box{
	width: 1000px;
	margin: 6% auto;
	box-sizing: border-box;
	padding: 3% 2%;
	position: relative;
	background-color: white;
	z-index: 10;
	overflow: auto;
}

.download_text_style1{
	text-align: center;
}

.trial_title_box {
	background-color: #2EB3E6;
	color: #FFF;
	font-size: 24px;
	padding: 6px;
	text-align: center;
}

.trial_title_box2 {
	background-color: #fff;
	margin-bottom: 10px;
	font-size: 16px;
	color: #000;
	text-align:center;
	line-height: 20px;
	padding:10px;
}
.trial_table_style1 {
	background-color: #2EB3E6;
	font-weight: bold;
	color: #FFF;
	padding: 6px;
	font-size: 16px;
	text-align: center;
}
.trial_table_style2 {
	background-color: #fff;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	padding: 6px;
	text-align: center;
}

.download_text_style2{
	border:1px solid #000;
	padding: 10px;
	box-sizing: border-box;
	margin: 20px auto;
}

.sound_text_box{
	width: 100%;
	display: flex;
	box-sizing: border-box;
	padding: 1% 4% 4%;
}

.sound_text_box_style1{
	width: 50%;
	box-sizing: border-box;
	padding-right: 2%;
}

.sound_text_box_style1_2{
	width: 35%;
	box-sizing: border-box;
	padding-right: 2%;
}

.sound_text_box_style2{
	width: 50%;
	box-sizing: border-box;
	padding-left: 2%;
}

.sound_text_box_style2_2{
	width: 65%;
	box-sizing: border-box;
	padding-left: 2%;
}

.sound_text_title_style1{
	font-size: 1.2em;
	font-weight: bold;
	border-left: 4px solid #2EB3E6;
	padding: 0 0 0 10px;
	margin: 0 0 8px 0;
	text-align: left;
}

.sound_text_style1{
	font-size: 0.9em;
	line-height: 1.5em;
}

.sound_text_style2{
	text-align: center;
}

.sound_link{
	text-decoration: none;
	border: 1px solid #2EB3E6;
	padding: 4px 20px;
	color: #2EB3E6;
}

.sound_link:hover{
	background-color: #2EB3E6;
	color: white;
}

.event_table_style1{
	font-size:14px;
	color:black;
	text-align:center;
	line-height:30px;
	border:solid 1px #2EB3E6;
}

.event_table_style2{
	font-size:14px;
	line-height:30px;
	padding-left:20px;
}

.event_table_title{
	background-color: #2EB3E6;
	text-align: center;
	color: white;
}

/* CollapsiblePanel */
#CollapsiblePanel1 {
  width: 100%;
}

.CollapsiblePanelTab {
  cursor: pointer;
  user-select: none;
}

.CollapsiblePanelContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.CollapsiblePanelOpen .CollapsiblePanelContent {
  max-height: 5000px;
  transition: max-height 0.8s ease-in-out;
}


/* motal_setting
================================================== */

.comment_hide{
	display: none;
	position: relative;
	z-index: 99;
}


/* scroll_icon_setting
================================================== */

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	z-index: 99;
	left: 50%;
	transform: translate(0%, -50%);
	bottom:0px;
    /*全体の高さ*/
	height:30px;
	font-family: the-seasons, sans-serif;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-16px;
	top: -20px;
    /*テキストの形状*/
	color: #000;
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	font-family: the-seasons, sans-serif;
	font-style: italic;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:40px;
		opacity: 0;
	}
}

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

/* tablet_setting
================================================== */

@media screen and (max-width: 899px){
	
	.menu_box{
		width: 100%;
		position: fixed;
		z-index: 99;
		background-image: linear-gradient(0deg, rgba(40, 178, 230, 0) 0%, rgba(40, 178, 230, 1) 100%);
		padding: 3% 0 5%;
		text-align: center;
		font-family: the-seasons, sans-serif;
		color: white;
		font-size: 1em;
	}
	.first_view_wrapper{
		width: 100%;
		height: 100vh;
		min-height: 900px;
		background-image: url("../image/fv_main_bg_sp.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
		position: relative;
		z-index: 2;
	}
	.fv_logo{
		width: 40%;
		min-width: 250px;
		margin: auto;
		padding: 2.5% 0 0 0;
		opacity:0;
		position: absolute;
		top: 4%;
		left: 50%;
		transform: translate(-50%,0%);
	}
	.fv_catch{
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		position: absolute;
		top: 22%;
		left: 50%;
		transform: translate(-50%,0%);
		font-size: clamp(1.0rem, 1vw, 1rem);
		font-family: fot-tsukuaoldmin-pr6n, sans-serif;
		color: white;
		letter-spacing: 0.2em;
		line-height: 1.7em;
		text-shadow: 0 0 20px #1191d6,0 0 20px #1191d6,0 0 20px #1191d6;
		opacity: 0;
	}
	.key_white_logo{
		width:8%;
		position: absolute;
		bottom:10%;
		right: 50px;
		display: block;
	}
	.character_box{
		width: 70%;
		min-width: 90%;
		height: auto;
		margin: auto;
		position: relative;
		z-index: 10;
		padding-top: 10%;
	}
	.character_contents_box{
		position: absolute;
		z-index: 10;
		left: 51%;
		top: 12%;
		width: 600px;
	}
	.footer_logo{
		width: 30%;
		margin: 10px auto 0;
		position: relative;
		z-index: 99;
	}

	.footer_sns_box{
		width:30%;
		margin: 20px auto 0;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;	
		position: relative;
		z-index: 99;
	}
	.character_image{
		width: 70%;
		vertical-align: top;
		opacity:0;
		margin: 0 0 30% 0;
	}
}

/* Smartphone_setting
================================================== */
@media screen and (max-width: 699px){

	.news_bt_box_style1{
		width: 90%;
		margin: 20px auto;
		border: 1px solid #000;
		text-align: center;
		padding: 5px;
		border-radius: 30px;
		position: relative;
	}

	.news_box_wrapper{
		width: 100%;
		margin: auto;
		display: block;
		flex-direction:row-reverse;
		box-sizing: border-box;
		padding: 0 2% 3%;
		border-bottom: 1px solid #000;
	}

	.illust_main_box{
		width: 50%;
		box-sizing: border-box;
		padding: 0 1%;
		margin: 0 0 10px 0;
		position: relative;
	}

	.illust_box_wrapper{
		width: 100%;
		margin: auto;
		display: block;
		flex-direction:row-reverse;
		box-sizing: border-box;
		padding: 0 2% 3%;
		border-bottom: 1px solid #000;
	}

	.illust_box_style1{
		width: 100%;
		box-sizing: border-box;
		margin: 0 0 20px 0;

	}

	.illust_box_style2{
		width: 100%;
		box-sizing: border-box;
		padding: 0 30px 0 0px;
	}
	.illust_text_style1{
		font-family: parlare, sans-serif;
		margin: 0 0 0px 0;
	}

	.illust_text_style2{
		font-size: 1.4em;
		color: rgb(46, 179, 230);
	}
	
	.news_text_style1{
		font-family: parlare, sans-serif;
		margin: 0 0 0px 0;
	}

	.news_text_style2{
		font-size: 1.4em;
		color: rgb(46, 179, 230);
	}
	
	.header_logo{
		display: none;
	}
	.header_logo_fix{
		display: none;
	}
	.menu_box{
		display: none;
	}
	.first_view_wrapper{
		width: 100%;
		height: auto;
		min-height: auto;
		padding: 0 0 0 0;
		background-image: none;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
		position: relative;
		z-index: 2;
	}
	.fv_sp_img{
		display: block;
	}
	.leaf_bg1,.leaf_bg2,.leaf_bg3 {
		display: none;
	}
	.fv_logo{
		width: 54%;
		min-width: 250px;
		margin: auto;
		padding: 2.5% 0 0 0;
		opacity:0;
		position: absolute;
		top: 2%;
		left: 50%;
		transform: translate(-50%,0%);
	}

	.fv_catch{
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		position: absolute;
		top: 22%;
		left: 50%;
		transform: translate(-50%,0%);
		font-size: clamp(1.0rem, 1vw, 1rem);
		font-family: fot-tsukuaoldmin-pr6n, sans-serif;
		color: white;
		letter-spacing: 0.2em;
		line-height: 1.7em;
		text-shadow: 0 0 20px #1191d6,0 0 20px #1191d6,0 0 20px #1191d6;
		opacity: 0;
	}
	.fv_text_style1{
		font-family: parlare, sans-serif;
		font-size: clamp(1.8rem, 1.1vw, 4.2rem);
		position: absolute;
		bottom: 8%;
		left: 50%;
		transform: translate(-50%,0%);
		color: #7ca0d1;
	}

	.fv_text_style2{
		font-family: the-seasons, sans-serif;
		font-size: clamp(2.0rem, 2vw, 3.0rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translate(-50%,0%);
		color: #231815;
		white-space: nowrap
	}
	.fv_text_style3{
		font-family: fot-tsukuaoldmin-pr6n, sans-serif;
		font-size: clamp(1.2rem, 1vw, 1.4rem);
		position: absolute;
		letter-spacing: 0.2em;
		bottom: 16%;
		left: 50%;
		transform: translate(-50%,0%);
	}

	
	.key_black_logo{
		width: 12%;
		padding: 0 4% 0% 0;
		float: right;
		position: relative;
		display: block;
	}
	.key_white_logo{
		display: none;
	}
	
	.intro_title{
		font-family: the-seasons, sans-serif;
		font-size: clamp(2.6rem, 5vw, 3.8rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}
	.story_title{
		font-family: the-seasons, sans-serif;
		font-size: clamp(2.6rem, 5vw, 3.8rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		color: white;
	}
	.gallery_title{
		font-family: the-seasons, sans-serif;
		font-size: clamp(2.6rem, 5vw, 3.8rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		color: white;
	}
	.character_title{
		font-family: the-seasons, sans-serif;
		font-size: clamp(2.6rem, 5vw, 3.8rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		position: relative;
		top: 0px;
		left: 50%;
		transform: translate(-50%,0%);
		text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
		z-index: 11;
	}
	.movie_title{
		font-family: the-seasons, sans-serif;
		font-size: clamp(2.6rem, 5vw, 3.8rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		position: absolute;
		top: 50px;
		left: 50%;
		transform: translate(-50%,0%);
		text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
		pointer-events: none;
		z-index: 11;
	}
	
	.spec_title{
		font-family: the-seasons, sans-serif;
		font-size: clamp(2.6rem, 5vw, 3.8rem);
		font-weight: 300;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		color: white;
	}
	
	.intro_sub_title_style1{
		font-family: parlare, sans-serif;
		font-size: clamp(1.4rem, 1vw, 1.8rem);
		color: #d7a732;
	}
	.story_sub_title_style1{
		font-family: parlare, sans-serif;
		font-size: clamp(1.4rem, 1vw, 1.8rem);
		color: #cc719c;
	}
	.character_sub_title_style1{
		font-family: parlare, sans-serif;
		font-size: clamp(1.4rem, 1vw, 1.8rem);
		color: #4ddaf2;
		text-align: center;
		position: relative;
		top: 0px;
		left: 50%;
		transform: translate(-50%,0%);
		text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
		z-index: 11;
	}
	.movie_sub_title_style1{
		font-family: parlare, sans-serif;
		font-size: clamp(1.4rem, 1vw, 1.8rem);
		color: #4fc69a;
		text-align: center;
		position: absolute;
		top: 100px;
		left: 50%;
		transform: translate(-50%,0%);
		text-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;
		z-index: 11;
	}
	.intro_wrapper{
		width: 100%;
		min-height: auto;
		position: relative;
		overflow: hidden;
		background-image: url("../image/intro_bg.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
	}
	.intro_text_style1{
		font-size: clamp(1.0rem, 1vw, 1.2rem);
		padding: 30px 0;
	}
	.intro_text_style2{
		font-size: 0.8em;
	}
	.intro_box{
		width: 100%;
		text-align: center;
		padding: 30% 0 ;
		position: relative;
		z-index: 10;
	}
	
	.story_wrapper{
		width: 100%;
		min-height: auto;
		position: relative;
		overflow: hidden;
		background-image: url("../image/story_bg.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
	}

	.spec_wrapper{
		width: 100%;
		min-height: auto;
		position: relative;
		overflow: hidden;
		background-image: url("../image/spec_bg_sp.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
	}

	.spec_table_box{
		display: block;
		width: 88%;
		margin: 30px auto 40px ;
	}

	.story_box{
		width: 100%;
		text-align: center;
		padding: 30% 0;
		position: relative;
		z-index: 10;
	}
	
	.spec_box{
		width: 100%;
		text-align: center;
		padding: 20% 0;
		position: relative;
		z-index: 10;
	}
	
	.spec_table_box_style1_left{
		width: 50%;
		margin: auto;
		box-sizing: border-box;
	}

	.spec_table_box_style1_right{
		width: 100%;
		padding: 0 0 0 4%;
		box-sizing: border-box;
	}
	
	.spec_tr_style1{
		display: flex;
		flex-wrap: wrap;
		align-items:center;
		margin: 10px 0 10px 0;
	}
	
	.spec_td_style1{
		width: 20%;
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
		color: white;
		font-size: 2vw;
		display: block;
		box-sizing: border-box;
		margin: 10px 0 10px 0;
	}

	.spec_td_style2{
		font-size: 2.8vw;
		color: white;
		text-align: left;
		padding: 0 0 0 15px;
		display: block;
		width: 80%;
		box-sizing: border-box;
	}

	.spec_td_style2_3{
		font-size: 2.8vw;
		color: white;
		text-align: left;
		padding: 0 0 0 15px;
		display: block;
		width: 80%;
		box-sizing: border-box;
	}
	.spec_td_style3{
		width: 20%;
		background-color: rgb(255 255 255 / 0.5);
		border-top: 1px solid #fff;
		font-size: 2vw;
		color: white;
		box-sizing: border-box;
	}

	.spec_td_style3_2{
		width: 40%;
		background-color: rgb(255 255 255 / 0.5);
		border-top: 1px solid #fff;
		font-size: 2vw;
		color: white;
		box-sizing: border-box;
	}
	.spec_td_style4{
		width: 20%;
		box-sizing: border-box;
		font-size: 2vw;
		color: white;
		border-right: 1px solid #fff;
	}

	.spec_td_style5{
		width: 80%;
		box-sizing: border-box;
		font-size: 2vw;
		color: white;
	}

	.spec_td_style6{
		width: 40%;
		font-size: 2vw;
		color: white;
		box-sizing: border-box;
		border-right: 1px solid #fff;
	}

	.spec_td_style7{
		width: 40%;
		font-size: 2vw;
		color: white;
		box-sizing: border-box;
	}

	.gallery_box{
		width: 100%;
		text-align: center;
		padding: 30% 0 0%;
		min-height: auto;
		height: auto;
		position: relative;
		z-index: 10;
	}
	
	.story_text_style1{
		font-size: clamp(1.0rem, 1vw, 1rem);
		padding: 30px 0;
		color: white;
	}

	.character_wrapper{
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.character_box_bg{
		width: 100%;
		padding: 70px 0 0;
		min-height: auto;
		background-image: url("../image/character_bg_sp.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: right bottom;
	}
	.character_box{
		width: 100%;
		min-width: auto;
		height: auto;
		margin: auto;
		position: relative;
		z-index: 10;
		padding: 0;
	}
	.character_image{
		width: 100%;
		vertical-align: top;
		opacity:0;
		margin: 0 0 6% 0;
		position: absolute;
		top:0;
	}
	.character_contents_box{
		position: relative;
		z-index: 10;
		left: 0;
		top: 0px;
		width: 90%;
		margin: auto;
		padding: 3% 0 0 0;
		margin-bottom: -8%;
		transform: translate(0%, 0%);
	}

	.character_slider_box{
		margin-top: 0;
	}

	.character_bt_img_1{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_1.png");
		background-size: contain;
	}

	.slick-current .character_bt_img_1{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_1_a.png");
		background-size: contain;
	}

	.character_bt_img_2{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_2.png");
		background-size: contain;
	}

	.slick-current .character_bt_img_2{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_2_a.png");
		background-size: contain;
	}

	.character_bt_img_3{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_3.png");
		background-size: contain;
	}

	.slick-current .character_bt_img_3{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_3_a.png");
		background-size: contain;
	}

	.character_bt_img_4{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_4.png");
		background-size: contain;
	}

	.slick-current .character_bt_img_4{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_4_a.png");
		background-size: contain;
	}

	.character_bt_img_5{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_5.png");
		background-size: contain;
	}

	.slick-current .character_bt_img_5{
		width: 70px;
		height: 70px;
		background-image: url("../image/character_bt_5_a.png");
		background-size: contain;
	}
	.character_image_text_1{
		position: relative;
		margin-top: 10%;
		margin-bottom: 8%;
		top: 0;
		left: 6%;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	.character_text_box{
		position: relative;
		vertical-align: top;
		width: 100%;
		height: auto;
		min-height: 500px;
		padding: 6% 6% 12% 6% ;
		box-sizing: border-box;
		top: 0%;
		left: 0%;
		filter: drop-shadow(0px 0px 4px #1688ca);
		z-index: 2;
		background-image: linear-gradient(0deg, rgba(65, 141, 204, 0.5)50%, rgba(65, 141, 204, 0));
	}
	.character_text_style2{
		font-size: clamp(2rem, 3vw, 2.8rem);
		letter-spacing: 0.1em;
		color: white;
		display: inline-block;

	}
	.character_text_box_2{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		color: #8fdbe9;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_2{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		color: #fddf5b;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_3{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		color: #ffa6b7;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_4{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		color: #faaa61;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_5{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		color: #c29ad6;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_6{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_7{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_8{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_9{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_10{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_11{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_12{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_13{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_14{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_15{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_16{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_box_2_17{
		font-family: parlare, sans-serif;
		font-size: clamp(6rem, 5vw, 8rem);
		position: absolute;
		bottom: 40%;
		left: auto;
		right: 0px;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		line-height: 1em;
	}
	.character_text_style3{
		font-size: 0.8em;
		color: white;
	}
	.movie_bt{
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		position: absolute;
		z-index: 2;
		width: 18%;
		pointer-events: none;
	}
	
	.footer_wrapper{
		background-color: white;
		padding: 6% 0;
	}

	.footer_wrapper2{
		background-image: url("../image/footer_bg.png");
		background-repeat: repeat-x;
		background-position: top center;
		padding: 100px 0 2%;
		position: relative;
	}
	
	.footer_data_box{
		position: relative;
		margin-top: 10px;
		min-height: 60px;
	}
	
	.footer_logo{
		width: 50%;
		margin: auto;
		position: relative;
		z-index: 99;
	}

	.footer_sns_box{
		width:30%;
		margin: 10px auto 20px;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;	
		position: relative;
		z-index: 99;
	}
	
	.footer_sp_logo{
		width: 48%;
		margin: 0 auto 30px;
		display: block;
	}
	
	.leaf_sp_box{
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.leaf_bg1_sp,.leaf_bg2_sp,.leaf_bg3_sp {
		display: block;
		top:0;
		left:0;
		width:100%;
		height:15000px;
	}
	.intro_leaf_bg1_sp {
		background-image:url(../image/intro_leaf_1_sp.png);
		background-repeat: repeat-y;
		background-attachment: fixed;
		background-size: 100%;
		z-index: 9;
	}
	.story_leaf_bg1_sp {
		background-image:url(../image/story_leaf_1_sp.png);
		background-repeat: repeat-y;
		background-attachment: fixed;
		background-size: 100%;
		z-index: 7;
	}
	.character_leaf_bg1_sp {
		background-image:url("../image/character_leaf_1_sp.png");
		background-repeat: repeat-y;
		background-attachment: fixed;
		background-size: 100%;
		z-index: 5;
	}
	.gallery_leaf_bg1_sp {
		background-image:url(../image/gallery_leaf_1_sp.png);
		background-repeat: repeat-y;
		background-attachment: fixed;
		background-size: 100%;
		z-index: 3;
	}
	
	.general_box{
		width: 88%;
		margin: 6% auto;
		box-sizing: border-box;
		padding: 6% 4%;
		position: relative;
		background-color: white;
		z-index: 10;
	}
	
	.general_text_wrapper{
		border-top: 1px solid #000;
		margin: 6% 0 0 0;
		padding: 6% 0 0 0;
	}
	.shop_title_style1{
		border: 1px solid #2EB3E6;
		padding: 2px;
		text-align: center;
		color: #2EB3E6;
		font-size: 2.6vw;
	}

	.shop_text_style1{
		padding: 14px 0;
		font-size: 2.4vw;
		text-align: center;
	}

	.shop_text_style2{
		padding: 10px 8px;
		font-size: 2.4vw;
		line-height: 4.0vw;
		text-align: left;
	}

	.shop_img_style1{
		width: 100%;
		margin: auto;
	}

	.shop_img_style2{
		width: 100%;
		margin: 15px  auto 0;
	}

	.shop_img_style3{
		width: 80%;
		margin: 15px  auto 0;
	}

	.am_img_style1{
		width: 100%;
		margin: auto;
		padding: 20px 0 0 0;
	}


	.shop_box_wrapper_1{
		width: 100%;
		display: block;
		flex-wrap: wrap;
		margin: 20px 0;
	}

	.shop_box_wrapper_2{
		width: 100%;
		display: block;
		margin: 30px auto;
	}

	.shop_box_wrapper_3{
		width: 100%;
		display: block;
		flex-wrap: wrap;
		margin: 30px 0;
	}

	.shop_box_style1{
		width: 100%;
		box-sizing: border-box;
		padding: 0 2%;
	}
	
	.shop_box_style2{
		width: 100%;
		box-sizing: border-box;
		padding: 0 2%;
	}
	
	.shop_box_style3{
		width: 100%;
		box-sizing: border-box;
		margin: 30px 0 0 0;
		padding: 0 2%;
	}
	.shop_link_style1{
		width: 50%;
		text-align: center;
		border: 1px solid #000;
		border-radius: 20px;
		font-size: 2.8vw;
		margin: auto;
	}
	.gallery_bt_box{
		display: flex;
		flex-wrap: wrap;
		width: 80%;
		margin: 20px auto 0px;
		position: relative;
		z-index: 10;
	}

	.gallery_bt_style1{
		width: 47%;
		box-sizing: border-box;
		padding: 1%;
		border-radius: 30px;
		color: white;
		border: 1px solid #fff;
		margin: 0 1.5%;
		cursor: pointer;
	}
	
	.gallery_cg_box_1{
		display: none;
		flex-wrap: wrap;
		width: 80%;
		margin: auto;
		top: 0;
		left: 0%;
		padding: 4% 0 ;
		z-index: 10;
		opacity: 0;
		animation-duration:1s;
		animation-fill-mode:forwards;
		pointer-events: none;
	}

	.gallery_cg_box_1.active{
		display: flex;
		animation-name: fadeanime;
		animation-duration:1s;
		animation-fill-mode:forwards;
		pointer-events: auto;
	}

	.gallery_cg_box_2{
		display: none;
		flex-wrap: wrap;
		width: 80%;
		margin: auto;
		top: 0;
		left: 0%;
		padding: 4% 0 ;
		z-index: 10;
		opacity: 0;
		animation-duration:1s;
		animation-fill-mode:forwards;
		pointer-events: none;
	}

	.gallery_cg_box_2.active{
		display: flex;
		animation-name: fadeanime;
		animation-duration:1s;
		animation-fill-mode:forwards;
		pointer-events: auto;
	}

	.gallery_cg_thum_1{
		width: 50%;
		box-sizing: border-box;
		padding: 1%;
	}

	.news_box{
		width: 100%;
		text-align: center;
		padding: 8% 0 ;
		position: relative;
		z-index: 10;
	}
	.news_info_box{
		box-sizing: border-box;
		display: flex;
		letter-spacing: normal;
		background-color: white;
		padding: 0 0 0% 0;
		width: 88%;
		margin: 15px auto;
		position: relative;
	}

	.news_img{
		padding: 3% 0;
		width: 40%;
		box-sizing: border-box;
	}
	.news_text{
		font-size: clamp(0.8rem, 1vw, 1.2rem);
		line-height: 3vw;
		padding: 3% 3%;
		text-align: left;
		width: 70%;
		min-height: auto;
	}
	.news_data{
		position: absolute;
		right: 0;
		bottom: -4px;
		font-size: 5vw;
		line-height: 0.8vw;
		font-family: the-seasons, sans-serif;
		letter-spacing: 0.1em;
		color: #95D436;
	}

	.news_box_page{
		width: 100%;
		letter-spacing: -1em;
	}
	.gallery_screen_1{
		position: relative;
		top: 0;
		width: 100%;
		min-width: auto;
		margin: auto;
	}

	.gallery_screen_2{
		position: relative;
		top: 0;
		width: 100%;
		margin: auto;
		min-width: auto;
	}
	.spec_table_box2{
		display: block;
		width: 88%;
		margin: 30px auto 40px auto ;
	}

	.fv_link_bt_style1{
		display: none;
	}

	.fv_link_bt_style2{
		display: none;
	}
	.fv_link_bt_style1_sp{
		width: 60%;
		padding: 0px 0 20px;
		margin: auto;
		display: block;
	}

	.special_text_box_style1{
		width: 100%;
		margin: auto;
	}
	
	.special_title{
	  font-size: 3.0vw;
	  text-align: center;
	  color: #2EB3E6;
	}

	.special_text_style2 span{
		background-color: #2EB3E6;
		color: #fff;
		padding: 4px 12px;
		font-size: 2.4vw;
	}

	.special_text_style3{
		padding-left: 10px;
		font-size: 3.0vw;
		border-left: 2px solid #2EB3E6;
	}
	.special_text_style3 span{
		font-size: 2.0vw;
	}
	.special_text_style3 a{
		font-size: 3.0vw;
	}
	.special_link_bt_style1{
		width: 80%;
	}
	.special_icon_box_wrapper{
		width: 96%;
		margin: 20px auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.special_icon_box{
		width: 50%;
		box-sizing: border-box;
		padding: 0 2%;
		text-align: center;
	}
	.illust_ouen_bt{
		text-align: center;
		font-size: 0.8em;
		border: 1px solid #000;
		padding: 6px;
		box-sizing: border-box;
		border-radius: 30px;
		margin: 10px 0 0 0;
	}
	
	.download_box{
		width: 88%;
		margin: 6% auto;
		box-sizing: border-box;
		padding: 6% 4%;
		position: relative;
		background-color: white;
		z-index: 10;
	}

	.download_text_box_style1{
		display: none;
	}
	.download_text_style1{
		text-align: left;
		font-size: 0.8em;
	}

	.sound_text_box{
		width: 100%;
		display: block;
		box-sizing: border-box;
		padding: 1% 4% 4%;
	}

	.sound_text_box_style1{
		width: 100%;
		box-sizing: border-box;
		padding-right: 0%;
		margin-bottom: 10px;
	}

	.sound_text_box_style1_2{
		width: 60%;
		margin: auto;
		margin-bottom: 10px;
		box-sizing: border-box;
		padding-right: 0%;
	}

	.sound_text_box_style2{
		width: 100%;
		box-sizing: border-box;
		padding-left: 0%;
		text-align: center;
		margin-bottom: 10px;
	}

	.sound_text_box_style2_2{
		width: 100%;
		box-sizing: border-box;
		padding-left: 0%;
	}

	.sound_text_style1{
		font-size: 0.9em;
		line-height: 1.5em;
		text-align: left;
	}

	.event_text_box_style1{
		display: block;
		vertical-align: top;
	}

	.event_text_img_style1{
		width: 100%;
		padding-right: 0%;
	}

	.event_text_style1{
		width: 100%;
		margin: 10px 0;
	}

	.event_text_style2{
		background-color: #2EB3E6;
		color: white;
		padding: 10px;
		margin-top: 10px;
		line-height: 1.4em;
	}

}

/* sst (soundtrack) setting
================================================== */

.sst-shop-item {
	border: 1px solid #20c1dd;
	padding: 10px;
	margin: 0;
	box-sizing: border-box;
	width: calc(50% - 5px);
	display: block;
	text-decoration: none;
	color: inherit;
}

.sst-shop-item:hover {
	background-color: #20c1dd;
	color: #fff;
}

@media screen and (max-width: 699px) {
	.sst-shop-item {
		width: 100%;
	}
}