@charset "UTF-8";
/* CSS Document */

/* common
--------------------------------------------------------------------------- */
html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
html, body { height:100%; }
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link { color: #E9385B;}
a:visited { color: #E9385B;}
a:hover { color: #069;}
a:active { color: #09C;}

body,td,th { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-color: #f2bcc1;	font-size: 16px; line-height: 180%; color: #222; background-repeat: no-repeat; background-position: center top; background-attachment: fixed;}
hr{ border:solid 1px #333;}
.opp{ filter:alpha(opacity=30)!important; -moz-opacity: 0.3!important; opacity: 0.3!important;}

.youtube { position: relative; width: 100%; max-width: 902px; margin: 0 auto 60px; font-size: 13px;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
.fb_iframe_widget > span { vertical-align: baseline !important; }
.fb_iframe_widget{ width:90px;}

.rights_mark { height: 8px; padding-bottom: 5px; opacity: 0.7;}

.clearfix{ clear:both;}
.clearfix2{ clear:both; height:40px;}

.snowfall-flakes{ z-index:1!important;}

/* button
--------------------------------------------------------------------------- */
a.btn_submit{ opacity: 0.3; font-size: 250%; padding: 25px; border-radius: 50px; border: solid 5px #efebe1; width:90%; max-width: 300px; margin: 0px auto; display: block; text-align: center; background-color: #c00; text-decoration:none; color:rgba(255, 255, 255, 1); font-weight:800; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff5b20), color-stop(0.00, #d9cc3f)); background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff4520), color-stop(#c3c2c2, #656164)); background: -webkit-linear-gradient(#c3c2c2, #656164); background: -moz-linear-gradient(#c3c2c2, #656164); background: -o-linear-gradient(#c3c2c2, #656164); background: -ms-linear-gradient(#c3c2c2, #656164); background: linear-gradient(#c3c2c2, #656164); text-shadow:0px 2px 5px rgba(0, 0, 0, 0.6); box-shadow:0px 2px 5px rgba(0, 0, 0, 0.6);}

/*
a:hover.btn_submit{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #20b6ff), color-stop(0.00, #3fd9ae)); background: -webkit-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: -moz-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: -o-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: -ms-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: linear-gradient(to bottom, #3fd9ae 0%, #20b6ff 88%); box-shadow:0px 1px 8px rgba(0, 0, 0, 1);}
*/


/* contents
--------------------------------------------------------------------------- */
.wrapper{ background-image:url(../img/bg.jpg); position:relative; text-align:center; background-position: top center; background-repeat: no-repeat;}
.wrapper h1{ max-width:750px; z-index:4; margin:0 auto; padding-top:330px;}
.wrapper h1 img{ width:100%;}
.wrapper .flower img{ position:absolute; top:0; right:0; max-width: 285px; width:20%;}
.wrapper h2 img{ width:100%; max-width:780px; position:relative; padding-bottom:45px; padding-top:0px; z-index:3;}
.wrapper img.kt{ position:absolute; left:30px; top:15px; max-width:80px; z-index:3;}
.wrapper .pb{ position: absolute; top: -14px; left: -170px; right: 0; z-index:2; background-image:url(../img/snow.png); height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;}
.wrapper .pb img{ max-width:1340px;}

.flow{ background:#FFF; border-top:dotted 1px #ccc; text-align:center; background-image:url(../img/bg_blue.jpg); background-size:cover;}
.flow .circle img{ width:32%; margin:0.5%;}

.presents{ background-color:#fff;}
.products{ background:#FFF; margin-bottom:0px; background-image:url(../img/bg_pac.jpg);}
.notices{ background:#fffbfb; }
.sec{ width:90%; max-width:1200px; margin:0 auto; padding-bottom: 0px;}
.sec h3{ font-weight: 800; font-size: 400%; color: #FC4080; text-align:center; padding:10% 0 8%; text-shadow: 0 3px 5px rgba(51, 51, 51, 0.4);}
.sec li{ font-size:90%;}

.items{ padding: 3% 0; position: relative; }
.items h4{color: #fc4083; width: 100%; text-align: center; display: block; font-size: 250%; text-shadow: 0 2px 5px #fff; }
.items .wchance{padding: 40px 0; margin: 0 auto 20px; width: 100%; text-align: center; display: block; border-radius: 10px; border: solid 2px #fc4083; }

.items h4test{ color: #fb0101; padding: 0;  margin: 0 auto 20px;  width: 100%; line-height: 67px; text-align: center; display: block; border-radius: 10px; font-size: 250%; text-shadow: 0 2px 5px #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); border: solid 3px #e6e6e4;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f2e600+50,e09500+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f2e600 50%, #e09500 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f2e600 50%,#e09500 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#f2e600 50%,#e09500 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e09500',GradientType=0 ); /* IE6-9 */}
.items h4 span{ font-weight:700; font-size:60%; color:#333; padding-top:30px; display:block; line-height:1.5; width: 97%; margin: 0 auto;}
.items h6{ font-size: 150%; color: #f32d6d; display: block; line-height: 1.3; padding-top: 4%; text-align: left;}
.items h5 { color: #fff300;  background-color:#51bc00;  padding: 0;  margin: 0 0.4em 0 0;  width: 95px;  height: 95px;  line-height: 95px;  text-align: center;  display: inline-block;  border-radius: 50%; font-size: 200%; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); float: left; position:relative; z-index:3;}
.items h5.card{ font-size:147%;}
.items .notice{ font-size:85%; line-height: 1.5; color: #888; text-align: left;}
.items .goods{ text-align:center; padding:10px 0;}
.items .goods img{ width:100%;}
.items .voice{ padding-bottom:30px; text-align:center;}
.items .voice img{ width:20%;}
.item{ display:block; margin-bottom: 20px; padding-left: 10px;}
.item2{ display:inline-block; width:45.6%; margin:4% 2%; vertical-align: top; }
.item2 .sets{ padding:10px 0; font-weight: bold;}
.item2 .sets span{ color:#F00;}
.item2 .sets ul{ list-style:none; border-top:dotted 1px #ccc;}
.item2 .sets li{ border-bottom:dotted 1px #ccc;}
.item2 .notice a{ color:#51BB02!important;}

.cordnotice{ display: block; width: 95%; margin: 0 auto; text-align: left; font-size: 80%; line-height: 1.5; color: #888;}

.notice ul{ margin:0 auto; width:90%; max-width:1100px;}
.notice li{ text-align:left; font-size:90%;}

.notice2{ display: table; background-color: #b57979; color: #FFF; padding: 15px; line-height: 1.5; border-radius: 11px; font-size: 85%; margin: 15px 0;}
.notice2 a{ color:#FF0; text-decoration:none;}
.notice3{ background-color: #f32d6e; color: #FFF; padding: 15px 2%; line-height: 1.5; font-size: 110%; margin: 0 auto; width: 96%; position: relative; z-index: 20;}
.notice3 span{ color:#FFF100;}

.howto{ text-align:left; background-color:rgba(255, 255, 255, 0.8); border-radius: 10px; padding: 5% 10%; margin-bottom:40px; border: dotted 3px #e0a7a7; position:relative;}
.howto h4{ font-size: 230%; color:#0250c9; padding:20px 0 0 10px; display: inline-block; line-height: 1.3;}
.howto h5{ font-size: 130%; padding-top:20px; }
.howto h5 span{ border: dotted 1px #f00; padding: 7px; color: #f00; font-size: 80%; margin-top: 5px; display: inline-block; line-height: 100%; background-color:rgba(255, 8, 8, 0.1);}
.howto .howtogcshop{ border: dotted 1px #f00; padding: 15px; color: #f00; font-size: 85%; margin-top: 15px; display: inline-block; line-height: 150%; background-color:rgba(255, 8, 8, 0.1);}
.howto h5.next{ padding-top:30px;}
.howto .notice{ font-size:80%; line-height: 1.5; color: #888; text-indent: -1em; margin-left: 1em; padding-bottom: 5px;}
.howto .pt{ float: left;}
.howto p{ display:block; padding:15px 0 20px; font-size:180%; line-height: 1.5;}
.howto p span{ color:#F32D6E;}
.howto img.seat{ float:right; position: relative; right: -33px; top: -2px;}

.howto h6{ color:#034FC9; font-size:100%; font-weight:600; padding-bottom:5px;}
.howto td a{ background-color: #f77c21;  padding: 3px 9px; font-size: 80%; border-radius: 20px; color: #fff; text-decoration: none; line-height:1.0; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.48);}
.howto table{ margin-bottom:20px; border-top:dotted 1px #034FC9; width:100%; max-width:560px;}
.howto th, .howto td{ background-color:#c1eafb; border-bottom:dotted 1px #034FC9; padding:1.5%; font-size:90%; text-align:left;}
.howto th{ line-height:1.3;}
.howto td{ line-height:1.8;}
.howto th span{ font-size:80%; font-weight:100;}

/* products
--------------------------------------------------------------------------- */
#games{ display: flex; flex-wrap: wrap;}
#games .gamebox{ width: 22.5%; display: inline-block; margin: 0 1%; position:relative; padding-bottom: 20px;}
#games .gamebox .spec{ min-height:60px; }
#games .gamebox .get_game a{ text-align: center; margin: 15px auto; border: solid 1px #cec38e; display: block; width: 6em; border-radius: 20px;  -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff5b20), color-stop(0.00, #d9cc3f)); background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff4520), color-stop(0.00, #e51515)); background: -webkit-linear-gradient(#e51515, #ff4520); background: -moz-linear-gradient(#e51515, #ff4520); background: -o-linear-gradient(#e51515, #ff4520); background: -ms-linear-gradient(#e51515, #ff4520); background: linear-gradient(#e51545, #ff20b0); text-shadow:0px 2px 5px rgba(0, 0, 0, 0.6); box-shadow:0px 2px 5px rgba(0, 0, 0, 0.6); text-decoration: none; color: #fff;}
#games .gamebox .get_game a:hover{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #20b6ff), color-stop(0.00, #3fd9ae)); background: -webkit-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: -moz-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: -o-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: -ms-linear-gradient(top, #3fd9ae 0%, #20b6ff 88%); background: linear-gradient(to bottom, #3fd9ae 0%, #20b6ff 88%); box-shadow:0px 1px 8px rgba(0, 0, 0, 1);}
#games .gamebox img{ width:100%;}
#games .gamebox a:hover img{ filter:alpha(opacity=30)!important; -moz-opacity: 0.3!important; opacity: 0.3!important;}
#games .gamebox h4{ font-size:95%; margin:10px 0 5px; font-weight:bold; line-height:135%; color:#000;}
#games .gamebox p{ font-size:12px; color:#B71266; line-height:130%;}
#games .tags{ position:absolute; width:25%; top:4px; left:-4px; z-index:1;}


/* cleaner
--------------------------------------------------------------------------- */
.cleaner{ background-color:#00248B;}
.cleaner_inner{ max-width:1000px; width:90%; margin:0px auto; padding:80px 0; color:#FFF;}
.cleaner_inner h3 img{ width:100%; max-width:726px; padding-bottom:20px;}

.cleaner_inner .shop_list{ padding: 30px 0; border-top:dotted 1px rgba(255, 255, 255, 0.52);}
.cleaner_inner .shop_list img{ max-width:270px; width:90%; float:left; padding-right: 30px; padding-bottom:20px;}
.cleaner_inner .shop_block{ display: inline-block;}
.cleaner_inner .shop_block h4{ color:#FFF100; font-size:200%; padding-bottom:20px;}
.cleaner_inner .shop_block span{ font-size:85%; color:#67b0f9; display:block; padding-top:15px; line-height: 1.4;}


/* footer
--------------------------------------------------------------------------- */
#foot {color: #333333; background-color:#fff; border-top: solid 1px #ccc;}

#sns { text-align: center; margin: 0px auto; width: 100%; padding: 40px 0 20px; }
#sns img { margin: 0 10px; }
#foot { position: relative; bottom; padding-bottom: 20px; text-align: center; font-size: 13px;}
#foot address { display: none; }
#foot address span { display: block; text-indent: -9999px; overflow: hidden;}
#foot #copy { font-size: 10px; color:#666; width: 90%; max-width: 1200px; margin: 0 auto; line-height: 1.5; text-align: left; padding-bottom: 30px;}
#foot .bannerstxt {padding-bottom: 20px; width: 90%; margin: 0 auto;}
#foot .bannerstxt li{display:inline-block; padding: 5px;}


/* youtube
--------------------------------------------------------------------------- */
.youtube { position: relative; width: 100%; max-width: 902px; margin: 0 auto 60px; font-size: 13px;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
.stage { position: relative; width: 100%; padding-top: 56.25%; margin-top:15px;}
.stage iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
iframe[name="google_conversion_frame"] { position:absolute; bottom:0; display:none;}

.wrapper .finish{ position: absolute; z-index: 10; display: inline-block; background-color: rgba(6, 56, 251, 0.91); border-radius: 20px; padding: 3%; font-size: 290%; border: solid 3px #fff; box-shadow: 0 0 13px #082c7d; color: #fff; font-weight: 700;   line-height: 1.3; max-width: 689px; top: 38%; width: 85%; text-align:center; left: 0; right: 0; margin: 0 auto; text-shadow: 1px 2px 5px #000;}
.wrapper .finish span{ display: block; font-size: 60%; font-weight: 100; padding-top: 30px;}

@media screen and (max-width: 1110px) and (min-width: 640px) {
.wrapper{ background-image:url(../img/bgtb.jpg); background-size: cover;}
.wrapper img.kt {  position: absolute; left: 2%; top: 15px; width: 8%;}
.wrapper h1{ max-width: 690px; right: 0; top: 30%;}
.wrapper h1 img{ width:80%;}
.wrapper .pb{ background-size:cover;  background-position: 0%;}
.items h5 span{ width:74px; height:74px; line-height:74px; font-size:124%;}
.items h6{ font-size: 130%;}
}


@media screen and (max-width: 639px) {

#games .gamebox{ width:48%;}

.wrapper{ background-image:url(../img/bgsp.jpg); background-size: cover;}
.wrapper .finish { font-size:140%; top:47%;}
.wrapper .finish span{ padding-top:15px;}

.wrapper h1{ width: 93%; left:4%; top:15%!important;}
.wrapper .flower img{ max-width: 170px;}
.wrapper img.kt{ left:10px; top:15px; max-width:38px; z-index:3;}
.wrapper h2 img{  padding-top:0px; padding-bottom: 25px;}

a.btn_submit{ font-size: 190%; padding: 17px; border: solid 3px #efebe1; width:87%; }
.sec h3{ font-size:200%;}

.howto{ padding:6%;}
.howto .pt img{ width:100%;}
.howto h4 { font-size: 144%; padding: 10px 0 0 10px;}
.howto h5{ margin-bottom:0;}
.howto .notice{ font-size:80%}
.howto img.seat{ float: none; position: relative; right: auto; top: auto; left:auto; bottom:auto; margin: 20px auto 0; width: 100%;}
.howto p { padding: 10px 0 10px; font-size:100%;}

.howto th span { display: inline-table;}

.notice3{ font-size:90%;}
.items h6{ font-size: 130%;}
.item2{ width:96%; border-bottom: dotted 1px #f32d6c; padding-bottom: 20px; margin-top:0; margin-bottom: 20px;}
.items .voice img{ width:25%;}
.items h4{ margin:30px auto; font-size:175%; width:95%; line-height:1.3;}
.item{ display:block; margin-bottom: 20px; border-left: none; padding-left: 0px;}
.items h5 { width: 55px;  height: 55px;  line-height: 55px; font-size: 100%;}
.items h5.card{ font-size:65%;}
.items h5.cord{ font-size:65%;}
.item2 .blue{ border-left: none; padding-left: 0px; }
.items .wchance{padding: 0px;}
.goods{ text-align:center;}
.goods img{ width:100%;}

.cordnotice{ padding-bottom:20px;}

.cleaner_inner{ padding:30px 0;}
.cleaner_inner .shop_block h4{ font-size:160%; padding-bottom:10px;}
.cleaner_inner .shop_list img{ max-width: 190px; width: 90%; float: none; padding: 0 0 30px;}
.cleaner_inner .shop_list{ font-size:90%; line-height:1.4;}

.sec li{ font-size: 85%; line-height: 1.3; padding: 10px 0; list-style:none;}

#sns { text-align: center; padding: 30px 0 10px; margin: 0px auto 0 auto; }
#sns img { margin: 0 3px; }
#foot { padding: 0px; font-size: 14px; }
#foot a { }
#foot a:hover { color: #FF6699; }
#foot address { display: none; }
#foot #copy { font-size: 11px; padding: 15px; line-height: 1.5; color:#333; text-align: left; margin-bottom: 60px;}
#foot span { float: left; text-align: center; padding-top: 15px; }
#pagetop { bottom: 10px; right: 10px; position: fixed; z-index: 500; }
#foot #ktcopy { padding-top: 6px;}
#foot .banners { text-align: center; margin: 15px auto; max-width: 800px; }
#foot .banners img { padding: 5px; margin: 0; }

.hidesp{ display:none;}
.getsubmit { position: fixed; bottom: 0px; right: 0px; left: 0px; z-index: 2; text-align: center; padding: 15px 0; color: #fff; border: solid 3px #fff; box-shadow: 0 0 10px #000; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff5b20), color-stop(0.00, #d9cc3f)); background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff4520), color-stop(0.00, #e51515)); background: -webkit-linear-gradient(#e51515, #ff4520); background: -moz-linear-gradient(#e51515, #ff4520); background: -o-linear-gradient(#e51515, #ff4520); background: -ms-linear-gradient(#e51515, #ff4520); background: linear-gradient(#e51515, #ff4520); text-shadow:0px 2px 5px rgba(0, 0, 0, 0.6);}
a .getsubmit { color:#FFF; text-decoration:none; font-weight:700; font-size:130%; z-index: 5;}

.machine{color: #222; margin: 0 auto 30px; text-align: left; width: 90%; font-size:85%; float:none;}
}




@media screen and (min-width: 640px) {
.hidepc{ display:none;}
a .getsubmit { display:none!important;}
.machine{color: #222; margin: 0 0.5% 20px; text-align: left; width: 49%; float: left;}
.howto p{ font-size: 200%!important; line-height: 1.5;}
}