@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: #0258C5;	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;}


/* button
--------------------------------------------------------------------------- */
a.btn_submit{ font-size: 250%; padding: 25px; border-radius: 50px; border: solid 5px #efebe1; width:90%; max-width: 550px; margin: 0px auto; display: block; text-align: center; background-color: #c00; text-decoration:none; color:#FFF; 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(0.00, #e5c915)); background: -webkit-linear-gradient(#e5c915, #ff4520); background: -moz-linear-gradient(#e5c915, #ff4520); background: -o-linear-gradient(#e5c915, #ff4520); background: -ms-linear-gradient(#e5c915, #ff4520); background: linear-gradient(#e5c915, #ff4520); 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); background-size:cover; background-repeat:no-repeat; background-position:center top; position:relative; text-align:center;}
.wrapper h1{ margin:0 auto; max-width:600px; position:relative; z-index:2; padding:220px 0 20px;}
.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:1000px; position:relative; padding-bottom:20px;}
.wrapper img.kt{ position:absolute; left:30px; top:15px; max-width:80px;}
.wrapper .pb{ position: absolute; top: 10px; left: 0; right: 0; z-index:1;}
.wrapper .pb img{ width:100%; max-width:1187px;}

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

.presents{ background:url(../img/flower2.png) bottom left no-repeat, url(../img/flower.png) top right no-repeat; background-color:#36F;}
.products{ background:#FFF; margin-bottom:40px; background-image:url(../img/flower3.png); background-position:bottom right; background-repeat:no-repeat;}
.notices{ background:#eee; }
.sec{ width:90%; max-width:1200px; margin:0 auto; padding-bottom: 40px;}
.sec h3{ font-weight: 800; font-size: 400%; color: #00a3f0; text-align:center; padding:10% 0; text-shadow: 0 3px 5px #3333336e;}

.items{ background-color: #FFF; border-radius: 20px; padding: 3% 5% 5%; margin-bottom:40px;}
.items h4{ font-weight:700; font-size:250%; margin-bottom:40px;}
.items h4 span{ font-weight:700; font-size:26px; color:#F00;}
.items h5{ font-size: 150%; color: #00a3f0; padding:10px 0;}
.items h5 span{ color:#f00;}
.items .notice{ font-size:85%; line-height: 1.5; color: #888; text-indent: -1em; margin-left: 1em; text-align: left;}
.items .goods{ text-align:center; padding:10px 0;}
.items .goods img{ width:100%; max-width:390px;}
.items .voice{ padding-bottom:30px; text-align:center;}
.items .voice img{ width:20%;}
.item{ display:block; margin-bottom: 20px; border-left: solid 3px #00a3f0; padding-left: 10px;}
.item2{ display:inline-block; width:47%; margin-right:2%; margin-bottom: 30px; vertical-align: top; margin-top: 20px}
.item2 .blue{ border-left: solid 3px #00a3f0; padding-left: 10px; }
.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;}

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

.notice2{ display: table; background-color: #e00404; color: #FFF; padding: 5px 10px; line-height: 1.5; border-radius: 11px; font-size: 85%; margin-bottom: 15px;}
.notice3{ background-color: #e00404; color: #FFF; padding: 15px 2%; line-height: 1.5; font-size: 110%; margin: 0 auto; width: 96%;}

.howto{ text-align:left; background-color:rgba(255, 255, 255, 0.8); border-radius: 20px; padding: 5% 10%; margin-bottom:40px; border: dotted 3px #aba7e0; 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;}
.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: 17.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, #e5c915)); background: -webkit-linear-gradient(#e5c915, #ff4520); background: -moz-linear-gradient(#e5c915, #ff4520); background: -o-linear-gradient(#e5c915, #ff4520); background: -ms-linear-gradient(#e5c915, #ff4520); background: linear-gradient(#e5c915, #ff4520); 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 h4{ font-size:95%; margin:10px 0 5px; font-weight:bold; line-height:135%;}
#games .gamebox p{ font-size:12px; color:#777; 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;}
#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: 300%; 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:left; left: 0; right: 0; margin: 0 auto;}
.wrapper .finish span{ display: block; font-size: 60%; font-weight: 100; padding-top: 30px;}

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

.wrapper .finish { font-size:140%;}
.wrapper .finish span{ padding-top:15px;}

.wrapper h1{ padding: 12vh 0 2vh; width: 55%;}
.wrapper .flower img{ max-width: 170px;}
.wrapper img.kt{ left:10px; top:15px; max-width:38px; z-index:3;}

a.btn_submit{ font-size: 130%; padding: 7px; 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;}
.howto p { padding: 10px 0 10px;}

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

.notice3{ font-size:90%;}

.item2{ width:100%; border-bottom: dotted 1px #969494; padding-bottom: 20px; margin-top:0;}
.items .voice img{ width:25%;}
.items h4{ margin:30px 0; font-size:200%;}
.item{ display:block; margin-bottom: 20px; border-left: none; padding-left: 0px;}
.item2 .blue{ border-left: none; padding-left: 0px; }
.goods{ text-align:center;}
.goods img{ width:100%;}

#games .gamebox{ width:48%;}

.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; }

#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;}
#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, #e5c915)); background: -webkit-linear-gradient(#e5c915, #ff4520); background: -moz-linear-gradient(#e5c915, #ff4520); background: -o-linear-gradient(#e5c915, #ff4520); background: -ms-linear-gradient(#e5c915, #ff4520); background: linear-gradient(#e5c915, #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%;}

.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;}
}

@media screen and (max-width: 1087px) and (min-width: 640px) {
.wrapper h1 { width:55%; padding:13vh 0 20px;}
.wrapper img.kt {  position: absolute; left: 2%; top: 15px; width: 8%;}
}