:root{
  --color-def-text: #ffffff;
	--color-result-batting-text: #ffffff;
	--color-stroke-text: #000000;
	--color-title-text: #f0f0f0;
	--color-table-score-header-text: #e0e0e0;
	--color-table-score-sum-text: #ffff00;
	--color-point-win-text: #ffc000;
	--color-disable-text: #808080;
	--color-menu-text: #e0e0e0;
	--color-note-text: #ffffff;
	--color-message-top-text: #800000;
	--color-wisp-text: #808080;
	--color-def-text-shadow: #801000;
	--color-title-entry-text: #ffff00;
	--color-def-background: rgba(0, 0, 0, 0.88);
	--color-header-background: #d0d0ff;
	--color-menu-background: rgba(0, 40, 100, 0.9);
	--color-select-background: rgba(0, 50, 100, 1);
	--color-scrollbar-background: #202020;
	--color-scrollbar-thumb: #c06000;
	--color-hover-button-background: #c06000;
	--color-hover-channel-background: #802000;
	--color-close-button-background: #d04000;

	--color-inning-odd-background: rgba(40, 10, 10, 0.9);
	--color-inning-even-background: rgba(10, 10, 40, 0.9);

	--color-result-batting-sansin-background: #606060;
	--color-result-batting-bonda-background: #909090;
	--color-result-batting-gisei-background: #00a0ff;
	--color-result-batting-sisikyuu-background: #00c000;
	--color-result-batting-anda-background: #ff40ff;

	--color-message-top-background: #ffa0a0;
	--color-point-background: #ffb000;
	--color-disable-background: #000000;
	--color-program-background: #505050;
	--color-selected-background: #0040a0;
	--color-caution-background: #ff4040;
	--color-def-option-background: #202060;
	--color-over-background: rgba(10, 00, 0, 0.9);
	--color-note-background: rgba(0, 20, 80, 0.9);
  --color-error-background: rgba(80, 20, 00, 0.9);
  --color-wait-background: rgba(20, 80, 20, 0.9);

  
	--color-input-background: rgba(200, 200, 200, 0.8);
  --color-def-border: #a0a0a0;
	--color-hover-border: #c06000;
	--color-wisp-border: #808080;

	--set-border: 1px solid #a0a0a0;
	--size-border-radius: 0.3em;

	--height-def-button: 3rem;
	--width-scrollbar: calc(100vw - 100%);
	--size-def-font: 18px;
	--size-title-font: min(4vw, 4vh, 1.6em);
	--size-wisp-font: calc(var(--size-def-font) * 2 / 3);
	--size-em-font: 1.5rem;
	--size-def-gap: min(1.5vw, 1.5vh, 0.6rem);
	--width-wide-full: calc(100% - 2 * var(--size-def-gap));

	--color-list-download-background: rgba(200, 100, 100, 0.85);
	--style-def-text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
	-1px 1px 0 #FFF, 1px -1px 0 #FFF,
	0px 1px 0 #FFF, 1px 0px 0 #FFF,
	0px -1px 0 #FFF, -1px 0px 0 #FFF;

}

html *{
	/*
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	*/
	color: var(--color-def-text);
	box-sizing: border-box;
  font-family: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	/*
	scrollbar-width: min(0.5vw, 0.5vh);
	scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-background);
	*/
	font-size: var(--size-def-font);
	user-select: none;
	text-shadow: 1px 1px 2px var(--color-stroke-text);
}

body{
	width: 100%;
	min-height: 100vh;

	overflow-x: hidden;
	background-image: url("./image/background.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: var(--color-def-background);
	margin: 0;

}

html{
  background-color: var(--color-def-background);
	scroll-behavior: smooth;
}

button{
  border-radius: 0.3em;
  font-size: var(--size-def-font);
	font-family: initial;
	padding: 0.3em  1em;
}

option{
	color: var(--color-def-text);
	background-color: var(--color-select-background);
}

.iframe_content{
	width: 100%;
	border: none;
}

.iframe_content *{
	background-color: var(--color-def-background);
}

#iframe_kiroku{
	width: 100%;
	height: 100dvh;
}

.button_effective{
  border-color: #ffff00;
}

.button_close{
	background-color: var(--color-close-button-background);
}

.matched_table_league{
	text-decoration:underline;
}

#div_header{
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 2.5em;
	max-height: 2.5em;
	min-height: 2.5em;
	background-color: var(--color-menu-background);
}

#div_title{
	/*
	position: fixed;
	top: 0.5em;
	left: 0.5em;
	*/
	margin-top: auto;
	color: var(--color-title-text);
	font-size: var(--size-title-font);
	font-family: serif;
}

#select_menu{
	/*
	position: fixed;
	top: var(--size-def-gap);
	left: 35vw;
	*/
	background-color: rgba(170, 170, 170, 0.5);
	width: 60vw;
	max-width: 60vw;
	min-width: 60vw;
	border-radius: 0.2em;
	border: none;
	text-align: center;

}

#div_content{
	position: fixed;
	top: calc(2.5em + var(--size-def-gap));
	left: var(--size-def-gap);
	height: calc(100% - 2.5em - var(--size-def-gap)*2);
	width: var(--width-wide-full);
	background-color: var(--color-def-background);
	border-radius: var(--size-border-radius);

	overflow-y: auto;
	scroll-behavior: smooth;
}

#div_content>div {
	animation: fade_in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


#div_info_team,
#div_record_team{
	padding: var(--size-def-gap);
	text-align: center;
}


#div_news_title_header,
#div_info_team_title{
	font-size: var(--size-em-font);
	text-align: center;
}

#div_top{
	text-align: center;
}

#div_banner{
	width: 100%;
  height: calc(40dvh - 5.5em - var(--size-def-gap)*3);
	overflow-y: hidden;

}

#div_banner>img{
	height: calc(40dvh - 5.5em - var(--size-def-gap)*3);
  max-height: calc(40dvh - 5.5em - var(--size-def-gap)*3);
  object-fit: scale-down;
  cursor: pointer;
  object-position: 50% top;
}

#div_news{
	position: fixed;
	left: var(--size-def-gap);
	bottom: var(--size-def-gap);
  width: calc(100% - var(--size-def-gap)*2);
  height: calc(60dvh - var(--size-def-gap));
  overflow-y: scroll;
	border: solid 1px var(--color-def-border);
	border-radius: var(--size-border-radius);
}

#table_news,
#tbody_news{
	width: 100%;
}

#tbody_news td{
	border-top: var(--color-def-border) solid 1px;
	border-bottom: var(--color-def-border) solid 1px;
	text-align: center;
}

.pick_up_news{
	animation-name: animation-pick-up-news;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#tbody_news>tr>td:nth-of-type(1){
	width: 6em;
}

.detail_news{
	text-align: left !important;
}


#table_info_team,
#table_record_fyear{
	width: 100%;
}

#tbody_info_team,
#tbody_record_fyear{
	width: 100%;
}

#tbody_info_team td,
#tbody_record_fyear td{
	border-bottom: var(--color-def-border) solid 1px;
	padding-top: 0.5em;
	padding-bottom: 0.6em;
}

#tbody_info_team>tr>td:nth-of-type(1),
#tbody_record_fyear>tr>td:nth-of-type(1){
	width: 6em;
	min-width: 6em;
	max-width: 6em;
	vertical-align: top;
}

#tbody_info_team>tr>td:nth-of-type(2),
#tbody_record_fyear>tr>td:nth-of-type(2){
	text-align: left;
}

#td_img_uniform{
	text-align: center !important;
}

#td_img_uniform>img{
	width: min(600px, 50vw);
}


#div_rule{
	padding: var(--size-def-gap);
	text-align: center;
}

#div_record_team{
	width: 100%;
	padding: 1em;
}

#div_anchor_record_team{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	margin-top: 0.3em;
	margin-bottom: 1em;
}

#div_record_batting,
#div_record_pitching{
	overflow-x: auto;
}

#table_record_batting,
#table_record_pitching{
	padding-bottom: 1em;
}

#tbody_record_batting>tr>td,
#tbody_record_pitching>tr>td{
	border-bottom: var(--color-def-border) solid 1px;
}

#tbody_record_batting tr:nth-of-type(1),
#tbody_record_pitching tr:nth-of-type(1){
  position: sticky;
	top: 0;
	background-color: rgb(0, 20, 80);
}

#tbody_record_batting tr:nth-of-type(2) td,
#tbody_record_pitching tr:nth-of-type(2) td{
  border-top: #ff8000 double 3px;
	border-bottom: #ff8000 double 3px;
}

#tbody_record_batting tr td:nth-of-type(1),
#tbody_record_pitching tr td:nth-of-type(1){
  position: sticky;
	left: 0;
	background-color: rgb(0, 20, 80);
}

#tbody_record_batting tr td:nth-of-type(1),
#tbody_record_pitching tr td:nth-of-type(1){
	width: 4em;
	min-width: 4em;
	max-width: 4em;
}

#tbody_record_batting tr td:nth-of-type(2),
#tbody_record_batting tr td:nth-of-type(3),
#tbody_record_batting tr td:nth-of-type(n+8),
#tbody_record_pitching tr td:nth-of-type(n+2):nth-of-type(-n+5),
#tbody_record_pitching tr td:nth-of-type(n+12){
	width: 3em;
	min-width: 3em;
	max-width: 3em;
}

#tbody_record_batting>tr>td:nth-of-type(n+4):nth-of-type(-n+7),
#tbody_record_pitching tr td:nth-of-type(n+6):nth-of-type(-n+11){
	width: 4em;
	min-width: 4em;
	max-width: 4em;
	background-color: rgba(100, 0, 0, 0.8);
}

#div_anchor_record_team>a{
	font-weight: bold;
	border-bottom: var(--color-def-border) solid 1px;
}

#td_intro_team{
	width: 100%;
	text-align: left !important;
}

#div_album{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	margin-top: 1em;
	margin-bottom: 1em;
}

@media screen and (max-width: 540px) {
	#div_album img{
		width: 92%;
		height: auto;
		max-height: 100%;
		object-fit: scale-down;
		cursor: pointer;
		object-position: 50% top;
		margin: 10px;
		animation: fade-in 2s ease-out forwards;
		border-radius: 5px;
	}
}

@media screen and (min-width: 541px) {
	#div_album img{
		width: 400px;
		height: auto;
		max-height: 100%;
		object-fit: scale-down;
		cursor: pointer;
		object-position: 50% top;
		margin: 10px;
		animation: fade-in 2s ease-out forwards;
		border-radius: 5px;
	}
}

#div_comment_20anv{
	padding: 1rem;
}

#div_inquiry{
	height: 100%;
}

#div_inquiry > iframe{
	width: 100%;
	height: 100%;
	border: none;
}

#div_note, #div_maintenance{
	position: fixed;
	left: var(--size-def-gap);
	top: var(--size-def-gap);
	width: var(--width-wide-full);
	height: calc(100% - var(--size-def-gap) * 2);
	background-color: var(--color-note-background);
	border-radius: 10px;
	border: solid 1px;
	border-color: var(--color-def-border);
	color: var(--color-note-text);

	display: flex;
	justify-content: center;
	align-items: center;
	
	padding: var(--size-def-gap);
}

#div_error{
	position: fixed;
	left: var(--size-def-gap);
	top: var(--size-def-gap);
	width: var(--width-wide-full);
	height: calc(100% - var(--size-def-gap) * 2);
	background-color: var(--color-error-background);
	border-radius: 10px;
	border: solid 1px;
	border-color: var(--color-def-border);
	color: var(--color-note-text);

	display: flex;
	justify-content: center;
	align-items: center;
	
	padding: var(--size-def-gap);
}

#div_wait{
	position: fixed;
	left: var(--size-def-gap);
	top: var(--size-def-gap);
	width: var(--width-wide-full);
	height: calc(100% - var(--size-def-gap) * 2);
	background-color: var(--color-wait-background);
	border-radius: 10px;
	border: solid 1px;
	border-color: var(--color-def-border);
	color: var(--color-note-text);

	display: flex;
	justify-content: center;
	align-items: center;
	
	padding: var(--size-def-gap);
}

#div_text_wait{
	color: var(--color-note-text);
	-webkit-animation: text-blur-out 1.2s cubic-bezier(0.895, 0.030, 0.685, 0.220) infinite alternate both;
	animation: text-blur-out 1.2s cubic-bezier(0.895, 0.030, 0.685, 0.220) infinite alternate both;
}

#div_warn,
#div_save,
#div_load{
	position: fixed;
	left: var(--size-def-gap);
	top: var(--size-def-gap);
	width: var(--width-wide-full);
	height: calc(100% - var(--size-def-gap) * 2);
	background-color: var(--color-note-background);
	border-radius: 10px;
	border: solid 1px;
	border-color: var(--color-def-border);
	color: var(--color-note-text);
	text-align: center;
	
	padding: var(--size-def-gap);
}

#div_warn>div{
	position: relative;
	top: 30vh;
	text-align: center;
	width: 100%;
	color: var(--color-note-text);
}

#div_warn>button{
	position: relative;
	top: 50vh;
	text-align: center;
	width: 5em;
	padding: 0.5em;
	margin: 2em;
}

#VER{
	position: fixed;
	right: 65vw;
	bottom: 0;

	background: none;
	border: none;
	font-size: 10px;
}

#COPYRIGHT{
	position: fixed;
  left: 60vw;
	bottom: 0;

	background: none;
	border: none;
	font-size: 10px;
}


@keyframes animation-pick-up-news {
  0% {
		color: var(--color-def-text);
  }
  100% {
		color: #ffdf00;
  }
}

@keyframes fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



@-webkit-keyframes scale-in-center{
  0%{
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100%{
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center{
  0%{
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100%{
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}



@-webkit-keyframes rotate-in-center{
  0%{
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }
  100%{
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-center{
  0%{
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }
  100%{
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}



@-webkit-keyframes text-blur-out{
	0%{
		-webkit-filter: blur(0.01);
		filter: blur(0.01);
	}
	100%{
		-webkit-filter: blur(12px) opacity(0%);
		filter: blur(12px) opacity(0%);
	}
}
@keyframes text-blur-out{
	0%{
		-webkit-filter: blur(0.01);
		filter: blur(0.01);
	}
	100% {
		-webkit-filter: blur(12px) opacity(0%);
		filter: blur(12px) opacity(0%);
	}
}