@import url(base.css);
@import url(common.css);
@import url(lib.css);
/* ---------------------------------
INDEX
---------------------------------- */
body.page_index .scroll {
  display: none;
  text-align: center;
  position: absolute;
  top: 727px;
  left: 50%;
  transform: translate(-50%, 0);
}

  .live_thumb li{
  	width:47.5%;
  	text-align:center;
  	
  	margin-left:10px;
  	margin-right:10px;
  	margin-bottom:30px;
	float:left;
  }

.cf:before, .cf:after {
    content:"";
    display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* For IE 6/7 */
  
  .tit05 {
    font-size: 16px;
    background: #215095;
    padding: 10px;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
  body.page_index .scroll {
    display: none;
  }
  
  .live_thumb li{
  	width:100%;
  	text-align:center;
  	margin-bottom:30px;
  }
  
}
body.page_index .scroll span {
  color: #fff;
  letter-spacing: .2em;
  font-size: 0.8em;
  /*margin-bottom:.3em;*/
  font-family: jaf-domus-titling-web, sans-serif;
}
body.page_index .scroll .line {
  /*background: #fff;*/
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
body.page_index .scroll .line:before {
  content: '';
  display: block;
  background: #fff;
  width: 1px;
  height: 40px;
}
body.page_index .scroll .line:after {
  content: '';
  display: block;
  background: #132e56;
  width: 1px;
  height: 30px;
  position: absolute;
  animation: scroll 2s ease infinite both;
}
@keyframes scroll {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}
body.page_index header {
  position: static !important;
}
body.page_index header #header {
  margin-bottom: 50px;
  padding-bottom: 50px;
  border-bottom: solid 20px #132e56;
}
@media screen and (max-width: 640px) {
  body.page_index header #header {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: solid 10px #132e56;
  }
}
body.page_index header #header .mainv {
  width: 100%;
  height: 800px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  body.page_index header #header .mainv {
    height: 540px;
    background: url(../img/sp/index/topbg.jpg) no-repeat 0 50%;
    background-size: cover;
  }
}
body.page_index header #header .mainv h1 {
  position: absolute;
  width: 500px;
  height: 540px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 640px) {
  body.page_index header #header .mainv h1 {
    width: 320px;
    height: 346px;
  }
}
body.page_index header #header .mainv h1 img {
  width: 100%;
}
body.page_index header #header .mainv #main-slide {
  width: 100%;
}
@media screen and (max-width: 640px) {
  body.page_index header #header .mainv #main-slide {
    display: none;
  }
}
body.page_index header #header .mainv #main-slide li {
  width: 100% !important;
  height: 800px;
}
body.page_index header #header .mainv #main-slide .scale {
  animation: slide 10s ease both;
  width: 100%;
  min-width: 1600px;
  min-height: 800px;
}
@keyframes slide {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}
@keyframes slidebg {
  0% {
    background-size: 120%;
  }
  100% {
    background-size: 128%;
  }
}
body.page_index header #header .mainv .bx-wrapper {
  border: none !important;
  box-shadow: none !important;
  z-index: -1;
}
body.page_index header #header .schedule {
  margin-bottom: 30px;
}
@media screen and (max-width: 640px) {
  body.page_index header #header .schedule {
    position: relative;
    top: -75px;
    width: 300px;
    margin: 0 auto;
    margin-bottom: -55px;
  }
}
body.page_index header #header .schedule img {
  width: 100%;
}
@media screen and (max-width: 640px) {
  body.page_index nav#gnav p.sitename2 {
    position: relative;
    width: 120px;
    top: -8px;
    left: -8px;
    margin-bottom: 15px;
  }
}
body.page_index nav#gnav p.sitename2 a {
  display: block;
}
body.page_index nav#gnav p.sitename2 a img {
  width: 100%;
}
body.page_index nav#gnav aside {
  margin-bottom: 50px;
  z-index: 111;
}
body.page_index .applycation {
  width: 500px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  body.page_index .applycation {
    width: 100%;
  }
}
body.page_index .applycation a {
  display: block;
  transition: .3s;
}
body.page_index .applycation a:hover {
  opacity: 0.7;
  transition: .3s;
}
body.page_index .applycation a img {
  width: 100%;
}
body.page_index .container article.art01 {
  width: 800px;
  margin: 0 auto;
  margin-bottom: 100px;
}
@media screen and (max-width: 640px) {
  body.page_index .container article.art01 {
    width: 100%;
    margin-bottom: 30px;
  }
}
body.page_index .container article.art01 .movie {
  width: 640px;
  height: 360px;
  background: #ccc;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  body.page_index .container article.art01 .movie {
    width: 100%;
    height: inherit;
    background: none;
  }
  body.page_index .container article.art01 .movie iframe {
    width: 100%;
    height: 220px;
  }
}