@charset "utf-8";

/*
************************************************************************
 変数設定
************************************************************************
*/
:root {
	--body-width-pc:1000px; /* コンテンツ幅(パソコン) */
	--body-width-tb:96%; /* コンテンツ幅(タブレット) */
	--body-width-sp:96%; /* コンテンツ幅(スマートフォン) */
	--body-width-middle:600px; /* コンテンツ幅(中) */

	--base-font-size-pc:1.2rem; /* 文字サイズ(パソコン) */
	--base-font-size-tb:1.2rem; /* 文字サイズ(タブレット) */
	--base-font-size-sp:1.8rem; /* 文字サイズ(スマートフォン) */

	--margin-L:6em;
	--margin-M:4em;
	--margin-S:2em;

	--section-border-color:rgba(0, 0, 0, 0.15);

	--side-navi-max-width:240px;
	--side-navi-width:24vw;
}

/*
***************************************************************
基準フォントサイズ
***************************************************************
*/
/* 大(PC) */
html{font-size: 62.5%;}
body{font-size: var(--base-font-size-pc);}

/* 中(タブレット) */
@media screen and (max-width:1000px) {
	html{font-size: 0.96vw;}
	body{font-size: var(--base-font-size-tb);}
}

/* 小(スマホ) */
@media screen and (max-width:640px) {
	html{font-size: 1.5625vw;}
	body{font-size: var(--base-font-size-sp);}
}

/*
***************************************************************
基本画面構成
***************************************************************
*/
body #wrapper
{
	z-index:0;

	max-width:100vw;
	min-height:100svh;

	display: grid;
	grid-template:
	" ..... app     ..... " 1fr
	" ..... footer  ..... " auto
	/ 0.5fr 900px   0.5fr;

	background-color: #EEEEEE;
}
body #wrapper #app
{
	grid-area: app;

	display: grid;
	grid-template:
	" header header        " auto
	" navi   contents-body " 1fr
	/ 260px  640px         ;
	background-color: #FFFFFF;
}
body #wrapper #footer
{
	grid-area: footer;
	position: sticky;
	bottom: 0;
}
body #wrapper #app #header
{
	grid-area: header;
}
body #wrapper #app #navi
{
	grid-area: navi;
}
body #wrapper  #app #contents-body
{
	grid-area: contents-body;
}







body.beit.beit-single #wrapper
{
	-ms-grid-rows: auto auto auto 1fr auto auto; /* 行区切り */
	-ms-grid-columns: 100%; /* 列区切り */
	
	grid-template-rows: auto auto auto 1fr auto auto; /* 行区切り */
	grid-template-columns: 100%; /* 列区切り */
}
body.beit.beit-double #wrapper
{
	-ms-grid-rows: auto auto 1fr auto auto; /* 行区切り */
	-ms-grid-columns: var(--side-navi-max-width) calc(100% - var(--side-navi-max-width)); /* 列区切り */
	
	grid-template-rows: auto auto 1fr auto auto; /* 行区切り */
	grid-template-columns: var(--side-navi-max-width) calc(100% - var(--side-navi-max-width)); /* 列区切り */
}
/* グローバルヘッダ */
body.beit.beit-single #wrapper > #global-header
{
	z-index:6;

	-ms-grid-row: 1;
	-ms-grid-column: 1;

	grid-row: 1;
	grid-column: 1;
}
body.beit.beit-double #wrapper > #global-header
{
	z-index:6;

	-ms-grid-row: 1;
	-ms-grid-column: 1/3;

	grid-row: 1;
	grid-column: 1/3;
}

/* ヘッダ(グローバルナビ) */
body.beit.beit-single #wrapper > #header
{
	z-index:5;

	position:sticky;
	top:0px;
	
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	
	grid-row: 2;
	grid-column: 1;
}
body.beit.beit-double #wrapper > #header
{
	z-index:5;

	-ms-grid-row: 2/5;
	-ms-grid-column: 1;
	
	grid-row: 2/5;
	grid-column: 1;
}

/* コンテンツタイトル */
body.beit.beit-single #wrapper > #contents-title
{
	z-index:3;

	-ms-grid-row: 3;
	-ms-grid-column: 1;
	
	grid-row: 3;
	grid-column: 1;
}
body.beit.beit-double #wrapper > #contents-title
{
	z-index:3;

	-ms-grid-row: 2;
	-ms-grid-column: 2;
	
	grid-row: 2;
	grid-column: 2;
}

/* コンテンツ */
body.beit.beit-single #wrapper > #contents-body
{
	z-index:4;

	-ms-grid-row: 4;
	-ms-grid-column: 1;
	
	grid-row: 4;
	grid-column: 1;
}
body.beit.beit-double #wrapper > #contents-body
{
	z-index:4;

	-ms-grid-row: 3;
	-ms-grid-column: 2;
	
	grid-row: 3;
	grid-column: 2;
}

/* フッター */
body.beit.beit-single #wrapper > #footer
{
	z-index:2;

	-ms-grid-row: 5;
	-ms-grid-column: 1;
	
	grid-row: 5;
	grid-column: 1;
}
body.beit.beit-double #wrapper > #footer
{
	z-index:2;

	-ms-grid-row: 4;
	-ms-grid-column: 2;
	
	grid-row: 4;
	grid-column: 2;
}

/* グローバルフッター */
body.beit.beit-single #wrapper > #global-footer
{
	z-index:1;

	-ms-grid-row: 6;
	-ms-grid-column: 1;
	
	grid-row: 6;
	grid-column: 1;
}
body.beit.beit-double #wrapper > #global-footer
{
	z-index:1;

	-ms-grid-row: 5;
	-ms-grid-column: 1/3;
	
	grid-row: 5;
	grid-column: 1/3;
}
@media screen and (max-width:1000px) {
	body.beit.beit-double #wrapper
	{
		-ms-grid-rows: auto auto 1fr auto auto; /* 行区切り */
		-ms-grid-columns: var(--side-navi-width) calc(100% - var(--side-navi-width)); /* 列区切り */
		
		grid-template-rows: auto auto 1fr auto auto; /* 行区切り */
		grid-template-columns: var(--side-navi-width) calc(100% - var(--side-navi-width)); /* 列区切り */
	}
}
/* 小(スマートフォン) */
@media screen and (max-width:640px) {
	body.beit.beit-double #wrapper
	{
		-ms-grid-rows: auto auto auto 1fr auto auto; /* 行区切り */
		-ms-grid-columns: 100%; /* 列区切り */
		
		grid-template-rows: auto auto auto 1fr auto auto; /* 行区切り */
		grid-template-columns: 100%; /* 列区切り */
	}

	/* グローバルヘッダ */
	body.beit.beit-double #wrapper > #global-header
	{
		-ms-grid-row: 1;
		-ms-grid-column: 1;

		grid-row: 1;
		grid-column: 1;
	}

	/* ヘッダ(グローバルナビ) */
	body.beit.beit-double #wrapper > #header
	{
		position:sticky;
		top:0px;

		-ms-grid-row: 2;
		-ms-grid-column: 1;
		
		grid-row: 2;
		grid-column: 1;
	}

	/* コンテンツタイトル */
	body.beit.beit-double #wrapper > #contents-title
	{
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		
		grid-row: 3;
		grid-column: 1;
	}

	/* コンテンツ */
	body.beit.beit-double #wrapper > #contents-body
	{
		-ms-grid-row: 4;
		-ms-grid-column: 1;
		
		grid-row: 4;
		grid-column: 1;
	}

	/* フッター */
	body.beit.beit-double #wrapper > #footer
	{
		-ms-grid-row: 5;
		-ms-grid-column: 1;
		
		grid-row: 5;
		grid-column: 1;
	}

	/* グローバルフッター */
	body.beit.beit-double #wrapper > #global-footer
	{
		-ms-grid-row: 6;
		-ms-grid-column: 1;
		
		grid-row: 6;
		grid-column: 1;
	}
}

/*
***************************************************************
画面中央配置
***************************************************************
*/
body.beit #wrapper > #contents-body.centering
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

/*
***************************************************************
基本の段落
***************************************************************
*/
body.beit #wrapper section
{
	display:block;
	width:100%;

	border-bottom:1px solid var(--section-border-color);
}
body.beit #wrapper section:before,
body.beit #wrapper section:after
{
	content: ".";
	display: block;
	clear: both;
	float: none;
	height: 0px;
	width: 100%;
	visibility: hidden;
	overflow:hidden;
}
body.beit #wrapper section:before
{
	margin-bottom:var(--margin-L);
}
body.beit #wrapper section:after
{
	margin-top:var(--margin-L);
}
body.beit #wrapper section.no-margin:before,
body.beit #wrapper section.no-margin:after
{
	margin-bottom:0;
	margin-top:0;
}
body.beit #wrapper section.no-border,
body.beit #wrapper section:last-child
{
	border-bottom:0px solid transparent;
}

/*
***************************************************************
基本のブロック
***************************************************************
*/
body.beit #wrapper .row
{
	width:100%;
	max-width:var(--body-width-pc);
	margin:var(--margin-M) auto;
}
body.beit #wrapper .row.no-margin
{
	margin:0 auto;
}
body.beit #wrapper .row.thin-margin
{
	margin:var(--margin-S) auto;
}
body.beit #wrapper .row.middle
{
	max-width:var(--body-width-middle);
}
body.beit #wrapper .row.fill
{
	max-width:100%;
}
body.beit #wrapper .row.full
{
	max-width:calc(100% - 4em);
}
@media screen and (max-width:1000px)
{
	body.beit #wrapper .row,
	body.beit #wrapper .row.full
	{
		max-width:var(--body-width-tb);
	}
}
@media screen and (max-width:640px)
{
	body.beit #wrapper .row,
	body.beit #wrapper .row.full,
	body.beit #wrapper .row.middle
	{
		max-width:var(--body-width-sp);
	}
}

/*
***************************************************************
基本のシールド
***************************************************************
*/
body.beit .sheild
{
	display:none;

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3);
}

/*
***************************************************************
読込中の表示(スプラッシュビュー)
***************************************************************
*/
body.beit #wrapper
{
	opacity: 0.0;
	visibility: hidden;
}
body.beit.inited #wrapper
{
	opacity: 1.0;
	visibility: visible;
}
body.beit .sheild.initialize-sheild
{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;

	background-color:#FFFFFF;
}
body.beit.inited .sheild.initialize-sheild
{
	animation-name:initializeSeaild;
	animation-delay:0.5s;
	animation-duration:0.3s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes initializeSeaild
{
	0% {
		opacity:1;
		transform:translateY(0%);
	}
	100% {
		opacity:0;
		transform:translateY(-200%);
	}
}
/* https://epic-spinners.epicmax.co/ */
body.beit .half-circle-spinner, .half-circle-spinner * {
	box-sizing: border-box;
}
body.beit .half-circle-spinner {
	width: 60px;
	height: 60px;
	border-radius: 100%;
	position: relative;
}
body.beit .half-circle-spinner .circle {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border: calc(60px / 10) solid transparent;
}
body.beit .half-circle-spinner .circle.circle-1 {
	border-top-color: #999999;
	animation: half-circle-spinner-animation 1s infinite;
}
body.beit .half-circle-spinner .circle.circle-2 {
	border-bottom-color: #999999;
	animation: half-circle-spinner-animation 1s infinite alternate;
}
@keyframes half-circle-spinner-animation {
	0% {
		transform: rotate(0deg);

	}
	100%{
		transform: rotate(360deg);
	}
}

/*
***************************************************************
接続中の表示
***************************************************************
*/
body.beit.connected .conected-sheild
{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
body.beit.connected .conected-sheild .message
{
	font-size:11px;
}
/* https://epic-spinners.epicmax.co/ */
body.beit .self-building-square-spinner, .self-building-square-spinner * {
	box-sizing: border-box;
}
body.beit .self-building-square-spinner {
	height: 40px;
	width: 40px;
	top: calc( -10px * 2 / 3);
}
body.beit .self-building-square-spinner .square {
	height: 10px;
	width: 10px;
	top: calc( -10px * 2 / 3);
	margin-right: calc(10px / 3);
	margin-top: calc(10px / 3);
	background: #666666;
	float: left;
	position:relative;
	opacity: 0;
	animation: self-building-square-spinner 6s infinite;
}
body.beit .self-building-square-spinner .square:nth-child(1) {
	animation-delay: calc(300ms * 6);
}
body.beit .self-building-square-spinner .square:nth-child(2) {
	animation-delay: calc(300ms * 7);
}
body.beit .self-building-square-spinner .square:nth-child(3) {
	animation-delay: calc(300ms * 8);
}
body.beit .self-building-square-spinner .square:nth-child(4) {
	animation-delay: calc(300ms * 3);
}
body.beit .self-building-square-spinner .square:nth-child(5) {
	animation-delay: calc(300ms * 4);
}
body.beit .self-building-square-spinner .square:nth-child(6) {
	animation-delay: calc(300ms * 5);
}
body.beit .self-building-square-spinner .square:nth-child(7) {
	animation-delay: calc(300ms * 0);
}
body.beit .self-building-square-spinner .square:nth-child(8) {
	animation-delay: calc(300ms * 1);
}
body.beit .self-building-square-spinner .square:nth-child(9) {
	animation-delay: calc(300ms * 2);
}
body.beit .self-building-square-spinner .clear{
	clear: both;
}
@keyframes self-building-square-spinner {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
		top: 0;
	}
	50.9% {
		opacity: 1;
		top: 0;
	}
	55.9% {
		opacity: 0;
		top: inherit;
	}
}

/*
***************************************************************
スクロールバー
***************************************************************
*/
.scroll-y
{
	overflow-y:scroll;
	height:calc(var(--vh1, 1vh) * 100);
}
.scroll-x
{
	overflow-x:scroll;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background-color: #EEEEEE;
	box-shadow: 0px 0px 3px 1px #00000023 inset;
}
::-webkit-scrollbar-thumb {
	background-color: #999999;
}

/*
***************************************************************
モーダルダイアログのデザイン
***************************************************************
*/
body.beit .sheild.dialog-sheild
{
	position: fixed;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	background-color:rgba(0,0,0, 0.2);
	display: none;
}
body.beit .sheild.dialog-sheild.show
{
	display: grid;
	grid-template:
	  " ...... ...... ...... " 0.5fr
	  " ...... dialog ...... " auto
	  " ...... ...... ...... " 0.5fr
	  / 0.5fr  auto   0.5fr ;
}
body.beit .sheild.dialog-sheild .dialog
{
	grid-area: dialog;

	max-width:90vw;
	max-height:90vh;

	margin: 0;
	padding: 0;

	font-size:12px;
}
@media screen and (max-width:640px)
{
	body.beit .sheild.dialog-sheild .dialog
	{
		font-size:18px;
	}
}
body.beit .sheild.dialog-sheild .dialog .dialog-contents
{
	background-color: #FFFFFF;
	border:2px solid #999999;
	border-radius:0.5em;

	margin:0;
	padding:0;

	max-width:90vw;
	max-height:90vh;
	width:480px;

	display: grid;
	grid-template:
	  " title   " auto
	  " message " auto
	  " action  " auto
	  / 100% ;
}
body.beit .sheild.dialog-sheild .dialog.error .dialog-contents
{
	border:2px solid #AA3333;
}
body.beit .sheild.dialog-sheild .dialog .dialog-contents .dialog-title
{
	grid-area: title;
	padding:0.5em;

	font-weight: bold;
	border-bottom:1px solid #CCCCCC;
}
body.beit .sheild.dialog-sheild .dialog .dialog-contents .dialog-message
{
	grid-area: message;
	padding:0.5em;
}
body.beit .sheild.dialog-sheild .dialog .dialog-contents .dialog-action
{
	grid-area: action;
	padding:0.5em;
	text-align: right;
}





.dialog-sheild dialog.showModal
{
	display:block;
}
body.beit dialog.beit
{
	border:2px solid #999999;
	border-radius:0.5em;

	padding:0;

	width:480px;

	display: grid;

	-ms-grid-rows: auto 1fr auto; /* 行区切り */
	-ms-grid-columns: auto; /* 列区切り */
	
	grid-template-rows: auto 1fr auto; /* 行区切り */
	grid-template-columns: auto; /* 列区切り */

	grid-template-areas:
		"popup-title"
		"popup-body"
		"popup-ope";
}
body.beit dialog.beit.popup
{
	width:600px;
}
body.beit dialog.beit.error
{
	border:2px solid #AA3333;
}
body.beit dialog.beit > .contents
{
	padding:5px;
}
body.beit dialog.beit  .title
{
	grid-area: popup-title;
	white-space:pre-wrap;
	font-weight: bold;
	font-size:14px;
	padding:5px;
}
body.beit dialog.beit > .contents > .message
{
	white-space:pre-wrap;
	font-size:12px;
	padding:5px;
}
body.beit dialog.beit.popup > .contents
{
	grid-area: popup-body;
	overflow-y: auto;
}
body.beit dialog.beit > .ope
{
	grid-area: popup-ope;
	border-top: 1px solid #CCCCCC;

	display: flex;
	justify-content: flex-end;
	align-items: center;

	padding:5px;
}
body.beit dialog.beit > .ope > *
{
	margin:5px;
}

/* native backdrop */
body.beit dialog.beit::backdrop {
	background-color: rgba(0, 0, 0, 0.2);
}
/* polyfill backdrop */
body.beit dialog.beit + .backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.2);
}