@charset "UTF-8";

/* --------------------------------- 共通項目 1 --------------------------------------- */
html, body {
  margin: 0;
  font-size:16px;
}
a {
	color: black;
	text-decoration: none;
}
a:hover { color: grey; }
body {
	background-image: url("../img/b008.jpg");
	line-height: 170%;
	color:#3a3a3a;
	font-family: sans-serif;
}
@supports (display: grid) {
	body {
		font-family: 'Noto Serif JP', serif;
	}
}
#header {
	background-image: url("../img/background_image_01.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 1px solid #a6eda0;
	text-align: center;
}
#main {
	background-color: rgba(255,255,235,0.6);
	display: block;
	padding: 10px 30px 10px 30px;
}
#aside {
	background-color: rgba(255,200,200,0.2);
}
#nav ul {
	margin-top: 0;
}
#nav li {
	text-indent: -2.2em;
}
#footer {
	padding: 0 20px;
	background-image: url("../img/background_image_01.jpg");
	border: 1px solid #a6eda0;
}

.menu_right {			/* menuクラスのスタイル */
	max-width: 400px;
	border: none;
	padding: 0 0 0 10px;
	height: 100%;
  	position:relative;
  	margin: 0;
}


table td {
  padding: 0px 5px;
}
.smapho_box {			/* スマホ対応ボックス 初期値はboxと同じだが、メディアクエリーでスマホ対応にする。 */
	margin: 0 20px;
	border: 1px solid black;
	padding: 10px 20px;
}

/* --------------------------------- 共通項目 1 end ------------------------------------ */


/* --------------------------------- メディアクエリーで場合分け ------------------------ */

@media screen and (max-width:1000px) {		/* 1000px以下 */

	#grid_layout {
		display: block;
	}
	#nav {
		max-width: 380px;
		margin: 0 auto;
		padding: 5px 20px;
	}
	#nav h3{
		margin: 10px 0 5px;
		text-align: left;
	}
	#main {
		max-width: 800px;
		margin: 0 auto;
	}
	#aside {
		width: 100%;
		text-align: center;
	}
	.menu_right {			/* menuクラスのスタイル */
		width: 350px;
		height: 600px;
	}
	.smapho_box {			/* スマホ対応ボックス 初期値はboxと同じだが、メディアクエリーでスマホ対応 */
		margin: 0 20px;
		border: 1px solid black;
		padding: 10px 20px;
		white-space: nowrap;
		overflow-x: scroll;
		max-width: 600px;
	}
}

@media screen and (min-width:1001px) and (max-width:1300px){		/* 1001px以上、1200px以下 */

	/* ---------------------------- grid layout --------------------------- */
	#grid_layout {
		display:grid;
		grid-template-columns: 3fr 800px 1fr 300px 3fr;

		display: -ms-grid;
		-ms-grid-columns: 3fr 800px 1fr 300px 3fr;
}
	#header {
		grid-column: 1 / -1;
		grid-row: 1;

		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
		-ms-grid-row: 1;
	}
	#nav {
		grid-column: 2;
		grid-row: 2;

		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
	}
	#main {
		grid-column: 2;
		grid-row: 3;

		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		-ms-grid-row: 3;
	}
	#aside {
		grid-column: 4;
		grid-row: 2 / 4;

		-ms-grid-column: 4;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
		-ms-grid-row-span: 2;
	}
	#footer {
		grid-column: 1 / -1;
		grid-row: 4;

		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
		-ms-grid-row: 4;
	}
	/* -------------------------- grid layout end ------------------------- */
	#nav {
		width: 380px;
		margin: 0 auto;
		padding: 5px 20px;
	}
	#nav h3{
		margin: 10px 0 5px;
		text-align: left;
	}
}

@media screen and (min-width:1301px) {		/* 1201px以上 */
	/* ------------------------- grid layout ------------------------------ */
	#grid_layout {
		display:grid;
		grid-template-columns: 3fr 280px 1fr 800px 1fr 300px 3fr;

		display: -ms-grid;
		-ms-grid-columns: 3fr 280px 1fr 800px 1fr 300px 3fr;
	}
	#header {
		grid-column: 1 / -1;
		grid-row: 1;

		-ms-grid-column: 1;
		-ms-grid-column-span: 7;
		-ms-grid-row: 1;
	}
	#nav {
		grid-column: 2;
		grid-row: 2;

		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
	}
	#main {
		grid-column: 4;
		grid-row: 2;

		-ms-grid-column: 4;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
	}
	#aside {
		grid-column: 6;
		grid-row: 2;

		-ms-grid-column: 6;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;

		font-size: 90%;
	}
	#footer {
		grid-column: 1 / -1;
		grid-row: 3;

		-ms-grid-column: 1;
		-ms-grid-column-span: 7;
		-ms-grid-row: 3;
	}
	/* -------------------- grid layout end --------------------------- */
	#nav {
		padding: 0 10px 10px 5px;
		font-size: 90%;
		position: fixed;
		height: 93vh;
		background-color: rgba(220,255,220,0.4);
	}
	@supports (display: grid) {
		#nav {
			position: sticky;
			top: 0;
	    	box-sizing: border-box;
		}
	}
	#nav h3{
		margin: 16px 0 0;
		text-align: center;
	}

}


/* --------------------------------- 共通項目 2 --------------------------------------- */
/* ------------------------------ tools ------------------------------------ */
.box {			/* class="box"指定の任意タグのスタイル */
	margin: 0 20px;
	border: 1px solid black;
	padding: 10px 20px;
}

.pbox {			/* class="pbox"指定の任意タグのスタイル */
	margin: 0 20px;
	border: 1px solid black;
	padding: 10px 20px;
	white-space: nowrap;
	overflow-x: scroll;
	max-width: 600px;
}

.pbox2 {		/* class="pbox2"指定の任意タグのスタイル */
	margin: 0 20px;
	border: 1px solid black;
	padding: 10px 20px;
	white-space: nowrap;
	overflow-x: scroll;
	max-width: 800px;
}
.bar1 {
  display: block;
  width: 100%;
  height: 1px;
  background-color: white;
  border: 0;
}
.mincho {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
	font-weight: 400;
}
.wf-nicomoji { font-family: "Nico Moji";
	color: #004600;
 }
.bold {
	font-weight:bold;
}
.georgia {
	font-family: "Georgia";
}
.verdana {
	font-family: "Verdana";
}
.underline {
	text-decoration: underline;
}
.fixed_up {	/* IE11用、スクロール時にJavascriptで上に位置を変更するときに使用する。*/
	top: 0;
}

p.indentback{
  text-indent: -1em;
  padding-left: 2em;
}

/* --------------------------- tools end --------------------------------*/

/* ----------------- page top icon display -------------------------- */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 5%;
  bottom: 0;
  opacity: 0.3;
  background-color: black;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #ffa6ff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
@media print{
	#page_top{
  		opacity: 0.0;
  		background-color: red;
		display: none;
    }
    #page_top a{
        display: none;
    }
}

/* ---------------   page top icon display end -------------------- */