/*
2017.2.10
hrclsへ移行
*/


/* チャンネル 紹介文 */
.info-box {
    border: 1px solid #CCC;
  padding:15px 20px 0;
  background-color:#f9f9f9;
}
.info-box .midashi1 {
  color:#333;
  margin-bottom: 10px;
  font-size: 110%;
  text-align:left;
  min-height:auto;
}
/* プレミアアイコン */
.info-box .midashi1 .icon {
  width:1.2em;
  height:1.2em;
  display: inline-block;
  margin: 0 5px 0 0;
  vertical-align: text-bottom;
}
.sudoku-list li .icon{
  width:1em;
  height:1em;
  display: inline-block;
  margin: 0 0 0 5px;
  vertical-align: text-bottom;
}
.sudoku-list li .premier,
.info-box .midashi1 .premier{
  background: url(/vol1/images/pc/icon-premier.png?d=1) left center no-repeat;
  background-size:cover;
}


/* 数独問題リスト */
.sudoku-list {
  width:640px;
  margin:auto;
}
.sudoku-list li {
  border-top: 1px solid #CCC;
}
.sudoku-list li a {
  display: block;
  padding:10px;
}
.sudoku-list .new {
  border-top: none;
}
.sudoku-list .new a {
  font-weight:bold;
  font-size:110%;
}
.sudoku-list .new img {
  width:100px;
  float:left;
  margin:0 10px 10px 0;
}

.midashi2 {
  font-size:120%;
}

.WarningWrap {
  width: 100%;
  height: 290px;
  position: absolute;
  top: 0;
  background: rgba(255,255,255,0.9);
  padding: 30px;
  z-index: 1000;
  background-image:url(/vol1/sudoku/pc/images/bg.png);
  background-position:center center;
  background-repeat:no-repeat;
}

/* ゲーム */

#gameArea .numBtn01 li a,#gameArea td span{font-family: 'Racing Sans One', cursive;}

#gameArea { position: relative; text-align:center;padding:20px 0; width:640px; margin:auto; overflow:hidden;}
#gameArea .boxRight {width:200px;float:right;}
#gameArea .boxLeft {width:110px;float:left;}
#gameArea .gameTable {float:left;position:relative;}
#gameArea * {box-sizing:border-box; outline:none;}
#gameArea h2 {font-size: 18px; margin-top:0;text-align:center;}

/* タイマー */
#gameArea #timer { font-size:16px; font-weight: bold; width:80px; height:80px; margin:0 auto 40px; line-height:100%; padding-top:30px; border:2px solid #0076c9; border-radius:50%; background:#EFF5FA; color:#0076c9;}

/* テーブル */
#gameArea table { /*position: relative;*/ z-index: 100; border:3px solid #0076C9; margin:0px auto;}
#gameArea td { width:36px;height:36px; position:relative;}
#gameArea td span {width:100%;height:100%;text-align:center;background:#DDD;font-size:140%;line-height:150%; font-weight: bold;padding:0; color:#333;display:block;overflow:hidden;
user-select: none; /* CSS3 */
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Safari、Chromeなど */
-ms-user-select: none; /* IE10 */
}

#gameArea .on td span {background:#FFF;}
#gameArea td span {width:30px\9;height:30px\9;}/* IE8 hack */
#gameArea td span.on { color:#0076C9; text-shadow:0px 0px 2px #CCC;}
#gameArea td span.off { color:#666;}
#gameArea .on td span.on:hover { background:#0076C9; color:#FFF;}
#gameArea .on td span.on:hover {cursor:pointer}

td { border:1px solid #CCC;}
#t02, #t05,
#t12, #t15,
#t22, #t25,
#t32, #t35,
#t42, #t45,
#t52, #t55,
#t62, #t65,
#t72, #t75,
#t82, #t85 {border-right:3px solid #0076C9;zoom:1;}

#t20,#t21,#t22,#t23,#t24,#t25,#t26,#t27,#t28,
#t50,#t51,#t52,#t53,#t54,#t55,#t56,#t57,#t58 {border-bottom:3px solid #0076C9;zoom:1;}

#gameArea .clearBtn {margin:0; padding:0; width:20px;height:20px; font-size:12px; border-radius:50%; text-indent:-9999px;color:#FFF;position:absolute; z-index:100; right:-10px; top:-30%; display:none; box-shadow:1px 1px 2px #999;}
#gameArea .on td span.clearBtn {background:url(/vol1/sudoku/pc/images/icon_clear_s.png) no-repeat 50% 50% #333; cursor:pointer }

/* ヒント表示時のセル */
#gameArea td span.inptdis {background:#EEE;}/*IE8*/
#gameArea td span.on.inptdis,
#gameArea td span.off.inptdis {background:#E9E9D9;}/*#F0F0E6*/
#gameArea td span.on.selected.inptdis {background:#0076C9; color:#FFF;}
#gameArea td span.off.selected.inptdis {background:#996; color:#FFF;}

/* 吹き出し */
#msg { position:relative; opacity:0; font-size:90%; background:#FFF6D5; border:2px solid #FFC800; margin:auto; padding:0.8em; border-radius:4px; width:170px; height:3em; line-height:100%;}
#msg:before { content: ""; position: absolute; bottom: -10px; left: 50%; margin-left: -9px; width: 0px; height: 0px; border-style: solid; border-width: 9px 9px 0 9px; border-color: #FFC800 transparent transparent transparent; z-index: 0;}
#msg b { font-size:120%; font-weight:bold; }

/* 1から9 入力ボタン */
#gameArea .numBtn01 { width:170px; margin:10px auto 20px;}
#gameArea .numBtn01 li {display: inline-block; position: relative; width:45px; text-align:center; font-size:80%; padding:0; margin:0 1px 1px 0;}
#gameArea .numBtn01 li a { width:45px; height:45px; background:#0076C9; color:#FFF; margin-bottom: 0; line-height: 190%;font-size:180%; font-weight:bold; display:block; border-radius: 3px;}
#gameArea .numBtn01 li a:hover {background:#FFC800; text-decoration:none;}
#gameArea .numBtn01 li .active,
#gameArea .numBtn01 li .active:hover { background:#FFC800; text-decoration:none;}
#gameArea .numBtn01 li .full {color:#CCC;}
#gameArea .numBtn01 li .over {color:#C00;}
#gameArea .numBtn01 li .num2 {display:none; background:rgba(255,255,255,0.7); position:absolute; bottom:-6px; right:-6px; line-height:100%; border-radius: 50%; width:24px;height:24px; padding:4px 0 0 0;}
#gameArea .numBtn01 li .num2 {color:#FFF\9;}
#gameArea .numBtn01 #sptNumNull a {text-indent:-9999px;}

/* アイコン付きボタン */
#gameArea .icnBtn li { list-style-type:none; font-size:14px; text-align: center; margin-bottom:10px;}
#gameArea .icnBtn li:last-child {margin-bottom:0;}
#gameArea .icnBtn li a {color:#2370b8; display:inline-block;}
#gameArea .icnBtn li a .icon {display:block; height:40px; width:40px; margin:0px auto; color:#FFF; background:#2370b8; border-radius: 50%; position:relative;}
#gameArea .icnBtn li a .icon img {width:90%;height:90%; margin-top:2px;}
#gameArea .icnBtn li a:hover .icon {background:#FFC800; text-decoration:none;}

#gameArea .boxRight .icnBtn li {float:left; width:50%;}

/* ヒント */
#gameArea #gameHint img.off {display:inline-block;}
#gameArea #gameHint img.on {display:none;}
#gameArea #gameHint.on img.off {display:none;}
#gameArea #gameHint.on img.on {display:inline-block;}
#gameArea #gameHint.on .icon { background:#FFC800;}

/* 四角ボタン */
#gameArea .timBtn {margin:0 auto;}
#gameArea .timBtn a { font-size:16px; text-align: center; display: block; padding:10px; margin:0px auto; width:200px; border-radius:4px; background:#2370b8; color:#FFF; }
#gameArea .timBtn a:hover { text-decoration:none; background:#FFC800;}

/* メッセージウィンドウ */
#gameArea #loading {text-align:center; margin-top:100px;}
#gameArea .info { background-color:#FFF; display:inline-block; padding:15px;}
#gameArea #column2 .info h2, #gameArea #column2 .info p { position:relative; top:40px; opacity:0; line-height:180%;}
#gameArea #column .info { margin-top:60px;}
#gameArea #column2,
#gameArea #column {background:url(/vol1/sudoku/pc/images/sdk_bk.gif) repeat;}
#gameArea #column2,
#gameArea #column { width: 100%; height:100%; position:absolute; top:0; background:rgba(255,255,255,0.9); border:1px solid #CCC; padding:30px; z-index: 1000;}
#gameArea #column2 #gameEnd {display:none;}
#gameArea #column2 {display:none;}
#gameArea #column .sousa a {text-decoration:underline;font-weight:bold;}
#gameArea #column .sousa a:hover {text-decoration:none;}

/* 説明 */
#sudoku .gameInfo {margin:15px auto; width:640px; }
#sudoku .gameInfo h2 {margin-bottom:20px;}
#sudoku .gameInfo p {margin-bottom:20px;}
#sudoku .nikori {text-align:center; font-size:14px; border-top:1px solid #CCC; padding-top:15px;}


/* end */