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

:root {
	--area-main-decoration-height:13;

	--color-base1	:#fff;
	--color-base2	:#eee;
	--color-main1	:#82bdcd;
	--color-main2	:#82bdcd;
	--color-accent1	:#6ee0ff;
	--color-accent2	:#6ee0ff;
	--color-text	:#202e33;
	--color-link	:#237f99;

	--color-headline-text	:#507580;
	--color-headline-bg1	:#fff;
	--color-headline-bg2	:#edfbff;
	--color-headline-bg3	:#edfbff;

	--color-label-bg	:#FFF7D8;

	--color-ui-bg		:#82bdcd;
	--color-ui-text		:#fff;

	--color-button-go	:#3395ae;
	--color-button-back	:#888;

	--animation-time:0.6s;
}

.font1 { font-family:'capsuula'; }

* {
	margin:0;
	padding:0;
}

/*スクロールバー全体*/
::-webkit-scrollbar {
	width:2vmin;
}

/*スクロールバーの軌道*/
::-webkit-scrollbar-track {
	background-color:transparent;
	border-radius:1vmin;
/*	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);*/
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb {
	background-color:transparent;
	border-radius:1vmin;
	box-shadow:inset 0 0 1vmin rgba(255, 255, 255, .5);
}

a         {color:#0ff;}
a:hover   {color:#6ff;}
a:active  {color:#cff;}
a:visited {color:#099;}

hr {
	border:none;
	border-bottom:1px solid rgba(0,0,0,0.5);
}

img {border:0; line-height:0;}

img.pixel {
-ms-interpolation-mode:nearest-neighbor;
image-rendering:-webkit-optimize-contrast;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:pixelated;
}

html, body {
	width:100%;
	height:100%;
	color:var(--color-text);
}

body {
	position:relative;

	font-family: 'Noto Sans JP', sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	color:var(--color-headline-text);
}

h1 + p {
	margin-top:1em;
}

p {
	font-size: 0.774rem;
	margin-bottom: 1em;
}

ul {
	margin: 0 auto 1em;
	width: 100%;

	text-align: left;
	list-style-position: inside;
	font-size: 0.774rem;
}

ul.intro_bullet {
	max-width:21em;
}

#wrap_clock, .mordal {
	position:absolute;
	top:50%;
	left:50%;
	
	width:100vmin;
	height:100vmin;
	margin:-50vmin 0 0 -50vmin;
}

#wrap_parts {
	position:relative;
	
	width:100vmin;
	height:100vmin;
	
	overflow:hidden;
}

.parts {
	position:absolute;
	top:0;
	left:0;
}

#def_fill {
	width:0;
	height:0;
}

.nav_UL, .nav_UR, .nav_DL, .nav_DR {
	position:absolute;
	width:16vmin;
	height:16vmin;
	
	z-index:300;
	cursor:pointer;
}
.nav_UL {
	top:0;
	left:0;
}

.nav_UR {
	top:0;
	right:0;
}

.nav_DL {
	bottom:0;
	left:0;
}

.nav_DR {
	bottom:0;
	right:0;
}

#digital {
	position:relative;
	z-index:100;
	
	font-size:15vmin;
	width:100vmin;
	height:100vmin;
	line-height:100vmin;
	text-align:center;
}

#digital_sub {
	position:absolute;
	top:34vmin;
	left:0;
	
	font-size:7vmin;
	width:100vmin;
	height:auto;
	
	text-align:center;
	
	z-index:99;
}

#digital, #digital_sub {
	text-shadow:
1px 0 0 rgb(0,0,0),
0 1px 0 rgb(0,0,0),
-1px 0 0 rgb(0,0,0),
0 -1px 0 rgb(0,0,0),
0 0 0.1em rgb(0,0,0)
;
}

#digital span {
	display:inline-block;
	width:9vmin;
}

.zero  {opacity:0.01;}
.colon {opacity:0.5; line-height:96vmin; vertical-align:top}

.mordal {
	z-index:200;
	
/*	padding:0 1em;*/
/*	margin:0 16vmin;*/
	box-sizing:border-box;
	overflow-x:hidden;
	overflow-y:auto;
	
	font-size:8vmin;
	letter-spacing:0.05em;
	line-height:1.5;
}

.mordal_inner {
	max-width:68vw;
	margin:0 auto;
}


.config_ui {
	font-size:4vmin;
	line-height:10vmin;
}

.config_ui button {
	font-size:3vmin;
	line-height:1.2;
}


div.column2, div.column3 {
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	
	margin-bottom:1vmin;
	
    line-height:13vmin;
}

div.column3 div.param_name {
	flex-grow:2;
}

div.column2 > div,
div.column3 > div
{
	min-width:33%;
}


button {
	cursor:pointer;
	padding:0.25em 0.5em;
	border-radius:0.33rem;

	background-color:var(--color-ui-bg);
	border:0.1rem solid var(--color-ui-bg);
	color:var(--color-ui-text);

	font-weight:bold;
	outline:none;
}

i {
	font-style:normal;
}

.wrap_toggle,
.wrap_number_input {
	display:inline-block;
	vertical-align:middle;
	line-height:1.2;
	width:95%;
	
	border-radius:0.5em;
	box-shadow:inset 0 0 0.2em rgba(255,255,255,0.5);
}

.wrap_toggle {
	margin:0.4em 0.125em;
	line-height:1.6;
}

.wrap_number_input {
	margin:0 0.125em;
}

.wrap_toggle span {
    padding: 0 0.25em;
}

.wrap_number_input * {
    padding: 0.25em 0.125em;
	width:25%;
}

.wrap_toggle *,
.wrap_number_input * {
	display:inline-block;
	vertical-align:middle;
}

.wrap_number_input {
	text-align:center;
}

.wrap_number_input i {
	margin:0 -0.3em;
}

.wrap_toggle[data-switch=off] {
	text-align:left;
	cursor:pointer;
}

.wrap_toggle[data-switch=off] span {
	opacity:0.5;
}

.wrap_toggle[data-switch=on] {
	text-align:right;
	cursor:pointer;
}

h1, h2 {
	font-size:1.5rem;
	font-weight:normal;
}


div.wrap_text {
	font-size:0.875rem;
	line-height:1.5;
}

div.wrap_text p {
	padding-bottom:1em;
}

.footer {
	margin-top:0.75em;
}


button[data-role="reset"] {
	font-weight: 100;
    font-size: 0.875rem;
	background-color:var(--color-button-back);
}

button[data-role="add_seq"],
button[data-role="go_result"]
{
	font-weight: 100;
    font-size: 0.875rem;
	background-color:var(--color-button-go);
}