@charset "utf-8";

/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2000;
  background: transparent;
  padding: 25px 0;
  transition: 0.5s;
}
header .logo:hover,header nav ul li a:hover{opacity: .5;}
header .logo {transition: 0.5s; margin-left: 30px;}
header .logo img{width: 100%;}
header img.scroll{display: none;}
header ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
header a {
  display: inline-block;
  margin-left: 12px;
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: 1px;
  transition: 0.5s;
  text-shadow: 0px 0px 5px #402922; 
}
header nav ul li{margin: 0 20px 0;}
header nav ul li:nth-child(5){border-left: solid 1px #fff; padding: 0 20px 0 40px;}
header nav ul li a img{max-width: 100%;}
header.scroll-nav {padding: 10px 15px; background: #fff;}
header.scroll-nav ul li a {color: #402922; text-shadow: none;}
header.scroll-nav img.scroll-w{display: none;}
header.scroll-nav img.scroll{display: block; width: 80%;}
header.scroll-nav ul li:nth-child(5){border-left: solid 1px #402922;}

@media (max-width:640px){
    header .logo {margin-left: 10px;}
    header .logo img{width: 80%;}
    header nav.index ul li a{color: #402922; text-shadow: none;}
    .hamburger {
      position: fixed;
      top: 30px;
      right: 70px;
      z-index: 10000;
      cursor: pointer;
      background: none;
      border: none;
    }
    .hamburger__line {
      position: absolute;
      left: 0;
      width: 40px;
      height: 3px;
      background-color: #fff;
      transition: all .4s;
    }
    header.scroll-nav .hamburger__line {background-color: #402922;}
    .hamburger__line:nth-of-type(1) {top: 20px;}
    .hamburger__line:nth-of-type(2) {top: 30px;}
    .hamburger__line:nth-of-type(3) {top: 39px;}

    /* メニューオープン時 */
    .hamburger.active .hamburger__line:nth-of-type(1) {transform: translateY(9px) rotate(-45deg); background-color: #402922;}
    .hamburger.active .hamburger__line:nth-of-type(2) 
    {opacity: 0; background-color: #402922;}
    .hamburger.active .hamburger__line:nth-of-type(3) {transform: translateY(-9px) rotate(45deg); background-color: #402922;}
    header nav {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      transform: translateY(-100%);
      transition: transform .6s;
      z-index: 100;
      display: flex; 
      align-content: center; 
      align-items: center;
      justify-content: center;
    }
    header nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    header nav.active {transform: translateY(0); z-index: 100;}
    header nav ul{margin: 0; padding:0; }
    header nav ul li{width: 100%; text-align: center; padding-bottom:80px; margin: 0;}
    header nav ul li a,header nav ul li a p{color: #402922; text-shadow: none; font-size: 2rem; font-family: "Noto Serif JP", serif; line-height: 1.3; letter-spacing: 0.1em; margin: auto;}
    header a {margin-left: 0;}
    header nav ul li:nth-child(5){border-left: none; padding: 0;}
    header nav ul li a img{max-width: 100%;}
    header.scroll-nav nav img.scroll{display: none;}
    header.scroll-nav ul li:nth-child(5){border-left: none;}
}

/* 共通 */
.top{max-width: 1200px; width: 90%; margin: 0 auto;}
.top h1{margin: 50px 0 0; text-align: center;}
.title{max-width: 100%;}
.imgBox{width: 60%; margin:0 auto;}
.imgBox img{width: 100%;}
h2.title{text-align: center; margin-bottom: 30px;}
h2.title small{display: block; font-size: 1rem;}
.narabi{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px auto 0; align-content: center; align-items: center; max-width: 900px;}
.narabi p{width: 48%;}
.narabi .img-waku{width: 50%;}
.right .text-waku{width: 48%; margin-right: 15px;}
.right .text-waku p{width: 100%;}
.right{margin-top: 50px;}
.title{max-width: 100%;}
.title2{max-width: 60%;}
.maintitle{color: #594d44;}

@media (max-width:640px){
    .top{max-width: 580px; width: 100%; margin: 0 auto;}
    .top h1{margin: 50px 0 0;}
    .narabi{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px auto 0; align-content: center; align-items: center; max-width: 500px;}
    .narabi p{width: 100%;}
    .narabi .img-waku{width: 100%;}
    .right .text-waku{width: 100%; margin-right: 0; margin-top: 10px;}
    .right .text-waku p{width: 100%;}
    .right{margin-top: 50px; flex-direction:column-reverse;}
}

/* main */
.main{width: 100%; margin: 0 auto; z-index: 1000;}
.main img{width: 100%;}


/* phase */
.phase{display: flex; flex-wrap: wrap; justify-content: center; margin: 50px auto 0; align-content: center; align-items: center; max-width: 900px;}
.phase .img-waku img{max-width: 100%; margin-right: 30px;}
.phase p{border-left: solid 1px #402922; padding-left: 30px;}

@media (max-width:640px){
    .phase{max-width: 550px; justify-content: flex-start;}
    .phase .img-waku{width: 40%; padding-right: 0;}
    .phase p{width: 100%; border-left: none; padding-left: 0; border-top:solid 1px #402922; padding-top:10px;}
    .phase .img-waku img{width: 80%;}
}


/* lineup */
.lineup{margin: 100px 0 0;}
.lineup ul{display: flex; flex-wrap: wrap; justify-content: center;}
.lineup ul li{width: 24%; padding:0 20px;}
.lineup ul li a{padding:0 20px; position: relative;}
.lineup ul li a img{max-width: 100%; z-index: 100; position: relative;}
.lineup .btn{margin: 20px auto 0; padding:8px 0;}
.lineup p{text-align: center;}


@media (max-width:640px){
    .lineup{margin: 80px 0 0;}
    .lineup ul li{width: 48%; padding:20px;}
    .lineup .btn{margin: 30px auto 0;}
}


/* scene */
.scene{margin: 120px 0 0; position: relative;}
.scene > div{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center;}
.scene .slide{width: 50%; margin: 0;}
.scene .slide img{max-width: 100%;}
.scene div .text-waku{width: 32%; padding:0 0 0 3%; margin-top: 200px;}
.scene .img-waku{width: 50%; margin: 30px 0 30px 60px;}
.scene div .sec{margin: 50px 0 0 0; padding:0; width: 45%;}
.scene div .sec img{max-width: 100%; margin-top: 30px;}
.scene .title{max-width: 100%;}
.scene .cookie{margin: 0 auto; display: inline-block; animation: rotate-z 20s linear infinite; position: absolute; top:5%; right: -5%; width: 23%;}
.rotation{margin: 100px auto 0; text-align: center; position: absolute; top:-200px; right: 0; overflow: hidden; width: 100%; height: 100%;}
@keyframes rotate-z {
  from {transform: rotateZ(0deg);}
  to {transform: rotateZ(-360deg);}
}

@media (max-width:640px){
    .scene{margin: 120px 0 0;}
    .scene .second{flex-direction:column-reverse;}
    .scene .slide{width: 80%; margin: 20px 30px 0 0;}
    .scene div .text-waku{max-width: 580px; width: 100%; padding:0; margin: 20px 0 0 20px;}
    .scene .img-waku{width: 70%; margin-top: 30px;}
    .scene div .sec{padding:0; margin: 20px 0 0; width: 80%;}
    .scene .cookie{top:1.5%; width: 50%;}
    .rotation{margin: 100px auto 0; text-align: center; position: absolute; top: -210px; right: 0; overflow: hidden; width: 100%; height: 100%;} 
    .scene div .sec img{width: 100%; max-width: 100%; margin: 10px auto 0;}
    .scene .second .img-waku{width: 80%;}
    .scene .second .text-waku h3{margin-left: 20px;}
}

/* material */
.material{margin: 100px 0 0;}
.material h3,.material p{max-width: 800px; width: 100%; margin: 0 auto; text-align: center;}
.material .title{margin: 0 auto; display: block;}

@media (max-width:640px){
    .material{margin: 50px 0 0;}
}


/* kikuchi */
.kikuchi{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 100px 0 0; background: url("../img/index/cookie.gif"); background-repeat: no-repeat; background-position: 20% 0%;}
.kikuchi .text-waku{width: 35%; padding: 0 20px 0 80px; margin-top: 300px;}
.kikuchi .img-waku img{width: 100%;}
.kikuchi .img-waku{width: 50%;}

@media (max-width:640px){
    .kikuchi{margin: 100px 0 0; flex-direction:column-reverse; background: url("../img/index/cookie.gif"); background-repeat: no-repeat; background-position: 80% 50%; background-size: 30%;}
    .kikuchi .text-waku{width: 80%; padding: 0; margin-top: 50px;}
    .kikuchi .img-waku{width: 100%;}
}

/* koudo */
.koudo{margin: 120px 0 0; position: relative;}
.koudo > div{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center;}
.koudo .slide{width: 50%; margin: 0;}
.koudo .slide img{max-width: 100%; margin-left: 0;}
.koudo div .text-waku{width: 32%; padding:0 0 0 3%; margin-top: 200px;}
.koudo .img-waku{width: 50%; margin-top: 30px; margin-bottom: 30px;}
@media (max-width:640px){
    .koudo{margin: 80px 0 0;}
    .koudo .slide{width: 90%; margin: 0 auto;}
    .koudo div .text-waku{width: 95%; padding:0 0 0 30px; margin-top: 20px;}
    .koudo .img-waku{width: 100%; margin-top: 30px;}
}

/* development */
.development{margin: 100px auto 0; max-width: 1200px; width: 90%;  background: url("../img/index/youkan.gif"); background-repeat: no-repeat; background-position: 100% 0; display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 50px;}
.development .text-waku{width:64%;}
.development .img-waku{width:35%;}
.development .text-waku > div{display: flex; align-content: center; align-items: center;}
.development .logo{text-align: center; margin: 0 auto 20px; display: block; flex-wrap: wrap; max-width: 100%;}
.development p{margin-left: 80px;}
.development img{max-width: 100%; margin-top: 30px;}
.development a{color: #fff; margin: 0;}
.development a:hover span{color: #402922;}
.development a.btn {max-width:300px;}

@media (max-width:640px){
    .development{margin: 80px auto 0; background: url("../img/index/youkan.gif"); background-repeat: no-repeat; background-position: 94% 65%; display: block;}
    .development .text-waku{width:100%;}
    .development .img-waku{width:100%;}
    .development .text-waku > div{display: block;}
    .development .text-waku h2{text-align: center;}
    .development p{margin-left: 0;}
    .development .logo{margin: 0 auto 10px; max-width: 100%;}
}