@charset "utf-8";

.visually_hidden{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 4px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
}

html{
  font-size: 62.5%;
  overflow-x: hidden;
}

body{
  background-color: #fff;
  color: #333;
  line-height: 1.5;
  font-family: "Sawarabi Mincho", serif;
  font-weight: 400;
  font-style: normal;
  scroll-behavior: smooth;
  overflow-x: hidden;
}


.headerArea{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #F7F3E5;
}
.headerArea a{
  width: 24%;
  max-width: 240px;
  min-width: 160px;
  padding: 20px;
}
.nav1{
  align-self: flex-end;
}

/*** footer
******************/
.footer{
  width: 100%;
  background: url(../Photo/fi.png);
}
.footerArea{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.snsPhoto{
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.snsPhoto a{
  width: 50px;
  margin: 0 30px;
}
.f1{
  width: 50%;
  font-size: 20px;
  text-align: center;
}
.btn{
  width: 50%;
  margin: 0 auto;
  padding: 10px;
  color: #fff;
  background-color: #292121;
  border-radius: 20px;
}

.date{
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  text-align: center;
  background: linear-gradient(#ffffffbd, #ffebf9e8, #fcc9edeb, #fda4e3, #ff5bd0);
}
.date p{
  padding: 5px 0;
}

#btn_open{
  display: none;
  /* ブレイクポイントより前に書いておく */
}
.drawer{
  width: 100%;
  display: none;
}

/************ 900px レスポンシブ対応：PCからスマホサイズにする場合 ****************/
/* @media screen and (max-width: 900px){
  .headerArea{
    width: 100%;
    text-align: center;
    display: block;
    flex-wrap: wrap;
  }
  .header .logo{
    margin: 0 auto;
  }
}
 */
/****** footer *****/
/* .date{
  line-height: 1.5;
} */



/************ 640px レスポンシブ対応：PCからスマホサイズにする場合 ****************/
@media screen and (max-width: 640px){
  .key_visual {
    display: block;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-image: url(../Photo/key_visual.png);
  }
  .sRogo{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-19%,-50%);
  }
  .headerArea a{
    display: none;
  }
  .footerArea{
    display: block;
    padding: 20px 0;
  }
  .snsPhoto{
    width: 100%;
    margin-bottom: 20px;
    justify-content: center;
  }
  .snsPhoto a{
    width: 30px;
    margin: 0 20px;
  }
  .f1{
    width: 80%;
    margin: 0 auto;
  }
  .btn{
    width: 70%;
    padding: 5px;
  }
  .date{
    padding: 10px;
  }
  .date p{
    padding: 3px 0;
  }
  
}