@charset "utf-8";
@import url("base.css");

/*共通設定*/
.h2_bottom{
	text-align:center;
}
.sub{
	font-size:80%;
	margin:0 0 0 2%;
	}
.photo{
	margin: 1em auto;
}


/* pc */
@media screen and (min-width: 1280px)  {

/*メイン*/
section{
	width:100%;
	}
article{
	width:1200px;
	margin:0 auto 3em auto;
	}
article h1{
	width:100%;
	font-size:220%;
	color:#0196ff;
	background-color:#e2f4ff;
	}
article h1 img{
	width:40%;
	vertical-align:middle;
	padding:0 2% 0 0;
	}
article h2{
	text-align:center;
	font-size:150%;
	font-weight:bold;
	margin:2em 0 0.5em 0;
	}
article h3{
	font-size:120%;
	font-weight:bold;
	margin:0 0 0.5em 0;
	color:#0196ff;
	font-weight:bold;
	}
article .photo{
	width: 60%;
	}
article .photos{
	width:62%;
	margin:0 30% 1em 18%;
	}
article .photos li{
	float:left;
	width:48%;
	margin:2em 0 0 2%;
	}

}


/* tablet1 */
@media only screen and (min-width: 1024px) and (max-width: 1279px)  {

/*メイン*/
section{
	width:100%;
	}
article{
	width:96%;
	margin:0 2% 3em 2%;
	}
article h1{
	width:100%;
	font-size:220%;
	color:#0196ff;
	background-color:#e2f4ff;
	}
article h1 img{
	width:40%;
	vertical-align:middle;
	padding:0 2% 0 0;
	}
article h2{
	text-align:center;
	font-size:150%;
	font-weight:bold;
	margin:2em 0 0.5em 0;
	}
article h3{
	font-size:120%;
	font-weight:bold;
	margin:0 0 0.5em 0;
	color:#0196ff;
	font-weight:bold;
	}
.photo{
	width: 80%;
	}
article .photos{
	width:62%;
	margin:0 30% 1em 18%;
	}
article .photos li{
	float:left;
	width:48%;
	margin:2em 0 0 2%;
	}
}


/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

/*メイン*/
section{
	width:100%;
	margin:7em 0 0 0;
	}
article{
	width:96%;
	margin:0 2% 3em 2%;
	}
article h1{
	width:100%;
	font-size:220%;
	color:#0196ff;
	background-color:#e2f4ff;
	}
article h1 img{
	width:40%;
	vertical-align:middle;
	padding:0 2% 0 0;
	}
article h2{
	text-align:center;
	font-size:150%;
	font-weight:bold;
	margin:2em 0 0.5em 0;
	}
article h3{
	font-size:120%;
	font-weight:bold;
	margin:0 0 0.5em 0;
	color:#0196ff;
	font-weight:bold;
	text-align:center;
	}
.photo{
	width: 80%;
	}
article .photos{
	width:82%;
	margin:0 10% 1em 8%;
	}
article .photos li{
	float:left;
	width:48%;
	margin:2em 0 0 2%;
	}
}

/* tablet2  */
@media only screen and (min-width: 500px) and (max-width: 767px) {

/*メイン*/
section{
	width:100%;
	margin:7em 0 0 0;
	}
article{
	width:96%;
	margin:0 2% 3em 2%;
	}
article h1{
	width:100%;
	font-size:200%;
	color:#0196ff;
	position:relative;
	z-index:-1;
	}
article h1 img{
	width:100%;
	vertical-align:middle;
	padding:0 2% 0 0;
	}
article .title{
	width:98%;
	text-align:right;
	display:block;
	padding:0 2% 0 0;
	position:absolute;
	background-color: rgba(255,255,255,0.70);
	top: -100%;
	left: -100%;
	right: -100%;
	bottom: -100%;
	margin: auto;
	height: 1.5em;
	}
article h2{
	text-align:center;
	font-size:150%;
	font-weight:bold;
	margin:2em 0 0.5em 0;
	}
article h3{
	font-size:120%;
	font-weight:bold;
	margin:0 0 0.5em 0;
	color:#0196ff;
	font-weight:bold;
	text-align:center;
	}
.photo{
	width: 80%;
	}
article .photos{
	width:102%;
	margin:0 0 1em -2%;
	}
article .photos li{
	float:left;
	width:48%;
	margin:2em 0 0 2%;
	}
}

/* smartPhone1 */
@media screen and (max-width: 499px) {

/*メイン*/
section{
	width:100%;
	margin:7em 0 0 0;
	
	}
article{
	width:96%;
	margin:0 2% 2em 2%;
	}
article h1{
	width:100%;
	font-size:200%;
	color:#0196ff;
	position:relative;
	z-index:-1;
	}
article h1 img{
	width:100%;
	vertical-align:middle;
	padding:0 2% 0 0;
	}
article .title{
	width: 98%;
	text-align: right;
	display: block;
	padding: 0 2% 0 0;
	position: absolute;
	background-color: rgba(255,255,255,0.70);
	top: -100%;
	left: -100%;
	right: -100%;
	bottom: -100%;
	margin: auto;
	height: 1.5em;
	}
article h2{
	text-align:center;
	font-size:150%;
	font-weight:bold;
	margin:2em 0 0.5em 0;
	}
article h3{
	font-size:130%;
	font-weight:bold;
	margin:0.25em 0 0.5em 0;
	color:#0196ff;
	font-weight:bold;
	text-align:center;
	}
.photo{
	width: 80%;
	}
article .photos{
	width:100%;
	margin:1em 0 0 0;
	}
article .photos li{
	width:100%;
	margin:0 0 1em 0;
	}
}