.main-visual {
position: relative;
width: 100%;
aspect-ratio: 1664 / 1012;
overflow: hidden;
background: #000;
}
@media screen and (max-width: 768px) {
.main-visual {
aspect-ratio: 661 / 858;
}
}
.bg-layer {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.bg-slider .bg-img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.bg-slider .bg-img {
object-fit: contain;
}
}
.main-logo {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: 100%;
}
.button-carousel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: 5;
}
.slide-btn {
width: 100%;
aspect-ratio: 965 / 940;
height: auto;
object-fit: contain;
display: block;
}
@media screen and (max-width: 768px) {
.slide-btn {
object-fit: contain;
max-width: 100%;
height: auto;
}
}
.button-slider .slick-slide {
transform: scale(0.8);
opacity: 0.5;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.button-slider .slick-center {
transform: scale(1.5);
opacity: 1;
}

/* animation */
/* ブラー＋フェードイン */
.blur-fadein {
opacity: 0;
filter: blur(10px);
transform: translateY(20px);
transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}

.blur-fadein.active {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}

/* フェードインのみ */
.fadein-only {
opacity: 0;
transition: opacity 1s ease;
}

.fadein-only.active {
opacity: 1;
}

/*osirasse */
section#news {
background:#3F2D1A;
color:#fff;
}

.ticker {
position: relative;
height: 50px;
border-radius: 5px;
overflow: hidden;

& li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateY(100%);
transition: all 1s ease;

&.active {
  opacity: 1;
  transform: translateY(0);
}

&.inactive {
  opacity: 0;
  transform: translateY(-100%);
}

& a {
  box-sizing: border-box;
  display: grid;
  place-content: center start;
  height: 100%;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  padding: 0 1.5em;
  line-height: 1;
}

& span {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
}
}

/*--MODELROOM*/
.modelroom-section {
position: relative;
height: 450px;
overflow: hidden;
}

.modelroom-section::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('../../images/top_2025/bg_modelroom_pc.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: brightness(0.6); /* 初期：暗く */
z-index: 0;
transition: filter 0.5s ease;
}

.modelroom-section:hover::before {
filter: brightness(1); /* ホバー時：明るく */
}

@media screen and (max-width: 1590px) {
.modelroom-section::before {
background-size: auto 509px; /* 拡大縮小せずに縦合わせ、横トリミング */
}
}

.btn-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

.modelroom-btn {
max-width: 100%;
height: auto;
display: block;
}

/* Premium Type */
#premium {
background:url("../../images/top_2025/bg_premium01.jpg");
background-size:cover;
color:#fff;
}

/*-grid */
.grid-layout {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
gap: 20px;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 30px 20px;
}

.main-content {
grid-column: 2;
}

.side-content {
grid-column: 3;
}

.side-content ul {
display: flex;
flex-direction: column; /* 初期は縦並び */
gap: 15px;
}

.side-content ul li {
list-style: none;
}

/* ～1399px以下：グリッド→縦一列、画像は横並び */
@media screen and (max-width: 1399px) {
.grid-layout {
display: block;
}

.main-content,
.side-content {
width: 100%;
margin-bottom: 15px;
}

.side-content ul {
flex-direction: row; /* 横並び */
justify-content: center;
gap: 1px;
}
}

/* ～767px以下：画像は縦並びに戻す */
@media screen and (max-width: 767px) {
.side-content ul {
flex-direction: column; /* 縦並び */
align-items: center;
}
}


/* PanoramaView */
#view_panorama {
background:url("../../images/top_2025/bg_view_panorama.jpg");
background-size:cover;
}
  #panoramaContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

 /*   .pano {
        width: 100vw;
        height: 400px;
        cursor: move;
        position: relative;
    }*/

    .pano-wrapper {
position: relative;
width: 100vw;
height: 400px;
overflow: hidden;
}

.pano {
width: 100%;
height: 100%;
cursor: move;
position: relative;
z-index: 1;
}

.controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: block;
z-index: 2;
}

  /*  .controls {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: block;
    }*/

    .controls a {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: #fff;
        font-size: 40px;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 5px;
    }

    .controls a.left {
        left: 10%;
    }

    .controls a.right {
        right: 10%;
    }

    .moving .controls a {
        opacity: 0.4;
        color: #eee;
    }

    @media screen and (max-width: 640px) {
        .pano {
            height: 400px;
        }

        .controls a {
            font-size: 20px;
        }
    }

    /* Contents */
#contents_box {
background:url("../../images/top_2025/bg_contents.jpg");
background-size:cover;
background-repeat:repeat-y;
}

.two-column-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 50% : 50% */
/*gap: 20px;*/
width: 100%;
max-width: 1320px;
margin: 0 auto;
}

.column {
/*padding: 0px;*/
}



.column p.txt {
font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
width:100%;
max-width:525px;
margin-top:20px;
}

.align-center {
display: flex;
flex-direction: column; /* ← 追加で縦並びに */
align-items: center;
justify-content: center;

text-align: center;
}

/* SP対応：縦並びに変更 */
@media screen and (max-width: 767px) {
.two-column-grid {
display: block;
}

.align-center {
display: block;
text-align: center;
}
}

@media screen and (max-width: 767px) {
.reverse-on-sp {
display: flex;
flex-direction: column;
}

.reverse-on-sp .column.right {
order: 2;
}

.reverse-on-sp .column.left {
order: 1;
}
}

/**眺望 **/
/*--view*/
.view-section {
position: relative;
height: 450px;
overflow: hidden;
}

.view-section::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('../../images/top_2025/20241101_back_bg_view_pc@2x.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: brightness(0.6); /* 初期：暗く */
z-index: 0;
transition: filter 0.5s ease;
}

.view-section:hover::before {
filter: brightness(1); /* ホバー時：明るく */
}

@media screen and (max-width: 1590px) {
.view-section::before {
background-size: auto 509px; /* 拡大縮小せずに縦合わせ、横トリミング */
}
}

/* スマホ向け：ボタン背景を大きく中央寄せ＆背景半透明の白色に */
@media screen and (max-width: 767px) {
.btn-wrap {
width: 90%;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
}

.btn-wrap .view-btn {
width: 100%; /* 画像は枠いっぱいに表示 */
height: auto;
display: block;
}
}

.view-btn {
max-width: 100%;
height: auto;
display: block;
}

#basic_box {
background:url("../../images/top_2025/bg_view_panorama.jpg");
background-size:cover;
}

.no-action {pointer-events: none; color:#fff; opacity: 1;}