@charset "utf-8";
/* CSS Document */

article, aside, details, figcaption, figure, header, hgroup, menu, nav, section {
	display: block;
}


body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォントを変更します*/
	color:#ffe033; /*色を変更します*/
	line-height:25px; /*行間を25pxに指定します*/
	font-size:0.95em; /*フォントサイズを変更します*/
	background-color: black;
}


img {
	border:0px; /*画像ファイルの周囲に枠線が表示されるのを防ぎます*/
	  display: block;
  max-width: 100%;
  height: auto;
}



/*リンク色の変更と装飾*/

a {
text-decoration:none;
}

a:link {
color:#f00;
}

a:visited {
color:#a7f;
}

a:hover {
color:#aaa;
text-decoration:underline;
}

a:active {
color:#fff;
}





/*h要素*/

h1 {
	font-size:1.4em; /*フォントサイズを変更します*/
	margin:10px 0px 0px 10px; /*領域間余白を0pxに指定します*/
	text-align:left;
}

h2 {
	font-size:1.0em; /*フォントサイズを変更します*/
	margin:0px 0px 10px 10px; /*領域間余白を下方向以外0pxに指定します*/
text-align:center;
}

p {
	font-size:1.0em; /*フォントサイズを変更します*/
	margin:10px 0px 0px 10px; /*領域間余白を0pxに指定します*/
	text-align:center;
}



#wrap {
	max-width:1000px;
	margin:0 auto; /*領域間余白を0pxに指定し、中央寄せにします*/

}



/*ヘッダー*/


#menu {
	margin:10px; /*領域間余白を0pxに指定します*/
	padding:10px; /*領域内余白を0pxに指定します*/
		width: 440px;
	margin: auto;
	overflow: hidden;
}

#menu li {
	float:left; /*回り込みさせます*/
	list-style-type:none; /*リストスタイルを無しにします*/
	margin:10px; /*領域間余白を0pxに指定します*/
}





/*メインビジュアル*/

#mainimg {
	margin: 10px 0px 15px 0px; /*上方向に10pxの領域間余白を、下方向に15pxの領域間余白を指定します*/
}



/*コンテンツ*/

#contents {
	max-width:1000px;
	margin:0 auto;/*横幅615pxを指定します*/
}


#newsbox {
	width:device-width; /*横幅は615pxですが、paddingを10px（左右合計20px）、borderを1px（左右合計2px）指定しているため、615-22=593となります。そのため、heightは593pxを指定します*/
	height:auto; /*縦幅を自動的に調整します*/
	border:solid 1px #aaa; /*上下左右に1px、#CCCの1本線を表示します*/
	padding:10px; /*上下左右に10pxの領域内余白を指定します*/
	margin-bottom:15px; /*下方向に15pxの領域間余白を指定します*/
	background-color:#FFF; /*背景色を#FFFにします*/
}

#newsbox p {
	border-bottom:dashed  1px #CCC; /*newsboxの中のpにだけ、下線を表示します*/
}


.contentsbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 5px;
	}
	
.contentsbox2 {
	width:device-width; /*横幅は615pxですが、paddingを10px（左右合計20px）、borderを1px（左右合計2px）指定しているため、615-22=593となります。そのため、widthは593pxを指定します*/
	height:auto; /*縦幅を自動的に調整します*/
	border:solid 0px #000; /*上下左右に1px、#CCCの1本線を表示します*/
	padding:2px; /*上下左右に10pxの領域内余白を指定します*/
	margin-bottom:2px; /*下方向に15pxの領域間余白を指定します*/
		background-color:#000; /*背景色を#FFFに指定します*/
		text-align:center;
	}
	
.text1 {
	color:#aaa;
	font-size:4.2em;
	}

.minibox {
	width:135px; /*135pxの横幅を指定します*/
	height:135px; /*135pxの縦幅を指定します*/
	margin:0px 10px 10px 0px; /*右方向、下方向に10pxの領域間余白を指定します*/
	float:left;
}

.imagebox {
  background: #000;
  padding: 1px;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 1fr;
  justify-items: center;
  
}
p.image, p.caption {
   text-align: center; /* 3.中央寄せ */
   margin: 0px;        /* 4.余白・間隔 */
}
p.caption {
   font-size: 100%;  /* 5.文字サイズ */
   color:#ffe033; /* 6.文字色 */
}


.midashi {
	border-bottom:dashed 2px #C30; /*下に2px、#C30の破線を表示します*/
	font-weight:bold; /*太字にします*/
	color:#C30; /*色を変更します*/
	font-size:1.2em; /*フォントサイズを変更します*/
}





.clear {
	clear:both;　/*回り込み要素を解除します*/
}





/*フッター*/

footer {
	clear:both; /*回り込みを解除します*/
	height:50px; /*縦幅は80pxですが、padding-topを30px指定しているため、80-30=50となります。そのため、heightは50pxを指定します*/
	padding-top:30px; /*要素内余白を上だけ30pxに指定します*/
	text-align:center; /*テキストを中央寄せにします*/
	font-size:0.85em; /*テキストのサイズを変更します*/
	display:block; /*ブロック要素として認識させます*/
}