/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
@import url('https://fonts.googleapis.com/earlyaccess/sawarabimincho.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Orbitron:wght@400..900&family=Shippori+Mincho&display=swap');

/*=================================
layout
=================================*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: 'Noto Sans JP', sans-serif;
	color: #fff;
	font-size: 16px;
    background-image: url("../img/common/bg.jpg");
    background-size: 90px;
}
.faderight,
.fadeleft ,
.fadeup ,
.fade {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
}
img{vertical-align: bottom;}
:root {
	--bg-base: #000;
	--line-color: #820000;
	--dt-color: #a08f50;
}

/*表示*/
.view_pc{display: block;}
.view_pc_tb{display: block;}
.view_tb{display:none;}
.view_tb_sp{display:none;}
.view_sp{display:none;}

/*==================
load
==================*/
#pagetop {
    width: 80px;
    text-align: center;
    position: fixed;
    cursor: pointer;
    z-index: 5;
    bottom: -4%;
    right: 2%;
    background-size: 100%;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#pagetop a{
    position: relative;
    width: 100%;
    background-size: 100%;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#pagetop:hover{
    bottom: -2%;
}
#pagetop a:hover{
    
}
#pagetop img{
	width: 100%;
}


/*==================
BG
==================*/

html {
  height:100%;
}

body {
  margin:0;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #ccc 50%, #fff 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:8s;
}

.bg3 {
  animation-duration:10s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

/*==================
BG
==================*/

/**/
.contents_bg{
    background-image: url("../img/common/bg_left_bottom.png"),url("../img/common/bg_star.png"),
        url("../img/common/bg_right_top.png"),url("../img/common/bg_star.png");
    background-repeat: no-repeat;
    background-position: left bottom, right bottom, right top, left top;
    background-size: 39.2%,11.6%, 39.2%,11.6%;
    padding-bottom: 2.0em;
}
/*==================
header
==================*/

header{
	position: fixed;
	font-family: 'Noto Serif JP', serif;
	z-index: 5;
	width: 100%;
    
}
header .header_link a.page_link{
}
header .header_link a.page_link:nth-child(even){
	background-color: #f0f0f0;
}
header .header_link .nav_btn{
	margin-left: 20px;
}


nav{
    top: 0;
    z-index: 11;
    width: 100%;
	margin: 0;
    border-top: none;
    position: fixed;
    background-color: rgba(255,255,255,0.50);
    border-bottom: 3px solid #ff65a9;
}
.nav_wrap{
    margin: 0 auto;
    padding: 0.5% 0;
    width: 100%;
    padding-right: 3.0%;
}
nav a{
    display: inline-block;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    transition: 1s all;
    margin: 0 0.2em;
    position: relative;
}
nav a span{
    display: inline-block;
    color: #7c7c7c;
    line-height: 1.2em;
    font-size: clamp(1.125rem, 0.875rem + 0.52vw, 1.5rem);
    font-weight: bold;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF,  0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;
    padding: 0 0.8em 1.0em 0.8em;
}
nav a small{
    background-color: #7c7c7c;
    color: #fff;
    width: 100%;
    display: inline-block;
    font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
    
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    
}
nav a:hover,
nav a.select{}
nav a:hover span,
nav a.select span{
    color: #ff65a9;
}
nav a:hover small,
nav a.select small{
    background-color: #ff65a9;
}
nav a.select_non{
    opacity: 0.4;
    pointer-events: none;
}

nav a .new{
	position: absolute;
	right: -0.8em;
	top: -0.3em;
	z-index: 2;
    max-width: 53px;
    width: 32%;
}
nav .sns{
    width: 2.0%;
    max-width: 40px;
    
    position: absolute;
    right: 2%;
    top: 25%;
}
nav .sns a{
    display: inline-block;
    width: 100%;
}
nav .sns a img{
    width: 100%;
}
nav .sns a:hover{
    opacity: 0.7;
}
nav .icon_x{
    display: none;
}

nav .nav_box{
	text-align: center;
}
nav .nav_close{
    
    display: none;
}
nav .nav_close .nav_on{
	opacity: 0.0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
nav .nav_close:hover .nav_on{
	opacity: 1.0;
}
nav.close_st{
}
nav.open_st{
	transform: translateX(0);
}

.display_off{
	display: none;
}
.display_on{
	display: block;
}


.nav_img{
    background-size: 100%;
    width: 100%;
    transition: 0.3s all;
}


/*.nav_img*/
nav a img.nav_top{
    background-image: url("../img/nav/nav_top.png");
    
}
nav a:hover img.nav_top,
.select img.nav_top{
    background-image: url("../img/nav/nav_top_on.png");
}
/**/
nav a img.nav_story{
    background-image: url("../img/nav/nav_story.png");
}
nav a:hover img.nav_story,
.select img.nav_story{
    background-image: url("../img/nav/nav_story_on.png");
}
/**/
nav a img.nav_chara{
    background-image: url("../img/nav/nav_chara.png");
}
nav a:hover img.nav_chara,
.select img.nav_chara{
    background-image: url("../img/nav/nav_chara_on.png");
}
/**/
nav a img.nav_gallery{
    background-image: url("../img/nav/nav_gallery.png");
}
nav a:hover img.nav_gallery,
.select img.nav_gallery{
    background-image: url("../img/nav/nav_gallery_on.png");
}
/**/
nav a img.nav_system{
    background-image: url("../img/nav/nav_system.png");
}
nav a:hover img.nav_system,
.select img.nav_system{
    background-image: url("../img/nav/nav_system_on.png");
}
/**/
nav a img.nav_sound{
    background-image: url("../img/nav/nav_sound.png");
}
nav a:hover img.nav_sound,
.select img.nav_sound{
    background-image: url("../img/nav/nav_sound_on.png");
}
/**/
nav a img.nav_special{
    background-image: url("../img/nav/nav_special.png");
}
nav a:hover img.nav_special,
.select img.nav_special{
    background-image: url("../img/nav/nav_special_on.png");
}
/**/
nav a img.nav_product{
    background-image: url("../img/nav/nav_product.png");
}
nav a:hover img.nav_product,
.select img.nav_product{
    background-image: url("../img/nav/nav_product_on.png");
}

/*==================
contents
==================*/
h2.read{
    color: #ff65a9;
    font-size: min(7.0vw, 48px);
    margin: 1.0em auto 0.5em auto ;
    max-width: 7em;
    line-height: 0.7em;
}
h2.read small{
    color: #fff;
    background-color: #ff65a9;
    display: inline-block;
    padding: 0 1.0em;
    font-size: min(3.0vw, 18px);
    line-height: 1.6em;
    font-weight: normal;
}
h3.read{
    color: #ff65a9;
    font-size: min(7.0vw, 48px);
    margin: 1.0em auto 0.5em auto ;
    max-width: 800px;
    line-height: 0.7em;
    font-weight: normal;
    width: 90%;
    background-color: #fff;
    border: solid #e53f7a 3px;
    border-radius: 5px;
    padding: 0.5em 0;
    background-image: url("../img/common/bg_h3_left.jpg"), url("../img/common/bg_h3_right.jpg");
    background-repeat:  repeat-y , repeat-y;
    background-position: left top, right top;
    text-align: center;
}
h3.read small{
    color: #fff;
    background-color: #ff65a9;
    display: inline-block;
    padding: 0 1.0em;
    font-size: min(3.0vw, 18px);
    line-height: 1.6em;
    font-weight: normal;
}
.more_btn{
    padding: 0.5em 1.0em;
    color: #fff;
    background-color: #ff65a9;
    border: 3px solid #fff;
    box-shadow: 5px 5px 0 #c7c7c7;
    width: 240px;
    text-align: center;
    margin: 0.5em auto;
    display: inline-block;
    border-radius: 100px;
    transition: all 0.3s ease-out;
    font-size: min(3.2vw, 24px);
}
.more_btn:hover{
    opacity: 1.0;
    box-shadow: 0 0 0 #c7c7c7;
    transform:translate(0,5px);
}
.select_box{
	padding: 1.0em 0;
	text-align: center;
}
.select_box a img{
	width: 100%;
}
.select_box a .new{
	position: absolute;
	top: 5%;
	right: 5%;
	width: 20%;
    max-width: 100px;
	opacity: 1;
	z-index: 1;
}
.btn{
	display: inline-block;
	background-color: #000;
	color: #fff;
	padding: 1.0em;
	margin: 0 auto;
	min-width: 300px;
	text-align: center;
	box-shadow: 5px 5px 0 #4f0000;
	-mos-box-shadow: 5px 5px 0 #4f0000;
	-webkit-box-shadow: 5px 5px0 #4f0000;
	
	transition: background .2s;
    -webkit-transition: background .2s;
    -moz-transform: background .2s;
    overflow: hidden;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #820000 50%);
    background-position: 0 0;
    background-size: auto 200%;
	border: 1px solid #000;
}

.sub_nav{
	width: 90%;
    text-align: center;
    margin: 2% auto 4% auto;
}

.sub_nav a{
    color: #fff;
    background-color: #e53f7a;
    border: 3px solid #fff;
    box-shadow: 5px 5px 0 #c7c7c7;
    margin: 0.2em;
    padding: 0.3em 0.5em;
    border-radius: 10px;
    font-weight: 500;
    display: inline-block;
    
    transition: background .2s;
    -webkit-transition: background .2s;
    -moz-transform: background .2s;
    font-size: min(3.2vw,24px);
}
.sub_nav a.select{
    color: #f16999;
    background-color: #fdecf2;
}
.sub_nav a:hover{
    color: #f16999;
    background-color: #fdecf2;
}

/*==================
top
==================*/
#top{
    /*background-color: #0e315a;*/
}
#top h3{}
#top #key{
	width: 100%;
	position: relative;
}
#top #key img{
	width: 100%
}


#top #key .view_pc{
	/*overflow: hidden;*/
	position: relative;
	width: 100%;
}
#top #key .view_tb_sp{
	overflow: hidden;
	position: relative;
	width: 100%;
}

#top #key img.key_on2{
	position: absolute;
	left: 40%;
	bottom: 5%;
	z-index: 2;
	opacity: 0.0;
    max-width: 312px;
    width: 17%;
    
}
#top #key img.key_on1{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	opacity: 0.0;
}
#top #key img.key_bg{
}
/**/
#top .banner_box_info,
#top .banner_box_connect{
	width: 100%;
	text-align: center;
	padding: 1.0em 0;
}
#top .banner_box_info{
	background-color: #4f0000;
	
}
#top .banner_box_info a,
#top .banner_box_connect a{
	display: inline-block;
	max-width: 400px;
	width: 30%;
	margin: 0.5%;
	box-sizing: border-box;
	border: #000 2px solid;
}
#top .banner_box_info a:hover,
#top .banner_box_connect a:hover{
	opacity: 0.7;
}
#top .banner_box_info a img,
#top .banner_box_connect a img{
	width: 100%;
}
/**/
.top_banner_area{
    width: 100%;
    text-align: center;
    
    padding: 3% 0 5% 0;
}
.top_banner_area .slider{
    width: 90%;
    margin: 0 auto;
}
.top_banner_area .slider .slick-dots{
    bottom: -25px;
}
.top_banner_area .slider .slick-dots li button:before{
    color: #c7c7c7;
    opacity: 1.0;
}
.top_banner_area .slider .slick-dots li.slick-active button:before{
    color: #ff65a9;
}
.top_banner_area .slick-dots li button:before{
    font-size: 20px;
    
}
.top_banner_area a{
    max-width: 600px;
    width: 99%;
    margin: 1%;
    display: inline-block;
    position: relative;
}
.top_banner_area a img{
    width: 100%;
}
.top_banner_area a:hover{
    opacity: 0.7;
}
/**/
#top_info{
}

#top_info #news_box{
	width: 100%;
    margin: 0 auto;
}
#top_info #news_box .box{
	overflow-y: scroll;
    height: 15em;
    color: #274a78;
    max-width: 1060px;
    margin: 0 auto;
    font-weight: bold;
    line-height: 1.6em;
    font-size: 1.5em;
    width: 86%;
}
/**/
#top_movie {
	position: relative;
	display: block;
	height: 350px;
	overflow: hidden;
    background-color: #ff65a9;
}
.top_movie_wrap{
    position: relative;
    border: #c7c7c7 10px solid;
}
.movie_top{
    width: 15.57%;
    position: absolute;
    top: 2%;
    left: 1%;
    z-index: 2;
}
#top_movie::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	display: block;
	z-index: 1;
}
#top_movie::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	display: block;
	background-image: url("../img/common/btn_play.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 40%;
	z-index: 2;
	transition: transform .5s ease;
}
#top_movie:hover::after {
  transform: scale(1.2);
}

/**/
#top .top_read{
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	background-image: url(../img/top/read_bg.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	padding: 10% 0  10% 0;
	margin-top: -16%;
}
#top .top_read .read_txt{
	max-width: 1100px;
	width: 65%;
}

/**/
#top .product{
	box-sizing: border-box;
	width: 100%;
	margin: 3% auto 0 auto;
	padding: 1.0em;
	text-align: center;
    
}
.product_wrap{
    max-width: 1400px;
    margin: 0 auto;
}
.product_box .jacket,
.product .jacket{
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
    
}
.product_box .jacket img,
.product .jacket img{
	width: 100%;
	max-width: 765px;
}
.product_box .spec,
.product .spec{
	width: 100%;
	display: inline-block;
	padding: 1% 0;
	box-sizing: border-box;
	text-align: center;
    max-width: 600px;
    background-color:rgba(255,255,255,0.50);
}

.spec table{
	width:97%;
	margin-left:auto;
	margin-right:auto;
	line-height:1.6;
    text-align: left;
    
    text-indent: initial;
	border-collapse: separate;
	margin-bottom: 1.0em;
    border-spacing: 2px;
}
.spec table th{
    color: #fff;
	white-space: nowrap;
    background-color: #f16999;
    font-weight: normal;
    padding: 0.2em;
    margin-bottom: 0.1em;
    text-align: center;
    min-width: 12em;
}
.spec table td{
	padding-left:3px;
	text-align: left;
    color: #000;
    vertical-align: middle;
    padding: 0 1%;
    width: 100%;
    border-bottom: none;
}
.spec table .cero td{
    border-bottom: 0;
}
/*==================
news
==================*/
#top_news{
    text-align: center;
}
.news_box{
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
}
.news_box .log{
    color: #000;
    border-bottom: #b0b0b0 3px solid;
    text-align: left;
    padding: 1.0em;
}
.news_box .log dt{
    color: #ff65a9;
}
.news_box .log dd{}
.news_box .log dd a{
    color: #ff65a9;
}
.news_box .log dd a:hover{
    opacity: 0.7;
}

/*==================
story
==================*/
#story{
	text-align: center;
    background-image: url("../img/story/bg1.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
#world .sub_nav a,
#story .sub_nav a{
    min-width: 16em;
}
#story .box{
	padding-top: 6%;
	width: 100%;
	min-height: 80vh;
}
#story .story_txt{
    width: 100%;
    margin: 0 auto;
    max-width: 762px;
    padding-bottom: 2.0em;
    
    color: #000;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
    
    line-height: 1.6em;
    font-weight: 500;
}
#story .story_txt strong{
    font-weight: 500;
    font-size: 1.2em;
}
#story .story_txt .f_pink{
    color: #ff65a9;
}
/**/
#world{
    
}
#world .box{
	padding-top: 6%;
	width: 100%;
	min-height: 80vh;
}
#world .world_box{
    margin: 0 auto;
    max-width: 1000px;
    color: #000;
    width: 90%;
}
#world .world_box section{
    border: solid 3px #c7c7c7;
    padding: 1.0em;
    background-color: #fff;
    width: 100%;
    margin: 1.0em auto;
    border-radius: 30px;
    text-align: left;
}
#world .world_box section h3{
    color: #ff65a9;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
    margin-bottom: 0.5em;
    border-left: 0.5em solid #ff65a9;
    padding-left: 4px;
}
#world .world_box section h4{
    color: #fff;
    background-color: #ff65a9;
    padding: 0.3em;
}
#world .world_box section .in_box{
    border:#ff65a9 solid 1px;
    padding: 1.0em;
    margin: 1% 0;
}
#world .world_box section strong{
    color: #ff65a9;
    margin: 0.3em 0;
    display: inline-block;
}



/*==================
gallery
==================*/
#gallery{
}
#gallery .box{
	padding-top: 6%;
	width: 100%;
	min-height: 80vh;
}
/**/
.cg_box{
    margin: 0 auto;
    max-width: 1100px;
    width: 90%;
    padding-bottom: 2.0em;
}
.cg_box a{
    position: relative;
    width: 30%;
    display: inline-block;
    background: linear-gradient(180deg, #ffffff, #ffedcc);
    padding: 1%;
    box-sizing: border-box;
    margin: 1%;
    transition: 0.3s all;
}
.cg_box a:hover{
    background: linear-gradient(180deg, #ffffff, #f8b4c9);
}
.cg_box a img{
    width: 100%;
}
.cg_box a .new{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30%;
}
/**/
#cgBox {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: auto;
    background-color: #cfcfc9;
    color: #000;
}
#cgBox #galleryImg {
	box-sizing: border-box;
	display: block;
	width: 100%;
}
#cgBox img {
	box-sizing: border-box;
	display: block;
	width: 100%;
}
#cgBox dl {
	padding: 3%;
}
#cgBox dl dt {
	font-weight: bold;
	text-shadow: none;
	padding: 5px 10px;
	border: solid 1px #fff;
}
#cgBox dl dt.cgc0 {
	color: #fff;
	background: #FFBABC;
    
}
#cgBox dl dt.cgc1 {
    color: #fff;
	background: #8491c3;
}
#cgBox dl dt.cgc2 {
	color: #fff;
	background: #674196;
}
#cgBox dl dt.cgc3 {
	color: #fff;
	background: #b7282d;
}
#cgBox dl dt.cgc4 {
	color: #fff;
	background: #f3a7a5;
}
#cgBox dl dt.cgc5 {
	color: #fff;
	background: #89c3eb;
}
#cgBox dl dt.cgc_other {
	color: #fff;
	background: #446ba9;
}
#cgBox dl dd {
	display: block;
	/*text-indent: -1em;
	padding: 5px 5px 5px 1em;
	background-color: #fff;*/
	background: rgb(255,255,255,0.7);
	padding: 10px;
	margin-bottom: 1em;
}
#cgBox dl dd.cgc0 {
    text-indent: -1em;
    padding-left: 1em;
}
#cgBox dl dd.cgc1 {
    text-indent: -1em;
    padding-left: 1em;
}
#cgBox dl dd.cgc2 {
    text-indent: -1em;
    padding-left: 1em;
}
#cgBox dl dd.cgc3 {
    text-indent: -1em;
    padding-left: 1em;
}
#cgBox dl dd.cgc4 {
    text-indent: -1em;
    padding-left: 1em;
}
#cgBox dl dd.cgc5 {
    text-indent: -1em;
    padding-left: 1em;
}
#cgBox dl dd.cgc_other {
    text-indent: -1em;
    padding-left: 1em;
}
#cgBox dl dd.nonIndent {
	text-indent: 0;
	background: none;
	padding-left: 0;
}



/*==================
system
==================*/
#system{}
.system_box{
	width: 90%;
	max-width: 1100px;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 2.0em;
}
.system_read{
    padding: 0.5em;
    margin: 0 auto;
    font-size: 1.6em;
    background-image: url("../img/sound/theme/read_bg_left.png"),
        url("../img/sound/theme/read_bg_right.png"),
        url("../img/sound/theme/read_bg_tx.jpg");
    width: 100%;
    position: relative;
    background-position:left top,right bottom,center center;
    background-size: 30%, 30%, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
    border: 2PX solid #85a9d7;
    box-sizing: border-box;
}
.system_box section{
    margin: 1.0em 0;
}
.system_box section .in_box{
    border: 2px solid #3b69a4;
    background-color: rgba(255,255,255,0.80);
}

.system_in_wrap {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
    padding: 0.5em;
}
.system_in_wrap .txt {
	box-sizing: border-box;
	width: 52%;
    color: #0e315a;
    text-align: left;
    padding: 1.0em 3%;
    margin: 1%;
}
.system_in_wrap .image {
	box-sizing: border-box;
	width: 46%;
}
.system_in_wrap .image img {
	display: block;
	width: 100%;
	max-width: 1280px;
}
.system_in_wrap .slick-dots li button:before{
    opacity: 1.0;
    color: #fff;
}
.system_in_wrap .slick-dots li.slick-active button:before{
    color: #ff95ea;
}


/*==================
info
==================*/
#info{
	text-align: center;
}
#info .box{
	padding-top: 6%;
	width: 100%;
	min-height: 80vh;
}

.product_box{
	box-sizing: border-box;
	width: 100%;
	margin: 3% auto 0 auto;
	padding: 1.0em;
	text-align: center;
	/*font-size: 1.5em;*/
	/*font-weight: bold;*/
}
.product_box h3 img{
    width: 100%;
}
.product_wrap{
    max-width: 1400px;
    margin: 0 auto;
}

/**/
.info_box{
    padding-bottom: 2.0em;
    color: #000;
}
.info_box h4{
    width: 100%;
    text-align: center;
}
.info_box h4 img{
    width: 100%;
    max-width: 1100px;
}
/**/
ul.caution{
	margin-top: 0.5em;
}
ul.caution li {
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	max-width: 1140px;
	margin: 0 auto;
}
ul.caution li::before{
	content: "※";
	display: inline-block;
	text-indent: 0em;
}
.info_box section{
    border: 3px solid #ff65a9;
}
.info_box section .sample_img{
	width: 100%;
	max-width: 1300px;
    text-align: center;
    background-color: #fff;
}
.info_box section .sample_img img,
.info_box section .shop_img img{
	width: 100%;
    max-width: 700px;
}
.info_box section .txt{
	text-align: left;
}
.info_box section .txt p{
    padding: 0.2em;
    box-sizing: border-box;
}

.info_edition_box section {
	width: 90%;
	margin: 0 auto;
	max-width: 1000px;
}
.info_edition_box section .sample_img{
	/*float: left;
	width: 50%;*/
}

.info_edition_box section .txt{
	/*float: right;
	width: 50%;*/
	padding: 1.0em;
	box-sizing: border-box;
    background-color: #fff;
}
.info_box section h3{
	padding: 0.5em;
	box-sizing: border-box;
	color: #fff;
	background-color: #4d7dc1;
}
.info_box section h4{
	padding: 0.5em;
    color: #fff;
    background-color: #f16999;
    box-sizing: border-box;
    border-bottom: #fff solid 2px;
    text-align: left;
}
.info_box section h5{
    padding: 0.5em;
    color: #fff;
    background-color: #4d7dc1;
    box-sizing: border-box;
    font-size: 1.0em;
    margin: -0.5em -0.5em 0.5em -0.5em;
}


/*-------*/
/*特典*/
ul.caution li {
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	max-width: 1300px;
	margin: 0 auto;
}
ul.caution li::before{
	content: "※";
	display: inline-block;
	text-indent: 0em;
}
/**/
section .txt strong{
    display: inline-block;
}
.detail{
    border: dotted #f16999 1px;
    margin-bottom: 0.5em;
    padding: 0.5em;
    display: inline-block;
    width: 100%;
}
.sample_box section{
    margin: 1.0em auto 4.0em auto;
}

.sample_box section .sample_img{
	width: 50%;
	max-width: 800px;
    float: left;
}
.sample_box section .shop_img{
	width: 100%;
	max-width: 800px;
}
.sample_box section .sample_img img,
.sample_box section .shop_img img{
	width: 100%;
}
.sample_box section .txt{
    width: 50%;
    float: left;
	text-align: left;
    /*★*/
}
.sample_box section.store_sample{
    width: 48%;
    margin: 1%;
    float: left;
}
.sample_box section.store_sample .sample_img,
.sample_box section.store_sample .txt{
    width: 100%;
    float: none;
}

.sample_box h3{
    text-align: left;
}
.sample_box h4{
    color: #f5458f;
    border-left: 6px solid #f5458f;
    margin-bottom: 3px;
}

.sample_box span{
    display: inline-block;
    border: 3px solid #817c84; 
    padding: 0.5em;
    box-sizing: border-box;
    margin: 0.5em auto;
}
.sample_box .txt span{
    width: 100%;
}
/**/

.tgr_btn,
.shop_link_box a{
    color: #fff;
    padding: 0.5em;
    border: double #fff 4px;
    background-color: #000;
    display: inline-block;
    margin: 0.3em;
}
.shop_link_box a:hover{
    opacity: 0.7;
}
/**/
.store_box{
    max-width: 1100px;
    margin: 0 auto;
}
.store_box_caution{
}
.store_box_caution .caution{
    border: 1px dotted #fff;
    padding: 1.0em;
    background-color: rgba(3, 0, 58, 0.60);
}
.store_box section{
    width: 48%;
    float: left;
    background-color: rgba(3, 0, 58, 0.60);
    margin: 1%;
}
.store_box section .txt{
    padding: 0.5em;
}
.set_box{
    padding: 0.5em;
    margin: 0.5em 0;
    border: 2px solid #4d7dc1;
}
.info_box section .store_name{
    text-align: center;
}
.tgr_btn{
    cursor: pointer;
}
.tgr_box1,.tgr_box2,.tgr_box3,.tgr_box4{
    display: none;
    transition: 0.3s all;
}
/*==================
special
==================*/
.sns_item_box{}
.sns_item_box .sns_icon{
    width: 100%;
    margin:0 auto;
    padding: 0 0 3.0em 0;
    max-width: 1000px;
    
}
.sns_item_box .icon_r{
    border-radius: 50%;
    width: 22%;
    margin: 1%;
}
/**/
.ss_select{}
.ss_select a{
    position: relative;
    display: inline-block;
    width: 30%;
    max-width: 275px;
}
.ss_select a img{
    transition: 0.3s all;
    width: 100%;
}
.ss_select a .on_banner{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.ss_select a:hover .on_banner,
.ss_select a.select .on_banner{
    opacity: 1;
}
.ss_box{
    background-color: rgba(255,255,255,0.80);
    color: #0e315a;
    text-align: left;
    margin: 1.0em auto;
    max-width: 1100px;
    width: 90%;
    padding:  1.0em 1.0em 2.0em 1.0em;
    font-size: 1.2em;
}
.ss_box h3{
    text-align: center;
    margin: 0.5em 0;
}
.ss_txt{}
.ss_box hr{
    border: none;
    height: 2px;
    background-color: #0e315a;
}
/**/
.ss_box h3.backnum_read{
    background-image: url("../img/special/backnum/read_pc.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    max-width: 768px;
    margin: 0 auto 1.0em auto;
    color: #fff;
    padding: 0.5em;
    position: relative;
}
.ss_box h3.backnum_read::before {
    content: '';
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    width: 72px;
    height: 45px;
    background-image: url("../img/special/backnum/right_top.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}
.ss_box h3.backnum_read::after {
    content: '';
    position: absolute;
    bottom: -1.0em;
    left: -1.0em;
    width: 100px;
    height: 50px;
    background-image: url("../img/special/backnum/left_bottom.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}
.backnum .img_cg{
    text-align: center;
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
}
.backnum .ss_txt{
    max-width: 768px;
    margin: 0 auto;
}
.backnum #cgBox{
    background-color: transparent;
}
/**/
.interview_box{
    margin: 0 auto;
    width: 96%;
    max-width: 1100px;
    padding-bottom: 2.0em;
}
.interview_box section{
    margin: 0.5em 0;
}
.interview_btn{
    position: relative;
    cursor: pointer;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* 重要: WebViewでクリック可能要素として認識させる */
    touch-action: manipulation;
}
.interview_btn:hover{
    opacity: 0.8;
}
.interview_btn img{
    width: 100%;
}
.interview_btn .new{
    position: absolute;
    top: 1%;
    right: -1%;
    width: 10%;
    max-width: 75px;
}
.interview_btn::before {
    content: '';
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    width: 10%;
    height: 50%;
    background-image: url('../img/special/comment/open.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.interview_box section .open::before {
    background-image: url('../img/special/comment/close.png');
}

.interview_txt{
    background-color: #fff;
    border: 2px solid #8491c3;
    display: none;
}
.interview_txt h4{
    color: #fff;
    background-color: #8491c3;
    text-align: left;
    font-weight: normal;
    padding: 0.3em;
    font-size: 1.5em;
    text-indent: -1.3em;
    padding-left: 1.3em;
    position: relative;
}

.interview_txt h4::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url("../img/special/comment/icon.jpg") no-repeat;
    background-size: contain;
    margin-right: 2px;
    vertical-align: text-top;
}

.interview_txt h4.new::after{
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    background-color: #fb9eb0;
    background-size: contain;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: text-top;
    position: absolute;
    left: 0.1em;
    top: 0.15em;
}

.interview_txt p{
    padding: 1.0em;
    color: #0e315a;
    text-align: left;
    font-size: 1.2em;
}




/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1100px) {
/*==================
nav
==================*/
nav a span{
    font-size: clamp(1rem, 0.444rem + 1.16vw, 1.313rem);
    line-height: 0.8em;
}
nav a small{
    font-size: clamp(0.625rem, 0.403rem + 0.46vw, 0.75rem);
}
    
/*==================
info
==================*/
	#product .shop_info section{
		float: none;
		width: 100%;
		margin: 2% 0;
	}

    
}/*max-width: 1100px*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
	body{
		font-size: 2.2vw;
        background-size: 10.0vw;
	}
	
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: block;}
.view_tb{display:block;}
.view_tb_sp{display:block;}
.view_sp{display:none;}
    
/*==================
header
==================*/

header{
	position: fixed;
	font-family: 'Noto Serif JP', serif;
	z-index: 7;
	width:auto;
}
header .header_link{
    display: inline-block;
    }
header .header_link .logo{
	float: left;
}
header .header_link .page_nav{
	float: left;
    margin: 5px 0 0 5px ;
}
header .header_link .page_nav a{
	position: relative;
}
header .header_link .page_nav a .nav_on{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.0;
}
header .header_link .page_nav a:hover .nav_on{
	opacity: 1.0;
}
    header .header_link .page_nav a img{
        width: 100%;
        max-width: 80px;
    }

header .header_link a.page_link{
	display: inline-block;
	padding: 1.7em 1.61em;
	min-width: 200px;
	text-align: center;
	background-color: #f7f7f7;
	margin: 0;
	float: left;
	color: #555;
}
header .header_link a.page_link:nth-child(even){
	background-color: #f0f0f0;
}
header .header_link .nav_btn{
	margin-left: 20px;
}
header .header_link .nav_btn,
header .header_link .nav_btn_open{
	display: inline-block;
	float: left;
	cursor: pointer;
    background-color: #ff65a9;
}

nav{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 6;
	overflow: auto;
    
    margin: 0 ;
    width: 100%;
    background-size: 20%;
    border-radius: 0;
    transition: 0.5s all;
    border: none;
}
.nav_wrap{
    padding-right: 0;
	padding-bottom: 5%;
	min-height: 100vh;
    border-radius: 0;
    background-color:rgba(255,255,255,0.80);
}
nav a{
	box-sizing: border-box;
	position: relative;
    display: inline-block;
    width: 90%;
    margin: 2% 1%;
}
nav a span{
    font-size: clamp(1.125rem, 0.857rem + 1.34vw, 1.5rem);
    line-height: 1.2em;
    padding-bottom: 0.7em;
}
nav a .new{
	position: absolute;
	right: -8%;
	top: 4%;
	z-index: 2;
    width: 30%;
    max-width: 100px;
}

nav .sns{
    display: none;
	/*text-align: center;
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
    position: relative;*/
    
}
nav .sns a{
    /*width: 100%;
    display: inline-block;*/
}
    
nav .icon_x{
    display: block;
    text-align: center;
    width: 30%;
    margin: 0 auto;
    padding-top: 20px;
    position: relative;
    max-width: 40px;
}
nav .icon_x a{
    width: 100%;
    display: inline-block;
}
nav .icon_x img{
    width: 100%;
}
  
nav .nav_box{
	width: 100%;
	margin: 0 auto;
	text-align: center;
    padding-top: 60px;
    max-width: 350px;
}
nav .nav_box .nav_on{
	opacity: 0.0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
nav .nav_box a:hover .nav_on{
	opacity: 1.0;
}
nav .nav_close{
	cursor: pointer;
	display: inline-block;
	position: relative;
    float: left;
    margin-right: 2%;
    
}
nav .nav_close .nav_on{
	opacity: 0.0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
nav .nav_close:hover .nav_on{
	opacity: 1.0;
}

nav.close_st{
	transform: translateX(-595px);
    opacity: 0;
}
nav.open_st{
	transform: translateX(0);
    opacity: 1;
}
.nav_btn_open .drawer-icon {
width: 36px;
height: 25px;
position: relative;
z-index: 51;
background-color: #ff65a9;
border: none;
cursor: pointer;
margin: 15px 10px;
}
.active .drawer-icon .drawer-icon__bar:nth-of-type(1) {
top: 10px;
-webkit-transform: rotate(30deg);
      transform: rotate(30deg);
}
.active .drawer-icon .drawer-icon__bar:nth-of-type(2) {
display: none;
}
.active .drawer-icon .drawer-icon__bar:nth-of-type(3) {
top: 10px;
-webkit-transform: rotate(-30deg);
      transform: rotate(-30deg);
}

.drawer-icon__bar {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 3px;
border-radius: 6px;
background: #fff;
-webkit-transition: top 0.3s linear, -webkit-transform 0.3s linear;
transition: top 0.3s linear, -webkit-transform 0.3s linear;
transition: transform 0.3s linear, top 0.3s linear;
transition: transform 0.3s linear, top 0.3s linear, -webkit-transform 0.3s linear;
}
.drawer-icon__bar:nth-of-type(2) {
top: 9px;
}
.drawer-icon__bar:nth-of-type(3) {
top: 18px;
}

#screen {
    /*background-color: #faa9a8;*/
    z-index: 5;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
	opacity: 0.7;
}
.display_off{
	display: none;
}
.display_on{
	display: block;
}
.nav_img{
    background-size: 100%;
}

    
/*==================
header
==================*/
	nav{
		width: 100vw;
	}
	nav.close_st {
		transform: translateX(-100vw);
	}
	nav .nav_box a:hover .nav_on{
		opacity: 0.0;
	}
/*==================
contents
==================*/
	.contents{
		width: 100%;
		float: none;
	}
	.contents_bg{
        
	}
	.select_box{
		padding: 0.5em 0.5em 0.5em 3.8em;
	}
	.select_box a{
		font-size: 1.6em;
	}
    .sub_nav a{
        width: 48%;
        padding: 1.0em 0.5em;
    }
	.bar{
		width: 1%;
		max-width: 8px;
	}
    h3.read{
        background-size: 7.8%, 7.8%;
        width: 82%;
    }
    h3.read img{
    }
    .br_tb{
        display: block;
    }
    .more_btn{
            padding: 1.0em;
    }
/*==================
top
==================*/
	
	#top #key .top_banner{
		width: 70%;
		bottom: 0;
	}
    
	#top .banner_box_info a,
	#top .banner_box_connect a{
		width: 44%;
	}
    .top_banner_area a{
        width: 100%;
        margin: 0;
    }
    .top_banner_area a.count_btn{
        width: 90%;
        margin: 0 auto 10px auto;
    }
	#top .top_read{
		background-size: 150%;
	}
	#top .product{
		margin-top: 5%;
	}
	#top .product .jacket{
		text-align: center;
		width: 100%;
	}
	#top .product .spec{
		width: 100%;
	}
    /**/
    #top_movie{
        height: 200px;
    }
    .movie_top{
        width: 30%;
    }
    .top_movie_wrap{
        overflow: hidden;
    }
    .top_movie_wrap .movie_title{
        width: 200%;
        left: -50%;
    }
    /**/
    #top .product{
        background-size: 20%;
    }
    
    #top .product .spec table th{
        margin-bottom: 0;
        box-sizing: border-box;
    }
    #top .product .spec table td{
        display: inline-block;
        border-bottom: none;
        text-align: center;
        line-height: 1.8em;
    }
    
/*==================
story
==================*/
    #story{
	}
    #world .sub_nav,
    #story .sub_nav {
        display: flex;
        gap: 0.4em;
    }
    #world .sub_nav a ,
    #story .sub_nav a {
        flex: 1;
        padding: 1.0em 0.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: inherit;
    }
    
    #story .story_txt{
        text-align: left;
        padding: 1.0em;
        
    }
    #story .box,
    #world .box{
		text-align: center;
		font-size: 1.0em;
        padding-top: 50px;
	}
    
/*==================
gallery
==================*/
    .movie_box{
        width: 100%;
    }
    .movie_read{
        width: 100%;
    }
    .movie_section{
        width: 100%;
    }
    .movie_box a{
        width: 90%;
    }
    /**/
    .cg_box a{
        width: 100%;max-width: 343px;
    }
/*==================
product
==================*/
    #info{
    }
    #info .box{
        padding-top: 50px;
    }
    
	.product_box{
		/*margin-top: 5%;*/
		/*font-size: 1.4em;*/
		/*width: 90%;*/
	}
	.product_box .jacket{
		text-align: center;
		width: 100%;
	}
	.product_box .spec{
		width: 100%;
	}
    .spec table{border-spacing:0;}
    .spec table th,
    .product_box .spec table th{
        margin-bottom: 0;
        box-sizing: border-box;
        text-align: center;
        display: inline-block;
        width: 100%;
    }
    .product_box .spec table td{
        display: inline-block;
        border-bottom: none;
        text-align: center;
        line-height: 1.8em;
    }
    /**/
    .sample_box section.store_sample{
        width: 100%;
        margin-bottom: 2.0em;
    }
    .sample_box section .txt,
    .sample_box section .sample_img{
        width: 100%;
        float: none;
        font-weight: bold;
    }
    .sample_box section.store_sample:last-child{
        margin-bottom: 10%;
    }
    #product .box:has(.store_sample){
        padding-bottom: 15%;
    }
    /**/
    .info_edition_box section .sample_img{
        width: 100%;
        float: none;
    }
    .info_edition_box section .txt{
        width: 100%;
        float: none;
    }
    /**/
    .store_box{
        width: 96%;
    margin: 0 auto;}
    .store_box section{
        width: 98%;
        float: none;
        box-sizing: border-box;
        margin: 3% 1%;

    }
/*==================
special
==================*/
.sns_item_box .icon_r{
    width: 40%;
    margin: 1%;
    }
}/*max-width: 768px*/


/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
	body{
		font-size: 3.2vw;
		background-attachment: fixed;
	}
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: none;}
.view_tb{display:none;}
.view_tb_sp{display:block;}
.view_sp{display:block;}
    
    #pagetop:hover img{
	opacity: 1.0;
    }
    
/*==================
top
==================*/
    .content_more:hover img.banner_on{
        opacity: 0;
    }
    
    
/*==================
info
==================*/
	#product h2{
		font-size: 4.2vw;
	}
/*==================
special
==================*/
	#special{
		padding:  24% 0 15% 0;
	}
	
}/*media:480*/