@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:#630; /*色を変更します*/
	line-height:25px; /*行間を25pxに指定します*/
	font-size:0.95em; /*フォントサイズを変更します*/
	background-color: #ffffff;
}


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



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

a {
text-decoration:none;
}

a:link {
color:#020;
}

a:visited {
color:#430;
}

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

a:active {
color:#050;
}





/*h要素*/

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

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

p {
	font-size:1.0em; /*フォントサイズを変更します*/
	margin:0px; 
	text-align:center;
}



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

}



/*ヘッダー*/



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


/*コンテンツ*/

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


.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:10px; /*上下左右に10pxの領域内余白を指定します*/
	margin-bottom:2px; /*下方向に15pxの領域間余白を指定します*/
		background-color:#fff; /*背景色を#FFFに指定します*/
		text-align:center;
	}
	
.text1 {
	color:#000;
	font-size:4.2em;
	}

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

.imagebox {
  background: #fff;
  padding: 1px;
  display: grid;
  grid-gap: 0px;
  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: #630; /* 6.文字色 */
}





.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; /*ブロック要素として認識させます*/
}