@charset "utf-8";

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

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

	--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.beit #wrapper
{
	z-index:0;

	max-width:100vw;

	min-height:calc(var(--vh1, 1vh) * 100);
	display: grid; /* グリッドレイアウト */
}
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;
	box-shadow: 3px 0px 3px -3px #00000044;
}

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

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

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

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

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

	-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:3;

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

	-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%;
	padding:0 0.0em;
}
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);
	}
}

/*
***************************************************************
モーダルダイアログのデザイン
***************************************************************
*/
.dialog-sheild
{
	position: fixed;
	top:0;
	bottom: 0;
	left:0;
	right: 0;

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

	background-color:rgba(0,0,0, 0.2);
}
.dialog-sheild.hide
{
	display: none;
}
.dialog-sheild dialog
{
	position: fixed;

	width: fit-content;
	height: fit-content;
	max-width:90vw;
	max-height:90vh;
	margin: auto;
	background-color: #FFFFFF;

	display:none;
}
.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);
}