@charset "UTF-8";

html,
body {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
}

.container {
  position: relative;
  width: 1170px;
  margin: 0 auto;
  color: #444;
  font-size: 14px;
  font-weight: 300;
  font-family: Roboto, 'Open Sans', Arial, sans-serif;
  overflow: hidden;
}

.section .container {
  padding: 30px 0 50px 0;
}

.section.bg {
  background: #f7f7f7;
}


.hold {
    height: 80px;
  }
  
.header {
    line-height: 80px;
    width: 100%;
    transition: line-height 0.2s linear, box-shadow 0.2s linear;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(245, 245, 245, 0.97);
  }
  
  .header.small {
    line-height: 50px;
    box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.8);
  }
  
  .header.small > .container > #logo {
    height: 40px;
  }
  
  ul.nav {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  ul.nav li {
    float: left;
    position: relative;
  }
  
  ul.nav li a {
    transition: color 0.2s linear;
    font-size: 18px;
  }
  
  ul.nav li:hover a {
    color: green;
  }
  
  ul.nav li a {
    padding: 21px;
    color: initial;
    text-decoration: initial;
  }
  

  /* 
  Background gradients from lea.verou.me/css3patterns
  Background SVG from heropatterns.com
*/

.slide {
  height: 100vh;
 }
 .slide1 {
   background-color: #fff; 
   background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
   linear-gradient(#eee .1em, transparent .1em);
   background-size: 100% 1.2em;
 }
 .slide2 {
   background:
     linear-gradient(135deg, #A8B1BB 22px, #ffffff 22px, #ffffff 24px, transparent 24px, transparent 67px, #ffffff 67px, #ffffff 69px, transparent 69px),
     linear-gradient(225deg, #A8B1BB 22px, #ffffff 22px, #ffffff 24px, transparent 24px, transparent 67px, #ffffff 67px, #ffffff 69px, transparent 69px)0 64px;
   background-color:#A8B1BB;
   background-size: 64px 128px
 }
 .slide3 {
   background: radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
     radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
     linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
     linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
   background-color: slategray;
   background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
 }
 .fix-it {
    background-attachment: fixed;
   
 }
 h1 {
   display: block;
   margin: auto;
   padding: 20%;
   font-size: 50px;
   color: dimgray;
   text-align: center;
 }



/* スライド式のフェード */

 .fade {
  transition: all 2000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 50px);
}

.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
} 




/* 開いた際のフェード */

.an1-fadein {
 
  font-size: 30px;
  font-weight: bold;
  animation-name: fadein;
  animation-duration: 2s;
  
}
@keyframes fadein {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
} 

/* 動画再生 */


span{
  color:#abced4;
}


.wrap {
  position: relative;
  height: 100vh;
}

.video-bg {
  position: relative;
  height: 89%;
  background: #000;
  overflow: hidden;
}

.video-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.video-bg iframe {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 60vw;
}



/*ムービーエリア*/
.movie-box {
  display: flex;
  flex-wrap: wrap; /* 複数行に分割・flexアイテムを折り返す */
  justify-content: space-between;} /* 各アイテムを均等に配置 */

/* ムービーエリアの各ボックス */
.movie-item { 
  width: 400px;
  margin-bottom: 40px;
  padding-bottom: 10px;}

.movie-item a{
  color: #333333;
  transition: 0.5s ease;}
.movie-item a:hover{opacity: 0.5;}

/* ムービーエリアのタイトル */
.movie-title { 
  font-size: 16px;
  margin-top: 8px;
  margin: 10px 10px 0;}

/* ムービーエリアのカテゴリ */
.movie-category {
  color: #b67007;
  font-size: 14px;
  margin: 10px 0 0 10px;}


  /* artcle 全体レイアウト */
.top-box {padding: 60px 0;
  display: block;}

.top-box:nth-of-type(even) {background-color: #eeeeee;}/* .top-boxの偶数のボックスに背景色を入れる  evenが偶数　oddが奇数*/

/* 各artcle内の内枠*/
.inner { 
  max-width: 1280px;/* 要素がこれ以上大きくならない幅 */
  margin: 0 auto;}