@charset "utf-8";

body {
/*
	background:linear-gradient(to right, #00ccff, #ccffff);
	background:linear-gradient(#05FBFF, #1E00FF);
*/
	background-color: #ffffff;
}

.hgpop100-font {
	font-family: 'HGS創英角ﾎﾟｯﾌﾟ体', 'UD Digi Kyokasho NP-B', 'HGS創英角ﾎﾟｯﾌﾟ体', 'メイリオ';
	font-size: 100%;
}

.hgpop120-font {
	font-family: 'HGS創英角ﾎﾟｯﾌﾟ体', 'UD Digi Kyokasho NP-B', 'HGS創英角ﾎﾟｯﾌﾟ体', 'メイリオ';
	font-size: 120%;
}

.hgpop140-font {
	font-family: 'HGS創英角ﾎﾟｯﾌﾟ体', 'UD Digi Kyokasho NP-B', 'HGS創英角ﾎﾟｯﾌﾟ体', 'メイリオ';
	font-size: 140%;
}

dl {
	display: flex;
	flex-wrap: wrap;
}

dt {
	width: 20%;
}

dd {
	width: 80%;
}


.container {
	border: solid 1px red;
/*
	background:linear-gradient(#05FBFF, #1E00FF);
*/
	background: linear-gradient(#ccffff, #cceeff);
}

.title {
	display: block;
	font-family: "UD Digi Kyokasho NP-B";
	color: yellow;
	margin-bottom: 10px;
	font-size: 40px;
	text-shadow: 1px 1px 0 #000,
		     -1px 1px 0 #000,
		     1px -1px 0 #000,
		     -1px -1px 0 #000;
	text-shadow: 1px 1px 1px #000,
		     -1px 1px 1px #000,
		     1px -1px 1px #000,
		     -1px -1px 1px #000;
}

/* スマホ対応、小さいがめんで見た時にフォントサイズを変更する */
    @media screen and (max-width:800px) {
        /*　画面サイズが800px以下の場合読み込む　*/
        h1 { font-size:20pt;}
        h2 { font-size:20pt;}
    }
    @media screen and (min-width:800px){
        /*　画面サイズが768px以上の場合読み込む　*/
        h1 { font-size:32pt;}
        h2 { font-size:20pt;}
    }

/* 見出しを作る */
h2 {
	color: #364e96;/*文字色*/
	border: solid 3px #364e96;/*線色*/
	padding: 0.5em;/*文字周りの余白*/
	border-radius: 0.5em;/*角丸*/
	background-color: #00ccff;
}

h3 {
	/* 下線を引く。線の種類（実線） 太さ 色*/
	border-bottom: solid 3px black;
	font-size: 18px;
}

/* 先頭一文字空白を空ける。段落の余白を削除 */
p {
	text-indent: 1rem;
	margin-bottom: 0;
	/* 左に余白 */
	margin-left: 0.5rem;
}

th {
	text-align: center;
	width: 8em;
	height: 3em;
	/* height: 4em; */
}

td {
	text-align: center;
	width: 8em;
}

/* 枠線が見えないので */
table,th,td{
	border: solid	1px darkgray !important;
}

caption {
	caption-side: top;
	font-size: 120%;
	color: black;
}


.outline {
  color          : #00007f;            /* 文字の色 */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       1px  1px 0px #ffffff,
      -1px  1px 0px #ffffff,
       1px -1px 0px #ffffff,
      -1px -1px 0px #ffffff,
       1px  0px 0px #ffffff,
       0px  1px 0px #ffffff,
      -1px  0px 0px #ffffff,
       0px -1px 0px #ffffff;        /* 文字の影 */
}

/* 「Page Top」ボタンの作成 */
.upper{
	position:fixed;
	right:50px;
	bottom:50px;
	transition:1s;
	opacity:0.7;
	x-index: 100;
}

.upper:hover{
	opacity:1;
}

/* 「ホームに戻る」ボタンの作成 */
.button{
	display: inline-block;
	width: 210px;
	height: 36px;
	border-top: solid 1px black;
	border-left: solid 1px black;
	border-right: solid 4px #626262;
	border-bottom: solid 4px #313131;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	background: linear-gradient(to right, #00bfff, #00ffff);
/*
	background: linear-gradient(to right, #0033ff, #00ffff);
*/
	color: #fff;
	font-weight: bold;
}

/* オンマウスで「ホームに戻る」ボタンの色を変える */
.button:hover{
	background: #00ffff;
}

/* 「ホームに戻る」文字列の縁取り */
.liner{
	text-shadow: 1px  1px 0 #000000,
		    -1px  1px 0 #000000,
		     1px -1px 0 #000000,
		    -1px -1px 0 #000000;
}

/* 「ホームに戻る」ボタンの位置決め */
.rtn {
	margin-top: 20px;
	margin-bottom: 40px;
	text-align: center;
}

.thumbnail {
    display: inline-block; /* ここがポイント */
    height: 200px;
    margin-right: 15px;
    margin-bottom: 15px;
}
.thumbnail img {
    height: 100%;
}

.w3h2 {
	width: 300px;
	height: 220px;
}