/* ==================================================
   1. PC用スタイル（基本設定）
   ================================================== */
#header .inner,
.main-imag-pc,
#breadcrumb,
.pc-inline {
    display: block;
}

.sp-inline,
.sp_head,
.access-sp_title {
    display: none;
}
.sp-text {
    display: none;
}
.sp-title {
    display: none;
}

#breadcrumb-sp {
    display: none;
}

/* ==================================================
   2. スマホ・タブレット用スタイル（973px以下で適用）
   ================================================== */
@media screen and (max-width: 973px) {
    #top {
        margin-top: 50px;
    }
    #header {
        margin-bottom: 0px;
    }
    .inner {
        padding: 0 20px;
    }

    /* --- ハンバーガーボタン --- */
    .sp-head,
    .sp_head {
        display: block;
        background-color: #3e3a39;
        height: 50px;
        position: fixed;
        width: 100%;
        z-index: 100;
        margin-top: -50px;
    }

    .sp_head-btn {
        position: fixed;
        top: 3px;
        right: 15px;
        z-index: 1000;
        width: 25px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .hamburger-bar,
    .hamburger-bar::before,
    .hamburger-bar::after {
        content: "";
        display: block;
        width: 25px;
        height: 2px;
        background-color: #ffffff;
        position: absolute;
        transition:
            transform 0.3s ease,
            top 0.3s ease;
    }

    .hamburger-bar {
        top: 21px;
    }
    .hamburger-bar::before {
        top: -8px;
    }
    .hamburger-bar::after {
        top: 8px;
    }

    /* メニューオープン時の「✕」アイコン変化 */
    .sp_head-btn.is-active .hamburger-bar {
        background-color: transparent;
    }
    .sp_head-btn.is-active .hamburger-bar::before {
        top: 0;
        transform: rotate(45deg);
        background-color: #333;
    }
    .sp_head-btn.is-active .hamburger-bar::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #333;
    }

    /* --- 全画面ナビゲーション --- */
    .sp_head-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        z-index: 999;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
        padding-top: 60px; /* 上部ロゴ・閉じるボタン用の余白 */
    }

    /* 開いた状態 */
    .sp_head-nav.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* --- メニューリストのデザイン --- */
    .sp_head-nav-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .sp_head-nav-menu li {
        border-bottom: 1px solid #e0e0e0;
    }

    .sp_head-nav-menu li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px 10px;
        text-decoration: none;
        color: #333333;
    }

    .sp_head-nav-menu .main-ttl {
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0.05em;
    }

    .sp_head-nav-menu .sub-ttl {
        font-size: 11px;
        color: #888888;
        margin-top: 4px;
        letter-spacing: 0.1em;
    }

    /* 緑色のハイライトエリア（ご入居者様のページ） */
    .sp_head-nav-menu li.highlight-item {
        background-color: #dbe8d8;
        border-bottom: none;
    }

    .sp_head-nav-menu li.highlight-item a {
        color: #2b5523;
    }

    .sp_head-nav-menu li.highlight-item .sub-ttl {
        color: #4f7347;
    }

    /* --- SP時の要素切り替え・レイアウト調整 --- */
    #header .inner {
        display: none;
    }
    .main-imag-pc {
        display: none;
    }

    .sp_head-inner-logo {
        width: 200px;
        height: auto;
        padding: 10px;
    }
    .sp_head-inner-logo img {
        width: 100%;
    }
    .access-sp_title {
        width: 100%;
        height: 72px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-image: url(../access/img/head_new_sp.jpg);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 15px;
        box-sizing: border-box;
    }
    #breadcrumb {
        display: none;
    }
    #header .inner,
    #footer .inner,
    #content {
        width: 100%;
        margin: 0 auto;
    }
    #footer .layoutbox .column01,
    #footer .layoutbox .column02,
    #footer .layoutbox .column03 {
        display: none;
    }
    .pc-inline {
        display: none;
    }
    .sp-inline {
        display: block;
    }
    #content .columnC01,
    #content .columnC02,
    .sidemenu01,
    .sidemenu01 li {
        width: 100%;
        float: none;
    }
    .sidemenu01 li img {
        margin: 0 auto;
    }
    .road-map-01,
    .road-map-02,
    .road-map-03 {
        width: 100%;
        height: auto;
    }
    .titletext06 img {
        width: 100%;
        height: auto;
    }
    /* PC用画像の非表示 */
    .pc-inline {
        display: none !important;
    }

    /* SP用テキストの表示 */
    .sp-text {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        padding: 8px 16px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        text-decoration: none;
        box-sizing: border-box;
    }

    /* 右側の矢印アイコン（擬似要素） */
    .sp-text::after {
        content: "➔";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-left: 12px;
        background-color: #333333;
        color: #ffffff;
        border-radius: 50%;
        font-size: 11px;

        /* 下向きに回転 */
        transform: rotate(90deg);
    }

    /* 区切り線（破線）の設定 */
    .sidemenu01 li {
        border-bottom: 1px dotted #ccc;
    }

    /* 全体を挟む上下の線 */
    .sidemenu01 {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .sidemenu01 li.end {
        border-bottom: none;
    }
    .urban-bunner {
        display: none;
    }
    .layoutbox03 .column01 {
        float: none;
        width: 100%;
    }
    .layoutbox03 .column02 {
        float: none;
        width: 100%;
    }
    .titletext06 .pc-inline {
        display: none !important;
    }

    /* SP用テキストタイトルのスタイル */
    .sp-title {
        display: block;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        line-height: 1.4;
    }
    .dot-border tr {
        border-bottom: dotted 1px #b4b4b4;
    }

    .dot-border tr:nth-child(-n + 3) {
        border-bottom: none;
    }

    .foot-sp {
        display: block;
        padding: 32px 15px 32px;
        text-align: center;
        background-color: #3e3a39;
    }
    .foot-sp-logos {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 25px;
    }
    .foot-sp-logos-logo {
        width: calc(50% - 30px);
        max-width: 165px;
        margin: 0 15px;
    }
    .foot-sp-logos-logo img {
        width: 100%;
        height: auto;
    }
    .foot-sp * {
        box-sizing: border-box;
    }
    .foot-sp-menu li {
        font-size: 12px;
        line-height: calc(16 / 12);
        color: #ffffff;
        margin-bottom: 1em;
        width: 100%;
    }
    .foot-sp-menu li:first-child {
        padding-top: 10px;
    }
    .foot-sp-menu li a {
        color: #fff;
    }
    .foot-sp-copy {
        font-size: 12px;
        line-height: calc(16 / 12);
        color: #333333;
    }
    .foot-sp-bottom {
        display: block;
        background-color: #ffffff;
        padding: 32px 15px 32px;
        text-align: center;
    }
    #breadcrumb-sp {
        display: block;
    }
    #breadcrumb-sp .inner {
        padding: 10px 20px;
        line-height: 12px;
    }
    #breadcrumb-sp .listBC02 {
        display: inline;
        margin: 0;
        font-size: 10px;
        line-height: 12px;
    }
    #breadcrumb-sp .current {
        color: #be88ae;
    }
    html {
        scroll-behavior: smooth;
    }

    /* 遷移先の要素（IDを持つ要素）の停止位置を20px上にずらす */
    /* 固定ヘッダーがある場合は、その高さ + 20px を指定します */
    :target {
        scroll-margin-top: 40px;
    }
    .sp-mb-00 {
        margin-bottom: 0px !important;
    }
    .sp-mb-10 {
        margin-bottom: 10px !important;
    }
    .sp-mb-20 {
        margin-bottom: 20px !important;
    }
    .sp-mb-30 {
        margin-bottom: 30px !important;
    }
    .sp-mb-50 {
        margin-bottom: 50px !important;
    }

    /* 右下に固定表示 */
    .pagetop-sp {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 9999; /* 他の要素より前面に表示 */
        margin: 0;
        padding: 0;
    }

    /* テキストとアイコンのスタイル */
    .pagetop-sp-btn {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        text-decoration: none;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 8px 12px;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: opacity 0.3s ease;
    }

    .pagetop-sp-btn:hover {
        opacity: 0.7;
    }

    /* 左側の丸アイコン（↑） */
    .pagetop-sp-btn::before {
        content: "↑";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-right: 6px;
        background-color: #333333;
        color: #ffffff;
        border-radius: 50%;
        font-size: 11px;
        font-weight: bold;
    }
    .urban-bunner-sp {
        text-align: center;
    }
    .foot-sp-adress {
        color: #fff;
        margin-bottom: 0px;
    }
    .foot-sp-access {
        color: #fff;
        margin-bottom: 10px;
    }
    .foot-sp-access li {
        font-size: 10px;
    }
}