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

html,
body {
  height: 100%;
}

body {
overflow: auto;
background: #e79b02;
height: auto;
}


img{
	max-width: 100%;
	bottom: 0;
	height: auto;
	z-index: 111;
}


#loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

#loader .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000000;
 
}

#loader .loader-slide img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: auto;
}

#loader .loader-slide.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
}
@keyframes slideOut {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}


#loader1 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

#loader1 .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

#loader1 .loader-slide img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: auto;
}

#loader1 .loader-slide.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
}

@keyframes slideOut {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}


div {
  box-sizing: border-box;
  text-align: center;
  line-height: 50px;
}



.wra{
	width: 1920px;
	margin: 0 auto;
	position: relative;
}


.sb{
	width: 80%;
}


#frame {
    display: inline-grid;
	text-align: center;
	justify-content: center;
    align-items: center;
	position: relative;
}


.box1{
   width: 40%;
   margin-left: 25px;
   margin-right: auto;
   z-index: 555;
}


.section {
  clear: both;
}


.box {
width: 90%;
margin: 0 auto;
}


.box2, .box3, .box4, .box5, .box6 {
  float: left;
  width: 50%;
 padding: 10px 20px 10px 25px;
}

.box6 {
  width: 100%;
}

.moimg9 {
}
.moimg9 img{
    transition: 1.0s;
    transform: rotateZ( 0deg );
}
.moimg9:hover img {
    transform: rotateZ( 360deg );
}

.iframe-wrap {
  position: absolute;
  width: 100%;
  padding: calc(1080 / 1920 * 100%) 0 0; /* アイフレーム高さ　アイフレーム横幅 */
  padding-top: 56.25%;
}
 
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





footer{
	position: fixed;
    width: 100%;
    background-color: #000000;
    text-align: center;
    bottom: -270px; /*下に固定*/
    padding-bottom: 120px;/*←footerの高さ*/
    left: 0px;
    height: 168px;
	z-index: 600;
}



/*----------------------
TRAILER
----------------------*/

.trailer{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999;
    opacity: 0;
    display:none;
    transition-duration: 0.5s;
}

.trailer.on{
    opacity: 1;
}

.trailer_overlay{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    opacity: 1;
    z-index: 999997;
    transition-duration: 1s;
}

.close_btn{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 999999;
  transition-duration: 0.1s;
  opacity: 0;
  cursor: pointer;
}

.trailer.on .close_btn{
     opacity: 1;
}
.close_btn::before,
.close_btn::after {
  position: absolute;
  top: calc(50% - 1px);
  left: -1px;
  content: "";
  display: block;
  width: 30px;
  border-top: 3px solid #aaa;
}
 
.close_btn::before {
  transform: skewY(-45deg);
}
 
.close_btn::after {
  transform: skewY(45deg);
}

.close_btn:hover{
    opacity: 0.5 !important;
}

.trailer.on .trailer_overlay{
    opacity: 1;
}

.trailer .trailer_inner{
    position: absolute;
    top: calc(50% - 30px);
    left: 50%;
    transform: translate(-50%,-50%) scale(0.9,0.9);
    width: 80%;
	padding-bottom: 45%;
    height: 1;
    z-index: 999998;
    transition-duration: 0.5s;
}

.trailer.on .trailer_inner{
    transform: translate(-50%,-50%) scale(1,1);
}

#youtube1{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1,1);
    transition-duration: 1s;
    opacity: 1;
}

.trailer.on #youtube1{
    transform: scale(1,1);
    opacity: 1;
}




/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1040px) {
.pc { display: none !important; }
.sp { display: block !important; }
}



.css-fade3 {
    animation-name: fade-in3;
    animation-duration: 2s; /*アニメーション時間*/
    animation-timing-function: ease-out; /*アニメーションさせるイージング*/
    animation-delay: 1s; /*アニメーション開始させる時間*/
    animation-iteration-count: 1; /*繰り返し回数*/
    animation-direction: normal; /*往復処理をするかどうか*/
    animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
  }
  
  @keyframes fade-in3 {
    0% {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }




@media screen and (max-width: 1040px) {
	
	body{
		background: #e79b02;
		overflow-x: hidden;
	}	

.wrapper{
		width: 100%;
		margin: 0 auto;
	}		
	
	
.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(847 / 840 * 100%) 0 0;
}
 
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
	
	
.box {
width: 90%;
margin: 0 auto;
}


.box2, .box3, .box4, .box5, .box6 {
  float: left;
  width: 50%;
 padding: 30px 10px 20px 10px;
}

.box6 {
  width: 100%;
}
	
	
	
table {
   table-layout: relative;     /* 固定レイアウト */
   border-collapse: separate; /* 隣接する枠線を重ねる */
	width: 100%;    /* 表の横幅：350ピクセル */
	border-spacing: 20px;
margin-right:auto;
margin-left:auto;
	z-index: 555;
	
}


table td {
   padding: 20px;            /* セル内側の余白：3ピクセル */
	z-index: 555;
}	
	
	
.moji{
	color: #e79b02;
}

.dai{
	width: 45%;
	margin: 0 auto;
	}	
	
	
}