: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						: 100%;
	min-height					: 100vh;
	min-height					: calc(var(--vh, 1vh) * 100);
}
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:focus,input:focus,a:focus,textarea:focus,button:focus{
	outline						: none;
	z-index						: 1;
}
:focus{
	outline						: none;
	z-index						: 1;
}

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;
}

ruby{
	display					: ruby !important;
	font-size				: inherit !important;
}
ruby>rt{
	display					: ruby-text !important;
	font-size				: x-small !important;
}
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='login_area']{
	position					: absolute;
	top							: 50%;
	left						: 50%;
	transform					: translate(-50%,-50%);
	height						: 400px;
	max-height					: calc(100% - 16px);
	background-color			: rgba(255,255,255,.8);
    border-radius				: 10px;
	z-index						: 1;
}
body[data-view='portrait'] [id='login_area']{
	width						: 400px;
	max-width					: calc(100% - 16px);
}
body[data-view='landscape'] [id='login_area']{
	width						: calc(100% - 16px);
	max-width					: 600px;
}

[id='login_logo']{
	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;
    animation					: view 1600ms, move_login 1000ms;
    animation-delay				: 0ms, 1600ms;
    animation-iteration-count	: 1, 1;
    animation-direction			: nomal, nomal;
}
body[data-view='portrait'] [id='login_logo']{
	top							: calc(50% - 130px);
	left						: calc(50% - 15px);
}
body[data-view='landscape'] [id='login_logo']{
	top							: calc(50% - 0px);
	left						: calc(25% - 15px);
}
[id='login_i']{
	position					: absolute;
	transform					: translateY(-100%);
	padding-left				: 10px;
	height						: calc(2.6em + 2px);
	background-color			: rgba(255,255,255,.6);
	border-top					: solid 1px rgb(200,200,200);
	border-bottom				: solid 1px rgb(200,200,200);
	line-height					: 2.6em;
	font-size					: 2rem;
}
body[data-view='portrait'] [id='login_i']{
	top							: calc(50% - 20px);
	left						: 0px;
	width						: 100%;
}
body[data-view='landscape'] [id='login_i']{
	top							: calc(40% - 20px);
	left						: calc(50% - 10px);
	width						: 50%;
}
[id='login_p']{
	position					: absolute;
	padding-left				: 10px;
	height						: calc(2.6em + 1px);
	background-color			: rgba(255,255,255,.6);
	border-bottom				: solid 1px rgb(200,200,200);
	line-height					: 2.6em;
	font-size					: 2rem;
}
body[data-view='portrait'] [id='login_p']{
	top							: calc(50% - 20px);
	left						: 0px;
	width						: 100%;
}
body[data-view='landscape'] [id='login_p']{
	top							: calc(40% - 20px);
	left						: calc(50% - 10px);
	width						: 50%;
}
[id='login_c']{
	position					: absolute;
	padding-right				: 5px;
	width						: auto;
	height						: 30px;
	line-height					: 30px;
	font-size					: 0rem;
}
body[data-view='portrait'] [id='login_c']{
	top							: calc(50% + 60px);
	left						: 50%;
	transform					: translateX(-50%);
}
body[data-view='landscape'] [id='login_c']{
	top							: calc(75% - 0px);
	left						: calc(25% - 0px);
	transform					: translate(-50%,-50%);
}
[id='login_c']::after{
	content						: '\30ED\30B0\30A4\30F3\540D\3092\4FDD\5B58\3059\308B'; /* ログイン名を保存する */
	font-size					: 2rem;
}

[id='login_btn']{
	position					: absolute;
	height						: auto;
	width						: 200px;
	line-height					: 2.6em;
	font-size					: 2rem;
	color						: rgb(250,250,250);
}
body[data-view='portrait'] [id='login_btn']{
	left						: 50%;
	bottom						: 20px;
	transform					: translateX(-50%);
}
body[data-view='landscape'] [id='login_btn']{
	top							: calc(75% - 0px);
	left						: calc(75% - 10px);
	transform					: translate(-50%,-50%);
}

[id='background']{
	position					: absolute;
	top							: 0px;
	left						: 0px;
	width						: 100%;
	height						: 100vh;
	height						: calc(var(--vh, 1vh) * 100);
	background-repeat			: no-repeat;
    background-position			: center center;
    background-size				: cover;
    opacity						: .4; 
    transition					: background-image 1000ms;
    filter						: blur(2px);
}

[id='hp_ver']{
	position					: fixed;
	right						: 10px;
	bottom						: 5px;
	line-height					: 1em;
	font-weight					: 600;
	font-size					: 1rem;
}

[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;
}