/* モバイル向けのブレークポイントを600px以下と考える */
@media screen and (max-width: 410px){	/* スマホ想定 410px以下 */
	body {
  	font-family: "メイリオ", "ＭＳ Ｐゴシック", Verdana, "游ゴシック";
  	font-size: 13px;
  	line-height: 1.4em;
  	color: #111111;
  	padding: 0px;
  	margin: 0px;
  	text-align:center; 
	}
	.main { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
  	text-align:left;     /* 中身を左側表示に戻す */
 	width :100% ;
	}
	
	/* .box-h6Lと.box-h6Rは必ず単独で使用せよ */
	.box-h6L {  clear: both;
  	width :100%;
	}
	.box-h6R {  clear: both;
  	width :100%;
	}
	/* .box-hLと.box-hRは必ずセットで使用せよ */
	.box-hL {  clear: both;
  	width :100%;
	}
	.box-hR {  clear: both;
  	width :100%;
	}
	/* .box-h3-7Lと.box-h3-7Rは必ずセットで使用せよ */
	.box-h3-7L { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
  	width :60%;
	}
	.box-h3-7R { clear: both;
 	width :100%;
	}
	/* .box-h7-3Lと.box-h7-3Rは必ずセットで使用せよ */
	.box-h7-3L { clear: both;
 	width :100%;
	}
	.box-h7-3R { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
  	width :60%;
	}
	
	/* Good Shot専用 */
	.box-middle { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
 	width :100%;
	}
	/* 画像の上に文字をのせつつ、中央に置く指定 */
	.piled-up-char {/*親div*/
  		position: relative;/*相対配置*/
	}
	.piled-up-char p {
		width: 80%;
  		position: absolute; /*絶対配置*/
  		color: white;		/*文字は白に*/
  		top: 86%;
  		left: 50%;
  		transform: translate(-50%,0%);
  		padding:0;
  		margin:0;
	}

}

@media screen and (min-width: 411px) and (max-width: 900px){	/* タブレット想定 900px以下 */
	body {
  	font-family: "メイリオ", "ＭＳ Ｐゴシック", Verdana, "游ゴシック";
  	font-size: 14px;
  	line-height: 1.4em;
  	color: #111111;
  	padding: 0px;
  	margin: 0px;
  	text-align:center; 
	}
	.main { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
  	text-align:left;     /* 中身を左側表示に戻す */
 	width :100% ;
	}
	
	/* .box-h6Lと.box-h6Rは必ず単独で使用せよ */
	.box-h6L { float : left;
  	width : 60%;
	}
	.box-h6R { float : right;
  	width :60%;
	}
	/* .box-hLと.box-hRは必ずセットで使用せよ */
	.box-hL { float : left;
  	width :49.7%;
	}
	.box-hR {
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	width :49.7%;
	}
	/* .box-h3-7Lと.box-h3-7Rは必ずセットで使用せよ */
	.box-h3-7L { float : left;
  	width :35.7%;
	}
	.box-h3-7R {
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	width :63.5%;
	}
	/* .box-h7-3Lと.box-h7-3Rは必ずセットで使用せよ */
	.box-h7-3L { float : left;
  	width :63.5%;
	}
	.box-h7-3R {
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	width :35.7%;
	}
	
	/* Good Shot専用 */
	.box-middle { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
 	width :100%;
	}
	/* 画像の上に文字をのせつつ、中央に置く指定 */
	.piled-up-char {/*親div*/
  		position: relative;/*相対配置*/
	}
	.piled-up-char p {
		width: 65%;
  		position: absolute; /*絶対配置*/
  		color: white;		/*文字は白に*/
  		top: 90%;
  		left: 50%;
  		transform: translate(-50%,0%);
  		padding:0;
  		margin:0;
	}

}

@media screen and (min-width: 901px){	/* 801px以上 */
	body {
  	font-family: "メイリオ", "ＭＳ Ｐゴシック", Verdana, "游ゴシック";
  	font-size: 16px;
  	line-height: 1.4em;
  	color: #111111;
  	padding: 0px;
  	margin: 0px;
  	text-align:center; 
	}
	.main { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
  	text-align:left;     /* 中身を左側表示に戻す */
 	width :900px ;
	}
	
	/* .box-h6Lと.box-h6Rは必ず単独で使用せよ */
	.box-h6L { float : left;
  	width : 60%;
	}
	.box-h6R { float : right;
  	width :60%;
	}
	/* .box-hLと.box-hRは必ずセットで使用せよ */
	.box-hL { float : left;
  	width :49.7%;
	}
	.box-hR {
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	width :49.7%;
	}
	/* .box-h3-7Lと.box-h3-7Rは必ずセットで使用せよ */
	.box-h3-7L { float : left;
  	width :35.7%;
	}
	.box-h3-7R {
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	width :63.5%;
	}
	/* .box-h7-3Lと.box-h7-3Rは必ずセットで使用せよ */
	.box-h7-3L { float : left;
  	width :63.5%;
	}
	.box-h7-3R {
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	width :35.7%;
	}
	
	/* Good Shot専用 */
	.box-middle { clear: both;
  	margin-left:auto;    /* 左側マージンを自動的に空ける */
  	margin-right:auto;   /* 右側マージンを自動的に空ける */
 	width :95%;
	}
	/* 画像の上に文字をのせつつ、中央に置く指定 */
	.piled-up-char {/*親div*/
  		position: relative;/*相対配置*/
	}
	.piled-up-char p {
  		position: absolute; /*絶対配置*/
  		color: white;		/*文字は白に*/
  		top: 90%;
  		left: 50%;
  		transform: translate(-50%,0%);
  		padding:0;
  		margin:0;
	}

}

/* ↑↑↑↑ 画面サイズ別の指定の終了 ↑↑↑↑ */

/* blink (文字でも画像でもブリンクさせる)*/
/* 0.5毎に点滅を繰り返す */
.blink{
	-webkit-animation:blink .5s ease-in-out infinite alternate;
    -moz-animation:blink .5s ease-in-out infinite alternate;
    animation:blink .5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* タイトル部のFont */
h1 {
  	font-size: 150%;
  	line-height: 1.4em;
  	/*上下左右の中央にタイトルを表示*/
  	display: flex;			/*親要素にdisplay: flex;を設定*/
  	flex-direction: column;	/*子要素が複数あったら縦に並ぶ*/
  	justify-content: center;	/*縦方向の中央*/
  	align-items: center;		/*横方向中央*/
  	font-weight:bold;
  	color: #ffffff;
  	background: #648064;
}
h2 {
  	font-size: 125%;
  	line-height: 1.4em;
  	font-weight:bold;
 	  color:#111111;
} 
h4 {
  	font-size: 75%;
  	line-height: 1.4em;
  	color:gray;
} 

.caption {
  	font-size: 75%;
  	line-height: 1.4em;
  	color:gray;
}

.no-wrap {
    display: inline-block; /* インラインブロック化 */
}

.box {
  border:1px solid gray;
}

.box-center { clear: both;
  margin-left:auto;    /* 左側マージンを自動的に空ける */
  margin-right:auto;   /* 右側マージンを自動的に空ける */
  width :50%;
}
.box-left { float : left;
  width :50%;
}

.box-right { float : right;
  width :50%;
}

.section { clear: both;}

table.border, td.border, th.border {
  border-width:1px 1px 1px 1px;
  border-collapse: collapse;  /* 隣接するセルのボーダーを重ねて１本で表示します */
  border-style:solid;
  border-color:gray;
}
/* 境界線なし */
table, td, th { border:0px; }
/* 下線なし */
td.dw-non, th.dw-non {
  border-width:1px 1px 0px 1px;	 /* 上 右 下 左 */
}
/* 上線なし */
td.up-non, th.up-non {
  border-width:0px 1px 1px 1px;	 /* 上 右 下 左 */
}

/* 余白を左右に10Pxとる */
#pad {
  padding-left: 3px; /*     左右を3px空ける */
  padding-right: 3px;
}

/* Link要素のスタイル指定 ---------------------------------*/
a:link { color:#0000ff; text-decoration:underline;}     /*未訪問のアンカー*/
a:visited { color:#990000; text-decoration:underline;}  /*訪問済みのアンカー*/
a:active { color:#666666; text-decoration:none;}   /*選択中のアンカー*/
a:hover{ color:#ff0000;text-decoration: underline;}     /*マウスが通過しているアンカー*/