@charset "utf-8";
/* CSS Document */

@import 'https://fonts.googleapis.com/css?family=Oswald:300,400,700&subset=latin-ext';

/* clearfix */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* 画像センタリング */

.cr {margin:0 auto;}
.cr5 {margin:10px auto;}
.cr10 {margin:10px auto;}
.cr20 {margin:20px auto;}
.cr30 {margin:30px auto;}

.cr15o {margin:15px auto 0;}
.cr20o {margin:20px auto 0;}

.cr15u {margin:0 auto 15px;}
.cr20u {margin:0 auto 20px;}
.cr50up {margin:0 auto; padding-bottom:50px;}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/* FireFoxFadeブレ防止 */

img { display:block; box-shadow: #000 0 0 0; }


/* 全体・枠作り */

html,body {
	height:100%;
}

html {
	font-size:62.5%;
}

img { display:block; }


body {
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
	text-align:center;
	background-color:#000;
	-webkit-text-size-adjust : 100% !important;
}

#gpt_wrap {display:block;}
.no-js #gpt_wrap {display:block;}

#PageWrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	min-width:320px;
}

.block {
	width:100%;
	position:relative;
}

.menu_block {
	position: fixed;
    top: 0;
    z-index: 999;
	width:100%;
}

/* ----------------------------------　ページロード　---------------------------------- */


#gpt_loader-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 15000;
}
.no-js #gpt_loader-bg {display:none;}

#gpt_loader {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #666666;
  z-index: 2;
}
.no-js #gpt_loader {display:none;}

#gpt_loader img {
  width:200px;
}

#gpt_loader p {
	font-family: 'Oswald', sans-serif;
	font-size:2.4vw;
	margin-top:24px;
}

/* ----------------------------------　INVIEW　---------------------------------- */


.inv {opacity: 0; transition:0.7s;}
.vie {opacity: 1.0;}

/* ----------------------------------　ヘッダー　---------------------------------- */

header {
	width:100%;
	background:url(../img/header_bg.jpg) left top repeat;
	position: fixed;
}

.head_wrap {
	width:100%;
	position:relative;
	margin:0 auto;
}

.head_brand {
	display:none;
}

.head_brand a {
	font-size:2.4vw;
	color:#6c7380;
	display:block;
	background-color:#3f4044;
	font-family: Arial;
	line-height:2;
	padding:0 10px;
	text-align:center;
	text-decoration:none;
	transition:all 0.3s;
	box-shadow:0 0 0 rgba(0,0,0,1.00) inset;
	
}

.head_brand a:hover {
	color:#ffffff;
	transition:all 0.3s;
	box-shadow:0 0 7px rgba(0,0,0,1.00) inset;
}

.head_language ul {
	float:right;
}

.head_language ul li {
	float:left;
}

.head_language ul li p {
	font-size:2.4vw;
	color:#ffffff;
	display:block;
	background-color:#3f4044;
	font-family: Arial;
	line-height:2;
	padding:0 10px;
	text-align:center;
	text-decoration:none;
	transition:all 0.3s;
	box-shadow:0 0 7px rgba(0,0,0,1.00) inset;
}

.head_language ul li a {
	font-size:2.4vw;
	color:#6c7380;
	display:block;
	background-color:#3f4044;
	font-family: Arial;
	line-height:2;
	padding:0 10px;
	text-align:center;
	text-decoration:none;
	transition:all 0.3s;
	box-shadow:0 0 0 rgba(0,0,0,1.00) inset;
}

.head_language ul li a:hover {
	color:#ffffff;
	transition:all 0.3s;
	box-shadow:0 0 7px rgba(0,0,0,1.00) inset;
}

/* ----------------------------------　メニュー　---------------------------------- */

#Menu {
	display:none;
}

/* ----------------------------------　メニュー伸縮用　---------------------------------- */

/* ----------------------------------　モバイルメニュー　---------------------------------- */
 
.menu-btn {
    position: fixed;
    top: 5vh;
    right: 3vw;
    width: 8vw;
    height: 8vw;
    cursor: pointer;
    z-index: 3000;
}

.mobile_up {
    position: fixed;
    bottom: 3vh;
    right: 3vw;
    width: 8vw;
    height: 8vw;
    cursor: pointer;
    z-index: 1000;
}

.mobile_up img {
	width:100%;
}

.menu-btn span {
    color: #fff;
}

.menu-btn span:after {
    content: attr(data-txt-menu);
	width:8vw;
	height:8vw;
	background:url(../img/mobile_menu.png) center center no-repeat;
	background-size:100%;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	transition:all 0.3s;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-btn span:after {
    content: attr(data-txt-close);
	width:8vw;
	height:8vw;
	background:url(../img/mobile_close.png) center center no-repeat;
	background-size:100%;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	transition:all 0.3s;
}

.menu {
    position: fixed;
    display: table;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.85);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
	z-index: 2000;
}

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

.menu li {
    width: 40vw;
    margin: 0 auto;
    text-align: center;
	font-family: 'Oswald', sans-serif;
	text-decoration:none;
}

.menu li img.logo{
    width:40vw;
	margin:0 auto 3vh;
}

.menu li img.circle{
    width:7vw;
	margin:5vh auto 0;
	display:inline-block;
	text-align:center;
	padding:0 2vw;
}

.menu li a {
	text-decoration:none;
}

.menu li a span {
    display: block;
	width: 30vw;
    height: 5vh;
    line-height: 5vh;
	margin: 0 auto;
    font-size: 4vw;
    color: #fff;
	text-decoration:none;
	border-bottom:1px solid #8A8A8A;
}

.menu li a:hover span {
    color: #999;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
    cursor: url(../images/cross.svg),auto;
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1;
}


/* ----------------------------------　メインビジュアル　---------------------------------- */


#Mainvisual {
	width:100%;
	padding-top:96%;
	position:relative;
	margin-top:20px;
	background-color:#000;
}

.mainvisual {
	width:100%;
	padding-top:65.6%;
	background:url(../img/mainvisual.jpg) center top no-repeat;
	background-size:100%;
	position:absolute;
	top:0;
	left:0;
	box-shadow:0 -30px 5px 0 rgba(0,0,0,1.00) inset;
}

.main_day {
	width:100%;
	color:#FFF;
	position:absolute;
	top:120%;
	z-index:50;
}

.main_day h2 {
	font-family: 'Oswald', sans-serif;
	font-size:6.5vw;
}

.main_day h3 {
	font-size:2.7vw;
}

.main_logo {
	background:url(../img/main_logo.png) left top no-repeat;
	background-size:100%;
	width:90%;
	padding-top:28.1%;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	top:78%;
	left:5%;
}


/* ----------------------------------　履歴部　---------------------------------- */

#Whatsnew {
	border-bottom:1px solid #e0e3e8;
	background-color:#f2f6f7;
	position:relative;
	width:100%;
}

.rireki_fb {
	display:none;
}

.rireki_tw {
	display:none;
}

.rireki_buynow {
	display:none;
}

.rireki_follow {
	display:none;
}

.rireki_wrap {
	width:96%;
	margin: 0 auto;
	padding-top:2%;
	background:url(../img/rireki_bg.png) right bottom no-repeat;
	background-size:100%;
}

.rireki_wrap dl {
	width:100%;
	border-bottom:1px solid #9fc7d4;
	position:relative;
}

.rireki_wrap dl dt {
	font-size:2.6vw;
	line-height:2.5;
	color:#54555a;
	background:url(../img/listmark.png) left center no-repeat;
	background-size:2.6vw;
	padding-left:3.2%;
	font-weight:bold;
	width:14.8%;
	text-align:left;
}

.rireki_wrap dl dd {
	font-size:2.7vw;
	color:#54555a;
	text-align:left;
	padding-bottom:1vh;
}

.rireki_wrap dl dd p a {
	color:rgba(0,163,204,1.00);
	text-decoration:underline;
	transition:all 0.3s;
	text-shadow:0 0 0 rgba(11,75,106,0);
}

.rireki_wrap dl dd p a:hover {
	color:#54555a;
	text-decoration:none;
	transition:all 0.3s;
	text-shadow:0 0 5px rgba(11,75,106,0.6);
}

.rireki_wrap dl dd p span {
	display:block;
	float:left;
	color:#FFFFFF;
	background:#ffc000;
	padding:0 5px;
	margin-right:2px;
	position:absolute;
	top:10%;
	left:21%;
}

.backlog {
	width:100%;
	margin:0 auto;
	text-align:right;
	font-size:2.6vw;
	line-height:2.5;
	color:#54555a;
}

.backlog a {
	color:#54555a;
	text-decoration:none;
	text-shadow:0 0 0 rgba(11,75,106,0);
}

.backlog a:hover {
	color:#54555a;
	text-decoration:none;
	transition:all 0.3s;
	text-shadow:0 0 5px rgba(11,75,106,0.6);
}


.quicklink {
	width:96%;
	margin:0 auto;
	padding-top:1vh;
	padding-bottom:2vh;
}

.quicklink ul li {
	float:left;
	width:100%;
}

.quicklink ul li a {
	width:100%;
	background:rgba(255,245,0,1.00);
	border:1px solid #B8B8B8;
	font-size:1.2rem;
	display:block;
	height:24px;
	line-height:24px;
	color:#5B5B5B;
	margin-bottom:1vh;
}

.quicklink ul li a.warning {
	background:rgba(255,245,0,1.00);
	text-decoration:none;
}

.quicklink ul li a.info {
	background:rgba(188,227,219,1.00);
	color:#007CD7;
	text-decoration:none;
	transition:all 0.3s;
}

.quicklink ul li a:hover.info {
	background:rgba(47,197,167,1.00);
	color:#ffffff;
}



/* ----------------------------------　トピックス　---------------------------------- */


#Topics {
	display:none;
}


/* ----------------------------------　ムービー　---------------------------------- */

#Movie {
	width:100%;
	padding:6% 0 6%;
	background-color:#FFF;
	border-bottom:1px solid #e0e3e8;
}


.movie-wrap {
    position: relative;
	margin:7vh auto 2vh;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.movie_title {
	display:block;
	width:80%;
	float:left;
	position:absolute;
	top:-4vh;
	left:10%;
}

.movie_title p {
	display:block;
	width:100%;
	border-radius:3px;
	border:1px solid #18214D;
	color:#18214D;
	text-align:center;
	font-size:2vw;
	float:left;
}

.movie-wrap2 {
    position: relative;
	margin:7vh auto 0;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
}
 
.movie-wrap2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.movie_title2 {
	display:block;
	width:80%;
	float:left;
	position:absolute;
	top:-4vh;
	left:10%;
}

.movie_title2 p {
	display:block;
	width:100%;
	border-radius:3px;
	border:1px solid #18214D;
	color:#18214D;
	text-align:center;
	font-size:2vw;
	float:left;
}

ul.movie_thum {
	width:100%;
	margin:4vh auto 7vh;
}

ul.movie_thum li {
	width:100%;
	float:left;
	margin-bottom:2vh;
}

ul.movie_thum li img {
	width:100%;
}

/* ----------------------------------　ストーリー　---------------------------------- */


#Story {
	width:100%;
	background:url(../img/mainvisual_blur_01.jpg) center top no-repeat;
	background-size:cover;
}

.story_bg {
	width:100%;
	padding:5% 0;
	background:url(../img/story_bg.png) left top repeat;
}

h4.title_story {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:10vw;
	color:#ffffff;
}

.story_wrap {
	padding:4% 0;
}

.story_wrap p.txt1{
	color:#FFF;
	width:92%;
	margin:0 auto;
	font-size:2.6vw;
	text-align:left;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.4),1px -1px 2px rgba(0,0,0,0.4),-1px 1px 2px rgba(0,0,0,0.4),-1px -1px 2px rgba(0,0,0,0.4),
	1px 1px 1px rgba(0,0,0,0.4),1px -1px 1px rgba(0,0,0,0.4),-1px 1px 1px rgba(0,0,0,0.4),-1px -1px 1px rgba(0,0,0,0.4);
}

.story_wrap p.txt2 {
	color:#FFF;
	width:92%;
	margin:5% auto;
	font-size:3vw;
	text-align:center;
	font-weight:bold;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.4),1px -1px 2px rgba(0,0,0,0.4),-1px 1px 2px rgba(0,0,0,0.4),-1px -1px 2px rgba(0,0,0,0.4),
	1px 1px 1px rgba(0,0,0,0.4),1px -1px 1px rgba(0,0,0,0.4),-1px 1px 1px rgba(0,0,0,0.4),-1px -1px 1px rgba(0,0,0,0.4);
}

.story_list {
	margin:0 auto;
}

.story_list ul{
}

.story_list ul li {
	width:25%;
	float:left;
}

.story_list ul li a {
	width:80%;
	margin:0 auto;
	border-radius:10px;
	border:2px solid #FFFFFF;
	box-sizing:border-box;
	display:block;
	padding:10% 0;
	vertical-align:middle;
	font-family: 'Oswald', sans-serif;
	font-size:3.6vw;
	text-decoration:none;
	transition:all 0.3s;
	color:#FFFFFF;
	line-height:1.3;
}

.story_list ul li a span {
	font-size:1.7rem;
}

.story_list ul li a.gray {
	border:2px solid #8f8f8f;
	color:#8f8f8f;
}


/* ----------------------------------　キャラクター　---------------------------------- */

#Character {
	width:100%;
	background-color:#FFF;
	position:relative;
	padding:5% 0 0;
}

h4.title_character {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:10vw;
	color:#9fc7d4;
}

#Chara01 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_01.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara02 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_02.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara03 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_03.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara04 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_04.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara05 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_05.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara06 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_06.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara07 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_07.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara08 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_08.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara09 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_09.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara10 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_10.jpg) center bottom -24px no-repeat;
	background-size:contain;
	position:relative;
}

#Chara11 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_11.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara12 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_12.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara13 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_13.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

#Chara14 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_14.jpg) center bottom -24px no-repeat;
	background-size:contain;
	position:relative;
}

#Chara15 {
	width:100%;
	padding-top:24px;
	padding-bottom:170%;
	background:url(../chara/m_chara_15.jpg) center bottom no-repeat;
	background-size:contain;
	position:relative;
}

.chara_txtarea {
	position:absolute;
	width:100%;
	padding-top:85%;
	top:0;
	left:0;
}

.samplevoice {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	font-size:3.2vw;
	color:#fff;
	font-family: 'Oswald', sans-serif;
	line-height:24px;
	display:block;
}

.samplevoice p i {
	font-size:3.8vw;
}

.samplevoice a {
	color:#fff;
	text-decoration:none;
}

.samplevoice a:hover {
	color:rgba(181,181,181,1.00);
}

#Chara01 .samplevoice {	background-color:#6d4f8b;}
#Chara02 .samplevoice {	background-color:#8caed4;}
#Chara03 .samplevoice {	background-color:#ffcb00;}
#Chara04 .samplevoice {	background-color:#f969a4;}
#Chara05 .samplevoice {	background-color:#475a95;}
#Chara06 .samplevoice {	background-color:#715b5d;}
#Chara07 .samplevoice {	background-color:#704570;}
#Chara08 .samplevoice {	background-color:#747474;}
#Chara09 .samplevoice {	background-color:#ea8a3d;}
#Chara10 .vanilla {	background-color:#d4d2bd;}
#Chara10 .choco {	background-color:#f0b9a5;}
#Chara11 .samplevoice {	background-color:#c9a0ae;}
#Chara12 .samplevoice {	background-color:#d10303;}
#Chara13 .samplevoice {	background-color:#548fa1;}
#Chara14 .silvia {	background-color:#ffc000;}
#Chara14 .velvet {	background-color:#7887bc;}
.vanilla {margin-top:24px;}
.silvia {margin-top:24px;}
#Chara15 .samplevoice {	background-color:#bd6765;}

p.charatxt {
	color:#54555a;
	width:72%;
	padding:2%;
	background:rgba(255,255,255,0.7);
	margin:0 0 0 5%;
	font-size:2.3vw;
	text-align:left;
	text-shadow: 1px 1px 2px rgba(255,255,255,1),1px -1px 2px rgba(255,255,255,1),-1px 1px 2px rgba(255,255,255,1),-1px -1px 2px rgba(255,255,255,1),
	1px 1px 1px rgba(255,255,255,1),1px -1px 1px rgba(255,255,255,1),-1px 1px 1px rgba(255,255,255,1),-1px -1px 1px rgba(255,255,255,1);
}

.nom {display: none;}

.charatxt_murasaki {font-size:2.2vw!important;}
.charatxt_arisaka {font-size:1.92vw!important;}
.txt_chara10 {	margin-top:12vh;}

#Chara_select {
	display:none;
}

#Chara_select_mobile {
	width:100%;
	padding-top:20%;
	position:relative;
}

.chara_select_wrap {
	position:absolute;
	width:100%;
	height:200px;
	top:0;
	left:0;
}

#slider-prev {
	width:10%;
	height:100px;
	float:left;
	background:rgba(255,255,255,1.00);
	display:block;
}

#slider-prev a {
	width:100%;
	padding-top:175%;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../chara/icon_prev.jpg) center top no-repeat;
	background-size:cover;
	transition:all 0.3s;
	opacity:1;
}

#slider-prev a:hover {
	opacity:0.7;
}

#slider-next {
	width:10%;
	height:100px;
	float:left;
	background:rgba(255,255,255,1.00);
	display:block;
}

#slider-next a {
	width:100%;
	padding-top:175%;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../chara/icon_next.jpg) center top no-repeat;
	background-size:cover;
	transition:all 0.3s;
	opacity:1;
}

#slider-next a:hover {
	opacity:0.7;
}

.select_mobile_body {
	width:80%;
	float:left;
}
.mobile_col a {
	width:25%;
	display:block;
	float:left;
	background:rgba(255,255,255,1.00);
}

.mobile_col a img {
	width:100%;
	transition:all 0.3s;
	opacity:1;
}

.mobile_col a:hover img {
	opacity:0.7;
}


/* ----------------------------------　ギャラリー　---------------------------------- */

#Gallery {
	background-color:#5d6670;
	padding:5% 0;
}

h4.title_gallery {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:10vw;
	color:#ffffff;
}

.thum_list {
	width:100%;
	margin:6% auto 0;
}

.thum_list ul li {
	width:25%;
	float:left;
	margin-bottom:28px;
	position:relative;
	overflow:hidden;
}

.thum_list ul li p {
	width:100%;
	padding-top:56.25%;
	display:block;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:2.4vw;
	background:#535353;
	color:#8A8A8A;
	position:relative;
}

.thum_list ul li span {
	position:absolute;
	display:block;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.none {
	display:none;
}

.thum_list ul li img {
	width:100%;
}

.thum_list ul li a figcaption {
	width:95%;
	padding-right:5%;
	background:rgba(0,0,0,0.7);
	color:#FFF;
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	text-align:right;
	font-size:3vw;
	position:absolute;
	bottom:-36px;
	left:0;
	opacity:0;
	transition:all 0.3s;
}

.thum_list ul li a:hover figcaption {
	bottom:0;
	opacity:1;
}


/* ----------------------------------　スペシャル　---------------------------------- */

#Special {
	background-color:#ffffff;
	padding:5% 0;
}

h4.title_special {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:10vw;
	color:#9fc7d4;
}

.special_wrap {
	width:100%;
	margin:6% auto 0;
}

.special_wrap ul li {
	width:80%;
	margin:0 auto 3%;
	position:relative;
	overflow:hidden;
	text-decoration:none;
}

.special_wrap ul li a {
	text-decoration:none;
}

.special_wrap ul li a img {
	width:100%;
	opacity:1;
	transition:all 0.3s;
}

.special_wrap ul li a:hover img {
	opacity:0.7;
}

.special_wrap ul li a figcaption {
	width:100%;
	height:100%;
	background:#9fc7d4;
	color:#FFF;
	font-weight:400;
	text-align:left;
	opacity:1;
	transition:all 0.3s;
	text-decoration:none;
	padding:1% 0;
}

.special_wrap ul li a figcaption p {
	width:90%;
	margin:0 auto;
	display:block;
	vertical-align:middle;
	font-size:2.6vw;
	text-decoration:none;
}

.special_wrap ul li a figcaption p span {
	display:block;
	text-align:left;
	font-size:2.8vw;
	width:100%;
	margin:0 auto;
	border-bottom:1px solid #ffffff;
	padding-bottom:4px;
	margin-bottom:4px;
	font-weight:bold;
	text-decoration:none;
}


/* ----------------------------------　フッター　---------------------------------- */

footer {
	width:100%;
	padding:5% 0;
	background-color:#000;
}

.foot_wrap {
	width:100%;
	margin:0 auto;
	position:relative;
}

.foot_txtwrap {
	position:relative;
	margin:3% auto 0;
	padding-bottom:60px;
	border-bottom:1px solid #9fc7d4;
	margin-bottom:60px;
}

.foot_txtbox {
	width:80%;
	margin:0 auto;
}

.foot_txtbox dl {
	font-size:2.2vw;
	line-height:2.1;
	text-align:left;
}

.foot_txtbox dt {
	color:#9fc7d4;
	font-weight:bold;
}

.foot_txtbox dd {
	color:#fff;
	padding-left:16px;
}

h4.title_product {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:10vw;
	color:#a3a3a3;
}

.foot_banner {
	width:200px;
	height:40px;
	margin:0 auto;
	background:#ffffff;
	margin-bottom:8px;
}

.small {
	width:100%;
	color:#ffffff;
	font-size:2vw;
	line-height:20px;
}


/* ----------------------------------　モーダル言語分け　---------------------------------- */

.modal { position:fixed; display:none; z-index:9999; top:0; left:0; right:0; bottom:0; margin:auto; width:80vw; height:80vw; padding:20px; text-align:center; }
.modal_wrap {width:80vw;
height:80vw;
border-radius:20px;
background:url(../img/check.jpg) center top no-repeat;
background-size:100%;
position:relative;}
.modal a.box {width:25vw;display:block;background-color:#9fc7d4; transition:all 0.3s;}
.modal a.box img {width:100%;}
.modal a:hover.box {background-color:#c47fb6;}
.b_left {position:absolute; top:55%; left:50%; margin-left:-30vw;}
.b_right {position:absolute; top:55%; left:50%; margin-left:5vw;}
.modal a { cursor:pointer; }


/* ----------------------------------　サブページ　---------------------------------- */

.sub_space {
	width:100%;
	height:5vh;
	background:#fff;
}

#Backlog {
	padding:5% 0;
	background-color:#ffffff;
}

h4.title_backlog {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:10vw;
	color:#9fc7d4;
}
.sub_content_1k {
	width:100%;
	margin:3% auto 0;
}

/* ----------------------------------　ニュースページ　---------------------------------- */

.oneday {
	width:90%;
	margin:0 auto 5vh;
}

p.day {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:5vw;
	color:#1b0d4a;
	text-align:left;
	border-bottom:1px solid #1b0d4a;
	margin-bottom:36px;
	line-height:8vh;
}

p.day_title {
	font-size:2.8vw;
	color:#1b0d4a;
	text-align:left;
	margin-bottom:24px;
	font-weight:bold;
}

p.entry {
	font-size:2.5vw;
	color:#666666;
	line-height:1.7;
	text-align:left;
}

p.entry a {
	color:#9fc7d4;
	text-decoration:none;
	transition:all 0.3s;
	text-shadow:0 0 5px rgba(0,178,193,0);
	font-weight:bold;
}

p.entry a:hover {
	text-shadow:0 0 5px rgba(0,178,193,0.5);
}

/* ----------------------------------　グッズページ　---------------------------------- */

.goods_title {
	width:96%;
	margin:0 auto;
}

.goods_title img {
	width:100%;
}

.goods_image {
	width:80%;
	margin:0 auto;
	padding-top:113.12%;
	background:#FFF;
	box-shadow:0 0 4px rgba(104,104,104,0.5);
	overflow:hidden;
	position:relative;
	margin-bottom:2vh;
}

.goods_image img {
	width:100%;
	position:absolute;
	left:0;
	top:0;
}

.goods_yoko {
	transform:rotate(270deg) scale(0.8);
}

.goods_explain {
	background:#f2f6f7;
	width:92%;
	text-align:left;
	font-size:1.5rem;
	padding:4%;
	line-height:1.8;
	margin:0 auto;
	font-color:rgba(100,100,100,1.00);
	text-shadow:0 0 6px rgba(104,104,104,0.5);
	margin-bottom:2vh;
}

.goods_explain i {
	font-size:1.3rem;
}

.goods_link {
}

.goods_link a {
	display:block;
	width:90%;
	margin:0 auto;
	background:#9fc7d4;
	color:#FFF;
	border-radius:5px;
	font-size:1.8rem;
	line-height:3.5vh;
	text-decoration:none;
	transition:all 0.3s;
}

.goods_link a:hover {
	background:#2593B7;
}

.goods_space {
	font-size:2rem;
	color:rgba(215,215,215,1.00);
	margin:60px 0;
	text-align:center;
}

.goods_attention {
	color:rgba(100,100,100,1.00);
	font-size:1.5rem;
	text-shadow:0 0 6px rgba(104,104,104,0.5);
}

/* ----------------------------------　インタビュー　---------------------------------- */

.interview_head01 {
	background:url(../special/interview/head01.jpg) left top no-repeat;
	width:98%;
	padding-top:18%;
	margin:0 auto;
	text-indent:-9999px;
	overflow:hidden;
	background-size:100%;
}

.interview_head02 {
	background:url(../special/interview/head02.jpg) left top no-repeat;
	width:98%;
	padding-top:18%;
	margin:0 auto;
	text-indent:-9999px;
	overflow:hidden;
	background-size:100%;
}

.interview_head03 {
	background:url(../special/interview/head03.jpg) left top no-repeat;
	width:98%;
	padding-top:18%;
	margin:0 auto;
	text-indent:-9999px;
	overflow:hidden;
	background-size:100%;
}

.interview_head04 {
	background:url(../special/interview/head04.jpg) left top no-repeat;
	width:98%;
	padding-top:18%;
	margin:0 auto;
	text-indent:-9999px;
	overflow:hidden;
	background-size:100%;
}

.interview_head05 {
	background:url(../special/interview/head05.jpg) left top no-repeat;
	width:98%;
	padding-top:18%;
	margin:0 auto;
	text-indent:-9999px;
	overflow:hidden;
	background-size:100%;
}

.ques {
	color:rgba(100,100,100,1.00);
	width:96%;
	font-size:2.5vw;
	text-shadow:0 0 6px rgba(104,104,104,0.3);
	text-align:left;
	margin:0 auto 1.5vh;
	font-weight:bold;
}

.ques strong {
	font-size:2.8vw;
	font-weight:bold;
	color:rgba(173,173,173,1.00);
}

.ans {
	color:rgba(100,100,100,1.00);
	font-size:2.8vw;
	text-align:left;
	border:1px solid rgba(100,100,100,1.00);
	width:90%;
	padding:3%;
	margin:0 auto 3vh;
	box-shadow:4px 4px 0 rgba(100,100,100,0.5);
}

.chara_select_new {
	display:none;
}

.dlsite_txt {
	font-size:2.2vw;
	color:rgba(100,100,100,1.00);
}

.dlsite_txt p {
	margin-bottom:2vh;
}

.dlsite_txt a {
	display:inline-block;
	padding:1vh 3vw;
	color:#fff;
	text-decoration:none;
	border-radius:auto;
	background-color:#9fc7d4;
	margin-bottom:2vh;
	transition:all 0.3s;
}

.dlsite_txt a:hover {
	background-color:#2C9CC0;
}

.dlsite_img img {
	width:100%;
}


.oldlink {
	width:96%;
	margin:0 auto;
}


.oldlink a {
	width:100%;
	border:1px solid #B8B8B8;
	background-color:#B2C9CF;
	font-size:1.4rem;
	display:block;
	height:24px;
	line-height:24px;
	color:#5B5B5B;
	text-decoration:none;
	transition:all 0.3s;
}

.oldlink a:hover {
	color:#ffffff;
	background:#1B616C;
}

.download_visual {
	background:url(../img/download_visual.jpg) left top no-repeat;
	width:98%;
	padding-top:55.8%;
	margin:0 auto 2vh;
	box-shadow:0 0 7px rgba(0,0,0,0.2);
	background-size:100%;
}

.download_title p {
	display:block;
	width:85%;
	background:rgba(152,152,152,1.00);
	line-height:32px;
	color:#fff;
	font-weight:bold;
	border-radius:16px;
	margin:0 auto 36px;
	font-size:1.5rem;
}

ul.download_list {
	width:100%;
	margin:0 auto 4vh;
}

ul.download_list li {
	width:46%;
	padding:0 2%;
	float:left;
	margin-bottom:2vh;
}

ul.download_list li a {
	width:100%;
	padding:5% 0;
	border-radius:10px;
	background-color:#9fc7d4;
	display:block;
	vertical-align:middle;
	transition:all 0.3s;
	color:#fff;
	font-size:2.3rem;
	text-decoration:none;
	font-weight:bold;
}

ul.download_list li a em {
	font-size:60%;
	font-weight:normal;
}

ul.download_list li a span {
	font-size:80%;
	font-weight:normal;
}

ul.download_list li a:hover {
	background-color:rgba(44,156,192,1.00);
	box-shadow:0 0 10px rgba(44,156,192,0.7);
}

.shopbonus_wrap {
	width:100%;
	margin:0 auto;
}

.shopbonus_box {
	width:46%;
	padding:2%;
	float:left;
	margin-bottom:3vh;
}

.shopbonus_img {
	width:100%;
	background:#FFF;
	box-shadow:0 0 4px rgba(104,104,104,0.5);
}

.shopbonus_img img {
	width:100%;
}

.shopbonus_txt {
	margin-top:1vh;
	background:#f2f6f7;
	width:90%;
	height:100px;
	text-align:left;
	font-size:1.5rem;
	padding:1vh 5%;
	line-height:1.4;
	color:rgba(100,100,100,1.00);
	text-shadow:0 0 6px rgba(104,104,104,0.5);
	float:left;
}

.shopbonus_txt span {
	font-size:120%;
	font-weight:bold;
}

.shopbonus_link {
	width:100%;
	float:left;
	margin-top:1vh;
}

.shopbonus_link p.blank {
	display:block;
	width:100%;
	font-size:1.5rem;
	line-height:2;
	text-decoration:none;
	transition:all 0.3s;
	margin-bottom:1vh;
}

.shopbonus_link a {
	display:block;
	width:100%;
	background:#9fc7d4;
	color:#FFF;
	font-size:1.5rem;
	line-height:2;
	text-decoration:none;
	transition:all 0.3s;
	margin-bottom:1vh;
}

.shopbonus_link a:hover {
	background:#2593B7;
}


.privacy_txt {
	font-size:1.6rem;
	color:rgba(100,100,100,1.00);
	line-height:1.8;
	text-align: left;
	width:96%;
	margin:0 auto;
}

.privacy_txt p {
	margin-bottom:36px;
}

.privacy_txt p strong {
	font-size:1.8rem;
	font-weight: bold;
}

.privacy_txt a {
	display:inline-block;
	padding:0 36px;
	height:36px;
	color:#fff;
	text-decoration:none;
	border-radius:18px;
	background-color:#9fc7d4;
	margin-bottom:24px;
	transition:all 0.3s;
}

.privacy_txt a:hover {
	background-color:#2C9CC0;
}





.android_block {
	width:90%;
	margin:0 auto 2vh;
	background:#f2f6f7;
	text-align:left;
	padding:2%;
	font-size:1.4rem;
	line-height:24px;
	color:rgba(100,100,100,1.00);
	text-shadow:0 0 6px rgba(104,104,104,0.5);
}

.an_icon {
	width:100%;
	padding:3% 0;
	background:#D9E6E9;
	position: relative;
	margin-right:24px;
}

.an_icon img {
	margin:auto;
}

.an_icon a img {
	transition: all 0.3s;
	opacity: 1;
}

.an_icon a:hover img {
	opacity: 0.7;
}

.an_title {
	width:100%;
	font-size:2.2rem;
	font-weight: bold;
	margin-top:24px;
	border-bottom:2px solid rgba(44,156,192,1.00);
	display: inline-block;
	padding-bottom:6px;
}

.an_date {
	width:100%;
	text-align: right;
	color:rgba(44,156,192,1.00);
	display: inline-block;
	margin-bottom:6px;
}

.an_txt {
	margin-bottom:12px;
}

.an_txt br {
	display: none;
}

.an_link a {
	line-height: 28px;
	font-size:1.5rem;
	color:#fff;
	background:#9fc7d4;
	text-decoration: none;
	padding:4px 12px;
	transition: all 0.3s;
	border-radius: 5px;
	display: block;
	margin:0 auto;
}

.an_link a:hover {
	background-color:rgba(44,156,192,1.00);
}

a.an_jump {
	line-height: 28px;
	font-size:1.5rem;
	color:#fff;
	background:#9fc7d4;
	text-decoration: none;
	padding:4px 12px;
	transition: all 0.3s;
	border-radius: 5px;
	display: block;
	margin:0 auto 24px;
	width:50%;
}

a:hover.an_jump {
	background-color:rgba(44,156,192,1.00);
}

.up {
	display: none;
}

.head_an_logo {
	background:url(../img/main_logo.png) center top no-repeat;
	width:100%;
	padding-top:25%;
	background-size:contain;
	margin:0 auto 24px;
}