@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
/*特典見出し*/
@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
/*bgm*/
@import url('https://fonts.googleapis.com/css2?family=Bevan&display=swap');

body {
	position: relative;
	color: #000;
	font-size: 1.5vw;
	line-height: 1.6;
	letter-spacing: -0.5px;
	font-weight: 500;
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/* font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; */
	background: #000;
}

h2 {
	z-index: 0;
	display: block;
	position: relative;
	color: #fff;
	font-size: 6vw;
	font-weight: bold;
	line-height: 1;
	background-color: #000;
	padding: 1.5%;
}
h2::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background-image: url(../img/stripe_pink.png);
	background-size: auto 30%;
	width: 45%;
	height: 50%;
}

.showPc {
	display: inline;
}
.showSp {
	display: none;
}

.ly {
	color: #eb6fa5;
}
.gi {
	color: #e8373f;
}
.sh {
	color: #5ea9c9;
}
.ra {
	color: #ef7a2b;
}
.ke {
	color: #a1c911;
}
.al {
	color: #ad4b98;
}
.cl {
	color: #d30567;
}
.ow {
	color: #407dc0;
}





/* footer
--------------------------------------------------*/
footer {
	z-index: 10000;
	position: relative;
	color: #fff;
	font-size: 12px;
	background: #000;
	padding: 3%;
	text-align:center;
}
footer img,
footer #snsBox a img,
footer #brandBox a img {
	display: block;
	width: 100%;
}
footer #hardLogo {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 10%;
	max-width: 100px;
}
footer #copy {
	margin-bottom: 0.5vw;
}
footer #snsBox {
	margin-bottom: 2vw;
}
footer #snsBox a {
	display: inline-block;
	vertical-align: bottom;
	width: 40px;
	margin-right: 5px;
}

footer #brandBox {
	margin-bottom: 1vw;
}
footer #brandBox a {
	display: inline-block;
	vertical-align: bottom;
	margin-right: 15px;
	min-width: 70px;
}
footer #snsBox a:hover,
footer #brandBox a:hover{ opacity: 0.7;}

footer .notice{ font-weight: bold; font-size:15px; margin-bottom:10px;}





/* ///////////////////////////////////////////////////////////
///loading
/////////////////////////////////////////////////////////// */
.loading {
	z-index: 1000000;
	/* position: absolute; */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #373a4a;
	background-image: url(../img/bg_loading.jpg);
	background-size: cover;
	background-position: center center;
	padding-left: 2%;
	display: none;
	box-sizing: border-box;
}
.loading span {
	font-family: 'Lobster', cursive;
	font-size: 15vw;
	line-height: 1;
	color: #fff;
	text-shadow: 0px 0px 10px #000;
	animation: flash 1s linear infinite;
}






/* header
--------------------------------------------------*/
header {
	z-index: 100000;
	box-sizing: border-box;
	display: -webkit-inline-flex;
	display: inline-flex;
	position: fixed;
	top: 0;
	left: -27.1%;
	bottom: 0;
	font-size: 2vw;
	font-weight: bold;
	background: #e4117e;
	width: 33%;
	transition: all 0.3s ease-in-out;
}
header #menu {
	box-sizing: border-box;
	display: block;
	width: 18%;
	padding: 3%;
	border-left: solid 1px #000;
	cursor: pointer;
}
header #menu.onMenu {
	background: #000;
}
header img {
	display: block;
	width: 100%;
}

header nav {
	box-sizing: border-box;
	display: block;
	width: 82%;
	padding: 10px 0;
}
header nav a {
	display: block;
	color: #000;
	padding: 2px 10px;
	margin-bottom: 5px;
}
header nav a:hover {
	color: #e4117e;
	background: #000;
}
header nav a.non {
	opacity: 0.3;
	pointer-events: none;
}
header nav a.select {
	color: #e4117e;
	background: #fff;
}
header nav a span {
	display: inline-block;
	width: 3vw;
	margin-left: 0.5vw;
}

.order_btn {
    position: fixed;
	bottom: 1%;
	left: 1%;
	z-index: 100001;
	opacity: 0;
  -webkit-animation: example 0.4s ease 0.4s 1 forwards;
  animation: example 0.4s ease 0.4s 1 forwards;
}
.order_btn a{
    font-size:0.8em;
	font-weight:bold;
	color:#e4117e;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	background-color: #000;
	padding: 1.5em 0.5em;
	
}
@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}
.order_btn a:hover{
   filter: brightness(140%);
}

.nav_order_btn{
   margin-top:10%;
   	width:47%;
	font-size:0.9em;
	font-weight:bold;
	color:#e4117e;
	background-color: #000;
	padding: 0.2em 0.5em;
}
.nav_order_btn a{color:#e4117e;}
.nav_order_btn a:hover{filter: brightness(140%);}
.nav_order_btn a.select { background:#000;}


#contentAll {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding-left: 5.9%;
}
.top_movie iframe {
     position: absolute;
     top: 60%;
     right: 5%;
     width: 28%;
     height: 25%;
	 border: solid 6px #e4117e;
}




/* subnav
------------------------------------------------------------------*/
#subNum,
#charaThum,
#galleryThum {
	box-sizing: border-box;
	display: block;
	position: relative;
	font-size: 1.5vw;
	background-color: #e4117e;
	background-image: url(../img/dot_black_m.png);
	background-position: center bottom;
	background-size: 2% auto;
}
#subNum img,
#charaThum img,
#charaThum img.new,
#galleryThum a img,
#galleryThum img.new  {
	display: block;
	width: 100%;
	vertical-align: bottom;
}
#subNum a {
	display: inline-block;
	color: #e4117e;
	background: #fff;
	padding: 0.5vw 1vw;
	border-right: solid 1px #000;
	border-left: solid 1px #000;
	font-weight:bold;
}
#subNum a:hover {
	color: #ff7cc0;
}
#subNum a.select {
	color: #fff;
	background: #000;
}
#subNum a.new {
	background-image: url(../img/new.png);
	background-position: left center;
	background-size: auto 50%;
	background-repeat: no-repeat;
	padding-left: 3vw;
}
#charaThum a {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	color: #000;
	background: #fff;
	width: 7%;
	padding: 0;
	margin: 0;
	border-right: solid 1px #000;
	border-left: solid 1px #000;
	vertical-align: bottom;
}
#charaThum img.new {
	display: block;
	position: absolute;
	bottom: 1%;
	left: 1%;
	width: 40%;
}
#galleryThum a {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	color: #000;
	background: #fff;
	width: 10%;
	padding: 0;
	margin: 0;
	border-right: solid 1px #000;
	border-left: solid 1px #000;
	vertical-align: bottom;
}
#galleryThum a img:not(.new) {
	mix-blend-mode: luminosity;
}
#galleryThum a:hover img {
	mix-blend-mode: normal;
}
#galleryThum a.select img {
	mix-blend-mode: normal;
}
#galleryThum img.new {
	display: block;
	position: absolute;
	bottom: 1%;
	left: 1%;
	width: 40%;
}








/* トップ
------------------------------------------------------------------*/


#ankBana {
	display: block;
	text-align: center;
	background-color: #f96633;
	background-image: url(../special/img/count/bg2.png), url(../special/img/count/bg1.jpg);
	background-size: 100% auto, cover;
	background-position: center top, center center;
	background-repeat: no-repeat;
	padding: 1.5%;
}
#count a img {
	display: block;
	width: 100%;
}
#keyvisual {
	position: relative;
	display: block;
}
#keyvisual img{
	display: block;
	width: 100%;
}
#dendoPC img,
#dendoSP img {
	display: block;
	width: 100%;
}
#dendoPC {
	position: absolute;
	top: 10px;
	left: 10px;
	display: block;
	width: 14%;
}
#dendoSP {
	position: absolute;
	top: 10px;
	right: 10px;
	display: block;
	width: 34%;
}
#bannerArea {
	background: #f96633;
	padding: 0;
}
#bannerArea a {
	display: inline-block;
	vertical-align: bottom;
	width: 33.33%;
	margin: auto;
}
#bannerArea a img {
	display: block;
	width: 100%;
}
#newsBox {
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	background: #000;
	width: 100%;
	padding-right: 3%;
}
#newsBox div {
	color: #fff;
	font-size: 3vw;
	font-weight: bold;
	text-align: center;
	width: 20%;
}
#newsBox dl {
	box-sizing: border-box;
	background-color: #f1f97d;
	background-image: url(../img/news_bg.png);
	width: 80%;
	padding: 2%;
	border-right: double 10px #000;
}
#newsBox dt {
	font-weight: bold;
}
#newsBox dd {
}
#newsBox dd a {
	display: block;
	color: #000;
}
#newsBox dd a:hover {
	color: #000;
}

#staffBox {
	position: relative;
	display: block;
	background: rgb(216,0,132);
	background: linear-gradient(90deg, rgba(216,0,132,1) 0%, rgba(254,27,127,1) 100%);
}
#staffBox img {
	display: block;
	width: 100%;
}
#staffBox .non {
}
#staffBox #banaBoxA {
	position: absolute;
	top: 66%;
	right: 6%;
	display: block;
	width: 35%;
}
#staffBox #banaBoxA a {
	display: inline-block;
	width: 30%;
	margin: 1%;
}
#twiBox {
	position: relative;
	box-sizing: border-box;
	background-color: #4ff4ee;
	background-image: url(../img/twitter.png), url(../img/twitter.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom, center top;
	padding-top: 3%;
	padding-bottom: 45%;
}
#twiBox .twidget {
	display: block;
	position: relative;
	width: 40%;
	margin-left: 42%;
}
.twidget iframe{
	width: 740px !important;;
}





/* story
------------------------------------------------------------------*/
#storyBg {
	background-color: #ff9cc7;
	background-image: url(../story/img/bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
#storyBg::after {
	z-index: 9;
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	background-image: url(../img/dot_black_m.png);
	background-size: 3%;
	width: 100%;
	height: 40%;
}
#story {
	z-index: 10;
	position: relative;
	background-image: url(../story/img/heroine.png);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 53% auto;
	padding: 5% 5% 4% 5%;
}
#story ruby {
	ruby-position: over;
}
#story rt {
	position: relative;
	color: #fff;
	background: #e4117e;
	padding: 0 0.5vw;
	transform: rotate( -5deg );
}
#story u {
	color: #fff;
	text-decoration: none;
	background: #000;
	padding: 0.1vw 0.5vw;
	margin: 0.5vw 0;
}
#worldBg {
	color: #fac93e;
	background: #ad4b98;
}
#world {
	position: relative;
}
#world img {
	display: block;
	width: 100%;
}
#worldMap,
#cpCorp {
	display: flex;
	align-items: center;
	justify-content: center;
}
#worldMap {
}
#cpCorp {
	flex-direction: row-reverse;
}
#worldMap strong,
#cpCorp strong {
	display: block;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; 
	font-size: 2vw;
	text-align: center;
	margin-bottom: 0.5em;
}
#worldMap strong small,
#cpCorp strong small {
	display: block;
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1vw;
	border-top: solid 1px #fac93e;
	border-bottom: solid 1px #fac93e;
}
#worldMap div,
#cpCorp div {
	box-sizing: border-box;
}
#worldMap div.img,
#cpCorp div.img {
	width: 60%;
}
#worldMap div.txt,
#cpCorp div.txt {
	font-size: 1.3vw;
	line-height: 1.4;
	width: 40%;
	padding: 4% 5%;
}





/* chara
------------------------------------------------------------------*/
#charaBg {
	background-image: url(../chara/img/bg.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
}
#chara {
	position: relative;
	padding: 3%;
}
#chara img {
	display: block;
	width: 100%;
}
#cAbout {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 3%;
}
#cAbout #cImg {
	display: block;
	width: 60%;
	max-width: 1000px;
	margin: auto;
}
#cAbout #cSerif {
	position: absolute;
	bottom: 10%;
	left: 5%;
	width: 38%;
}
#cAbout #cProf {
	position: absolute;
	top: 0;
	left: 0;
	width: 15%;
}
#cAbout #cProf_2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 15%;
}
#cAbout #cPop1 {
	position: absolute;
	top: 12%;
	left: 12%;
	width: 15%;
}
#cAbout #cPop2 {
	position: absolute;
	right: 5%;
	bottom: 7%;
	width: 30%;
}
#cAbout #cTxt {
	position: absolute;
	top: 8%;
	right: 0;
	width: 33%;
}
#cAbout #cTxt p {
	color: #fff;
	font-size: 1.3vw;
	line-height: 1.3;
	background: #000;
	padding: 1em;
}
#cAbout #cTxt p strong,
#cAbout #cTxt p span {
	display: block;
	font-weight: bold;
	text-align: center;
}
#cAbout #cTxt p strong {
	font-size: 2vw;
}
#cAbout #cTxt p span {
	margin-bottom: 0.7vw;
}
#voice {
	position: relative;
	text-align: center;
	margin-top: 3%;
}
#voice a {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	background: #000;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
	text-decoration: none;
	width: 30%;
	margin: 2px;
	border: solid 3px #000;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
}
#voice a:hover {
	background-position: center bottom;
}
#voice a.svb1 {
	background-image: url(../chara/img/voice1.png);
}
#voice a.svb2 {
	background-image: url(../chara/img/voice2.png);
}
#voice a.svb3 {
	background-image: url(../chara/img/voice3.png);
}
#voice .play-bt {
}
#voice .stop-bt {
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
	background-position: center bottom;
}
#voice a span {
	position: absolute;
	top: 0;
	left: 37%;
	display: block;
	width: 25%;
}
#voice a img {
	display: block;
	width: 100%;
}




/* gallery
------------------------------------------------------------------*/
#galleryBg {
	background-image: url(../img/itimatu.png);
	background-position: center top;
	background-size: 15%;
	background-attachment: fixed;
}
#galleryBox {
	position: relative;
	padding: 3%;
	margin: 0 auto;
	margin-top:50px;
	margin-left:80px;
}
#galleryBox div {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 3%;
	border: solid 10px #fff;
	box-shadow: 0px 0px 5px #000;
	text-align:left;
}
#galleryBox a img {
	margin-bottom:5px;
	border: solid 2px #e4117e;
}
#galleryBox div img {
	display: block;
	width: 100%;
}
#galleryBox a:hover {
   filter: brightness(115%);
}


#galleryBox dl {
	box-sizing: border-box;
	color: #fff;
	background: #000;
	width: 100%;
	padding: 3%;
}
#galleryBox dt {
	font-weight: bold;
}
#galleryBox dd {
	text-indent: -0.5em;
	padding-left: 1em;
	margin-bottom: 1em;
}
#galleryBox dd.non {
	color: #aaa;
	text-indent: 0;
	padding-left: 0;
}





/* system
------------------------------------------------------------------*/
#systemBg {
	color: #fff;
	background-color: #54cdcd;
}
.sysBox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.sysBox .img,
.sysBox .txt {
	box-sizing: border-box;
	display: block;
	width: 50%;
	-webkit-align-items: stretch;
	align-items: stretch;
}
.sysBox .img {
}
.sysBox .img img {
	display: block;
	width: 100%;
}
.sysBox .txt {
	padding: 3%;
}
.sysBox .txt strong {
	display: block;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; 
	font-size: 2vw;
	text-align: center;
	margin-bottom: 0.5em;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
.sysBox .txt small {
	display: block;
}
.sysBox:nth-child(even) .img {
	 -webkit-order: 1;
	order: 1;
}
.sysBox:nth-child(even) .txt {
	 -webkit-order: 2;
	order: 2;
}





/* sound
------------------------------------------------------------------*/
#soundBg {
	color: #ffb3ad;
	background: #e8373f;
}
#soundBg img {
	display: block;
	width: 100%;
}
#song {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffb3ad;
}
#song div {
	box-sizing: border-box;
	text-align: center;
	width: 50%;
	padding: 5%;
}
#song div.op {
	color: #ffb3ad;
	background: #e8373f;
}
#song div.ed {
	color: #e8373f;
	background: #ffb3ad;
}
#song div strong {
	display: block;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; 
	font-size: 3vw;
}
#artist,
.cd {
	display: flex;
	align-items: center;
	justify-content: center;
}
#artist {
}
.cd {
	flex-direction: row-reverse;
}
#artist div,
.cd div {
	box-sizing: border-box;
	width: 50%;
}
#artist #artistTxt,
.cd .cdTxt {
	padding: 5%;
}
#artist #artistTxt {
	font-size: 1.3vw;
}
#artist #artistTxt strong {
	display: block;
	font-size: 2vw;
}
.cd a {
	display: inline-block;
	color: #ffb3ad;
	background: none;
	padding: 0.2vw 1vw;
	margin-bottom: 0.5vw;
	border: solid 1px #ffb3ad;
}
.cd a:hover {
	background: #000;
	border: solid 1px #000;
}
#bgmBg {
	background: #f4e001;
}
#bgmSample {
	font-family: 'Bevan', cursive;
	color: #000;
	font-size: 3vw;
}
#bgmSample li {
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right top;
	padding: 3%;
}
#bgmSample strong {
	display: block;
	font-weight: normal;
}
#bgmSample audio {
	display: block;
	width: 75%;
}
#bgmCom {
	padding: 3%;
}
#bgmCom dt {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; 
	font-size: 3vw;
	font-weight: bold;
}
#bgmCom a {
	display: inline-block;
	color: #ad4b98;
	background: none;
	padding: 0.2vw 1vw;
	margin-bottom: 0.5vw;
	border: solid 1px #ad4b98;
}
#bgmCom a:hover {
	color: #f4e001;
	background: #ad4b98;
}
#soundtrack {
	background: #00cbac;
	padding: 3%;
}
#santoraBox {
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	margin-top: 3%;
	border: solid 1px #000;
}
#santoraBox div {
	box-sizing: border-box;
	font-size: 1.4vw;
	width: 50%;
	padding: 2%;
}
#santoraBox strong {
	display: block;
	font-size: 1.6vw;
	color: #fff;
	text-align: center;
	background: #000;
	margin-bottom: 1%;
}
#santoraBox hr {
	display: block;
	width: 100%;
	padding-top: 1em;
	margin-top: 1em;
	border-top: dotted 1px #000;
}
#santoraBox img {
	display: block;
	width: 100%;
}
#santoraBox a {
	display: inline-block;
	color: #fff;
	background: none;
	padding: 0.2vw 1vw;
	margin-bottom: 0.5vw;
	border: solid 1px #fff;
}
#santoraBox a:hover {
	color: #00cbac;
	background: #fff;
}




/* special
------------------------------------------------------------------*/
#specialBg {
	background-color: #ad4b98;
}
#movie {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#movie img {
	display: block;
	width: 100%;
}
#movie a {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 50%;
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
}
#movie a p.new {
	background-image: url(../img/new.png);
	background-position: left center;
	background-size: auto 50%;
	background-repeat: no-repeat;
	padding-left: 3vw;
}
#movie a p {
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	color: #fff;
	background: rgba(0,0,0,0.7);
	width: 100%;
	padding: 0.5% 1%;
}
.dlTw,
.dlTwHead {
	box-sizing: border-box;
	text-align: center;
	background: #00b7ee;
	width: 100%;
	padding: 3%;
}
.dlTw dt,
.dlTwHead dt {
	font-family: 'Bevan', cursive;
	color: #fff;
	font-size: 2vw;
}
.dlTw dd {
}
.dlTw dd img {
	box-sizing: border-box;
	display: inline-block;
	width: 15%;
	border: solid 10px #00b7ee;
	border-radius: 50%;
}
.dlTwHead dd {
}
.dlTwHead dd img {
	box-sizing: border-box;
	display: inline-block;
	width: 50%;
	border: solid 10px #00b7ee;
}
#countBk {
	
}
#countBk .countDay {
	display: block;
	font-size: 5vw;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background: #eb6fa5;
	padding: 3% 5% 0 5%;
}
#countBk li {
	color: #fff;
	background-repeat: no-repeat;
	background-size: 20%;
	background-position: right center;
	padding: 5% 25% 5% 5%;
}
#countBk .countName {
	display: block;
	text-indent: 0;
	padding-left: 0;
}
#countBk li p {
	padding-left: 1em;
}
#countBk .gi {
	background-image: url(../special/img/count/gill.png);
	background-color: #e8373f;
}
#countBk .sh {
	background-image: url(../special/img/count/shelby.png);
	background-color: #5ea9c9;
}
#countBk .ra {
	background-image: url(../special/img/count/raul.png);
	background-color: #ef7a2b;
}
#countBk .ke {
	background-image: url(../special/img/count/keisaiin.png);
	background-color: #a1c911;
}
#countBk .al {
	background-image: url(../special/img/count/allan.png);
	background-color: #ad4b98;
}





/* info
------------------------------------------------------------------*/
#infoNewsBg {
	background-color: #f1f97d;
	background-image: url(../img/news_bg.png);
}
#infoNews {
	padding: 5%;
}
#infoNews dl {
	width: 100%;
}
#infoNews dt {
	font-weight: bold;
}
#infoNews dd {
	border-bottom: solid 1px #000;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}
#infoNews dd a {
	display: block;
	color: #000;
}
#infoNews dd a:hover {
	color: #000;
}
#infoBg {
	background: #ffaeb5;
}
.info {
	background-image: url(../img/bg_renga.png);
	background-size: 10% auto;
	background-attachment: fixed;
	padding: 5%;
}
#specBox {
	display: table;
	width: 100%;
}
#specBox #package, #specBox #specInfo {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
}
#specBox #package {
	width: 28%;
	padding-right: 5%;
}
#specBox #package img {
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
#specInfo {
	width: 40%;
}
#specBox table {
    border-collapse: separate;
    border-spacing: 0 5px;
	position: relative;
	width: 100%;
}
#specBox table tr {
	background: #fff;
}
#specBox table td {
	padding: 0.5vw;
}
#specBox table td:first-child {
	white-space: nowrap;
	color: #fff;
	text-align: right;
	background: #000;
}
#specBox table td:last-child {
}
ul.att {
	display: block;
	font-size: 1vw;
	background: rgba(255,255,255,0.7);
	padding: 1vw;
	margin-top: 1vw;
	border: solid 1px #c00;
}
ul.att li {
	display: block;
	color: #c00;
	text-indent: -1vw;
	padding-left: 1vw;
}
.tokuVer {
	font-family: 'Pacifico', cursive;
	font-size: 4vw;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5%;
}
.tokuVer span {
	display: block;
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #fff;
	font-size: 1.1vw;
	letter-spacing: 1vw;
	font-weight: normal;
	background: #000;
}
.preBox {
	display: table;
	width: 100%;
}
.preBox .preImg, .preBox .preTxt {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
	width: 50%;
}
.preBox .preImg {
	padding-right: 5%;
}
.preBox .preImg img {
	display: block;
	width: 100%;
	max-width: 600px;
	margin: auto;
}
.preBox .preTxt {
}
.preBox .preTxt dt {
	font-weight: bold;
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 0.3vw;
}
.preBox .preTxt dt::before {
	content: "♥";
}
.preBox .preTxt dd {
	display: block;
	font-size: 1.2vw;
	padding-left: 1em;
	margin-bottom: 1.5vw;
}
.shopAll {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 3% 3%;
	grid-template-areas: ". .";
	margin-top: 3%;
}
.shopAll .shBox {
	background-color: #f9f2d5;
	background-image: url(../info/img/shop_bg.png);
	background-size: 80% auto;
	background-repeat: no-repeat;
	background-position: center top;
	padding: 10px;
	box-shadow: 0px 0px 5px #000;
}
.shopAll .shBox img {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: auto;
}
.shopAll .shName {
	font-weight: bold;
	text-align: center;
}
.shopAll a {
	display: block;
	color: #f9f2d5;
	text-align: center;
	background: #baa689;
	padding: 1vw;
	margin-top: 1vw;
}
.shopAll a:hover {
	background: #362e2b;
}
.shopAll dl {
	margin-top: 0.7em;
}
.shopAll dt {
	font-weight: bold;
	padding: 0.3em;
	margin-top: 0.3em;
	border-bottom: solid 1px #000;
	border-left: solid 5px #000;
}
.shopAll dd {
	font-size: 1.3vw;
	line-height: 1.3;
	padding-left: 1em;
	margin-top: 0.3em;
}
.shopAll .shSet {
	background: #e1d6b9;
	padding: 1%;
	border: solid 1px #baa689;
}
.shopAll .shSet p {
	color: #fff;
	font-weight: bold;
	text-align: center;
	background: #897056;
}
.shopAll  .arsz {
	font-size: 1.2vw;
	background: rgba(255,255,255,0.3);
	padding: 1%;
}
.patchBox {
	padding: 5%;
}
.patchBox dt {
	font-size: 2vw;
	font-weight: bold;
	margin-bottom: 1%;
	border-bottom: double 3px #000;
}
.patchBox ul {
	background: rgba(255,255,255,0.58);
	padding: 1%;
	margin: 1% auto;
	border-radius: 10px;
}
.patchBox ul li::before {
	content: "・";
}
.patchBox ul strong {
	display: block;
}
#questionAll {
	padding: 5%;
}
#questionAll #privacy {
	background: rgba(255,255,255,0.5);
	padding: 3%;
	margin: 3% 0;
}
#questionAll strong {
	display: block;
	text-align: center;
	border-bottom: solid 1px #666;
}
#questionAll dt {
	font-weight: bold;
	margin-top: 1em;
}



#buyBox {
	width: 100%;
	margin: auto;
}

#buyBox table {
	width: 55%;
    border-collapse: separate;
    border-spacing: 2px 2px;
	table-layout: fixed;
	margin: 0 auto;
	margin-top:50px;
	margin-bottom:50px;
}
#buyBox table td {
	box-sizing: border-box;
	background: #fff;
	border: solid 1px rgba(255,255,255,0.3);
	border-collapse: separate;
	padding: 1%;
	 text-align:center;
	font-size: max(1.3vw, 15px);
}
#buyBox table img{ vertical-align: bottom; margin-bottom: 2px;}
#buyBox table td del{ color: #999999; font-size: max(1.1vw, 12px);}
#buyBox table td span{ font-size:15px;}
#buyBox table a { color:#FFF; text-decoration:none;}
#buyBox table a:hover{filter: brightness(110%);}
#buyBox table td.lnk_btn { height: 70px!important;}
#buyBox table td.lnk_btn a{ background-color:#e4117e; padding:3% 38%;}
#buyBox table td.lnk_btn_sm a { background-color:#e4117e; padding:5% 36%;}
#buyBox table td.gry_bg { background-color: #161616; color:#999999}
#buyBox table td.shop_logo{}
#buyBox table h4{ font-weight:bold; margin: 15px 0 15px 0; color:#fff; font-size:1.5vw;} 

#buyBox table ul { vertical-align:top;}
#buyBox table ul li { text-align:left; margin-left:20px; font-size: max(1.1vw, 10px);}

/* Drama Audio
------------------------------------------------------------------*/
.adBox table {
	width: 70%;
    border-collapse: separate;
    border-spacing: 30px 2px;
	table-layout: fixed;
	margin: 0 auto;
	margin-top:50px;
	margin-bottom:50px;
	text-align:center;
}
.adBox table a:hover{ opacity: 0.8;}

.adBox table td.lnk1 a{ font-weight:bold; color:#FFF;}
.adBox table td.lnk2 a{ font-weight:bold; color:#000;}

@media screen and (max-width:1000px){
	
	#buyBox table { width:80%;}
	#buyBox table td.lnk_btn a{ padding:5% 28%;}
	#buyBox table td.lnk_btn_sm a { padding:5% 28%;}
}


@media screen and (max-width:767px){
	body {
		font-size: 2.5vw;
	}
	
	.showPc {
		display: none;
	}
	.showSp {
		display: inline;
	}
	footer #hardLogo {
		width: 20%;
		max-width: 100px;
	}

.adBox table {
	width: 105%;
}




	/* header
	--------------------------------------------------*/
	header {
		font-size: 3.2vw;
	}
	.order_btn {
	top:160px;
	}
	.order_btn a{
    font-size:0.6em;
	padding: 1.5em 0.2em;
	}
	.nav_order_btn{
	top: 30%;
   	width:70%;
	font-size:0.8em;
	}	

	/* subnav
	------------------------------------------------------------------*/
	#subNum,
	#charaThum {
		font-size: 2.5vw;
	}
	
	
	


	/* トップ
	------------------------------------------------------------------*/
	#staffBox #banaBoxA {
		position: relative;
		top: inherit;
		right: inherit;
		text-align: center;
		width: 100%;
	}
	#twiBox {
		box-sizing: border-box;
		background-image: url(../img/twitter.png);
		background-repeat: no-repeat;
		background-size: 150% auto;
		background-position: right 120px;
		padding: 3% 3% 45% 3%;
	}
	#twiBox .twidget {
		display: block;
		position: relative;
		width: 80%;
		margin-left: 0;
	}
	.twidget iframe{
		width: 740px !important;;
	}

.top_movie iframe {
     top: 55%;
     left: 52%;
     width: 40%;
     height: 37%;
}



	/* story
	------------------------------------------------------------------*/
	#storyBg::after {
		height: 40%;
	}
	#story {
		font-size: 2.2vw;
		line-height: 1.6;
		padding: 5% 5% 15% 5%;
		background-size: 100% auto;
	}
	#story ruby {
		display: inline-block;
		ruby-position: right;
	}
	#story rt,
	#story rp {
		display: inline-block;
		color: #e4117e;
		font-size: 1vw;
		background: none;
		padding: 0;
		transform: rotate( 0deg );
	}
	#worldMap,
	#cpCorp {
		display: block;
	}
	#worldMap strong,
	#cpCorp strong {
		font-size: 5vw;
		margin-bottom: 0.5em;
	}
	#worldMap strong small,
	#cpCorp strong small {
		font-size: 2.5vw;
	}
	#worldMap div.img,
	#cpCorp div.img {
		width: 100%;
	}
	#worldMap div.txt,
	#cpCorp div.txt {
		font-size: 2.5vw;
		line-height: 1.6;
		width: 100%;
		padding: 5%;
	}





	/* chara
	------------------------------------------------------------------*/
	#charaBg {
		background-size: 220% auto;
	}
	#cAbout {
		position: relative;
		display: block;
		width: 100%;
		margin-top: 3%;
	}
	#cAboutSp {
		position: relative;
		margin-bottom: 3%;
	}
	#cAbout #cImg {
		width: 75%;
	}
	#cAbout #cSerif {
		position: absolute;
		bottom: 17%;
		left: 3%;
		width: 55%;
	}
	#cAbout #cProf {
		position: absolute;
		left: inherit;
		right: 0;
		width: 25%;
	}
	#cAbout #cProf2 {
		position: absolute;
		left: inherit;
		right: 0;
		width: 25%;
	}
	#cAbout #cPop1 {
		position: absolute;
		top: inherit;
		right: 0;
		bottom: 35%;
		left: inherit;
		width: 20%;
	}
	#cAbout #cPop2 {
		position: absolute;
		right: 5%;
		bottom: 10%;
		width: 30%;
	}
	#cAbout #cTxt {
		position: relative;
		width: 100%;
	}
	#cAbout #cTxt p {
		font-size: 2.5vw;
		line-height: 1.5;
	}
	#cAbout #cTxt p strong {
		font-size: 4vw;
	}





	/* gallery
	------------------------------------------------------------------*/

    #galleryBox { text-align:center; margin-left: 0;}



	/* system
	------------------------------------------------------------------*/
	.sysBox {
		display: block;
	}
	.sysBox .img,
	.sysBox .txt {
		width: 100%;
	}
	.sysBox .txt strong {
		font-size: 4vw;
	}
	.sysBox:nth-child(even) .img {
		 -webkit-order: 2;
		order: 2;
	}
	.sysBox:nth-child(even) .txt {
		 -webkit-order: 1;
		order: 1;
	}





	/* sound
	------------------------------------------------------------------*/
	#song,
	#song div,
	#artist,
	.cd,
	#artist div,
	.cd div,
	#santoraBox,
	#santoraBox div  {
		display: block;
		width: 100%;
	}
	#song div strong {
		font-size: 5vw;
	}
	#artist #artistTxt {
		font-size: 2.5vw;
	}
	#artist #artistTxt strong {
		font-size: 3vw;
	}
	#santoraBox div {
		font-size: 2.5vw;
	}
	#santoraBox strong {
		font-size: 3vw;
	}





	/* special
	------------------------------------------------------------------*/
	#movie {
		display: block;
	}
	#movie a {
		width: 100%;
	}
	.dlTw dt,
	.dlTwHead dt {
		font-size: 3vw;
	}
	.dlTw dd img {
		display: inline-block;
		width: 30%;
	}





	/* info
	------------------------------------------------------------------*/
	#specBox,
	#specBox #package,
	#specBox #specInfo,
	.preBox,
	.preBox .preImg,
	.preBox .preTxt{
		display: block;
		width: 100%;
		padding: 0;
	}
	#specBox #package,
	.preBox .preImg {
		margin-bottom: 1em;
	}
	#specBox table td {
		padding: 1vw;
	}
	ul.att {
		display: block;
		font-size: 1vw;
		background: rgba(255,255,255,0.7);
		padding: 1vw;
		margin-top: 1vw;
		border: solid 1px #c00;
	}
	.tokuVer {
		font-size: 6vw;
	}
	.tokuVer span {
		font-size: 2.5vw;
	}
	.preBox .preTxt dt {
		font-size: 4vw;
		line-height: 1.3;
	}
	.preBox .preTxt dd {
		font-size: 2.5vw;
	}
	.shopAll {
		display: block;
		margin: 0;
	}
	.shopAll .shBox {
		display: block;
		margin-top: 3%;
	}
	
}


@keyframes flash {
  0%,35%,60%,100%{ opacity: 0; }

  25%{
    opacity: 1;
    color:#f43097;
  }
  
  50%{
    opacity: 1;
    color:#8ffa4f;
  }
  
  75%{
    opacity: 1;
    color:#4c56e6;
  }
  
}