@charset "utf-8";

/* ===============
    conmmon
==================*/

:root {
    --primary-white: #FFFCF0;
    --primary-black: #403432;
    --primary-green: #718A4B;
    --primary-yellow: #FAF4D9;
    --primary-darkyellow: #EDE0A2;
    --contentWidth: 88.2%;
    --contentPadding: 4.2%;
}

html{
    font-size: 62.5%;
}

body{
    font-family: 
    "Cormorant Garamond",
    "Shippori Mincho",
    "Montserrat";
    font-style: normal;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}
.label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .line {
    display: inline-block;
    width: 30px; /* 線の長さ */
    height: 1px; /* 線の太さ */
    margin-right: 8px; /* 線とテキストの間のスペース */
  }
  
  .text {
    font-family: "Cormorant Garamond";
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 55px; /* 305.556% */
    letter-spacing: 1.26px;
    
  }

  
  /* header sp */
.header{
    padding: var(--contentPadding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo_pc{
    display: none;
  }

  .logo_sp{
    width: 68.2px;
    height: 28px;
    flex-shrink: 0; 
  }  
  .header_logo a,
  .nav_header a{
    width: 68.2px;
    height: 28px;
  }

  .header_logo a,
  .nav_header a{
    display: flex;
    align-items: center;
  }
  
  .header__btn{
    display: flex;
    justify-content: space-between;
  }

  .order-button {
    font-weight: 400;
    letter-spacing: 1.12px;
    padding: 7px 9px; /* ボタンの内側の余白 */
    border: none; /* ボーダーをなくす */
    cursor: pointer;
    margin-right: 20px;
  }
  

  .btn_eria{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* navの表示 */
  .nav {
    background-image:url(../images/nav_bg_sp.png) ;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: linear 0.4s;
}

.nav_header {
    display: flex;
    padding: 24px 4.2% 0;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 218px;
}


.nav__list {
    margin-top: 78px;
}

.nav_item{
    font-family: Cormorant Garamond;
    font-size: 2.6rem;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 1.04px;
    padding: 0 4.2% ;
    margin-top: 35px;
}

.nav.active {
    transform: translateX(0);
}

.nav_order--Btn a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:120px auto 0;
    padding: 1em 2em;
    width: 312px;
    height: 50px;
    font-family: "Cormorant Garamond";
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: 1.82px;
}

.nav_order--Btn a::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--primary-black);
    border-right: 1px solid var(--primary-black);
    transform: rotate(45deg);
    z-index: 100;
    position: relative;
  }

  .nav_order--Btn a::before {
    content: '';
    position: absolute;
    bottom: 273px;
    right: 98px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50vh;
  }

  /* header pc */

  @media screen and (min-width:769px){
    .header {
      padding: var(--contentPadding);
      height: 70px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: space-between;
  }
  

  .logo_sp{
    display: none;
  }

  .logo_pc{
    display: block;
    width: 176px;
  }

  .nav_header{
    display: none;
}
.nav {
    background: transparent;
    width: auto;
    height: auto;
    padding: 0;
    position: static;
    transform: translateX(0);
}

.nav__list{
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.nav_item{
    text-align: center;
    font-size: 2rem;
    margin: 0 70px 0 0;
}

.nav__item::before{
    display: none;
}

.nav_order--Btn{
  display: none;
}

.order-button{
  width: 180px;
  margin:0 ;
  font-family: "Cormorant Garamond";
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: 2.66px;
}

.header__btn{
    display: none;
}
  
}

/* pc  769px */

  /* footer sp */

  .footer{
    padding: var(--contentPadding);
  }

  .footer_group{
    display: flex;
  }

  .footer_menu{
    display: flex;
    align-items: start;
    margin-left: 117px;
  }

  .footer__topic{
    font-family: "Cormorant Garamond";
    font-size: 2.0rem;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.4px;
    margin-right:25px ;
  }

  .footer_item{
    font-family: "Cormorant Garamond";
    font-size: 1.3rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.65px;
    margin-top: 10px;
  }

  .footer__list{
    margin-top: 6px;
  }

  .sns_item{
    margin-top: 6px;
  }

  .sns_content{
    margin-top: 9px;
  }

   /* footer pc */


   @media screen and (min-width: 769px){

.footer{
  height: 400px;
}    

  .footer_menu{
    display: flex;
    align-items: start;
    margin-left: 400px;
    gap: 30px;
  }


   .footer__topic{
    font-size: 4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
  }

  .footer_item{
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
    margin-top: 30px;
  }

  .sns_item{
    width: 50px;
    height: 50px;
    margin-top: 30px;
  }

  .sns_content{
    margin-top: 30px;
  }
}