@charset "utf-8";

.atta-text {
margin: 40px 0 0 0;
line-height: 26px;
}

.atta-text span {
color: red;
}

/* ============================
   PC Style
=============================*/
@media (min-width: 671px) {
    .pc { display: block; }
    .sp { display: none; }

    .p-landing-pc {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .landing-image-wrap {
        position: relative;
        width: 100%;
        line-height: 0; /* Remove gap below image */
    }

    .p-landing-img {
        width: 100%;
        height: auto;
    }
    
    /* PC Form Banner */
    .p-form-banner {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 63%;
        z-index: 5;
        transition: opacity 0.3s;
    }
    .p-form-banner:hover {
        opacity: 0.8;
    }
    .p-form-banner img {
        width: 100%;
        height: auto;
    }
    
    /* Top Banner specific adjustment */
    .p-form-banner.p-form-banner--top {
        bottom: 34%;
    }

    .google-btn {
        position: absolute;
        top: 11.6%;
        left: 53%;
        width: 20%;
        display: block;
    }

    /* Tab Component Styling */
    .p-tab-container {
        position: absolute;
        width: 63%; /* Adjusted from verification */
        top: 0;   /* Adjusted from verification */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .p-tab-nav {
        display: flex;
        justify-content: space-between;
        gap: 10px; /* Adjust gap if needed */
        list-style: none;
        padding: 0;
        margin: 0 0 15px;
    }

    .p-tab-nav li {
        cursor: pointer;
        width: 33.33%; /* 3 tabs */
    }
    
    .p-tab-nav li img {
        width: 100%;
        height: auto;
    }

    .p-tab-nav li .tab-on { display: none; }
    .p-tab-nav li.active .tab-on { display: block; }
    .p-tab-nav li.active .tab-off { display: none; }

    .p-tab-content {
        display: none;
        width: 100%;
    }
    .p-tab-content.active {
        display: block;
    }
    .p-tab-content img {
        width: 100%;
        height: auto;
    }

    .p-bottom-banner-pc {
        margin: 0 auto 50px;
        width: 63%;
        display: block;
    }

    .wb-form-check {
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 20px;
    }

    .wb-form-check.reservation-landing-wrap {
        display: block;
    }

    .tel-pc {
        display: inline;
    }
    
    .tel-sp {
        display: none;
    }
}

/* ============================
   SP Style
=============================*/
@media (max-width: 670px) {
    .pc { display: none; }
    .sp { 
        display: block;
        margin: 50px 0 0;
    }
    
    /* SP styles */
    .p-landing-sp {
        width: 100%;
        line-height: 0;
    }
    .p-landing-sp img {
        width: 100%;
        height: auto;
    }
    
    /* SP Tabs */
    .p-tab-container-sp {
        margin: 0 auto;
        position: relative;
        width: 90%;
    }
    .p-tab-nav-sp {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 20px 0 0;
        margin: 0 0 15px;
        gap: 10px;
    }
    .p-tab-nav-sp li {
        width: 33.33%;
        cursor: pointer;
    }
    .p-tab-nav-sp li img {
        width: 100%;
    }
    .p-tab-nav-sp li .tab-on { display: none; }
    .p-tab-nav-sp li.active .tab-on { display: block; }
    .p-tab-nav-sp li.active .tab-off { display: none; }
    
    .p-tab-content-sp {
        display: none;
    }
    .p-tab-content-sp.active {
        display: block;
    }
    
    /* Renovation Corner */
    .renovation-corner-wrap {
        position: relative;
        background: url(../img/landing/landing-img-202601/sp/landing-image4.jpg) no-repeat top center;
        background-size: 100% auto;
        text-align: center;
        padding: 179px 0 5px;
    }
    .renovation-corner-btn {
        margin-bottom: 10px;
    }
    .renovation-corner-btn-img {
        cursor: pointer;
        width: 90%;
        margin: 0 auto;
    }

    .renovation-corner-description {
        display: none;
        width: 90%;
        margin: 10px auto;
        position: relative;
    }

    .google-btn {
        position: absolute;
        bottom: 21px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }

    .renovation-corner-description-close-btn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 20%; /* Guessing size */
        cursor: pointer;
    }
    
    /* Absolute positioning for buttons */
    .landing-image-wrap-sp {
        position: relative;
    }
    .theme-type {
        padding: 0 0 40px;
        background-image: url(../img/landing/landing-img-202601/sp/landing-image2.jpg);
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;

    }

    .form-banner-middle-sp {
        display: block;
        width: 90%;
        margin: -54px auto 0;
        padding: 20px 0;
        position: relative;
        z-index: 10;
    }

    .sp-btn {
        position: absolute;
        z-index: 10;
        display: block;
    }
    /* Examples for buttons - positions to be tuned */
    .sp-google-btn {
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }
    .sp-form-btn {
        width: 90%;
        left: 5%;
    }

    /* PC Form Banner */
    .p-form-banner {
        position: absolute;
        bottom: 5%;
        left: 49.5%;
        transform: translateX(-50%);
        width: 93%;
        z-index: 5;
        transition: opacity 0.3s;
    }

    .p-form-banner:hover {
        opacity: 0.8;
    }

    .p-form-banner img {
        width: 100%;
        height: auto;
    }
    
    .landing-banner5-sp {
        position: absolute;
        bottom: 3%;
        left: 49.5%;
        transform: translateX(-50%);
        width: 93%;
        z-index: 5;
        transition: opacity 0.3s;
    }
    /* Top Banner specific adjustment */
    .p-form-banner.p-form-banner--top {
        bottom: 17%;
    }
    
    .tel-pc {
        display: none;
    }
    
    .tel-sp {
        display: inline;
    }
}