@charset "utf-8";

@media screen and (min-width: 768px){
	.only_sp { display: none; }
.wrapper { background: #282828; color: #fff; font-size: 10px; line-height: 1.8; margin: 0 auto; padding-bottom: 180px; width: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased}
.wrapper a:link { text-decoration: none; color: #fff}
.wrapper a:visited { text-decoration: none; color: #fff}
.wrapper a:hover { text-decoration: underline; color: #fff}

.section { position: relative; width: 1215px; margin: 0 auto 60px}
.section ul { display: flex; justify-content: space-between; margin: 0; }
.section ul li { width: calc(100% / 2 - 7px);box-sizing: border-box; }
.section ul li.long { width: 100%; }
.section ul li > a { display: block; }
.section ul li img { width: 100%; height: auto; }
/* .section ul li p { text-align: right; margin: 20px auto 0; } */
.section .text { margin-top: 20px; font-size: 10px; text-align: center; letter-spacing: .14em;}

.wrapper p.check { margin: 0 auto; text-align: center; width: 470px}
.wrapper p.check a { background: #fff; color: #282828; display: inline-block; font-size: 14px; font-weight: bold; letter-spacing: 0.05em; padding: 10px; position: relative; width: 465px; text-decoration: none; box-sizing: border-box; transition: background 1s ease}
.wrapper p.check a:after {
  position: absolute;
  top: 50%;
  left: 92%;
  transform: translateY(-50%);
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #282828;
  transition: all .4s;
}
.wrapper p.check a:hover { text-decoration: none}

.wrapper p.bnnr { margin: 120px auto 0; text-align: center; width: 600px; }
.wrapper p.bnnr + p.bnnr { margin-top: 60px; }
.wrapper p.bnnr img { width: 100%; height: auto; }


.mainVisual { width: 100%; margin: 0 auto; opacity: 0;}
.mainVisual { animation: fadein-main 2.5s ease 0.5s 1 forwards}
.mainVisual { position: relative; width: 1220px; margin: 0 auto 55px; text-align: center; }
.mainVisual .pic { margin: 0 auto 40px; }
.mainVisual .pic img { max-width: 100%; }
.mainVisual .logo { margin: 0 auto 26px; }
.mainVisual .logo img { width: 340px; }

@-webkit-keyframes fadein-main {
	100%  { opacity: 1}
}

@keyframes fadein-main {
	100%  { opacity: 1}
}

a.rollover img { transition:opacity 0.35s; backface-visibility: hidden}
a.rollover:hover img { opacity: 0.8}

}
@media screen and (max-width: 767px){
	.only_pc { display: none; }
.PageWrapper { background: #282828; width: 100%; margin: 0 auto; color: #fff; font-size: 10px; /*letter-spacing: 0.05em;*/ line-height: 1.4em; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased}
.PageWrapper a:link { text-decoration: none; color: #fff}
.PageWrapper a:visited { text-decoration: none; color: #fff}
.PageWrapper a:hover { text-decoration: underline; color: #fff}
.PageWrapper a.bottom { display: inline-block; margin-top: 8px}

a.rollover, a img.rollover { transition: opacity 0.5s; backface-visibility: hidden}
a.rollover:hover, a img.rollover:hover { opacity: 0.75}


.mainVisual { opacity: 0; margin: 0 auto 35px;}
.mainVisual img { width: 100%; height: auto}
.mainVisual { animation: fadein 1.5s ease 0.5s 1 forwards}
.mainVisual .logo { margin: 40px 0 20px; text-align: center; }
.mainVisual .logo img { width: 300px; }

@-webkit-keyframes fadein {
	100% { opacity: 1}
}

@keyframes fadein {
	100% { opacity: 1}
}

.PageWrapper .name { margin: 10px auto 0 !important}
.PageWrapper .name span { display: inline-block; padding-bottom: 6px}

.section {
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0;
  box-sizing: border-box;
}
.section ul {
  margin: 0;
}
.section ul li {
  line-height: 1;
}
.section ul li img {
  display: block;
  max-width: 100%;
}
.section .text {
  margin-top: 20px;
  font-size: 11px;
  text-align: center;
  line-height: 1.7;
}
.section ul li .text {
  margin-bottom: 50px;
}

.pagetop { position: fixed; bottom: 0; right: 0; z-index: 2}
.pagetop a { background: #212121; color: #fff; display: inline-block; padding: 20px; position: relative; text-indent: -9999px; width: 30px; height: 30px; box-sizing: border-box}
.pagetop a:after { position: absolute; top: 6px; bottom: 0; left: 14px; margin: auto; content: ""; vertical-align: middle; width: 10px; height: 10px; border: 1px solid; border-color: #fff #fff transparent transparent; transform: rotate(-45deg); transition: all .2s}
.pagetop:hover a:after { top: 0}
#hide { display: none !important}


.PageWrapper p.check { margin: 0 auto; text-align: center}
.PageWrapper p.check a { background: #fff; color: #282828; display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; padding: 24px; position: relative; width: 86.666%; text-decoration: none; box-sizing: border-box; transition: background 1s ease}
.PageWrapper p.check a:after {
  position: absolute;
  top: 50%;
  left: 92%;
  transform: translateY(-50%);
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 6px;
  border-color: transparent transparent transparent #282828;
  transition: all .4s;
}

.PageWrapper p.bnnr { margin: 26px auto 0; }
.PageWrapper p.bnnr + p.bnnr { margin-top: 16px; }

.PageWrapper p.bnnr img { width: 100%; height: auto; }



.video_wrap { position: relative; width: 100%; margin: 0 auto 80px}
.video { position: relative; width: 100%; padding: 56.25% 0 0}
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}

}
/* 新サーバー追加 */
#container { background:#282828; padding-bottom:11.11vw; }
#container + .gfooter { margin-top:0; }	
.wrapper { position:unset; }