@charset "UTF-8";
/* CSS Document */

/* ------------------------------
   Layout: header + top_img = 100vh
------------------------------ */
main {padding-top: var(--header-height-pc);}

@media (max-width: 960px) {
main {padding-top: var(--header-height-sp);}
}


/* ------------------------------
   Top img
------------------------------ */
#top_img {position: relative;height: calc(100vh - var(--header-height-pc));display: flex;align-items: center;justify-content: center;}
#top_img .top_photo {position: absolute;inset: 0;display: flex;z-index: 1;}
#top_img .top_panel {flex: 1;background-size: cover;background-position: center center;position: relative;}
#top_img .top_panel::before {content: "";position: absolute;inset: 0;background: rgba(221, 217, 210, 0.3);pointer-events: none;}
#top_img .top_left {background-image: url("../img/top_left.jpg");}
#top_img .top_right {background-image: url("../img/top_right.jpg");}
#top_img .top-copy {position: relative;z-index: 2;height: 100%;display: flex;align-items: center;justify-content: center;text-align: center;color: #fff;}
#top_img .top-copy-inner {position: relative;display: inline-flex;flex-direction: column;align-items: center;}
#top_img .top-tagline {margin: 0;padding: 16px 32px 8px 64px;background-color: rgba(0, 0, 0, 1.0);font-size: 30px;letter-spacing: 6px;font-family: "hiragino-mincho-pron", sans-serif;font-weight: 600;}
#top_img .top-logo {margin: 0;position: absolute;bottom: 100%;transform: translateY(38px);width: 74%;}
#top_img .top-logo img {width: 100%; height: auto;display: block;}

@media (max-width: 960px) {
#top_img {height: calc(100vh - var(--header-height-sp));}
#top_img .top_photo {flex-direction: column;}
#top_img .top_panel {flex: 1 0 50%;width: 100%;}
#top_img .top-tagline {font-size: 28px;} 
}

@media (max-width: 768px) {
#top_img .top-tagline {padding: 12px 16px 6px 48px;font-size: clamp(16px, 3.4vw, 24px);} 
#top_img .top-logo {transform: translateY(36%);}
}

@media (max-width: 560px) {
#top_img .top-tagline {padding: 12px 14px 6px 32px;}
}

/* ------------------------------
   ABOUT
------------------------------ */
#about {position: relative;padding: 144px 0 120px;overflow: hidden;}
#about::before {content: "";position: absolute;inset: 0;background: url("../img/about_bg.jpg") no-repeat right center;background-size: auto 100%; opacity: 0.95;z-index: 0;}
#about::after {content: "";position: absolute;inset: 0;background: linear-gradient( to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%);z-index: 1;}
#about .inner {position: relative;z-index: 2;width: 80%;max-width: 1400px;margin: 0 auto;padding: 0;}
#about .about_heading {margin-bottom: 56px;}
#about .about_heading .label {font-size: 14px;letter-spacing: 0.4em;margin: 0 0 24px 20px;}
#about .about_heading .title_wrap {position: relative;display: block;}
#about .about_heading .title_bar {display: block;width: 34%;max-width: 500px;height: 44px;background: linear-gradient(to right, #a19b97 0%, #fff 100%);}
#about .about_heading .title_en {position: absolute;left: 12px;bottom: 8px;margin: 0;font-size: 48px;letter-spacing: 0.13em;font-weight: 700;font-family: "mozaic-hum-variable", sans-serif;font-variation-settings: 'wght' 700;}
#about .about_text {width: 100%; text-align: left;}
#about .about_text .catch {font-size: 40px;letter-spacing: 0.2em;margin: 0 0 40px 8px;font-family: "hiragino-mincho-pron", sans-serif;}
#about .about_text .text_lead {margin-bottom: 36px;color: #7f7f80;font-size: 14px;}
#about .about_text .text_main {font-size: 17px;color: #221714;letter-spacing: 0.2em;}

@media (max-width: 960px) {
#about::before {background-position: 56% 100%;}
#about .about_heading {margin-bottom: 56px;}
#about .about_heading .label {margin: 0 0 20px 20px;}
#about .about_heading .title_bar {height: 40px;}
#about .about_heading .title_en {font-size: 46px;}
#about .about_text .catch {font-size: 38px;}
#about .about_text .text_main {font-size: 16px;}
}

@media (max-width: 768px) {
#about {padding: 112px 0 96px;overflow: hidden;}
#about::before {background: url("../img/about_bg.jpg") no-repeat 50% 90% / auto 100%;}
#about::after {background: linear-gradient(to right, rgba(255,255,255,1)   0%, rgba(255,255,255,1.0) 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 90%, rgba(255,255,255,0)  100%);}
#about .inner {width: 90%;}
#about .about_heading {margin-bottom: 56px;}
#about .about_heading .title_bar {height: 38px;}
#about .about_heading .title_en {bottom: 13px;font-size: 38px;}
#about .about_text .catch {font-size: clamp(24px, 5vw, 34px);letter-spacing: 0.1em;margin: 0 0 40px 0px;}
#about .about_text .text_lead {margin-bottom: 32px;font-size: 13px;}
#about .about_text .text_main {max-width: 315px;font-size: 14px;letter-spacing: 0.18em;}
}


/* ------------------------------
   SLIDER
------------------------------ */
#slider {padding: 0;}
#slider .slider_inner {width: 100%;margin: 0 auto;padding: 0;}
#slider .slider_photos {display: flex;}
#slider .slider_item { flex: 0 0 calc(100% / 3);overflow: hidden;}
#slider .slider_item img {width: 100%;height: auto;display: block;object-fit: cover;}


/* ------------------------------
   RESTAURANT
------------------------------ */
#restaurant {padding: 112px 0 144px;}
#restaurant .inner {text-align: center;}
#restaurant .r_heading .label {font-size: 14px;letter-spacing: 0.4em;margin: 0 0 4px;}
#restaurant .r_heading .title_en {font-size: 48px;letter-spacing: 0.13em;margin: 0 0 20px;font-weight: 700;font-family: "mozaic-hum-variable", sans-serif;font-variation-settings: 'wght' 700;}
#restaurant .r_lead {margin: 0;font-size: 14px;letter-spacing: 0.2em;margin-bottom: 24px;}
#restaurant .r_frame {width: 90%;max-width: 1500px;margin: 0 auto;padding: 56px 0 16px;background-color: #f7f6f6;border-radius: 80px;border: 1px solid #221714;position: relative;overflow: visible;}
#restaurant .r_slider {position: relative;width: 100vw;left: 50%;transform: translateX(-50%);}
#restaurant .r_item {outline: none;}
#restaurant .r_item .r_card {max-width: 1000px;margin: 0 auto;background: transparent;}
#restaurant .r_item .r_photo {border-radius: 40px;overflow: hidden;margin: 0;aspect-ratio: 16 / 9;}
#restaurant .r_item .r_photo img {width: 100%;height: 100%;display: block;object-fit: cover;border-radius: 40px;}
#restaurant .slick-slide {padding: 0 36px;}
#restaurant .r_info {max-width: 1000px;margin: 32px auto 24px;text-align: center;}
#restaurant .r_name {margin: 0 0 8px;font-size: 26px;font-weight: 600;letter-spacing: 0.1em;}
a {color: inherit; text-decoration:none;}
#restaurant .r_desc {margin: 0;font-size: 13px;line-height: 1.8;}

@media (max-width: 960px) {
#restaurant {padding: 96px 0;}
#restaurant .r_heading .title_en {font-size: 46px;}
#restaurant .r_item .r_photo {aspect-ratio:  14/ 9;}
#restaurant .r_info {margin: 24px auto 24px;text-align: center;}
#restaurant .r_name {font-size: 24px;}
}

@media (max-width: 768px) {
#restaurant {padding: 64px 0;} 
#restaurant .r_heading .title_en {bottom: 13px;font-size: 38px;margin: 0 0 16px;}
#restaurant .r_lead {font-size: 13px;}
#restaurant .r_frame {padding: 40px 0 16px;font-size: clamp(24px, 5vw, 34px);border-radius: 40px;}
#restaurant .r_item .r_photo {aspect-ratio:  5/ 4;border-radius: 20px;}
#restaurant .r_item .r_photo img {border-radius: 20px;}
#restaurant .slick-slide {padding: 0 12px;}
#restaurant .r_info {margin: 20px auto 24px;}
#restaurant .r_name {font-size: clamp(20px, 5vw, 24px);}
#restaurant .r_desc {margin: 0;font-size: 12px;line-height: 1.8;}
}

@media (max-width: 450px) {
#restaurant .r_frame {width: 92%;}
#restaurant .slick-slide {padding: 0 8px;}   
}


/* ------------------------------
   NEWS
------------------------------ */
#news {padding: 0 0 120px;}
#news .inner {width: 80%;max-width: 1400px;margin: 0 auto;}
#news .news-content-wrapper {display: flex;align-items: center;gap: 48px;}
#news .text_area {width: 45%;}
#news .news_heading {margin-bottom: 40px;}
#news .news_heading .label {font-size: 14px;letter-spacing: 0.4em;margin: 0 0 24px 20px;}
#news .news_heading .title_wrap {position: relative;display: block;}
#news .news_heading .title_bar {display: block;width: 100%;max-width: 500px;height: 44px;background: linear-gradient(to right, #a19b97 0%, #fff 100%);}
#news .news_heading .title_en {position: absolute;left: 16px;bottom: 4px;margin: 0;font-size: 48px;letter-spacing: 0.13em;font-weight: 700;font-family: "mozaic-hum-variable", sans-serif;font-variation-settings: 'wght' 700;}
#news .n_list {list-style: none;margin: 0 0 32px;padding: 0;font-size: 14px;}
#news .n_list li {margin-bottom: 18px;}
#news .n_list .n_link {display: flex;align-items: center;gap: 24px;text-decoration: none;color: inherit;padding: 6px 0;}
#news .n_list .n_link:hover {opacity: 0.7;}
#news .n_list .n_date {letter-spacing: 0.1em;}
#news .n_list .n_row {display: flex;gap: 24px;}
#news .n_list .n_body {letter-spacing: 0.2em;}
#news .n_list .new_badge {display: inline-block;padding: 0px 14px;border-radius: 999px;background: linear-gradient(to right, #e27769, #fff);color: #fff;font-size: 12px;letter-spacing: 0.1em;}
#news .n_more_btn {display: inline-flex;align-items: center;justify-content: center;margin-top: 16px;padding: 8px 0;width: 72%;min-width: 300px;border-radius: 999px;border: 1px solid #7f7f80;text-decoration: none;color: #7f7f80;letter-spacing: 0.25em;font-size: 13px;}
#news .n_more_btn:hover {background: #7f7f80;color: #fff;border-color: #7f7f80;}
#news .news-photo-area {width: 50%;display: flex;justify-content: flex-end;}
#news .images-container {display: flex;gap: 16px;position: relative;border-radius: 0px;width: 100%;height: 500px;padding: 20px 20px 50px 20px;box-sizing: border-box;margin: 0 auto;transform: translateZ(0);}
#news .panel-bg {position: relative;height: 100%;border-radius: 20px;overflow: hidden;min-width: 50px;}
#news .panel-bg-1 { width: 35%;}
#news .panel-bg-2 { width: 30%;}
#news .panel-bg-3 { width: 35%;}
#news .panel-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;border-radius: 20px;transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
#news .panel-image.current { transform: translateX(0);}
#news .panel-image.next { transform: translateX(100%);}
#news .panel-bg-1 .panel-image { background-position: left center;}
#news .panel-bg-2 .panel-image { background-position: center;}
#news .panel-bg-3 .panel-image { background-position: right center;}

@media (max-width: 1050px) {
#news .text_area {width: 50%;}  
#news .images-container {height: 450px;padding: 20px 0px 50px 0px;}    
}

@media (max-width: 960px) {
#news {padding: 0 0 56px;}
#news .news-content-wrapper {flex-direction: column;gap: 48px;}
#news .text_area {width: 100%;}
#news .news_heading {margin-bottom: 56px;}
#news .news_heading .label {margin: 0 0 20px 20px;}
#news .news_heading .title_bar {height: 40px;max-width: none;}
#news .news_heading .title_en {font-size: 46px;}
#news .n_list {margin: 0 0 48px;}
#news .n_list li {margin-bottom: 12px;}
#news .n_list .n_link {gap: 56px;}
#news .n_list .n_date {letter-spacing: 0.2em;}
#news .n_list .n_row {gap: 56px;}
#news .n_list .n_body {letter-spacing: 0.4em;}
#news .n_list .new_badge {padding: 0px 14px;letter-spacing: 0.1em;}
#news .n_more_btn{width: 72%;max-width: 480px;min-width: 0;margin: 0 auto;padding: 12px 0;display: flex;}
#news .news-photo-area {width: 100%;}
}

@media (max-width: 768px) {
#news {padding: 0 0 40px;}
#news .inner {width: 90%;}
#news .news-content-wrapper {flex-direction: column;gap: 32px;}
#news .news_heading {margin-bottom: 32px;}
#news .news_heading .title_bar {height: 38px;}
#news .news_heading .title_en {bottom: 13px;font-size: 38px;}
#news .n_list {margin: 0 0 40px;}
#news .n_list .n_link{display: flex;flex-direction: column;align-items: flex-start;text-align: left;gap: 0px;padding: 6px 0;}
#news .n_list .n_row{display: flex;align-items: baseline;justify-content: flex-start;width: 100%;gap: 56px;}
#news .n_list .n_date {font-size: 13px;}
#news .n_list .n_body{letter-spacing: 0.3em;}
#news .n_more_btn{padding: 10px 0;font-size: 12px;}
#news .images-container {height: 400px;} 
}

@media (max-width: 560px) {
#news .n_list .n_row{justify-content: space-between;}    
}


/* ------------------------------
   RECRUIT
------------------------------ */
#recruit {position: relative;padding: 104px 0 56px;color: #fff;overflow: hidden;}
#recruit::before {content: "";position: absolute;inset: 0;background: url("../img/recruit_bg.jpg") center center / cover no-repeat;z-index: 0;}
#recruit::after {content: "";position: absolute;inset: 0;background: linear-gradient( to bottom, rgba(48, 54, 59, 0.7), rgba(67, 59, 64, 0.7));z-index: 1;}
#recruit .inner {position: relative;z-index: 2;width: 90%;max-width: 1500px;margin: 0 auto;text-align: center;display: flex;flex-direction: column;align-items: center;}
#recruit .recruit_heading {margin-bottom: 40px;}
#recruit .recruit_heading .label {font-size: 14px;letter-spacing: 0.4em;margin: 0 0 4px;}
#recruit .recruit_heading .title_en {position: static;margin: 0;font-size: 48px;letter-spacing: 0.13em;font-weight: 700;font-family: "mozaic-hum-variable", sans-serif;font-variation-settings: 'wght' 700;}
#recruit .recruit_text {color: #fff;}
#recruit .recruit_text .catch {font-size: 40px;letter-spacing: 0.2em;margin: 0 0 24px;font-family: "hiragino-mincho-pron", sans-serif;}
#recruit .recruit_text .catch br {display: none;}
#recruit .recruit_text .recruit_lead {margin: 0;font-size: 14px;letter-spacing: 0.18em;}
#recruit .recruit_photos {width: 100%;margin: 40px auto;display: flex;border-radius: 4px;overflow: hidden;}
#recruit .recruit_photos .recruit_photo {flex: 1 1 0;margin: 0;}
#recruit .recruit_photos .recruit_photo img {width: 100%;height: 100%;display: block;object-fit: cover;}
#recruit .recruit_buttons {display: flex;flex-direction: column;justify-content: center;gap: 24px;flex-wrap: wrap;}
#recruit .recruit_buttons .recruit_btn {min-width: 275px;padding: 14px 48px;text-decoration: none;text-align: center;font-size: 14px;letter-spacing: 0.25em;border: 1px solid #fff;transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;font-weight: 600;}
#recruit .recruit_buttons .btn_dw {background: rgba(67, 59, 64, 0.6);color: #fff;}
#recruit .recruit_buttons .btn_entry {background: rgba(255, 255, 255, 0.6);color: #433b40;}
#recruit .recruit_buttons .btn_dw:hover {background: rgba(67, 59, 64, 1.0);color: #fff;}
#recruit .recruit_buttons .btn_entry:hover {background: rgba(255, 255, 255, 1.0);color: #433b40;}

@media (max-width: 960px) {
#recruit {padding: 96px 0 56px;}
#recruit .recruit_heading {margin-bottom: 34px;}
#recruit .recruit_heading .title_en {font-size: 46px;}
#recruit .recruit_text .catch {font-size: 38px;}
}

@media (max-width: 768px) {
#recruit {padding: 64px 0 56px;}
#recruit .recruit_heading .title_en {font-size: 38px;}
#recruit .recruit_text .catch {font-size: clamp(24px, 5vw, 34px);letter-spacing: 0.1em;}
#recruit .recruit_text .recruit_lead {font-size: 13px;}
#recruit .recruit_photos {flex-direction: column;width: 100%;margin: 24px auto 56px;}
#recruit .recruit_photos .recruit_photo {height: fit-content;aspect-ratio: 16 / 5;}
#recruit .recruit_photos .recruit_photo img {width: 100%;height: 100%;display: block;object-fit: cover;}
#recruit .recruit_photos .recruit_photo:nth-child(1) img { object-position: center 22%;}
#recruit .recruit_photos .recruit_photo:nth-child(2) img { object-position: center 40%;}
#recruit .recruit_photos .recruit_photo:nth-child(3) img { object-position: center 32%;}
#recruit .recruit_buttons {width: 80%;max-width: 420px;margin: 0 auto;}
#recruit .recruit_buttons .recruit_btn {padding: 12px 0;font-size: 13px;letter-spacing: 0.18em;}
}

@media (max-width: 450px) {
#recruit .recruit_text .catch br {display: block;}
}




/* =========================================================
  RESTAURANT / 店舗情報（料理サムネだけ黒枠つき）
  ※レスポンシブ無し
========================================================= */

/* ------------------------------
   Section
------------------------------ */
.restaurant2{
  padding: 0 0 144px;
}

.restaurant__inner{
  width: min(1080px, 100% - 32px);
  margin: 0 auto;
}

/* ★ section最上部：横幅100%の帯画像 */
.restaurant__topBand{
  width: 100%;
  line-height: 0;            /* 画像下の謎の隙間防止 */
  overflow: hidden;          /* はみ出し対策 */
  background: #fff;          /* 透過PNGでも安心（不要なら消してOK） */
}

.restaurant__topBand img{
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------
   Heading（指定コードと同等）
------------------------------ */
.restaurant__header{
  text-align: center;
}

.restaurant__label{
  font-size: 14px;
  letter-spacing: 0.4em;
  margin: 0 0 4px;
}

.restaurant__title{
  font-size: 48px;
  letter-spacing: 0.13em;
  margin: 0 0 20px;
  font-weight: 700;
  font-family: "mozaic-hum-variable", sans-serif;
  font-variation-settings: "wght" 700;
}

.restaurant__lead{
  margin: 0 0 24px;
  font-size: 14px;
  letter-spacing: 0.2em;
}

/* ------------------------------
   HERO（店内写真 + 料理サムネ）
   - 料理サムネは店内写真に30%被せ
   - 料理サムネだけ黒い枠線（添付の雰囲気）
------------------------------ */
.restaurant__hero{
  margin: 0 auto 56px;
}

.restaurantHero{
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
}

/* 店内写真（スライダー想定） */
.restaurantHero__stage{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #eee;
}

.restaurantHero__slide{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.restaurantHero__slide.is-active{
  opacity: 1;
  pointer-events: auto;
}
.restaurantHero__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev/Next（不要なら display:none;） */
.restaurantHero__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 4;
}
.restaurantHero__nav--prev{ left: 16px; }
.restaurantHero__nav--next{ right: 16px; }

.restaurantHero__nav::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
  transform: rotate(45deg);
}
.restaurantHero__nav--prev::before{ transform: rotate(-135deg); }
.restaurantHero__nav:hover{ background: rgba(255,255,255,.92); }

/* ------------------------------
   Thumbs（30%かぶせ）
   bottom:0 + translateY(70%) = 上30%だけ店内写真に乗る
------------------------------ */
.restaurantHero__thumbWrap{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 70%);
  width: min(980px, 92%);
  z-index: 3;
}

.restaurantHero__thumbs{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center;
}

.restaurantHero__thumb{ margin: 0; }

/* ★料理写真だけ「黒枠」 */
.restaurantHero__thumbBtn{
  width: 100%;
  padding: 0;
  background: transparent;
  cursor: pointer;

  /* 黒枠の本体（添付の太さ感） */
  border: 1px solid #221714;
  border-radius: 40px;

  /* 枠線が角丸に沿って綺麗に出るように */
  overflow: hidden;

  /* ほんのり立体感（不要なら消してOK） */
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

/* 料理写真（高さ2倍維持） */
.restaurantHero__thumbBtn img{
  width: 100%;
  aspect-ratio: 2.6 / 2;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .35s ease;
}

.restaurantHero__thumbBtn:hover img{
  transform: scale(1.06);
}

/* 枠の「内側余白」を作って“額縁感”を強くしたい場合（任意）
   例：borderを太くせず見た目だけ太くしたい時に便利 */
.restaurantHero__thumbBtn{
  position: relative;
}
.restaurantHero__thumbBtn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  pointer-events: none;
}

/* ------------------------------
   Content（左：情報 / 右：Map）
   サムネが下に出る分の余白
------------------------------ */
.restaurant__content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 230px;
}

/* 店舗情報側 */
.restaurant__shopName{
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

.restaurant__shopNameEn{
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.06em;
  margin-left: 6px;
}

.restaurant__category{
	font-weight: 600;
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.2em;
}

/* dl */
.restaurant__dl{
  margin: 0;
}

.restaurant__row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e9e9e9;
}

.restaurant__row dt{
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #777;
}

.restaurant__row dd{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #222;
}

.restaurant__row a{
  color: inherit;
  text-decoration: none;
}
.restaurant__row a:hover{
  text-decoration: underline;
}

/* link */
.restaurant__links{
  margin: 18px 0 0;
}

.restaurant__externalLink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #222;
  padding: 10px 0;
}

.restaurant__externalLink::after{
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
  transform: rotate(45deg);
  display: inline-block;
}

.restaurant__externalLink:hover{
  opacity: .75;
}

/* Map */
.restaurant__mapInner{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.restaurant__mapInner iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================
  RESTAURANT responsive
  - 画面が狭い時：店舗詳細の下に地図を移動
========================================= */
@media (max-width: 900px){
  .restaurant__content{
    grid-template-columns: 1fr; /* 1列にする */
    gap: 40px;                  /* 好みで調整 */
  }

  /* 念のため並び順を固定（上：詳細、下：地図） */
  .restaurant__info{ order: 1; }
  .restaurant__map{  order: 2; }
}


/* =========================================================
  NEWS / お知らせ（添付デザイン寄せ）
========================================================= */

.news2{
  padding: 0px 0 140px;
}

.news__inner{
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
}

/* ---------- Heading ---------- */
.news__header{
  text-align: center;
  margin-bottom: 70px;
}

.news__label{
  font-size: 14px;
  letter-spacing: 0.4em;
  margin: 0 0 4px;
}

.news__title{
  font-size: 48px;
  letter-spacing: 0.13em;
  margin: 0 0 20px;
  font-weight: 700;
  font-family: "mozaic-hum-variable", sans-serif;
  font-variation-settings: "wght" 700;
}

/* ---------- Grid ---------- */
.news__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 44px; /* 縦 / 横 */
}

/* =========================================================
  Card
========================================================= */
.newsCard{
  margin: 0;
}

.newsCard__link{
  display: grid;
  grid-template-rows: 1fr auto; /* 上：テキスト / 下：画像 */
  text-decoration: none;
  color: inherit;

  border: 1px solid #1e1a17;   /* 黒枠 */
  border-radius: 44px;         /* 角丸大きめ */
  overflow: hidden;
  background: #fff;
}

.newsCard__body{
  padding: 30px 32px 18px;
  min-height: 210px; /* 添付っぽい余白感（必要なら微調整） */
}

.newsCard__title{
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: .12em;
  font-weight: 700;
}

.newsCard__date{
  display: block;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .25em;
  color: #333;
}

.newsCard__text{
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 2.05;
  letter-spacing: .08em;
  color: #333;

  /* 長文でも高さを揃えやすく（必要なければ外してOK） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.newsCard__more{
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  color: #8a8a8a;
}

.newsCard__more span{
  margin-right: 6px;
  color: #8a8a8a;
}

/* 下部画像 */
.newsCard__media{
  margin: 0;
  width: 100%;
  background: #cfc7c7; /* 画像読み込み前の下地 */
}

.newsCard__media img{
  width: 100%;
  height: 240px;       /* 添付の比率感（必要なら微調整） */
  object-fit: cover;
  display: block;
}

/* 画像なし（ロゴ仮） */
.newsCard__media--placeholder{
  height: 240px;
  display: grid;
  place-items: center;
  background: #b7aeae; /* 添付のグレージュ */
}

.newsCard__brand{
  text-align: center;
  color: #fff;
}

.newsCard__brandSmall{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .24em;
}

.newsCard__brandLarge{
  margin: 0;
  font-size: 34px;
  letter-spacing: .18em;
  font-weight: 800;
}

/* hover（控えめ） */
.newsCard__link:hover{
  transform: translateY(-2px);
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.newsCard__link:hover .newsCard__more{
  color: #555;
}

/* =========================================
  NEWS responsive（カード幅は固定で変えない）
========================================= */

/* 1) カードの固定幅（ここだけ好みで調整） */
:root{
  --news-card-w: 360px;
}

/* 2) グリッド：カード幅を固定して中央寄せ */
.news__grid{
  display: grid;
  grid-template-columns: repeat(3, var(--news-card-w));
  justify-content: center;          /* 余った分は左右に寄せず中央へ */
  gap: 40px 44px;
}

/* カード本体も念のため固定（伸び防止） */
.newsCard__link{
  width: var(--news-card-w);
}

/* 3) 2列にする（カード幅はそのまま） */
@media (max-width: 1200px){
  .news__grid{
    grid-template-columns: repeat(2, var(--news-card-w));
  }
}

/* 4) 1列にする（カード幅はそのまま） */
@media (max-width: 820px){
  .news__grid{
    grid-template-columns: repeat(1, var(--news-card-w));
  }
}

/* 5) 画面がカード幅より狭い時：カード幅を守って横スクロール */
@media (max-width: 380px){
  .news__grid{
    justify-content: start;          /* スクロール開始位置を左に */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;           /* スクロールバーで詰まるのを防ぐ */
  }

  /* 横スクロールでもカードが潰れないように */
  .newsCard__link{
    flex: 0 0 auto;
  }
}