:root {
    --blue-color: 29, 65, 95; /* #1d415f のRGB値 */
    --blue-color-invert: 255, 255, 255; /* 必要に応じて反転色を設定 */
}
.blue-color {
    --bg-c: var(--blue-color);
    --text-c: var(--blue-color-invert);
    background-color: rgba(var(--bg-c), var(--bg-a));
    color: rgba(var(--text-c), var(--text-a));
}
:root {
    --custom-color: 101, 156, 192;
    --border-a: 1; /* アルファ値を設定、必要に応じて変更 */
}
.border-account-color:not(#\#) {
    border-color: rgba(var(--custom-color), var(--border-a));
}

.gray-coler {
    background-color: #ebebeb;
}

.concept2 {
    text-align: center;
    display: block;
}
.concept2 .concept2-txt {
    text-align: left;
    display: inline-block;
}
.padding-2:not(#\#) {
    padding-top: 0.5rem;
}
@media screen and (max-width: 527px) {
    .padding-2:not(#\#) {
        padding-top: 1.1rem;
    }
}

.concept-bg1 {
    background-image: url("./../bg/bg-1.svg");
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
}

.bg-7,
.bg-8,
.bg-13,
.bg-14,
.bg-15,
.bg-16,
.bg-17,
.bg-18,
.bg-19,
.bg-20,
.bg-21,
.plan-bg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
}
.bg-12 {
    background-repeat: no-repeat;
    background-position: right top;
}

.bg-2_1::before {
    content: "";
    position: absolute;
    top: 80px; /* 上からの固定位置 */
    bottom: 500px; /* 下からの固定位置 */
    left: calc(50% - 500px);
    width: 100%;
    height: 86%;
    background-color: #ebebeb;
    background-repeat: no-repeat;
}
.bg-2_1::after {
    content: "";
    position: absolute;
    top: 270px;
    left: calc(70%);
    width: 100%;
    height: 100%;
    background-image: url("./../bg/bg-2-2.png");
    background-repeat: no-repeat;
}

.bg-2_1,
.bg-4,
.bg-5,
.bg-6,
.bg-22,
.bg-23 {
    position: relative;
}

.bg-4::before {
    content: "";
    position: absolute;
    top: 80px; /* 上からの固定位置 */
    right: calc(50% - 480px);
    width: 100%;
    height: 90%;
    background-color: #ebebeb;
    background-repeat: no-repeat;
}

.bg-4::after {
    content: "";
    position: absolute;
    top: 330px;
    left: calc(-10%);
    width: 100%;
    height: 100%;
    background-image: url("./../bg/bg-2-2.png");
    background-repeat: no-repeat;
}

.bg-5::before {
    content: "";
    position: absolute;
    top: 90px; /* 上からの固定位置 */
    left: calc(50% - 480px);
    width: 100%;
    height: 88%;
    background-color: #ebebeb;
    background-repeat: no-repeat;
}

.bg-5::after {
    content: "";
    position: absolute;
    top: 520px;
    right: calc(-80%);
    width: 100%;
    height: 100%;
    background-image: url("./../bg/bg-2-2.png");
    background-repeat: no-repeat;
}
.bg-6::before {
    content: "";
    position: absolute;
    top: 80px; /* 上からの固定位置 */
    right: calc(50% - 470px);
    width: 100%;
    height: 93%;
    background-color: #ebebeb;
    background-repeat: no-repeat;
}

.bg-6::after {
    content: "";
    position: absolute;
    top: 330px;
    left: calc(-10%);
    width: 100%;
    height: 100%;
    background-image: url("./../bg/bg-2-2.png");
    background-repeat: no-repeat;
}

.bg-7::before {
    content: "";
    position: absolute;
    top: 100px; /* 上からの固定位置 */
    left: calc(50% - 480px);
    width: 100%;
    height: 93.5%;
    background-color: #ebebeb;
    background-repeat: no-repeat;
}

.bg-7::after {
    content: "";
    position: absolute;
    top: 300px;
    right: calc(-80%);
    width: 100%;
    height: 100%;
    background-image: url("./../bg/bg-2-2.png");
    background-repeat: no-repeat;
}

.bg-plansheet::before {
    content: "";
    position: absolute;
    left: calc(0%);
    width: 100%;
    height: 92%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    z-index: -1;
}
.bg-22::after {
    content: "";
    position: absolute;
    top: 160px;
    right: calc(-50%);
    width: 100%;
    height: 100%;
    background-image: url("./../bg/bg-22.png");
    background-repeat: no-repeat;
    background-size: 70%;
    z-index: -1;
}

/* .bg-2_1::before {
    content: "";
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: calc(50% - 500px);
    width: 100%;
    height: 100%;
    background-image: url("./../bg/bg-2_1.png");
    background-repeat: no-repeat;
} */

/* .bg-2_1::before {
    background-color: #ebebeb;
    content: "";
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: calc(50% - 500px);
    background-repeat: no-repeat;
} */

.concept2 {
    position: relative;
    z-index: 1;
}

.bg-8 {
    background-image: url("./../bg/bg-8.png");
}
.bg-12 {
    background-image: url("./../bg/bg-12.png");
}
.bg-13 {
    background-image: url("./../bg/bg-13.png");
}

.bg-14 {
    background-image: url("./../bg/bg-14.png");
}
.bg-15 {
    background-image: url("./../bg/bg-15.png");
}
.bg-16 {
    background-image: url("./../bg/bg-16.png");
}
.bg-17 {
    background-image: url("./../bg/bg-17.png");
}
.bg-18 {
    background-image: url("./../bg/bg-18.png");
}
.bg-19 {
    background-image: url("./../bg/bg-19.png");
}
.bg-20 {
    background-image: url("./../bg/bg-20.png");
}
.bg-21 {
    background-image: url("./../bg/bg-21.png");
}

.plan-bg {
    background-image: url("./../bg/plan-bg.png");
}
.sp {
    display: none;
}
@media screen and (max-width: 576px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
    .plan-bg {
        background-image: url("./../bg/plan-bg_sp.png");
    }
    .concept-bg1 {
        background-image: url("./../bg/bg-1_sp.svg");
    }
    .bg-12 {
        background-image: url("./../bg/bg-12_sp.png");
    }
    .bg-15 {
        background-image: url("./../bg/bg-15_sp.png");
    }
    .bg-17 {
        background-image: url("./../bg/bg-17_sp.png");
    }
    .bg-18 {
        background-image: url("./../bg/bg-18_sp.png");
    }
    .bg-20 {
        background-image: url("./../bg/bg-20_sp.png");
    }
    .bg-21 {
        background-image: url("./../bg/bg-21_sp.png");
    }
    .bg-23::after {
        content: "";
        position: absolute;
        top: 300px;
        right: calc(-55%);
        width: 100%;
        height: 100%;
        background-image: url("./../bg/bg-23.png");
        background-repeat: no-repeat;
        background-size: 70%;
        z-index: -1;
    }
}

@media screen and (max-width: 1000px) {
    .bg-2_1::before {
        top: 100px; /* 上からの固定位置 */
        left: calc(0%);
        height: 82% !important;
    }
    .bg-2_1::after {
        top: 22%;
        left: calc(60%);
        background-image: url("./../bg/bg-2-2.png");
        background-repeat: no-repeat;
        background-size: 60%;
    }
    .bg-4::before {
        top: 100px; /* 上からの固定位置 */
        left: calc(0%);
        height: 85% !important;
    }
    .bg-4::after {
        /* top: 22%;
        left: calc(60%); */
        background-image: url("./../bg/bg-2-2.png");
        background-repeat: no-repeat;
        background-size: 60%;
    }

    .bg-5::before {
        top: 100px; /* 上からの固定位置 */
        left: calc(0%);
        height: 81% !important;
    }

    .bg-5::after {
        background-image: url("./../bg/bg-2-2.png");
        background-repeat: no-repeat;
        background-size: 40%;
    }
    .bg-6::before {
        top: 100px; /* 上からの固定位置 */
        left: calc(0%);
        height: 91% !important;
    }

    .bg-6::after {
        background-image: url("./../bg/bg-2-2.png");
        background-repeat: no-repeat;
        background-size: 60%;
    }
    .bg-7::before {
        left: calc(0%);
        height: 92% !important;
    }

    .bg-7::after {
        background-image: url("./../bg/bg-2-2.png");
        background-repeat: no-repeat;
        background-size: 40%;
    }
}
@media screen and (max-width: 700px) {
    .bg-4::before {
        top: 100px; /* 上からの固定位置 */
        left: calc(0%);
        height: 83%;
    }
    .bg-4::after {
        top: 20%;
    }
    .bg-5::before {
        height: 83%;
    }
    .bg-5::after {
        top: 50%;
    }
    .bg-6::before {
        height: 90%;
    }
    .bg-6::after {
        top: 10%;
    }
    .bg-7::before {
        top: 3%;
        height: 94%;
    }
    .bg-2_1::before {
        height: 77%;
    }
}

@media screen and (max-width: 500px) {
    .bg-5::before {
        height: 76%;
    }
    .bg-6::before {
        height: 88%;
    }
}

.blue-h2 {
    color: #659cc0;
    font-family: "Noto Serif JP", "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
        "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Noto Color Emoji", "Segoe UI Symbol";
    font-weight: 500;
}
.font-1 {
    font-family: "Noto Serif JP", "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
        "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Noto Color Emoji", "Segoe UI Symbol";
}
.design-img {
    position: relative !important;
}
.design-text {
    position: absolute !important; /*重ねたい子要素にabsolute*/
    top: 13%;
    left: 37%;
    -ms-transform: translate(-50%, -50%); /*ベンダープレフィックス*/
    -webkit-transform: translate(-50%, -50%); /*ベンダープレフィックス*/
    transform: translate(-50%, -50%); /*センター寄せの修正*/
    margin: 0 !important; /*文字がずれている場合や*/
    padding: 0 !important; /*文字が折り返される場合*/
}

.concept-img {
    position: relative !important;
}
.concept-text {
    position: absolute !important; /*重ねたい子要素にabsolute*/
    top: 12%;
    right: 30%; /* 右からの距離を設定 */
    -ms-transform: translate(50%, -50%); /* ベンダープレフィックス */
    -webkit-transform: translate(50%, -50%); /* ベンダープレフィックス */
    transform: translate(50%, -50%); /* センター寄せの修正 */
    margin: 0 !important; /*文字がずれている場合や*/
    padding: 0 !important; /*文字が折り返される場合*/
}

@media screen and (max-width: 768px) {
    .design-text {
        display: none !important;
    }
    .concept-text {
        display: none !important;
    }
}
@media screen and (max-width: 1240px) {
    .concept-text {
        position: absolute !important; /*重ねたい子要素にabsolute*/
        top: 12%;
        right: 25%; /* 右からの距離を設定 */
    }
}

.map-links {
    display: inline-block;
    position: relative;
}
.map-links svg {
    position: absolute;
    top: 0;
    left: 0;
}
.map-links svg path {
    opacity: 0;
    fill: #000000;
}
.map-links svg a:hover path {
    opacity: 0.4;
}
.line-box {
    width: 30vw;
    margin: auto;
}
@media (max-width: 768px) {
    .line-sp {
        width: 60vw;
        margin: auto;
    }
    .blue-swiper-button-prev {
        left: 1% !important; /* 左からの位置を調整 */
    }

    .blue-swiper-button-next {
        right: 1% !important; /* 右からの位置を調整 */
    }
}
.svg-path:hover {
    fill: #c0d6e5; /* ホバー時の色を指定 */
}
.blue-swiper-button-prev,
.blue-swiper-button-next {
    color: #659cc0;
}

.blue-color-custom {
    color: #659cc0;
}

.blue-swiper-button-prev {
    left: 3%; /* 左からの位置を調整 */
}

.blue-swiper-button-next {
    right: 3%; /* 右からの位置を調整 */
}

.blue-thumb .swiper-slide.is-active img {
    outline: 3px solid #659cc0;
}
.plan-menu {
    display: none;
}
.plan-menu-item {
    margin: 1em;
    padding: 0.5em 1em;
    border-bottom: 1px solid #eee !important;
    color: #eee !important;
    text-decoration: none;
    display: block;
}

.plan-menu-item:last-child {
    border-bottom: none;
}

.plan-menu-item:hover {
    background-color: rgba(29, 65, 95, 0.2) !important;
}
.plan-menu::before,
.plan-menu::after {
    content: none !important; /* 強制的に疑似要素を削除 */
    display: none !important; /* 念のため非表示にする */
}
.tippy-arrow {
    display: none;
}
.tippy-box {
    background-color: rgba(29, 65, 95, 0.6) !important;
}
.icon-instagram {
    background: linear-gradient(to bottom right, #833ab4, #fd1d1d, #fcb045);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.icon-facebook {
    display: inline-block;
    width: 25px; /* 必要に応じて調整 */
    height: 25px; /* 必要に応じて調整 */
    background-color: #1877f2; /* Facebookのブルー */
    border-radius: 50%; /* 円形にする */
    position: relative;
    text-align: center;
    line-height: 30px; /* アイコンを中央揃えにする */
}
.icon-facebook::before {
    color: white; /* アイコンの色を白にする */
}
.hero-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px; /* 点同士の間隔 */
}

.hero-pagination .swiper-pagination-bullet {
    width: 40px; /* 通常時の横幅 */
    height: 5px; /* 縦幅 */
    background-color: #ffffff; /* 色 */
    border-radius: 0; /* 角を丸くしない */
    opacity: 1; /* 不透明度 */
    transition:
        opacity 0.3s,
        background-color 0.3s,
        width 0.3s; /* トランジションにwidthを追加 */
}

.hero-pagination .swiper-pagination-bullet-active {
    opacity: 1; /* アクティブな点の不透明度 */
    background-color: #ffffff; /* アクティブな点の色 */
    width: 100px; /* アクティブな点の横幅 */
}

.plan-pagination {
    gap: 2px; /* 点同士の間隔 */
}

.plan-pagination .swiper-pagination-bullet {
    width: 40px; /* 通常時の横幅 */
    height: 5px; /* 縦幅 */
    border-radius: 0; /* 角を丸くしない */
    opacity: 0.3; /* 不透明度 */
    transition:
        opacity 0.3s,
        background-color 0.3s;
}
.plan-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}
::selection {
    background: rgb(84, 168, 188, 0.5) !important;
}
.table-br,
.table-br-2,
.td-br,
.plan-br,
.plan-br-2 {
    display: none;
}
@media screen and (min-width: 869px) and (max-width: 1124px) {
    .table-br {
        display: block !important;
    }
    .table-br-2 {
        display: none;
    }
}
@media screen and (min-width: 869px) and (max-width: 955px) {
    .table-br-2 {
        display: block !important;
    }
}
@media (max-width: 650px) {
    .plan-br {
        display: block !important;
    }
}
@media (max-width: 570px) {
    .table-br {
        display: block !important;
    }
}
@media (max-width: 580px) {
    .plan-br-2 {
        display: block !important;
    }
}
@media (max-width: 530px) {
    .table-text {
        display: block !important;
        font-size: 0.9em;
    }
}
@media (max-width: 500px) {
    .table-br-2,
    .td-br {
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    .swiper-slide.hero-1 {
        background-image: url("./../images/hero-1_sp") !important;
    }
    .swiper-slide.hero-2 {
        background-image: url("./../images/hero-2_sp") !important;
    }
}

/* 区画図の設定 */
.svg-areamap-wrapper {
        position: relative;
    }

    .svg-areamap-wrapper svg {
        /* visibility: hidden; */
        position: relative;
        z-index: 20;
    }

    .svg-areamap-wrapper svg a:is(.pending, .sold) {
        pointer-events: none;
    }

    /* .svg-areamap-wrapper svg>path:first-of-type {
        fill: red;
        opacity: .5;
    } */

    .svg-areamap-wrapper svg a path {
        fill: rgba(193, 231, 210, 1);
    }

    .svg-areamap-wrapper svg a:not(.is-not-sale) path {
        fill: rgba(241, 241, 241, 1);
    }

    .svg-areamap-wrapper svg a:not(.pending, .sold) path {
        fill: rgba(193, 231, 210, 0);
    }

    .svg-areamap-wrapper svg a:not(.is-not-sale):not(.pending, .sold) path {
        fill: rgba(255, 253, 189, 0);
    }

    .svg-areamap-wrapper svg a:not(.pending, .sold):hover path {
        fill: rgba(0, 0, 0, 0.2);
    }

    /* 

    .svg-areamap-wrapper svg a path {
        fill: #BBC6DA;
    }

    .svg-areamap-wrapper svg a.is-not-sale path {
        fill: rgba(187, 198, 218, .6);
    }

    .svg-areamap-wrapper svg a:not(.pending, .sold) path {
        fill: rgba(0, 0, 0, 0);
    }

    .svg-areamap-wrapper svg a:not(.pending, .sold):hover path {
        fill: rgba(0, 0, 0, 0.2);
    } */

    .svg-areamap-wrapper img {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 15;
    }

    .svg-areamap-wrapper img+img {
        z-index: 25;
    }

    .svg-areamap-wrapper svg {
        position: relative;
        z-index: 20;
    }

    #planningMap {
            display: none;
        }

        .aspect-ratio-square:not(#\#){
    aspect-ratio:1/1;
}
@media (min-width:768px){
    .tb\:aspect-ratio-square:not(#\#){
        aspect-ratio:1/1;
    }
}
@media (min-width:1280px){
        .lt\:aspect-ratio-square:not(#\#){
        aspect-ratio:1/1;
    }
}
@media (min-width:1680px){
        .dt\:aspect-ratio-square:not(#\#){
        aspect-ratio:1/1;
    }
}
        .sm\:aspect-ratio-square:not(#\#) {
        aspect-ratio: 1/1;
    }
        .md\:aspect-ratio-square:not(#\#) {
        aspect-ratio: 1/1;
    }
        .lg\:aspect-ratio-square:not(#\#) {
        aspect-ratio: 1/1;
    }

    /* プラン一覧ボタン */
    .plan-link-box {
  display: block; /* 他の号地と同様にボックス化 */
  box-sizing: border-box !important; /* 枠線がはみ出さないように */
  border: 2px solid rgb(22, 94, 131);
  background-color: #fff;
  color: inherit; /* 既存の link クラスの文字色を継承 */
  text-align: center;
  transition: background-color 0.2s ease;
  padding: 6px;
}

/* hover時に半透明ブルー */
.plan-link-box:hover {
  background-color: rgba(22, 94, 131, 0.2);
}

/* PLANホバーした時の吹き出し */