@charset "UTF-8";

body,
html {
	text-align: left;
	text-decoration: none
}

body {
	-webkit-font-smoothing: antialiased
}

#wrapper {
	width: 100%;
	height: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

@-ms-viewport {
	width: auto;
	initial-scale: 1
}

@viewport {
	width: device-width;
	initial-scale: 1
}

div,
h1,
h2,
h3,
h4,
p {
	font-family: Noto Sans Japanese, sans-serif
}




.loading {
	margin-top: 0;
	background-image: url(../img/common/loading.jpg);
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 4000;
}

@media screen and (min-width:320px) and (max-width:960px) {
	.loading {
		margin-top: 0;
		background-image: url(../img/common/loading.jpg);
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: #000;
		background-repeat: no-repeat;
		background-position: center center;
		z-index: 4000;
	}
}

.textarea_ss {
	font-size: 8pt;
	max-height: 999999px
}

.textarea_s {
	margin-top: 1%;
	font-size: 11pt;
	max-height: 999999px
}

.textarea_sd {
	font-size: 11pt;
	max-height: 999999px;
}

.textarea_mmm {
	font-size: 12pt;
	max-height: 999999px
}

.textarea_sm {
	font-size: 10pt;
	max-height: 999999px
}

.textarea_m {
	font-size: 16px;
	max-height: 999999px
}


.textarea_l {
	font-size: 16pt;
	max-height: 999999px;
	z-index: 1002;
	margin-top: 3%;
	margin-bottom: 0;
}

.textarea_ll {
	font-size: 20pt;
	max-height: 999999px
}

.textarea_xl {
	font-size: 28pt;
	max-height: 999999px
}

.textarea_news_l {
	font-size: 16pt;
	max-height: 999999px
}

.textarea_news_ll {
	font-size: 32pt;
	max-height: 999999px
}

.contents_inner {
	position: relative;
	margin-top: 0;
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto
}

.contents_inner_b {
	position: relative;
	margin-top: 0;
	width: 90%;
	height: auto;
	margin-left: auto;
	margin-right: auto
}
.contents_inner_v {
	position: relative;
	margin-top: 0;
	width: 75%;
	height: auto;
	margin-left: auto;
	margin-right: auto
}

@media screen and (min-width:320px) and (max-width:758px) {
	.textarea_sm {
		font-size: 12pt;
		max-height: 999999px
	}

	.textarea_mmm {
		font-size: 14.5pt;
		max-height: 999999px
	}

	.contents_inner {

		position: relative;
		padding: 0 20px 0 20px;
		text-align: justify;
		width: 95%;
		margin-left: auto;
		margin-right: auto;

	}

	.contents_inner_b {

		position: relative;
		padding: 0 20px 0 20px;
		text-align: justify;
		width: 95%;
		margin-left: auto;
		margin-right: auto;

	}
	.contents_inner_v {

		position: relative;
		padding: 0 20px 0 20px;
		text-align: justify;
		width: 95%;
		margin-left: auto;
		margin-right: auto;

	}
}


.alpha a:hover img {
	opacity: .9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha(opacity=90)"
}

.pageTop {
	position: fixed;
	margin-bottom: 5px;
	right: 30px;
	z-index: 56;
	cursor: pointer
}

@media screen and (min-width:320px) and (max-width:758px) {
	.pageTop {
		position: fixed;
		margin-bottom: 5px;
		right: 30px;
		z-index: 56;
		cursor: pointer
	}
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden
}

.clearfix {
	min-height: 1px
}

.wdt100 {
	width: 100%
}

@media screen and (min-width:320px) and (max-width:758px) {
	.rspsv {
		width: 100%
	}
}

.rightbox {
	float: right;
	height: auto;

}

.leftbox {
	float: left;
	height: auto
}


#maintop {
	position: relative;
	width: 100%;
	padding-bottom: 10%;
	margin-top: 0;


}


.about {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 105;
	padding-bottom: 150px;
	border-top: 1px solid #fff;
}



.header {
	position: absolute;
	margin-top: 0;
	height: 50px;
	width: 100%;
	z-index: 1120;
	background-color: #fff;
}

@media screen and (min-width:320px) and (max-width:758px) {

	.header {
		position: absolute;
		height: 70px;

		width: 100%;
		z-index: 120;
	}
}

.textarea_ms {
	font-size: 11pt;
}

#trigger1 {
	position: absolute;
	margin-top: 0px;
}

#trigger2 {
	position: absolute;
}

#trigger4 {
	position: absolute;
}

#trigger3 {
	position: absolute;
}

@media screen and (min-width:320px) and (max-width:758px) {
	#trigger2 {
		position: absolute;
	}

	#trigger3 {
		position: absolute;
		margin-top: -50px;
	}
}

.pagetopact {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 4000;
}

.tac {
	text-align: center;
}



.abouttit1 {
	font-weight: 800;
	color: #fff;
	text-align: center;
	padding-top: 5%;

}


.unbackimg {
	position: fixed;
	width: 100%;
	height: 100vh;

	z-index: 10;
	background-image: url(../img/common/backimg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;

}

.textarea_mm {
	font-size: 13pt;
}


p.indent-1 {
	padding-left: 1em;
	text-indent: -1em;
}

p.indent-2 {
	padding-left: 2em;
	text-indent: -1em;
}

.text_b {
	font-size: 20pt;
	font-weight: 600;
	color: #fff;
}



#footerwrp {
	position: relative;
	width: 100%;
	height: auto;
background-color: #fff;
	padding-top: 80px;
	padding-bottom: 50px;
	z-index: 1005;

}

.fixlogo {
	position: absolute;
}

.bgimgleft {
	width: 50%;
	height: 100vh;
	background-image: url(../img/common/top_back_ukyo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	background-color: #00A0EE;

}

.bgimgright {
	width: 50%;
	height: 100vh;
	background-image: url(../img/common/top_back_nako.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #FC9E00;
}

.bgimg {
	position: fixed;
	width: 100%;
	height: 100vh;

}

.overlay_left {
	background-color: rgba(0, 77, 250, 0.7);
	width: 100%;
	height: 100vh;
}

.topcharaname {
	position: absolute;
	z-index: 1000;
}

.topcharaname_ukyo {
	margin-top: 60px;
	left: 10px;
	width: 20%;
}

.topcharaname_nako {
	margin-top: 60px;
	right: 10px;
	width: 20%;
}

.voicecharaname_ukyo {
	margin-top: 60px;
	left: 10px;
	width: 10%;
}

.voicecharaname_nako {
	margin-top: 60px;
	right: 10px;
	width: 10%;
}

.maincharaimg {
	position: absolute;
	margin-top: 30px;
	z-index: 400;
}

.maincharaimg_ukyo {
	width: 85%;
	left: -5%;

}

.maintop_leftbox {
	position: absolute;
	width: 50%;
	left: 0;
}


.maintop_rightbox {
	position: absolute;
	width: 50%;
	right: 0;

}

.maincharaimg_nako {
	width: 85%;
	right: -4%;

}

#about {
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 0;
	padding-bottom: 10%;
	background-color: #fff;
	background-image: url(../img/main/about_backimg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom ;
}

.toporval {
	position: relative;
	top: -75px;
	left: -2%;

}

.toporval img {
	width: 103%;
	left: -3%;
}

.overlay {
	position: absolute;
	width: 100%;
	height: auto;
	padding-bottom: 59%;
	background-image: url(../img/common/pattern.png);
	top: 0;
	z-index: 100;


}

.maininfowrp {
	position: relative;
	width: 35%;
	margin: 0 auto;
	padding-top: 5%;

}

.boxwrp {

	z-index: 1000;
}

.maininfologo {
	position: relative;
	width: 38%;
	margin: 5% auto;
}



.maininfo_seriflist {
	position: relative;
	width: 100%;
	z-index: 400;
}

.maininfo_seriflist li {
	position: relative;
	width: 46%;
	float: left;
	margin-right: 8%;
}

.maininfo_seriflist li:last-child {
	margin-right: -450%;
}

.maininfotit {
	position: relative;
	width: 77%;
	margin: 0 auto;
	margin-bottom: 7%;
}

.maininfotextarea {
	font-weight: 600;
	text-align: center;
	line-height: 1.7em;
	color: #fff;
	font-size: 1.2vw;
}

.maintopjumpbtn {
	position: relative;
	margin: 5% auto;
	width: 50%;
	z-index: 300;
}

.maininfo_clovalogo {
	position: relative;
	margin: 0 auto;
	width: 20%;
	margin-bottom: 4%;
}

.header_corplogo {
	width: 220px;
	margin: 1% auto;
}

.header_corplogo li {
	float: left;
	margin-right: 10%;
}

.header_corplogo li:last-child {
	margin-right: -50%;
}


.headlogo {
	position: absolute;
	left: 1%;
}

.storelist {
	margin-top: 1%;
	position: absolute;
	right: 1%;
}

.storelist li {
	float: left;
}

.storelist li:last-child {
	margin-right: -30%;
}

.aboutleft {
	position: relative;
	margin-top: -10%;
	width: 50%;
	z-index: 105;
}

.aboutright {
	position: relative;
	width: 45%;
	margin-top: -10%;
	z-index: 101;
}

.abouttextarea {
	font-weight: 500;
	line-height: 1.8em;
	margin-bottom: 8%;
	font-size: 1.4vw;
}

.about_s_textarea {
	font-weight: 700;
	font-size: 1.4vw;
}
.about_s_textarea_m {
	font-weight: 700;
	font-size: 1.2vw;
}

.about_ss_textarea {
	font-weight: 500;
	line-height: 1.6em;
	font-size: 1.2vw;
}

.abouttittextarea {
	font-weight: 800;
	font-size: 2.5vw;
	line-height: 1.5em;
}

.aboutright_imglist {

}

.aboutright_imglist img {
	width: 100%;
}

.aboutright_imglist li {
	float: left;
	width: 48%;
	margin-right: 4%;
}

.aboutright_imglist li:last-child {
	margin-right: -30%;
}

.mt4 {
	margin-top: 4%;
}

.voiceleft {
	margin-top: 5%;
	width: 47%;
}

.voiceright {
	margin-top: 5%;
	width: 47%;
}

#voice {
		position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 10%;

}

.voicetit {
	text-align: center;
	width:77%;
	margin: 0 auto;
	padding-top:10%;
}

.voicetextarea {
	font-weight: 600;
	font-size: 1vw;
	line-height: 1.5em;
	color:#fff;
}

.voiceleft_serif {
	float: left;
	margin-right: 5%;
}

.voice_seriflist {
	margin-top: 10%;
}

.howtowrp {
	margin-top: 5%	;
	width: 100%;
	background-color: rgba(255,255,255,0.8);
	height: auto;
	border-radius: 13px;
	padding:4%;
}

.howtotextarea {
	text-align: center;
	font-weight: 800;
	font-size: 1.6vw;
	margin-bottom: 4%;
}


.voice_howtoliststextarea {
	font-weight: 600;

	font-size: 1.1vw;
	line-height: 1.8em;
}

.voice_howtolist {
	
}
.voice_howtolist li {
	width: 33%;
	float: left;
}
.voice_howtolist li:last-child {
	margin-right: -20%;
}

.howtobadge {
	position: absolute;
	left:-3%;
	margin-top: -10%;
	width: 20%;
}

.fttop {
	width: 75%;
	margin: 0 auto;
}

.fttxt {
	margin-top: 3%;
	 text-align: center;
}

.ft_shoplist {
	margin-bottom: 5%;
}
.ft_shoplist li {
	text-align: center;
	width:47%;
	margin-right: 2%;
	margin-bottom: 2%;
	padding:3% 5%;
	border:5px solid #999;
	float: left;
}
.ft_shoplist li:nth-child(2n) {
	margin-right: -20%;
}

.ftlogo {
	
}
.ftlogo li {
	float: left;
	margin-right: 2%;
}

.ft_store {
	width: 70%;
	margin: 0 auto;
	margin-bottom: 5%;
}
.ft_store li {
	text-align: center;
	width:45%;
	float: left;
	margin-right: 5%;
}
.ft_store li:last-child {
	margin-right: -20%;
}

.voice_backchara {
	position: absolute;
	margin-top: 5%;
	width: 40%;
}

.voice_backchara_ukyo {

	left:0;
}

.voice_backchara_nako {
	right:0;
}


.aboutleft_smlimg {
	position: absolute;
	margin-top: 20%;
	right:-5%;
	width:30%;
}

.top_sp {
	background-image: url(../img/main/top_sptop.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
	padding-bottom: 175%;
	margin-top: 0;
}

.credit {
	text-align: center;
	margin-top: 0.5%;
}

.mb {
	margin-bottom: 8%;
}

.shopbtn {
	position: relative;
	border:5px solid #999;
	padding:1.5% 2% 2% 2%;
	text-align: center;
	width: 500px;
	margin: 0 auto;
	margin-bottom: 8%;
	z-index: 8;
}

.shopbtn_gh {
	position: absolute;
	width: 500px;
	margin: 0 auto;
	z-index: 10;
	background-color: #000;
}


@media screen and (min-width:320px) and (max-width:758px) {
	.maintopjumpbtn {
	position: absolute;
		text-align: center;
	margin: 12% auto;
		left: 0;
  right: 0;

	width: 50%;
	bottom:0;
}
	
	.voiceleft_serif {
	float: left;
	margin-right: 5%;
		width:50%;
}
	.voicetextarea {
	font-weight: 600;
	font-size: 2.5vw;
	line-height: 1.5em;
	color:#fff;
}
	#footerwrp {
	position: relative;
	width: 100%;
	height: auto;
background-color: #fff;
	padding-top: 80px;
	padding-bottom: 100px;
	z-index: 1005;

}

	.pagetopact {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 4000;
}

.ftlogo {
	width: 38%;
	margin: 0 auto;
}
.ftlogo li {
	float: left;
	margin-right: 5%;
}
	.ftlogo li:last-child {
		margin-right: -20%;
	}

	
	.ft_store {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 5%;
}
	.ft_store li {
	text-align: center;
	width:46%;
	float: left;
	margin-right: 5%;
}
	.fttop {
	width: 100%;
	margin: 0 auto;
}
	.howtobadge {
	position: absolute;
	left:-3%;
	margin-top: 22%;
	width: 40%;
}
	
	.voice_howtoliststextarea {
	font-weight: 600;
		text-align: center;

	font-size: 3.1vw;
	line-height: 1.8em;
}
	.voice_howtolist li {
	width: 100%;
	float: left;
}
	.howtotextarea {
	text-align: center;
	font-weight: 800;
	font-size: 3.9vw;
	margin-bottom: 4%;
}
	.howtotextarea br {
	display: block;
}
	
	.voice_backchara {
	position: absolute;
	margin-top: 62%;
	width: 55%;
}
	.voicetit {
		position: relative;
	text-align: center;
	width:100%;
	margin: 0 auto;
	padding-top:10%;
		z-index: 100;
}
	
	.about_s_textarea {
	font-weight: 700;
	font-size: 4.5vw;
		text-align: center;
}
		.about_s_textarea_m {
	font-weight: 700;
	font-size: 3.9vw;

}

.about_ss_textarea {
	font-weight: 500;
	line-height: 1.6em;
	font-size: 3vw;
}
	
	.aboutleft {
	position: relative;
	margin-top: 0%;
	width: 100%;
	z-index: 105;
}

.aboutright {
	position: relative;
	width: 100%;
	margin-top: 5%;
	z-index: 101;
}

	
	.abouttittextarea {
	font-weight: 800;
	font-size: 4.8vw;
	line-height: 1.5em;
		text-align: center;
		margin-top: 5%;
}
	#maintop {
	position: relative;
	width: 100%;
	padding-bottom: 0;
	margin-top: 0;


}
	#about {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 10%;
	background-color: #fff;
	background-image: url(../img/main/about_backimg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
}
	
	.abouttextarea {
		margin-top: 5%;
	font-weight: 500;
	line-height: 1.8em;
	margin-bottom: 8%;
	font-size: 2.8vw;
		text-align: center;
}
	.shopbtn {
	position: relative;
	border:5px solid #999;
	padding:3.5% 2% 4.5% 2%;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 8%;
	z-index: 8;
}
	
	.credit {
	text-align: center;
	margin-top: 3%;
}
	
}