@charset "UTF-8";
/* ========================================================================================= */
body	{margin: 0;
		font-family: 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
/* ================================== サイト名 ============================================= */
.site	{margin: 15px 0;}
.site img	{vertical-align: bottom}
/* ==================================  古い規格のグリッドの設定（水平線） =================  */
.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: bottom;
	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	{}

	@-webkit-keyframes square {
  		0%   { transform: translateX(0); }
  		100% { transform: translateX(100vw);}
	}
	@keyframes square {
  		0%   { transform: translateX(0); }
  		100% { transform: translateX(50vw);}
	}

.news-4 li{list-style: none;}

.news-4 li:nth-child(1){left: 30%;
						width: 80px;
						height: 80px;
						background-color: #ffffff;
						}

.news-4 .aaa {-webkit-animation: square 30s infinite;
			  animation: square 30s linear infinite;
			  }
	
/* ==============================ニュース５ ==============================*/

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

.map {text-align: center;
			width: 100%;
			height: 100%;
			margin: 0 auto;
			display: flex;
    align-items: center;
    justify-content: center;
			}

.map iframe {width:600px;
    height:500px;
    }

.map script {margin: 0 auto;}

.tojiru-button {width: 100%;
				height:auto;
				text-align: center;
				margin-bottom: 20px;
				margin-top: 20px;
				}

/* ============================== アクセスカウンター・ミュージック ======================== */
.sns ul	{
	display: flex; 
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: space-between;}

.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 [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;
	font-size: 28px;
	}
	
.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(173,255,47,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(135,206,235,0.2);
	background-color: #ffffff;
	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(173,255,47,0.2);
	padding: 10px 20px;
	width: 100%;
	box-sizing: border-box;
	}

.news-5img{
	width: 100%;
	height: auto;
	justify-self: center;
	text-align: center;
	margin-bottom: 0px;
	}
.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);
	}

.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}

}
/* ==================================########### 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: auto;}
		 
.map {position: relative;
    padding-bottom: 100%; /* ここで高さの比率を調整 */
    height: 0;
    overflow: hidden;
    text-align: center;
    }
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    }

.sns	{grid-row-start: sns;
	width: auto;
	justify-self: stretch;
	justify-content: space-stretch;
	}
	
.sns ul {display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px;
	margin: 0px;
	}
	
.sns li {flex: 1;
	}

}
/* ================================########### 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;}

.title {font-size: 28px;}

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

.news-3 img{ width: 70%;
	height: auto;
	}
	
.kaichoumei {font-size:12px;
			}

}
/* =========== ### グリッドレイアウトに未対応なブラウザ（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: center;
	box-sizing: border-box}
	

.map {		text-align: center;
			width: 100%;
			height: 100%;
			margin: 0 auto;
			display: flex;
    		align-items: center;
    		justify-content: center;
			}

.map iframe {width:600px;
    height:500px;
    }

.map script {margin: 0 auto;}

.tojiru-button {text-align: center;
			width: 100%;
			height: 70%;
			margin: 0 auto;
			display: flex;
    		align-items: center;
    		justify-content: center;
    		margin-bottom: 20px;
			margin-top: 20px;
			}

.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}
}
/* } */