/*-------------------------------------------
共通
-------------------------------------------*/
@charset "utf-8";
html{
  font-size: 100%;
}
body{
  color: #42210b;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-style: normal;
  font-size: 1.25rem; /* 20px */
}
img{
  max-width: 100%;
}
ul,li,a {
  list-style: none;
  text-decoration: none;
}
h1{
  height: 79.45px;
}

/* コンテナ */
.container{
  max-width: 1150px;
  width: 80vw;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
/* セクションタイトル */
.section-title{
  width: 170px;
  margin: 0 auto 100px ;
  padding: 7px 12px;
  border-top: 2px solid #42210b;
  border-bottom: 2px solid #42210b;
  text-align: center
}

/*-------------------------------------------
header
-------------------------------------------*/
.header{
  text-align: center;
  margin-top: 47px;
  margin-bottom: 50px;
}
.header h1{
  margin-bottom: 40px;
}
.header-logo{
  width: 300px;
}
.menu-list{
  display: flex;
  justify-content: center;
 
}
.menu-list li{
  display: inline-block;
  
  border-top: 1px solid #42210b;
  border-right: 1px dotted #42210b;
  border-bottom: 1px solid #42210b;
}
.menu-list li:last-child{
  border-right: none;
}

.menu-list li:hover{
  background-color: rgba(232,222,186,0.7);
  color: #FFF;
}
.menu-list a{
  display: block;
  padding: 4px 55px;
  color: #42210b;
}
.menu-list a:hover{
  color: #FFF;
}


/*-------------------------------------------
mainvisual
-------------------------------------------*/
.mainvisual{
  width: 100vw;
  margin-bottom: 120px;
}

/*-------------------------------------------
about
-------------------------------------------*/
.about01{
  position: relative; /* about/背景をずらす基準位置 */
  z-index: 2;
  margin-bottom: 550px;
}
.about02{
  position: relative; /* about/背景をずらす基準位置 */
  z-index: 2;
  margin-bottom: 650px;
}
.about03{
  position: relative; /* about/背景をずらす基準位置 */
  z-index: 2;
  margin-bottom: 650px;
}

/* 共通 
--------------------------------*/
.left{
  width: 48%;
  text-align: left;
}
.right{
  width: 48%;
  text-align: left;
}
.section-no{
  font-family: toppan-bunkyu-midashi-min-st, serif;
  font-style: normal;
  font-weight: 900;
  font-size: 3rem; /* 48px */
  line-height: 3rem;
  font-size: 2.93rem;
  color: #bd8746;
  margin-bottom: 20px;
}
.section-title2{
  font-size: 1.62rem; /* 26px */
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 20px;
}
.text{
  line-height: 35px;
}
.flex{
  display: flex;
  flex-wrap: wrap;
  row-gap: 80px; /* flex-wrapの上下間の幅 */
  align-content: space-between;
  justify-content: space-between;
}

/* delicious 
------------------------------*/
.about-images{
  width: 460px;
}
.about-img-back{/* 背景 */
  width: 460px;
  height: 548px;
  background-color: #e4dbcc;
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: -1;
}
.about-img2{
  width: 292px;
  height: 438px;
  position: absolute;
  top: 460px;
  left: 500px;
  z-index: 2;
}
.about-img3{
  width: 450px;
  position: absolute;
  z-index: 3;
  top: 600px;
  left: 150px;
}

/* volume 
---------------------------------*/
.about02-img1{
  width: 800px;
  position :absolute;
  top: 200px;
  left: 330px;
  z-index: -1;
}

/* wrapping 
-----------------------------------*/
.about03-img-back{ /* wrapping-背景 */
  width: 434px;
  height: 598px;
  background-color: #e4dbcc;
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: -1;
}
.about03-img2{ /* wrapping-小サイズ */
  width: 290px;
  height: 436px;
  position: absolute;
  top: 470px;
  left: 470px;
  z-index: 2;
}
.about03-img3{ /* wrapping */
  width: 540px;
  position: absolute;
  top: 350px;
  left: 650px;
  z-index: 3;
}

/*-------------------------------------------
menu
-------------------------------------------*/
.menu{
  margin-bottom: 200px;
}
.menu-item{
  box-sizing: border-box;
  /* flex-basis: 50%;/* フレックスアイテムの幅 =コンテナの50% */ 
  max-width: 50%;
  padding: 10px;
  text-align: left;
}
.menu-title{
  margin-bottom: 30px;
  font-size: 1.62rem; /* 26px */
  line-height: 1.62px;
  font-weight: bold;
}
.menu-img{
  width: 530px;
  margin-bottom: 10px;
}
.menu-text{
  line-height: 35px;
}


/*-------------------------------------------
tips
-------------------------------------------*/
.tips-text{
  width: 500px;
  text-align: left;
}
.img-big{
  width: 500px;
  height: 500px;
}
.img-min{
  width: 230px;
  height: 184px;
}
.img-mins{
  margin-top: 17px;
}
.tips-item{
  margin-bottom: 300px;
}
.tips01{
  position: relative;
}
.tips01-bg{
  position: absolute;
  top: -70px;
  left: 0px;
  z-index: -1;
  width: 92%;
  height: 640px;
  background-color: #e4dbcc;
}
.tips02{
  position: relative;
}
.tips02-bg{
  position: absolute;
  top: -70px;
  right: 0px;
  z-index: -1;
  width: 92%;
  height: 640px;
  background-color: #e4dbcc;
}
.tips03{
  position: relative;
}
.tips03-bg{
  position: absolute;
  top: -70px;
  left: 0px;
  z-index: -1;
  width: 92%;
  height: 640px;
  background-color: #e4dbcc;
}
.img-big{
  position: relative;
}
.tips-en{
  position: absolute;
  bottom: -130px;
}


/*-------------------------------------------
footer
-------------------------------------------*/
#footer{
  height: 500px;
  background-color: #42210b;
  color: #FFF;
  font-size: 15px;
}
.footer{
  text-align: left;
}
.footer-logo{
  width: 250px;
  margin: 30px 0 30px;
  
}

/* access 
-------------------------------------------*/
.access01, .access02, .access03{
  line-height: 20px;
  margin-bottom: 25px;
}

.footer-menu a{
  color: #FFF;
  font-weight: bold;
  font-size: 1.5rem;
}

/* SNS 
-------------------------------------------*/
#sns img{
  display: block;
  width: 60px;
  margin-bottom: 20px;
}

.footer-main{
  margin-bottom: 80px;
}

/* copyright 
--------------------------------------------*/
.copyright{
  text-align: center;
  font-size: 1.125rem;
}






/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 375px) {

/* 共通 
--------------------------------------------*/
body{
  font-size: 1rem;
}
/* セクションタイトル */
.section-title{
  width: 130px;
  margin: 0 auto 100px ;
  padding: 3px 8px;
  border-top: 2px solid #42210b;
  border-bottom: 2px solid #42210b;
  text-align: center
}
.section-no{
  font-family: toppan-bunkyu-midashi-min-st, serif;
  font-style: normal;
  font-weight: 900;
  font-size: 36px; /* 48px */
  line-height: 36px;
  color: #bd8746;
  margin-bottom: 20px;
}
.section-title2{
  font-size: 24px; 
  font-weight: bold;
  line-height: 35px;
  margin-bottom: 20px;
}
.text{
  line-height: 25px;
}
img{
  width: 100%;
}
.container{
  width: 100vw;
  margin: 0px 0px;
  padding: 0 4%;
}


  /* header 
  --------------------------------------*/
  .header h1{
    height: 58px;
  }
  .header{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .header-logo{
    width: 220px;
  }
  #header .menu-list{
    display: none;
  }

  /* mainvisual 
  -------------------------------------*/
  .mainvisual{
    width: 100vw;
    margin-bottom: 70px;
  }



/* about 
----------------------------------------*/
.left{
  width: 100%;
  text-align: left;
}
.right{
  width: 100%;
  text-align: left;
}
.about .flex:nth-of-type(n+1){
  flex-direction: column-reverse;
}
.about .flex{
  row-gap: 30px;
}

/* delicious 
-----------------------------------*/
.about01{
  margin-bottom: 230px;
}
.about-images{
  width: 80%;
}
.about-img-back{/* about01-背景 */
  width: 80%;
  height: 327px;
  background-color: #e4dbcc;
  position: absolute;
  top: 380px;
  left: 30px;
  z-index: -1;
}
.about-img2{/* about01-小サイズ */
  width: 40%;
  height: auto;
  position: absolute;
  top: 600px;
  left: 205px;
  z-index: 2;
}
.about-img3{/* delicious */
  width: 70%;
  position: absolute;
  z-index: 3;
  top: 680px;
  left: 30px;
}

/* volume 
-----------------------------------*/
.about02{
  margin-bottom: 330px;
}
.about02-img1{ /* グラフ */
  width: 100%;
  position :absolute;
  top: 350px;
  left: 0;
  z-index: -1;
}


/* wrapping 
-----------------------------------*/
.about03{
  margin-bottom: 280px;
}
.about03-images{
  width: 80%;
}
.about03-img-back{ /* wrapping-背景 */
  width: 80%;
  height: 380px;
  background-color: #e4dbcc;
  position: absolute;
  top: 330px;
  left: 30px;
  z-index: -1;
}
.about03-img2{ /* wrapping-小サイズ */
  width: 40%;
  height: auto;
  position: absolute;
  top: 600px;
  left: 205px;
  z-index: 2;
}
.about03-img3{ /* wrapping */
  width: 70%;
  position: absolute;
  top: 680px;
  left: 20px;
  z-index: 3;
}

/*
menu
-------------------------------------------*/
.menu{
  margin-bottom: 100px;
}
.menu .flex{
  row-gap: 60px;
}
.menu-item{
  box-sizing: border-box;
  max-width: 100%;
  padding: 10px;
  text-align: left;
}
.menu-title{
  margin-bottom: 30px;
  font-size: 24px; 
  font-weight: bold;
}
.menu-img{
  width: 100%;
  margin-bottom: 10px;
}
.menu-text{
  line-height: 24px;
}

/* tips
  --------------------------------------*/
  /* 共通
  -----------------------------*/
  
  .tips01 .flex:first-child, .tips03 .flex:first-child{
    flex-direction: column-reverse;
  }
  .tips .flex{
    row-gap: 20px;
    align-items:  flex-start;
  }
  .tips-text{
    width: 100%;
    height: auto;
    text-align: left;
  }
  .img-big{
    width: 100%;
    height: auto;
  }
  .img-min{
    width: 48%;
    height: auto;
    
  }
  .img-mins{
    margin-top: 17px;
    width: 100%;
    height: auto;
    align-items:  flex-start;
    margin-bottom: 20px;
  }
  .tips-item{
    margin-bottom: 300px;
  }
  .tips-en{
    width: 60%;
  }

/* tips01
--------------------------------*/
  .tips01{
    position: relative;
  }
  .tips01-bg{
    position: absolute;
    top: -30px;
    left: 0px;
    z-index: -1;
    width: 80%;
    height: 640px;
    background-color: #e4dbcc;
  }
  .tips01 .tips-en{
    position: absolute;
    bottom: -110px;
  }

/* tips02
--------------------------------*/
  .tips02{
    position: relative;
  }
  .tips02-bg{
    position: absolute;
    top: -70px;
    right: 0px;
    z-index: -1;
    width: 80%;
    height: 640px;
    background-color: #e4dbcc;
  }
  .tips02 .tips-en{
    position: absolute;
    right: 0px;
    bottom: -90px;
  }

/* tips03
--------------------------------*/
  .tips03{
    position: relative;
    margin-bottom: 200px;
  }
  .tips03-bg{
    position: absolute;
    top: -70px;
    left: 0px;
    z-index: -1;
    width: 80%;
    height: 640px;
    background-color: #e4dbcc;
  }
  .img-big{
    position: relative;
  }
  .tips03 .tips-en{
    width: 40%;
    position: absolute;
    bottom: -100px;
  }


  /* footer 
  --------------------------------------*/
  .footer .flex{
    row-gap: 30px;
  }
  .access02{
    color: #FFF;
  }
  #sns img{
    width: 40px;
  }
}