@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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
a img { border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
.pc { display: block; }
.sp { display: none; }

.cf, .kifu_player_wrap, .stage, .controls { *zoom: 1; }
.cf:after, .kifu_player_wrap:after, .stage:after, .controls:after { content: ""; display: table; clear: both; }

.kifu_player_wrap {width: 960px; margin: 10px auto;}

.play_section {width: 620px; text-align: center; float: left; margin: 0 0 14px;}
.name {font-size: 24px; font-family: serif; font-weight: bold; display: inline-block; padding-left: 60px; line-height: 54px;}
.name.sente {background: url(../images/ico_sente.png) left center no-repeat; margin-top: 6px;}
.name.gote {background: url(../images/ico_gote.png) left center no-repeat; }
.stage {position: relative; width: 620px; height: 482px;}
.board { background: url(../images/bg_board.png) 0 0 no-repeat; width: 378px; padding: 25px; margin: 0 96px; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16);}
.board table {width: 378px; }
.board table td {width: 42px; height: 48px; line-height: 0; text-align: center; vertical-align: center;}
.board table td.lastto img {border: solid 1px #5c4e26; box-sizing: border-box; width: 100%; height: 100%; background-color:#fd8c06;}
.mochi {width: 86px; height: 201px; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16);}
.mochi1 {background: url(../images/bg_mochi.png) 0 0 no-repeat; position: absolute; left: 0; top: 0; }
.mochi2 {background: url(../images/bg_mochi.png) 0 bottom no-repeat; position: absolute; right: 0; bottom: 0; }
.mochi table {width: 84px; margin: 5px 1px;}
.mochi table td {width: 42px; height: 48px; line-height: 0; text-align: center; vertical-align: center; position: relative;}
.mochi table td span.count {/*display: none;*/ position: absolute; bottom: 10px; right: 2px; font-size: 22px; color: #fff; font-family: serif;
/* for modan browser */
text-shadow:0px 3px 1px black,0px 2px 1px black,1px 2px 1px black,2px 2px 1px black,2px 1px 1px black,2px 0px 1px black,3px 0px 1px black,2px -1px 1px black,2px -2px 1px black,2px -3px 1px black,1px -3px 1px black,0px -3px 1px black,-1px -3px 1px black,-2px -3px 1px black,-3px -3px 1px black,-3px -2px 1px black,-3px -1px 1px black,-3px 0px 1px black,-3px 1px 1px black,-3px 2px 1px black,-2px 2px 1px black,-1px 2px 1px black;
/* for IE */
filter:dropshadow(color=black,offx=0,offy=3,positive=1),dropshadow(color=black,offx=2,offy=1,positive=1),dropshadow(color=black,offx=2,offy=-1,positive=1),dropshadow(color=black,offx=1,offy=-3,positive=1),dropshadow(color=black,offx=-2,offy=-3,positive=1),dropshadow(color=black,offx=-3,offy=-2,positive=1),dropshadow(color=black,offx=-3,offy=1,positive=1),dropshadow(color=black,offx=-1,offy=2,positive=1);
}

.control_section {width: 326px; float: right; margin: 54px 0 14px; position: relative;}
.kifulist ul{ position: absolute; top: 0; left: 0; z-index: 99; background-color: #fff; /*background-color: rgba(255,255,255,0.5); */ font-size:16px; width:100%; height:410px; overflow: auto; border: 0; padding: 0 0px; -webkit-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06);
}
.kifulist li { border-bottom: solid 1px #c7c9ce; padding: 8px 10px; line-height: 25px;}
.kifulist li.selected {background-color: #0069d9; color: #fff;}
.controls {margin: 410px 0 0; position: relative; z-index: 100;}
.controls .inner { margin: 0 0 0 0;}
.controls div {float: left; line-height: 0; vertical-align: top; }
.controls button {background: #fff; border: 0; padding: 0; line-height: 0; width: auto; height: 44px;}
.controls button:active { outline: 0; }
.controls button:active img { opacity: 0.7;}
.tesuu { background: #fff; font-size: 16px;line-height: 28px; text-align: center; font-family: serif; -webkit-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06);}
.controls .tesuu input {width: 56px; border: 0; padding: 0; text-align: center; height: 36px; line-height: 36px; font-family: serif; font-size: 18px;}
.ex_controls {margin: 14px 0 0; text-align: right; white-space: nowrap; float: right;}
.ex_controls .autoload {font-size: 14px; display: inline; vertical-align: top; margin: 4px; }
.ex_controls .label {font-size: 14px; display: inline-block; line-height: 36px; vertical-align: top; margin-right: -4px;}
.ex_controls .speed {font-size: 14px; display: inline; vertical-align: top; margin: 4px; }
.ex_controls .reverse { display: inline; margin: 0 0 0 4px;}
.ex_controls button { background-color: #a46b24; border: 0; padding: 0; line-height: 0; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);}
.ex_controls button:active {outline: 0; }
.ex_controls button:active img { opacity: 0.7;}

.info_section {width: 100%; clear: both; border-top: solid 1px #c7c9ce;}
.info_section dl {font-family: serif; font-size: 14px; line-height: 1.5;}
.info_section dl dt {padding: 6px 0 6px 15px; width: 155px; font-weight: bold; clear: both; float: left;}
.info_section dl dd {padding: 6px 15px 6px 170px; border-bottom: solid 1px #c7c9ce;}



@media (max-width:640px) {
img { width: 100%; height: auto; }
.pc { display: none !important; }
.sp { display: block !important; }

.kifu_player_wrap {width: auto; margin: 10px 0; min-width: 300px;}

.play_section {width: 100%; text-align: center; float: none; margin: 0 auto 14px;}
.name {font-size: 14px; font-family: serif; font-weight: bold; display: inline-block; padding-left: 30px; line-height: 27px;}
.name.sente {background: url(../images/ico_sente.png) left center no-repeat; background-size: 27px; margin-top: 6px;}
.name.gote {background: url(../images/ico_gote.png) left center no-repeat; background-size: 27px; }
.stage {position: relative; width: auto; height: auto;}
.board { background: url(../images/bg_board.png) 0 0 no-repeat; background-size: 100% 100%; width: 69%; padding: 4%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; margin: 0 15.5%; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16);}
.board table {width: 100%;}
.board table td {width: 9.8%; height: auto; min-height: 24px; max-height: 48px; line-height: 0; text-align: center; vertical-align: center;}
.board table td.lastto img { border: solid 1px #a46c25; box-sizing: border-box; width: 100%; height: auto; background-color:#fd8c06;}
.mochi {width: 14%; height: auto; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16);}
.mochi1 {background: url(../images/bg_mochi.png) 0 0 no-repeat; background-size: 100% 100%; position: absolute; left: 0; top: 0; }
.mochi2 {background: url(../images/bg_mochi.png) 0 bottom no-repeat; background-size: 100% 100%; position: absolute; right: 0; bottom: 0; }
.mochi table {width: 98%; margin: 5px 1%;}
.mochi table td {width: 50%; height: auto; line-height: 0; text-align: center; vertical-align: center; position: relative;}
.mochi table td span.count {/*display: none;*/ position: absolute; bottom: 3px; right: 2px; font-size: 11px; color: #fff; font-family: serif;
/* for modan browser */
text-shadow:0px 3px 1px black,0px 2px 1px black,1px 2px 1px black,2px 2px 1px black,2px 1px 1px black,2px 0px 1px black,3px 0px 1px black,2px -1px 1px black,2px -2px 1px black,2px -3px 1px black,1px -3px 1px black,0px -3px 1px black,-1px -3px 1px black,-2px -3px 1px black,-3px -3px 1px black,-3px -2px 1px black,-3px -1px 1px black,-3px 0px 1px black,-3px 1px 1px black,-3px 2px 1px black,-2px 2px 1px black,-1px 2px 1px black;
/* for IE */
filter:dropshadow(color=black,offx=0,offy=3,positive=1),dropshadow(color=black,offx=2,offy=1,positive=1),dropshadow(color=black,offx=2,offy=-1,positive=1),dropshadow(color=black,offx=1,offy=-3,positive=1),dropshadow(color=black,offx=-2,offy=-3,positive=1),dropshadow(color=black,offx=-3,offy=-2,positive=1),dropshadow(color=black,offx=-3,offy=1,positive=1),dropshadow(color=black,offx=-1,offy=2,positive=1);
}

.control_section {width: auto; float: none; margin: 8px 0 15px;}
.kifulist ul{ position: static; top: 0; left: 0; z-index: 99; background-color: #fff; /*background-color: rgba(255,255,255,0.5); */ font-size:11px; width:100%; height:134px; overflow: auto; border: 0; padding: 0 0px; -webkit-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06);
  clear: both; border-top: solid 1px #c7c9ce; margin-bottom: 50px;
}
.kifulist li { border-bottom: solid 1px #c7c9ce; padding: 0 10px; line-height: 26px;}
.kifulist li.selected {background-color: #0069d9; color: #fff;}
.controls {margin: 15px 0px 0;}
.controls .inner { display: table; width: 100%; background: #fff; }
.controls div {float: none; margin-right: 0px; width: auto; display: table-cell; vertical-align: top;}
.controls div.c6 {margin-right: 0px;}
.controls button {width: 100%; height: 100%; background-color: transparent; border: 0; padding: 0; line-height: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.controls button:active {background-color: #fff; outline: 0; }
.tesuu { border-top: solid 1px #c7c9ce; background: #fff; font-size: 18px;line-height: 28px; padding: 7px 5px; text-align: center; font-family: serif; -webkit-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06);}
.ex_controls {margin: 0px 0 0; padding: 0; width: 100%; text-align: center; position: absolute; bottom: -174px; /*border-top: solid 1px #dbcaa2; background: #f9f4e7;*/ white-space: normal; float: none;}
.ex_controls .autoload {font-size: 16px; display: inline; vertical-align: top; margin: 0px; }
.ex_controls .speed {font-size: 16px; display: inline; vertical-align: top; margin: 0px; }
.ex_controls .label {font-size: 11px; display: inline-block; line-height: 30px; vertical-align: top; margin-right: 0px; margin-left: 5px;}
.ex_controls button { background-color: transparent; border: 0; padding: 0; line-height: 0; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);}
.ex_controls button:active {background-color: #a46b24; outline: 0; }
.ex_controls .reverse {position: absolute; top: -179px; right: 7px; }
.ex_controls .reverse img {height: 28px; width: auto;}
.sp_wrap {position: relative;}

.info_section {width: 100%; clear: both; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.info_section dl {font-family: serif; font-size: 11px; line-height: 1.5;}
.info_section dl dt {padding: 6px 0 6px 0px; width: 85px; font-weight: bold; clear: both; float: left;}
.info_section dl dd {padding: 6px 0px 6px 85px; border-bottom: solid 1px #c7c9ce;}

}