@charset "utf-8";

/* --------------------------------------------- */
/* ------------------- color ------------------- */
/* --------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-weight:normal;}
:root {
--color_l01: #f9f9f9;/*薄*/
--color_l02: #eeeeee;/*濃*/
--color_d01: #4a4e50;/*薄*/
--color_d02: #3b3d40;/*濃*/
--color-bla: #333;/*黒テキスト*/
--color-lbla: #999;/*黒テキスト*/
--color-blog: #90BAB5;/*blogのポイントカラー*/
}
/* --------------- color-end */

body{
	background-color: var(--color_l01);
	min-height:100vh;
	font-size: clamp(1rem, 0.455rem + 2.73vw, 2.5rem);
	/*これ1行でテキストサイズ解決できる。https://min-max-calculator.9elements.com/を入力してvwをvminに変更する この設定は16-30pxの320-880px、横長16-40pxの320-1200px*/
	}
main,footer{
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body {
	display: flex;/*footer押し下げ用*/
	flex-direction: column;
    justify-content: space-between;/*footer押し下げ用*/
}
html,body {
  height: 100%;/*footer押し下げ用*/
}
main{
	flex: 1;/*footer押し下げ用*/
}

/*--------------------------------------------------
header
--------------------------------------------------*/
header{
	position:fixed;
	top: 0;
	left: 0;
	z-index: 100;
	align-items: flex-start;
}
header .inner_width{
	padding: 6vw;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	}
	/* menuボタン */
	header div#menu img {
		width:10vw;
		max-width: 88px;
		}

/* ---------- 横長 ---------- */
@media (orientation: landscape){
header .inner_width{
	padding: 3vw;
	}
	/* menuボタン */
	header div#menu img {
		width:5vw;
		max-width: 88px;
		}
}

/*--------------------------------------------------
footer
--------------------------------------------------*/
footer{
	color:#fff;
	background-color: var(--color_d02);
	font-size: .8em;
	}
footer div.inner_width{
	padding: 3em 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

footer div.inner_width nav ul{
    list-style-type: none;
    }
footer div.inner_width nav:not(#important) ul li{
    position: relative;
    margin-top: .6em;
    padding-left: 1em;
    }
footer div.inner_width nav:not(#important) ul li:before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 0;
    height: 0;
    border-width: .3em;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    }

	footer div.inner_width nav ul li a:link,
	footer div.inner_width nav ul li a:visited{
		color: #fff;
		}

footer div.inner_width nav#sitemap div#main_links{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	}
footer div.inner_width nav#sitemap div#main_links div{
	margin-left: 2em;
	margin-right: 2em;
	margin-bottom: 2em;
	}

footer div.inner_width nav#important{
    display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
    }
footer div.inner_width nav#important div#impt_links{
	margin-left: 2em;
	margin-right: 2em;
    margin-bottom: 2em;
    }
footer div.inner_width nav#important div#office_links{
	margin-left: 2em;
	margin-right: 2em;
    }
	footer div.inner_width nav#important div#impt_links ul{
		display: flex;
		border-top: 3px double #fff; 
		border-bottom: 3px double #fff;
		padding: .4em;
		}
	footer div.inner_width nav#important div#impt_links ul li{
		margin-left: 1em;
		margin-right: 1em;
		}

footer p.logo img{width: 12em;}
footer div.link{
	max-width: 9em;
	display: flex;
	justify-content: center;
	margin: .5em auto;
	}
	footer div.link img{
		width: 1.2em;
		margin: 0 .8em;
		}
footer small{
	font-family: 'Klee One';
	font-size: .8em;
	color: var(--color_l02);
	}



/*==================================================
注釈
===================================*/
body main article .inner_width ul.notes{
    list-style-type: none;
	font-size: .8em;
	color: #666;
    }
body main article .inner_width ul.notes li{
    position: relative;
    padding-left: 2em;
    }
body main article .inner_width ul.notes li:before {
    content: "※";
    position: absolute;
    top: -.24em;
    left: 0;
    width: 0;
    height: 0;
    border-width: .3em;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    }


/*==================================================
2列テーブル　tbl_2col
===================================*/
body main article .inner_width .tbl_2col{
	display: flex;
	flex-direction: column;
	}
	body main article .inner_width .tbl_2col div{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top:.4em;
		padding-bottom:.6em;
		}