/* PC */
#datumo > div.wp-block-image.aligncenter.size-full.is-resized.shadow-img.is-style-default.margin-top-32 > figure > img{
    margin-top: -6px;
}
#photpfacial > div:nth-child(1) > div:nth-child(2){
    margin-top: 76px;
}
#photpfacial > div:nth-child(1) > img{
    width: 100%;
    margin-top: -35px;
}

#oil-treatment > div.background-text{
    margin-top: 74px;
}

#oil-treatment > div.background-text.mg-t4{
    margin-top: -4px;
}


/* SP */
/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .left-menu a{
        color: #2BA6FF;
    }

    /* 英語・日本語を統一して縦表示にする設定 */
    @media (max-width: 768px) {
        .left-menu a {
            writing-mode: vertical-rl; /* 縦書き・右から左 */
            text-orientation: mixed; /* 文字の向きを自然に */
            font-size: 16px;
            display: block;
            text-align: center;
            line-height: 1.4;
            padding: 10px 8px; /* 左右のパディングを調整 */
            height: auto;
            min-height: 120px; /* 英語+日本語が入るよう高さを増加 */
            width: 25px; /* 縦書きに適した幅 */
        }

        .left-menu ul {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 25px; /* より多くの間隔を確保 */
            margin-left: 0;
        }

        /* 英語部分の設定 */
        .left-menu a .en {
            writing-mode: vertical-rl;
            text-orientation: mixed; /* 英語も縦書きに */
            font-size: 16px;
            display: block;
            margin-bottom: 8px; /* 英語と日本語の間隔 */
        }

        /* 日本語部分の設定 - 90度回転を追加 */
        .left-menu a .ja {
            writing-mode: horizontal-tb; /* 横書きに変更 */
            text-orientation: mixed;
            transform: rotate(90deg); /* 90度回転 */
            transform-origin: center center; /* 回転の中心点 */
            font-size: 12px;
            opacity: 0.8;
            display: inline-block; /* transformを効かせるためにinline-blockに変更 */
            white-space: nowrap; /* 折り返しを防ぐ */
            margin-top: 10px; /* 回転後の位置調整 */
            width: 60px; /* 回転後の表示領域調整 */
            height: 15px; /* 高さ調整 */
        }

        /* メニュー全体の位置調整 */
        .left-menu {
            position: fixed;
            left: 15px; /* 縦書きなので少し左寄り */
            top: 50%;
            transform: translateY(-50%);
            width: auto;
            text-align: left;
            z-index: 100;
        }
        body > nav > ul > li:nth-child(6) > a{
            display: none;
        }
        #datumo > div.concept-content > h2 > span.en{
            margin-left: -21px;
        }
        #datumo > div.wp-block-image.aligncenter.size-full.is-resized.shadow-img.is-style-default.margin-top-32 > figure > img{
            margin-top: -58px;
        }
        #photpfacial > div:nth-child(1) > div.concept-content > h2 > span.en{
            font-size: 32px;
        }
        #photpfacial > div:nth-child(1) > img{
            margin-top: -47px;
        }
        #oil-treatment > div.concept-content > h2 > span.en{
            font-size: 26px;
            margin-left: -53px;
        }
        #oil-treatment > div.background-text.mg-t4{
            margin-top: -29px;
        }
        body > div.fixed-content > div > div.reservation-buttons > a:nth-child(1){
            margin-left: -163px;
        }
        #hotpeppar-img{
            margin-top: -84px;
            margin-left: 157px;
        }

        .instagram-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: #1DA1F2;
            border-radius: 50%;
            text-decoration: none;
            transition: transform 0.3s ease;
            box-shadow: 0 4px 15px rgba(43, 166, 255, 0.3);
        }

        .instagram-icon .fab.fa-instagram {
            color: white !important;
            font-size: 30px;
        }
        #fullscreenNav > div{
            background-image: url("./images/footer_back.png");
            background-size: cover;
        }
        #fullscreenNav > div > div.nav-logo > img{
        max-width: 172px;
        margin-top: 45px;
        }
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(1) > a > span.en,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(1) > a > span.ja,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(2) > a > span.en,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(2) > a > span.ja,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(3) > a > span.en,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(3) > a > span.ja,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(4) > a > span.en,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(4) > a > span.ja,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(5) > a > span.en,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(5) > a > span.ja,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(6) > a > span.en,
        #fullscreenNav > div.nav-content > ul > nav > ul > li:nth-child(6) > a > span.ja {
            color: #2BA6FF;
        }
        #fullscreenNav > div > div.nav-bottom > div.sns-section > a{
            margin-top: 211px;
        }
        #fullscreenNav > div > div.nav-bottom > div.reservation-section > div.reservation-buttons > a:nth-child(1) > button{
            margin-top: 192px;
            /*margin-right: 230px;*/
        }

        .reservation-buttons .hotpepper-btn img {
            margin-top: 50px;
        }
        .tel-btn{
            top: 105px;
        }
    }


    /* より小さいスマートフォン向けの調整 */
    @media (max-width: 480px) {
        .left-menu a {
            min-height: 100px; /* 小さい画面では少し短く */
            padding: 8px 6px;
            width: 22px; /* 幅も少し狭く */
        }

        .left-menu a .en {
            font-size: 14px;
        }

        .left-menu a .ja {
            font-size: 10px;
            transform: rotate(90deg); /* 90度回転を維持 */
            transform-origin: center center;
            display: inline-block;
            white-space: nowrap;
            margin-top: 8px; /* 小さい画面での位置調整 */
            width: 50px; /* 幅調整 */
            height: 12px; /* 高さ調整 */
        }

        .left-menu ul {
            gap: 20px; /* より狭く */
        }

        .left-menu {
            left: -21px; /* より左端に */
            margin-top: -50px;
        }

        .left-menu li {
            margin-bottom: -22px;
        }
    }
    @media (max-width: 768px) {
        a[href="#datumo"] .en,
        a[href="#photpfacial"] .en,
        a[href="#oil-treatment"] .en,
        a[href="#whitening"] .en {
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
            transform: rotate(90deg) !important;
            transform-origin: center center !important;
            display: inline-block !important;
            white-space: nowrap !important;
            font-family: 'Zen Maru Gothic', sans-serif !important;
            overflow: visible !important;
        }


        /* フォトフェイシャル専用の調整 */
        a[href="#photpfacial"] .en {
            margin: -75px 18px 42px 0 !important;
            width: 0% !important;
            height: 28px !important;
        }
        a[href="#oil-treatment"] .en {
            margin: 10px 18px 20px 0 !important;
            width: 0% !important;
            height: 28px !important;}
        }
        a[href="#whitening"] .en {
            margin: 10px 18px -99px 0 !important;
            width: 0% !important;
            height: 28px !important;}
        }