@charset "utf-8";

/*PC・スマホ共通設定
----------------*/
/*全体の設定
----------------*/
body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
	color: #666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	/*background: #eff2eb;	/*背景色*/
	background: #002c33;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	font-weight: normal;
}
ul {
	list-style-type: none;
}
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
table {
	border-collapse:collapse;
	font-size: 100%;
	border-spacing: 0;
}

/*コンテナ（ホームページを囲む一番外側のブロック）
----------------*/
#container {
	max-width: 1400px;	/*ブロックの最大幅*/
	margin: 0 auto;
	padding: 0 3%;
}

/*ヘッダー（ロゴが入った最上段のブロック）
----------------*/
/*headerブロック*/
header {
	text-align: center;	/*内容を中央よせ*/
}
/*ロゴ画像設定*/
h1 img {
	width: 800px;	/*画像幅*/
	margin: 40px auto 40px;	/*ロゴの上と下に40pxスペースを空けている*/
}

/*トップページのメイン画像
----------------*/
/*画像ブロック*/
header img {
	border-radius: 10px;	/*角を丸くする指定。この１行を削除で角丸がなくなる。*/
}

/*メニュー
----------------*/
/*メニュー全体を囲むブロック*/
nav {
	text-align: center;		/*文字をセンタリング*/
	font-size: 18px;		/*文字サイズ*/
	margin-top:30px;		/*上に空けるスペース*/
	margin-bottom: 30px;	/*下に空けるスペース*/
}
/*メニュー１個あたりの設定*/
nav li {
	display: inline;	/*横並びにする設定*/
}
nav li a {
	text-decoration: none;
	padding: 10px 20px;	/*各メニュー内の余白。上下に10px、左右に20pxあけている。*/
}

/*コンテンツ（見出しバーや文字などが入っているブロック）
----------------*/
/*コンテンツのh2タグの設定*/
#contents h2 {
	clear:both;
			/*文字色*/
	padding: 10px 20px;	/*上下、左右への余白*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
	margin-top: 20px;/*kesu★★★。*/
}

.submenu{
	background-color: #fff;
	width: 960px;
	margin: 0 auto;
	/* boxを横並びにする */
	display: flex;
	/* .boxが幅の端まで来たら折り返し */
	flex-wrap: wrap;
  }
.box{
	/* 個々のbox */
	width: 300px;
	height: 200px;
	/* box同士の間隔を開ける */
	margin: 10px;
  }

/*フッター(ページ最下部のcopyrightのパーツ)設定
----------------*/
footer {
	clear: both;
	text-align: center;	/*文字をセンタリング*/
	padding: 30px 0px 10px;	/*上、左右、下へのボックス内の余白*/
	/*kesu★★★。*/
	color: #fff;
}

/*その他
----------------*/
.look {background: #e5e5e5;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color: #546247;}
.pr {font-size: 12px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}



/*画面幅580px以下の設定
----------------*/
@media screen and (max-width:580px){

/*全体の設定
----------------*/
body {
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*メニュー
----------------*/
/*メニュー１個あたりの設定*/
nav li {
	display: block;	/*縦並びにする設定*/
	margin-bottom: 10px;
}
nav li a {
	text-decoration: none;
	padding: 8px 30px;	/*各メニュー内の余白*/
}

/*サブメニュー
----------------*/
/*3画像の大きさ調整*/
.submenu{
	width: 580px;
	height:110px;
	margin-bottom: 10px;
	background-color: transparent;/* 背景を透明に指定 */
}
.box{
	width: calc(37% / 1.6); /* 3画像の調整　100%幅を1.6で割る指定 */
}
}