@charset "utf-8";

/*　reset
*********************************************************/

*{
	margin:0;
	padding:0;
	line-height: 1.6;
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}



body{
	color:#000000;
	font-size: 1.7rem;
/*	font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
*/	font-family: 'Noto Sans JP';
position: relative;
}



img{vertical-align:bottom;}
img.btm{vertical-align:bottom;}
img.mdl{vertical-align: middle;}
img.top{vertical-align: top;}
img.bod{border: 2px solid #ffffff; padding: 5px;}
.w100{width: 100%;}
.w50{width: 50%;}
.w30{width: 30%;}
.w20{width: 20%;}
.w10{width: 10%;}


.br5{border-radius: 0.5rem;}


a img{border:none;}
li{list-style-type:none;}
br{letter-spacing:0;}
br.spbr{display: none;}
br.pcbr{display: block;}

.sp-visual{display: none;}

a:link{text-decoration:none; color:#4285F4;}
a:visited{text-decoration:none; color:#4285F4;}
a:hover{text-decoration:underline; color:#4285F4;}
a:active{text-decoration:none; color:#4285F4;}

/*　layout
*********************************************************/

.bodybg{
	background-color: #bd1c00;
	background-image: url("https://www.transparenttextures.com/patterns/checkered-light-emboss.png");
}


.bodybg_month{
	background-color: #b54800;
	background-image: url("https://www.transparenttextures.com/patterns/checkered-light-emboss.png");
}



#wrapper{
	margin:1.5rem auto 0 auto;
	text-align: center;

}

/*　
*********************************************************/

.container-l{
	float: left;
	position: relative;
	display: block;
/*	background: #ffffff;
*/	width: 26.5rem;
	height: 100%;
	padding: 0rem; 

	text-align: left;
	z-index: 0;
}

.container-sp{
	display: none;
}

ul.menu-left{
	width: 100%;
	padding: 1.2rem;

}


ul.menu-left li.intro{
	padding: 1rem 1.5rem;
	font-size: 1.3rem;
	margin: 1.5rem 0 1rem 0;
	border-left: 0.5rem solid #e8e8e8;
	color: #ffffff;
}

ul.menu-left li.intro:first-child{
	margin-top: 0;
}

ul.menu-left li{
	width: 100%;
}


ul.menu-left li a{
	width: 100%;
	border-radius: 1rem;
	display: table;
	font-weight: bold;
	margin: 0 0  0.5rem 0;
	text-align: left;
	color: #000000;
	font-size: 1.6rem;
	padding: 1.6rem 1rem;

	background: -moz-linear-gradient(top,#e3e3e3 0%,#ffffff);
	background: -webkit-gradient(linear, left top, left bottom,from(#e3e3e3),to(#ffffff));
	border: 0.1rem solid #ffffff;
}

ul.menu-left li a:hover{
	background: -moz-linear-gradient(bottom,#f7ff00 0%,#ffbf00);
	background: -webkit-gradient(linear, left bottom, left top,from(#f7ff00),to(#ffbf00));
	background: linear-gradient(to bottom, #f7ff00 0%, #ffbf00);
	border: 0.1rem solid #fff98c;

	text-decoration: none;
	transition: 0.3s;
}

ul.menu-left img{
	width: 4.5rem;
	vertical-align: middle;
	display: table-cell;
	text-align: left;
	margin-right: 1.5rem;
}

ul.menu-left a span.menu-style{
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	width: 100%;
}

ul.menu-left li .cat-l,
ul.menu-left li .cat-r,
ul.menu-left li .cat-n,
ul.menu-left li .cat-i{
	font-size: 1.3rem;
	font-weight: normal;
}

/*

ul.menu-left li.bgy{
	background-color: rgba(252, 243, 78,0.8);
}*/

ul.menu-left li.bgy a{
	background-color: rgba(255,255,255,0.2);
}

/**********************************************************/

.container-r{;

	width: auto;
	padding-top: 0rem;
	margin-left: 28rem;
	text-align: left;
	background-position: center;
	display: block;
}

/*
*********************************************************/

#header-line{
	width: 100%;
	background:#000000;
/*	background-image: url(../images/bg-section.jpg);
	box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 20px 2px inset;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 20px 2px inset;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 20px 2px inset;	
*/

}

#header {
	height: 13rem;
	margin: 0 auto;
	padding: 1rem 0;
	text-align: left;
	color: #ffffff;
}

#header img.head{
	width: 35rem;
}


table.header-wrap{
	width: 100%;
	font-size: 1.6rem;
	text-align: left;
	border-collapse: collapse;
	border-spacing: 0;
	color: #ffffff;
}


table.header-wrap td.h-r{
	padding: 0.5rem 0;
	width:30%;
	text-align: center;
	font-size: 1.8rem;
	vertical-align: bottom;
}



a.blackbt{
	margin: 0;
	background-color:#ffffff;
	padding: 1rem 1rem;
	color: #000000;
	border-radius: 0.5rem;
	display: block;
}



/*　
*********************************************************/

.container{
	width:980px;
	background-position: center;
	padding: 1rem;
	overflow: hidden;
background-color: #f0cd65;
background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
	margin:5rem auto;

	box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 5px 2px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 5px 2px;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 5px 2px;	
}


.main{
	width:900px;
	background:#ffffff;
	box-shadow:0px 0px 5px 0px #4c280d inset;
	margin:3rem auto;
	padding:2rem;
}

.text{
	margin: 0px auto;
	text-align: left;
	padding: 2rem;
}

p{padding-top:68px; }

img.icon{
	width: 80px;
	vertical-align: middle;
	margin: 1rem 1rem 1rem 0;
	border-radius: 1rem;
}



.area-w-wt{
	background-image: url(../images/bg-wood.jpg);
}
.area-w-bk{
	background-image: url(../images/body.jpg);
}

.area-c{
	background-image: url(../images/bg-section.jpg);
	border: 1rem double #eeeeee;
}


/*=======================================*/

img.bd{
	border: 10px double #ffffff;
}

.section-bg{
	padding: 10px 0;
}


section{
	width: 100%;

	display: inline-block;
	font-weight: bold;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
	border: none;
	text-decoration: none;
	margin: 0 auto;
	border-left: 2rem double #212121;  

}

section.bace-r{
	width: 100%;

	display: inline-block;
	font-weight: bold;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
	border: none;
	text-decoration: none;
	margin: 0 auto;
	color: #c61313;
	border-left: 2rem double #c61313;  

}

section.bace-bk{
	width: 100%;
	background: #000000;
	color: #ffffff;
	text-align: left;
	padding: 2rem 3rem;
	border-left: 2rem double #F5F5F5;  
}

section.bace-wt{
	width: 100%;
	text-align: left;
	padding: 2rem 3rem;
	border-left: 2rem double #212121;  
}

section p{
	line-height: 1.6;
	text-align: left;
	font-size:3rem;
	font-weight: bold;
	padding: 1.6rem;
}


/*=======================================*/


.balloon {
	width: 95%;
	position: relative;
	display: inline-block;
	background: #ffffff;
	padding: 1rem;
	border-radius: 1rem;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
	box-sizing: border-box;
}



.balloon:before{
content: '';
  position: absolute; /* 位置固定 */
  bottom: -40px; /* 線幅の2倍 */
  left: 50%;
  margin-left: -20px; /* 線幅だけずらす */
  border: 20px solid transparent; /* 線幅の設定 */
  border-top-color: #ffffff; /* 吹き出しの地と同じ色 */
  z-index: 1;
}



/* result
**********************************************************/


table.result{
	width: 100%;
	margin:1rem auto 4rem auto;
	text-align: center;
	font-weight: normal;
	border-spacing: 0.2rem;
	background-color: #212121;
	padding: 1rem;
	color: #000000;
}

table.result th {
	color:#ffffff;
	margin: 0px auto 0 auto;
	padding: 0rem 1rem;
	font-weight: normal;
	text-align: left;
	vertical-align: bottom;
	font-size: 1.4rem;
}

table.result td{
	padding: 1rem 1rem;
	text-align: center;
	color: #ffffff;
	font-size: 1.5rem;
}



table.result th.date{
	color: #ffffff; 
	font-weight: normal;
	text-align: left;
}

table.result td.date{
	padding: 1rem;
	color: #ffffff; 
	font-size: 1.8rem;
	font-weight: normal;
	text-align: left;
/*	border-left: 1rem double #FDF844;
*/	background-color: #494949;
	border-top: 0.2rem solid #545454; 
	border-left: 0.2rem solid #545454; 
}


table.result tr td.hit{
	color: #E11600;
	background-color:#f4ec7a; 
	font-weight: bold;
	font-size:2rem;
}

table.result tr td.money{
	color: #E11600;
	font-size: 1.8rem;
	text-align: right;
}

.history table.result tr.win td.member,
.history table.result td.member{
	width: 11rem;
	padding-right: 2rem;
	text-align: right;
	background-color: #212121;
}

.history table.result td{
	background-color:#f4ec7a; 

	color: #000000;
	font-weight: normal;
}

.history table.result th.date{
	font-size: 1.5rem;
}

.history table.result td.h-name{
	width: auto;
	font-size: 1.8rem;
	padding: 0rem 2rem;
	text-align: left;
	vertical-align: middle;
}


table.result td.member img.kido{
	width: 7rem;
	margin: 0rem 1rem 0 0;
	vertical-align: middle;
}

table.result td h2{ 
	position: relative; 
	margin: 2rem 0;
	padding: 2rem 2rem; 
	font-size: 2.5rem;
	border: 1px solid #FDF844;
	text-align: left;
}

table.result td h2:after{ 
	content: "城戸のレース分析"; 
	position: absolute; 
	top: -.6em; 
	left: 10px; 
	background: #212121; 
	font-size: 1.8rem; 
	color: #FDF844; 
	padding: 0 10px;
	font-weight: normal;
}


p.h2_fukidashi {
	margin-top: 6rem;
	position: relative;
	padding: 15px!important;
	background: #212121;
	color: #FCF76C;
	font-size: 22px!important;
}
p.h2_fukidashi:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #212121;
  width: 0;
  height: 0;
}

table.result td.area-text{
	background-color: #F5F5F5;
	color: #000000;
	padding: 0rem 2rem 4rem 2rem;
	font-weight: normal;
	font-size: 1.6rem;
	text-align: left;
}

table.result td.area-text p{
	padding-top: 3rem;
}


table.result td.area-text p.h2_fukidashi:first-child{
	margin-top: 2rem;
}


table.result td.area-golab{
	background-color: #F5F5F5;
	width: 100%;
	position: relative;
	background: url("../images/img-kido_front_wt.png") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */
	padding: 0;
}

@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -1518px 0; } /* 1518pxとは使用した背景画像の長さ */
}

/* result
**********************************************************/


/*　
*********************************************************/



/* member
**********************************************************/

div.member{
	width: 100%;
	background-color: #212121;
	border-radius: 0.5rem;
	color: #ffffff;
	padding: 2rem;
}



div.member img{
	width: 20%;
	border-radius: 0.5rem;
	margin: 0rem 2rem 2rem 0;
	float: left;
}

div.member .dtl{
	padding-left: 2rem;
	border-left: 1rem solid #FDF844;
}


/*======================================================*/

ul.log{
	background-color: #eeeeee;
	padding: 1rem 1rem;
	margin:0rem;
	border-radius: 0.5rem;
	overflow-y:scroll;
	height: 10rem;
	font-size: 1.4rem;
}

ul.log li{
	margin: 0.5rem 0;
}

span.cat-l{
	display: inline-block;
	min-width:7rem;
	padding: 0 0.5rem;
	text-align: center;
	background-color: #d82424;
	color: #ffffff;
	font-weight: bold;
	margin-right: 1rem;
}

span.cat-r{
	display: inline-block;
	min-width:7rem;
	text-align: center;
	background-color: #3c50c1;
	color: #ffffff;
	font-weight: bold;
	margin-right: 1rem;
}

span.cat-n{
	display: inline-block;
	min-width:7rem;
	text-align: center;
	background-color: #23a9fc;
	color: #ffffff;
	font-weight: bold;
	margin-right: 1rem;
}


span.cat-i{
	display: inline-block;
	min-width:7rem;
	text-align: center;
	background-color: #ff9f0f;
	color: #ffffff;
	font-weight: bold;
	margin-right: 1rem;
}

span.cat-i-out{
	display: inline-block;
	text-align: center;
	background-color: #ff9f0f;
	color: #ffffff;
	font-weight: bold;
	margin-right: 1rem;
	padding: 0.5rem 1rem;
}

/*======================================================*/

.information{
	width: 100%;
/*	padding: 2rem;
*/	margin: 0rem auto 1rem auto;
	background-color:#ffffff;
	position: relative;
}


.information img.info{
	width: 700px;
}


a img.info:hover{
	 opacity: 0.8;
}



/*========================================================*/



table.detail {
	width: 90%;
	margin: 30px auto;
	padding: 10px 30px;
	text-align: center;
	background-color: #172335;
	border-collapse: collapse;
	border-spacing: 0;
	color: #ffffff;
	text-shadow:none;
	background-color: #143A51;
	font-size:1.125rem;
}

table.detail tr{
	border:1px solid #455C6B;
}

table.detail th{
	border-right:2px solid #455C6B;
	background-color: #121212;
	text-align: right;
	padding: 30px 20px;
	vertical-align:top;
}

table.detail td{
	background-image: url(../images/bg-section.png);
	color:#11330C;
	padding: 30px 20px 90px 20px;
	vertical-align: middle;
	text-align: left;
	color: #ffffff;
}

table.detail td p{
	padding-top: 48px;
}

table.detail td p:first-child{
	padding-top: 0px;
	background-color: #0C2B3D;
 	font-size:1.5625rem;
 	color:#F7E96F;
 	font-weight: bold;
}


/*========================================================*/

ul.backnumber-list li {
	position: relative;
	font-size: 2rem;
	font-weight: bold;
	display: block;
}


ul.backnumber-list li .date{
	font-size: 1.3rem;
	color: #848484;
	margin-right: 2rem;
	font-weight: normal;
}

ul.backnumber-list li .board{
 display: inline-block;
    position: absolute;
    right: 0px;
    top: 5px;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 0;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 0.1em;
    color:#d12e2e;
    background: #f9f389;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
ul.backnumber-list li .board:before {
    position: absolute;
    content: '';
    top: 0;
    right: -7px;
    border: none;
    height: 38px;
    width: 7px;
    background: #f9f389;
    border-radius:  0 5px 5px 0 ;
}
ul.backnumber-list li .board:after {
    position: absolute;
    content: '';
    bottom: -7px;
    right: -5px;
    border: none;
    height: 7px;
    width: 5px;
    background: #d6ca28;
    border-radius:  0 0 5px 5px;
}



ul.backnumber-list li a {
	width: 100%;
	margin-bottom: 1rem;
	padding: 1rem;
	position: relative;
	z-index: 0;
	background-color: #333;
	color: #fff;
	display: block;
}
ul.backnumber-list li a:hover {
  background-color: #fff;
  text-decoration: none;
  border-color: #333;
  color: #59b1eb;
}

ul.backnumber-list li a::before,
ul.backnumber-list li a::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #333;
}
ul.backnumber-list li a::before {
  right: 0;
}
ul.backnumber-list li a::after {
  left: 0;
}
ul.backnumber-list li a:hover::before,
ul.backnumber-list li a:hover::after {
  width: 0;
  background-color: #333;
}


ul.backnumber-list li a::before,
ul.backnumber-list li a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

ul.backnumber-list li a,
ul.backnumber-list li a::before,
ul.backnumber-list li a::after {
  -webkit-transition: all .3s;
  transition: all .3s;
}


.analysis-log{
	padding: 2rem 0rem 2rem 4rem;
}

.analytics-p p{
	padding-top: 0;
}

.analytics-p hr{
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
    margin-top: 2rem;
 }

/*========================================================*/


.cell-box {
	width: 100%;
	display: table;
	font-weight: bold;
	margin: 0;
}

.cell-box a{
	display: table-cell;
}

.cell-box img.cell-image{
	width: 13rem;
	vertical-align: middle;
	display: table-cell;
	text-align: left;
	margin-right: 2rem;
}



.cell-box .cell-style{
	display: table-cell;
	vertical-align: top;
	text-align: left;
	width: 100%;
}

/*========================================================*/


/* form
*********************************************************/

.form {
	width:700px;	
	margin: 5rem auto;
	padding: 2rem 0;
	text-align: center;
	color: #000000;
}




label {
	margin: 0 auto;
	width: auto;
	font-weight: bold;
	text-align: left;
	cursor:pointer;
	color: #000000;
	padding: 1rem 2rem;
	display: inline-block;
}

label:hover {
	border: none;
}


input[type="text"]{
	width:70%;
	padding:1rem 1rem;
	font-size:1.8rem;
	color:#000000;
	font-weight:bold;
	text-align: center;
	background-color: #e0e0e0;
	border-radius: 0.5rem;
	border: none;
}


input[type="password"]{
	width:70%;
	padding:1rem 1rem;
	font-size:1.8rem;
	color:#000000;
	font-weight:bold;
	text-align: center;
	background-color: #e0e0e0;
	border-radius: 0.5rem;
	border: none;
}

input[type="text"]:focus,
input[type="password"]:focus{
	background-color: #fafccf;
}


input[type="submit"]{
	margin: 20px auto ;
	font-size:2rem;
	font-weight:bold;
	padding:1rem 3rem;
	cursor:pointer;
	background-color: #f9ea61;
	color: #000000;

	border: none;
	box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.55) 0px 5px 0px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;	
}

input[type="submit"]:hover{
	color: #ffffff;
	background: #000000;

}


select{
	padding:1.5rem;
	font-size:1.6rem;
	color:#000000;
	font-weight:bold;
	border-radius: 0.5rem;
	margin: 0 0 2rem 0;
	background-color: #ffffff;
	cursor: pointer;
}

option{
	cursor: pointer;
}

textarea{
	padding:1.5rem;
	font-size:1.6rem;
	width:90%;
	height: 20rem;
	font-family: 'Noto Sans JP';
}

button{
	margin: 2rem auto ;
	width:90%;
	font-size:2.5rem;
	font-weight:bold;
	color:#ffffff;
	padding:3rem 5rem;
	cursor:pointer;
	border-radius: 0.5rem;
	vertical-align: middle;
	display: block;
	background-image: linear-gradient(to top, #c10000 0%, #ff6417 100%);
	text-shadow: 1px 1px 1px #000000;
	border: none;
}

button:hover{
	color:#ffffff;
	background-image: linear-gradient(to top, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	text-decoration: none;

}

a.abt{
	color:#ffffff;
	margin: 2px auto ;
	width:80%;
	padding:2rem 3rem;
	cursor:pointer;
	vertical-align: middle;
	display: block;
	border-radius: 1rem;
	font-weight: bold;
	background-image: linear-gradient(to top, #45b703 0%, #DCF99F 100%);
	text-shadow: 1px 1px 1px #000000;
}

a.abt:hover{
	color:#ffffff;
	background-image: linear-gradient(to top, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	text-decoration: none;
}




a.nbt{
	margin: 2px auto ;
	width:95%;
	font-size:4rem;
	font-weight:bold;
	color:#ffffff;
	padding:3rem 5rem;
	cursor:pointer;
	border-radius: 3rem;
	vertical-align: middle;
	display: block;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #a2d93f), color-stop(0.50, #a1d54f), color-stop(0.50, #80c218), color-stop(1.00, #aef333));
	background: -webkit-linear-gradient(top, #a2d93f 0%, #a1d54f 50%, #80c218 50%, #aef333 100%);
	background: -moz-linear-gradient(top, #a2d93f 0%, #a1d54f 50%, #80c218 50%, #aef333 100%);
	background: -o-linear-gradient(top, #a2d93f 0%, #a1d54f 50%, #80c218 50%, #aef333 100%);
	background: -ms-linear-gradient(top, #a2d93f 0%, #a1d54f 50%, #80c218 50%, #aef333 100%);
	background: linear-gradient(to bottom, #a2d93f 0%, #a1d54f 50%, #80c218 50%, #aef333 100%);
}

a.nbt:hover{
	color:#ffffff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #70b6f2), color-stop(0.50, #54a3ee), color-stop(0.50, #3690f0), color-stop(1.00, #1a62db));
	background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);

}




a.graybt{
	margin: 2rem auto ;
	width:70%;
	font-size: 2.3rem;
	font-weight:bold;
	color:#ffffff;
	padding:3rem 5rem;
	cursor:pointer;
	border-radius: 0.5rem;
	vertical-align: middle;
	display: block;
	background: #000000;
	box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.55) 0px 5px 0px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;	
}

a.graybt:hover{
	background-color: #f9ea61;
	color: #000000;
	text-decoration: none;
}





a.yellowbt{
	margin: 2rem auto ;
	width: auto;
	font-weight:bold;
	padding:2rem 3rem;
	cursor:pointer;
	border-radius: 0.5rem;
	vertical-align: middle;
	text-decoration: none;
	color: #000000;
	background-color: #f9ea61;
	box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.55) 0px 5px 0px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;	
}

a.yellowbt:hover{
	color:#ffffff;
	background-color: #000000;
	text-decoration: none;
}




a.lookbt{
	margin: 1rem auto ;
	width: 90%;
	font-size: 2rem;
	font-weight:bold;
	padding:2rem 3rem;
	cursor:pointer;
	border-radius: 0.5rem;
	vertical-align: middle;
	text-decoration: none;
	color:#000000;
	background-color: #f9ea61;
	box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.55) 0px 5px 0px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.55) 0px 0px 0px 0px;	
}

a.lookbt:hover{
	color: #f9ea61;
	background-color: #212121;
	text-decoration: none;
}



/*===========================================*/


/*===========================================*/


.toggle-link{
	text-align: left;
	width: 100%;
	display: block;
}


.toggle-link:hover {
	text-decoration: none;
	transition: 0.3s ;
}

.toggle-style{
	display: none;
	padding: 2rem 0rem 2rem 4rem;
}




/*===========================================*/

h2.quiz{
	color: #000000;
	text-shadow: 0 0 5px white;
	padding: 0.3em 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #fceb7b, #fceb7b 3px,#f9f1b8 3px, #f9f1b8 7px);
	background: repeating-linear-gradient(-45deg, #fceb7b, #fceb7b 3px,#f9f1b8 3px, #f9f1b8 7px);
}

ul.answer{
	width: 100%;
}

ul.answer li{
	width: 49%;
	font-size: 1.8rem;
	display: inline-block;
}


ul.answer li a{
	padding: 4rem 1rem;
	margin: 1rem;
	display:block;

	background-color: #ffffff;
	border-radius: 0.5rem;
	border: 0.5rem solid #212121;
}

ul.answer li a:hover{
	background: -webkit-repeating-linear-gradient(-45deg, #fceb7b, #fceb7b 3px,#f9f1b8 3px, #f9f1b8 7px);
	background: repeating-linear-gradient(-45deg, #fceb7b, #fceb7b 3px,#f9f1b8 3px, #f9f1b8 7px);

	text-decoration: none;
	color: #000000;
	border: 0.5rem solid #e0522a;
}

ul.answer li .choices{
	background-color: #212121;
	color: #ffffff;;

	padding: 0.5rem 1.2rem;
	border-radius: 6rem;
	margin-right: 1rem;
	font-weight: bold;
}

ul.answer li a:hover .choices{
	background-color: #e0522a;
	color: #ffffff;
}


/*モーダルウィンドウ*/
.modal-content-q {
	width: 65%;
	height: auto;
	min-height: 65%;
	margin: 0 ;
	padding: 2rem;
	background: #F7F7F7;
	border-radius: 0.5rem;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.5 ) ;
}

.button-link {
	cursor: pointer;
}


/*===========================================*/

table.list{
	width:95%;
	margin: 2rem auto;
	font-size: 1.8rem;
	border-spacing: 0;
	background-color: rgba(255,255,255,1);
}


table.list th{
	padding: 2rem;
	width:34%;
	color: #ffffff;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	background-color: #000000;
}


table.list td{
	padding: 2rem;
	text-align: left;
}

/*===========================================*/


.footer {
	color:#aaaaaa;
	width: 100%;
	font-size:1.5rem;
	margin: 0 auto 0;
	padding: 1rem;
	text-align: center;
}

.footer a{
	color: #ffffff;
}

.footer p {
	padding-top: 1rem;
}


.footer ul.link {
	text-align:center;
}
	
.footer ul.link  li {
	list-style: none;
	display:inline-block;

	text-align: center;
	padding: 1.5rem 1.5rem;
	box-sizing :border-box;
}

/*=========================================*/


#PageTopBtn {
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 13px;
	font-weight: bold;
	z-index: 1;
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.4));
}

#PageTopBtn a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 50%;
	outline: none;
	color: #000000;
	background: -moz-linear-gradient(top,#e3e3e3 0%,#ffffff);
	background: -webkit-gradient(linear, left top, left bottom,from(#e3e3e3),to(#ffffff));
	width: 100px;
	height: 100px;
	padding: 28px 0;

}
#PageTopBtn a:hover {
	text-decoration: none;
	color: #0e0f11;
	background: #efe970;

}




/*=36連テ－ブル========================================*/

table.ren{
	width:100%;
	border-collapse: collapse;
	border:1px solid #99ffff;
	margin: 80px auto;
	font-weight: normal;
	table-layout: fixed;
}

table.ren th{
	width:20%;
	font-size: 30px;
	background: #99ffff;
	text-align:center;
	border:1px solid #99ffff;
}

table.ren td{
	width:20%;
	font-size: 20px;
	background: #fff;
	text-align:center;
	border:1px solid #99ffff;
}

table.ren td.race{
	width:20%;
	font-size: 20px;
	background: #fff;
	text-align:center;
	border:none;
}

/*=18連タブ========================================
#first_tab01{	background: #99ffff;}

.tab1_1{	background: #99ffff;}


.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}
.cp_tab {
	margin: 1em auto;
}
.cp_tab > input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
			appearance: none;
	display: none;
}
.cp_tab .cp_tabpanel {
	display: none;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6) 
{
	display: block;
}
.cp_tab > label {
	position: relative;
	display: inline-block;
	padding: 15px;
	cursor: pointer;
	border: 1px solid transparent;
	border-bottom: 0;
}
.cp_tab > label:hover,
.cp_tab > input:focus + label {
	color: #0066cc;
}
.cp_tab> input:checked + label {
	margin-bottom: -1px;
	border-color: #5e5e67;
	border-bottom: 1px solid #99ffff;/*背景色と同じ
	border-radius: 6px 6px 0 0;
	background: #99ffff;
}

.cp_tab > input:checked + label {
	margin-bottom: -1px;
	border-color: #5e5e67;
	border-bottom: 1px solid #fff;/*背景色と同じ
	border-radius: 6px 6px 0 0;
	background: #ff0;
}

.cp_tab > input:checked + label {
	margin-bottom: -1px;
	border-color: #5e5e67;
	border-bottom: 1px solid #fff;/*背景色と同じ
	border-radius: 6px 6px 0 0;
	background: #fff;
}


.cp_tab .cp_tabpanel {
	padding: 0.5em 1em;
	border-top: 1px solid #5e5e67;
}
@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
		font-size: 0.8em;
	}
	.cp_tab label {
		padding: 0.5em;
	}
}


	 /* ▼タブ機能の掲載領域の装飾(※必須ではありません) 
	 .tabbox { margin: 20px; padding: 0; background-color: #fff; }

	 /* ▼タブ機能を制御するラジオボタン(非表示にする) 
	 .tabbox input { display: none; }

	 /* ▼タブ(共通装飾＋非選択状態の装飾) 
	 .tab {
		display: inline-block;
		border-width: 1px 1px 0px 1px;
		border-style: solid;
		border-color: #666;
		border-radius: 0.75em 0.75em 0px 0px;
		padding: 0.75em 1em;
		color: black;
		background-color: #e0e0e0;
		font-weight: bold;
	 }

	 /* ▼タブにマウスポインタが載った際の装飾 
	 .tab:hover {
		background-color: #ffcccc;
		color: red;
		cursor: pointer;
	 }

	 /* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) 
	 input:checked + .tab {
		color:#f9ea61;
		background-color: #484d54;
		position: relative;
		z-index: 10;
	 }

	 /* ▼タブの中身(共通装飾＋非選択状態の装飾) 
	 .tabcontent {
		display: none;
		border: 1px solid #666;
		margin-top: -1px;
		padding: 10px;
		position: relative;
		z-index: 0;
		background-color: #666;
	 }
	 /* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する 
	 #tabcheck1:checked ~ #tabcontent1 { display: block; }
	 #tabcheck2:checked ~ #tabcontent2 { display: block; }
	 #tabcheck3:checked ~ #tabcontent3 { display: block; }
	 
	 #tabcheck4:checked ~ #tabcontent4 { display: block; }
	 #tabcheck5:checked ~ #tabcontent5 { display: block; }
	 #tabcheck6:checked ~ #tabcontent6 { display: block; }
	 

--*/


/*----------------------36連テーブル----------------------*/


table.result-36hit{
	width: 100%;
	text-align: center;
	font-weight: 500;
	font-size:18px;
	border-spacing: 0.2rem;
	padding: 0 1rem;
	border-collapse: collapse;
	background-color: #FFF;
	letter-spacing:1px;
	border:2px #5e5e67;
	border-style:solid;
	margin:1rem 0;
}


table.result-36hit td{
	border:2px #aaaaaa;
	border-style:dotted;
	border-collapse: collapse;
	padding:1rem;
}

table.result-36hit tr.wide{
	border:2px #5e5e67;
	border-style:solid dotted dotted;
	border-collapse: collapse;
}


table.result-36hit th{
	font-weight:bold;
	font-size:18px;
	color: #000;
	background-color: #5e5e67;
	padding:0;
	text-align: center;
}



/*------------td-----------*/


table.result-36hit td.race{
	font-weight:bold;
	font-size:20px;
	color: #fff;
	background-color: #304075;
	text-align: left;
}

table.result-36hit td.race_ue{
	width:.100%;
	font-weight:bold;
	font-size:20px;
	color: #fff;
	background-color: #304075;
	text-align:left;
	padding:0 1rem;
	border: none;
	border-bottom: 2px solid #5e5e67;
}


table.result-36hit td.type{
	width:15%;
	text-align: center;
	color: #000;
	background-color: #fff;
}

table.result-36hit td.buy{
	width:35%;
	text-align: center;
	color: #000;
	background-color: #fff;
	letter-spacing:0px;
}


table.result-36hit td.number{
	width:20%;
	text-align: center;
	padding:0;
	letter-spacing:2px;
}


table.result-36hit td.money{
	width:30%;
	text-align: right;
	padding:2px 10px 2px 0px;
}



table.result-36hit td.non{
	background-color: #484d54;
	border: 2px #333333;
	border-style: dotted;
	border-collapse: collapse;
}


table.result-36hit td.hit{
	background-color: #fffb8e;
	font-weight: bold;
	color:red;
}


table.result-36hit tr.hit{
	background-color: #fffb8e;
	font-weight: bold;
	color:red;
}


table.result-36hit td.buy_yoso{
	width:70%;
	padding:5px;
}

table.result-36hit td.type_yoso{
	width:30%;
	padding:5px;	
}







/*--アコーディオン部分--*/

.result36-title{
	padding:5px 3rem;
	margin:1rem 0 0 0 ;
	background: #eee;
	color: #000;
	font-size:18px;
	font-weight:bold;
	border:1px solid #b7b7b7;
	border-radius:1rem;
}



.result36-title:hover{
	background: #14ad74;
	color: #fff;
	
}

	

.result36-box{
	background: #ffffff;
	padding: 10px;
}






/*--タブ部分--*/


.tab {
	color: White;
	background:#999;
	/*--font-weight: bold;--*/
	font-size:22px;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	white-space: nowrap;
	text-align: center;
	padding:0.5rem 2rem;
	margin:0 2px 0 0;
	order: -1;
	position: relative;
	z-index: 1;
	cursor: pointer;
	border-radius: 5px 5px 0 0;
	/*flex: 1;*/

}


.tab:hover {
	color: White;
	background: #14ad74;
	/*--font-weight: bold;--*/
	font-size:22px;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	white-space: nowrap;
	text-align: center;
	padding:0.5rem 2rem;
	margin:0 2px 0 0;
	order: -1;
	position: relative;
	z-index: 1;
	cursor: pointer;
	border-radius: 5px 5px 0 0;
	/*flex: 1;*/
}


.tab-group{
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	width:90%;
}


.panel-group{
	width:90%;
	margin:0 auto 0;
	padding:2rem 0;
	height:auto;
	border-top:none;
	background:#5e5e67;
}

.panel{
	display:none;
}

.tab.is-active{
	background:#5e5e67;
	color:#fceb7b;
	font-weight: bold;
	transition: all 0.2s ease-out;
}


.panel.is-show{
	display:block;
	width:90%;
	margin:0 auto 0;
	height:auto;
	border-top:none;
	background:#5e5e67;
}




.hit36_fs{font-size:4rem;}


a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}


#re_tablink {
	margin: 10px auto;
	padding: 5px;
	width: 300px;
	text-align: center;
	background-color: #333333;
	border-radius: 25px;
	cursor: pointer;
	font-weight:normal;
	font-size:18px;
}


#re_tablink a {
	text-decoration: none;
	color:#ffffff;
	
}


#re_tablink:hover{
	background:#14ad74;
	color:#ffffff;
}


#re_tablink:active {
	position: relative;
	top: 2px;
	left: 2px;
}



.caution{
	background: #ffc0c0;
	font-size: 14px;
	color: #d60f0f;
	border-radius: 0.5rem;
	padding:1rem;
	margin:1rem 0;
	line-height: normal;
	}



/*=========================================*/