@charset "UTF-8";

* {
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	font-family:"Rounded Mplus 1c", 'Varela Round', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	background: #fff;
}

.fade {
	cursor: pointer;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

.fade:hover {
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}
.wrapper {
	min-width: 1200px;
}

.bgImg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: url(/shironekoproject/lp/onsen2/img/bg.jpg) 50% 50%/cover no-repeat;
}

header {
	position: relative;
	width: 100%;
	height: 700px;
	top:0;
	background: url(/shironekoproject/lp/onsen2/img/header.jpg) 50% 0 no-repeat;
	line-height: 0;
	font-size: 0;
}

nav {
	position: relative;
	width: 100%;
	background: url(/shironekoproject/lp/onsen2/img/nav_bg.jpg) 50% 0 no-repeat;
	box-shadow: 0 0 20px rgba(0,0,0,.8);
	z-index: 100;
}
nav ul {
	width: 100%;
	text-align: center;
}
nav li {
	display: inline-block;
}

/* -----------------------------------
 charaArea
----------------------------------- */
.charaArea {
	position: relative;
	width: 1200px;
	margin: 40px auto;
	padding-top: 200px;
	background:url(/shironekoproject/lp/onsen2/img/info_bg.png) 50% 0 no-repeat;
}
.charaArea .charaList .chara {
	position: relative;
	width: 1200px;
	height: 836px;
	margin: 0 auto;
	display: none;
}
.charaArea .chara01 {background:url(/shironekoproject/lp/onsen2/img/chara01.png) 50% 0 no-repeat;}
.charaArea .chara02 {background:url(/shironekoproject/lp/onsen2/img/chara02.png) 50% 0 no-repeat;}
.charaArea .chara03 {background:url(/shironekoproject/lp/onsen2/img/chara03.png) 50% 0 no-repeat;}
.charaArea .chara04 {background:url(/shironekoproject/lp/onsen2/img/chara04.png) 50% 0 no-repeat;}


.charaArea .charaList .current {
	display: block;
}

.charaArea .voiceArea {
	position: absolute;
	width: 360px;
	top: 508px;
	left: 144px;
	text-align: center;
	border-radius: 2px;
}
.charaArea .voiceArea li {
	display: inline-block;
	width: 100px;
	text-align: center;
}
.charaArea .voiceArea .title {
	width: 35%;
	font-size: 14px;
	color: rgba(255,255,255,.9);
	text-shadow: 0 0 5px #3cbcff, 0 0 10px #3cbcff;
}
.charaArea .voiceArea li a {
	position: relative;
	display: inline-block;
	width: 96%;
	margin: 0 auto;
	padding: 10% 0;
	background: #ab2121;
	border: 2px solid #f0f0f0;
	border-radius: 3px;
	color: #f0f0f0;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	transition: all 300ms ease;
}
.charaArea .voiceArea li a.white {
	background: #f0f0ea;
	color: #484845;
}

.charaArea .voiceArea li[data-play-state="play"] a {
	position: relative;	
	transition: all 300ms ease;
}
.charaArea .voiceArea li[data-play-state="pause"] a::before {
	content: "";
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(170, 170, 153, 0);
	border-radius: 3px;
	text-align: center;
	vertical-align: middle;
	z-index: 10;
	transition: all 300ms ease;
}
.charaArea .voiceArea li[data-play-state="pause"] a::after {
	content: "";
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	margin-top: -6px;
	z-index: 10;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
}
.charaArea .voiceArea li[data-play-state="play"] a::before {
	content: "";
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #e22f2f;
	border-radius: 3px;
	text-align: center;
	vertical-align: middle;
	z-index: 10;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
}
.charaArea .voiceArea li[data-play-state="play"] a::after {
	content: "PLAYING";
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	color: #fafafa;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	z-index: 10;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
}

.charaArea .voiceArea li[data-play-state="pause"] a.white::before {
	background: rgba(51, 51, 51, 0);
}
.charaArea .voiceArea li[data-play-state="play"] a.white::before {
	background: #484845;
}
.charaArea .voiceArea li[data-play-state="play"] a.white::after {
	color: #f0f0ea;
}


.charaArea .tab {
	position: absolute;
	top: 791px;
	left: 117px;
}
.charaArea .tab li {
	display: inline-block;
	opacity: .3;
	transition: all 300ms ease;
}
.charaArea .tab li.current,
.charaArea .tab li:hover {
	opacity: 1;
}


/* -----------------------------------
eventItemArea
----------------------------------- */
.eventItemArea {
	position: relative;
	width: 100%;
}
.eventItemArea .wrap {
	position: relative;
	margin: 0 auto 50px;
	text-align: center;
}


/* -----------------------------------
kerorinArea
----------------------------------- */
.kerorinArea {
	position: relative;
	width: 100%;
}
.kerorinArea .wrap {
	position: relative;
	width: 1010px;
	margin: 0 auto 50px;
	text-align: center;
}
.kerorinArea .btn01 {
	position: absolute;
	top: 314px;
	right: 210px;
}
.kerorinArea .btn02 {
	position: absolute;
	top: 374px;
	right: 210px;
}


/* -----------------------------------
goodsArea
----------------------------------- */
.goodsArea {
	position: relative;
	width: 100%;
}
.goodsArea .wrap {
	position: relative;
	width: 1010px;
	margin: 0 auto 50px;
	text-align: center;
}
.goodsArea .btn01 {
	position: absolute;
	top: 436px;
	right: 130px;
}
.goodsArea .btn02 {
	position: absolute;
	bottom: 105px;
	left: 115px;
}
.goodsArea .btn03 {
	position: absolute;
	bottom: 105px;
	right: 115px;
}

/* -----------------------------------
pixivArea
----------------------------------- */
.pixivArea {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}
.pixivArea * {
	font-size: 0;
}
.pixivArea .wrap {
	position: relative;
	width: 1001px;
	margin: 0 auto;
	text-align: center;
}
.pixivArea .btn01 {
	position: absolute;
	bottom: 40px;
	left: 290px;
}

.pixivArea ul {
	position: relative;
	padding: 10px 110px;
	background:url(/shironekoproject/lp/onsen2/img/pixiv_bg_loop.png) 50% 0 repeat-y;	
	-webkit-background-size: 100%;
	background-size: 100%;

}
.pixivArea li {
	display: inline-block;
	width: 18%;
	margin: 1%;
}
.pixivArea li img {
	width: 100%;
	height: auto;
	border: 1px solid #009cff;
}


/* -----------------------------------
gwArea
----------------------------------- */
.gwArea {
	position: relative;
	width: 100%;
	background:url(/shironekoproject/lp/onsen2/img/gw_bg.png) 50% 0 repeat;
}
.gwArea .header {
	position: relative;
	width: 100%;
	height: 63px;
	top: -3px;
	background:url(/shironekoproject/lp/onsen2/img/gw_header.png) 50% 0 repeat;
}
.gwArea .wrap {
	position: relative;
	width: 1120px;
	margin: 0 auto;
	text-align: center;
}
.gwArea .btn01 {
	position: absolute;
	bottom: 126px;
	left: 290px;
}
.gwArea .footer {
	position: relative;
	padding-top: 30px;
	width: 100%;
	height: 7px;
	background:url(/shironekoproject/lp/onsen2/img/gw_footer.png) 50% bottom no-repeat;
}


footer {
	position: relative;
	width: 100%;
	margin:0 auto;
	padding:20px 0 20px;
	background:url(/shironekoproject/lp/onsen2/img/footer_bg.jpg) 50% 0 no-repeat;
	z-index: 1000;
	color: #ddd;
}
footer .notice {
	width: 600px;
	margin: 10px auto;
	padding:10px 20px;
	background: rgba(43,24,7,.9);
	border-radius: 4px;
	line-height: 1.5;
	font-size: 11px;
}
footer .notice li {
	margin: 0 0 10px 20px;
	list-style-type: disc;
}
footer .notice li:last-child {
	margin-bottom: 0;
}
footer .footerTop {
	width: 1100px;
	margin: 0 auto;
}
footer .footerTop ul {
	text-align: center;
}
footer .footerTop li {
	display: inline-block;
	vertical-align: middle;
}
footer .footerTop .shiroLogo {
	width: 120px;
	margin:0 auto;
	text-align: center;
}
footer .footerTop .shiroLogo img {
	width: 100%;
}
footer .footerTop .appDetail p {
	text-align: left;
	font-size: 11px;
	line-height: 1.6;
}
footer .footerTop .appArea {
	margin-left: 175px;
}
footer .footerTop .appArea li {
	width: 140px;
	height: auto;
}
footer .footerTop .appArea li img {
	width: 100%;
}

footer .footerBottom {
	width: 1100px;
	margin: 0 auto;
}
footer .footerBottom a {
	color: #ddd;
}
footer .footerBottom ul {
	text-align: center;
}
footer .footerBottom li {
	display: inline-block;
	vertical-align: middle;
}

footer .footerBottom .corpLogoArea {
	padding-left: 40px;
}
footer .footerBottom .corpArea {
	padding-left: 20px;
}
footer .footerBottom .snsArea ul {
	padding-left: 255px;
	text-align: right;
}
footer .footerBottom .snsArea li {
	display: inline-block;
	margin:0 10px;
	vertical-align: middle;
}
footer .footerBottom .snsArea li.youtube {
}
footer .footerBottom .coloplLogo {
	width: 120px;
	padding:10px 0 5px;
}
footer .footerBottom .coloplLogo img {
	width: 100%;
	height: auto;
}
footer .footerBottom .copy {
	line-height: 1.8;
	font-size: 11px;
}
footer .attention {
	width: 970px;
	margin: 10px auto;
	padding:10px;
/* 	background: rgba(48,29,12,.8);
 */	border-radius: 3px;
	line-height: 1.3;
	font-size: 10px;
	text-align: center;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　FOOT NAV
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/	
	
#footNav {
	position: fixed;
	z-index: 9001;
	bottom:0px;
	right:0px;
	}
	
#footNav .btn {
	margin:0 10px 10px 0;
	}
	
#footNav .btn a {
	}

/*fade*/
#footNav .btn {  
    -webkit-transition: 0.2s ease-in-out;  
    -moz-transition: 0.2s ease-in-out;  
    -o-transition: 0.2s ease-in-out;  
    transition: 0.2s ease-in-out; 
}  
#footNav .btn:hover {  
    -webkit-transition: 0.2s ease-in-out;  
    -moz-transition: 0.2s ease-in-out;  
    -o-transition: 0.2s ease-in-out;  
    transition: 0.2s ease-in-out;  
}