/* ==============================
   スマホ用統合CSS (max-width:900px)
   ============================== */
@media screen and (max-width: 900px) {

    /* ------------------------------
       1. 全体調整・背景
    ------------------------------ */
    body {
        background: none !important;
        overflow-x: hidden;
        width: 100%;
    }
    .background-left, .background-right, #middle {
        background: none !important;
    }
    #wrapper, #middle, .inner {
        width: 100% !important;
        min-width: 100% !important;
    }
    div#middle div.inner {
        width: 100% !important;
        padding: 0;
    }

    /* ------------------------------
       2. ヘッダー・ロゴ・ハンバーガー
    ------------------------------ */
    div#header a.logo {
        display: block !important;
        width: 98%;
        height: 35px;
        margin: 10px auto 5px auto !important;
        float: none !important;
        position: relative !important;
        top: 0 !important;
        background-size: contain;
    }
    div#header div.line {
        display: none !important;
    }
    #menu-toggle {
        display: block !important;
        position: absolute !important;
        right: 15px;
        top: 40px;
        width: 44px;
        height: 44px;
        background: #008562;
        border-radius: 4px;
        z-index: 99999;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    #menu-toggle span {
        display: block;
        width: 28px;
        height: 2px;
        background: #fff;
        margin: 8px auto;
        transition: 0.3s;
    }
    #menu-toggle.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    #menu-toggle.open span:nth-child(2) { opacity: 0; }
    #menu-toggle.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

    div#header div.navi {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: rgba(255,255,255,0.98);
        z-index: 10000;
        border-bottom: 2px solid #008562;
        padding: 10px 0;
        float: none !important;
    }
    div#header div.navi a {
        float: none !important;
        display: block !important;
        width: 200px !important;
        margin: 15px auto !important;
        background-position: 0 0 !important;
    }

    /* ------------------------------
       3. トップカバー・ニュース
    ------------------------------ */
    #home {
        padding-top: 0 !important;
        margin: 0 !important;
    }
    #cover {
        background: url(../../images/cover.jpg) no-repeat center top !important;
        background-size: 100% auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 60vw !important;
        position: relative !important;
        padding-top: 50vw !important;
    }
    div#home div#cover div.news {
        position: relative !important;

        top: 0 !important;        /* ← マイナス移動をやめる */
        left: auto !important;    /* ← 左固定を解除 */

        width: 60% !important;    /* 少し余白を残す */
        margin: 15px auto !important;

        height: auto !important;
        min-height: 100px !important;

        overflow: visible !important;
        background: rgba(255,255,255,0.9) !important;
        padding: 12px !important;
        border-radius: 12px;
    }
    .news-inner {
        position: static !important;
        width: 100% !important;
    }
    .news-inner .image, .news-inner .logo, .news-inner .content {
        position: relative !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center;
    }
    .top-page .news-inner .image img {
        width: 100% !important;
        height: auto !important;
        border: 3px solid #fff;
    }
    .top-page .balloon-aki {
        position: absolute !important;
        top: 152px;
        left: 20px;
        width: 80px;
        margin: 0 !important;
        z-index: 100;
    }
    .balloon-aki img {
        width: 130%;
        height: auto;
        margin: 10px 1px 1px 1px;
    }

    /* ------------------------------
       4. ナビゲーション（横スクロール・ボタン） 
    ------------------------------ */
    #sidebar .title-menu,
    #sidebar .space-narrow,
    #sidebar .caption,
    #sidebar ul,
    #sidebar li {
        display: none !important;
    }
    #sidebar .navi-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px !important;
        gap: 15px;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }
    #sidebar .navi-menu::-webkit-scrollbar {
        display: none;
    }
    #sidebar .navi-menu a.button {
        display: block !important;
        flex: 0 0 140px !important;
        min-width: 140px !important;
        height: 45px !important;
        background-repeat: no-repeat !important;
        background-position: -155px 0px !important; 
        background-size: auto !important;
        opacity: 0.6;
        transition: 0.3s;
    }
    #sidebar .navi-menu a.button.current {
        opacity: 1;
        filter: saturate(1.5);
        border-bottom: 2px solid #888;
    }
    .navi ul, .navi-menu ul, #sidebar ul {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    /* ------------------------------
       5. 画像とLINEボタン（横並び）
    ------------------------------ */
    .image-row {
        display: flex !important;
        justify-content: space-between !important;
        justify-content: flex-start !important;
        margin-bottom: 10px !important;
    }
    .image-row .image {
        width: 70% !important;
        position: relative !important;
    }
    .image-row .image img {
        width: 50% !important;
        height: auto !important;
        display: block !important;
    }
    .image-row .line-btn {
        text-align: left !important;
        float: none !important;
    }

    .image-row .line-btn img {
        width: auto !important;
        max-width: 200px;
    }

    #home img[alt="いやしのサロン"] {
        position: relative;
        top: -105px;
        left: -20px;
    }


    /* ------------------------------
       6. サービス項目 Flex化
    ------------------------------ */
    .service {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 15px;
    }
    .service .text {
        flex: 1 1 60%;
        width: auto !important;
        margin: 0 !important;
    }
    .service .image {
        flex: 0 0 35%;
        margin: 0 !important;
        text-align: center;
        position: relative !important;
    }
    .service .image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    .service .clear {
        display: none !important;
    }
    .service .headline {
        max-width: 100% !important;
        height: auto !important;
    }
    .service table {
        width: 100% !important;
        table-layout: auto !important;
    }
    .service th, .service td {
        font-size: 13px !important;
        padding: 5px 8px !important;
    }

    /* ------------------------------
       7. ビューワー・サムネイル・フローティングバナー
    ------------------------------ */
    #viewer {
        height: auto !important;
        overflow: hidden !important;
        margin-bottom: 30px !important;
        display: block !important;
        float: none !important;
    }
    #viewer .image {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        margin-bottom: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }
    #viewer .image .front, #viewer .image .back {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
    }
    #viewer .thumbs {
        display: none !important;
    }
    .sp-floating-banners {
        display: flex !important;
        position: absolute !important;
        bottom: 15px;
        right: 15px;
        z-index: 999 !important;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
    }
    .sp-floating-banners a img {
        height: 60px !important;
        width: auto !important;
        filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
    }
    .sp-floating-banners a[href="#yoyaku"] img {
        height: 130px !important;
    }

    /* ------------------------------
       8. フォーム・入力調整
    ------------------------------ */
    #sidebar, #main {
        float: none !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box;
    }
    #sidebar {
        text-align: center;
        border-bottom: 1px dotted #ccc;
        margin-bottom: 20px;
    }
    table.data, table.data tbody, table.data tr, table.data th, table.data td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    table.data th {
        text-align: left !important;
        background: #f4f4f4;
        padding: 8px 10px !important;
        border: none !important;
    }
    table.data td {
        padding: 10px 0 20px 0 !important;
        border: none !important;
    }
    .textfield input, .textarea textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        font-size: 16px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px;
    }
    .textarea textarea { height: 150px !important; }

    .subject {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .subject .button {
        float: none !important;
        margin: 5px !important;
    }

    .submit {
        text-align: center;
        width: 100% !important;
    }
    .button-submit {
        margin: 0 auto !important;
        display: block !important;
    }
    .submit-row th {
        display: none !important;
    }

    /* ------------------------------
       9. 共通・小調整
    ------------------------------ */
    .headline {
        max-width: 100% !important;
        height: auto !important;
    }
    .evaluate {
        width: 80px !important;
        height: 80px !important;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: -100px;
        left: 160px;
        z-index: 10;
    }
}


/* ================== スマホ用（900px以下） ================== */
@media screen and (max-width: 900px) {

    /* service全体をFlexboxに切り替え */
    .service {
        display: flex !important;
        flex-wrap: wrap;          /* 狭くなったら縦並びに折り返す */
        align-items: flex-start;
        gap: 15px;                /* テキストと画像の間隔 */
    }

    /* テキスト部分 */
    .service .text {
        flex: 1 1 60%;            /* 横幅60％を確保、縮小可能 */
        width: auto !important;
        margin: 0 !important;
    }

    /* 画像部分 */
    .service .image {
        flex: 0 0 35%;            /* 横幅35％固定 */
        margin: 0 !important;
        text-align: center;
        position: relative !important;
    }

    /* 画像のサイズ調整 */
    .service .image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* clearはFlexboxでは不要 */
    .service .clear {
        display: none !important;
    }

}

/* ================== PC用（901px以上） ================== */
@media screen and (min-width: 901px) {

    /* service全体はブロック表示 */
    .service {
        display: block !important; /* float 左右の既存レイアウトを維持 */
        float: none !important;
        width: auto !important;
        margin: 0 auto;
    }

    /* テキストと画像をfloatで左右配置（必要に応じて調整） */
    .service .image {
        float: left !important;     /* 左に配置 */
        width: 40% !important;      /* PCでの画像幅 */
        margin-right: 20px !important;
        margin-bottom: 15px !important;
        position: relative !important;
        text-align: left !important;
    }

    .service .text {
        float: left !important;     /* 右に配置 */
        width: 55% !important;      /* PCでのテキスト幅 */
        margin: 0 !important;
    }

    /* float解除用 */
    .service .clear {
        clear: both !important;
        display: block !important;
    }

    /* 画像のサイズを自動調整 */
    .service .image img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ================== PC版（901px以上） ================== */
@media screen and (min-width: 901px) {
    .evaluate {
        display: block !important;
        font-family: "Hiragino Kaku Gothic ProN", "Meiryo", "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 22px;
        text-align: left !important;
        padding: 0;
        position: absolute;
        width: 81px;
        height: 88px;
        margin: 0 0 0 -190px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url(../../images/menu-evaluate-total.png);
        z-index: 50;
    }
}

/* ================== スマホ版（900px以下） ================== */
@media screen and (max-width: 900px) {
    .evaluate {
        display: block !important;
        font-family: "Hiragino Kaku Gothic ProN", "Meiryo", "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 18px;
        text-align: center !important;
        padding: 5px 0 0 0;      /* 上に少し余白を追加 */
        position: relative;       /* ブロック要素として配置 */
        width: 60px;              /* スマホで見やすいサイズ */
        height: 65px;
        margin: 10px auto 0 auto; /* メニュー写真下に中央寄せ */
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(../../images/menu-evaluate-total.png);
        z-index: 50;
    }
}

/* ================== PC版レイアウト修復 ================== */
@media screen and (min-width: 901px) {

    /* serviceを元のfloatレイアウトに戻す */
    .service {
        display: block !important;
        overflow: hidden; /* float崩れ防止 */
    }

    /* 画像を右寄せ（←ここが重要） */
    .service .image {
        float: right !important;
        width: 30% !important;
        margin: 5px 0 15px 20px !important;
        text-align: right !important;
    }

    /* テキストを左 */
    .service .text {
        float: left !important;
        width: 60% !important;
    }

    /* 次の段に影響させない */
    .service .clear {
        clear: both !important;
        display: block !important;
    }

    /* 画像サイズ調整 */
    .service .image img {
        width: 100% !important;
        height: auto !important;
    }
}


@media screen and (min-width: 901px) {
    .evaluate {
        margin-top: 130px !important;
        margin-left: 20px !important;
    }
}



/* ================== スマホ版で評価画像を表示 ================== */

@media screen and (max-width: 900px) {
    .evaluate {
/*      position: static !important; */  /* ← これが重要 */
        display: block !important;
        margin: 100px auto 0 auto !important;
        clear: both !important;       /* 上の画像の下に回す */
    }
}


@media screen and (max-width: 900px) {
    .line-btn,
    .line-btn a {
        display: block !important;
        text-align: left !important;
    }
}

@media screen and (max-width: 900px) {

    .image-row .line-btn {
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
    }

}

/* ===== LINEボタン横並び（最終版）===== */
@media screen and (max-width: 900px) {

    .image-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px;
    }

    .image-row .image {
        flex: 1 !important;
    }

    .image-row .image img {
        width: 100% !important;
        height: auto !important;
    }

    .image-row .line-btn {
        flex: 0 0 auto !important;
    }

    .image-row .line-btn img {
        width: 120px !important;
        height: auto !important;
    }
}

@media screen and (max-width: 900px) {

    div#home div#cover {
        padding-top: 50vw !important;
        text-align: center !important;
    }

    div#home div#cover div.news {
        width: 60% !important;
        margin: 30px auto !important;
        float: none !important;
        display: block !important;
    }

}
@media screen and (max-width: 900px) {

    /* 上の画像＋LINEを縦並びにする */
    .image-row {
        display: block !important;
    }

    .image-row img,
    .line-btn {
        float: none !important;
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* news を完全センター */
    .news {
        width: 95% !important;
        margin: 20px auto !important;
        float: none !important;
        text-align: center !important;
        position: static !important;
    }

}
@media screen and (max-width: 900px) {

    .image-row img {
        width: 95% !important;
        max-width: 500px !important;
        height: auto !important;
        margin: 10px auto !important;
        display: block !important;
    }

}
@media screen and (max-width: 900px) {

    .news {
        padding-bottom: 40px !important;
        margin-bottom: 40px !important;
    }

    footer,
    #footer {
        position: static !important;
        margin-top: 20px !important;
    }

}
@media screen and (max-width: 900px) {

    .news {
        float: none !important;
        margin: 20px auto !important;
        text-align: center !important;
        width: 95% !important;
        position: static !important;
        clear: both !important;
    }

}

/* ===== スマホ news 強制センター（最終Fix）===== */
@media screen and (max-width: 900px) {

    #home #cover .news {
        float: none !important;
        display: block !important;
        width: 92% !important;
        margin: 20px auto !important;
        text-align: center !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        clear: both !important;
    }

}
/* ===== news 強制センター最終兵器 ===== */
@media screen and (max-width: 900px) {

    #home,
    #cover,
    #home #cover,
    #home #cover .news,
    #home #cover .news * {
        float: none !important;
        left: auto !important;
        right: auto !important;
    }

    #home #cover {
        text-align: center !important;
    }

    #home #cover .news {
        display: block !important;
        width: 92% !important;
        margin: 20px auto !important;
        position: static !important;
    }

}

/* ===== news 完全中央Fix ===== */
@media screen and (max-width: 900px) {

    #home #cover {
        display: block !important;
        text-align: center !important;
    }

    #home #cover .news {
        display: block !important;
        width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        position: relative !important;
    }

}

/* ===== news 中央固定（完全版）===== */
@media screen and (max-width: 900px) {

    #home #cover .news {
        width: 92% !important;
        margin: 20px auto !important;
        float: none !important;
        position: static !important;
        text-align: center !important;
    }

    #home #cover .news .content {
        width: 100% !important;
        margin: 0 auto !important;
    }

    #home #cover .news ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        text-align: center !important;
    }

    #home #cover .news li {
        text-align: center !important;
        float: none !important;
    }

}

/* 20260216  */
/* salon */
@media screen and (max-width: 900px) {
    .salon-page #sidebar {
        display: none;
    }

    .salon-page .flow img {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* スタッフ紹介欄 */
@media screen and (max-width: 900px) {

    .therapist-list .block {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .therapist-list .block img {
        width: 160px;
        margin-bottom: 10px;
    }
}

@media screen and (min-width: 901px) {
    .therapist-list .block {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .therapist-list .block img {
        width: 160px;
        margin-bottom: 10px;
    }
}



/* メニューを調整 */
@media screen and (max-width: 900px) {

    /* 各サービスを縦並び制御 */
    #main .service {
        display: flex;
        flex-direction: column;
    }

    /* タイトル＋説明を先に */
    #main .service .text {
        order: -1;
    }

    /* 写真をその下 */
    #main .service .image {
        order: 0;
        margin: 10px 0;
        width: 100%;
    }

    /* タイトル画像を整える */
    #main .headline {
        width: 60%;
        height: auto;
        margin-bottom: 8px;
    }

    /* 写真をスマホ幅に */
    #main .image img {
        width: 100%;
        height: auto;
    }
}

/* 問い合わ・予約を調整 */
@media screen and (max-width: 900px) {

    /* 各サービスを縦並び制御 */
    div#sidebar div.title-contact {
        display: none;
    }
    
    .contact-page div#form {
        padding: 0px 10px;
    }

    .contact-page div#form img[alt="お問い合わせ"] {
        width: 50%;
        margin-bottom: 10px;
    }
    
    .contact-page div#form div.textfield {
        width: 100%;
    }
    .contact-page div#form div.textarea {
        width: 100%;
    }
}