@charset "utf-8"; 
a, abbr, acronym, address, applet, article, aside, audio,b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video{font-size:100%; vertical-align:baseline; white-space:normal; margin:0; padding:0; border:0; outline:0; background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;} ol, ul{list-style:none;} blockquote, q{quotes:none;}table{border-collapse:collapse; border-spacing:0;} *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust:100%;} img{vertical-align:top; max-width:100%;} h1, h2, h3, h4, h5, h6{font-weight:normal;}

/*---------------------------
Link
---------------------------*/
a{color:#333333; text-decoration:none;outline:none;}
a:hover{opacity: 0.8;}

/*---------------------------
Font
---------------------------*/
body{font-family:"Roboto", "Noto Sans JP", sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic"; background:#fff; color: #333333; font-size:15px;font-weight: 400; letter-spacing: 0.1em;}

@media screen and (max-width:750px){
body{overflow: scroll;}
}

/*---------------------------
共通
---------------------------*/
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf{*zoom: 1;}

.pc{ display:block;}
.sp{ display:none;}

@media screen and (max-width:750px){
.pc{ display:none;}
.sp{ display:block;}
}



.hero-slider{ margin-top: 70px;}
.slider-2 .slick-slide {
  width: 636px;
  height: 550px;
  margin: 0 30px;
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}
.slider-2 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.slider-2 .slick-slide p{font-size:15px;text-align: center; margin-top: 20px;}
.slider-2 .slick-slide p span{display: block; margin-top: 10px;}
.slider-2 .slick-slide{display: flex!important; justify-content: center; align-items: center;}


.hero-movie{
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
margin-top: 70px;
background: #fff;/*余白の背景色*/
}
video.vid_main {
width: 100%;
max-width: 920px;/*PC版での最大幅*/
}

@media screen and (max-width:750px){
.hero-slider{ margin-top: 100px;}
.hero-movie{margin-top: 200px;}
.slider-2 .slick-slide{width: 340px; margin: 0 20px;}
}

.archive{ margin-top: 70px;}
.archive .inner{max-width: 1440px; padding: 0 40px; margin: 0 auto}
.archive ul{display: flex;align-items: flex-end; flex-wrap: wrap;}
.archive li{width: 15%; margin-bottom: 50px; margin-right:2%;}
.archive li:nth-of-type(6n){margin-right: 0;}
.archive li p{font-size:10px;text-align: center; margin-top: 10px; line-height: 1.8;}
.archive li p span{display: block; margin-top:0px;}

@media screen and (max-width:750px){
.archive{ margin-top: 100px;}
.archive .inner{max-width: 1440px; padding: 0 20px; margin: 0 auto}
.archive ul{justify-content: center;}
.archive li{width: 46%; margin-bottom: 30px; margin-right:4%;}
.archive li:nth-of-type(6n){margin-right: 4%;}
.archive li:nth-child(even){width: 48%; margin-bottom: 30px; margin-right:0%;}
}


.detaile{margin-top: 70px; height: auto;}
.detaile .inner{max-width: 1300px; padding: 0 40px; margin: 0 auto}
.detaile .left{position: sticky; width: 38%; left: 0;top: 0; padding-top: 250px;}
.detaile .right{margin-left: 42%; width: 60%; margin-top:-290px; overflow-y: scroll;}
.detaile .left h2{font-size: 15px;text-align: center;}
.detaile .left h2 span{display: block; margin-top: 10px;}
.detaile .right div{ width: 100%; margin-bottom: 80px;}
.detaile .right div video{width: 100%;}

@media screen and (max-width:750px){
.detaile{margin-top: 100px; height: auto;}
.detaile .inner{max-width: 1300px; padding: 0 20px; margin: 0 auto}
.detaile .left{position:relative; width: 100%; left: 0;top: 0; padding-top: 0;}
.detaile .right{margin-left: 0; width: 100%; overflow-y:auto; margin-top: 30px;}
.detaile .right div{ margin-bottom: 30px;}
}


.about{margin-top: 70px; height: auto;}
.about .inner{max-width: 1300px; padding: 0 40px; margin: 150px auto 280px;}
.about .inner p{font-size: 15px; text-align: center; line-height: 1.8;}


@media screen and (max-width:750px){
.about .inner p{font-size: 13px; text-align: center; line-height: 1.8;}
}



footer{margin-top:100px; margin-bottom: 20px; }
footer p{font-size: 12px; text-align: center;}

@media screen and (max-width:750px){
footer{margin-top:200px;}
}

header{background: #fff; width: 100%; height: 110px;}


#btn {
  display: none;
}


nav {
  position: fixed; z-index: 2;
  background-color: #fff;
  left: 0;
  right: 0;
  margin: auto;
}
nav a {
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #333333;
  padding: 0 30px;}
  
nav a.on{color: #DBCDB1;}
nav .logo{width: 130px; margin: 30px auto 0;}
nav .box{display: flex;  justify-content:center;align-items: center; max-width: 1240px;padding:0 20px; margin: 0 auto;height: 50px;width: 100%; margin-top: 20px;}
nav .logo a{padding: 0;}


nav a:hover {
  color: #DBCDB1;
}

nav .logo a{
margin-left: 0;
}
nav .logo a:hover{
border-bottom: none;
}




@media screen and (max-width: 750px) {
header{height: 70px; position: fixed; z-index: 3; top: 0;}
header .logo{width: 80px;margin: 0 auto; padding-top: 20px; padding-left: 0;}
nav{margin-top: 0; display: block; border: none; background:#fff; padding: 0;}
nav .box{display: block; padding:0 20px; margin: 0 auto;height: 70px;width: 100%;}
nav::before{display: none;}
  #btn {
    position: fixed;
    top: 12px;
    right: 10px;
    width: 44px;
    height: 44px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
  }
  #btn span {
    display: block;
    background-color: #333;
    width: 36px;
    height: 1px;
    transition: all 0.5s ease;
  }
  #btn.on span {
    background-color: #333;
  }
  #btn.on span:nth-of-type(1) {
    transform: translateY(11px) rotate(45deg);
  }
  #btn.on span:nth-of-type(2) {
    transform: scale(0);
  }
  #btn.on span:nth-of-type(3) {
    transform: translateY(-12px) rotate(-45deg);
  }
  nav {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    transition: all 0.5s ease;
    top: -130vh;
    height: 100vh;
  }
  nav.on {
    top: 0;
    height: 100vh;
    overflow-x: scroll;
  }
  nav a {
    margin: 35px auto;
    display: block;
    text-align: center;
    font-size: 18px;
    border: none;
  }
}