@charset "utf-8";
.rogo-sec1 a,
.rogo-sec2 a{
    display: block;
    width: 100%;
    height: 100%;
}
main{
    text-align: center;
    position: relative;
}
.first-view-restaurant{
    background: url("../img/restaurant/res-main.webp") center/cover no-repeat;
}
.mainvisual{
    width: 100%;
    height: auto;
    aspect-ratio: 853/400;
    background: url("../img/restaurant/res-main.webp") center/cover no-repeat;
    position: relative;
    z-index: 1;
    margin-bottom: -6.5%;
}
.mainvisual img{
    display: block;
    width: max(446px,26.1%);
    aspect-ratio: 340/100;
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translateX(-50%);
    margin: 0;
}

.rogo-sec1{
    width: min(646px,37.7%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 4%;
}
.rogo-sec1 .rogo01{
    width: max(234px,13.7%);
    aspect-ratio: 13/6;
    background: url("../img/restaurant/rogo-heikenosato.webp") center/cover no-repeat;
}
.rogo-sec1 .rogo02{
    width: max(102px,6%);
    aspect-ratio: 51/122;
    background: url("../img/restaurant/rogo-momiji.webp") center/cover no-repeat;
}

.sec-heike{
    margin-bottom: 6%;
}
.sec-heike p{
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, .8),   /* 右下 */
       -2px 2px 4px rgba(0, 0, 0, .8),   /* 左下 */
        2px -2px 4px rgba(0, 0, 0, .8),  /* 右上 */
       -2px -2px 4px rgba(0, 0, 0, .8);  /* 左上 */
}
.img2nd{
    width: 100%;
    aspect-ratio: 256/107;
    background: url("../img/restaurant/img2nd.webp") center/cover no-repeat;
    margin: 0 auto 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img2nd img{
    width: max(374px,21.9%);
    aspect-ratio: 374/215;
    margin-bottom: 2%;
}
.img2nd p{
    white-space: nowrap;
}

/* スライダー：3枚自動 ここから */
.slider-loop{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slider-loop .slide-track{
    display: flex;
    gap: 2%;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
    animation: scrollLoop var(--duration, 200s) linear infinite;
}
.slider-loop img{
    width: 37.6%;
    aspect-ratio: 107 / 45;
    flex: 0 0 auto;
    display: block;
    object-fit: cover;
}
@keyframes scrollLoop {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--distance))); }
}
/* スライダー ここまで */

.aside-link{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto 6%;
}
.aside-link a{
    display: block;
    width: 15.8%;
    aspect-ratio: 3/1;
    border-radius: 999px;
    border: 1px solid #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}
.aside-link a:nth-child(1){
    margin: 0 auto 3%;
}
.accent-img01{
    width: min(255px,15%);
    height: auto;
    aspect-ratio: 3/2;
    background: url("../img/restaurant/accent-dish.webp") center/cover no-repeat;
    position: absolute;
    left: 7%;
}

.sec-momiji{
    margin-bottom: 6%;
}
.sec-momiji p{
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, .8),   /* 右下 */
       -2px 2px 4px rgba(0, 0, 0, .8),   /* 左下 */
        2px -2px 4px rgba(0, 0, 0, .8),  /* 右上 */
       -2px -2px 4px rgba(0, 0, 0, .8);  /* 左上 */
}
.sec-momiji span{
    display: none;
    height: 0;
}
.img3rd{
    width: 100%;
    aspect-ratio: 256/107;
    background: url("../img/restaurant/img3rd.webp") bottom/cover no-repeat;
    margin: 0 auto 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img3rd img{
    width: max(144px,8.4%);
    aspect-ratio: 144/349;
}
.img3rd p{
    width: min(1280px,80%);
    margin: 0 auto;
}

.foodmenu{
    width: min(1280px,80%);
    margin: 0 auto 30%;
    position: relative;
}
.rule-after{
    width: 100%;
    display: flex;                 /* テキスト + 線 を横並び */
    align-items: center;
    gap: .6em;                     /* 文字と線のあいだ */
    white-space: nowrap;           /* 2行に折り返さない想定なら */
    color: #000;                 /* 線の色は currentColor を使う */
}
.rule-after::after{
    content: "";
    flex: 1 1 auto;                /* 残り幅ぜんぶを占有 */
    border-bottom: 1px solid currentColor;  /* 1本線 */
    transform: translateY(-.06em); /* ベースラインに揃える微調整（任意） */
    opacity: .7;                   /* 濃さ調整（任意） */
}
.rule-after-harf{
    width: 50%;
    display: flex;                 /* テキスト + 線 を横並び */
    align-items: center;
    gap: .6em;                     /* 文字と線のあいだ */
    white-space: nowrap;           /* 2行に折り返さない想定なら */
    color: #000;                 /* 線の色は currentColor を使う */
}
.rule-after-harf::after{
    content: "";
    flex: 1 1 auto;                /* 残り幅ぜんぶを占有 */
    border-bottom: 1px solid currentColor;  /* 1本線 */
    transform: translateY(-.06em); /* ベースラインに揃える微調整（任意） */
    opacity: .7;                   /* 濃さ調整（任意） */
}
.menu-table{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.menu-table dl{
    width: 44%;
    height: 192px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.menu-table dt{
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    text-align: left;
}
.menu-table dd{
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    text-align: right;
}
.coming-soon{
    width: 44%;
    aspect-ratio: 262/225;
    background: url("../img/restaurant/noimage.webp") center/cover no-repeat;
    border-radius: 10%;
    position: relative;
    top: -2rem;
}
.text-l{
    text-align: left;
    position: absolute;
    z-index: 1;

}
.accent-img02{
    width: max(260px,15.2%);
    height: auto;
    aspect-ratio: 65/58;
    background: url("../img/restaurant/accent-ramen.webp") center/cover no-repeat;
    position: absolute;
    top: 0%;
    right: -85%;
    z-index: 0;
}

@media (max-width: 1281px){
    .mainvisual img{
        width: max(336px,26.3%);
        left: 52.5%;
        top: 38%;
        transform: translateX(-52.5%);
    }
    .rogo-sec1 .rogo01{
        width: max(174px,13.6%);
    }
    .rogo-sec1 .rogo02{
        width: max(76px,5.9%);
    }
    .img2nd img{
        width: max(280px,21.9%);
        margin-bottom: 0;
    }
    .accent-img01{
        width: min(196px,15.3%);
        left: 5%;
    }
    .accent-img02{
        width: max(196px,15.3%);
        right: -60%;
    }
    .img3rd img{
        width: max(106px,8.3%);
    }
    .foodmenu{
        margin: 0 auto 30%;
    }
}
@media (max-width: 1025px){
    .slider-loop img {
        width: 64%;
    }

    /* ↓ロゴと装飾画像の大きさと位置調整 */
    .mainvisual img{
        width: max(266px,26%);
    }
    .rogo-sec1 .rogo01{
        width: max(140px,13.7%);
    }
    .rogo-sec1 .rogo02{
        width: max(60px,5.8%);
    }
    .img2nd img{
        width: max(216px,21.1%);
    }
    .accent-img01{
        width: min(152px,14.8%);
    }
    .accent-img02{
        width: max(196px,15.3%);
        right: -68%;
    }
    .img3rd img{
        width: max(86px,8.4%);
    }
}
@media (max-width: 793px){
    .aside-link a{
        width: 144px;
    }
    .sec-momiji span{
        display: block;
    }
}
@media (max-width: 767px){
    .img2nd,.img3rd{
        padding: 4% 0;
    }
    .img3rd p{
        width: 90%;
    }
    .sec-heike,
    .aside-link{
        margin-bottom: 10%;
    }
    .accent-img01{
        width: min(112px,14.6%);
    }
    .accent-img02{
        width: max(116px,15.1%);
        top: 80%;
        right: -11%;
    }
    .foodmenu {
        margin: 0 auto 40%;
    }
}

@media (max-width: 441px){
    .slider-loop img{
        width: 80%;
    }
    .img2nd p,
    .img3rd p{
        white-space: normal;        /* 折り返し許可 */
        overflow-wrap: anywhere;    /* 長い語も強制改行 */
        text-wrap: balance;         /* 可能ならバランス良く改行（対応ブラウザ） */
    }
    .sec-momiji{
    margin-bottom: 10%;
    }

    /* ↓ロゴと装飾画像の大きさと位置調整 */
    .mainvisual img{
        width: max(116px,26.4%);
    }
    .rogo-sec1 .rogo01{
        width: max(62px,14.1%);
    }
    .rogo-sec1 .rogo02{
        width: max(26px,5.91%);
    }
    .img2nd img{
        width: max(94px,21.4%);
    }
    .accent-img01{
        width: min(66px,15%);
        left: 4%;
    }
    .accent-img02{
        width: max(66px,15%);
        top: 75%;
        right: -10%;
    }
    .img3rd img{
        width: max(47px,10.7%);
    }
}