/*
 ────────────────────────
       Copyright(C) CMT LLC. All Rights Reserved.
 ────────────────────────
*/
/* ----- body ----- */
html,body{
	width            :100%;
	height           :100%;
	margin           :0px;
	padding          :0px;
	font-family      :"Meiryo",sans-serif;
	font-size        :15px;
	color            :#333;
	background       :#f4f4f4;
	user-select      :none;
	touch-action     :manipulation;
}

/* ----------------- */
.main{
	padding          :10px;
}

.container{
	display          :flex;
	justify-content  :center;
	align-items      :center;
}

/* ----------------- */
.button1{
	margin           :0px 4px 0px 0px;
	text-align       :center;
	font-size        :18px;
	border           :none;
	width            :68px;
	line-height      :62px;
	background       :#555;
	color            :#fff;
	border-radius    :33px 3px 3px 33px;
	cursor           :pointer;
}

.button1:hover{
	background       :#0c0;
}

/* ----------------- */
.button2{
	margin           :0px 0px 0px 0px;
	text-align       :center;
	font-size        :18px;
	border           :none;
	width            :68px;
	line-height      :62px;
	background       :#555;
	color            :#fff;
	border-radius    :3px 33px 33px 3px;
	cursor           :pointer;
}

.button2:hover{
	background       :#0c0;
}

/* ----------------- */
.start_button{
	margin           :0px 5px 0px 0px;
	width            :110px;
	padding          :18px 0px 18px 0px;
	color            :#fff;
	font-size        :18px;
	text-align       :center;
	background       :#444;
	border           :4px #4c4 solid;
	border-radius    :15px;
	cursor           :pointer;
}

.start_button:hover{
	background       :#4c4;
}

/* ----------------- */
.reset_button{
	margin           :0px 0px 0px 0px;
	padding          :18px 5px 18px 5px;
	color            :#fff;
	font-size        :18px;
	text-align       :center;
	background       :#444;
	border           :4px #bbb solid;
	border-radius    :15px;
	cursor           :pointer;
}

.reset_button:hover{
	background       :#888;
}

/* ----------------- */
.timer-control{
	display          :flex;
	align-items      :center;
	justify-content  :center;
}

input[type="range"]{
	-webkit-appearance:none;                        /* デフォルトのスタイルを解除 */
	appearance        :none;                        /* デフォルトCSSを打ち消す */
	cursor            :pointer;                     /* カーソル形状 */
	outline           :none;                        /* スライダーのアウトラインを消す */
	height            :24px;                        /* バーの高さ */
	width             :calc(100% - 30px);           /* バーの幅 */
	background        :linear-gradient(#999,#ddd);  /* バーの背景色 */
	border-radius     :12px;                        /* バーの両端の丸み */
}
/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;                       /* デフォルトのスタイルを解除 */
	background        : linear-gradient(135deg,#0c0,#080);
	width             : 50px;
	height            : 50px;
	border-radius     : 100%;
	box-shadow        : 0px 3px 5px 0px rgba(0,0,0,0.5);
	border            : none;
}
/* つまみドラッグ中のスタイル */
input[type="range"]:active::-webkit-slider-thumb{
	box-shadow: 0px 0px 3px rgba(0,0,0, 0.1);
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
	background        : #0b0;
	width             : 50px;
	height            : 50px;
	border-radius     : 100%;
	box-shadow        : 0px 3px 5px 0px rgba(0,0,0, 0.5);
	border            : none;
}
/* Firefoxで点線が周りに表示されてしまう */
input[type="range"]::-moz-focus-outer{
	border:0;
}

/* ----- A LINK ----- */
a:link{
	color            :#6af;
	text-decoration  :none;
}

a:active{
	color            :#6af;
	text-decoration  :none;
}

a:visited{
	color            :#6af;
	text-decoration  :none;
}

a:hover{
	color            :#fff;
	background       :#08f;
	border-radius    :3px;
}

a:hover img{
	opacity          :0.5;
}