@charset "UTF-8";
/* ============================================================
   料理ページ (food.css) — Figma「food」フレーム準拠
============================================================ */

.fd-content{
  position:relative;z-index:2;
  background:var(--white) url('../images/bg-texture.png') top left/800px auto;
  display:flex;flex-direction:column;
  padding:100px 0;
}

/* イントロ＋タブ＋スライダー */
.fd-intro{display:flex;flex-direction:column;align-items:center;gap:96px;padding: 0 40px;}
.fd-intro__txt{max-width:1550px;text-align:center;display:flex;flex-direction:column;gap:77px;}
.fd-intro__txt h2{font-size:40px;font-weight:500;line-height:1.4;}
.fd-intro__txt p{font-size:15px;line-height:2;}
#shun{padding-top: 150px;}

/* スライダー（room4と同型・枠内） */
.rd-slider {
    width: 100%;
    position: relative;
  }
  .rd-slider--boxed {
    max-width: 1359px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden; /* 画面外を隠す（必須） */
  }
  .rd-slider--boxed .rd-slider__track {
    display: flex;
    /* スライドが横一列に並ぶように中身に合わせる */
    width: max-content; 
    position: relative;
    will-change: transform;
  }
  .rd-slider--boxed .rd-slider__slide {
    /* JSで親要素(rd-slider--boxed)とぴったり同じ幅を付与するため、ここでは固定幅を指定しません */
    flex: 0 0 auto;
    height: 726px;
  }
  .rd-slider--boxed .rd-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #ddd; /* 画像がない場合のダミー色 */
  }
  /* ナビゲーションドット */
  .rd-slider__dots {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 3;
  }
  .rd-slider__dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.55);
    transition: background 0.3s;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
  }
  .rd-slider__dots button.is-active {
    background: #fff;
  }
  /* --- スマホ閲覧時のレスポンシブ調整 --- */
  @media (max-width: 768px) {
    .rd-slider--boxed .rd-slider__slide {
      /* スマホ時に縦に長くなりすぎるのを防ぐための調整（必要に応じて数値を変更してください） */
      height: 400px;
    }
  }

/* 旬の味覚（四季ブロック） */
.fd-season{display:flex;flex-direction:column;gap:104px;padding:0 0 100px;}
.fd-season__head{text-align:center;display:flex;flex-direction:column;gap:49px;padding:0 40px;}
.fd-season__head h2{font-size:40px;font-weight:500;line-height:1.4;}
.fd-season__head p{font-size:15px;line-height:2;}
.fd-season__list{display:flex;flex-direction:column;gap:150px;}

.fblock{display:flex;gap:90px;justify-content:flex-end;align-items:flex-start;width:100%;overflow:hidden;}
.fblock__title{flex-shrink:0;width:72px;border-left:1px solid var(--white);padding-left:23px;padding-bottom:140px;}
.fblock__title span{
  display:block;writing-mode:vertical-rl;text-orientation:mixed;
  font-size:40px;font-weight:500;line-height:1.25;letter-spacing:.3em;
}
.fblock__body{width:calc(100% - 291px);max-width:1524px;display:flex;flex-direction:column;gap:39px;}
.fblock__img{height:100%;max-height: 600px;aspect-ratio: 19 / 9;}
.fblock__img img{width:100%;height:100%;object-fit:cover;}
.fblock__foot{display:flex;gap:97px;align-items:flex-start;max-width:1525px;}
.fblock__txt{width:535px;flex-shrink:0;padding-top:25px;}
.fblock__txt p{font-size:15px;line-height:2;}
.fblock__imgs{flex:1;min-width:0;display:flex;gap:39px;}
.fblock__imgs figure{margin:0;flex:1;min-width:0;max-height:301px;aspect-ratio: 4 / 3;}
.fblock__imgs img{width:100%;height:100%;object-fit:cover;}

.room-cat2__img {
    width: 100%;
    max-width: 1359px;
    height: 726px;
}


/* 南知多の食材 */
.fd-ingredients{
  /* background:rgba(223,220,215,.2); */
  display:flex;flex-direction:column;align-items:center;gap:104px;
  padding:150px 100px;
}
.fd-ingredients__head{text-align:center;display:flex;flex-direction:column;gap:49px;}
.fd-ingredients__head h2{font-size:40px;font-weight:500;line-height:1.4;}
.fd-ingredients__head p{font-size:15px;line-height:2;}
.fd-cards{display:flex;gap:25px;width:100%;max-width:1550px;}
.fd-card{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:15px;}
.fd-card__img{height:460px;}
.fd-card__img img{width:100%;height:100%;object-fit:cover;}
.fd-card__cap{font-size:15px;line-height:2;}
.fd-card__tab{
  position:absolute;top:-16px;right:30px;width:60px;
  writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.15em;
  background:#fff;
  /* border-top:3px solid var(--navy); */
  padding:18px 16px;font-size:20px;font-weight:500;line-height:1.31;
  box-shadow:0 13px 15px rgba(0,0,0,.06);
  color: var(--text);
}

/* お食事処 */
.fd-dining{display:flex;flex-direction:column;align-items:center;gap:50px;padding:150px 100px 100px;}
.fd-dining__ttl{font-size:40px;font-weight:500;text-align:center;}
.fd-dining__body{
  width:100%;max-width:1359px;display:flex;gap:50px;align-items:flex-start;
  padding:0 0 50px;
}
.fd-dining__txt{width:100%;flex-shrink:0;}
.fd-dining__txt p{font-size:15px;line-height:2;}
.fd-dining__body .info-list{flex:1;min-width:0;}

/* 朝食 */
.fd-breakfast{
  display:flex;flex-direction:column;align-items:center;gap:104px;
  padding:150px 100px;
}
.fd-breakfast__head{text-align:center;display:flex;flex-direction:column;gap:49px;}
.fd-breakfast__head h2{font-size:40px;font-weight:500;line-height:1.5;}
.fd-breakfast__head p{font-size:15px;line-height:2;}
.fd-breakfast__img{width:1359px;max-width:100%;height:726px;}
.fd-breakfast__img img{width:100%;height:100%;object-fit:cover;}

/* 予約 */
.fd-reserve{display:flex;justify-content:center;padding:106px 40px 0;}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:1500px){
  .fblock{gap:50px;}
  .fblock__body{width:calc(100% - 200px);}
  .fblock__foot{flex-wrap:wrap;gap:40px;padding-right:40px;}
  .fblock__txt{width:100%;padding-top:10px;}
  .fd-cards{flex-wrap:wrap;}
  .fd-card{flex:1 0 calc(50% - 13px);}
  .fd-dining__body{flex-wrap:wrap;}
  .fd-dining__txt{width:100%;}

  .room-cat2__img {
        height: auto;
        aspect-ratio: 1359 / 726;
    }
}

@media (max-width:900px){
  .fd-content{padding:0 0 50px;}
  .fd-intro{padding:50px 30px 0px;gap:50px;}
  .fd-intro__txt{gap:30px;}
  .fd-intro__txt h2{font-size:26px;}
  .rd-slider--boxed .rd-slider__slide{height:auto;aspect-ratio:14/9;}
  .fd-season{gap:60px;}
  .fd-season__head{gap:30px;padding:0 30px;}
  .fd-season__head h2{font-size:26px;}
  .fd-season__list{gap:90px;}
  .fblock{gap:32px;padding:0 30px;}
  .fblock__title{width:41px;padding-left:10px;padding-bottom:50px;}
  .fblock__title span{font-size:25px;font-weight:400;}
  .fblock__body{width:100%;gap:30px;}
  .fblock__foot{flex-direction:column;gap:30px;padding-right:0;}
  .fblock__txt{padding-top:0;}
  .fblock__imgs{gap:12px;width:100%;}
  .fblock__imgs figure{height:auto;aspect-ratio:4/3;}
  .fd-ingredients{padding:80px 30px;gap:50px;}
  .fd-ingredients__head{gap:24px;}
  .fd-ingredients__head h2{font-size:26px;}
  .fd-card__img{height:auto;aspect-ratio:16/10;}
  .fd-card__tab{right:12px;}
  .fd-dining{padding:80px 30px 40px;gap:40px;}
  .fd-dining__ttl{font-size:26px;}
  .fd-dining__body{flex-direction:column;padding:0 0 50px;gap:30px;}
  .fd-breakfast{padding:80px 30px;gap:40px;}
  .fd-breakfast__head{gap:24px;}
  .fd-breakfast__head h2{font-size:26px;}
  .fd-breakfast__img{height:auto;aspect-ratio:1359/726;}
  .fd-reserve{padding:50px 30px 0;}

  .room-cat2__img {
        height: auto;
        aspect-ratio: 16/10;
    }

    #shun {padding-top: 100px;}
}
@media (max-width:600px){
  .fd-cards{flex-direction:column;gap:50px;}
  .fblock__img{aspect-ratio: 14 / 9;}
  .fblock{flex-direction: column;align-items: center;}
  .fd-breakfast__img{aspect-ratio: 16/10;}
  .rd-slider__dots{bottom: 18px;}
  #shun {padding-top: 50px;}
  .fd-dining{gap: 20px;}
  .fd-breakfast{gap: 30px;}
  .rd-slider--boxed .rd-slider__slide {height: 250px;}
  /* 縦白枠文字　上線あり */
  .fd-card__tab{
        width: 37px;
        padding: 8px 5px;
        font-size: 18px;
        line-height: 29px;
        box-shadow: 0 13px 15px rgba(0, 0, 0, .06);
    }
}