/**kv**/
.kv {
    position: relative;
}
.kv .area {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
}
.kv .area::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/meal/kv.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    filter: brightness(0.6);
    z-index: 1;
}
.kv .ttl {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.25rem;
}
@media (max-width: 768px) {
    .kv .area { height: 60vh; }
    .kv .ttl { font-size: 1.6rem; }
}





/**intro**/
    .intro{
    padding:15% 0 0 0;
    color:white;
    position: relative;
    }
    .intro .area{
    }
    .intro .mark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        pointer-events: none;
		filter: brightness(0.1);
		max-width:350px;
    }
    .intro .wrap{
        position: relative;
        z-index:5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:2rem;
        text-align: center;
    }
    .intro h2 {
        font-size:2rem;
        color:#c3a771;
    }
    .intro h3 {
        font-size:1.5rem;
        color:#c3a771;
    }
    .intro p {
        font-size:1rem;
    }
    
    @media (max-width: 768px) {
        .intro {
            padding: 30% 0 0 0; /* 上を広めに、下は少し詰める */
        }
        .intro .mark {
        top: 0;
        left: 50%;
        transform: translate(-50%, 20%);
        }
        .intro .wrap {
    gap: 1.5rem;
    padding-inline: 5%;
    align-items: flex-start;
    text-align: left;
  }
}





/**meal-sec01**/
.meal-sec01 {
    padding:5% 0 0 0;
}
.meal-sec01 .area{
}
.meal-sec01 .wrap{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin:0 auto;
  max-width:1100px;
    gap:5px;
}
.meal-sec01 .image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← 画像を枠にぴったり収める */
  display: block;
}
.wrap .fade-dw:nth-child(1) { transition-delay: 0s; }
.wrap .fade-dw:nth-child(2) { transition-delay: 0.2s; }
.wrap .fade-dw:nth-child(3) { transition-delay: 0.4s; }
.wrap .fade-dw:nth-child(4) { transition-delay: 0.6s; }
.wrap .fade-dw:nth-child(5) { transition-delay: 1.2s; }
.wrap .fade-dw:nth-child(6) { transition-delay: 1.1s; }
.wrap .fade-dw:nth-child(7) { transition-delay: 0.8s; }
.wrap .fade-dw:nth-child(8) { transition-delay: 0.6s; }
@media screen and (max-width: 768px) {
.meal-sec01 {
    margin:10% 0;
    padding-inline:5%;
}
.meal-sec01 .wrap{
  width:100%;
}
}





/**meal02**/
.meal02{
    padding:10% 0 0 0;
    color:black;
}

.meal02 .area{
    padding:100px 0;
    background-color:#e5e5e5;
    max-width:85vw;
    margin: 0 0 0 auto;
}


.meal02 .area .box{
    display: grid;
    grid-template-columns: 3fr 7fr; /* PCは比率維持 */
    gap: 5%; /* 10% → 5% にすると呼吸が整う */
    padding-left: 5%;
    align-items: center; /* 縦位置を揃える */
}

/* wrap01（縦書き＋テキスト） */
.meal02 .area .wrap01{
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
    justify-content: center;
    align-items: center;
}

.meal02 .area .wrap01 .ttl{
    font-size:1.5rem;
    font-weight:bold;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.meal02 .area .wrap01 .text{
    font-size:1rem;
    max-width:400px;
}

/* wrap02（スライダー） */
.meal02 .area .wrap02{
    display: flex;
    align-items: center;
}.splide__slide img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 900px) {

    .meal02{
        padding: 15% 0 0 0;
    }

    .meal02 .area{
        padding:50px 0;
        padding-inline:5%;
        max-width: 100%;
    }

    .meal02 .area .box{
        grid-template-columns: 1fr;
        padding-left: 0;
        gap: 2rem;
    }

    .meal02 .area .wrap01{
        align-items: flex-start;
        gap: 1rem;
    }

    .meal02 .area .wrap01 .ttl{
        writing-mode: horizontal-tb;
        text-orientation: initial;
        font-size: 1.5rem;
    }

    .meal02 .area .wrap01 .text{
        max-width: 100%;
    }

    .meal02 .area .wrap02{
        width: 100%;
    }

    .splide__slide img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}





/**room-nav-type3**/
.room-nav-type3 {
    padding: 5% 0 0 0;
    padding-inline: 5%;
    color: white;
}
.room-nav-type3 .area {
    max-width: 1100px;
    margin: 0 auto;
}
.room-nav-type3 .sec-title {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 40px;
}
.room-nav-type3 .wrap {
    display: grid;
    /* ここを2から4に変更し、PCで4つ横並びにする */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.room-nav-type3 .box {
    display: block;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15); /* 細い枠線 */
    padding: 10px; /* 枠線と画像の間に余白を作る */
    transition: 0.4s ease;
    background: rgba(255,255,255,0.02);
}

.room-nav-type3 .img-wrap {
    width: 100%;
    /* 4列にすると画像が細長くなりすぎるため、少し縦幅を持たせました（元の16/7に戻してもOKです） */
    aspect-ratio: 4/3; 
    overflow: hidden;
}

.room-nav-type3 img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.6s ease;
}

.room-nav-type3 .room-name {
    display: block;
    text-align: center;
    padding: 15px 0 5px;
    font-family: "Yu Mincho", serif;
    font-size: 1rem;
    color: #ddd;
    letter-spacing: 0.15em;
    transition: 0.3s;
}
.room-nav-type3 .room-name span {
    font-size: 0.75rem;
}

.room-nav-type3 .box:hover {
    border-color: #c3a771;
    background: rgba(195,167,113,0.05);
}
.room-nav-type3 .box:hover img {
    filter: brightness(1.1);
    transform: scale(1.03);
}
.room-nav-type3 .box:hover .room-name {
    color: #fff;
}

/* レスポンシブ対応（画面サイズごとの列数調整） */
@media (max-width: 1024px) {
.room-nav-type3 {
    padding: 30% 5% 0;
}
    .room-nav-type3 .wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}





/**dinner**/
.dinner{
padding:10% 0 0 0;
color:white;
}
.dinner .area {
display: flex;
flex-direction: column;
gap:2rem;
}
.dinner .wrap01 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:1rem;
margin:0 auto;
padding-inline:5%;
}
.dinner .wrap01 h2{
font-size:2rem;
font-weight:bold;
color:#c3a771;
}
.dinner .wrap01 p{
font-size:1rem;
text-align: center;
}
.dinner .wrap02 {
}
.dinner .wrap03 {
margin:0 auto;
padding-inline:5%;
}
.dinner .wrap03 h3{
color:#c3a771;
font-size:1.5rem;
margin-bottom:1.5rem;
}
.dinner .wrap03 p{
font-size:1rem;
margin-bottom:1rem;
}
.dinner .wrap03 p:last-of-type {
margin-bottom: 0rem;
}
.dinner .anai {
border-bottom:solid 1px white;
padding-bottom:2rem;
}
.dinner .btn{
display: flex;
gap:1rem;
flex-wrap: wrap;
margin-top:2rem;
}
.dinner .btn-more {
width: fit-content;
padding:20px 25px;
color:black;
background-color:white;
transition: all 0.5s;
}
.dinner .btn-more:hover {
background-color:#c3a771;
}
@media (max-width: 768px) {
  .dinner {
    padding: 30% 0 0 0; /* 上を少し広げて呼吸を作る */
  }
.dinner .wrap01 {
align-items: flex-start;
}
.dinner .wrap01 h2{
    margin:0 auto;
}
  .dinner .btn-more {
    padding: 15px 20px;
  }
}





/**brakefast**/
.brakefast{
padding:10% 0 0 0;
color:white;
}
.brakefast .area {
display: flex;
flex-direction: column;
gap:2rem;
}
.brakefast .wrap01 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:1rem;
margin:0 auto;
padding-inline:5%;
}
.brakefast .wrap01 h2{
font-size:2rem;
font-weight:bold;
color:#c3a771;
}
.brakefast .wrap01 p{
font-size:1rem;
text-align: center;
}
.brakefast .wrap02 {
}
.brakefast .wrap03 {
margin:0 auto;
padding-inline:5%;
}
.brakefast .wrap03 h3{
color:#c3a771;
font-size:1.5rem;
margin-bottom:1.5rem;
}
.brakefast .wrap03 p{
font-size:1rem;
margin-bottom:1rem;
}
.brakefast .wrap03 p:last-of-type {
margin-bottom: 0rem;
}
.brakefast .anai {
border-bottom:solid 1px white;
padding-bottom:2rem;
}
.brakefast .btn{
display: flex;
gap:1rem;
flex-wrap: wrap;
margin-top:2rem;
}
.brakefast .btn-more {
width: fit-content;
padding:20px 25px;
color:black;
background-color:white;
transition: all 0.5s;
}
.brakefast .btn-more:hover {
background-color:#c3a771;
}
@media (max-width: 768px) {
  .brakefast {
    padding: 30% 0 0 0; /* 上を少し広げて呼吸を作る */
  }
.brakefast .wrap01 {
align-items: flex-start;
}
.brakefast .wrap01 h2{
    margin:0 auto;
}
  .brakefast .btn-more {
    padding: 15px 20px;
  }
}





   /* -----------------------------------
       Base & Layout
    ----------------------------------- */
    .space {
        padding: 10% 0;
        color: white;
    }

    .space .area {
        display: flex;
        flex-direction: column;
        gap: 2rem; /* セクション内のブロックごとの余白を少し広めに設定 */
        max-width: 1100px;
        margin: 0 auto;
    }

    /* -----------------------------------
       Wrap01: タイトル周り
    ----------------------------------- */
    .space .wrap01 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        margin: 0 auto;
    }

    .space .wrap01 h2 {
        font-size: 2rem;
        color: #c3a771;
        letter-spacing: 0.15em;
        margin: 0;
    }

    .space .wrap01 p {
        font-size: 1rem;
        text-align: center;
        color: white; /* 他セクションのテキストカラーに統一 */
        letter-spacing: 0.05em;
        margin: 0;
    }

    /* -----------------------------------
       Wrap02: 画像グリッド
    ----------------------------------- */
    .space .wrap02 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .space .wrap02 .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: bottom;
    }

    /* -----------------------------------
       Wrap03: ご案内テキスト
    ----------------------------------- */
    .space .wrap03 {
        margin: 0 auto;
        width: 100%;
    }

    .space .anai {
        width: 100%;
		display: flex;
		flex-direction: column;
		gap:0.5rem;
		border:1px solid white;
		padding:1rem;
    }

    .space .wrap03 p {
        font-size: 1rem;
        color: white;
    }

    .space .wrap03 p:last-of-type {
    }

    /* コメントアウトされているGroup部分のスタイル */
    .space .group {
        width: 100%;
        border: 1px solid rgba(195, 167, 113, 0.5);
        padding: 30px;
        margin-top: 2rem;
    }

    .space .group .ttl {
        font-size: 1.2rem;
        font-weight: normal;
        text-align: center;
        color: #c3a771;
        margin: 0;
    }

    /* -----------------------------------
       Responsive
    ----------------------------------- */
    @media (max-width: 768px) {
        .space {
            padding: 30% 5%;
        }
    }