@charset "UTF-8";
/* CSS Document */

/* ========== COMMON ========== */
body { background: #f5f2f0; }
body.after, body.after header, body.after footer { background: #fff5d7; }
body.movie, body.movie header, body.movie footer { background: #fafdef; }

/* ========== HEADER ========== */
header { text-align: center; border-top: 20px solid #3a8a53; }

/* ========== FOOTER ========== */
footer { text-align: center; }

/* ========== ARTICLE ========== */
article .catch, article h2 { text-align: center; font-weight: bold;  }
article h2 { color: #3a8a53; }
article font { color: #3e3a39; }
article .link { display: block; }
article .link a { font-weight: bold; }
article h3 { text-align: center; font-weight: bold; }
article .btn { text-align: center; }
article .btn a { color: #3a8a53; font-weight: bold; background: #ffffff; display: inline-block; border: 3px solid #3a8a53; border-radius: 10px; }
article h3.pg { color: #3a8a53; }
article .img { text-align: center; }

article .contact font { font-weight: bold; }

/* MOVIE */
.movie article h3 { text-align: left; }
.movie article .m_list .mov li p { color: #ffffff; line-height: 1; background: #3e3a39; display: inline; padding: 3px 10px; position: absolute; }

@media screen and (max-width:768px) {
	
	/* ========== HEADER ========== */
	header .inner { height: auto; padding: 20px 0 0; }
	header h1 { float: none; }
	header h1 img { width: auto; height: 150px; }
	header h1.title { font-size: 2.6rem; font-weight: bold;}
	
	/* ========== FOOTER ========== */
	footer { padding: 0 0 10px; }
	footer .link { font-size: 1.6rem; margin-bottom: 10px; }
	footer div img { width: auto; height: 80px; }
	
	/* ========== ARTICLE ========== */
	article .catch { font-size: 1.6rem; margin-bottom: 10px; }
	article h2 { font-size: 2.6rem; line-height: 1; margin-bottom: 20px; }
	article h2 font { font-size: 1.8rem; }
	article .lead { margin-bottom: 20px; }
	article .lead p { margin-bottom: 1.0em; }
	article .link { font-size: 1.6rem; text-align: center; }
	article .link img { max-width: 200px; width: 50%; height: auto; margin-top: 10px; }
	article h3 { margin-bottom: 10px; }
	article .btn { margin-bottom: 10px; }
	article .btn a { max-width: 500px; width: 90%; padding: 8px 0; margin-bottom: 10px; }
	article .img img { width: 100%; height: auto; }
	
	/* ----- MOVIE ----- */
	.movie article .m_list .mov li { position: relative; /*width: 100%;*/ padding-top: 56.25%; margin-bottom: 50px; }
	.movie article .m_list .mov li iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }
	.movie article .m_list .mov li p { font-size: 1.2rem; bottom: -25px; right: 0; }
}

@media screen and (min-width:769px) {
	
	/* ========== HEADER ========== */
	header { height: auto; padding: 0px 0 0; }
	header h1 { position: relative; top: 0; left: 0; transform: translateX(0%); -webkit-transform: translateX(0%); -ms-transform: translateX(0%); }
	header h1 { margin: 65px 0 55px; }
	header h1.title { font-size: 5.6rem; font-weight: bold;}
	
	/* ========== FOOTER ========== */
	footer .link { font-size: 1.6rem; margin-bottom: 30px; }
	
	/* ========== ARTICLE ========== */
	article .catch { font-size: 2.5rem; line-height: 1; margin-bottom: 25px; }
	article h2 { font-size: 5.6rem; line-height: 1; margin-bottom: 50px; }
	article h2 font { font-size: 3.0rem; }
	article .lead { width: 860px; margin: 0 auto 50px; }
	article .lead p { margin-bottom: 1.5em; }
	article .link { font-weight: bold; background: url("../../images/ev/logo_sumpo.png") no-repeat 515px 0; height: 35px; padding-top: 20px; }
	article h3.dl { margin-bottom: 20px; }
	article .btn { margin-bottom: 30px; }
	article .btn a { font-size: 1.9rem; width: 400px; padding: 13px 0; margin: 0 25px; }
	article h3.pg { margin-bottom: 10px; }
	article .img { margin-bottom: 20px; }
	
	/* ----- MOVIE ----- */
	.movie article h3 { margin-bottom: 15px; }
	.movie article .lead, .movie article .m_list { width: 1000px; margin: 0 auto 50px; }
	.movie article .m_list .mov li { display: block; float: left; width: 310px; height: 230px; padding: 0; margin: 0 35px 0 0; position: relative; }
	.movie article .m_list .mov li:nth-child(3n) { margin: 0; }
	.movie article .m_list .mov li iframe { width: 310px; height: 185px; }
	.movie article .m_list .mov li p { font-size: 1.4rem; right: 0; bottom: 20px; }
}