@charset "UTF-8";
@import "../css/style.css";

div.youtube {
width: 50%;
margin: 100px auto;
}

div.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
div.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width : 767px) {
div.youtube {
width: 90%;
margin: 50px auto;
}
}

/* --------------------------------------------------
	GLOBAL HEADER
-------------------------------------------------- */

header#globalHeader { height: 154px; background: #fff; text-align: center; }
header#globalHeader img { margin: 26px 0 0 0; }

@media screen and (max-width : 767px) {
header#globalHeader { height: auto; }
header#globalHeader img { margin: 20px 0 15px 0; width: 80px; height: auto; }
}

/* --------------------------------------------------
	CONTENTS
-------------------------------------------------- */

div#main { margin: 0 0 60px 0; width: 100%; position: relative; }
div#main img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1; }
div#main div#message { width: 100%; color: #fff; text-align: center; position: absolute; bottom: 5%; z-index: 2; }
div#main div#message strong { margin: 0 0 0.2em 0; font-size: 240%; display: block; }
div#main div#message p { margin: 0; padding: 0; }
div#group { margin: 0 auto 10px auto; width: 1000px; }
div#group ul { margin: 0; padding: 0; width: 1035px; list-style: none; }
div#group li { margin: 0 35px 62px 0; width: 310px; border-bottom: solid 1px #797979; text-align: center; float: left; }
div#group li a {}
div#group li a:hover { text-decoration: none; }
div#group li img { margin: 0 0 10px 0; vertical-align: top; display: block; }
div#group li strong { color: #333; font-size: 130%; display: block; }
div#group li span { margin: 0 0 10px 0; color: #57b897; font-size: 80%; font-weight: 700; display: block; }
div#group li span.category { margin: 0; padding: 4px; width: 306px; color: #fff; font-size: 100%; font-weight: 400; line-height: 1.3; vertical-align: middle; display: table-cell; }
div#group li span.kyuhoku { background: #63c95b; }
div#group li span.systec { background: #fdac49; }
div#group li span.nippo { background: #3485c4; }
div#group li span.wakato { background: #f46565; }
div#group li span.kosan { background: #fe94ee; }
div#group ul.beta { margin: 0 auto; width: 692px; }
div#group ul.beta li { margin: 0 18px 62px 18px; }

@media screen and (max-width : 767px) {
div#main { margin: 0 0 30px 0; }
div#main div#message strong { font-size: 150%; }
div#main div#message p { display: none; }
div#group { margin: 0 15px; width: auto; }
div#group ul { margin: 0 auto; width: 290px; }
div#group li { margin: 0 0 20px 0; width: 290px; }
div#group li img { width: 100%; height: auto; }
div#group li strong { font-size: 110%; }
div#group li span.category { height: auto !important; }
div#group ul.beta { width: 290px; }
div#group ul.beta li { margin: 0 0 20px 0; }
}