/* CSS Document */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');

/********************************************
 * reset
 ********************************************/
html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td ,
article,header,footer,aside,figure,figcaption,nav,section{
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-size:16px;
	vertical-align:baseline;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background-attachment:fixed;
	background-size:cover;
	box-sizing: border-box;
}

body{
	font-family: "游ゴシック Medium","游ゴシック体","Yu Gothic Medium",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height: 1.4;
	background: #000;
	color:#ddd;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-touch-callout:none; /*リンク長押し無効化*/
	user-select:none; /*テキスト長押し無効化*/
}

.gosic{	font-family: "M PLUS Rounded 1c","游ゴシック Medium","游ゴシック体","Yu Gothic Medium",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-style:normal;}

.mincho {
  font-weight: 400; /*700 bold*/
  font-feature-settings:"palt";
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/********************************************
 * clearfix
 ********************************************/
.cf::after{
	content: "";
	display: table;
	clear: both;
}

/********************************************
* Now Loading
********************************************/
#overlay{ 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinner {
    width: 80px;
    height: 80px;
    border: 4px #ddd solid;
    border-top: 4px #999 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
.flag{
	text-align: center;
	display: none;	
	position: absolute;
	bottom:10px;
}
.flag img{ width:70%;}

@keyframes sp-anime {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}
.is-hide{
    display:none;
}

/********************************************
 * common
 ********************************************/

table{ border-collapse:collapse;}
a{ text-decoration:none; color:#ddd;}
em{ font-style:normal;}
article{ line-height:1.6;}
ol,ul{ list-style:none; list-style-type:none;}
li{ line-height:1.6;}
.palt{ font-feature-settings:"palt";}
.boxLink{ cursor:pointer;}
.mincho { font-family: "Sawarabi Mincho"; font-feature-settings:"palt";}
.pc-only{ display:none;}
.center{ text-align:center;}
.mb100{ margin-bottom:100px;}
.mb50{ margin-bottom:50px;}
.mb30{ margin-bottom:30px;}
.img-max{ width:100%;}
.main-color{ color:#18b;}
.red{ color:#c00;}

.fs12{ font-size:12px;}
.fs14{ font-size:14px;}
.fs16{ font-size:16px;}
.fs18{ font-size:18px;}

.mb0{ margin-bottom:0 !important;}
.mb10{ margin-bottom:10px !important;}
.mb20{ margin-bottom:20px !important;}
.mb30{ margin-bottom:30px !important;}
.mb50{ margin-bottom:50px !important;}

.main-color{ color:#f90;}

header{ position:relative;}
header #sound-flag{ position: absolute; top:10px; right:10px; font-size:18px;}
footer{ position:fixed; bottom:0; padding:10px;}
footer #power-off a{ display: inline-block; padding:8px 10px; border:2px solid #ccc; border-radius:50px; font-size:14px;}

.sp-nav{ font-size:32px; position: absolute; top:22px; right:15px;}
.sp-nav:hover{ cursor: pointer;}
.submit-btn{ background:#18b; display:inline-block; padding:15px 40px; font-size:18px;}
.titlebar{ border-top:1px solid #333; color:#18b; text-align:center; padding:20px 0 20px 0; background:url(/img/titlebar.png) center 0 no-repeat; background-size:100px 3px; font-size:32px; font-weight:700;}

#frm .err{ display:none;}
#frm  strong{ color:#900; font-weight:bold; margin:0 0 8px 0; display:none;}
#frmErr{ display:none; border:2px solid #c00; color:#c00; text-align:center; padding:15px 0;  margin:20px 15px; font-weight:bold;}
#formEnd{text-align:center; padding:50px 0;}
#formEnd div{ font-size:32px; margin:0 0 10px 0;}
#formEnd p{ font-size:18px;}

#pagetop{ position: fixed; right:20px; bottom:80px; display:none;}
#pagetop:hover{ cursor: pointer;}
#pagetop a{ color:#ddd; font-size:50px; opacity: 0.5;}

#mask{
	display:none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}
nav ul{
	display:none;
	position: fixed;
	z-index:999;
	background-color: #000;
	width: 250px;
	top: 35%;
	left: 52%;
	margin-top: -132px;
	margin-left: -132px;
	border:3px solid #18b;
}

header nav li{ border-bottom:1px solid #18b;}
header nav li:last-child{ border:0;}
header nav a{ display:block; padding:15px 0; color:#ddd; font-size:16px;}

.desc{ padding:10px;}

/********************************************
 * matching
 ********************************************/
#menu{ text-align:center;}
#menu{ width:80%; margin:10px auto 0 auto;}
#menu li{ margin:0 0 20px 0;}
#menu li i{ font-size:24px; margin:0 0 0 10px;}
#menu li a{ display:block; padding:15px 0; font-size: 24px; color:#fff; text-decoration: none; border-radius:100px; border:3px solid #ccc; box-shadow: 5px 5px 0 #666;}
.nav{ text-align:center; margin:0 0 20px 0; color:#f90; position: relative;}
.nav i{ position: relative;}
.mainvisual{ text-align:center; margin:0 0 10px 0;}
.mainvisual img{ width:128px;}

#gameMC{ max-width:770px; width:100%; margin:0 auto; padding:2%;}

.matching .nav{ text-align:center; font-size:24px; margin:10px 0 20px 0; color:#ccc;}
.matching .nav i{ font-size:20px; margin:0 10px;}
.matching #card-list{ text-align: center; position: relative; top:50px; opacity:0;}
.matching #card-list li{ display: inline-block; line-height:0; margin:0 0 10px 0; position:relative; text-align:center;}
.matching .col4 li{ width:24%;}
.matching .col5 li{ width:19%;}
.matching .col6 li{ width:15%;}
.matching .col7 li{ width:13%;}
.matching #card-list img{ width:90%; border-radius:5px; animation: rotate_anime 3s;}
@keyframes rotate_anime{
  0% { transform:rotateY(0deg);}
  100% { transform:rotateY(360deg);}
}
#comp{ text-align:center; display:none;}
#comp img{ width:85%;}
#comp ul{ text-align: center; margin:20px 0;}
#comp li{ display: inline-block; margin:0 0 10px 0;}
#comp li span{ font-size: 24px;}
#comp li a.btn{ padding:10px 20px; font-size: 24px; background:#f90; color:#000; text-decoration: none; border-radius:10px; box-shadow: 5px 5px 0 #fff;}
#comp li a.btn2{ padding:10px 40px; font-size: 24px; color:#fff; text-decoration: none; border-radius:100px; border:3px solid #ccc; box-shadow: 5px 5px 0 #666;}
#comp li i{ font-size:24px;}
#comp .replay{ position:relative;}

/********************************************
 * janken
 ********************************************/
.janken #choice{ text-align:center; display:none;}
.janken #choice li{ display:inline-block; width:30%; position:relative;}
.janken #choice li img{ width:100%;}
.janken .nav{ display:none;}
.janken .nav i{ position:relative; font-size:32px !important;}
.janken .mission{ font-size:28px; text-align:center; margin:0 0 40px 0; font-weight: bold; position:relative; top:30px; opacity:0;}
.janken .mission i{ position:relative; top:-15px; font-size:14px;}
.janken .cpu{ text-align:center; margin:0; position:relative; top:-300px;}
.janken .cpu span{ display:block; font-size:24px;}
.janken .cpu img{ width:50%;  transform: rotate( -180deg );}


/********************************************
 * drops
 ********************************************/
.drops .nav{ text-align:center; font-size:24px; margin:10px 0 20px 0; color:#ccc;}
.drops #card-list{ text-align: center; position: relative;}
.drops #card-list li{ display: inline-block; width:30%; line-height:0; margin:0 0 5px 0; position:relative; text-align:center;}
.drops #card-list img{ width:100%; border-radius: 15px;}
.drops .col3 li{ width:32% !important;}
.drops .col4 li{ width:24% !important;}

/********************************************
 * keisan
 ********************************************/
.keisan h1{ text-align:center; font-size:20px; margin:0 0 5px 0;}
.keisan h1 span{ font-size:20px;}
.keisan .nav{ text-align:center; font-size:24px; margin:10px 0; color:#ccc; color:#f4d694; padding:10px 0;}
.keisan .mondai{ text-align:center; font-size:48px; height:60px; background:#063; line-height:1; padding:5px 0; margin:0 0 15px 0;}
.keisan .kaito{ width:95%; max-width:360px; margin:0 auto; text-align:center; line-height:1; font-size:39px; background:#333; border:2px solid #eee; padding:5px;}
.keisan #numkey{ width:95%; max-width:360px; margin:10px auto 0 auto;}
.keisan #numkey li{ float:left; width:33.3333%; text-align:center; padding:4px;}
.keisan #numkey span{ display:block; background:#333; color:#eee; border-radius:5px; padding:8px 0; font-size:36px; border:6px outset #ccc;}


/********************************************
 * mogura
 ********************************************/
.mogura .nav{ text-align:center; font-size:24px; margin:0px 0 20px 0; color:#ccc;}
.mogura #card-list{ text-align:center; padding:20% 0 0 0;}
.mogura #card-list li{ display:inline-block; width:30%; line-height:0; margin:0 0 30px 0; position:relative; text-align:center;}
.mogura #card-list img{ width:100%;}
.mogura .col3 li{ width:32% !important;}
.mogura .col4 li{ width:24% !important;}
.mogura .soil{ position: absolute; bottom:0; left:0;}
.mogura .mog img{ position: absolute; bottom:0; left:0;}
.mogura .row1 .mog img{ z-index:10;}
.mogura .row1 .soil{ z-index:11;}
.mogura .row2 .mog img{ z-index:20;}
.mogura .row2 .soil{ z-index:21;}
.mogura .row3 .mog img{ z-index:30;}
.mogura .row3 .soil{ z-index:31;}
.mogura .row4 .mog img{ z-index:40;}
.mogura .row4 .soil{ z-index:41;}
.mogura .row5 .mog img{ z-index:50;}
.mogura .row5 .soil{ z-index:51;}
.mogura #countdown{ position: fixed; bottom:10px; right:10px;}
.mogura #countdown,
.mogura #countdown span{ font-size:24px;}
.mogura #countdown i{ margin:0 5px 0 0;}
#comp .happyo{ font-size:24px; margin:50px 0;}
#comp .happyo span{ font-size:48px; color:#f4d694;}