@charset "utf-8";
/*==========================
common
==========================*/
:root {
    --primary-white: #FFFFFF;
    --primary-brown: #332725;
    --primary-khaki: #757961;
    --primary-cream: #E5E2CF;
    --primary-beige: #B2AB8D;
    --primary-darkbeige: #4D483F;
}
body{
    font-family:
    'Noto Serif JP',
    'Libre Baskerville',
    'Shippori Mincho',
    'Lato';
    font-style: normal;
    color: var(--primary-brown);
    background-color: var(--primary-white);
    line-height: 150%;
}
main{
    display: block;
}
.main{
  padding-top: 89px;
}
@media screen and (min-width:500px) {
    main{
        display: block;
    }
}
/*==========================
header
==========================*/
    .hedader_menu {
        display: none;
    }
      ul,
      li {
        list-style: none;
        font-weight: bold;
      }
      
      /* ヘッダー */
      .hamburger_menu{
        display: flex;
        justify-content: center;
        align-items: center;
        padding:10px 32px 10px 6px;
        position: fixed;
        width: 100%;
        z-index: 100;
        background-color: #FFFFFF;
      }
      .hamburger_menu.top_hamburger{
        display: flex;
        justify-content: center;
        align-items: center;
        padding:10px 32px 10px 6px;
        position: fixed;
        width: 100%;
        z-index: 100;
        background-color: transparent;
        
      }
      .headerColorScroll.hamburger_menu{
        background-color: var(--primary-white);
      }
      .logo img{
        height: 53px;
      }
      .hamburger_logo.-after{
        display: none;
      }
      .headerColorScroll .hamburger_logo.-before{
        display: none;
      }
      .headerColorScroll .hamburger_logo.-after{
        display: block;
      }

      .sp-nav {
        display: none;
      }
      

      .menu-right {
        z-index: 1;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        display: block;
        background: var(--primary-brown);
        opacity: 0;
        transform: translateX(100%); /* Y軸ではなくX軸を使う */
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; /* スライド速度を0.6秒に設定 */
      }
      
      #hamburger {
        position: relative;
        display: block;
        width: 30px;
        height: 15px;
        margin: 0 0 0 auto;
        cursor: pointer;
        z-index: 999;
      }
      
      #hamburger#js-hamburger::before,
      #hamburgerr#js-hamburger::after {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--primary-white);
        transition: all 0.3s ease-in-out;
      }
      #hamburger.js-hamburger::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-white);
      }
      
      #hamburger.js-hamburger::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-white);
      }
      #hamburger::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-brown);
      }
      
      #hamburger::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-brown);
      }
      .headerColorScroll #hamburger::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-brown);
      }
      
      .headerColorScroll #hamburger::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-brown);
      }
      
      
      .hamburger-active #hamburger::before {
        top: 45%;
        transform: rotate(45deg);
        color: var(--primary-white);
        background-color: var(--primary-white);
      }
      
      .hamburger-active #hamburger::after {
        bottom: 45%;
        transform: rotate(-45deg);
        color: var(--primary-white); 
        background-color: var(--primary-white);
      }
      
      .menu-right.open {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; /* 開閉両方に適用 */
      }
      
      .menu-right ul {
        padding: 108px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      
      .menu-right li {
        margin: 0;
        padding: 0;
        font-family: "Libre Baskerville";
        color: var(--primary-white);
        font-size: 24px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
        margin-top: 5vw;
      }
      
      .menu-right li span {
        font-size: 12px;
        color: var(--primary-white);
        font-family: "Noto Serif JP";
        font-style: normal;
        font-weight: 600;
        line-height: normal;
      }
      
      .menu-right li a{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .menu-right li a img{
        width: 20vw;
        height: 20vw;
      }
      #white_instagram{
        width: 15vw;
      }
      .menu-right ul li:nth-last-child(2){
        color: var(--primary-brown);
        background-color: var(--primary-white);
        height: 51px;
        width: 191px;
      }
      .menu-right li span.reserve_menu{
        color: var(--primary-brown);

      }
          /* 1440px*/
    @media screen and (min-width:1024px) {
      .hedader_menu{
        position: fixed;
        display: block;
        background-color:none;
        z-index: 100;
        transition: color 0.4s ease-out;
      }

        .hedader_menu.headerColorScroll{
            position: fixed;
            display: block;
            background-color: var(--primary-white);
            z-index: 100;
            transition: color 0.4s ease-out;
        }
        .logo_PC{
            max-height: 90px;
            height: 6.25vw;
        }
        .logo_PC img{
            max-height: 90px;
            height: 6.25vw;
            width: 7.3vw;
            max-width: 105px;
        }
        .headerColorScroll .logo.-before{
          display: none;
        }
        .logo.-after{
          display: none;
        }
        .headerColorScroll .logo.-after{
          display: block;
        }
        .hedader_menu{
            box-sizing: border-box;
            width: 100%;
        }
        .hedder_inner{
          display: flex;
          justify-content: space-between;
          align-items: center;
          min-width: 1024px;
          max-width: 100%;
          height: 90px;
          margin: 0 auto;
          font-size: 1.4vw;
          background-color: var(--primary-white); 
        }
        .hedder_inner.js-hedder_inner{
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-width: 1024px;
            max-width: 100%;
            height: 90px;
            margin: 0 auto;
            font-size: 1.4vw;
            background-color:transparent;
        }
        
        .menu_list{
            display: flex;
            align-items: center;
            align-items: center;
            gap: 3.13vw;
        }
        
        .menu_text.js-menu_text{
          color: var(--primary-white);
          transition: color 0.4s ease-out;
        }
        .menu_text.headerColorScroll{
            float: right;
            font-size: 1.25vw;
            font-weight: bold;
            color: var(--primary-brown);
            text-align: center;
            list-style: none;
            display: flex;
            font-family: Libre Baskerville;
            font-style: normal;
            font-weight: 900;
            line-height: normal;
            transition: color 0.4s ease-out;
        }
        .header-nav-item a {
            text-decoration: none;
        }
    
        .hedader_instagram{
            width: 40px;
            height: 40px;
        }
        .hedader_instagram.-before{
          display: none;
        }
        .headerColorScroll .hedader_instagram.-before{
          display: block;
        }
        .headerColorScroll .hedader_instagram.-after{
          display: none;
        }
        .menu_reseve{
          background-color: var(--primary-brown);
          color: var(--primary-white);
          font-family: "Shippori Mincho";
          font-size: min(1.25vw,20px);
          height: 90px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 35px;
          margin-right:0;
        }
        .menu_reseve.js-menu-reserve{
          color: var(--primary-white);
          font-family: "Shippori Mincho";
          font-size: min(1.25vw,20px);
          height: 73px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 35px;
          border: solid 1px var(--primary-white);
          margin-right: 13px;
          background-color: transparent;
      }
        .headerColorScroll .menu_reseve{
            background-color: var(--primary-brown);
            color: var(--primary-white);
            font-family: "Shippori Mincho";
            font-size: min(1.25vw,20px);
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 35px;
            margin-right:0;
        }
    
        .hamburger_menu.top_hamburger{
            display: none;
        }
            
        .hamburger_menu{
          display: none;
      }
    }

/*==========================
fadeIn_up
==========================*/
    .fadeIn_up {
      opacity: 0;
      transform: translate(0, 50%);
      transition: 3s;
  }
  .fadeIn_up.is-show {
      transform: translate(0, 0);
      opacity: 1;
  }
  .model_photo_sec.sec2.fadeIn_up{
    opacity: 0;
    transform: translate(0, 50%);
    transition: 4s;  
  }
  .model_photo_sec.sec2.is-show{
    transform: translate(0, 0);
    opacity: 1; 
  }
  .model_photo_sec.sec3.fadeIn_up{
    opacity: 0;
    transform: translate(0, 50%);
    transition: 5s;  
  }
  .model_photo_sec.sec3.is-show{
    transform: translate(0, 0);
    opacity: 1; 
  }
  .model_photo_sec.sec4.fadeIn_up{
    opacity: 0;
    transform: translate(0, 50%);
    transition: 6s;  
  }
  .model_photo_sec.sec4.is-show{
    transform: translate(0, 0);
    opacity: 1; 
  }
/*==========================
section
==========================*/
    .page_ttl{
      background-image: url(../images/item_image/item_image_SP.png);
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 39.42vw;
      position: relative;
      font-family: "Shippori Mincho";
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
    .page_ttl_text{
      padding-top: 15%;
      padding-left: 4%;
    }
    .page_ttl-en{
      padding: 1% 3%;
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      background-color: #FFF;
      mix-blend-mode: screen;
    }
    .page_ttl-jp{
      color: var(--primary-white);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 1%;
    }
    @media screen and (min-width:1023px) {
      .page_ttl{
        background-image: url(../images/item_image/item_image_PC.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 27.92vw;
        position: relative;
        font-family: "Shippori Mincho";
        font-style: normal;
        font-weight: 600;
        line-height: normal;
      }
      .page_ttl_text{
        padding-top: 10.1%;
        padding-left: 6.94%;
      }
      .page_ttl-en{
        padding: 1% 3%;
        font-size: 4rem;
      }
      .page_ttl-jp{
      font-size: 2rem;
      margin-top: 1%;
      }
    }
/*==========================
footer
==========================*/
/* 1024px*/
    .footer{
        background-color: var(--primary-khaki);
        padding: 35px 46px 35px 38px;
    }
    .footer_Instagram{
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }
    .footer_group{
        margin-top: 10vw;
    }
    .footerinfo_name{
        color: #FFF;
        font-family: "Libre Baskerville";
        font-size: 5.33vw;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .footer__innerLeftInfo_text{
        color: #FFF;
        font-family: Lato;
        font-size: 4.27vw;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        margin-top: 4vw;
    }
    .footer_innerLeftInfo{
        color: #FFF;
        font-family: Lato;
        font-size: 3.73vw;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; 
        margin-top: 2vw;
    }
    .Copyright{
        color: #FFF;
        font-family: Lato;
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }
    .footer_Instagram img{
        margin-top: 49vw;
        max-width: 10.67vw;
    }
    .Copyright{
        margin-top: initial;
        margin-top: 7vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .TOP_btn{
      background-image: url(../images/icon_image/TOP_btn_SP.svg);
      cursor: pointer;
      width: 40px;
      height: 40px;
      transform: .3s;
    }
    .footer_group1{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      }
    @media screen and (min-width:1023px) {
      .footer_group{
        margin-top: 0px;
      }
      .footer_group1{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        }
      .footerinfo_name{
        font-size: 2rem;
        margin-top: 3.61%;
      }
      .footer__innerLeftInfo_text{
        font-size: 1.5rem;
        margin-top: 1.25%;
      }
      .footer_innerLeftInfo{
        font-size: 1.25rem;
        margin-top: 0px;
      }
      .footer_innerLeftInfo{
        font-size: 1.25rem;
        margin-top: 1.6%;
      }
      .footer_Instagram{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        max-width: 1440px;
        margin: 0 auto;
    }
    .TOP_btn{
      background-image: url(../images/icon_image/TOP_btn_PC.svg);
      width: 80px;
      height: 80px;
    }
      .footer_Instagram img {
        margin-top: 120%;
        width: 92px;
    }
    .Copyright{
      margin-top: 0px;
    }
    small {
        font-size: 1.25rem;
    }
    }