@charset "UTF-8";

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
	font-family:"Rounded Mplus 1c", 'Varela Round', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

 }
* { margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }

html,body {
	position: relative;
	width: 100%;
	height:100%;
	color: #442e00;
	background: #fff;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

hr {
	width: 90%;
	height: 1px;
	margin:5% 5%;
	border:none;
	border-bottom: 1px solid #e9d8ad;
}
.pcNone {
	display: none;
}
.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=50);
	-moz-opacity:0.50;
	opacity:0.50;
	cursor: pointer;
}

.coverArea {
	display: block;
	position:fixed;
	width:100%;
	height: 100%;
	z-index: 10000;
	background: #fff;
}
.coverArea .cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 170px;
	height: 170px;
	text-align: center;
	font-size: 12px;
	color: #bbb;
	font-family: 'Bellefair', serif;
}
.coverArea .cover img {
	width: 100%;
}
.off {
	opacity: 0;
}
.on {
	opacity: 1;
}

.bgImg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: url('/shironekoproject/omikuji/2018/assets/img/bg.jpg') 50% 0 no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	opacity: 1;
	z-index: 0;
}
.bgImg02 {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: url('/shironekoproject/omikuji/2018/assets/img/bg_cloud.png') 50% 0 no-repeat;
	opacity: 1;
	z-index: 0;
}

.wrap {
	position: relative;
	width: 500px;
	margin: 0 auto;
	background: url('/shironekoproject/omikuji/2018/assets/img/wrap_bg_loop.png') 50% 0/100% repeat-y;
	z-index: 1;
}
.wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	min-height: 4vw;
	background: url('/shironekoproject/omikuji/2018/assets/img/wrap_bg_top.png') 50% 0/100% no-repeat;
	z-index: 2;
}
.wrap:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	min-height: 6vw;
	background: url('/shironekoproject/omikuji/2018/assets/img/wrap_bg_bottom.png') 50% 100%/100% no-repeat;
	z-index: 2;
}

h1.mainLogo {
	position: relative;
	width: 100%;
	margin-bottom: 0;
	z-index: 10;
}
h1.mainLogo img {
	width: 100%;
	height: auto;
}
.imgFull {
	width: 100%;
}
.imgFull img {
	width: 100%;
	height: auto;
}
.shiroLogo {
	width: 30%;
	margin: 3% auto 0;
}
.shiroLogo img {
	width: 100%;
	height: auto;
}
.copyright {
	position: relative;
	margin-top: 5%;
	padding: 0 0 4%;
	text-align: center;
	font-size: 10px;
	color: #533;
	z-index: 10;
}

.omikujiArea {
	position: relative;
	width: 100%;
}
.omikujiArea .bg img {
	width: 100%;
	height: auto;
}
.omikujiArea ul {
	position: absolute;
	top: 4%;
	left: 0;
	width: 100%;
	text-align: center;
}
.omikujiArea li {
	display: inline-block;
	width: 40%;
}
.omikujiArea li img {
	width: 100%;
	height: auto;
}


.appNotice {
	margin: 2% 3% 0;
	padding: 2%;
	background: #f2dfb7;
	border-radius: 4px;
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
}
.appNotice ul {
	display: inline-block;
	margin: 10px;
	padding:10px 3%;
	background: #342616;
	border-radius: 4px;
	line-height: 1.5;
	font-size: 10px;
}
.appNotice li {
	margin: 0 0 1% 4%;
	list-style-type: disc;
	line-height: 1.5;
}
.appNotice li:last-child {
	margin-bottom: 0;
}


.twBtn  {
	display: inline-block;
	width: 90%;
	margin: 5px 5% 1%;
	padding: 6% 0;
	font-size: 41px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #00b7ee;
	border-radius: 4px;
	border: none;
	box-shadow: 0 5px  0 #0074a7, 0 4px 5px rgba(0, 0, 0, .3);
	vertical-align: bottom;
}
.twBtn:hover {
	margin: 10px 5% 0;
	box-shadow: 0 0px  0 #0074a7, 0 1px 0px rgba(0, 0, 0, .3);
}
.twBtn img {
	display: inline;
	vertical-align: bottom;
	padding-right: 10px;
	width: 58px;
	height: auto;	
}
.retryBtn {
	width: 90%;
	margin:0 5% 6%;
	font-size: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.tryBtn {
	width: 90%;
	margin:0 5% 6%;
	font-size: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.goTopBtn {
	text-align: center;
}
.goTopBtn a {
	display: inline-block;
	width: 90%;
	margin: 10px 0 8%;
	padding: 5% 0;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #bcb474;
	border-radius: 4px;
	box-shadow: 0 5px  0 #5c5205, 0 4px 5px rgba(0, 0, 0, .3);
}
.goTopBtn a:hover {
	margin: 15px 0 7%;
	box-shadow: 0 0px  0 #5c5205, 0 1px 0px rgba(0, 0, 0, .3);
}

.eventWrap {
	width: 90%;
	margin: 8% 5% 2%;
	padding: 5% 0;
	background: rgba(202,171,96,.2);
	border-radius: 4px;
	/* border:3px solid rgba(224,190,103,.7); */
	box-shadow: 0 0 6px rgba(133,93,6,.3);
	text-align: center;
}
.eventTitle {
	padding-top: 0;
}
.eventArea {
	width: 94%;
	margin:3% 3% 2%;
}
.eventArea img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.eventWrap p {
	padding:1%;
	text-align: center;
	font-size: 12px;
}
.redirectBtn {
	width: 80%;
	margin:1% 10%;
}


/*-----------------------------
1回結果ページ
------------------------------*/
.omikujiResult01Area {
	width: 100%;
	margin:0 auto;
	text-align: center;
}
.omikujiResult01Area .title {
	position: relative;
	margin:-4% 0 0;
	z-index: 10;
}
.omikujiResult01Area .img {
	position: relative;
	z-index: 1000;
	width: 90%;
	margin: 2% auto 0;
	opacity: 0;

-webkit-transition: all 1000ms cubic-bezier(0.620, 0, 0.000, 1); /* older webkit */
-webkit-transition: all 1000ms cubic-bezier(0.620, -0.305, 0.000, 1.355); 
   -moz-transition: all 1000ms cubic-bezier(0.620, -0.305, 0.000, 1.355); 
     -o-transition: all 1000ms cubic-bezier(0.620, -0.305, 0.000, 1.355); 
        transition: all 1000ms cubic-bezier(0.620, -0.305, 0.000, 1.355); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.620, 0, 0.000, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.620, -0.305, 0.000, 1.355); 
   -moz-transition-timing-function: cubic-bezier(0.620, -0.305, 0.000, 1.355); 
     -o-transition-timing-function: cubic-bezier(0.620, -0.305, 0.000, 1.355); 
        transition-timing-function: cubic-bezier(0.620, -0.305, 0.000, 1.355); /* custom */


	-webkit-transform: rotate(10deg) scale(1.6) translate(0px,-180px);
	-moz-transform: rotate(10deg) scale(1.6) translate(0px,-180px);
	transform: rotate(10deg) scale(1.6) translate(0px,-180px);
}
.omikujiResult01Area .img img {
	width: 100%;
}
.omikujiResult01Area .img.on {
	opacity: 1;
	-webkit-transform: rotate(0deg) scale(1.0) translate(0px,0);
	-moz-transform: rotate(0deg) scale(1.0) translate(0px,0);
	transform: rotate(0deg) scale(1.0) translate(0px,0);

}
.omikujiResult01Area .notice {
	padding:2% 0;
	text-align: center;
	font-size: 16px;
}

/*-----------------------------
10回結果ページ
------------------------------*/
.omikujiResult10Area {
	width: 100%;
	margin:0 auto;
	text-align: center;
}
.omikujiResult10Area .title {
	position: relative;
	margin:-4% 0 0;
	z-index: 10;
}
.omikujiResult10Area .notice {
	padding:2% 0;
	text-align: center;
	font-size: 16px;
}
.omikujiResult10Area ul {
	font-size: 0;
	padding:3% 2% 3%;
}
.omikujiResult10Area li {
	position: relative;
	display: inline-block;
	width: 49%;
	margin:.5% ;
	font-size: 0;
}
.omikujiResult10Area li img {
	width: 100%;
}


.omikujiResult10Area .item {
	opacity: 0;

-webkit-transition: all 700ms cubic-bezier(0.135, 1, 0.585, 1); /* older webkit */
-webkit-transition: all 700ms cubic-bezier(0.135, 1.110, 0.585, 1.415); 
   -moz-transition: all 700ms cubic-bezier(0.135, 1.110, 0.585, 1.415); 
     -o-transition: all 700ms cubic-bezier(0.135, 1.110, 0.585, 1.415); 
        transition: all 700ms cubic-bezier(0.135, 1.110, 0.585, 1.415); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.135, 1, 0.585, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.135, 1.110, 0.585, 1.415); 
   -moz-transition-timing-function: cubic-bezier(0.135, 1.110, 0.585, 1.415); 
     -o-transition-timing-function: cubic-bezier(0.135, 1.110, 0.585, 1.415); 
        transition-timing-function: cubic-bezier(0.135, 1.110, 0.585, 1.415); /* custom */

	-webkit-transform: rotate(20deg) scale(0.1) translate(0,0px);
	-moz-transform: rotate(20deg) scale(0.1) translate(0,0px);
	transform: rotate(20deg) scale(0.1) translate(0,0px);
}
.omikujiResult10Area .item.on {
	opacity: 1;
	-webkit-transform: rotate(-3deg) scale(1.0) translate(0px,0);
	-moz-transform: rotate(-3deg) scale(1.0) translate(0px,0);
	transform: rotate(-3deg) scale(1.0) translate(0px,0);
}
.omikujiResult10Area .item01 {
	-webkit-transition-delay:.2s;
	-moz-transition-delay:.2s;
	transition-delay:.2s;
	z-index: 1;
}
.omikujiResult10Area .item03 {
	-webkit-transition-delay:.4s;
	-moz-transition-delay:.4s;
	transition-delay:.4s;
	z-index: 1;
}
.omikujiResult10Area .item05 {
	-webkit-transition-delay:.6s;
	-moz-transition-delay:.6s;
	transition-delay:.6s;
	z-index: 1;
}

.omikujiResult10Area .item07 {
	-webkit-transition-delay:.8s;
	-moz-transition-delay:.8s;
	transition-delay:.8s;
	z-index: 1;
}

.omikujiResult10Area .item09 {
	-webkit-transition-delay:1.0s;
	-moz-transition-delay:1.0s;
	transition-delay:1.0s;
	z-index: 1;
}
.omikujiResult10Area .item02 {
	-webkit-transition-delay:1.2s;
	-moz-transition-delay:1.2s;
	transition-delay:1.2s;
	z-index: 2;
}
.omikujiResult10Area .item04 {
	-webkit-transition-delay:1.4s;
	-moz-transition-delay:1.4s;
	transition-delay:1.4s;
	z-index: 2;
}
.omikujiResult10Area .item06 {
	-webkit-transition-delay:1.6s;
	-moz-transition-delay:1.6s;
	transition-delay:1.6s;
	z-index: 2;
}
.omikujiResult10Area .item08 {
	-webkit-transition-delay:1.8s;
	-moz-transition-delay:1.8s;
	transition-delay:1.8s;
	z-index: 2;
}
.omikujiResult10Area .item10 {
	-webkit-transition-delay:2s;
	-moz-transition-delay:2s;
	transition-delay:2s;
	z-index: 2;
}


/*===============================================

@media screen max-width

===============================================*/
@media screen and (max-width: 640px){

	html{
		font-size: 100%;
		font-size: 4vw;
	}
	html * {
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}

	.fade {
		cursor: pointer;
		filter: alpha(opacity=100);
		-moz-opacity:1;
		opacity:1;
	}

	.fade:hover {
		filter: alpha(opacity=100);
		-moz-opacity:1;
		opacity:1;
	}
	.wrap {
		width: 100%;
		overflow: hidden;
	}


	.twBtn  {
		font-size: 9vw;
	}
	.twBtn img {
		width: 13vw;
	}
	.omikujiResult10Area .notice {
		padding:2% 0;
		text-align: center;
		font-size: 4vw;
	}
}/* /max-width */