@CHARSET "UTF-8" ;

/* cssのコメントアウトに「//」は使用不可！ */

html{

	scroll-behavior: smooth ;
	scroll-padding-top: 100px;/*スクロール先のずらし*/
	background-color: #FFFFFF ;
	color: #111111 ;

}

div.contents{

	max-width: 1000px ; /* 幅は最大XXXpxまでしか広げない */
	margin: 0 auto ; /* 左右中央(widthの指定が必須) */

}


div.footer{

	text-align: center ;/* 対象はテキストであり要素ではないのでmargin: 0 autoは使用不可 */

}


/*必須*/
table.menu{

	border: 0px ;
	width: 100% ;
	border-collapse: separate ;
	border-spacing: 5px ;

}

table.menu th, table.menu td{

	border: 0px black solid ;

}





h1{
	display: inline ; /* 改行させない ;*/
	font-size: 150% ;
	font-weight: bold ;
}




table.main{

	border: 3px black solid ;
	width: 100% ;
	/*min-width: 1000px ;*/
	border-collapse: collapse ;

}



table.main th, table.main td{

	border: 1px black solid ;
	padding: 5px ;

}



img{

	max-width: 100% ;/* サイズ可変化 */

}







table{
	border: 3px green solid ;
}





tr:nth-child(odd).odd{
	background: #F5F5F5 ;
}




























.yellow_marker{
	background: linear-gradient(transparent 0%, #FFFF00 0%) ;
}

.pink_marker{
	background: linear-gradient(transparent 0%, #FFB6C1 0%) ;
}

.super_pink_marker{
	background: linear-gradient(transparent 0%, #FF00FF 0%) ;
}

.red_font_yellow_marker{
	color: #FF0000 ;
	font-weight: bold ;
	background: linear-gradient(transparent 0%, #FFFF00 0%) ;
}

.yellow_marker_flash{
	animation: flash 0.5s linear infinite ;
	background: linear-gradient(transparent 0%, #FFFF00 0%) ;
}

@keyframes flash{
	0%,100%{opacity:1;}
	50%{opacity:0;}
}

.line{
	border-bottom: 1px solid #A9A9A9 ;
	line-height: 180% ;
}

.box select{
	border: 1px solid ;
	font-size: 15px ;
}

.youtube{
	aspect-ratio: 16/9 ;
}


.youtube iframe{
	width: 100% ;
	height: 100% ;
}



@keyframes highlight_green_blinking{
	0% {background-color:#00FF00;}
	50% {background-color:transparent;}
	100% {background-color:#00FF00;}
}

@keyframes highlight_green_fedeout{
	0%{background-color:#00FF00;}
	100%{background-color:transparent;}
}

@keyframes highlight_pink_fedeout{
	0%{background-color:#FF00FF;}
	100%{background-color:transparent;}
}

/*
<TR>のみ
全て id='ref_***' にすれば発火点(:target)が不要にできる氣がするが後の課題。
*/

tr[id^="t_"]:target{
/*
	animation: highlight_green 30s ease-in-out ;
*/
	animation: highlight_green_blinking 1.0s step-end infinite ;
}

tr[id^="ref_"]{
/*
	animation: highlight_green 30s ease-in-out ;
*/
	animation: highlight_green_blinking 1.0s step-end infinite ;
}



.typhoon_anim a{
	margin: 0 auto ;
	font-weight: normal ;
	background: #B22222 ;
	color: #fff ;
	display: inline-block ;
	text-align: center ;
	width: 50% ;
	padding: 10px 5px ;
	border-radius: 24px ;
	position: relative ;
}

.typhoon_anim a::before{
	content: "" ;
	left: 10px ;
	width: 30px ;
	height: 30px ;
	background-image: url(img/typhoon.png) ;
	background-repeat: no-repeat ;
	background-size: 30px ;
	position: absolute ;
	top: 50% ;
	margin-top: -15px ;
	animation-name: typhoon_anim ;
	animation-duration: 1s ;
	animation-delay: 0s ;
	animation-timing-function: ease ;
	animation-iteration-count: infinite ;
	animation-direction: normal ;
}

.typhoon_anim a::after{
	content: "" ;
	right: 10px ;
	width: 30px ;
	height: 30px ;
	background-image: url(img/typhoon.png) ;
	background-repeat: no-repeat ;
	background-size: 30px ;
	position: absolute ;
	top: 50% ;
	margin-top: -15px ;
	animation-name: typhoon_anim ;
	animation-duration: 1s ;
	animation-delay: 0s ;
	animation-timing-function: ease ;
	animation-iteration-count: infinite ;
	animation-direction: normal ;
}

@keyframes typhoon_anim{
	0%{-webkit-transform:rotate(0);transform:rotate(0)}
	100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}


.over8_anim a{
	margin: 0 auto ;
	font-weight: normal ;
	background: #009900 ;
	color: #fff ;
	display: inline-block ;
	text-align: center ;
	width: 50% ;
	padding: 10px 5px ;
	border-radius: 24px ;
	position: relative ;
}

.over8_anim a::before{
	content: "" ;
	left: 10px ;
	width: 30px ;
	height: 30px ;
	background-image: url(img/over8.png) ;
	background-repeat: no-repeat ;
	background-size: 30px ;
	position: absolute ;
	top: 50% ;
	margin-top: -15px ;
	animation-name: typhoon_anim ;
	animation-duration: 1s ;
	animation-delay: 0s ;
	animation-timing-function: ease ;
	animation-iteration-count: infinite ;
	animation-direction: reverse ;
}

.over8_anim a::after{
	content: "" ;
	right: 10px ;
	width: 30px ;
	height: 30px ;
	background-image: url(img/over8.png) ;
	background-repeat: no-repeat ;
	background-size: 30px ;
	position: absolute ;
	top: 50% ;
	margin-top: -15px ;
	animation-name: typhoon_anim ;
	animation-duration: 1s ;
	animation-delay: 0s ;
	animation-timing-function: ease ;
	animation-iteration-count: infinite ;
	animation-direction: reverse ;
}

@keyframes over8_anim{
	0%{-webkit-transform:rotate(0);transform:rotate(0)}
	100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}


.no_report_anim a{
	margin: 0 auto ;
	font-weight: normal ;
	background: #5E5E5E ;
	color: #fff ;
	display: inline-block ;
	text-align: center ;
	width: 50% ;
	padding: 10px 5px ;
	border-radius: 24px ;
	position: relative ;
}

.no_report_anim a::before{
	content: "" ;
	left: 10px ;
	width: 30px ;
	height: 30px ;
	background-image: url(img/no_report.png) ;
	background-repeat: no-repeat ;
	background-size: 30px ;
	position: absolute ;
	top: 50% ;
	margin-top: -15px ;
	animation-name: no_report_anim ;
	animation-duration: 1s ;
	animation-delay: 0s ;
	animation-timing-function: ease ;
	animation-iteration-count: infinite ;
	animation-direction: reverse ;
}

.no_report_anim a::after{
	content: "" ;
	right: 10px ;
	width: 30px ;
	height: 30px ;
	background-image: url(img/no_report.png) ;
	background-repeat: no-repeat ;
	background-size: 30px ;
	position: absolute ;
	top: 50% ;
	margin-top: -15px ;
	animation-name: no_report_anim ;
	animation-duration: 1s ;
	animation-delay: 0s ;
	animation-timing-function: ease ;
	animation-iteration-count: infinite ;
	animation-direction: reverse ;
}

@keyframes no_report_anim{
	0%{-webkit-transform:rotate(0);transform:rotate(0)}
	100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}





.hidden_box{
	margin: 0 0 ;
	padding: 0 ;
	width: 1000 ;
	margin: 0px auto ;
	border: 0px dotted ;
}

.hidden_box label{
	padding: 0 0 5 0 ;
	font-weight: normal ;
	color: #0000FF ;
	text-decoration: underline ;
	border: solid 0px black ;
	cursor :pointer ;
	text-align: center ;
	display: block ;
	width: 200 ;
}

.hidden_box label:hover{
	background: #FFFFFF ;
}

.hidden_box input{
	display: none ;
}

.hidden_box .hidden_show{
	height: 0 ;
	padding: 0 ;
	background-color: #FFFFFF ;
	overflow: hidden ;
	opacity: 0 ;
	transition: 1.0s ;
	text-align: center ;
}

.hidden_box input:checked ~ .hidden_show{
	padding: 0 0 0 0 ;
	height: auto ;
	opacity: 1 ;
}




.tooltip, .tooltip_below{
	display: none ;
	background-color: #FF1493 ;
	color: #FFFFFF ;
	text-align: left ;
	padding: 10px ;
	margin-top: 20px ;
	border-radius: 10px ;
	position: absolute ;
	/* z-index: 1; */
}

.tooltip{
	margin-left: 20px ;
}

.tooltip_below{
	margin-left: 0px ;
}

.dropdown:hover{
	cursor: pointer ;
}

.dropdown:hover .tooltip,
.dropdown:hover .tooltip_below{
	display: block ;
}