@charset "UTF-8";
#hero { position: relative; display: flex; align-items: center; width: 100%; height: 100svh; background-image: url(../images/hero_sp.jpg); background-repeat: no-repeat; background-size: cover; background-position: bottom left; }
@media screen and (min-width: 801px) { #hero { background-image: url(../images/hero_pc.jpg); background-size: 100% auto; background-position: center left; } }
#hero .hero-copy { position: absolute; left: 0; bottom: 5%; width: 100%; text-align: center; }
@media screen and (min-width: 801px) { #hero .hero-copy { left: auto; right: 5%; bottom: auto; width: 50%; max-width: 650px; } }
@media screen and (min-width: 801px) and (min-width: 1281px) { #hero .hero-copy { right: 10%; } }

#hero h1 { font-size: 28px; line-height: 1.3; font-weight: 500; color: #fff; text-shadow: 0 0 15px #251308; }
@media screen and (min-width: 801px) { #hero h1 { font-size: 40px; } }
@media screen and (min-width: 1024px) { #hero h1 { font-size: 50px; } }
@media screen and (min-width: 1281px) { #hero h1 { font-size: 60px; } }
#hero h1 small { display: block; margin-bottom: 10px; font-size: 14px; line-height: 1; font-weight: 400; }
@media screen and (min-width: 801px) { #hero h1 small { margin-bottom: 20px; font-size: 18px; } }
@media screen and (min-width: 1024px) { #hero h1 small { font-size: 21px; } }
@media screen and (min-width: 1281px) { #hero h1 small { font-size: 24px; } }
#hero p { width: 80%; max-width: 600px; margin: 15px auto 0; border: 1px solid #FFF; background: rgba(37, 19, 8, 0.7); font-size: 18px; line-height: 50px; font-weight: 500; letter-spacing: 0.05em; color: #fff; text-align: center; }
@media screen and (min-width: 801px) { #hero p { width: 100%; margin: 40px auto 0; font-size: 24px; line-height: 60px; } }
@media screen and (min-width: 1024px) { #hero p { border: 2px solid #FFF; font-size: 32px; line-height: 70px; } }
@media screen and (min-width: 1281px) { #hero p { font-size: 36px; line-height: 90px; } }

#News { background: #F5EFEA; padding: 60px 0; }
@media screen and (min-width: 801px) { #News { padding: 120px 0; } }
@media screen and (min-width: 801px) { #News .container { width: 80%; max-width: 1000px; margin: auto; display: flex; justify-content: space-between; align-items: flex-start; } }
@media screen and (min-width: 801px) { #News h2.ttl { margin: 0; padding-right: 80px; width: 20%; } }
#News .news-block { margin-top: 20px; }
@media screen and (min-width: 801px) { #News .news-block { margin-top: 0; width: calc(80% - 80px); } }
#News li { border-bottom: solid 1px #333; padding: 5px 10px 5px 0; }
@media screen and (min-width: 801px) { #News li { padding: 10px 10px 10px 0; } }
#News a { display: flex; flex-wrap: wrap; align-items: center; }
#News img { text-align: center; width: 90px; height: 90px; object-fit: cover; }
@media screen and (min-width: 801px) { #News img { width: 150px; height: 100px; } }
#News figure.base { border: solid 1px #ddd; }
#News .txt { padding-left: 20px; }
@media screen and (min-width: 801px) { #News .txt { padding-left: 30px; } }
#News .txt.cell1 { width: 100%; }
#News time { font-size: 15px; font-weight: 500; }
@media screen and (min-width: 801px) { #News time { font-size: 16px; } }
#News p { font-size: 14px; line-height: 1.4; margin-top: 7px; }
@media screen and (min-width: 801px) { #News p { font-size: 16px; } }
#News .btn-link { margin-top: 30px; }
@media screen and (min-width: 801px) { #News .btn-link { margin-top: 40px; } }

#TheChef { padding: 0 0 60px 0; }
@media screen and (min-width: 801px) { #TheChef { padding: 160px 0; } }
@media screen and (min-width: 801px) { #TheChef .container { width: 80%; max-width: 1000px; margin: auto; display: flex; justify-content: space-between; } }
@media screen and (min-width: 801px) { #TheChef .img { width: 42%; } }
#TheChef h2.ttl { margin-left: 0; }
#TheChef .txt { width: 90%; margin: 40px auto 0; }
@media screen and (min-width: 801px) { #TheChef .txt { width: 50%; margin: 70px 0 0 0; } }
#TheChef h3 { font-size: 24px; margin: 30px 0 -5px 0; }
@media screen and (min-width: 801px) { #TheChef h3 { font-size: 32px; margin: 50px 0 -5px 0; } }
#TheChef p { margin-top: 20px; font-size: 16px; line-height: 1.6; }
@media screen and (min-width: 801px) { #TheChef p { margin-top: 30px; font-size: 17px; } }
#TheChef .btn-link { margin: 50px auto 90px; }
@media screen and (max-width: 800px) { #TheChef .btn-link { width: 80%; margin: 40px auto; } }
#TheChef .motto { font-family: "Cormorant Garamond", serif; font-size: 21px; line-height: 1.3; text-align: center; margin-top: 60px; }
@media screen and (min-width: 801px) { #TheChef .motto { font-size: 30px; margin-top: 90px; } }
#TheChef .motto small { display: block; margin-top: 15px; font-family: "Noto Sans JP", sans-serif; font-size: 12px; line-height: 1.4; }
@media screen and (min-width: 801px) { #TheChef .motto small { margin-top: 30px; font-size: 15px; line-height: 1.5; } }

#Stores { background: #F5EFEA; padding: 60px 0; }
@media screen and (min-width: 801px) { #Stores { padding: 160px 0; } }
#Stores .jp-area { margin-top: 20px; }
@media screen and (min-width: 801px) { #Stores .jp-area { width: 90%; max-width: 1200px; margin: 40px auto 0; } }
#Stores .jp-area .inner { width: 90%; margin: 40px auto; }
@media screen and (min-width: 801px) { #Stores .jp-area .inner { width: 80%; margin: 80px auto 0; } }
#Stores .jp-area h3 { text-align: center; font-size: 24px; }
@media screen and (min-width: 801px) { #Stores .jp-area h3 { font-size: 32px; } }
#Stores .jp-area h3 span { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 15px; line-height: 1.4; font-weight: 400 !important; margin-top: 10px; }
@media screen and (min-width: 801px) { #Stores .jp-area h3 span { font-size: 20px; margin-top: 15px; } }
#Stores .jp-area .h3_txt { font-size: 15px; line-height: 1.6; margin-top: 20px; }
@media screen and (min-width: 801px) { #Stores .jp-area .h3_txt { font-size: 16px; margin-top: 30px; } }
#Stores .flex-box { margin: 60px 0; }
@media screen and (min-width: 801px) { #Stores .flex-box { display: flex; justify-content: space-between; align-items: center; margin: 80px auto; } }
@media screen and (min-width: 801px) { #Stores .flex-box figure { width: 45%; } }
@media screen and (min-width: 801px) { #Stores .txt { width: 50%; } }
#Stores .txt p { margin-top: 15px; font-size: 15px; line-height: 1.6; }
@media screen and (min-width: 801px) { #Stores .txt p { margin-top: 0; font-size: 17px; } }
@media screen and (min-width: 801px) { #Stores .reverse { flex-wrap: wrap-reverse; }
  #Stores .reverse figure { order: 2; }
  #Stores .reverse .txt { order: 1; } }
#Stores .btn-link { margin: 30px auto 15px; }
@media screen and (min-width: 801px) { #Stores .btn-link { width: 300px; margin: 30px auto 10px; } }
@media screen and (min-width: 801px) { #Stores .btn-reserve { width: 300px; } }
#Stores .access h4 { width: 150px; height: 30px; border-radius: 25px; background: #000; text-align: center; font-size: 21px; line-height: 32px; color: #fff; font-weight: 400; }
#Stores .access .flex-box { margin: 20px 0 0 0; }
@media screen and (min-width: 801px) { #Stores .access .flex-box { margin: 30px auto; align-items: flex-start; } }
@media screen and (min-width: 801px) { #Stores .access .map { width: 45%; } }
#Stores .access .txt strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 500; margin-top: 20px; }
@media screen and (min-width: 801px) { #Stores .access .txt strong { font-size: 20px; margin-top: 0; } }
@media screen and (min-width: 801px) { #Stores .access .txt p { margin-top: 20px; font-size: 16px; } }
#Stores .access ul { list-style: disc; margin-bottom: 40px; }
#Stores .access li { font-size: 14px; line-height: 1.3; margin-top: 5px; margin-left: 20px; }
@media screen and (min-width: 801px) { #Stores .access li { font-size: 15px; } }
#Stores .access li:first-child { font-size: 15px; list-style: none; margin-top: 15px; margin-left: 0; }
@media screen and (min-width: 801px) { #Stores .access li:first-child { font-size: 16px; margin-top: 20px; } }
#Stores .fr-area { width: 90%; max-width: 1200px; margin: 80px auto 0; /* 表示状態：不透明＋元の位置へ */ }
@media screen and (min-width: 801px) { #Stores .fr-area { margin: 120px auto 0; } }
#Stores .fr-area h3 { font-size: 30px; }
@media screen and (min-width: 801px) { #Stores .fr-area h3 { font-size: 40px; } }
#Stores .fr-area #fr-shops-list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: -20px; }
@media screen and (min-width: 801px) { #Stores .fr-area #fr-shops-list::after { content: ""; display: block; width: 23%; }
  #Stores .fr-area #fr-shops-list::before { content: ""; display: block; width: 23%; order: 1; } }
#Stores .fr-area #fr-shops-list li { transition: all 0.4s ease; width: 48%; margin-top: 30px; }
@media screen and (min-width: 801px) { #Stores .fr-area #fr-shops-list li { width: 23%; margin-top: 50px; } }
#Stores .fr-area #fr-shops-list li.hidden { display: none; }
#Stores .fr-area .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
#Stores .fr-area .fade-in.show { opacity: 1; transform: translateY(0); }
#Stores .fr-area h4 { margin: 15px 0; font-size: 16px; line-height: 1.3; }
@media screen and (min-width: 801px) { #Stores .fr-area h4 { font-size: 18px; } }
#Stores .fr-area h4 small { display: block; margin-top: 5px; font-size: 12px; }
@media screen and (min-width: 801px) { #Stores .fr-area h4 small { font-size: 13px; margin-top: 8px; } }
#Stores .fr-area p { font-size: 13px; line-height: 1.5; }
@media screen and (min-width: 801px) { #Stores .fr-area p { font-size: 14px; } }
#Stores .fr-area a { text-decoration: underline; }
#Stores .fr-area #showMoreBtn, #Stores .fr-area #showBackBtn { cursor: pointer; display: block; position: relative; max-width: 200px; font-size: 14px; line-height: 30px; text-align: center; border-bottom: solid 1px #000; margin: 40px auto 0; }
@media screen and (min-width: 801px) { #Stores .fr-area #showMoreBtn, #Stores .fr-area #showBackBtn { font-size: 16px; max-width: 300px; margin: 80px auto 0; } }
#Stores .fr-area #showMoreBtn::after, #Stores .fr-area #showBackBtn::after { position: absolute; right: 0; display: inline-block; content: "\025bd"; font-size: 12px; font-family: Arial, Helvetica, "sans-serif"; }
@media screen and (min-width: 801px) { #Stores .fr-area #showMoreBtn::after, #Stores .fr-area #showBackBtn::after { font-size: 14px; } }
#Stores .fr-area #showBackBtn { display: none; }
#Stores .fr-area #showBackBtn.is-show { display: block; }
#Stores .fr-area #showBackBtn::after { content: "\02227"; }

#Products { padding: 60px 0; }
@media screen and (min-width: 801px) { #Products { padding: 160px 0; } }
#Products ul { margin-top: -20px; }
@media screen and (min-width: 801px) { #Products ul { width: 90%; max-width: 1200px; margin: -10px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; } }
#Products li { margin-top: 50px; text-align: center; }
@media screen and (min-width: 801px) { #Products li { width: 48%; margin-top: 70px; } }
#Products h3 { font-size: 27px; margin-top: 15px; }
@media screen and (min-width: 801px) { #Products h3 { font-size: 30px; margin-top: 20px; } }
#Products h3 span { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 15px; font-weight: 400; margin-top: 5px; }
@media screen and (min-width: 801px) { #Products h3 span { font-size: 16px; } }

#instagram { background: #F5EFEA; padding: 60px 0; }
@media screen and (min-width: 801px) { #instagram { padding: 120px 0; } }
#instagram ul { width: 90%; max-width: 1300px; margin: 20px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
#instagram ul li { width: 48%; text-align: center; margin: 8px 0; }
@media screen and (min-width: 801px) { #instagram ul li { width: calc(100% / 6); margin: 50px 0 0 0; padding: 0 5px; } }
#instagram ul a { display: block; }
@media screen and (min-width: 801px) { #instagram ul a { position: relative; overflow: hidden; } }
#instagram ul .hover-layer { display: none; }
@media screen and (min-width: 801px) { #instagram ul .hover-layer { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 26, 21, 0.2); background-image: url(../images/icon_Instagram_w.svg); background-size: 30px 30px; background-repeat: no-repeat; background-position: center center; opacity: 0; transition: opacity 0.35s ease; } }
#instagram ul a:hover .hover-layer { opacity: 1; }