@charset "utf-8";
/* CSS Document */
.header{
  height: 100vh;
}

.header-wrapper{
  background-image: url(../img/top-image.png);
  background-position: center;
  background-size: cover;
  height: 75vh;
}

.header-foot{
  background-color: #FFF;
  position: relative;
  width: 100%;
  height: 25vh;
}
.header-foot_wrapper{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: 0 auto;
}
.header-foot img{
  width: 100%;
  padding-bottom: 3vh;
}
.header-foot p{
  font-family: "hiragino-mincho-pron", sans-serif;
  font-weight: 600;
  font-style: normal; 
  font-size: 1.8rem;
}


.about{
  background-image: url("../img/daniel-tellez-giron-ZOINPNtpvGI-unsplash.png");
  background-position: center;
  background-size: cover;
  width: 100%;
  padding: 40px 20px;
  text-align: left;
  color: #FFF;
}
.about-heading{
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.0rem;
  letter-spacing: 0.4rem;
  line-height: 3.0rem;
}
.about-heading_main{
  padding-bottom: 40px;
  font-family: "noto-sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.4rem;
}
.about-sentence{
  padding-top: 40vh;
  
}
.about-sentence p{
  padding-bottom: 20px;
  font-size: 1.6rem;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 4.0rem;
  letter-spacing: 0.2rem;
}
.about-sentence a{
  color: #FFF;
  font-family: "noto-sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.8rem;
  letter-spacing: 0.5rem;
  text-decoration: none;
  border-bottom: solid 1px #FFF;
  transition: .6s;
  padding: 3px 2px 3px 7px;
}
.about-sentence a:hover{
  background-color: #FFF;
  color: #201D1A;
}

.reason{
  width: 100%;
  background-color: #FFF;
  padding: 40px 0 ;
  overflow: hidden;
}
.reason img{
  aspect-ratio: 2 / 1.2;
}
.reason-wrapper{
  width: 80%;
  margin-left: auto;
}
.reason-image1{
  width: 100%;
}
.reason-image1 img{
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0px 8px 16px rgba(40, 40, 40, 0.5);
}
.reason-sentence{
  padding: 30px 20px 40px 0;
  text-align: left;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  
}
.reason-sentence h2{
  font-weight: 600;
  font-size: 2.4rem;
}
.reason-sentence p{
  padding-top: 20px;
  font-size: 1.6rem;
  line-height: 3.4rem;
  letter-spacing: 0.2rem;
  font-weight: 400;
}
.reason-image2{
  width: 80%;
  margin-right: auto;
}
.reason-image2 img{
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0px 8px 16px rgba(40, 40, 40, 0.5);
}

.menu{
  background-color: #F1EEE0;
  padding-top: 40px;
  width: 100%;
  text-align: left;
}
.menu h2{
  font-family: "noto-sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem; 
  padding-left: 20px;
  padding-bottom: 40px;
  letter-spacing: 0.4rem;
}
.menu img{
  width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 0.67;
}
.menu-onigiri,.menu-soup,.menu-drink{
  padding-bottom: 40px;
}
.menu-contents{
  padding: 20px ;
}
.menu-heading{
  padding-bottom: 20px;
}
.menu-heading h3{
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 2.4rem;
}
.menu-heading h4{
  color: #FFFBEE;
  font-family: "noto-sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 6.4rem;
  line-height: 5.0rem;
  margin-bottom: -35px;
  margin-left: 20px;
  letter-spacing: 0.8rem;
  text-align: center;
}
.menu-sentence{
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 1.6rem;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 3.0rem;  
  letter-spacing: 0.15rem;
}
.menu-sentence p{
  padding-bottom: 20px;
}
.menu-text a{
  color: #201D1A;
  font-family: "noto-sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.8rem;
  letter-spacing: 0.5rem;
  text-decoration: none;
  border-bottom: solid 1px #201D1A;
  transition: .6s;
  padding: 3px 2px 3px 7px;
}
.menu-text a:hover{
  background-color: #201D1A;
  color: #FFF;
}

.take-out{
  padding: 40px 0 20px;
  background-color: #FFF;
  text-align: left;
}
.take-out h2{
  font-family: "noto-sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem; 
  padding-left: 20px;
  padding-bottom: 40px;
  letter-spacing: 0.4rem;
}
.take-out img{
  aspect-ratio: 2 / 1;
  width: 100%;
  object-fit: cover;
}
.take-out p{
  padding: 20px;
  font-size: 1.6rem;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 3.0rem;
  letter-spacing: 0.15rem;
}
.shop-info{
  background-color: #FFF;
  text-align: left;
  padding: 40px 0;
}
.shop-info h2{
  font-family: "noto-sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem; 
  padding-left: 20px;
  padding-bottom: 40px;
  letter-spacing: 0.4rem;
}
.shop-info_map{
  width: 100%;
  aspect-ratio: 2 / 1.3;
}
.shop-info_map iframe{
  height: 100%;
  width: 100%;
  filter:saturate(150%);
  -webkit-filter:saturate(150%);
}
.shop-info_content{
  padding: 0 20px;
}
.shop-info_content hr{
  margin: 0;
  height: 1px;
  background-color: #999999;
}
.shop-info_detail{
  padding: 15px 8px;
}
.shop-info_detail h3{
  font-size: 1.4rem;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1rem;
}
.shop-info_detail h3 span{
  color: #999999;
  font-size: 1.2rem;
  font-family: "noto-sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.2rem;
  padding-left: 10px;
}
.shop-info_detail p{
  font-size: 1.4rem;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.15rem;
  padding-top: 10px;
}

.inquiry{
  background-color: #FFF;
  padding-bottom: 80px;
}
.inquiry img{
  aspect-ratio: 2 / 1;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.inquiry h2{
  font-family: "noto-sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem;
  padding: 30px 20px 0;
  letter-spacing: 0.4rem;
  text-align: left;
}
.inquiry p{
  padding: 30px 20px 45px;
  font-size: 1.6rem;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 3.0rem;
  letter-spacing: 0.15rem;
  text-align: left;
}
.inquiry a{
  font-size: 1.6rem;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2rem;
  color: #201D1A;
  border: solid 1px #201D1A;
  text-decoration: none;
  padding: 8px 40px;
  transition: .6s;
}
.inquiry a:hover{
  background-color: #201D1A;
  color: #FFF;
}
@media(max-width: 360px){
  .inquiry a{
    font-size: 1.0rem;
  }
  .menu-heading h4{
    font-size: 4.0rem;
    letter-spacing: 0;
  }
}