@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* レスポンシブ対応お約束初期化 */
* {
	float: none;
	position: static;
}
img {
	max-width: 100%;
	height: auto;
}


html{
	overflow-y: scroll;
	font-size: 16px;
}

/* HP全体の基本文字はゴシック系で灰色 */
body{
	font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo, Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 90%;
	color: #393937;
	
	/* 背景をグラデーションさせる*/
	background: linear-gradient(to bottom, #FFFFFF 0%, #E0FFFF 100%); /* グラデーション指定（白から薄い水色へ） */
}

/* 外枠部分 */
#wrapper {
	width: 400px;              /* 幅は400pxで固定 */
	margin: auto;              /* 画面中央に表示  */
	overflow: hidden;          /* はみ出しは隠す  */
	border: 5px solid #55ab59; /* 全体を枠で囲む  */
}
/********** ページタイトル（画像） **********/
#siteTitle{
	width: 100%;
	float: center;
	margin: 1px 1px;
	text-align: center;
}

/********** スマホ用メニュー **********/
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;           /* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background: #333;
	transition: 0.5s;
	position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
	bottom: 0;
	transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%;      /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: #fff;
	transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
	list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
	left: 0;/* メニューを画面に入れる */
}

/********* パンクズリスト（左寄せ） *********/
#pankuzu {
	width: 95%;
	text-align: left;
	margin: 0 10px;
	padding: 5px 5px;
}

/********* 説明文（左寄せ） *********/
#contents {
	width: 95%;
	text-align: left;
	margin: 0 5px;
	padding: 10px 5px;
}

/********** 説明文、ボタン枠（中央寄せ） **********/
#contentsC {
	width: 95%;
	float: center;
	text-align: center;
	padding: 30px 0;
}

/********** お知らせ（角丸点線枠） **********/
.box1 {
	position: relative;
	margin: 5em 5em;
	padding: 1em 1em;
	color: #565656;                       /* 文字の色 */
	background: #FFF8DC;                  /* 点線より内側の背景色（クリーム色） */
	box-shadow: 0px 0px 0px 10px #FFF8DC; /* 点線より外側の背景色（クリーム色） */
	border: dashed 2px #2E8B57;           /* 点線の色（緑） */
	border-radius: 8px;
}
.box1 p {
	margin: 0; 
	padding: 0;
}

/********** お知らせ（インデックス付枠） **********/
.box2 {
	position: relative;
	margin: 5em 5em;
	padding: 1em 1em;
	border: solid 3px #2E8B57;
	background: #FFF8DC;
}
.box2 .box-title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 16px;
	background: #2E8B57;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
.box2 p {
	margin: 0; 
	padding: 0;
}

/********** 関連リンク **********/
#linkSite {
	width: 95%;
	float: center;
	text-align: center;
	padding: 5px 0;
}

/********** 項目タイトル（背景：シーグリーン、文字：白） **********/
#titleBar {
	width: 100%;
	background: #3CB371;
	color: #FFFFFF;
	float: center;
	text-align: center;
	padding: 5px 0;
}

.imgDisplay {
	padding: 10px;
	float: center;
}

/********** 見出し（左線：緑、背景：薄緑、文字：黒） **********/
#headingBar {
	position: relative;
	padding: 0.5em;                 /* 文字周りの余白 */
	color: #393937;                 /* 文字色 */
	background: #AFEEEE;            /* 背景色 */
	border-left: solid 5px #006400; /* 左線（実線 太さ 色） */
}

/********** ボタン **********/
.button {
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	background: #32cd32; /* 背景色 */
	color: #FFFFFF;      /* 文字色 */
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
	border-bottom: solid 2px #2e8b57; /* ボタン下の色（少し濃い色） */
	border-radius: 4px;
	font-weight: bold;
	text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}

.button:active {
  /*押したとき*/
	border-bottom: solid 2px #32cd32; /* 背景色 */
	box-shadow: none;
	text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}

/********** フッター **********/
#footer {
	width: 100%;
	height: 15px;
	margin: auto;
	overflow: hidden;
	padding: 8px 4px;
	background: #55ab59;
	color: #FFFFFF;
	float: center;
	text-align: center;
	font-size: 8px;
}

.alC {
	text-align: center !important;
}

/* PC版（スマホ用画像とスマホ用メニューを表示しない） */
@media screen and (min-width:768px) {
	.sp{
		display: none;
	}
	.sp_menu{
		display: none;
	}
	#contentsB br{
		display: none;
	}
}

/* スマホ版（PC版画像とPC版メニューを表示しない） */
@media screen and (max-width:767px) {
	.pc{
		display: none;
	}
	.pc_menu{
		display: none;
	}
	main {
		width: 100%;
	}
}