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



/* clearfix */

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

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

.cr {margin:0 auto;}

/* 点滅 */
.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;}
}

/* ページトップ */

#page-top {
	position: fixed;
	bottom: 24px;
	right: 40px;
	width:50px;
	z-index:550;
}
#page-top a {
	background: #ff698a;
	width:50px;
	height:50px;
	border-radius:5px;
	display:block;
	margin-bottom:12px;
	transition:all 0.3s;
	line-height:50px;
	font-size:3rem;
	color:#fff;
	text-align: center;
}

#page-top a:hover {
	transform: scale(1.2);
}

a.tweetbutton:before {
	content: "TWEET!";
	display: block;
	font-family:"NotoSans_subset", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN";
	font-size:1.4rem;
	width:80px;
	height:24px;
	line-height: 24px;
	background:#ff698a;
	color:#fff;
	text-align: center;
	position: absolute;
	left:50%;
	margin-left:-40px;
	top:-30px;
	border-radius: 5px;
	visibility:hidden;
	opacity: 0;
	transition: all 0.3s
}

a.tweetbutton:hover:before {
	visibility:visible;
	opacity: 1;
}

a.tweetbutton:after {
	content: "";
	display: block;
	position: absolute;
	top:-10px;
	left:50%;
	margin-left:-5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 5px 0 5px;
	border-color: #ff698a transparent transparent transparent;
	visibility:hidden;
	opacity: 0;
	transition: all 0.3s
}

a.tweetbutton:hover:after {
	visibility:visible;
	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: 'Noto Sans', sans-serif;
}

#PageWrapper {
	height: auto !important;
	position: relative;
	width:100%;
}

/* メニュー*/

header {
	width:100%;
	height:100px;
	overflow: hidden;
	position:fixed;
	top:0;
	left:0;
	z-index:400;
}

#Menu:before {
	content:"";
	width:100%;
	height:80px;
	display: block;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9d92+0,fa6ec9+50,b57bff+100 */
	background: rgb(255,157,146); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(255,157,146,1) 0%, rgba(250,110,201,1) 50%, rgba(181,123,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,157,146,1) 0%,rgba(250,110,201,1) 50%,rgba(181,123,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,157,146,1) 0%,rgba(250,110,201,1) 50%,rgba(181,123,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d92', endColorstr='#b57bff',GradientType=1 ); /* IE6-9 */
	position: absolute;
	top:0;
	left:0;
	z-index:-1;
	transition: all 0.3s;
}

#Menu {
	width:100%;
	height:80px;
	background-image: linear-gradient(
	-45deg,
	rgba(255,255,255,0.1) 25%,
	rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%,
	rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%,
	rgba(255,255,255,0) 75%, rgba(255,255,255,0)
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 32px 32px;
	position: absolute;
	top:0;
	left:0;
	border-bottom:1px solid #ffc7cd;
	transition: all 0.3s;
}

.menu_wrap {
	width:1000px;
	height:80px;
	margin:0 auto;
	position: relative;
	transition: all 0.3s;
}

.head_logo {
	width:250px;
	position: absolute;
	top:0;
	left:0;
}

.head_logo img {
	width:100%;
	transition: all 0.3s;
}

.head_logo p {
	position: absolute;
	left:0;
	top:0;
	display: block;
	opacity: 0;
	font-family: 'Passion One', cursive;
	font-size:2.8rem;
	line-height: 40px;
	color:#fff;
	transition: all 0.3s;
}

.head_menu {
	position: absolute;
	right:0;
	top:0;
}

.button_mobile {
	display: none;
}

.head_menu ul li {
	float:left;
}

.head_menu ul li a {
	color:#fff;
	padding:0 20px;
	display: block;
	text-align: center;
	height:80px;
	text-decoration: none;
	transition: all 0.3s;
}

.head_menu ul li a:hover {
	background:#fff!important;
}

.head_menu ul li a p {
	font-family: 'Passion One', cursive;
	font-size:2.8rem;
	height:80px;
	display: table-cell;
	vertical-align: middle;
	line-height: 0.8;
	transition: all 0.3s;
}

.head_menu ul li a:hover p {
	color:#ff698a!important;
}

.head_menu ul li a span {
	font-size:1.4rem;
	font-family: 'Noto Sans', sans-serif;
}

.menu_language {
	padding-right:50%;
	height:20px;
	background-color:#fff;
	position: absolute;
	bottom:-20px;
	right:0;
	margin-right:-500px;
}

.menu_language:before {
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 20px 0;
	border-color: transparent #fff transparent transparent;
	display:block;
	position: absolute;
	bottom:0;
	left:-20px;
}

.menu_language a {
	font-family: 'Passion One', cursive;
	color:#ff6989;
	line-height: 20px;
	padding:0 20px;
	font-size:1.6rem;
	text-decoration: none;
	position: relative;
}

a.lang_select:before {
	content:"";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #ff698a;
	position: absolute;
	top:0;
	bottom:0;
	left:5px;
	margin:auto 0;
}

.fixed .head_logo p {opacity: 1;}
.fixed .head_logo img {opacity:0; }
.fixed #Menu:before {height:40px;}
.fixed #Menu {height:40px;}
.fixed .head_menu ul li a {height:40px;}
.fixed .head_menu ul li a p {height:40px;}
.fixed .head_menu ul li a p br {display: none;}
.fixed .head_menu ul li a p span {display: none;}

.menuclick_bg {
	display: none;
}

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

#Mainvisual {
	background:url(../img/mainvisual.jpg) center top no-repeat;
	background-size:cover;
	width:100%;
	height:980px;
	overflow: hidden;
}

.visual {
	width:1000px;
	height:980px;
	position: relative;
	margin:0 auto;
}

.visual h1 {
	background:url(../img/logo.png) left top no-repeat;
	width:730px;
	height:270px;
	background-size:contain;
	position: absolute;
	bottom:160px;
	left:0;
	right:0;
	margin:0 auto;
	text-indent: -9999px;
	overflow: hidden;
}

.visual h2 {
	background:url(../img/date.png) center top no-repeat;
	width:1000px;
	height:135px;
	position: absolute;
	left:0;
	bottom:24px;
	text-indent: -9999px;
	overflow: hidden;
}

.catch {
	background:url(../img/catch.png) left top no-repeat;
	background-size:contain;
	width:480px;
	height:253px;
	position: absolute;
	left:50%;
	margin-left:-500px;
	top:270px;
}

.badge {
	background-size:contain;
	width:180px;
	height:180px;
	position: absolute;
	right:50%;
	margin-right:-450px;
	bottom:150px;
}

.badge img {
	width:100%;
}

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

.badge a:hover img {
	transition: all 0.3s;
	opacity: 0.7;
}

/* サブカテゴリ汎用 */

.contents_head {
	width:100%;
	text-align: center;
}

.contents_head h3 {
	font-family: 'Passion One', cursive;
	font-size:5rem;
	display: inline-block;
	position: relative;
	letter-spacing: 0.1em;
}

.contents_head h3:before {
	content: "";
	width:150px;
	height:2px;
	position: absolute;
	left:-170px;
	top:0;
	bottom:0;
	margin:auto 0;
}

.contents_head h3:after {
	content: "";
	width:150px;
	height:2px;
	position: absolute;
	right:-170px;
	top:0;
	bottom:0;
	margin:auto 0;
}

.contents_head h3 span {
	font-size:1.8rem;
	font-family: 'Noto Sans', sans-serif;
	margin-left:16px;
}

#News .contents_head {color:#ff72bb;} #News .contents_head h3:before, #News .contents_head h3:after {background-color:#ff72bb;}
#Gallery .contents_head {color:#ffffff;} #Gallery .contents_head h3:before, #Gallery .contents_head h3:after {background-color:#ffffff;}
#Story .contents_head {color:#ff43a0;} #Story .contents_head h3:before, #Story .contents_head h3:after {background-color:#ff43a0;}
#Character .contents_head {color:#ff72bb;} #Character .contents_head h3:before, #Character .contents_head h3:after {background-color:#ff72bb;}
#Product .contents_head {color:#ffffff;} #Product .contents_head h3:before, #Product .contents_head h3:after {background-color:#ffffff;}

/* ニュース */

#News {
	padding:60px 0;
	background:url(../img/news_bg.png) center center no-repeat;
	position: relative;
}

.button_fb {
	width:60px;
	height:60px;
	position: absolute;
	border-radius: 5px;
	overflow: hidden;
	background-color:#fff;
	left:50%;
	margin-left:-500px;
	top:-12px;
}

.button_fb a img {
	width: 100%;
	transition: all 0.3s;
}

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

.button_line {
	width:150px;
	height:60px;
	position: absolute;
	border-radius: 5px;
	overflow: hidden;
	background-color:#fff;
	left:50%;
	margin-left:-420px;
	top:-12px;
}

.button_line a img {
	width: 100%;
	transition: all 0.3s;
}

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

.button_tw {
	width:60px;
	height:60px;
	position: absolute;
	background-color:#fff;
	left:50%;
	margin-left:-250px;
	top:-12px;
	border-radius: 5px;
}

.button_tw a img {
	width: 100%;
	transition: all 0.3s;
	border-radius: 5px;
}

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

.button_tw a:before {
	content: "FOLLOW";
	display: block;
	font-family:"NotoSans_subset", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN";
	font-size:1.4rem;
	width:80px;
	height:24px;
	line-height: 24px;
	background:#1da1f2;
	color:#fff;
	text-align: center;
	position: absolute;
	left:50%;
	margin-left:-40px;
	top:-30px;
	border-radius: 5px;
	visibility:hidden;
	opacity: 0;
	transition: all 0.3s
}

.button_tw a:hover:before {
	visibility:visible;
	opacity: 1;
}

.button_tw a:after {
	content: "";
	display: block;
	position: absolute;
	top:-10px;
	left:50%;
	margin-left:-5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 5px 0 5px;
	border-color: #1da1f2 transparent transparent transparent;
	visibility:hidden;
	opacity: 0;
	transition: all 0.3s
}

.button_tw a:hover:after {
	visibility:visible;
	opacity: 1;
}

.newsbox {
	width:1000px;
	height:138px;
	overflow: hidden;
	margin:24px auto 24px;
}

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

.newsbox dl:after {
    clear: both;
}

.newsbox dl {
	width:1000px;
    *zoom: 1;
	padding-bottom:5px;
	border-bottom:1px dashed #747474;
	margin-bottom:12px;
}

.newsbox dl dt {
	width:130px;
	height:28px;
	display: block;
	background-color:#ff72bb;
	border-radius: 5px;
	line-height: 28px;
	color:#fff;
	font-size:1.6rem;
	text-align: center;
	float:left;
}

.newsbox dl dd {
	float:left;
	font-size:1.6rem;
	line-height: 28px;
	color:#747474;
}

.movie-wrap {
    position: relative;
	width:1000px;
    padding-bottom: 563px;
    padding-top: 30px;
    height: 0;
	margin:0 auto 36px;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.frillandlace_link {
	width:1000px;
	height:180px;
	margin:0 auto;
}

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

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

.kickstarter_link {
	width:1000px;
	height:180px;
	margin:24px auto 0;
}

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

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

/* ギャラリー */

#Gallery {
	width:100%;
	height:1360px;
	position: relative;
	overflow: hidden;
}

#Gallery .contents_head {
	position: absolute;
	top:60px;
	left:0;
	z-index:10;
}

.cgbox {
	width:100%;
	height:1360px;
	display: block;
	position: relative;
}

.cgbox:before {
	content:"";
	width:100%;
	height:1360px;
	display: block;
	-webkit-filter: blur(10px);
	filter: blur(10px);
	position: absolute;
	top:0;
	left:0;
	z-index:-1;
}

.cgbox:after {
	content:"";
	width:100%;
	height:1360px;
	display: block;
	background:url(../img/shadow_b.png) left top repeat;
	position: absolute;
	top:0;
	left:0;
}

.cg01:before {background:url(../img/gallery/cg01.jpg) center center no-repeat;	background-size:cover;}
.cg02:before {background:url(../img/gallery/cg02.jpg) center center no-repeat;	background-size:cover;}
.cg03:before {background:url(../img/gallery/cg03.jpg) center center no-repeat;	background-size:cover;}
.cg04:before {background:url(../img/gallery/cg04.jpg) center center no-repeat;	background-size:cover;}
.cg05:before {background:url(../img/gallery/cg05.jpg) center center no-repeat;	background-size:cover;}
.cg06:before {background:url(../img/gallery/cg06.jpg) center center no-repeat;	background-size:cover;}
.cg07:before {background:url(../img/gallery/cg07.jpg) center center no-repeat;	background-size:cover;}
.cg08:before {background:url(../img/gallery/cg08.jpg) center center no-repeat;	background-size:cover;}
.cg09:before {background:url(../img/gallery/cg09.jpg) center center no-repeat;	background-size:cover;}
.cg10:before {background:url(../img/gallery/cg10.jpg) center center no-repeat;	background-size:cover;}
.cg11:before {background:url(../img/gallery/cg11.jpg) center center no-repeat;	background-size:cover;}
.cg12:before {background:url(../img/gallery/cg12.jpg) center center no-repeat;	background-size:cover;}
.cg13:before {background:url(../img/gallery/cg13.jpg) center center no-repeat;	background-size:cover;}
.cg14:before {background:url(../img/gallery/cg14.jpg) center center no-repeat;	background-size:cover;}
.cg15:before {background:url(../img/gallery/cg15.jpg) center center no-repeat;	background-size:cover;}

.inner_cg {
	width:960px;
	position:absolute;
	z-index:10;
	top:160px;
	left:0;
	right:0;
	margin:0 auto;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
}

.inner_cg figure img {
	width:100%;
}

.inner_cg a figcaption {
	position: absolute;
	left:0;
	top:0;
	opacity: 0;
	transition: all 0.3s;
}

.inner_cg a:hover figcaption {
	opacity: 1;
}

.cg_menu {
	width:960px;
	position: absolute;
	bottom:60px;
	left:0;
	right:0;
	margin:0 auto;
	z-index:10;
}

.cg_menu ul {
	margin-right:-12px;
}

.cg_menu ul li {
	width:231px;
	display: block;
	margin-right:12px;
	margin-bottom:12px;
	float:left;
	position: relative;
}

.cg_menu ul li a {
	width:231px;
	display: block;
	background-color:#fff;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
}

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

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

/* ストーリー */

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

.story_catch {
	background:url(../img/story_catch.png) center top no-repeat;
	width:911px;
	height:218px;
	text-indent: -9999px;
	overflow: hidden;
	margin:36px auto;
}

.story_wrap {
	background:url(../img/silhouette.png) center bottom no-repeat;
	width:100%;
	padding:60px 0;
	position: relative;
	z-index:10;
	overflow: hidden;
}

.story_wrap:before {
	content: "";
	display: block;
	background:url(../img/shadow_w.png) left top repeat;
	width:100%;
	height:1100px;
	position: absolute;
	z-index:-1;
	top:0;
	left:0;
}

.story_body p {
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	font-size:1.8rem;
	color:#5F5F5F;
	line-height: 2;
	text-align: center;
	text-shadow:2px 2px 1px #fff,-2px 2px 1px #fff,2px -2px 1px #fff,-2px -2px 1px #fff;
}

.story_body p rt {
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
	font-size:1rem;
}

.story_body p strong {
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	font-size:130%;
}

.alice {color:#ff43a0;background: linear-gradient(transparent 60%, rgba(255,159,230,0.7) 60%);padding:0 2px;}
.reiji {color:rgba(124,92,75,1.00);background: linear-gradient(transparent 60%, rgba(124,92,75,0.7) 60%);padding:0 2px;}

/* キャラクター */

#Character {
	width:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,fa6ec9+50,ff9d92+100&0+0,0.3+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(250,110,201,0.15) 50%, rgba(255,157,146,0.3) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(250,110,201,0.15) 50%,rgba(255,157,146,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(250,110,201,0.15) 50%,rgba(255,157,146,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#4dff9d92',GradientType=0 ); /* IE6-9 */
	position: relative;
}

.chara_wrap {
	width:100%;
	height:1200px;
	background:url(../img/character/chara_pat.png) left top repeat;
	
}

#Character .contents_head {
	position: absolute;
	top:60px;
	left:0;
	z-index:15;
}

.chara_body:before {
	content: "";
	background:url(../img/character/chara_rt.png) left top no-repeat;
	width:384px;
	height:607px;
	position: absolute;
	right:0;
	top:0;
	z-index:1;
}

.chara_body:after {
	content: "";
	background:url(../img/character/chara_lb.png) left top no-repeat;
	width:384px;
	height:607px;
	position: absolute;
	left:0;
	bottom:0;
	z-index:-1;
}

#Character .charaslide {
	width:100%;
	position:relative;
}

.chara_body {
	background:url(../img/character/wear.png) center top no-repeat;
	width:100%;
	height:1000px;
	padding-top:100px;
	position: relative;
	z-index:20;
}

.chara_stand {
	height:1000px;
	position: absolute;
	top:100px;
	left:50%;
	margin-left:-500px;
	z-index:25;
}

.formchange {
	position: absolute;
	top:950px;
	left:50%;
	margin-left:-500px;
	z-index:500;
}

.formchange a {
	display: block;
	float:left;
	margin-right:12px;
}

.stand_alice01 {
	width:636px;
	height:1000px;
	background:url(../img/character/ch_stand_01.png) -100px top no-repeat;
	position: absolute;
	top:0;
	left:80px;
	transition: all 0.2s;
}

.stand_alice02 {
	width:636px;
	height:1000px;
	background:url(../img/character/ch_stand_01b.png) -100px top no-repeat;
	position: absolute;
	top:0;
	left:80px;
	transition: all 0.2s;
}

#Alice:not(:target) .stand_alice01 {
	opacity: 1;
}

#Alice:target .stand_alice01 {
	opacity: 0;
}

#Alice:not(:target) .stand_alice02 {
	opacity: 0;
}

#Alice:target .stand_alice02 {
	opacity: 1;
}

.chara_phrase {
	width:250px;
	height:400px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top:160px;
	left:50%;
	margin-left:-500px;
	z-index:50;
}

.chara_catch {
	height:47px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top:160px;
	right:50%;
	margin-right:-500px;
	z-index:50;
}

.chara_name {
	width:465px;
	height:125px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top:220px;
	right:50%;
	margin-right:-500px;
	z-index:50;
}

.chara_voice {
	height:50px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top:350px;
	right:50%;
	margin-right:-500px;
	z-index:50;
}

.chara_spec {
	height:60px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top:420px;
	right:50%;
	margin-right:-500px;
	z-index:50;
}

.chara_txt {
	position: absolute;
	top:510px;
	right:50%;
	margin-right:-500px;
	z-index:50;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	font-size:1.4rem;
	text-align: right;
	color:#5F5F5F;
	line-height: 1.6;
	text-shadow:2px 2px 1px #fff,-2px 2px 1px #fff,2px -2px 1px #fff,-2px -2px 1px #fff;
}

chara_txt i {
	font-style: italic;
}

.chara_status {
	width:600px;
	text-indent: -9999px;
	border-radius: 5px;
	overflow: hidden;
	position: absolute;
	top:930px;
	right:50%;
	margin-right:-500px;
	z-index:50;
}

#Chara01 .chara_phrase {background:url(../img/character/ch_phrase_01.png) left top no-repeat;}
#Chara01 .chara_catch {background:url(../img/character/ch_catch_01.png) left top no-repeat; width:589px;}
#Chara01 .chara_name {background:url(../img/character/ch_name_01.png) left top no-repeat; width:608px;}
#Chara01 .chara_voice {background:url(../img/character/ch_voice_01.png) left top no-repeat; width:264px;}
#Chara01 .chara_spec {background:url(../img/character/ch_spec_01.png) left top no-repeat; width:505px;}
#Chara01 .chara_status {background:url(../img/character/ch_status_01.png) left top no-repeat; height:84px;}

#Chara02 .chara_stand {background:url(../img/character/ch_stand_02.png) left top no-repeat; width:636px;}
#Chara02 .chara_phrase {background:url(../img/character/ch_phrase_02.png) left top no-repeat;}
#Chara02 .chara_catch {background:url(../img/character/ch_catch_02.png) left top no-repeat; width:497px;}
#Chara02 .chara_name {background:url(../img/character/ch_name_02.png) left top no-repeat; width:598px;}
#Chara02 .chara_voice {background:url(../img/character/ch_voice_02.png) left top no-repeat; width:296px;}
#Chara02 .chara_spec {background:url(../img/character/ch_spec_02.png) left top no-repeat; width:505px;}
#Chara02 .chara_status {background:url(../img/character/ch_status_02.png) left top no-repeat; height:57px;}

#Chara03 .chara_stand {background:url(../img/character/ch_stand_03.png) left top no-repeat; width:636px;}
#Chara03 .chara_phrase {background:url(../img/character/ch_phrase_03.png) left top no-repeat;}
#Chara03 .chara_catch {background:url(../img/character/ch_catch_03.png) left top no-repeat; width:743px;}
#Chara03 .chara_name {background:url(../img/character/ch_name_03.png) left top no-repeat; width:491px;}
#Chara03 .chara_voice {background:url(../img/character/ch_voice_03.png) left top no-repeat; width:201px;}
#Chara03 .chara_spec {background:url(../img/character/ch_spec_03.png) left top no-repeat; width:505px;}
#Chara03 .chara_status {background:url(../img/character/ch_status_03.png) left top no-repeat; height:57px;}

#Chara04 .chara_stand {background:url(../img/character/ch_stand_04.png) left top no-repeat; width:636px;}
#Chara04 .chara_phrase {background:url(../img/character/ch_phrase_04.png) left top no-repeat;}
#Chara04 .chara_catch {background:url(../img/character/ch_catch_04.png) left top no-repeat; width:424px;}
#Chara04 .chara_name {background:url(../img/character/ch_name_04.png) left top no-repeat; width:533px;}
#Chara04 .chara_voice {background:url(../img/character/ch_voice_04.png) left top no-repeat; width:280px;}
#Chara04 .chara_spec {background:url(../img/character/ch_spec_04.png) left top no-repeat; width:505px;}
#Chara04 .chara_status {background:url(../img/character/ch_status_04.png) left top no-repeat; height:57px;}

#Chara05 .chara_stand {background:url(../img/character/ch_stand_05.png) left top no-repeat; width:636px;}
#Chara05 .chara_phrase {background:url(../img/character/ch_phrase_05.png) left top no-repeat;}
#Chara05 .chara_catch {background:url(../img/character/ch_catch_05.png) left top no-repeat; width:467px;}
#Chara05 .chara_name {background:url(../img/character/ch_name_05.png) left top no-repeat; width:490px;}
#Chara05 .chara_voice {background:url(../img/character/ch_voice_05.png) left top no-repeat; width:232px;}
#Chara05 .chara_spec {background:url(../img/character/ch_spec_05.png) left top no-repeat; width:505px;}
#Chara05 .chara_status {background:url(../img/character/ch_status_05.png) left top no-repeat; height:57px;}

#Chara06 .chara_stand {background:url(../img/character/ch_stand_06.png) left top no-repeat; width:636px;}
#Chara06 .chara_phrase {background:url(../img/character/ch_phrase_06.png) left top no-repeat;}
#Chara06 .chara_catch {background:url(../img/character/ch_catch_06.png) left top no-repeat; width:349px;}
#Chara06 .chara_name {background:url(../img/character/ch_name_06.png) left top no-repeat; width:573px;}
#Chara06 .chara_voice {background:url(../img/character/ch_voice_06.png) left top no-repeat; width:246px;}
#Chara06 .chara_spec {background:url(../img/character/ch_spec_06.png) left top no-repeat; width:505px;}
#Chara06 .chara_status {background:url(../img/character/ch_status_06.png) left top no-repeat; height:57px;}

#Chara07 .chara_stand {background:url(../img/character/ch_stand_07.png) left top no-repeat; width:636px;}
#Chara07 .chara_name {background:url(../img/character/ch_name_07.png) left top no-repeat; width:481px;}
#Chara07 .chara_status {background:url(../img/character/ch_status_07.png) left top no-repeat; height:84px;}

.chara_select {
	background:url(../img/character/select_bg.gif) left top repeat;
	width:100%;
	height:100px;
	position: absolute;
	bottom:0;
	left:0;
	z-index:100;
}

.select_wrap {
	width:100%;
	position:absolute;
	text-align: center;
	top:-52px;
	left:0;
	z-index:200;
}

.chara_select ul {
	display: inline-block;
	margin-right:-32px;
	background:url(../img/character/subchara.png) center top no-repeat;
}

.chara_select ul li {
	float:left;
	margin-right:32px;
	text-align: center;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	color:#5F5F5F;
	font-size:1.6rem;
}

.chara_select ul li.s_l {width:120px;}
.chara_select ul li.s_n {width:100px; margin-top:20px;}
.chara_select ul li.s_p {width:100px; margin-top:20px;}

.chara_select ul li a {
	display: block;
	border-radius: 5px;
	overflow: hidden;
	box-shadow:0 0 5px rgba(255,114,187,0.7);
	background:rgba(255,114,187,1);
	position: relative;
}

.chara_select ul li a img {
	width:100%;
}

.chara_select ul li a figcaption {
	width:100%;
	height:100%;
	background:rgba(255,114,187,0.7);
	position: absolute;
	font-family: 'Passion One', cursive;
	left:0;
	top:0;
	opacity: 0;
	transition: all 0.3s;
}

.chara_select ul li a:hover figcaption {
	opacity: 1;
}

.chara_select ul li a figcaption p {
	color:#fff;
	width:100px;
	line-height: 20px;
	display: table-cell;
	vertical-align: middle;
	font-size:2.1rem;
	position: absolute;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
}

.chara_select ul li.s_l a figcaption p {
	padding:10px 0;
}

/*　ボイス　*/

.voice_area {
	width:526px;
	position: absolute;
	right:50%;
	margin-right:-500px;
	bottom:180px;
	z-index:500;
}

.voice_area ul {
	margin-right:-8px;
}

.voice_area ul li {
	width:166px;
	padding:2px;
	display: block;
	border-radius: 20px;
	text-align: center;
	font-family: 'Passion One', cursive;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9a95+0,ba77fa+100 */
	background: #ff9a95; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff9a95 0%, #ba77fa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ff9a95 0%,#ba77fa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ff9a95 0%,#ba77fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9a95', endColorstr='#ba77fa',GradientType=0 ); /* IE6-9 */
	float:left;
	margin-right:8px;
	margin-bottom:6px;
}

.voice_area ul li a {
	width:162px;
	height:28px;
	border:2px solid #fff;
	display: block;
	border-radius: 18px;
	background-image: linear-gradient(
	-45deg,
	rgba(255,121,193,1.00) 25%,
	rgba(255,153,207,1.00) 25%, rgba(255,153,207,1.00) 50%,
	rgba(255,121,193,1.00) 50%, rgba(255,121,193,1.00) 75%,
	rgba(255,153,207,1.00) 75%, rgba(255,153,207,1.00)
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 32px 32px;
	color:#fff;
	text-decoration: none;
	line-height: 28px;
	font-size:1.9rem;
	transition: all 0.3s;
}

.voice_area ul li a:hover {
	opacity: 0.7;
}

.chara01_txt {
	font-size:1.4rem;
	line-height: 1.35;
}

/* プロダクト */

#Product {
	width:100%;
	display: block;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9d92+0,fa6ec9+50,b57bff+100 */
	background: rgb(255,157,146); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(255,157,146,1) 0%, rgba(250,110,201,1) 50%, rgba(181,123,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,157,146,1) 0%,rgba(250,110,201,1) 50%,rgba(181,123,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,157,146,1) 0%,rgba(250,110,201,1) 50%,rgba(181,123,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d92', endColorstr='#b57bff',GradientType=1 ); /* IE6-9 */
}

.product_wrap {
	width:100%;
	padding:60px 0;
	background-image: linear-gradient(
	-45deg,
	rgba(255,255,255,0.1) 25%,
	rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%,
	rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%,
	rgba(255,255,255,0) 75%, rgba(255,255,255,0)
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 32px 32px;
	text-align: center;
}

.staff_wrap {
	margin-top:48px;
	display: inline-block;
	margin-bottom:60px;
}

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

.staff_wrap dl:after {
    clear: both;
}

.staff_wrap dl {
    *zoom: 1;
	margin-bottom:24px;
}

.staff_wrap dl dt {
	width:260px;
	height:32px;
	border-radius: 16px;
	background-color:#fff;
	color:#eb6e8f;
	line-height: 32px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
	font-size:1.6rem;
	float:left;
	text-align: center;
	margin-right:24px;
}

.staff_wrap dl dd {
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	line-height: 32px;
	color:#fff;
	font-size:1.6rem;
	float:left;
	text-align: left;
}

.spec_wrap {
	margin-top:48px;
	margin-bottom:60px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
}

.spec_wrap table {
	border-collapse: separate;
	border-spacing: 3px;
	display: inline-block;
}

.spec_wrap table th {
	border:1px dotted #eb6e8f;
	font-size:1.4rem;
	color:#eb6e8f;
	background:#fff;
	text-align: center;
	padding:2px 24px;
}

.spec_wrap table td {
	border:1px dotted #fff;
	font-size:1.6rem;
	color:#fff;
	text-align: left;
	padding:2px 12px;
}

#Product hr {
	width:1000px;
	border-top:1px solid #fff;
	margin:0 auto 48px;
}

.banner {
	width:200px;
	height:40px;
	background-color:#fff;
	margin:0 auto 12px;
}

.banner a img {
	transition: all 0.3s;
}

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

.copyright {
	color:#fff;
	font-size:1.2rem;
}


.new:after {
	content:"";
	background:url(../topics/new.png) left top no-repeat;
	background-size:cover;
	position:absolute;
	display: block;
	width:50px;
	height:50px;
	left:10px;
	top:-20px;
}

.new2:after {
	content:"";
	background:url(../topics/new.png) left top no-repeat;
	background-size:cover;
	position:absolute;
	display: block;
	width:50px;
	height:50px;
	right:0;
	top:-5px;
}
.on_pc {
}

.on_mo {
	display: none!important;
}