/*
Theme Name : Le-Rokujin
Theme URI : https://www.rokujian.com/
Version : 1.0;
Authour : Azechi
Authour : http://www.azejun.com/
*/



*{
    margin:0;
    padding:0;
}
body{
    background-color: #1D1D1D;
    max-width:100%;
}

.sp_br{
    display: none;
}
/*-------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------*/

header{
    width:100%;
    font-family: 'Josefin Sans';
    font-size:1.3vw;
    position: fixed;
    top:0;
    left:0;
    background-color: #1D1D1D;
    z-index: 99;
}
.header_content{
    display: flex;
    align-items: center;
    width:100%;
}
.logo{
    width:11.77vw;
    margin-left:5.52vw;
}
.logo img{
    width:100%;
    height:3.59vw;
}
.hamburger{
    display: none;
}
.nav_list{
    margin-left:6.46vw;
    width:100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
}
.nav_list li{
    float: left;
    margin:0 2.6vw;
    list-style: none;
}
.nav_list a{
    color:white;
    text-decoration: none;
    transition: .5s;
}
nav a:hover{
    color: #E6B422;
}
.header_right{
    display: flex;
    align-items: center;
}
.en{
    margin-right:3.02vw;
}
.en a{
    color: white;
    text-decoration: none;
    font-size: 1.04vw;
}
.button a{
    background: white;
    width:11.46vw;
    height:6.67vw;
    font-family: serif;
    color:black;
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 6.67vw;
    transition: .5s;
}
.button a:hover{
    opacity: .7;
}


/*-------------------------------------------------------------------
メイン
---------------------------------------------------------------------*/

main{
    margin-top:6.67vw;
}
.top-view{
    width:100%;
    height:45.52vw;
    overflow: hidden;
    position: relative;
}
.top-view img{
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    animation: slider 24s linear infinite;
    z-index:-3;
}
.top-view img:nth-child(1){
  animation-delay: -2s;
}
.top-view img:nth-child(2){
  animation-delay: 6s;
}
.top-view img:nth-child(3){
  animation-delay: 14s;
}
@keyframes slider{
    0%{
        opacity: 0;
        transform: scale(1);
    }
    4.16%{
        opacity: 1;
    }
    33.33%{
        opacity: 1;
    }
    41.66%{
        opacity: 0;
        transform: scale(1.2);
    }
    100%{
        opacity: 0;
    }
}



/*----------コンセプト------------*/

#concept{
    width:80vw;
    margin:0 auto;
    font-family: serif;
}
.title{
    color: white;
    font-family: 'Josefin Sans';
    font-size: 1.56vw;
    position: relative;
    margin-top:14.04vw;
    text-align: center;
}
.title::before{
    content:"";
    display: block;
    border-left:1px solid white;
    height:5.68vw;
    position: absolute;
    top:-7.81vw;
    left:50%;
}
#concept .copy{
    color:#E6B422;
    font-weight: normal;
    font-size:1.56vw;
    letter-spacing: 3px;
    text-align: center;
    margin-top:4.43vw;
    margin-bottom:2.6vw;
}
#concept > p{
    color: white;
    letter-spacing: 3px;
    text-align: center;
    font-size: 1.3vw;
    line-height: 2.5vw;
}
.concept-content{
    margin-top:13.98vw;
}
.concept-content img{
    width:44.11vw;
    height:27.55vw;
}
.concept-content > section{
    display: flex;
    margin:5.36vw 0;
}
.text{
    margin:auto;
}
.text h3{
    color:#E6B422;
    font-weight: normal;
    font-size:1.56vw;
}
.text p{
    width:28.23vw;
    color: white;
    font-size: 1.3vw;
    margin-top:3.33vw;
    line-height: 2.5vw;;
}

/*------------メニュー------------*/

#menu{
    margin-top:12.06vw;
    position: relative;
}
#menu::after{
    content:"";
    display: block;
    position:absolute;
    background-color: rgba(29, 29, 29,.4);
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.menu_bg {
    width:100%;
    height:100vw;
    position: relative;
}

.menu_content{
    position: absolute;
    top:0;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    z-index: 1;
    width:67.19vw;
    font-family: serif;
}
.menu_text{
    color: white;
    font-size: 1.3vw;
    text-align: center;
    margin-top:2.63vw;
    line-height: 2.5vw;
}
.menu_text span{
    display: block;
    margin-top:3.18vw;
    margin-bottom:4.77vw;
}

.course{
    background-color: white;
    padding-top:4.58vw;
    padding-bottom:2.81vw;
}
.course_title{
    font-size: 1.56vw;
    font-weight: bold;
    text-align: center;
}
.course_title::after{
    content: "";
    display: block;
    border-bottom: 2px solid #E6B422;
    width:26.61vw;
    margin:2.01vw auto;
}
.price{
    color: #E6B422;
    font-size:1.3vw;
    font-weight: bold;
    text-align: center;
    margin-bottom:3.65vw;
}
.course_list{
    width:80%;
    margin:0 auto;
}
.course_list ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.course_list li{
    list-style: none;
    margin:0 1.5vw;
    font-size: 1.3vw;
}
.course_list_text{
    clear: both;
    color: #8B8B8B;
    font-size: 1.04vw;
    text-align: center;
    padding-top:1.3vw;
}
.menu_img{
    display: flex;
    justify-content:center;
    margin:3.65vw 0;
}
.menu_list img{
    width:18.54vw;
    height:auto;
}
.menu_list:nth-child(2){
    margin:0 1.65vw;
}
.menu_title{
    color: #8B8B8B;
    font-size:.8vw;
    width:18.54vw;
}

.reservation-button{
    margin:7.4vw auto;
    text-align: center;
}
.reservation-button a{
    color: white;
    text-decoration: none;
    font-size:1.3vw;
    letter-spacing: .1vw;
    border:3px solid white;
    padding:2.08vw 12.19vw;
    text-align: center;
    transition: .5s;
}
.reservation-button a:hover{
    border:none;
    background-color: black;
}
/*------------シェフ------------*/

.chef_content{
    width:78.28vw;
    margin:10.68vw auto;
}
.chef_info{
    display: flex;
    margin-top:4.9vw;
}
.chef_info img{
    width: 28.59vw;
    height:36.72vw;
    margin-right:6.72vw;
    object-fit: cover;
    object-position: top;
}
.chef_text{
    width:50%;
    color: white;
    font-family: serif;   
    font-size:1.3vw;
}
.chef_text .chef_name{
    font-weight: normal;
    font-size: 1.5vw;
}
.chef_text .chef_name_en{
    font-size:1.04vw;
    color: #8B8B8B;
    margin:.5vw 0 1.25vw 0;
}
.chef_text .earlylife{
    margin-bottom:3.18vw;
    line-height: 2.5vw;
}


/*------------予約------------*/
#reservation{
    font-family: serif;
}
.reservation_content{
    width:100%;
    height:54.11vw;
    position: relative;
}
.reservation_content::after{
    content:"";
    display: block;
    position:absolute;
    background-color: rgba(29, 29, 29,.4);
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.reservation_bgimg{
    width:100%;
    height:54.11vw;
    background-attachment: fixed;
}
.reservation_conteiner{
    position: absolute;
    top:0;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    z-index: 2;
}
.reservation_bg{
    width:67.19vw;
    height:28.8vw;
    background-color: white;
    margin-top:3.93vw;
    font-size: 1.3vw;
}
.reservation_text{
    text-align: center;
    padding:4.11vw 0;
}
.web_button{
    background-color: black;
    text-align: center;
    width:35.31vw;
    margin:0 auto;
    transition: .5s;
}
.web_button a{
    display: block;
    color: white;
    text-decoration: none;
    font-size: 1.3vw;
    padding:1.93vw 0;
    transition: .5s;
}
.web_button a:hover{
    color: #E6B422;
}
.web_button > a >img{
    width:0.99vw;
    height:0.99vw;
    margin-left:0.83vw;
}
.time{
    text-align: center;
    color: #E6B422;
    margin-top:3.59vw;
}
.reservation_detail{
    width:67.19vw;
    margin:3.54vw auto;
    color: white;
    font-size: 1.3vw;
    line-height: 2.2vw;
}
.reservation_title{
    color: #E6B422;
}
.warning_text{
    margin:2.71vw 0 2.71vw 0;
}
.warning_text li{
    list-style: none;
}
.warning_text li::before{
    content:"※"
}

/*------------アクセス------------*/
#access{
    margin-top:20vw;
}
.access_info{
    display: flex;
    justify-content: center;
    margin-top:4.35vw;
    margin-bottom:12.66vw;
    font-family: serif;
    font-size: 1.3vw;
}
.map iframe{
    width:36.98vw;
    height:25.31vw;
}
.access_text {
    margin-left:3.07vw;
}
.access_text dt{
    color: #E6B422;
}
.access_text dd{
    color: white;
    line-height:2.5vw;
    margin-top:.5vw;
    margin-bottom: 1.5vw;
}
.access_text a{
    color: white;
}


/*-------------------------------------------------------------------
フッター
---------------------------------------------------------------------*/

.footer_bg{
    background-color: #393939;
    text-align: center;
}
.footer_bg img{
    width:11.41vw;
    height:3.49vw;
    margin:2.76vw 0;
}


/*--------------------------------レスポンシブ-----------------------------------*/
@media (max-width:480px){


.sp_br{
    display: block;
}
.pc_br{
    display: none;
}

/*ヘッダー*/
header{
    height:22.56vw;
    background-color: #1D1D1D;
}
.header_content{
    width:90%;
    margin:5.5vw auto;
}
.logo{
    width:22.56vw;
    height:6.92vw;
    margin:0 auto;
}
.logo img{
    width:100%;
    height:100%;
    padding-left:5vw;
}
/*ハンバーガーメニュー*/
.hamburger{
    display: block;
    width:10vw;
    height:10vw;
    background: none;
    border: none;
    position: relative;
    top:0;
    right:0;
    cursor: pointer;
    z-index:25;
}
.hamburger span{
    display: block;
    width:5vw;
    height:.5vw;
    background: white;
    border-radius: 10px;
    position: absolute;
    top:50%;
    left:50%;
    transition: transform .5s, opcity .5s;
}
.hamburger span:nth-child(1){
    transform: translate(-50%,-2vw);
}
.hamburger span:nth-child(2){
    transform: translate(-50%,50%);
}
.hamburger span:nth-child(3){
    transform: translate(-50%,2.5vw);
}
.nav_list.open, .header_right.open{
    transform: translateX(0);
}
.hamburger.open span:nth-child(1){
    transform: translate(0)rotate(-45deg);
    background: black;
}
.hamburger.open span:nth-child(2){
    opacity: 0;
}
.hamburger.open span:nth-child(3){
    transform: translate(0)rotate(45deg);
    background: black;
}
body.open{
    overflow: hidden;
}

/*------------------*/

.nav_list{
    margin-left:0;
    background-color: white;
    width:100%;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    transform: translateX(100%);
    z-index: 10;
    transition: all .5s;
}
.nav_list ul{
    position: absolute;
    top:30%;
    left:50%;
    transform: translate(-50%,-50%);
}
.nav_list li{
    clear: both;
    width: 100%;
    font-size:5vw;
    font-weight: bold;
    margin:5vw 0;
    text-align: center;
    z-index: 20;
}
.nav_list a{
    color:black;
    transition: .5s;
}
.nav_list a:hover{
    color: #E6B422;
}
.header_right{
    z-index: 21;
    display: block;
    margin-left:0;
}
.en{
    margin-right:0;
    text-align: center;
    margin-top:105vw;
    position: absolute;
    top:3%;
    left:50%;
    transform: translate(-50%,-50%);
}
.en a{
    color: black;
    font-size: 5vw;
}
.button{
    position: absolute;
    top:10%;
    left:50%;
    margin-top:105vw;
    transform: translate(-50%,-50%);
}
.button a{
    background:none;
    border:1px solid black;
    color:black;
    width:80vw;
    height:20vw;
    font-size:5vw;
    line-height: 20vw;
    margin-top:10vw;
}
.button a:hover{
    opacity: 1;
}

/*メイン*/
main{
    margin-top:22.56vw;
}
.top-view{
    width:100vw;
    height:173.33vw;
}
.top-view img{
    width:100%;
    height:100%;
}

/*----------コンセプト------------*/

#concept{
    width:88.21vw;
}
.title{
    font-size: 4.62vw;
    margin-top:38.08vw;
}
.title::before{
    content:"";
    height:18.08vw;
    top:-25vw;
}
#concept .copy{
    font-size:4.62vw;
    letter-spacing: 2.5px;
    margin-top:12.18vw;
    margin-bottom:7.69vw;
}
#concept > p{
    letter-spacing: 3px;
    font-size: 3.33vw;
    line-height: 5.5vw;
}
.concept-content{
    margin-top:12.31vw;
}
.concept-content img{
    width:100%;
    height:54.36vw;
    order: 1;
}
.concept-content > section{
    display: flex;
    flex-direction: column;
    margin:12.31vw 0;
}
.text{
    text-align: center;
    margin:5.64vw 0;
    order: 2;
}
.text h3{
    font-size:4.62vw;
}
.text p{
    width:88.21vw;
    font-size: 3.33vw;
    margin-top:5.64vw;
    line-height:6.5vw;
    text-align: center;
}

/*------------メニュー------------*/

#menu::after{
    content:"";
    width:100%;
    height:370vw;
    padding-bottom:20vw;
}

.menu_content{
    width:88.21vw;
}
.menu_text{
    font-size: 3.33vw;
    margin-top:15.13vw;
    line-height: 5vw;
}
.menu_text span{
    margin-top:10.26vw;
    margin-bottom:6.79vw;
}

.course{
    padding-top:10.26vw;
    margin-bottom:15.26vw;
}
.course_title{
    font-size: 3.33vw;
}
.course_title::after{
    content: "";
    border-bottom: 1px solid #E6B422;
    width:49.49vw;
    margin:4.23vw auto;
}
.price{
    font-size:3.33vw;
    margin-bottom:12.82vw;
}
.course_list{
    width:70vw;
    margin:0 auto;
}
.course_list ul{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.course_list li{
    margin:0 2.5vw;
    font-size: 3.33vw;
}
.course_list_text{
    width:66.15vw;
    margin:0 auto;
    font-size: 2.56vw;
    padding-top:3.85vw;
}
.menu_img{
    width:66.15vw;
    display: flex;
    flex-direction: column;
    justify-content:center;
    margin:7.18vw auto 0 auto;
}
.menu_list img{
    width:100%;
    height:auto;
}
.menu_list:nth-child(2){
    margin:0;
}
.menu_title{
    font-size:2.56vw;
    margin-top:2.56vw;
    margin-bottom:7.18vw;
    width:100%;
}

.reservation-button{
    margin:0 auto;
}
.reservation-button a{
    font-size:3.33vw;
    letter-spacing: .1vw;
    border:1px solid white;
    padding:6.41vw 20vw;
}
.reservation-button a:hover{
    border:1px solid white;
    background-color: white;
}

/*------------シェフ------------*/

.chef_content{
    width:88.21vw;
    margin:0 auto;
}
.chef_info{
    display: flex;
    flex-direction: column;
    width:100%;
    margin:11.92vw auto;
}
.chef_info img{
    width: 100%;
    height:89.23vw;
    object-fit: cover;
    object-position: top;
    margin-right:0vw;
}
.chef_text{
    width:100%;
    font-size:3.33vw;
    margin-top:4.36vw;
}
.chef_text .chef_name{
    font-size: 4.62vw;
}
.chef_text .chef_name_en{
    font-size:3.33vw;
    margin:2.05vw 0 4.36vw 0;
}
.chef_text .earlylife{
    margin-bottom:6.15vw;
    line-height: 6vw;
}
.works_history dl{
    line-height: 6vw;
}
.works_history dt{
    width:25vw;
}
.works_history dd{
    margin-left:25vw;
}


/*------------予約------------*/
.reservation_content{
    width:100%;
    height:151.03vw;
}
.reservation_bgimg{
    height:151.03vw;
    background-attachment:scroll;
    background-position: center;
}
.reservation_bg{
    width:88.21vw;
    height:82.82vw;
    margin-top:11.92vw;
    font-size: 3.33vw;
}
.reservation_text{
    width:80%;
    margin:0 auto;
    padding:10.51vw 0;
}
.web_button{
    width:69.74vw;
}
.web_button a{
    font-size: 3.33vw;
    padding:7.69vw 0;
}
.web_button a:hover{
    color: white;
}
.web_button > a >img{
    width:2.82vw;
    height:2.82vw;
    margin-left:1.03vw;
}
.time{
    margin-top:8.5vw;
}
.reservation_detail{
    width:88.21vw;
    margin:10.26vw auto;
    font-size: 3.33vw;
    line-height: 6vw;
}
.warning_text{
    margin:5.13vw 0 5.13vw 0;
}


/*------------アクセス------------*/
.access_info{
    flex-direction: column;
    width:88.21vw;
    margin:6.79vw auto;
    font-size: 3.33vw;
}
.map iframe{
    width:100%;
    height:63.33vw;
}
.access_text {
    margin-left:0vw;
    margin-top:5.38vw;
}
.access_text dd{
    line-height:6vw;
    margin-top:2.56vw;
    margin-bottom: 5.38vw;
}


/*フッター*/
.footer_bg img{
    width:22.56vw;
    height:6.92vw;
    margin:2.76vw 0;
    padding:7.95vw 0;
}
}

/*------------------------------------------------
フェードイン
-----ー------------------------------------------*/
.fadein{
    opacity: 0;
    transition-duration: 2s;
    transform:translate(0,40px);
}
.fadein_left{
    opacity: 0;
    transition-duration: 2s;
    transform:translate(50px,0);
}
.fadein_right{
    opacity: 0;
    transition-duration: 2s;
    transform:translate(-50px,0);
}
.scroll-in{
    opacity: 1;
    transform:translate(0,0);
}
/*------------------------------------------------*/

/*------------------------------------------------
背景色が伸びて出現
------------------------------------------------*/
.bgextend{
    animation-name:bgextendAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
    position: relative;
    overflow: hidden;/*　はみ出た色要素を隠す　*/
    opacity:0;
  }
  
  @keyframes bgextendAnimeBase{
    from {
      opacity:0;
    }
  
    to {
      opacity:1;  
  }
  }
  
  /*中の要素*/
  .bgappear{
    animation-name:bgextendAnimeSecond;
    animation-duration:1s;
    animation-delay: 0.2s;
    animation-fill-mode:forwards;
    opacity: 0;
  }
  
  @keyframes bgextendAnimeSecond{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
  }
  }
  
  /*右から左*/
  .bgRLextend::before{
    animation-name:bgRLextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
      content: "";
      position: absolute;
      width: 100%;
      height: 36.72vw;
      background-color: white;/*伸びる背景色の設定*/
  }
  @keyframes bgRLextendAnime{
    0% {
      transform-origin:left;
      transform:scaleX(0);
    }
    50% {
      transform-origin:left;
      transform:scaleX(1);
    }
    50.001% {
      transform-origin:right;
    }
    100% {
      transform-origin:right;
      transform:scaleX(0);
    }
  }

@media(max-width:480px){
    .bgRLextend::before{
          height: 100vw;
      }
}
  

  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgRLextendTrigger{
    opacity: 0;
}