.pc{
	display: none;
}
.sp{
	display: block;
}
#gMenu,
#site-header .utill{
	display: none;
}

#site-header{
	height: 40px;
	background-size: auto 3px;
	display: block;
	text-align: center;
}
#site-header .logo{
	position: static;
	display: block;
	width: 140px;
	margin: 0 auto;
	padding: 8px 0;
}
#site-header .logo img{
	width: 100%;
	height: auto;
}
#site-header .menu{
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}
#site-header .menu::before{
	position: absolute;
	content: "";
	display: block;
	width: 20px;
	height: 1px;
	background: url(../img/lib.png);
	background-size: 100% auto;
	left: 10px;
	top: 16px;
	box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}
#site-header .menu::after{
	position: absolute;
	content: "";
	display: block;
	width: 20px;
	height: 1px;
	background: url(../img/lib.png);
	background-size: 100% auto;
	left: 10px;
	bottom: 14px;	
	box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}

/* menu
------------------- */
#spMenu{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
}
#spMenu nav{
	background: #fff url(../img/sp.bg.menu.jpg) center center no-repeat;
	background-size: cover;
	position: absolute;
	width: 90%;
	height: 90%;
	left: 5%;
	top: 5%;
}
#spMenu h2{
	width: 50%;
	margin: 20px auto;
}
#spMenu h2 img{
	width: 100%;
}
#spMenu a{
	text-decoration: none;
	color: #fff;
	line-height: 40px;
	font-size: 20px;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}
#spMenu .close{
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	top: 0;
}
#spMenu .close::before{
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 1px;
	left: 9px;
	top: 18px;
	background: #000;
	transform: rotate(45deg);
}
#spMenu .close::after{
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 1px;
	left: 9px;
	top: 18px;
	background: #000;
	transform: rotate(-45deg);
}
/* footer
------------------- */
#contentwrap{
 	padding-bottom: 625px;/* 0926*/
}

footer#site-footer{
	padding-top: 8px;
	background-size: auto 8px;
	height: 625px;
}
#site-footer .logo{
	height: 60px;
	margin-top: 35px;
}
#site-footer .platform{
	width: 94%;
	flex-wrap: wrap;
	margin: 0px 3% 15px;
	transform: scale(1);/* 0926*/
	justify-content: center/* 0926*/

}
#site-footer .platform li{
	padding: 5px 0;/* 0926*/
	width: 50%;
	text-align: center;
}
#site-footer .platform li.switch img{
	width: 40px;
	margin-top: 5px;
}
#site-footer .platform li.steam img{
	width: 90%;
	max-width: 161px;
}
#site-footer .platform li.win img{
	width: 90%;
	max-width: 180px;
}
#site-footer .vita-copyright{
	display: block;
	margin-top: 20px;
	width: 100%;
	padding: 0px 10px;
	line-height: 1.4em;
	font-size: 8px;
}
#site-footer .vita-copyright img{
	height: 6px;
	width: auto;
	margin: 0px 2px;
}
#site-footer .vita-copyright img.pstext{
	height: 9px;
	vertical-align: middle;
	margin-top: -2px;
}
#site-footer .switch-copyright{
	display: block;
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 8px;
}
#site-footer .copyright{
	height:auto;
	flex-wrap: wrap;
}
#site-footer .copyright small{
	padding: 0 0 5px 0;
	line-height: 30px;
	order: 1;
	text-align: center;
	width: 100%;
}
#site-footer .copyright ul{
	padding:5px 0 0 0;
	width: 100%;
	justify-content: space-between;
}
#site-footer .copyright ul li{
	padding: 10px;
	width: 50%;
}
#site-footer .copyright ul img{
	height: 40px;
}


/* parts
------------------- */
h3.content-shoulder{
	line-height: 60px;
	font-size: 20px;
	margin: 0px 3%;	
}
.topics-list li article time{
	padding-left: 3%;
}
.topics-list li article div{
	padding-right: 3%;
}
.topics-list li article h3{
	margin-top: 15px;
	padding: 0px 3%;
	font-size: 14px;
}
.topics-list li article{
	flex-wrap: wrap;
	justify-content: space-between;
}
#content .main-box{
	margin :0px calc(3% + 50px) 0 3%;
}
#content .main-box .head-info{
	padding:10px 5%;
}
/* temp
------------------- */


#content .main-box h1{
	font-size: 20px;
	margin-bottom: 30px;
	line-height: 1.5em;
}
#content .main-box .document{
	padding: 8% ;
	font-size: 19px;
	line-height: 1.5em;
}

.article-list li article h3{
	padding: 5% 5% 0 5%;
}
.article-list li article p{
	padding: 0 5% 5% 5%;
	font-size: 16px;
}
#content .main-box .document p{
	font-size: 15px;
	line-height: 1.7em;
}
/* home
------------------- */
main#home #intro .read{
	padding: 3% 5% calc(5% + 30px) 5%;
	width: 100%;
	background: rgba(255,255,255,0.9) url(../img/lib.png) center bottom repeat-x;
}
main#home #intro .read::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 #intro h2{
	width: 100%;
	margin:0;
}
main#home #intro p{
	text-align: center;
	width: 100%;
	padding: 10px 3% 35px;
	font-size: 12px;
	line-height: 1.6em;
	background-size: auto 4px;
	display: none;
}


main#home{
	background-size: auto 100vh;
}
#home-lay1{
	background-image: url(../img/yurimasu31.bg2.sp.png);
	height: 100vh;
	background-size: auto 80vh;
}
#home-lay2{
	background-image: url(../img/yurimasu31.bg3.sp.png);
	height: 100vh;
	background-size: auto 90vh;
}

#home-lay3{
	height: 100vh;
	background-image: url(../img/yurimasu31.bg4.sp.png);
	background-size: auto 90vh;
}

main#home #about{
	font-size: 12px;
	line-height: 1.6em;	
	background: #fff url(../img/home.ai.sp.png) 0px top no-repeat;
	background-size: 200px auto;

}
main#home #about .wrap{
	width: auto;
	padding:30px 20px 30px 40%;
}
main#home #about h2{
	margin-bottom: 15px;
}
main#home #about h2 span{
	margin-bottom: 10px;
}
main#home #about h2 img{
	height: 25px;
}
main#home #about p{
	margin-bottom: 15px;
}

main#home #topics{
	min-height:inherit;
}
/* about
------------------- */
#main-about{
	background: url(../img/about.bg.blur.jpg) center top fixed;
	background-position: 20% 0;
	background-size: auto 100vh;
}
main#about h1{
	font-size: 36px;
	padding: 30px 0 0 0;
}
main#about h1 img{
	width: 280px;
	height: auto;
}
main#about .read h2{
	background: url(../img/about.catch.sp.svg) center top no-repeat;
	width: 90%;
	height:160px;
	left: 5%;
	margin-left: 0;
}
@media (max-width:375px) {
	main#about .read h2{
		height: 130px;
	}
	main#about #main-cast dd p{
		font-size: 12px;
	}
}
@media (max-width:320px) {
	main#about .read h2{
		height: 120px;
	}
}
main#about .stage p,
main#about .staff p,
main#about .read p{
	width: auto;
	padding: 0px 5%;
	font-size: 16px;
	line-height: 1.6em;
	margin-bottom: 15px;
}
main#about .stage,
main#about .staff{
	padding: 30px 0;
}
main#about .staff{
	padding-bottom: 100px;
}

main#about #cast-bg{
	background-image: url(../img/about.bg.sp.jpg);
	background-position: center top;
	background-size: 120vw auto;
	filter: blur(5px)
}

#story {
	background: #fff;
}
#story h1{
	position: static;
	color: #000;
	text-shadow: none;
}
#story .screen{
	position: relative;
	height:  auto !important;
	padding-bottom:20px;
	padding-top: 50% !important;
}
#story .screen::after{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: url(../img/lib.png) center center ;
	background-size: auto 4px;
	content: "";
}
#story .screen.sc1{
	background: #fff url(../img/story.bg1.sp.jpg) left top no-repeat ;
	background-size: 100% auto;
}
#story .screen.sc2{
	background: #fff  url(../img/story.bg2.sp.jpg) right top no-repeat ;
	background-size: 100% auto;
}
#story .screen.sc3{
	background: #fff url(../img/story.bg3.sp.jpg) left top no-repeat ;
	background-size: 100% auto;
}
#story .screen.sc4{
	background: #fff url(../img/story.bg4.sp.jpg) right top no-repeat ;
	background-size: 100% auto;
	padding-bottom: 100px;
}

#story .screen.sc3 p,
#story .screen.sc1 p,
#story .screen.sc4 p,
#story .screen.sc2 p{
	position: static;
	width: 100%;
	font-size: 13px;
	padding: 0px 15% 15px 5%;
	margin-bottom: 0;
	text-align: left;
}
#story .screen p br{
	display: none;
}

.article-list li{
	width: 100%;
}

main#topics h1{
	font-size: 36px;
	padding-top: 30px;
}
main#topics .tab{
	display: flex;
	margin-top: 30px;
	margin-bottom: 5px;
	padding: 0px 2%;
}
main#topics .tab li{
	margin: 0px;
	padding: 0px 2px;
	width: 34%;
}
main#topics .tab a{
	width: 100%;
	font-size: 16px;
}


#content .sns-share{
	top: 100px;
	width: 50px;
	padding: 4px;
}
#content a.twitter.btn{
	background: #55acee url(../img/icon.twitter.svg) center 0px no-repeat;
	background-size: 36px;
	height: 36px;
	text-align: left;
	padding-top: 0px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#site-footer .Page-top {
	width: 50px;
	height: 50px;
	text-indent: 100%;
	background-position: center;
	background-size: 30px;
	white-space: nowrap;
	overflow: hidden;
}




/* product 1031
------------------- */
main#product #product-bg-ai{
	position: fixed;
	display: block;
	width: 50%;
	height: 100vh;
	top: 10vh;
	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: 100vh;
	top: 10vh;
	right: -15%;
	background: url(../img/product.kokoro.jpg) right top no-repeat;
	background-size: 100% auto;
}
main#product h1{
	font-size: 36px;
	padding:30px 0 0px 0
}
main#product h1 span{
	font-size: 12px;
	margin-top: 5px;
}
main#product .outline{
	margin-bottom: 5vh;
	background: url(../img/texture.jpg);
	-webkit-background-clip: text;
	color: transparent !important;
	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-size: 14px;
}
main#product .outline dd{
	font-size: 30px;
	line-height: 1.2em;
	margin-bottom: 7vh;
}
main#product .outline dd ul li{
	font-size: 28px;
	margin-bottom: 3vh;
}
main#product .outline dd span.caption{
	display: block;
	font-size: 14px;
	line-height: 10px;
}
main#product .platform {
	background: rgba(0,0,0,0.4);
}
main#product .platform h3{
	font-size: 23px;
}
main#product .platform dt{
	width: auto;
	float: none;
	padding: 1vh 0 0 0;
	font-weight: bold;
}
main#product .platform dd{
	padding: 0.5vh 0 1vh;
}
main#product .platform p{
	line-height: 1.3em;
}

main#product .section-box h3{
	font-size: 18px;
}


#special{
	padding: 0 5% 5vh 5%;
}
#special h1 {
	font-size: 36px;
	padding: 30px 0 0px 0;
}
.section-box h3{
	font-size: 18px;
}
.section-box p{
	font-size: 14px;
	line-height: 1.5em;
}

.section-box hr{
	margin: 10vw 0;
}
.section-box h4{
	font-size: 16px;
	margin-bottom: 5vw;
}
.section-box h5{
	font-size: 14px;
	margin-bottom: 3vw;
}
.section-box .caution{
	margin-bottom: 10vw;
}

.section-box .img-list{
}
.section-box .img-list li{
	width: calc(33% - 2px);
}
.section-box .img-list.glid1 li{
	width: 100%;
}
.section-box .img-list li img{
	width: 100%;
	height: auto;
}
#special-bg-honoka {
	background-position: center center;
	background-size: 110% auto;
}


/* char
------------------- */
.char-slide{
}
.char-slide nav{
	width: 100%;
	left: 0;
	z-index: 10;
}
.char-slide nav a{
	width: 50px;
	height: 50px;
}
.char-slide nav a:hover{
	width: 50px;
	opacity: 1;
}
.char-slide nav a span{
	display: none;
}
.char-scope{
 	overflow-y:hidden;
}
.char-box{
	height: 100vh;
}
.char-box .char-scroll-wrap{
	height: calc(100vh - 82px - 50px);
	overflow: scroll;
}
.char-box.ai{
	background: url("../img/char/ai.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box .figure{
	width: 35%;
}
.char-box .figure figure{
	height: 100%;
	padding:0;
	margin: 3vh 0 0 ;
}
.char-box .figure figure img{
	width: 130%;
	height: auto;
}
.char-box .figure ul {
	top: auto;
	bottom: 32vh;
	right: auto;
	left: 50%;
	transform: translate(-50%,0);
}
.char-content {
	width: 65%;
	padding-right: 5vw;
	position: relative;
}
.char-content .cha-head{
	padding-top: 3vh;
	margin-bottom: 2.5vh;
}
.char-content .cha-head h3{
	font-size: 7vw;
}
.char-content .cha-head dl{
	font-size: 3vw;
	line-height: 1.3em;
	margin-top: 0;
}
.char-content .char-body p{
	font-size: 3.9vw;
	line-height: 1.5em;
	padding-bottom: 1vh;
}
.char-box.sub h2{
	font-size: 3vw;
	line-height: 1.3em;
	text-align: left;
	width: 40%;
}
.char-box.sub .figure{
	height: 30vh;
	display: flex;
	width: 100%;
	margin-bottom: 2vh;
}
.char-box.sub .figure ul{
	bottom: auto;
	top: 50%;
	transform: none;
	left: 100%;
}
.char-box.sub .figure figure{
	margin: 0;
	width: 60%;
	padding: 2vw 6vw;
}
.char-box.sub .figure figure img{
	height: 30vh;
	width: auto;
}


.char-box.sub .char-content{
	width: 100%;
	padding: 0 0 15vh 0;
}
.sub-char-box{
	display: block;
	width: 90%;
	height: 70vh;
	margin-left: 5%;
	
	overflow-x: scroll;
	padding: 0px 5%;
	position: relative;
	z-index: 1;
	
}
.char-box.sub .char-content .cha-head{
}
.char-box.sub .char-content .cha-head h3{
	margin-bottom: 2vh;
}
.char-box.sub .char-content .char-body p{
	padding-bottom: 1.5vh;
}
@media screen and (max-width: 321px){
	/*.char-slide {
		
		height: calc(100vh - 110px);
	}
	.char-box{
		height: calc(100vh - 110px);
	}*/
	.char-box .figure figure{
		margin-top: 2vh
	}
	.char-box .figure figure img{
		width: 120%;
	}
	.char-content .cha-head{
		padding-top: 2vh
	}
}
.char-box .cha-head .name-voice{
	flex-direction: column;
	align-items: flex-start;
}
.char-box .cha-head .name-voice ul{
	padding: 0;
	margin-bottom: 4vw;
}
.char-box .cha-head .name-voice ul li{
	padding: 0;
	margin-right: 3vw;
}
.char-box .cha-head .name-voice ul img{
	width: 8vw;
	height: 8vw;
}
/* parallax 削除
------------------- */
#intro{
	background: none;
}
main#home {
background: url(../img/bg.yurimasu31.sp.jpg) center top no-repeat fixed;
background-size: 100% auto;
}



/* 特典
------------------- */
.shopBenefits{
	padding: 0 3vw;
	margin-bottom: 3vw;
}
.shopBenefits dt{
	font-size: 4.6vw;
	height: 50px;
	line-height: 56px;
	padding-bottom: 0px;
	position: relative;
}
.shopBenefits dt::after{
	content:"詳細";
	font-size: 2.4vw;
	font-weight: normal;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	position: absolute;
	top: 2px;
	right: 1vw;
	display: block;
	line-height: 1em;
	padding-top: 34px;
	background: url("../img/element.svg") center 8px no-repeat;
	background-size: 20px;
}
.shopBenefits dd{
	display: none;
}
.shopBenefits dd.item{
	padding-top:3vw;
	font-size: 16px;
	margin-bottom: 4vw;
	line-height: 1.4em;
	font-weight: bold;
}
.shopBenefits dd.caption{
	font-size: 13px;
	line-height: 1.5em;
	margin-bottom: 4vh;
}
.shopBenefits a.btn{
	margin-bottom: 5vw;
}
.sho-list{
	display: none;
}
main#product #benefit-bg-trio{
	background-position: center bottom;
}
.bene-img-list{
	margin-top: 4vw;
}
.bene-img-list ul{
	flex-direction: column;
}
.bene-img-list ul li{
	padding: 1vw 0;
	width: 100%;
}
.bene-img-list ul li img{
	width: 100%;
	height: auto;
}


footer#site-footer{
	padding-top: 0;
	height: auto;
}
#site-footer .foot-bnr{
	background: #fff url(../img/lib2.png) center bottom repeat-x;
	background-size: auto 8px;
	padding-bottom: 8px;
}
.bnr-benefit .img{
	display: block;
	width: 30%;
	height: 100px;
	background-size: 250%;
}
.bnr-benefit div{
	width: 70%;
	padding:10px 50px 0 15px;
}
.bnr-benefit div::after{
	width: 30px;
	height: 30px;
	right: 5px;
	margin-top: -15px;
}
.bnr-benefit h3{
	font-size: 18px;
	margin-bottom: 10px;
}
.bnr-benefit p{
	font-size: 12px;
}
#contentwrap{
	padding-bottom: 0;
}


.shopBenefits-platform-links li{
	margin-bottom: 5vw;
}

.shopBenefits-platform-links li a{
	height: 40px;
}
.shopBenefits-platform-links li a img{
	display: none;
}
.shopBenefits-platform-links li a.vita{
	background-size: auto 10px;
}
.shopBenefits-platform-links li a.ps4{
	background-size: auto 10px;
}
.shopBenefits-platform-links li a.switch{
	background-size: auto 30px;
}


/* 0517追加 */
.shopBenefits-platform-links li a.windows{
	background-size: auto 7.6vw;
	background-position: center center;
}
/* 0517追加 */
.shopBenefits h4.benefit-type{
	font-size: 4vw;
	margin-bottom: 5vw;
}
hr.bold-dot{
	margin: 8vw 0;
	
}

#char .exChar{
	right: auto;
	top: auto;
	left: 7vw;
	bottom: 22vw;
}
#char .exChar .btn-exChar img{
	width: 20vw;
	height: auto;
}
.char-box.niemajo{
	background: url("../img/char/sub.nie.sp.bg.jpg") center center no-repeat;
	background-size: cover;
}
.char-box.sub.niemajo .figure{
	height: 34vh;
}
.char-box.sub.niemajo .figure figure img{
	height: 40vh;
}
.char-box.niemajo .figure ul{
	top:30vw;
	left: auto;
	right: -30vw;
}
.char-box.niemajo .figure ul span {
	font-size: 3vw;
	width: auto;
	height: auto;
	padding-top: 20px;
	background-position: center 5px;
	margin: 0 5px;
	white-space: nowrap;
}
.char-box.sub .char-content .char-body p{
	padding-right: 0px;
}


/* 0529追加 */
main#event{
	padding:0;
}
main#event #event-bg-all{
	background: url(../img/event.all.jpg) center 20vh no-repeat;
	background-size: 100% auto;
}

main#event h1{
	font-size: 12vw;
	padding:15vw 0 0px 0;
}
main#event h1 span{
	font-size: 6vw;
	margin-top: 5vw;
	line-height: 1.6em;
	padding: 0 5vw;
}
main#event .read{
	margin-bottom: 5vh;
	font-size: 8vw;
	line-height: 1.8em;
	padding: 30vh 5vw 10vw 5vw;
}
main#event .read span{
	display: block;
	font-size: 10vw;
}
main#event .read br{
	display: none;
}
.event-content{
	padding: 5vw;
	font-size: 4vw;
	margin-bottom: 40vw;

}

.event-content h2{
	font-size: 5vw;
	line-height: 1.8em;
	margin-bottom: 5vw;
}
.event-content .sp-none{
	display: none !important;
}
.event-content .summary{
	border: 4px solid #BAC9D3;
	padding: 6vw;
}
.event-content .summary dl{
	flex-direction: column;
}
.event-content .summary dl dt{
	width:100%;
	padding:0;
	border-bottom:none;
}
.event-content .summary dl dd{
	width: 100%;
	padding: 1vw 0 3vw 0;
	border-bottom: 1px solid #D9E1E6;
	margin-bottom: 3vw;
}
.event-content .summary em{
	font-size: 7vw;
	
	margin-bottom: 10vw;
	line-height: 1.8em;
}
.event-content .summary em span{
	display: block;
}
.event-content .summary h3{
	margin-bottom: 5vw;
}
.event-content .summary p{
	margin-bottom: 50px;
}
.event-content .summary p br{
	display: none;
}
.event-content .note{
	margin: 15vw 0;
}
.event-content .note section{
	margin-bottom: 15vw;
}
.event-content .note h3{
	text-align: left;
	margin-bottom: 7vw;
	border-left: 3vw solid  #BAC9D3;
	padding-left: 3vw;
}
.event-content .note p{
	font-size: 3.6vw;
	margin-bottom: 8vw;
}
.event-content .note p.nomarg{
	margin-bottom: 3vw;
}
.event-content .note ul.normal{
	font-size: 3.4vw;
	margin-bottom: 8vw;
	margin-left: 4vw;
}
.event-content .note ul.normal li{
	line-height: 1.4em;
	margin-bottom: 1.5vw;
}
.event-content .note h4{
	font-size: 16px;
}
.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 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;
}



#home-event-news{
	height: auto;
	background-size: 120% auto;
	padding-bottom: 10vw;
}
#home-event-news h2{
	font-size: 4vw;
	text-align: center;
	padding-top: 5vw;
}
#home-event-news h2 span{
	display: block;
	font-size: 8vw;
	padding: 1.5vw 0;
}

#home-event-news .announce{
	font-size: 6.5vw;
	line-height: 1.8em;
	margin-top: 5vw;
	margin-bottom: 5vw;
	padding: 0 5vw;
}
#home-event-news a.btn{
	bottom: 10vw;
	left: 0;
	margin: 0 5vw;
	width: 90vw;
}