:root {
	--color_w					: rgb(250,250,250);
	--color_lg					: rgb(240,240,240);
	--color_g					: rgb(168,168,168);
	--color_dg					: rgb(77,77,77);
	--color_r					: rgb(226,4,27);
	--color_dr					: rgb(162,32,65);
	--color_b					: rgb(0,149,217);
	--color_y					: rgb(255,234,0);

	--opacity_w					: rgba(250,250,250,.6);
	--opacity_lg				: rgba(240,240,240,.6);
	--opacity_g					: rgba(168,168,168,.6);
	--opacity_dg				: rgba(77,77,77,.6);
	--opacity_r					: rgba(226,4,27,.6);
	--opacity_b					: rgba(0,149,217,.6);
	--opacity_y					: rgba(255,234,0,.6);

	--week_0_bg					: rgb(242,224,212);
	--week_0_ft					: rgb(163,12,0);
	--week_6_bg					: rgb(212,224,242);
	--week_6_ft					: rgb(0,12,163);
}

*{
	box-sizing					: border-box;
	position					: relative;
	display						: block;
	margin						: 0px;
	padding						: 0px;
	font-family					: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo UI","ＭＳ Ｐゴシック","MS PGothic",Arial,sans-serif;
	font-style					: normal;
	font-weight					: 400;
	text-decoration				: none;
	font-size					: 1.2rem;
	-webkit-touch-callout		: none;
	-webkit-tap-highlight-color	: rgba(0,0,0,0);
	-webkit-font-smoothing		: antialiased;
	/*-webkit-overflow-scrolling	: touch*/
	touch-action				: manipulation;
}

html{
	font-size					: 10px;
}
head,script{
	display						: none;
}
body{
	width						: 100vw;
	min-width					: 1200px;
	height						: 100vh;
	height						: calc(var(--vh, 1vh) * 100);
	overflow					: hidden;
}
main{
	width						: 100%;
	min-height					: 100vh;
	min-height					: calc(var(--vh, 1vh) * 100);
}
a,button{
	cursor						: pointer;
	-moz-user-select			: none;
	-webkit-user-select			: none;
	-ms-user-select				: none;
	user-select					: none;
	background-color			: transparent;
}
a *,button *{
	cursor						: pointer;
}
select,input,button,textarea{
	-webkit-appearance			: none;
	-moz-appearance				: none;
	appearance					: none;
	border						: none;
	border-radius				: 0px;
	resize						: none;
}

select::-ms-expand{
	display						: none;
}
input::-ms-clear{
	visibility					: hidden;
}
input::-ms-reveal {
	visibility					: hidden;
}
::placeholder{
	text-align					: left;
}
:-ms-input-placeholder{
	text-align					: left;
}
input[type="radio"],
input[type="checkbox"]{
	clip						: rect(0, 0, 0, 0);
}
head,script{
	display						: none;
}
textarea:disabled{
	resize						: none;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{
	-webkit-appearance			: none;
	margin						: 0;
}
input[type='number']{
	-moz-appearance				:textfield;
}
input[type='checkbox']{
	cursor						: pointer;
	display						: table;
	background-color			: transparent;
	text-align					: center;
}
input[type='checkbox']::before{
	display						: table-cell;
	float						: left;
	content						: "\f111";
	width						: 3rem;
	height						: inherit;
	font-family					: "Font Awesome 5 Free";
	font-weight					: 400;
	font-size					: 2.4rem;
	line-height					: inherit;
	opacity						: .1;
}
input[type='checkbox']:checked::before{
	content						: "\f058";
	opacity						: 1;
}
input[type='checkbox']::after{
	display						: table-cell;
	float						: left;
	line-height					: inherit;
}

button{
	border-radius				: 7px;
}



[id='loader']{
	position					: fixed;
	top							: 0px;
	left						: 0px;
	width						: 100%;
	height						: 100vh;
	height						: calc(var(--vh, 1vh) * 100);
	background-color			: rgb(250,250,250);
    z-index						: 1000;
}
[id='loader'][data-opacity='.1']{ opacity	: .1; }
[id='loader'][data-opacity='.2']{ opacity	: .2; }
[id='loader'][data-opacity='.3']{ opacity	: .3; }
[id='loader'][data-opacity='.4']{ opacity	: .4; }
[id='loader'][data-opacity='.5']{ opacity	: .5; }
[id='loader'][data-opacity='.6']{ opacity	: .6; }
[id='loader'][data-opacity='.7']{ opacity	: .7; }
[id='loader'][data-opacity='.8']{ opacity	: .8; }
[id='loader'][data-opacity='.9']{ opacity	: .9; }
[id='loader'][class='hide']{
    transition					: opacity 300ms;
    opacity						: 0;
}
[id='loader'][class='off']{
	pointer-events				: none;
    opacity						: 0;
}
[id='loader']>p{
	position					: absolute;
	transform					: translate(-50%,-50%);
	width						: 200px;
	height						: 80px;
	background-image			: url(img/logo/logo.svg);
	background-repeat			: no-repeat;
    background-position			: center center;
    background-size				: 200px auto;
	opacity						: 0;
}
body[data-view='portrait'] [id='loader']>p{
	top							: calc(50% - 130px);
	left						: calc(50% - 15px);
}
body[data-view='portrait'] [id='loader']>p[class='view']{
    animation-name				: view_p;
    animation-duration			: 1600ms;
}
body[data-view='portrait'] [id='loader']>p[class='move']{
    animation-name				: move_login_p;
    animation-duration			: 1000ms;
}
body[data-view='landscape'] [id='loader']>p{
	top							: calc(50% - 0px);
	left						: calc(25% - 15px);
}
body[data-view='landscape'] [id='loader']>p[class='view']{
    animation-name				: view_l;
    animation-duration			: 1600ms;
}
body[data-view='landscape'] [id='loader']>p[class='move']{
    animation-name				: move_login_l;
    animation-duration			: 1000ms;
}
[id='loader']>p[class='loading']{
    animation-name				: loading;
    animation-duration			: 1000ms;
}
[id='loader']>p{
    animation-delay				: 0ms;
    animation-iteration-count	: 1;
    animation-direction			: nomal;
    animation-fill-mode			: forwards;
}

@keyframes loading{
	0%		{
		top						: 50%;
		opacity					: 0;
	}
	30%	{
		opacity					: .7;
	}
	100%	{
		top						: 50%;
		opacity					: .7;
	}
}
@keyframes view_p{
	0%		{
		top						: 50%;
		opacity					: 0;
	}
	30%		{
		top						: 50%;
		opacity					: 0;
	}
	100%	{
		top						: 50%;
		opacity					: 1;
	}
}
@keyframes view_l{
	0%		{
		left					: calc(50% - 15px);
		opacity					: 0;
	}
	30%		{
		left					: calc(50% - 15px);
		opacity					: 0;
	}
	100%	{
		left					: calc(50% - 15px);
		opacity					: 1;
	}
}

@keyframes move_login_p{
	0%		{
		top				: 50%;
		opacity					: 1;
		
	}
	20%		{
		top				: 50%;
		opacity					: 1;
	}
	100%	{
		top				: calc(50% - 130px);
		opacity					: 1;
	}
}
@keyframes move_login_l{
	0%		{
		left				: calc(50% - 15px);
		opacity					: 1;
	}
	20%		{
		left				: calc(50% - 15px);
		opacity					: 1;
	}
	100%	{
		left				: calc(50% - 165px);
		opacity					: 1;
	}
}

















[id='download_wall']{
	position			: fixed;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%,-50%);
	width				: 160vw;
	height				: 160vh;
	background			: rgba(48,73,89,.6);
	z-index				: 1000;
}
[id='download_wall']>svg{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%,-50%);
	width				: 10vw;
	height				: 10vw;
	opacity				: .6;
}

[id='download_prg']{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translate(-50%,-50%);
	width				: 100%;
	max-width			: 800px;
	height				: 16px;
	border-radius		: 8px;
	background			: rgb(200,200,200);
	opacity				: .6;
}
[id='download_prg']>var{
	width				: 0%;
	height				: 16px;
	border-radius		: 8px;
	background			: rgb(0,150,255);
	opacity				: .9;
}