@charset "utf-8"; 

/* 
Mainタグ内のデザインを記述する。

wysiwygエディターでも使用する。

各ページ固有のデザイン（トップページなど）は、各ページのヘッダー内の<style>タグ内に記述する。

wysiwygエディターで使用するタグには、『ID』や『クラス』を振らないように。
wysiwygエディターを使用しないページ（エリア）は『ID』や『クラス』を設定して良い。

wysiwygエディター使用タグ	h1, h2, h3, p, strong, em, u, ol, ul, li, a, img 
*/


/* セクショニング
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section, article, aside { margin:1em auto; padding:1em; }

/* カラム数指定 */
.grid { display:grid; gap:1em; padding:1em 0; }
.col-2 { grid-template-columns:repeat(2, 1fr); }
.col-3 { grid-template-columns:repeat(3, 1fr); }
.col-4 { grid-template-columns:repeat(4, 1fr); }

.card { background:#fff; padding:2em; border-radius:8px; text-align:center; box-shadow:0 1px 3px var(--dark_gray); }

.box01 { padding:1em; border:1px solid var(--main_color); box-shadow:0 1px 3px var(--dark_gray); }
.box02 { padding:1em; background-color:var(--light_gray); border-radius:0.5em; }
.box03 { padding:1em; border:3px dotted var(--accent_color); }


/* 見出し
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#pagetitle { margin:1em auto; }
#pagetitle h1 { font-size:2em; }

main h1 { font-size:1.6em; margin:0 0 1em; padding:0.3em; background-color:var(--base_color);
	font-family:"Noto Serif JP", serif;
	font-optical-sizing:auto;
	font-weight:900;
	font-style:normal;
 } 

main h1 img { width:100%; }

main h2 { font-size:1.4em; margin:0 0 1em; padding:0.3em; background-color:var(--sub_color); color:#000;
	border-left:0.5em solid var(--main_color);
	font-optical-sizing:auto;
	font-weight:bold;
 }

main h3 { font-size:1.2em; margin:0 0 1em; padding:0.2em 0; color:var(--main_color); 
	font-family:"M PLUS Rounded 1c", sans-serif;
	font-weight:500;
}

main h4 { font-size:1em; margin:0 0 1em; padding:0.1em 0.5em; border-left:4px solid var(--accent_color); }


/* テキスト インライン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main p { margin:0 0 1em; padding:0.2em 0; text-indent:1em; }

main strong { color:var(--accent_color); }
main em { font-style:normal; font-weight:bold; color:var(--main_color); }
main small { font-size:78%; font-weight:normal; }


.R { text-align:right; }
.L { text-align:left; }
.C { text-align:center; }


/* リンク
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main a { border:none; outline:none; color:var(--link_color); text-decoration:none; }
main a:hover { text-decoration:none; opacity:0.6; }
main a img:hover { opacity:0.8; filter:alpha(opacity=80); }


/* リスト
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main ul, ol { padding:0 2em 1em; }
main dt { font-weight:bold; }
main dd { margin-left:1em; }


/* 表
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table { border-collapse:collapse; width:98%; margin:1em auto; }
th, td { padding:0.3em; text-align:center; border:1px solid var(--main_color); }
th { background:var(--base_color); color:var(--main_color); }
td {  }


/* 画像
–––––––––––––––––––––––––––––––––––––––––––––––––– */
figure { margin:1em; }
figure img { width:100%; }
figcaption { text-align:center; font-size:0.8em; }

div img { width:100%; }


/* モニター幅1200px以下 */
@media only screen and (max-width:1200px) { 
	.col-4 { grid-template-columns:repeat(2, 1fr); }

}


/* スマートフォン 横(ランドスケープ) タブレット*/
@media only screen and (max-width:768px) { 
	.col-3 { grid-template-columns:repeat(2, 1fr); }

}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px) { 
	.container { grid-template-columns:1fr; }
}