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


    .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/service/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; }
    }
















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







/****/
.room-nav-type3 {
    padding: 10% 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(4, 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 {
        /* タブレットサイズでは2列にする */
        grid-template-columns: repeat(2, 1fr);
    }
    .room-nav-type3 .img-wrap {
        aspect-ratio: 16/7; /* 2列の時は元の横長比率に戻す */
    }
}

@media (max-width: 768px) {
    .room-nav-type3 .img-wrap {
        aspect-ratio: 3/2;
    }
    .room-nav-type3 .wrap { 
        gap: 15px; 
    }
    .room-nav-type3 .box { 
        padding: 5px; 
    }
}

@media (max-width: 480px) {
    .room-nav-type3 .wrap {
        /* 小さいスマホでは1列にする（2列のままで良ければこのブロックは削除してください） */
        grid-template-columns: 1fr;
    }
}










/**food-sec**/
.food-sec {
            padding: 10% 5%;
            line-height: 2;
        }
        .food-sec .area {
            max-width: 1200px; /* 少し幅を絞って読みやすく調整 */
            margin: 0 auto;
        }

        /* セクションタイトル専用スタイル */
        .food-sec .sec-title {
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            margin-bottom: 5rem; 
            text-align: center;
        }
        .food-sec .sec-title span {
            color: #ffffff; 
            font-size: 0.85rem; 
            letter-spacing: 0.3em; 
            margin-bottom: 1.5rem; 
            position: relative;
        }
        .food-sec .sec-title span::before { left: -35px; }
        .food-sec .sec-title span::after { right: -35px; }

        .food-sec .sec-title h2 {
            font-size: 2rem; 
            color: #c3a771; 
            margin: 0;
        }
        .food-sec .desc {
            color: #ffffff; 
            margin-top: 2rem; 
            font-size: 1rem;
            opacity: 0.9;
        }

        /* レイアウト */
        .food-sec .wrap {
            display: flex; 
            flex-direction: column; 
            gap: 8rem; /* セクション間の余白を広げてゆったりと */
        }
        .food-sec .row {
            display: flex; 
            align-items: flex-end; 
            gap: 4rem;
        }
        .food-sec .row.reverse {
            flex-direction: row-reverse;
        }
        .food-sec .image {
            width: 55%; /* テキストとのバランスを微調整 */
        }
        .food-sec .img-frame {
            padding: 1rem; 
            border: 1px solid rgba(195, 167, 113, 0.3); /* 枠線の色をゴールド系に寄せる */
        }
        .food-sec .img-frame img {
            width: 100%; 
            aspect-ratio: 16/10; 
            object-fit: cover; 
            vertical-align: bottom;
        }
        
        .food-sec .text {
            width: 45%;
            border-bottom: 1px solid #c3a771;
            padding-bottom: 1.5rem; /* 下線との隙間を確保 */
        }
        .food-sec .place {
            display: inline-block; 
            border: 1px solid #c3a771; 
            color: #c3a771; 
            font-size: 0.85rem; 
            padding: 0.3rem 1rem; 
            letter-spacing: 0.1em;
            margin-bottom: 1.5rem; /* 見出しとの隙間を確保 */
        }
        .food-sec .text h3 {
            font-size: 1.6rem; 
            color: #c3a771; 
            margin: 0 0 1.5rem 0; 
            font-weight: 400;
            line-height: 1.4;
        }
        .food-sec .text p {
            color: #ffffff; 
            margin: 0; 
            opacity: 0.9;
        }

        /* レスポンシブ対応 (900px以下) */
        @media (max-width: 900px) {
.food-sec {
            padding: 30% 5%;
            line-height: 2;
        }
        .food-sec .sec-title {
            text-align: left;
        }
            .food-sec .sec-title h2 { font-size: 1.5rem; }
            .food-sec .sec-title { margin-bottom: 4rem; }
            .food-sec .wrap { gap: 5rem; }
            
            .food-sec .row, 
            .food-sec .row.reverse { 
                flex-direction: column; 
                gap: 2.5rem; 
                align-items: flex-start; /* スマホ時は左揃え */
            }
            .food-sec .image, 
            .food-sec .text { 
                width: 100%; 
            }
        }









/**drink-sec**/
    .drink-sec {
        padding: 10% 5%;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .drink-sec .area {
        max-width: 1600px; /* 少し幅を絞ると文章が読みやすくなります（元は1600px） */
        margin: 0 auto;
    }

    /* -----------------------------------
       Section Title
    ----------------------------------- */
    .drink-sec .sec-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 4rem;
    }

    .drink-sec .sec-title span {
        position: relative;
        color: white;
        font-size: 0.85rem;
        letter-spacing: 0.3em;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 15px; /* 線と文字の隙間 */
    }

    .drink-sec .sec-title h2 {
        font-size: 1.8rem;
        color: #c3a771;
    }

    .drink-sec .desc {
        color: white;
        font-size: 1rem;
        line-height: 1.8;
        letter-spacing: 0.05em;
        margin-top: 1.5rem;
    }

    /* -----------------------------------
       Card Grid
    ----------------------------------- */
    .drink-sec .wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .drink-sec .card {
        background: #0a0a0a;
        border: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        transition: border-color 0.3s ease; /* ホバー時のちょっとした演出用 */
    }

    .drink-sec .card:hover {
        border-color: rgba(195, 167, 113, 0.3);
    }

    .drink-sec .image {
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }

    .drink-sec .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: bottom;
        transition: transform 0.5s ease;
    }

    .drink-sec .card:hover .image img {
        transform: scale(1.05); /* ホバー時に画像を少しズーム */
    }

    /* -----------------------------------
       Card Text
    ----------------------------------- */
    .drink-sec .text {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .drink-sec .text h3 {
        font-size: 1.1rem;
        color: #c3a771;
        margin: 0 0 1rem 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(195, 167, 113, 0.2);
        font-weight: normal;
        line-height: 1.4;
        letter-spacing: 0.05em;
    }

    .drink-sec .text p {
        color: white;
        font-size: 0.95rem;
        line-height: 1.7;
        margin: 0 0 1.5rem 0;
        flex-grow: 1; /* タグを常にカード下部に揃えるための設定 */
    }

    .drink-sec .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .drink-sec .tags span {
        background: rgba(195, 167, 113, 0.1);
        border: 1px solid rgba(195, 167, 113, 0.3);
        color: #c3a771;
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
        letter-spacing: 0.05em;
    }

    /* -----------------------------------
       Responsive (Tablet & Mobile)
    ----------------------------------- */
    @media (max-width: 900px) {
        .drink-sec {
            padding: 30% 5%;
        }

        .drink-sec .wrap {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
    .drink-sec .sec-title {
        text-align: left;
    }
        .drink-sec .sec-title h2 {
            font-size: 1.5rem;
        }
        
        .drink-sec .text {
            padding: 1.5rem;
        }
    }













/**exp-sec**/
    /* -----------------------------------
       Base & Layout
    ----------------------------------- */
    .exp-sec {
        padding: 10% 5%;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* 他のセクションと合わせる場合は 0.1 に変更してください */
        line-height: 2;
    }

    .exp-sec .area {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* -----------------------------------
       Section Title
    ----------------------------------- */
    .exp-sec .sec-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 5rem;
    }

    .exp-sec .sec-title span {
        position: relative;
        color: white;
        font-size: 0.85rem;
        letter-spacing: 0.3em;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 15px; /* 前回のセクションと統一した線の引き方 */
    }

    .exp-sec .sec-title h2 {
        font-size: 1.8rem;
        color: #c3a771;
    }

    .exp-sec .desc {
        color: white;
        font-size: 1rem;
        line-height: 1.8;
        letter-spacing: 0.05em;
        margin-top: 1.5rem;
    }
    
    /* -----------------------------------
       Contents Layout
    ----------------------------------- */
    .exp-sec .wrap {
        display: flex;
        gap: 4rem;
        align-items: center;
    }

    .exp-sec .text-area {
        width: 35%;
    }
    
    .exp-sec .list {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .exp-sec .head {
        display: flex;
		flex-direction: column;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }

    .exp-sec .tag {
        background: rgba(195, 167, 113, 0.1);
        font-size: 0.75rem;
        font-weight: bold;
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
        display: inline-block;
        align-self: flex-start;
        border: 1px solid rgba(195, 167, 113, 0.3);
        color: #c3a771;
    }

    .exp-sec h3 {
        font-size: 1.25rem;
        color: #c3a771;
    }

    .exp-sec .list-item p {
        color: white;
        font-size: 0.9rem;
    }
    
    /* -----------------------------------
       Slider Area
    ----------------------------------- */
    .exp-sec .slider-area {
        width: 65%;
    }

    .exp-sec #experience-slider img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        vertical-align: bottom;
    }


    /* -----------------------------------
       Responsive (Tablet & Mobile)
    ----------------------------------- */
    @media (max-width: 900px) {
        .exp-sec {
            padding: 30% 5%;
        }

        .exp-sec .sec-title {
            margin-bottom: 3rem;
        }

        .exp-sec .wrap {
            flex-direction: column-reverse;
            gap: 4rem;
        }

        .exp-sec .text-area, 
        .exp-sec .slider-area {
            width: 100%;
        }
        
    .exp-sec .sec-title {
        text-align: left;
    }
        .exp-sec .sec-title h2 {
            font-size: 1.5rem;
        }
    }














    /* -----------------------------------
       Base & Layout
    ----------------------------------- */
    .sleep-sec {
        padding: 10% 5%;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        line-height: 2;
    }

    .sleep-sec .area {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* -----------------------------------
       Section Title
    ----------------------------------- */
    .sleep-sec .sec-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 3rem;
    }

    .sleep-sec .sec-title span {
        position: relative;
        color: white;
        font-size: 0.85rem;
        letter-spacing: 0.3em;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .sleep-sec .sec-title h2 {
        font-size: 1.8rem;
        color: #c3a771;
    }

    .sleep-sec .desc {
        text-align: center;
        color: white;
        font-size: 1rem;
        margin-top: 1.5rem;
        line-height: 1.8;
    }
    
    /* -----------------------------------
       Main Image
    ----------------------------------- */
    .sleep-sec .main-img {
        width: 100%;
        margin-bottom: 4rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
        overflow: hidden;
    }

    .sleep-sec .main-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: bottom;
    }

    /* -----------------------------------
       Items Grid
    ----------------------------------- */
    .sleep-sec .wrap {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .sleep-sec .item {
        text-align: center;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(195, 167, 113, 0.2);
        padding: 2rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: border-color 0.3s ease;
    }

    .sleep-sec .item img {
        width: 100%;
        object-fit: cover;
        margin-bottom: 1.5rem;
    }

    /* 未使用のようでしたが、アイコンを使う場合のためのスタイル残し */
    .sleep-sec .icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 1.5rem;
        background: rgba(195, 167, 113, 0.1);
        border: 1px solid rgba(195, 167, 113, 0.3);
        color: #c3a771;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .sleep-sec h4 {
        font-size: 1rem;
        color: #c3a771;
    }

    .sleep-sec .item p {
        color: white;
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.6;
    }

    /* -----------------------------------
       Bottom Message
    ----------------------------------- */
    .sleep-sec .bottom-msg {
        text-align: center;
    }

    .sleep-sec .bottom-msg p {
        color: #fff;
        font-size: 1rem;
    }

    /* -----------------------------------
       Responsive (Tablet & Mobile)
    ----------------------------------- */
    @media (max-width: 900px) {
        .sleep-sec {
            padding: 30% 5%;
        }

        .sleep-sec .main-img {
            aspect-ratio: 16 / 9;
            margin-bottom: 2rem;
        }

        .sleep-sec .wrap {
            /* モバイルでは2列にする場合は `repeat(2, 1fr)`、1列にする場合は `1fr` */
            grid-template-columns: repeat(2, 1fr); 
            gap: 1.5rem;
        }
    .sleep-sec .sec-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        margin-bottom: 3rem;
    }

        .sleep-sec .sec-title h2 {
            font-size: 1.5rem;
        }
        
        .sleep-sec .bottom-msg p {
            font-size: 1rem;
        }
    }