@charset "UTF-8";
/* ========================================================================================= */
body	{margin: 0;
		font-family: 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
		

ul {display: block;
    list-style-type: none;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
	}

/* ================================== サイト名 ============================================= */
.site	{margin: 15px 0;}
.site img	{vertical-align: bottom;
/*			 visibility: hidden;   */
			 }

nav li{list-style-type: none;
	   padding: 0;
	   display:grid;
	   grid-auto-flow: column;
	   grid-column-gap:20px;
	   column-gap:20px; 
	   }


aside ul{ list-style-type: none;padding: 0; text-align: left;}

aside li{ border:1px solid #00f;}

li figure img{ width:50%; height:auto;}

/* ==================================  古い規格のグリッドの設定（水平線） =================  */
.hbar	{display: block;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	-ms-grid-row: 1;
	}
/* ==================================  水平線 =============================================  */
.hbar	{grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	z-index: -1;
	border-bottom: solid 2px #dddddd}
/* ==================================  古い規格のグリッドの設定（メニュー） ===============  */
.menu	{-ms-grid-column: 2;
	-ms-grid-row: 3;
	-ms-grid-row-span: 3}
/* =================================== メニュー ============================================ */
.menu	{grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	grid-row-end: foot;
	z-index: 100;
	width: 300px;
	margin-left: 10px;
	background-color: rgba(0,0,205,0);
	transition: margin-left 0.2s ease-out}

body.open .menu	{margin-left: 0}

.menu ul	{margin: 0;
	margin-top: 70px;
	background-color: rgba(0,0,205,0.8);
	padding: 0;
	list-style: none;
	overflow: auto}

.menu li a	{display: block;
	padding: 20px;
	color: #ffffff;
	font-size: 20px;
	text-decoration: none}

.menu  li a:hover	{background-color: #222222}
/* =============================== * タイトル * =========================================== */
.title{
	font-size: 24px;
	color: #000000;
	font-weight: 600;
	vertical-align: bottom;
	margin-bottom: 10px;
	padding: 10px;
	background-color:#9acd32;
	text-align: center}

/* ============================== * ニュース１ * =========================================== */
.news-1	{}
/* ============================== * ニュース２ * ==================================================== */
.news-2 {}

/* ============================== * ニュース３ * =============================================== */
.news-3	{}

/* ==============================ニュース４============================== */
.news-4	{width: 100%;
         height: 600px;}

/* ==============================ニュース５ ==============================*/

.news-5 {margin: 0;
	font-weight: 400;
	font-size: 20px;
/*	border-bottom: solid 1px #0000ff;  */
/*	margin-bottom: 10px;  */
	width: 100%;
	text-align: center;
	}

.news-5 table {margin: 0px auto;
			   width: 100%;
			   }

.block-map iframe {width: 400px;
				   height: 500px;
				   border-width: 0px;
    			   border-style: inset;
    			   border-color: initial;
    			   border-image: initial;
				   }

/* .block-map{width: 100%;
		   height : 100%;
		   margin: 0px auto;
		   position: relative;padding-bottom: 60%; /* ここで高さの比率を調整 */
		   height: 100%;
		   overflow: hidden;
		   }

.block-map iframe {display: block;
				   position: absolute;
				   top: 0;
				   left: 0;
				   width: 45%;
				   height: 100%;
				   border: none;
				   margin: 0px auto;
				   }
  */
/* ============================== アクセスカウンター・ミュージック ======================== */
.sns ul	{
	display: flex; 
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style-type: none;
	justify-content: spce-between;
	}
.sns li {margin: auto;:width: fit-content;}
.sns li	{flex: 1}
/* ============================== コピーライト ============================================ */
.copyright p	{margin: 0;
	color: #666666;
	font-size: 14px}
/* ============================== グリッド ================================================= */
body	{display: grid;
	grid-template-columns: 
		[left] minmax(5px, 1fr) [main] minmax(auto, 1140px) [main-end] minmax(5px, 1fr) [right];
	grid-template-rows: 
		[head] auto [img] auto [news-5] auto [news-4] auto [news-3] auto [news-2] auto [news-1] auto [sns] auto [foot] auto [bottom]}

		
.site	{grid-column-start: main;
		grid-row-start: head;
		justify-self: start}



.title	{grid-column-start: main;
	grid-row-start: img;
	}
	
.news-1	{grid-column-start: main;
	grid-row-start: news-1;
	justify-self: start;
	font-size: 20px;
	align-self: end;
	background-color: rgba(255,105,180,0.2);
	padding: 10px 20px;
	width: 75%;
	box-sizing: border-box;
	}

.kaichoumei {text-align:right;
			margin-top:0px;
			color:#0000ff;
			}

.news-2	{grid-column-start: main;
	grid-row-start: news-2;
	justify-self: start; 
	font-size: 20px;
	align-self: end;
	background-color: rgba(135,206,235,0.2);
	padding: 10px 20px;
	width: 75%;
	box-sizing: border-box;
	}
.news-2img{
	margin-top: 0px;
	margin-bottom: 0px;
	height: auto;
	justify-self: center;
	text-align: center;}

.news-3	{grid-column-start: main;
	grid-row-start: news-3;
	justify-self: start;
	font-size: 20px;
	align-self: end;
	background-color: rgba(184,134,11,0.2);
	padding: 10px 20px;
	width: 75%;
	box-sizing: border-box;
	}

.news-4	{grid-column-start: main;
	grid-row-start: news-4;
	justify-self: start;
	font-size: 20px;
	align-self: end;
/*	background-color: rgba(189,183,107,0.2);  */
	background-image: url("../png/houjou-ooike.png");
	background-size: cover;
	background-position: 100% 100%;
	padding: 10px 20px;
	width: 75%;
	box-sizing: border-box;
	}

.news-5	{grid-column-start: main;
	grid-row-start: news-5;
	justify-self: start;
	box-sizing: border-box;
	align-self: end;
	background-color: rgba(128,128,0,0.2);
	padding: 10px 20px;
	width: 75%;
	box-sizing: border-box;
	}

.sns	{grid-column-start: main;
	grid-row-start: news-5;
	grid-row-end: foot;
	width: 23%;
	box-sizing: border-box;
	justify-self: end;
/*	background-color: rgba(0,0,255,0.3);   */
	}

.sns li {width: 100%;
		 height: auto;
		 }

img {width:100%;
	 height:auto;
	 }

.copyright	{grid-column-start: main;
	grid-row-start: foot;
	margin: 15px 0}

.fbar	{grid-column-start: left;
	grid-column-end: right;
	grid-row-start: foot;
	z-index: -1;
	background-color: #dddddd}
/* ==================================== ########### 1750px以上 ########### =============== */
@media (min-width: 1750px) {

.title	{margin-top: 0px;
			 padding-top: 10px;
			 }
/*================================== メニューの開閉ボタン =================================*/
button	{
	grid-column-start: left;
	grid-column-end: main;
	grid-row-start: head;
	justify-self: end;
	align-self: center;
	margin-left: 14px;
	padding: 6px;
	border: none;
	background-color: transparent;
	color: #ffffff;/* 非表示用 */
	font-size: 28px;
	cursor: pointer}

button:focus {outline: none}

body.open button	{z-index: 200;
					color: #ffffff}

body:not(.open) .fa-window-close	{display: none}

body.open .fa-bars	{display: none}

.fa-bars span.open{font-size: small;}
.fa-window-close span.close{font-size: small;}

.news-1	{grid-column-start: main;
	grid-row-start: news-1;
	width: 100%;
	box-sizing: border-box}
	
.news-2	{grid-column-start: main;
	grid-row-start: news-2;
	width: 100%;
	box-sizing: border-box}
	
.news-3	{grid-column-start: main;
	grid-row-start: news-3;
	width: 100%;
	box-sizing: border-box}

.news-4	{grid-column-start: main;
	grid-row-start: news-4;
	width: 100%;
	box-sizing: border-box}

.news-5	{grid-column-start: main;
	grid-row-start: news-5;
	width: 100%;
	box-sizing: border-box}
	
/*  .aisatsubun {font-size: 18px;}  */

.sns	{grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	grid-row-end: foot;
	width: 300px;
	box-sizing: border-box;
	margin-top: 70px;
	margin-right: 10px;
/*	background-color: rgba(0,0,255,0.3);  */
	font-size: 20px;
	padding: 10px;
	justify-self: end}
	
}
/* ===================================########### 1749px～1180px  ########### ==================*/
@media (max-width: 1749px){
/*================================== メニューの開閉ボタン =================================*/
button	{
	grid-column-start: left;
	grid-column-end: main;
	grid-row-start: head;
	justify-self: end;
	align-self: center;
	margin-left: 14px;
	padding: 6px;
	border: none;
	background-color: transparent;
	color: #0000ff;
	font-size: 28px;
	cursor: pointer}

button:focus {outline: none}

body.open button	{z-index: 200;
					color: #0000ff}

body:not(.open) .fa-window-close	{display: none}

body.open .fa-bars	{display: none}

.fa-bars span.open{font-size: small;}
.fa-window-close span.close{font-size: small;}

/* ================================ メニュー ============================================ */
.menu	{grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	grid-row-end: bottom;
	z-index: 100;
	width: 300px;
	margin-left: -300px; 
	background-color: rgba(0,0,205,0);
	transition: margin-left 0.2s ease-out}
	
.menu ul	{margin: 0;
	margin-top: 70px;
	background-color: rgba(0,0,205,0.8);
	padding: 0;
	list-style: none;
 	height: calc(100vh - 60px);
	overflow: auto}
	
body.open .page-cover
	{grid-column-start:left;
	grid-column-end: right;
	grid-row-start:head;
	grid-row-end: bottom;
	z-index: 50;
	background-color: rgba(0,0,0,0.2)}

body.open	{height: 100vh;
	overflow: hidden}

html	{overflow-y: scroll}

.sitename{
	font-size: 43px;}
.sns{margin-right:0px}

}
/* ==================================########### 1179px以下 ########### =================*/
@media (max-width: 1179px) {

.sitename{
	font-size: 38px;
	font-weight: 700;
	text-shadow: 0 0 10px #000000}

.title	{grid-column-start: left;
	grid-column-end: right}

.news-3 {font-size: 16px;}

.news-4 {font-size: 16px;}

}
/* ==================================########### 768px以下 ########### =================*/
@media (max-width: 768px) {

.sitename{
	font-size: 38px;
	font-weight: 700;
	text-shadow: 0 0 10px #000000}

button	{display: block}

.news-1	{width: 100%;
		 height: auto;}

.news-2	{width: 100%;
		 height: auto;}
		 
.news-3	{width: 100%;
		 height: auto;}
		 
.news-4	{width: 100%;
		 height: auto;}
		 
.news-5	{width: 100%;
		 height: 100%;}
		 
.sns	{grid-row-start: sns;
	width: auto;
	justify-self: stretch;
	justify-content: space-between;
	}
	
.sns ul {display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px;
	margin: 0px;width:fit-content;
	}
	
.sns li {flex: 1;
		 width: 33%;
		 height: auto;
		 }

img {width:100%;
	 height:auto;
	 }

}

/* ================================########### 599px以下 ########### ==================*/
@media (max-width: 599px) {
/*================================== メニューの開閉ボタン =============================*/
button	{
	grid-column-start: left;
	grid-column-end: main;
	grid-row-start: head;
	justify-self: end;
	align-self: center;
	margin-left: 14px;
	padding: 6px;
	border: none;
	background-color: transparent;
	color: #0000ff;
	font-size: 28px;
	cursor: pointer}

button:focus {outline: none}

body.open button	{z-index: 200;
					color: #0000ff}

body:not(.open) .fa-window-close	{display: none}

body.open .fa-bars	{display: none}

.fa-bars span.open{font-size: small;}
.fa-window-close span.close{font-size: small;}

/* ================================ メニュー ======================================= */
.menu	{grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	grid-row-end: bottom;
	z-index: 100;
	width: 300px;
	margin-left: -300px; 
	background-color: rgba(0,0,205,0);
	transition: margin-left 0.2s ease-out}
	
.menu ul	{margin: 0;
	margin-top: 70px;
	background-color: rgba(0,0,205,0.8);
	padding: 0;
	list-style: none;
 	height: calc(100vh - 60px);
	overflow: auto}
	
body.open .page-cover
	{grid-column-start:left;
	grid-column-end: right;
	grid-row-start:head;
	grid-row-end: bottom;
	z-index: 50;
	background-color: rgba(0,0,0,0.2)}

body.open	{height: 100vh;
	overflow: hidden}

html	{overflow-y: scroll}

.sitename{
	font-size: 16px;}

.catch	{grid-row-start: catch;
	margin-left: 0;
	margin-bottom: 20px;
	padding: 0;
	font-size: 5vw}

.news-3 {font-size: 24px;}

.news-3 .block-peoples { width: 70%;}

.news-4 {font-size: 24px;}

.news-4 .block-list { width: 70%;}
			}

}

/* =========== ### グリッドレイアウトに未対応なブラウザ（IE11以外）用の設定 ### ========== */
@supports not (display: grid) {

/* ============================= htmlとbodyの設定 =========================================*/
html	{background: #dddddd}
body	{max-width: 768px;
	margin: 0 auto;
	padding: 10px 20px;
	background-color: #ffffff}
/* ============== お知らせとアクセスカウンター・ミュージックの表示を調整 ================= */
.news	{width: auto}
.sns	{width: auto}
/* ============================ トグルボタンの表示位置を調整 ============================= */
body	{position: relative}

button	{position: absolute;
	top: 20px;
	right: 20px}
/* =========================== キャッチコピーのまわりの余白サイズを調整 ================= */
.catch	{margin: 0 0 20px}
/* =========================== 概要の間隔を調整 ========================================= */
.gaiyou	{margin-bottom: 10px}

}
/* =========================== ### IE11用の設定 ### ===================================== */
/* @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { */
@media all and (-ms-high-contrast: none), not all and (-ms-high-contrast: none) {  
/* =============================  古い規格のグリッドの設定 =================================*/
body	{display: -ms-grid;
	-ms-grid-columns: 1fr 1140px 1fr;
	-ms-grid-rows: 70px auto auto auto auto auto auto auto auto auto}

.site	{-ms-grid-column: 2;
	-ms-grid-row: 1}
.title	{-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;}

.news-5	{-ms-grid-column: 2;
	-ms-grid-row: 3;
	width: 820px;
	-ms-grid-column-align: end;
	box-sizing: border-box}
	
.news-4	{-ms-grid-column: 2;
	-ms-grid-row: 4;
	width: 820px;
	-ms-grid-column-align: end;
	box-sizing: border-box}
	
.news-3	{-ms-grid-column: 2;
	-ms-grid-row: 5;
	width: 820px;
	-ms-grid-column-align: end;
	box-sizing: border-box}

.news-2	{-ms-grid-column: 2;
	-ms-grid-row: 6;
	width: 820px;
	-ms-grid-column-align: end;
	box-sizing: border-box}
	
.news-1	{-ms-grid-column: 2;
	-ms-grid-row: 7;
	width: 820px;
	-ms-grid-column-align: end;
	box-sizing: border-box}

.sns	{-ms-grid-column: 2;
	-ms-grid-row: 8;
	-ms-grid-row-span: 1;
	width: 820px;
	-ms-grid-column-align: end;
	box-sizing: border-box;
	margin-top: 0px;
	margin-right: 0px;
	padding: 20px;
	}
.sns ul {display: flex;
	-ms-flex-direction: row;
	align-items: center;
	padding: 5px;
	margin: 0px;
	justify-content: space-between;
	}
	
.sns li {-ms-flex: 1;
	font-size: 20px;
	}
.sns li font {font-size: 20px;}


.copyright	{-ms-grid-column: 2;
	-ms-grid-row: 9;
	margin: 15px 0}

.fbar	{display: block;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	-ms-grid-row: 9;
	z-index: -1;
	background-color: #dddddd}

/* ================================ メニュー ======================================= */
.menu	{-ms-grid-column: 2;
	-ms-grid-row: 3;
	-ms-grid-row-span: 3;
	/* width: 20%; */
	-ms-grid-column-align: start;
	margin-top: 0px;
	z-index: 100;
	width: 300px; 
	/* margin-left: -300px;  */
	background-color: rgba(0,0,205,0);
	transition: margin-left 0.2s ease-out;
	margin-left: 0px;
	}
	
.menu ul	{margin: 0;
	margin-top: 0px;
	background-color: rgba(0,0,205,0.8);
	padding: 0;
	list-style: none;
/* 	height: calc(100vh - 60px);   */
	overflow: auto}
	
.menu li a {padding: 20px;
			font-size: 20px;
			}
/* ========== IE11でアクセスカウンター・ミュージックの表示が崩れるのを防ぐ ============= */
.sns ul	{display: flex}
/* ========================= トグルボタンの表示位置を調整 ============================== */
body	{position: relative}
}
/* } */