/* Restaurant page styles (content-driven). Builds on services.css base tokens/typography. */

:root{
  /* Uses services.css tokens when present; falls back gracefully. */
  --rest-accent: var(--brand2, #8ECAD9);
  --rest-accent-deep: var(--brand, #2F6FA3);
  --rest-line: var(--line, rgba(15,27,45,.10));
}

.yccRestaurantContent,
.yccRestaurant{
  font-family: var(--ycc-font, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  font-size:16px !important;
  font-weight:400;
  line-height:1.75;
}

.yccRestaurantContent :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,button,input,textarea,select,label,a,span,strong,em),
.yccRestaurant :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,button,input,textarea,select,label,a,span,strong,em){
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif !important;
}

/* ===== Hero buttons (4 quick links) ===== */
.restaurantHeroBtns{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.restaurantHeroBtns .rbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(15,27,45,.12);
  box-shadow: 0 12px 26px rgba(15,27,45,.10);
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration:none;
  white-space:nowrap;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}

.restaurantHeroBtns .rbtn::after{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(120px 60px at 30% 20%, rgba(255,255,255,.35), transparent 60%);
  pointer-events:none;
}

.restaurantHeroBtns .rbtn:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 16px 34px rgba(15,27,45,.14);
}

.restaurantHeroBtns .rbtn:focus-visible{
  outline: 3px solid rgba(47,111,163,.28);
  outline-offset: 3px;
}

.restaurantHeroBtns .rbtn[aria-current="page"],
.restaurantHeroBtns .rbtn.isActive{
  box-shadow: 0 18px 44px rgba(15,27,45,.18);
  border-color: rgba(15,27,45,.18);
}

.restaurantHeroBtns .rbtn--restaurant{color:#0b1320; background: linear-gradient(135deg, rgba(142,202,217,.65), rgba(47,111,163,.22));}
.restaurantHeroBtns .rbtn--recruit{color:#0b1320; background: linear-gradient(135deg, rgba(240,163,90,.70), rgba(217,130,43,.22));}
.restaurantHeroBtns .rbtn--property{color:#0b1320; background: linear-gradient(135deg, rgba(125,106,197,.35), rgba(142,202,217,.22));}
.restaurantHeroBtns .rbtn--gallery{color:#0b1320; background: linear-gradient(135deg, rgba(40,167,139,.30), rgba(142,202,217,.20));}

/* If you keep the old .restaurantTabs markup, make it look like buttons too. */
.restaurantTabs{
  display:flex;
  gap: 12px;
  align-items:center;
  margin: 14px 0 6px;
  padding: 0;
  flex-wrap:wrap;
  border-bottom: 0;
  justify-content:flex-start;
}

.restaurantTabs a:not(.btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(15,27,45,.12);
  background: rgba(255,255,255,.92);
  color: rgba(15,27,45,.80);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .01em;
  position: relative;
  box-shadow: 0 12px 26px rgba(15,27,45,.08);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.restaurantTabs a:not(.btn)::before{display:none}

.restaurantTabs a:not(.btn):hover{transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 16px 34px rgba(15,27,45,.12)}

.restaurantTabs a:not(.btn)[aria-current="page"],
.restaurantTabs a:not(.btn).isActive{
  color:#0b1320;
  background: linear-gradient(135deg, rgba(142,202,217,.60), rgba(47,111,163,.18));
  border-color: rgba(15,27,45,.18);
}

/* Make the 4 tab buttons pop (Company-like, but more colorful). */
.restaurantTabs .btn{
  height: 48px;
  padding: 0 18px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .01em;
  border: 1px solid rgba(15,27,45,.12);
  box-shadow: 0 10px 26px rgba(15,27,45,.10);
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.restaurantTabs .btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 36px rgba(15,27,45,.14);
}

.restaurantTabs .btn:focus-visible{
  outline: 3px solid rgba(47,111,163,.28);
  outline-offset: 3px;
}

/* Per-button color themes.
   Use nth-of-type because the editor markup inserts <br> between links,
   so nth-child(2/3/4) would not match the later anchor buttons. */
.restaurantTabs > a.btn:nth-of-type(1){
  color:#0b1320;
  background: linear-gradient(135deg, #74b9e8 0%, #4e98d6 60%, #b9dcf4 120%);
  border-color: rgba(78,152,214,.34);
  box-shadow: 0 16px 36px rgba(78,152,214,.22);
}

.restaurantTabs > a.btn:nth-of-type(2){
  color:#0b1320;
  background: linear-gradient(135deg, rgba(142,202,217,.72), rgba(47,111,163,.20));
  border-color: rgba(47,111,163,.18);
}

.restaurantTabs > a.btn:nth-of-type(3){
  color:#0b1320;
  background: linear-gradient(135deg, rgba(174,107,209,.28), rgba(142,202,217,.20));
  border-color: rgba(174,107,209,.20);
}

.restaurantTabs > a.btn:nth-of-type(4){
  color:#0b1320;
  background: linear-gradient(135deg, rgba(40,167,139,.26), rgba(142,202,217,.18));
  border-color: rgba(40,167,139,.18);
}

/* Active state: trust aria-current from the current page only.
   Ignore .isActive because editor content can leave it on the wrong button. */
.restaurantTabs > a.btn[aria-current="page"]{
  color:#fff;
  background: linear-gradient(135deg, #f0a35a 0%, #d9822b 68%, #c56f16 100%);
  box-shadow: 0 18px 44px rgba(15,27,45,.18);
  border-color: rgba(217,130,43,.42);
}

/* Tabs (legacy) styles moved above. */

/* Card header bar like screenshot */
.restaurantSection{
  background:#fff;
  border: 1px solid var(--rest-line);
  border-radius: var(--radius2, 24px);
  overflow:hidden;
  box-shadow: var(--shadow2, 0 10px 24px rgba(15,27,45,.10));
}

.restaurantSectionHead{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 16px;
  background:
    radial-gradient(520px 140px at 18% 15%, rgba(255,255,255,.30), transparent 60%),
    linear-gradient(135deg, rgba(142,202,217,.95), rgba(47,111,163,.62));
  color: #fff;
}

.restaurantSectionHead::before{
  content:"";
  width: 10px;
  height: 22px;
  background: rgba(15,27,45,.45);
  border-radius: 2px;
}

.restaurantSectionHead h2{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}

/* Table */
.restaurantTableWrap{
  border-top: 1px solid rgba(15,27,45,.10);
}

.restaurantTable{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.restaurantTable th,
.restaurantTable td{
  border-top: 1px solid rgba(15,27,45,.14);
  border-right: 1px solid rgba(15,27,45,.14);
  padding: 12px 14px;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.restaurantTable tr:first-child th,
.restaurantTable tr:first-child td{
  border-top: 0;
}

.restaurantTable th:last-child,
.restaurantTable td:last-child{
  border-right: 0;
}

.restaurantTable th{
  width: 180px;
  background: rgba(47,111,163,.04);
  font-weight: 800;
  color: rgba(15,27,45,.82);
}

.restaurantTable .storeName{
  width: 170px;
  text-align:center;
  font-weight: 800;
  color: rgba(15,27,45,.78);
}

.restaurantIntroRow th{
  width: 180px;
}

.restaurantIntroRow td{
  border-right: 0;
}

.restaurantLink{
  color: #4aa6c2;
  text-decoration: underline;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.restaurantLink:hover{filter: brightness(1.05)}
.restaurantLink:visited{color: #2f6fa3}

/* Jobs (求人情報): contact notice box like screenshot */
.jobNotice{
  border: 1px solid rgba(214, 69, 69, .55);
  background: rgba(214, 69, 69, .04);
  border-radius: 16px;
  padding: 16px 18px;
  color: rgba(150, 46, 46, .95);
  font-weight: 700;
  line-height: 1.9;
}

.jobNotice p{margin:0}
.jobNotice p + p{margin-top:10px}
.jobNotice ul{margin:10px 0 0; padding-left: 18px}
.jobNotice li{margin:6px 0}
.jobNotice b{color: rgba(150, 46, 46, 1)}

/* Simple subsection title with left accent (used by Property contact section). */
.restSubTitle{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 20px 0 10px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .01em;
  color: rgba(15,27,45,.90);
}

.restSubTitle::before{
  content:"";
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand2, #8ECAD9), var(--brand, #2F6FA3));
  box-shadow: 0 10px 18px rgba(47,111,163,.12);
}

.restContact{
  padding: 10px 0 6px;
  color: rgba(15,27,45,.78);
  font-weight: 700;
  line-height: 1.9;
}

.restContact b{color: rgba(15,27,45,.92)}

.restaurantMedia{
  border-top: 1px solid rgba(15,27,45,.10);
}

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

/* ===== 写真集 (Gallery) ===== */
.yccGalleryContent .yccGalleryList{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 8px;
}

.yccGalleryContent .yccGalleryCard{
  display:block;
  text-decoration:none;
  border: 1px solid rgba(15,27,45,.12);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 26px rgba(15,27,45,.10);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.yccGalleryContent .yccGalleryCard:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 16px 34px rgba(15,27,45,.14);
}

.yccGalleryContent .yccGalleryCard:focus-visible{
  outline: 3px solid rgba(47,111,163,.28);
  outline-offset: 3px;
}

.yccGalleryContent .yccGalleryThumb{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(142,202,217,.35), rgba(47,111,163,.10));
}

.yccGalleryContent .yccGalleryThumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.yccGalleryContent .yccGalleryThumb.isEmpty{
  display:flex;
  align-items:center;
  justify-content:center;
}

.yccGalleryContent .yccGalleryThumbLabel{
  font-weight: 950;
  letter-spacing: .08em;
  color: rgba(15,27,45,.55);
}

.yccGalleryContent .yccGalleryCardTitle{
  padding: 12px 14px 14px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,27,45,.88);
  line-height: 1.35;
}

/* Make WP core Gallery block and Elementor gallery feel consistent on detail pages. */
.yccGalleryContent .wp-block-gallery,
.yccGalleryContent .elementor-gallery__container{
  margin: 14px 0;
}

.yccGalleryContent .wp-block-gallery .wp-block-image,
.yccGalleryContent .elementor-gallery-item{
  border-radius: 16px;
  overflow:hidden;
}

/* Media Library grid (shortcode: [ycc_media_grid]) */
.yccMediaGrid{
  --cols: 3;
  display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.yccMediaGrid.cols-2{--cols:2}
.yccMediaGrid.cols-3{--cols:3}
.yccMediaGrid.cols-4{--cols:4}
.yccMediaGrid.cols-5{--cols:5}
.yccMediaGrid.cols-6{--cols:6}

.yccMediaItem{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(15,27,45,.12);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(15,27,45,.10);
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.yccMediaItem:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 16px 34px rgba(15,27,45,.14);
}

.yccMediaItem:focus-visible{
  outline: 3px solid rgba(47,111,163,.28);
  outline-offset: 3px;
}

.yccMediaItem img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

@media (max-width: 900px){
  .yccMediaGrid{--cols:2}
}

@media (max-width: 560px){
  .yccMediaGrid{--cols:1}
  .yccMediaItem img{height:auto}
}

.yccGalleryContent .wp-block-gallery img,
.yccGalleryContent .elementor-gallery-item img{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width: 900px){
  .restaurantTabs a{font-size: 17px; padding: 12px 16px 10px}
  .restaurantTable th{width: 140px; font-size:14px}
  .restaurantTable .storeName{width: 120px}

  .yccGalleryContent .yccGalleryList{grid-template-columns: repeat(2, minmax(0, 1fr))}
}

@media (max-width: 680px){
  .restaurantTableWrap{
    padding: 0;
    background: transparent;
  }

  .restaurantTable,
  .restaurantTable tbody,
  .restaurantTable th,
  .restaurantTable td{
    display:block;
    width:100% !important;
  }

  .restaurantTable{
    table-layout:auto;
    border-collapse:separate;
    border-spacing:0;
    background: rgba(255,255,255,.98);
  }

  .restaurantTable tr{
    display:grid;
    grid-template-columns: 92px minmax(0, 1fr);
    margin: 0;
    border-top: 1px solid rgba(15,27,45,.08);
    background: transparent;
    box-shadow: none;
  }

  .restaurantTable tr:first-child{border-top:0}

  .restaurantTable th,
  .restaurantTable td{
    font-size: 14px;
    padding: 12px 12px;
    border-top: 0;
    border-right: 0;
  }

  .restaurantTable th{
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(47,111,163,.06);
    color: rgba(15,27,45,.88);
    font-size: 12.5px;
    letter-spacing: .02em;
    text-align:center;
  }

  .restaurantTable td{
    display:flex;
    align-items:center;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }

  .restaurantTable .storeName{
    grid-column: 1 / -1;
    text-align:left;
    font-size: 16px;
    font-weight: 900;
    color: #234B6A;
    background: linear-gradient(135deg, rgba(142,202,217,.20), rgba(47,111,163,.08));
    border-bottom: 1px solid rgba(15,27,45,.08);
    padding: 14px 14px 12px;
  }

  .restaurantIntroRow th{
    align-items:flex-start;
    padding-top: 14px;
  }

  .restaurantIntroRow td{
    display:block;
    white-space: pre-line;
    line-height: 1.8;
  }

  .restaurantLink{
    font-size: 13px;
    line-height: 1.7;
  }

  .restaurantSection{
    border-radius: 22px;
  }

  .restaurantSectionHead{
    padding: 12px 14px;
  }

  .restaurantSectionHead h2{font-size: 19px}

  .yccGalleryContent .yccGalleryList{grid-template-columns: 1fr}
}