/* header
------------------- */

#site-header{
	position: relative;
	height: 82px;
	background:rgba(255,255,255,0.9) url(../img/lib.png) center top repeat-x;
	display: flex;
	justify-content: space-between;
	z-index: 1;
}
#site-header .logo{
	display: block;
	margin: 27px 10px 0 20px;
}
#site-header .logo img{
	height: 33px;
}
#site-header .menu{
	display: none;
}
#gMenu{
	margin-top: 30px;
}
#gMenu ul{
	display: flex;
}
#gMenu ul li{
	padding: 0px 10px;
}
#gMenu ul a{
	height: 30px;
	line-height: 30px;
	text-decoration: none;
	color: #000;
	font-size: 19px;
	letter-spacing: 0.1em;
	padding-left: 20px;
	background: url(../img/element.svg) left center no-repeat;
	background-size: 14px;
}

#site-header .utill{
	margin-right: 20px;
}

#site-header .utill .language{
	margin-top: 20px;
}
#site-header .utill .language ul{
	display: flex;
	float: right;
}
#site-header .utill .language ul li{
	padding: 0px 10px;
	border-right: 1px solid #aaa;
	height: 15px;
}
#site-header .utill .language ul li:last-child{
	border: none;
	padding-right: 0;
}
#site-header .utill .language ul li a{
	display: block;
	color: #000;
	text-decoration: none;
	line-height: 15px;
	font-size: 12px;
}
#site-header .utill .language ul li a.lng-select{
	font-weight: bold;
	color: #76CAD5;
}

#site-header .utill .sns{
	margin-top: 14px;
	float: right;
}
#site-header .utill .sns a.twitter{
	display: block;
	background: #55acee;
	border-radius: 13px;
	width: 26px;
	height: 26px;
}
#site-header .utill .sns a.twitter img{
	width: 22px;
	height: 22px;
	margin-top: 2px;
	margin-left: 2px;
}

@media screen and (max-width: 1050px) {
	#site-header .logo{
		margin-left: 10px;
		margin-right: 10px;
	}
	#site-header .utill{
		margin-right: 5px;
	}
}

#spMenu{
	display: none;
}
/* footer
------------------- */


#site-footer{
	background: #fff url(../img/lib2.png) center top repeat-x;
	padding-top: 15px;
	text-align: center;
}
#site-footer .Page-top{
	display: block;
	position: absolute;
	right: 5px;
	top: -90px;
	background:#fff url(../img/arrow.up.svg) center 12px no-repeat;
	background-size: 36px auto;
	width: 70px;
	height: 70px;
	border-radius: 40px;
	color: #333;
	padding-top: 44px;
	line-height: 1em;
	text-decoration: none;
	font-size: 12px;
}
#site-footer .logo{
	display: block;
	height: 110px;
	margin-top: 35px;
}
#site-footer .logo img{
	height: 100%;
}
#site-footer .language{
	line-height: 100px;
}
#site-footer .language ul{
	display: flex;
	margin: 0 auto;
	justify-content: center;
}
#site-footer .language ul a{
	display: block;
	width: 80px;
	text-align: center;
	color: #000;
	text-decoration: none;
}
#site-footer .language ul a.lng-select{
	font-weight: bold;
	color: #76CAD5;
}
#site-footer .platform{
	width: 705px;/* 0926 */
	margin: 15px auto 25px;
	display: flex;
}
#site-footer .platform li{
	padding: 0px 12px;
}
#site-footer .vita-copyright{
	display: block;
	margin-top: 60px;
}
#site-footer .vita-copyright img{
	height: 10px;
	width: auto;
	vertical-align:baseline;
	margin: 0px 3px;
}
#site-footer .vita-copyright img.pstext{
	height: 14px;
	vertical-align: middle;
	margin-top: -2px;
}
#site-footer .switch-copyright{
	display: block;
	margin-top: 10px;
	margin-bottom: 31px;
}
#site-footer .copyright{
	background: #000;
	color: #fff;
	height: 68px;
	display: flex;
	justify-content: space-between;
}
#site-footer .copyright small{
	display: block;
	padding: 0px 20px;
	line-height: 68px;
}
#site-footer .copyright ul{
	display: flex;
	padding: 18px 15px;
}
#site-footer .copyright ul li{
	padding: 0px 5px;
}
#site-footer .copyright ul img{
	height: 32px;
}
/* parts
------------------- */
.label{
	display: block;
	color: #fff;
	line-height: 20px;
	letter-spacing: 0.1em;
	border-radius: 10px;
	padding: 0px 10px;
}
.label a{
	color: #fff;
	text-decoration: none;
}
h3.content-shoulder{
	line-height: 100px;
	color: #fff;
	font-weight: normal;
	font-size: 30px;
}
a.link{
	display: inline-block;
	color: #000;
	text-decoration: none;
	background:  url(../img/arrow.right.svg) right center no-repeat;
	background-size: 28px auto;
	padding-right: 50px;
	line-height: 44px;
}
.topics-list li{
	border-bottom: 2px solid #fff;
}
.topics-list li a{
	color: #fff;
	text-decoration: none;
}
.topics-list li article{
	display: flex;
	padding: 15px 0;
}
.topics-list li article time{
	display: block;
	width: 150px;
	padding-left: 37px;
	font-size: 16px;
	letter-spacing: 0.1em;
}
.topics-list li article .label{
	width: 80px;
	text-align: center;
}
.topics-list li article h3{
	width: 60%;
	font-weight: normal;
	width: 680px;
	padding-left: 25px;
}

/* temp
------------------- */
#content > .wrap{
	width: 940px;
	margin: 0 auto;
}
.main-box{
	background: rgba(255,255,255,0.9) url(../img/lib.png) center top repeat-x;
	padding-top: 8px;
}
.head-info{
	background: #fff;
	height: 33px;
	padding: 0px 10px;
}
.head-info time{
	float: left;
	line-height: 32px;
}

.head-info .label{
	float: right;
	margin-top: 6px;
}
#content .main-box h1{
	font-size: 30px;
	margin-bottom: 45px;
}
#content .main-box .head-info{
	padding: 10px 45px;
	height: auto;
}
#content .main-box .head-info::after{
	display: block;
	content: "";
	clear: both;
}
#content .main-box .head-info time{
	font-size: 17px;
}
#content .main-box .head-info .label{
	height: 26px;
	border-radius: 13px;
	margin-top: 2px;
	font-size: 17px;
	line-height: 26px;
	padding: 0px 15px;
}
#content .main-box .document{
	padding: 45px;
	font-size: 16px;
	line-height: 1.6em;
}

#content .main-box .document p{
	margin-bottom: 30px;
	overflow:hidden;
}
#content .main-box .document a{
	display: inline-block;
	white-space: normal;
	text-overflow: ellipsis;
	overflow:hidden;
}
.article-list{
	display: flex;
	flex-wrap: wrap;
	
}
.article-list li{
	width: 25%;
	padding: 1px;
}
.article-list li a{
	position: relative;
	display: block;
	color: #000;
	text-decoration: none;
	box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
	height: 100%;
}
.article-list li a::after{
	position: absolute;
	display: block;
	content: "";
	bottom: 10px;
	right: 10px;
	width: 26px;
	height: 50px;
	background: url(../img/arrow.right.svg) right bottom no-repeat;
	background-size: 100% auto;
}
.article-list li article{
	padding-top: 4px;
	padding-bottom: 20px;
	height: 100%;
}
.article-list li article h3{
	padding: 5% 5% 0 5%;
}
.article-list li article p{
	padding: 5%;
	font-size: 13px;
	line-height: 1.5em;
}
/* home
------------------- */
main#home,
main#home *{
/*	transition: all 0.3s ease;*/
}

main#home{
	background: url(../img/bg.yurimasu31.jpg) center top no-repeat fixed;
	background-size: cover;
}
#home-lay1,
#home-lay2,
#home-lay3{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

#home-lay1{
	background: url(../img/yurimasu31.bg2.png) center top no-repeat fixed;
	background-size: 900px auto;
}
#home-lay2{
	background: url(../img/yurimasu31.bg3.png) center top no-repeat fixed;
	background-size: 900px auto;
}

#home-lay3{
	background: url(../img/yurimasu31.bg4.png) center top no-repeat fixed;
	background-size: 900px auto;
}

main#home #intro{
	height: 600px;
	position: relative;
}
main#home #intro h1{
	position: absolute;
	top: 8%;
	width: 300px;
	left: 50%;
	margin-left: -150px
}
@media (min-width:1120px) {
	main#home #intro h1{
		width: 350px;
		margin-left: -175px;

	}
	#home-lay1{
		background-size: 1040px auto;
	}
	#home-lay2{
		background-size: 1040px auto;
	}
	#home-lay3{
		background-size: 1040px auto;
	}
}
main#home #intro h1 img{
	width: 100%;
}
main#home #intro .read{
	width: 100%;
	position: absolute;
	bottom: 0%;
}
main#home #intro h2{
	width: 50%;
	margin-left: 25%;
	margin-bottom: 20px;
}
main#home #intro p{
	text-align: center;
	width: 100%;
	padding: 15px 20px 35px;
	background:rgba(255,255,255,0.9) url(../img/lib.png) center bottom repeat-x;
}
main#home #intro p::after{
	display: block;
	content: "";
	height: 20px;
	width: 30px;
	background: url(../img/arrow.up.down.svg) no-repeat;
	position: absolute;
	bottom: 15px;
	left: 50%;
	margin-left: -15px;
}
main#home #about {
	background: rgba(255,255,255,0.9) url(../img/home.ai.png) 0px top no-repeat fixed;
	background-size: 800px auto;
	font-size: 16px;
	line-height: 1.8em;
	position: relative;
}
main#home #about .wrap{
	width: 940px;
	margin: 0 auto;
	padding:60px 0 60px 345px;
}
main#home #about .wrap::after{
	display: block;
	content: "";
	clear: both;
}
main#home #about h2{
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 40px;
}
main#home #about h2 span{
	display: block;
	margin-bottom: 15px;
}
main#home #about h2 img{
	height: 40px;
	width: auto;
}
main#home #about p{
	margin-bottom: 30px;
}
main#home #about a.link{
	float: right;
}
main#home #topics{
	position: relative;
	padding-bottom: 50px;
	overflow: hidden;
	background: url(../img/bg.blur.jpg) center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 500px;
}
main#home #topics .bg{
/*	position: absolute;
	width: 120%;
	height: 140%;
	background: url(../img/bg.yurimasu31.jpg) center 0% no-repeat fixed;
	background-size: cover;
	filter: blur(30px);
	top: -20%;
	left: -10%;*/
}
main#home #topics .wrap{
	position: relative;
}
main#home #topics h2{
	text-align: center;
	line-height: 80px;
	font-size: 24px;
	font-weight: normal;
	color: #fff;
}
main#home .topics-list{
	width: 940px;
	margin: 0 auto;
}
@media (orientation: portrait) {
main#home #intro h1{
	top: 4%;
}
#home-lay1{
	background: url(../img/yurimasu31.bg2.port.png) center top no-repeat fixed;
	background-size: cover;	
}}
/* about
------------------- */
#main-about{
	position: relative;
	background: url(../img/about.bg.jpg) center top no-repeat fixed;
	background-size: cover;
	color: #fff;
	font-size: 16px;
	line-height: 1.8em;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
#main-about::before{
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
}
#main-about > *{
	position: relative;
}
main#about h1{
	color: #fff;
	font-weight: normal;
	text-align: center;
	font-size: 46px;
	padding: 30px 0 30px 0;
}

main#about h1 img{
	display: block;
	width: 380px;
	margin: 15px auto;
	height: auto;
}
main#about .read h2{
	position: relative;
	background : url("../img/about.catch.svg") 0px top no-repeat;
	text-indent: 100%;
 	white-space: nowrap;
 	overflow: hidden;
	width: 730px;
	height: 200px;
	left: 50%;
	margin-left: -365px;
}
main#about .staff p,
main#about .read p{
	width: 730px;
	margin: 0px auto 30px;
}
main#about .stage{
	position: relative;
	background: url(../img/about.bg.stage.jpg) center top no-repeat fixed;
	background-size: cover;
	padding: 60px 0;
}
main#about .stage::before{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	position: absolute;
	background: rgba(0,0,0,0.5);
}
main#about .stage p{
	position: relative;
	width: 730px;
	margin: 0 auto;
	padding-bottom: 30px;
}
main#about .staff{
	padding: 60px 0;
}
main#about .staff p{
	width: 730px;
	margin: 0px auto ;
	padding-bottom: 30px;
}
main#about #main-cast{
	position: relative;
	background: #fff;
	overflow: hidden;
}
main#about #cast-bg{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/about.bg.blur.jpg) -25vw -25vw no-repeat fixed;
	background-size: 150vw auto;
	opacity: 0.3;
}
main#about #main-cast .wrap{
	position: relative;
	width: 730px;
	margin: 0 auto;
	text-align: center;
	padding: 60px 0;
}
main#about #main-cast h2{
	font-weight: normal;
	font-size: 40px;
	margin-bottom: 30px;
	color: #fff;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
main#about #main-cast dl{
	background: url(../img/about.bg.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	font-size: 30px;
	line-height: 1.5em;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
	font-family: ryo-gothic-plusn, sans-serif;
	
}
_:-ms-lang(x), main#about #main-cast dl {
	color: #48414f !important;
	background-clip: initial;
	background: none;
	text-shadow: 0px 1px 0px #fff;
}
main#about #main-cast dt{
	font-size: 20px;
}
main#about #main-cast dd{
	margin-bottom: 70px;
}
main#about #main-cast dd em{
	display: block;
}
main#about #main-cast dd h4{
	font-size: 16px;	
}
main#about #main-cast dd p{
	margin-top: 5px;
	font-size: 16px;
	line-height: 1.3em;
	margin-bottom: 30px;
}
main#topics{
	padding-bottom: 100px;
}
main#topics h1{
	color: #fff;
	text-align: center;
	font-weight: 100;
	letter-spacing: 0.08em;
	font-size: 60px;
	padding-top: 50px;
}
main#topics .tab{
	display: flex;
	margin-top: 50px;
	margin-bottom: 5px;
}
main#topics .tab li{
	margin: 0px 4px;
}
main#topics .tab a{
	position: relative;
	display: block;
	line-height: 36px;
	width: 150px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
}
main#topics .tab a.selected::after,
main#topics .tab a:hover::after{
	position: absolute;
	content: "";
	display: block;
	height: 2px;
	background: #fff;
	width: 90%;
	left: 5%;
	bottom: 0px;
}
main#topics .tab a.selected{
	pointer-events: none;
}
main#topics .tab a.topics{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff966c+0,ff6c8b+100 */
	background: #ff966c; /* Old browsers */
	background: -moz-linear-gradient(left, #ff966c 0%, #ff6c8b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #ff966c 0%,#ff6c8b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ff966c 0%,#ff6c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff966c', endColorstr='#ff6c8b',GradientType=1 ); /* IE6-9 */}

main#topics #comment.tab-body,
main#topics #blog.tab-body,
main#topics #news.tab-body{
	display: none;
}


/* story
------------------- */
#story h1{
	position: absolute;
	width: 100%;
	text-align: center;
	line-height: 100px;
	font-weight: 100;
	font-size: 60px;
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
#story .screen{
	padding-top: 60px;
	height: 500px;
	font-size: 16px;
	
}
#story .screen p{
	margin-bottom: 20px;
}
#story .screen.sc1{
	padding-top: 100px;
	background: url(../img/story.bg1.jpg) center center no-repeat fixed;
	background-size: cover;
}
#story .screen.sc1 p{
	position: relative;
	left: 50%;
	width: 50%;
}
#story .screen.sc2{
	background: url(../img/story.bg2.jpg) center center no-repeat fixed;
	background-size: cover;
}
#story .screen.sc2 p{
	position: relative;
	width: 450px;
	left: 50%;
	margin-left: -450px;
	text-align: right;
}
#story .screen.sc3{
	background: url(../img/story.bg3.jpg) center center no-repeat fixed;
	background-size: cover;
}
#story .screen.sc3 p{
	position: relative;
	left: 50%;
	width: 50%;
}
#story .screen.sc4{
	background: url(../img/story.bg4.jpg) center center no-repeat fixed;
	background-size: cover;
}

#story .screen.sc4 p{
	position: relative;
	width: 480px;
	left: 50%;
	margin-left: -480px;
	text-align: right;
}
#sc-nav{
	position:fixed;
	right: 10px;
	top: 100px;
	z-index: 1;
}
#sc-nav li{
	margin-bottom: 10px;
}
#sc-nav li a{
	display: block;
	width: 30px;
	height: 30px;
	background: url(../img/element.svg);
}
@media (orientation: portrait) {
	#story .screen{
		height: 600px !important;
	}
	#story .screen.sc1{
		background: #fff url(../img/story.bg1.p.jpg) center 20% no-repeat fixed;
		background-size: 100% auto;
	}
	#story .screen.sc2{
		background: #fff  url(../img/story.bg2.p.jpg) center 30% no-repeat fixed;
		background-size: 100% auto;
	}
	#story .screen.sc3{
		background: #fff url(../img/story.bg3.p.jpg) center 40% no-repeat fixed;
		background-size: 100% auto;
	}
	#story .screen.sc4{
		background: #fff url(../img/story.bg4.p.jpg) center 50% no-repeat fixed;
		background-size: 100% auto;
	}
}


#content.d404{
	background: url(../img/404.bg.jpg) center right no-repeat;
	background-size: cover;
	height: 600px;
}
#content.d404 h1{
	font-size: 60px;
	padding-top: 7%;
	font-weight: 100;
	left: 10%;
	position: relative;
	color: #fff;
}
#content.d404 p{
	position: relative;
	color: #fff;
	left: 10%;
	font-size: 16px;
	padding-top: 30px;
	
}


#content .sns-share{
	position: fixed;
	right: 0px;
	background: #fff;
	border-radius: 4px 0 0 4px;
	top: 180px;
	width: 80px;
	padding: 3px;
}
#content .sns-share.fixed{
	position: absolute;
	top: auto;
	bottom: 100px;
}
#content .sns-share a{
	color: #000;
	font-size: 12px;
	text-decoration: none;
}
#content a.twitter.btn{
	display: block;
	background: #55acee url(../img/icon.twitter.svg) center 0px no-repeat;
	background-size: 36px;
	border-radius: 2px;
	color: #fff;
	text-align: center;
	padding-top: 30px;
}
#load-fader{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	top: 0;
	left: 0;
	z-index: 100000;
}


/* product 1031
------------------- */
main#product{
	position: relative;
	padding:0 10% 5vh 10%;
	background: #fff;
	background-size: cover;
}
main#product #product-bg-ai{
	position: fixed;
	display: block;
	width: 50%;
	height: 100%;
	top: 0;
	left: -15%;
	background: url(../img/product.ai.jpg) left top no-repeat;
	background-size: 100% auto;
}
main#product #product-bg-kokoro{
	position: fixed;
	display: block;
	width: 50%;
	height: 100%;
	top: 0;
	right: -15%;
	background: url(../img/product.kokoro.jpg) right top no-repeat;
	background-size: 100% auto;
}
main#product .wrap{
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	z-index: 1;
}
main#product h1{
	text-align: center;
	margin-bottom: 5vh;
	font-weight: normal;
	font-size: 46px;
	padding:60px 0 0px 0
}
main#product h1 span{
	display: block;
	font-size: 15px;
	margin-top: 10px;
}
main#product .outline{
	text-align: center;
	margin-bottom: 5vh;
	background: url(../img/texture.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
	font-family: ryo-gothic-plusn, sans-serif;
	background-size: cover;
}
main#product .outline dt{
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 1.5vh;
}
main#product .outline dd{
	font-size: 30px;
	margin-bottom: 5vh;
}
main#product .outline dd ul li{
	font-size: 28px;
	margin-bottom: 3vh;
}
main#product .outline dd span.caption{
	display: block;
	font-size: 14px;
}
.section-box,
main#product .platform{
	border: 4px solid #fff;
	background: rgba(0,0,0,0.35);
	padding: 3vw 5vw;
	margin-bottom: 5vw;
	color: #fff;
}
.section-box h3,
main#product .platform h3{
	padding-bottom: 3vw;
	margin-bottom: 3vw;
	border-bottom: 1px solid #fff;
	font-size: 24px;
	font-weight: normal;
	letter-spacing: 0.1em;
}

main#product .platform dl{
	margin-bottom: 3vw;
}
main#product .platform dt{
	width: 20%;
	float: left;
	padding: 1vw 0;
}
main#product .platform dd{
	border-bottom: 1px dotted rgba(255,255,255,0.5);
	padding: 1vw 0;
	padding-left: 20%;
}

main#product .address{
	border-top:1px solid #ddd;
	text-align: center;
	padding-top: 5vw;
	font-size: 16px;
}
main#product .address h3{
	margin-bottom: 2vh;
}
#special{
	position: relative;
	padding: 0 10% 5vh 10%;
	background: #fff;
	background-size: cover;	
}
#special .wrap{
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	z-index: 1;

}
#special h1 {
	text-align: center;
	margin-bottom: 8vw;
	font-weight: normal;
	font-size: 46px;
	padding: 60px 0 0px 0;
}
#special-bg-honoka{
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../img/special.honoka.jpg) center top no-repeat;
	background-size: 100% auto;
}
.section-box p{
	font-size: 16px;
	line-height: 1.8em;
	margin-bottom: 20px;
}
.section-box iframe{
	margin: 0 auto;
	width: 100%;
	height: 38vw;
	max-height: 387px;
	max-width: 687px;
}
.section-box img{
	
}
.section-box hr{
	border: none;
	margin: 5vw 0;
	border-bottom: 2px dotted #fff;
}
.section-box h4{
	font-size: 18px;
	margin-bottom: 2vw;
	border-left: 10px solid #fff;
	padding-left: 10px;
}
.section-box h5{
	font-size: 16px;
	margin-bottom: 2vw;
}
.section-box .caution{
	background: rgba(255,0,0,0.4);
	border: 1px solid rgba(255,255,255,0.2);
	padding: 3vw;
	margin-bottom: 5vw;
	font-size: 12px;
}
.section-box a{
	color: #fff;
}
.section-box ul.normal li{
	position: relative;
	padding-left: 16px;
	line-height: 1.5em;
	margin-bottom: 1vw;
}
.section-box ul.normal li::before{
	position: absolute;
	left: 0;
	content: "・";
}
.section-box .img-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.section-box .img-list li{
	margin: 1px;
}
/* char
------------------- */
.char-slide{
	overflow: hidden ;
	position: relative;
}

.char-slide nav{
	position: absolute;
	z-index: 1;
	bottom: 10px;
	perspective: 100px;
	width: 80%;
	left: 10%;
	text-align: center;
}
.char-slide nav::before{
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.75);
	border: 1px solid #fff;
	transform-style: preserve-3d;
	transform: rotateX(25deg);
	box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
	top: 40%;
}
.char-slide nav ul{
	margin: 0 auto;
	position: relative;
	display: inline-block;	
}
.char-slide nav ul li{
	float: left;
	position: relative;
}
.char-slide nav a{
	display: block;
	width: 100px;
	height: 100px;
	transition: all 0.3s ease 0s;
	text-align: none;
}
.char-slide nav a img{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}
.char-slide nav a:hover{
	width: 130px;
	opacity: 1;
}
.char-slide nav a span{
	position: absolute;
	color: #000;
	background: #fff;
	font-size: 10px;
	display: block;
	border-radius: 20px;
	padding: 0px 5px;
	white-space: nowrap;
	bottom: 120%;
	left: 50%;
	transform: translate(-50%,0);
	opacity: 0;
	transition: all 0.3s ease 0s;
}
.char-slide nav a span::before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -6px;
	border: 6px solid transparent;
	border-top: 8px solid #fff;
}
.char-slide nav a:hover span{
	opacity: 1;
	bottom: 150%;
}
.char-scope{
 	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100vw;
	position: relative;
}
.char-wrap{
	display: flex;
	width: 600vw;
}
.sub-char-box,
.char-box{
	width: 100vw;
	position: relative;
	height: calc(100vh - 82px);
	display: flex;
	justify-content: space-between;
}
.char-box .char-scroll-wrap{
	width: 100vw;
	position: relative;
	height: calc(100vh - 82px);
	display: flex;
	justify-content: space-between;	
}
.char-box.sub{
	display: block;
}
.char-box.ai{
	background: url("../img/char/ai.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box.kokoro{
	background: url("../img/char/kokoro.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box.saki{
	background: url("../img/char/saki.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box.nana{
	background: url("../img/char/nana.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box.mari{
	background: url("../img/char/mari.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box.sub{
	background: url("../img/char/sub.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box .figure{
	position: relative;
	height: calc(100vh - 82px);
	width: 35%;
	text-align: center;
}
.char-box .figure figure{
	height: 90%;
	position: relative;
}
.char-box figure img{
	height: 100%;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	opacity: 0;
	transition: all 0.3s ease 0s;
	filter: blur(10px);
}
.char-box figure img.select{
	opacity: 1;
	filter: blur(0);
}
.char-box .figure ul{
	position: absolute;
	background: #fff;
	display: flex;
	top: 20vh;
	right: 0%;
	transform: translate(-50%,0);
	border-radius: 13px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	padding: 0px 5px;
}
.char-box .figure ul span{
	display: block;
	width: 26px;
	height: 26px;
	background: url("../img/element.svg") center center no-repeat;
	background-size: 16px;
	cursor: pointer;
}
.char-content{
	position: relative;
	width: 65%;
	padding-right: 6vw;
}

.char-content .cha-head{
	padding-top: 10vh;
	margin-bottom: 5vh;
}

.char-content .cha-head h3{
	font-size: 40px;
	line-height: 50px;
	font-family: ryo-gothic-plusn, sans-serif;
	background: url(../img/texture2.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.2);

}

.char-content .cha-head dl{
	margin-top: 2vh;
}
.char-content .cha-head dl dt{
	float: left;
}
.char-content .char-body p{
	font-size: 14px;
	line-height: 1.5em;
	padding-bottom: 1.5vh;
}
.char-box.sub h2{
	font-size: 14px;
	margin-top: 5vh;
	font-weight: normal;
}
.char-box.sub .char-content .cha-head{
	padding-top: 1vh;
	margin-bottom: 2vh;
}
.char-box.sub .char-content .cha-head h3{
	font-size: 30px;
	line-height: 40px;
}
.char-box.sub  .cha-head dl{
	margin-top: 0.5vh;
}
.char-box.sub .char-content .char-body p{
	font-size: 14px;
	padding-bottom: 1.5vh;
}
.char-box .cha-head .name-voice{
	display: flex;
	align-items: center;
}
.char-box .cha-head .name-voice ul{
	display: flex;
	align-items: center;
	padding: 0 30px;
}
.char-box .cha-head .name-voice ul li{
	padding: 0 5px;
}
.char-box .cha-head .name-voice ul img{
	width: 30px;
	height: 30px;
	cursor: pointer;
}
.char-still-list{
	margin-top: 15px;
	display: flex;
}
.char-still-list li{
	margin-right: 10px;
}
.char-still-list img{
	width: 36px;
	height: 36px;
}
#still-modal {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75);
	z-index: 10000;
	top: 0;
	left: 0;
}
#still-modal > img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 90%;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
#still-modal .close{
	display: block;
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: url("../img/icon.close.svg") center center no-repeat;
	background-size: 40px 40px;
	width: 40px;
	height: 40px;
}
/* parallax 削除
------------------- */
#home-lay1,
#home-lay2,
#home-lay3{
	display: none;
}
main#home{
}
#intro{
	background: url(../img/yurimasu31.bg.full.jpg) center top no-repeat fixed;
	background-size: cover;

}



/* 特典
------------------- */
.shopBenefits{
	border: 4px solid #fff;
	background: rgba(0,0,0,0.45);
	padding: 3vh 5vw;
	margin-bottom: 5vh;
	color: #fff;
}
.shopBenefits dt{
	color:#fff;
	font-weight: 900;
	font-family: ryo-gothic-plusn, sans-serif;
	font-size: 40px;
	height: 70px;
	line-height: 54px;
	text-align: center;
	padding-bottom: 20px;
}
.shopBenefits dd.item{
	border-top: 2px solid #fff;
	padding-top:3vh;
	font-size: 18px;
	margin-bottom: 1vh;
	line-height: 1.7em;
	font-weight: bold;
}
.shopBenefits dd.caption{
	font-size: 14px;
	line-height: 1.9em;
	margin-bottom: 4vh;
}
a.btn-normal,
.shopBenefits a.btn{
	display: block;
	background: #fff url("../img/arrow.right.svg") 98% center no-repeat;
	background-size: 16px;
	height: 40px;
	border-radius: 20px;
	text-decoration: none;
	line-height: 40px;
	text-align: center;
	text-shadow: none;
	color: #000;
	font-size: 14px;
	overflow: hidden;
}
.shopBenefits hr{
	margin-bottom: 2vh;
}
.shopBenefits a.btn.disable{
	pointer-events: none;
	opacity: 0.5;
}
.shopBenefits figure{
	margin: 0;
}
main#product #benefit-bg-trio{
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../img/benefit.trio.jpg) center top no-repeat;
	background-size: 100% auto;
}
main#product .sho-list{
	
}
main#product .sho-list ul{
	display: flex;
	flex-wrap: wrap;
	padding: 3px;
	width: 800px;
	margin: 0 auto;
}
main#product .sho-list ul li{
	width: 16.666%;
	padding: 1px;
}
main#product .sho-list ul li a{
	position: relative;
	text-decoration: none;
	display: block;
	padding: 0 2px 5px 2px;
	height: 100%;
	color:#fff;
	text-align: center;
	font-size: 12px;
	background: rgba(0,0,0,0.4);
}
main#product .sho-list ul li a::after{
	content: "";
	display: block;
	position: absolute;
	width: 4px;
	height: 4px;
	border-right: 2px solid #fff;
	border-bottom:2px solid #fff;
	transform: rotate(45deg);
	left: 50%;
	margin-left: -2px;
	bottom: 5px;
	transition: all 0.3s ease 0s;
}
main#product .sho-list.bind{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background: rgba(255,255,255,1);
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	z-index: 10;
}
.bene-img-list{
	display: block;
	text-align: center;
	margin-top: 20px;
}
.bene-img-list ul{
	display: flex;
	justify-content: center;
}
.bene-img-list ul li{
	padding: 0px 3px;
}
#site-footer{
	background: #fff;
	padding-top: 0;
}
#site-footer .foot-bnr{
	background: #fff url(../img/lib2.png) center bottom repeat-x;
	padding-bottom: 15px;
}
#site-footer .foot-bnr ul{
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
#site-footer .foot-bnr a{
	display: block;
	text-decoration: none;
	color: #000;
}
.bnr-benefit{
	display: flex;
}
.bnr-benefit .img{
	display: block;
	width: 50%;
	height: 130px;
	background: url("../img/tenpo2.jpg") center center no-repeat;
	background-size: cover;
}
.bnr-benefit div{
	position: relative;
	text-align: left;
	width: 50%;
	padding:20px 100px 0 20px;
}
.bnr-benefit div::after{
	position: absolute;
	display: block;
	width: 30px;
	height: 40px;
	background: url("../img/arrow.right.svg") center center no-repeat;
	content: "";
	right: 20px;
	top: 50%;
	margin-top: -20px;
}
.bnr-benefit h3{
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 20px;
}


.shopBenefits-platform-links{
	display: flex;
	justify-content: center;
	margin-top: 5px;
}
.shopBenefits-platform-links li{
	width: 47%;
	margin: 0 1.5%;
}
.shopBenefits-platform-links li:first-child{
	margin-left: 0;
}
.shopBenefits-platform-links li:last-child{
	margin-right: 0;
}
.shopBenefits-platform-links li.none{
	display: none;
}
.shopBenefits-platform-links li a{
	display: block;
	background: #fff;
	border-radius: 10px;
	height: 50px;
	color: #000;
	text-decoration: none;
	text-align: center;
}
.shopBenefits-platform-links li a img{
	display: none;
}
.shopBenefits-platform-links li a.vita{
	background:#fff url("../img/logo.psvita.svg") center center no-repeat;
	background-size: auto 16px;
}
.shopBenefits-platform-links li a.ps4{
	background:#fff url("../img/logo.ps4.svg") center center no-repeat;
	background-size: auto 16px;
}
.shopBenefits-platform-links li a.switch{
	background:#fff url("../img/footer.sign-switch.png") center center no-repeat;
	background-size: auto 40px;
}
.shopBenefits-platform-links li a.windows{
	background:#fff url("../img/footer.sign-win.png") center bottom no-repeat;
	background-size: auto 44px;
}
/* 0517追加 */
.shopBenefits h4.benefit-type{
	font-size: 30px;
	margin-bottom: 20px;
}
hr.bold-dot{
	border: none;
	border-top: 4px dotted #fff;
	margin: 50px 0;
	
}
.char-wrap{
	width: 700vw;
}
#char .exChar{
	position: absolute;
	right: 10px;
	top: 70px;
	display: block;
	z-index: 1;
}
#char .exChar .btn-exChar{
	display: block;
}
.char-box.niemajo{
	background: url("../img/char/sub.nie.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box.niemajo .figure ul{
	top:50px;
}
.char-box.niemajo .figure ul span {
	font-size: 10px;
	width: auto;
	height: auto;
	padding-top: 20px;
	background-position: center 5px;
	margin: 0 5px;
}
.char-box.sub .char-content .char-body p{
	padding-right: 100px;
}



/* 0529追加 */
main#event{
	position: relative;
	padding:0 10% 5vh 10%;
	background: #fff;
	background-size: cover;
}
main#event #event-bg-all{
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left:0;
	background: url(../img/event.all.jpg) center center no-repeat;
	background-size: 100% auto;
}

main#event .wrap{
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	z-index: 1;
}
main#event h1{
	text-align: center;
	margin-bottom: 5vh;
	font-weight: normal;
	font-size: 46px;
	padding:60px 0 0px 0;
}
main#event h1 span{
	display: block;
	font-size: 26px;
	margin-top: 30px;
}
main#event .read{
	text-align: center;
	margin-bottom: 5vh;
	background: url(../img/texture.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
	font-family: ryo-gothic-plusn, sans-serif;
	background-size: cover;
	
	
	font-size: 50px;
	line-height: 1.8em;
	padding-top: 30vh;
}
.event-content{
	background: rgba(255,255,255,0.8);
	padding: 50px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
	font-size: 18px;
	line-height: 1.8em;
}

.event-content h2{
	text-align: center;
	line-height: 1.8em;
	margin-bottom: 50px;
	background: url(../img/texture.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
	font-family: ryo-gothic-plusn, sans-serif;
	background-size: cover;
}
.event-content .summary{
	border: 8px solid #BAC9D3;
	padding: 50px;
	background: #fff;
	text-align: center;
}
.event-content .summary dl{
	display: flex;
	flex-wrap:wrap;
	text-align: left;
}
.event-content .summary dl dt{
	width:25%;
	padding: 10px 0;
	border-bottom: 1px solid #D9E1E6;
}
.event-content .summary dl dd{
	width: 75%;
	padding: 10px 0;
	border-bottom: 1px solid #D9E1E6;
}
.event-content .summary em{
	display: block;
	background: url(../img/texture.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
	font-family: ryo-gothic-plusn, sans-serif;
	background-size: cover;
	font-size: 30px;
	
	margin-bottom: 50px;
}
.event-content .summary h3{
	font-weight: normal;
	margin-bottom: 15px;
}
.event-content .summary p{
	margin-bottom: 50px;
}

.event-content .note{
	margin: 80px 0;
}
.event-content .note section{
	margin-bottom: 60px;
}
.event-content .note h3{
	text-align: center;
	margin-bottom: 20px;
}
.event-content .note p{
	font-size: 16px;
	margin-bottom: 30px;
	line-height: 1.5em;
}
.event-content .note p.nomarg{
	margin-bottom: 10px;
}
.event-content .note ul.normal{
	font-size: 16px;
	margin-bottom: 30px;
	margin-left: 50px;
}
.event-content .note h4{
	font-size: 16px;
}
#home-event-news a.btn,
.event-content .note a.btn{
	display: block;
	background: #fff url("../img/arrow.right.svg") 98% center no-repeat;
	background-size: 16px;
	height: 40px;
	border-radius: 20px;
	border:2px solid #6CD5E0;
	text-decoration: none;
	line-height: 40px;
	color: #000;
	text-align: center;
	margin-bottom: 15px;
	
}
.event-content .note .notice{
	font-size: 13px;
	color: #777;
}
.event-content hr{
	border: none;
	border-top: 1px solid #aaa;
}

.event-content .application{
	margin-top: 30px;
	text-align: right;
}
.event-content .application h3{
	font-size: 14px;
}
.event-content .application h4{
	font-weight: normal;
	font-size: 14px;
}


.event-content .photo-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 15px 0 50px;
}
.event-content .photo-list li{
	width: 32%;
	margin-bottom: 10px;
}

.event-content .photo-list li img{
	width: 100%;
	height: auto;
	border: 1px solid #eee;
}
.event-content .photo-list li span{
	display: block;
	margin: 3px 0;
	font-size: 12px;
}


#home-event-news{
	position: relative;
	height: auto;
	background: #fff;
	background: #fff url("../img/event.all.home.jpg") center center no-repeat;
	background-size: 110% auto;
	background-attachment: fixed;
	padding-bottom: 50px;
}
#home-event-news::after{
	display: block;
	content: "";
	width: 100%;
	height: 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255,255,255,0.9) url(../img/lib.png) center bottom repeat-x;
}
#home-event-news h2{
	font-size: 2.3vw;
	text-align: center;
	padding-top: 5vh;
}
#home-event-news h2 span{
	display: block;
	font-size: 5vw;
	font-weight: normal;
	padding: 3vh 0;
	line-height: 1em;
}

#home-event-news .announce{
	position:static;
	width: 100%;
	text-align: center;
	background: url(../img/texture.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
	font-family: ryo-gothic-plusn, sans-serif;
	background-size: cover;
	
	font-size: 3.6vw;
	line-height: 1.8em;
	margin-top: 10vh;
	margin-bottom: 100px;
}
#home-event-news a.btn{
	display: block;
	color: #000;
	text-decoration: none;
	width: 400px;
	line-height: 36px;
	
	margin: 0 auto;
}



/* 0909追加 */
main#event.add-content1 h2.rdttl{
	padding-top: 40vh;
	text-align: center;
	font-size: 40px;
	line-height: 50px;
	font-family: ryo-gothic-plusn, sans-serif;
	background: url(../img/texture.jpg);
	background-size: cover;
	-webkit-background-clip: text;
	color: transparent !important;
	font-weight: 900;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.2);	
}
main#event.add-content1 .read{
	padding-top: 3vh;
	background: none;
	color: #000 !important;
	font-weight: 400;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 20px;
	line-height: 2em;
	text-shadow: 0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 20px #fff,0px 0px 20px #fff,0px 0px 20px #fff,0px 0px 30px #fff,0px 0px 30px #fff ,0px 0px 30px #fff ,0px 0px 30px #fff  ;
}