@charset "utf-8";
/* CSS Document */

@import url('reset.css');
@import url('fontello.css?v2');

:root {
	--bg-color: #222;
}

html,body {
	margin: 0;
	padding: 0;
	width: 100%;
	background: var(--bg-color);
	color: #fff;
}
html {
	font-size: 62.5%; /*初期値16pxの62.5%でルートが10px*/
}
body {
	font-size: 200%;
	font-size: 2rem;
	line-height: 1;
}

html, css{
  touch-action: pan;
}

@font-face {
	font-family: YuGothicM;
	src: local("Yu Gothic Medium"),
	     local("Yu Gothic");
	font-weight: 500;
}

body,div,dl,ul,h1,h2,h3,h4,h5,h6,pre,fieldset,input,textarea,blockquote,table { 
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 1.6rem;
	line-height: 1;
}

a {	text-decoration: none; }
a:hover {	text-decoration: underline; }

.textSS { font-size:1.2rem; }
.textS { font-size:1.4rem; }
.textN { font-size:1.6rem; }
.textL { font-size:1.9rem; }
.textLL { font-size:2.6rem; }
.textXL { font-size:3.2rem; }

.left { text-align: left !important; }
.center { text-align: center !important;}
.right { text-align: right !important; }

.red { color: #D00 !important; }
.blue { color: #00D !important; }
.orange { color: #D30 !important; }

.margin_s { margin-top: 0.25em !important; }
.margin_n { margin-top: 0.5em !important; }
.margin_l { margin-top: 1em !important; }

.clearfix:after {
	content: "";
	display: block;
	clear: both; 
	height: 0;
	visibility: hidden;
}
.clearfix + *{ clear: both; }

.scrollUp {
  opacity: 0;
  transition: all .5s ease;
  transform: translate(0, 100px);
}
.scrollUp.show {
  opacity: 1;
  transform: none;
}

/* コンテンツ */
header,footer,section,article,nav {
	display: block;
}

body,#count,#area,#area input,#button,#plus {
	text-align: center;
}

#area {
	margin: 1vh 0 0;
	font-size: 5vh;
}
#area input{
	width: 100vw;
	border: none;
	background-color: var(--bg-color);
	color: #fff;
}
#area input:focus{
	background-color: #fff;
	color: #000;
}

#counter {
	margin: 1vh 0 0;
}

#count {
	display: inline-block;
	font-size: 15vh;
	min-width: calc(70vw - 6px);
	line-height: 1;
	margin: 1vh auto 3vh;
	padding: 0 10px;
	text-shadow: -1px -2px 2px rgba(0,0,0,0.8), 1px 2px 2px rgba(255,255,255,0.5);
	background-image:
		linear-gradient(180deg, hsl(0,0%,15%)  0%, 
			hsl(0,0%,30%) 37%, 
			hsl(0,0%,28%) 63%,
			hsl(0,0%,15%)100%);
	box-shadow: hsla(0,0%,15%,  1) 0  0px 0px 1px, /* border */
		hsla(0,0%,15%, .6) 0 -2px 2px 2px, /* soft SD */
		hsla(0,0%,0%, .25) 0 -2px 0px 3px, /* bottom SD */
		hsla(0,0%,100%,.5) 0  2px 1.5px 3px; /* top HL */
}

.button{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-box-shadow: none;
	outline: none;
	text-shadow: -1px -1px rgba(0,0,0,0.5), 1px 1px rgba(255,255,255,0.5);
	border: none;
	box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
		inset hsla(0,0%,15%, .8) 0 -1px 3px 2px, /* soft SD */
		inset hsla(0,0%,0%, .25) 0 -1px 0px 6px, /* bottom SD */
		inset hsla(0,0%,100%,.7) 0  2px 1px 6px; /* top HL */
	background-image:
		-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   3%, hsla(0,0%,100%,.07) 3.75%),
		-webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   2%, hsla(0,0%,  0%,.03) 2.25%),
		-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 0.6%, hsla(0,0%,100%,.02) 2.2%),
		-webkit-repeating-linear-gradient(left, hsla(0,0%, 50%,0) 0%, hsla(0,0%, 50%,0) 0.3%, hsla(0,0%, 50%,.07) 0.55%),

		linear-gradient(180deg, hsl(0,0%,78%)  0%, 
			hsl(0,0%,90%) 47%, 
			hsl(0,0%,78%) 53%,
			hsl(0,0%,70%)100%);
	text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
}
.button:active {
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
	color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow: 
    inset hsla(210,100%,30%,  1) 0  0px 0px 4px, /* border */
    inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, /* soft SD */
    inset hsla(210,100%,20%,.25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(210,100%,100%,.7) 0  2px 1px 7px; /* top HL */
}
#last,#minus,#reset,#return {
	width: 17vw;
	height: 8vh;
	font-size: 5vw;
	line-height: 0.5;
	border-radius: 3vw;
	color: #333;
	vertical-align: top;
	margin: 0 1vw;
}
#last {
	width: 30vw;
	font-size: 4vw;
	color: #060;
}
#minus {
	color: #22e;
}
#reset {
	color: #e22;
}
#return {
	width: 70vw;
	margin-top: 1vh;
	color: #060;
}
#plus {
	margin: 2vh auto 0;
	width: 70vw;
	height: 30vh;
	font-size: 20vh;
	border-radius: 4vw;
	color: #333;
}
#plus:active {
	background-color: #fff;
}

.data {
	display: flex;
	flex-wrap: nowrap;
	position: relative;
	margin-top: 4vh;
	width: 100vw;
	height: 25vh;
}
#var {
	width: 1.8em;
	line-height: 1;
	text-align: right;
	font-size: 2vh;
}
#var #zero{
	display: inline-block;
	margin-top: 19vh;
}
.graf {
	width: calc(100vw - 1.8em);
	overflow: scroll;
	text-align: right;
}
.data .flex {
	display: flex;
	flex-wrap: nowrap;
	width: 200vw;
	height: 25vh;
	background-image:
		linear-gradient(90deg, #404040 1px, transparent 1px),
		linear-gradient(#404040 1px, transparent 1px);
	background-size: calc(200vw / 24) 4.4vh;
}
.data article{
	position: relative;
	width: calc(200vw / 144);
	height: 22vh;
	flex-grow: 0;
	border-bottom: solid 1px #404040;
}
/*
.data article.border {
	border-left: solid 1px #666;
}
*/
.data article.border2 {
	background-image: linear-gradient(90deg, #666 1px, transparent 1px);
	background-size: calc(200vw / 8) auto;
}
.data article:last-child {
	border-right: solid 1px #666;
}
.data .time{
	position: absolute;
	background-color: var(--bg-color);
	width: calc(200vw / 24);
	bottom: 0;
	margin: 0 0 -3vh 0;
	height: auto;
	text-align: center;
	font-size: 2vh;
	line-height: 3vh;
}
.data .bar{
	position: absolute;
	width: 100%;
	height: 0%;
	background-color: #fff;
	bottom: 0;
}

#dialog-confirm {
	display: none;
}

footer {
	font-size: 2vh;
	margin: 2.5vh 0 0;
	width: 100%;
	text-align: center;
	color: #ccc;
}
/* 過去釣果リスト */
#selectYear {
	margin-top: 15px;
}

#datalist {
	text-align: left;
}
#datalist article{
	margin-top: 15px;
}

#datalist h1,
#datalist h2,
#datalist h3{
	display: inline-block;
	margin-left: 0.25em;
	font-size: 1em;
	line-height: 
}
#datalist h1 {
	width: 5.2em;
	color: #5c5;
}
#datalist h2 {
	font-weight: bold;
	min-width: 1.5em;
	text-align: right;
	font-size: 1.2em;
}
#datalist h3 {
	color: #c75;
	white-space: nowrap;
}

#datalist .data {
	margin: 0;
	width: 100vw;
	height: 10vh;
}
#datalist .graf {
	width: calc(100vw);
	overflow: hidden;
}
#datalist .data .flex {
	width: 100vw;
	height: 10vh;
	background-size: calc(100vw / 24) 2vh;
}
#datalist .data article{
	margin: 0;
	width: calc(100vw / 144);
	height: 10vh;
}
.data .bar{
}

.cm {
	margin: 20px auto 0;
	padding: 0.25em;
	border: solid 1px #F93;
	background-color: #22252a;
	border-radius: 5px;
	overflow: hidden;
	text-align: left;
	font-size: 1em;
	line-height: 1.3em;
	height: 4.5em;
	width: 90%;
	max-width: 30em;
	color: #ccc;
	overflow: hidden;
	position: relative;
}
.cm a,
.cm a:visited {
	color: #fff;
}
.cm img {
	float: left;
	height: 5em;
	margin: 0;
}
.cm img:first-child {
	width: 5em;
	object-fit: cover;
	margin: -0.75em -0.25em;
	margin-right: 0.5em;
	border-right: solid 1px #F93;
}
.cm .amazon{
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 0.8em;
	border-top-left-radius: 5px;
	background-color: #F93;
	color: #fff;
	font-size: 0.8em;
}