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

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%); /* グラデーション指定（白から薄い水色へ） */
}

/* リンク（共通部分） */
a{
	color: #9ACB32; /* 黄緑 */
	text-decoration: underline;
}
a:current{
	color: #8B008B; /* ダークマゼンタ */
	text-decoration: underline;
}
a:hover{
	color: #C71585; /* ミディアムバイオレット */
	text-decoration: underline;
}

/* 外枠部分 */
#wrapper {
	width:980px;               /* 幅は980pxで固定 */
	margin: auto;              /* 画面中央に表示  */
	overflow: hidden;          /* はみ出しは隠す  */
	border: 5px solid #55ab59; /* 全体を枠で囲む  */
}

/********** ページタイトル（画像） **********/
#siteTitle{
	width: 100%;
	float: center;
	margin: 5px 5px;
	text-align: center;
}

/********** 上部プルダウンメニュー（PC版） **********/
.pc_menu ul{
	margin: 0;
	padding: 0;
}
.pc_menu ul li{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	float: left;
	position: relative;
	width: 196px;        /* 親メニューの幅(4->245,5->196) */
	height: 30px;        /* 親メニューの高さ */
	line-height: 30px;
	background: #55AB59; /* 親メニューの背景色（少し薄い緑） */
	color: #FFFFFF;      /* 親メニューの文字色（白） */
	text-align: center;
}
.pc_menu ul li a {
	color: #FFFFFF;
	display: block;
	text-decoration: none;
}
.pc_menu ul li:hover, .pc_menu ul li a:hover {
	background: #008000; /* ホバー時の親メニューの背景色（緑） */
	color: #FFFFFF;      /* ホバー時の親メニューの文字色（白） */
}
.pc_menu ul li ul {
	position: absolute;
	top: 30px;           /* 親メニューの高さと同じにする */
	width: 196px;
	z-index: 100;
}
.pc_menu ul li ul li {
	visibility: hidden;
	overflow: hidden;
	font-size: 12px;
	width: 196px;        /* サブメニューの幅(4->245,5->196) */
	height: 0;
	background: #F0F8FF; /* サブメニューの背景色（アリスブルー） */
	color: #000080;      /* サブメニューの文字色（ネイビー） */
}
.pc_menu ul li ul li a {
	color: #000080;      /* サブメニューのリンクの文字色（ネイビー） */
}
.pc_menu ul li ul li:hover, .pc_menu ul li ul li a:hover {
	background: #2E8B57;  /* ホバー時のサブメニューの背景色(シーグリーン） */
	color: #FFFFFF;       /* ホバー時のサブメニューの文字色（白） */
}
.pc_menu ul li:hover ul li, .pc_menu ul li a:hover ul li{
	visibility: visible;
	overflow: visible;
	height: 30px;         /* サブメニューの高さ */
	z-index: 10;
}
.pc_menu * {
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

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

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

/********** 説明文、ボタン枠（中央寄せ） **********/
#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: 17px;
	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: 30px 0;
}

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

.imgDisplay {
	padding: 20px;
	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: 20px;
	margin: auto;
	overflow: hidden;
	padding: 10px 5px;
	background: #3CB371;
	color: #FFFFFF;
	float: center;
	text-align: center;
}

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

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

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