@charset "UTF-8";

/* ==================================
   A) TOPレイアウト（index.html）
   ================================== */
.header.top{ min-height: 100vh; }
.top-inner{
  min-height: 100vh;
  display: flex;
}

.top-left{
  width: 320px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.top-right{
  flex: 1;
  position: relative;
  overflow: hidden;
}


.top-right img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-show img.is-active{ opacity: 1; }
@media (max-width: 900px){
  .slide-show{
    aspect-ratio: 3 / 4;
  }
}


/* PCだけ：タイトル縦並び（indexだけ） */
@media (min-width: 901px){
  .title-small,
  .title-main{
    display: block;
  }
}

/* ==================================
   B) TOPのPCナビ（縦並び）
   ※ここが大事：.pc-nav にだけ当てる
   ================================== */
.pc-nav ul li{
  margin-bottom: 1.2rem;
  font-size: clamp(1.4rem, 1.35vw, 1.8rem);
}

/* PC：電話を一番下へ */
@media (min-width: 901px){  
  .top-left{ min-height: 100vh; }

  .pc-nav{
    flex: 1;
    display: flex;
  }

  .pc-nav ul{
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .pc-nav ul li:last-child{
    margin-top: auto;
  }
}

/* ==================================
   C) レスポンシブ：900px以下はハンバーガー
   ================================== */
@media (max-width: 900px){
  .pc-nav{ display: none; }
  #hamburger-nav{ display: block; }

  .top-inner{ flex-direction: column; }

  .top-left{
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .top-right{ height: 70vh; }
}

/* ==================================
   D) PCだけ：トップ画像が見えなくなったら
   ハンバーガーだけ右上に浮かせる（任意）
   ================================== */
@media (min-width: 901px){
  #hamburger-nav{
    display: block;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1002;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.pc-float-hamburger #hamburger-nav{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ==================================
   E) スマホ：ヘッダー（top-left）を固定バー化
   ※変数 --mobile-bar-h は style.css の :root で定義済み前提
   ================================== */
@media (max-width: 900px){
  .top-left{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-bar-h);
    background: #fff;
    z-index: 900;

    transition: transform .3s ease, opacity .3s ease;
  }

  /* 固定バー分だけ中身を押し下げる */
  .top-inner{
    padding-top: var(--mobile-bar-h);
  }

  main{
    padding-top: 0; 
  }

  section{
    scroll-margin-top: var(--mobile-bar-h);
  }

  /* スクロールで隠す（JSで .header-hidden を付ける想定） */
  .top-left.header-hidden{
    transform: translateY(-110%);
    opacity: 0;
  }
}
/* menuの上の余白 */
@media (min-width: 901px){
  .menu{
    margin-top: 64px;  /* 好きに調整：48〜96くらいが自然 */
  }
}
/* ==================================
   F) index内の各セクション（元CSS）
   ================================== */




/* メニュー（indexカード） */
.menu{
  padding: 0 5%;
  margin-bottom: 5%;
}

/* 画像＋右一覧 */
.menu-card{
  padding: 3% 5%;
  display: flex;
  gap: 100px;
  font-size: clamp(0.95rem, 1.2vw, 1.3rem);
  background: #fff;
  text-decoration: none;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

/* 左：画像の“枠” */
.menu-photo{
  flex: 5;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.menu-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  aspect-ratio: 3 / 2;
}

/* 右：一覧 */
.menu-items{
  flex: 5;
  min-width: 0;   
}

/* dl版 */
.menu-list{
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto;
}

.menu-item__title,
.menu-item__price{
  margin: 0;
  padding: 12px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #333;
  line-height: 1.6;
}

.menu-item__title{
  font-weight: 800;
}

.menu-item__price{
  text-align: right;
  white-space: nowrap;
}

/* スマホ（縦並び） */
@media (max-width: 768px){
  .menu-card{
    flex-direction: column;
    gap: 20px;
  }

  .menu-photo{ position: static; }
  .menu-photo img{
    position: static;
    width: 100%;
    height: auto;
    object-fit: cover;
  }


  .menu-item__title,
  .menu-item__price{
    padding: 10px 0;
  }
}


/* スタッフ */
.staff{
  padding: 0 5%;
  margin-bottom: 5%;
}
.staff-items{
  padding: 3% 5%;
  display: flex;
  width: 100%;
  gap: 0;
  align-items: stretch;
  box-sizing: border-box;
  height: clamp(320px, 45vw, 520px);
  font-size: clamp(1rem, 1.2vw, 1.3rem);
}
.staff-media{
  flex: 0 0 50%;
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-photo{
  width: clamp(180px, 28vw, 340px);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.staff-info{
  flex: 0 0 50%;
  width: 50%;
  padding: 20px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.staff-info h3{
  font-size: 1.4em;       
  margin: 0 0 2rem;
  line-height: 1.2;
}
.staff-desc{
  margin: 0 0 16px;
  line-height: 1.9;
  font-size: 1em;
}
.staff-qual{
  margin: 0;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.staff-qual__label{
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: .04em;
}
.staff-qual__value{  font-size: 1em;}

@media (max-width: 600px){
  .staff-items{
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    padding: 20px;
  }
  .staff-media,
  .staff-info{
    width: 100%;
    flex: 0 0 auto;
  }
  .staff-media{ padding: 12px 10px; }
  .staff-photo{
    width: min(70vw, 260px);
    max-height: none;
  }
  .staff-info{
    padding: 18px 10px;
    justify-content: flex-start;
  }
}

/* INFO */
.info{
  padding: 0 5%;
  margin-bottom: 5%;
}
.info-items{
  padding: 3% 5%;
  margin: 0 auto;
}
.info-top{
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 4vw, 48px);
  padding: 0 0 5% 0;
  gap: 100px;
}
.info-photo{
  flex: 5;
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 2px;
  aspect-ratio: 3 / 2;
}
.info-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.info-table-wrap{
  flex: 5;
  min-width: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.3rem);
  display: flex;
  align-items: center;
}
.info-table-wrap table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.info-table-wrap tr{ border-bottom: 1px solid #333; }
.info-table-wrap tr:last-child{ border-bottom: none; }

.info-table-wrap th,
.info-table-wrap td{
  padding: 12px 0;
  text-align: left;
  vertical-align: top;
}
.info-table-wrap th{
  width: 7em;
  padding-right: 1.5em;
  white-space: nowrap;
}
.info-table-wrap td a{
  color: #333;
  text-decoration: none;
}

@media (max-width: 768px){
  .info-top{
    flex-direction: column;
    gap: 14px;
  }
  .info-photo{
    max-width: 100%;
    width: 100%;
    aspect-ratio: 3 / 2;
  }
  .info-table-wrap{ align-items: flex-start; }
  .info-table-wrap th,
  .info-table-wrap td{
    line-height: 1.6;
    padding: 10px 0;
  }
  .info-table-wrap th{
    width: 6em;
    padding-right: 1em;
  }
}

/* map wide */
.map-wide{
  width: 100%;
  overflow: hidden;
}
.map-wide iframe{
  width: 100%;
  height: clamp(220px, 32vw, 380px);
  display: block;
  border: 0;
}

/* NEWS（index用） */
.news{
  padding: 0 5%;
  margin-bottom: 5%;
}
.news-item{
  display: block;
  padding: 16px 0;
  border-top: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}
.news .news-item:has(+ .more-button){
  border-bottom: 1px solid #ccc;
}
.news-item:hover{ background-color: #f7f7f7; }
.empty-news{
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
}
.news-date{
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 4px;
}
.news-title{
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.news-text{
  font-size: 0.95rem;
  margin-bottom: 4px;
}
@media (max-width: 768px){
  .news-date{ font-size: 0.6rem; }
  .news-title{ font-size: 0.8rem; }
  .news-text{ font-size: 0.7rem; }
}