/* ==========================================================================
   [1] レイアウト初期化・ページ基本設定
   ========================================================================== */
#breadcrumb, .gnav-wrapper, #gnav_fix, #before_footer_widget, 
.l-footer__widgetArea, .p-footerContact, .p-blogParts[data-partsid="302"], .l-header__menuBtn.sp_ { 
    display: none !important; 
}

.l-header, .l-header__inner, .w-header, .w-header__inner, .w-header__item {
    overflow: visible !important;
}

.l-mainContent { 
    max-width: 900px;
    padding-top: 0 !important; 
}
.l-container { max-width: 100% !important; padding-top: 0 !important; }

.plan-slider-main-run:not(.slick-initialized) .plan-item:not(:first-child),
.main-slider-wrap .wp-block-cover:not(:first-child) { 
    display: none !important; 
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

#wpadminbar + #header, 
.l-header, 
.l-mainContent {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.main-slider-wrap, 
.main-slider-wrap .slick-list,
.main-slider-wrap .wp-block-cover {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.l-mainContent {
    margin-top: -56px !important; 
}

.l-header__inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   [2] タイトル・メインコピー・サブコピー
   ========================================================================== */
.swell-block-fullWide+.swell-block-fullWide {
    margin-top: 0px;
}

.lp_garage_title {
    position: absolute !important;
    left: 50% !important;
    margin-top: 5%;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 9999 !important;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    top: 100% !important; 
    bottom: auto !important;
}

.wp-block-cover 
.wp-block-cover__inner-container, 
.wp-block-cover-image 
.wp-block-cover__inner-container {
    color: inherit;
    position: absolute;
    width: 50%;
    top: 70px;
    justify-self: anchor-center;
}

.lp-main-copy {
    position: absolute !important;
    bottom: 0px !important;
    left: 5% !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 60px !important;
    font-weight: 700 !important;
    color: #fff !important;
    z-index: 10;
}

.lp-sub-copy {
    position: absolute !important;
    bottom: 110px !important;
    left: 5% !important;
    font-size: 18px !important;
    color: #fff !important;
    font-family: "Noto Serif JP", serif !important;
    z-index: 10;
}

.seo-title {
    margin: 4em 0 0em !important;
}

.seo-title span::before {
    display: none !important;
}

.seo-text {
    line-height: 2.5 !important;
}

@media screen and (min-width: 961px) {
    .lp_garage_title strong {
        font-size: 4vw !important;
        white-space: nowrap !important;
        line-height: 0.8 !important;
        text-indent: 1.5vw;
        color: #fff;
        font-family: "Noto Sans JP" !important;
        display: inline-block;
        font-weight: 500;
    }
}

@media screen and (max-width: 960px) {
    .lp_garage_title strong {
        font-size: 8vw !important;
        line-height: 1 !important;
        color: #fff;
        display: block;
        width: 90%;
        margin: 0 auto;
        white-space: normal;
        font-family: "Noto Sans JP" !important;
    }

    .lp-main-copy {
        font-size: 48px !important;
    }
}

@media screen and (max-width: 768px) {
    
    .wp-block-cover 
    .wp-block-cover__inner-container, 
    .wp-block-cover-image 
    .wp-block-cover__inner-container {
        width: 50%;
    }
        
    .lp-main-copy {
        font-size: 32px !important;
    }
}

/* ==========================================================================
   [3] コンテンツスライダー
   ========================================================================== */
.content-slide-1,
.content-slide-2,
.content-slide-3,
.content-slide-4 {
    width: 865px !important;
    height: 500px !important;
    margin: 80px auto 30px !important;
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
}

.content-text {
    width: 80%;
    justify-self: anchor-center;
    border-top: 1px solid #E4E4E4;
    padding-top: 16px;
}

.content-slide-1 .content-slider-run, 
.content-slide-2 .content-slider-run, 
.content-slide-3 .content-slider-run,
.content-slide-4 .content-slider-run,
.content-slide-1 .slick-list, 
.content-slide-2 .slick-list, 
.content-slide-3 .slick-list,
.content-slide-4 .slick-list,
.content-slide-1 .slick-track, 
.content-slide-2 .slick-track, 
.content-slide-3 .slick-track,
.content-slide-4 .slick-track,
.content-slide-1 .slick-slide, 
.content-slide-2 .slick-slide, 
.content-slide-3 .slick-slide,
.content-slide-4 .slick-slide,
.content-slide-1 .slick-slide > div, 
.content-slide-2 .slick-slide > div, 
.content-slide-3 .slick-slide > div,
.content-slide-4 .slick-slide > div {
    height: 500px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.content-slide-item,
.content-slide-item figure {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important; 
}

.content-slide-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.content-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden;
    transition: background 0.3s;
}

.content-nav-btn:hover { 
    background: rgba(255, 255, 255, 1) !important; 
}

.content-nav-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 3px solid #0A0A0A !important;
    border-left: 3px solid #0A0A0A !important;
    transform: translateY(-50%) rotate(-45deg) !important;
    display: block !important;
}

.content-nav-btn.slick-prev { left: 15px !important; }
.content-nav-btn.slick-prev::before { left: 18px !important; }
.content-nav-btn.slick-next { right: 15px !important; }
.content-nav-btn.slick-next::before {
    right: 18px !important;
    transform: translateY(-50%) rotate(135deg) !important;
}

@media screen and (max-width: 960px) {
    .content-slide-1, 
    .content-slide-2, 
    .content-slide-3,
    .content-slide-4 {
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important; 
        margin: 60px auto 15px !important;
    }

    div[class^="content-slide-"] .slick-list,
    div[class^="content-slide-"] .slick-track,
    div[class^="content-slide-"] .slick-slide,
    div[class^="content-slide-"] .slick-slide > div {
        height: auto !important;
        min-height: 300px !important;
    }
}

@media screen and (max-width: 768px) {
    /* 모바일에서는 높이를 조금 더 줄임 */
    .content-slide-1 .content-slider-run, 
    .content-slide-2 .content-slider-run, 
    .content-slide-3 .content-slider-run,
    .content-slide-4 .content-slider-run,
    .content-slide-1 .slick-list, 
    .content-slide-2 .slick-list, 
    .content-slide-3 .slick-list,
    .content-slide-4 .slick-list,
    .content-slide-1 .slick-track, 
    .content-slide-2 .slick-track, 
    .content-slide-3 .slick-track,
    .content-slide-4 .slick-track,
    .content-slide-1 .slick-slide, 
    .content-slide-2 .slick-slide, 
    .content-slide-3 .slick-slide,
    .content-slide-4 .slick-slide,
    .content-slide-1 .slick-slide > div, 
    .content-slide-2 .slick-slide > div, 
    .content-slide-3 .slick-slide > div,
    .content-slide-4 .slick-slide > div {
        height: 250px !important;
    }

    .content-text {
        width: 100%;
    }
}

/* ==========================================================================
   [3] 間取りスライダー（メイン）
   ========================================================================== */
.plan-slider-main {
    border: 1px solid #ddd;
    background: #F0F0F0;
    margin: 60px auto !important;
    max-width: 1100px;
    position: relative !important;
}

.plan-custom-main-run {
    padding: 3%;
    
    .slick-list.draggable {
        margin-top: 0px !important;
    }
}

.plan-flex-box {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.plan-img-area { 
    flex: 0 0 60% !important; 
    background: #fff; 
    padding: 20px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
}

.plan-img-area img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: contain; 
}

.plan-info-area { 
    flex: 1; 
    text-align: left; 
    padding-right: 20px; 
}

.plan-info-text, .plan-description-wrapper { 
    font-size: 16px; 
    line-height: 1.8; 
    color: #333; 
    white-space: pre-wrap; 
}

.plan-info-title { font-size: 24px !important; font-weight: 700 !important; color: #0A0A0A !important; }
.plan-info-sub { font-size: 17px !important; font-weight: 600 !important; color: #666 !important; margin-bottom: 18px !important; }
.plan-info-desc { font-size: 15px !important; margin-bottom: 8px !important; }

.plan-flex-container {
    display: flex !important;
    flex-direction: row !important; 
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
    padding: 20px;
}

.plan-image-part {
    flex: 0 0 60% !important;
    background: #fff;
    padding: 15px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.plan-image-part img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain;
    display: block;
}

.plan-text-part {
    flex: 1 !important;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: end;
    
    .plan-info-title {
        margin: 1em 0 0em;
    }

    .plan-info-sub {
        margin: 0em 0 1em;
    }
}

@media screen and (max-width: 960px) {
    .plan-flex-container {
        flex-direction: column !important;
    }
    .plan-image-part, .plan-text-part {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .plan-text-part {
        margin-top: 20px;
        padding-left: 10px;
    }
}

@media screen and (max-width: 768px) {
    .has-text-align-center, .content-text {
        font-size: 14px;
        text-align: left;
    }

}

/* ==========================================================================
   [3] 間取りスライダー（サムネール）
   ========================================================================== */
.plan-custom-thumb-run {
    padding: 10px 50px !important;
    position: relative;
    overflow: visible !important;
}

.plan-custom-thumb {
    padding: 0 5px !important;
    cursor: pointer;
    outline: none;
    transition: 0.3s;
}

.plan-custom-thumb img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    background-color: #fff;
    border: 2px solid #eee;
    opacity: 0.5;
    transition: 0.3s;
    box-sizing: border-box;
}

.plan-custom-thumb-run .slick-slide.slick-current .plan-custom-thumb img {
    border-color: #00a0e9 !important;
    opacity: 1 !important;
    box-shadow: 0 0 8px rgba(0, 160, 233, 0.2);
}

.plan-custom-thumb:hover img {
    opacity: 0.8;
    border-color: #ccc;
}

.img-slider_bottom_wrapper.not-move-slide .slick-track {
    display: flex !important;
    justify-content: center !important;
    transform: none !important;
}

.img-slider_bottom_wrapper {
    margin: 0;
    position: relative;
    overflow: hidden;
    padding: 10px 0;
}

.img-slider_bottom_wrapper .slick-list {
    overflow: hidden !important;
    padding: 0 60px !important; 
    margin: 0 !important;
}

.img-slider_bottom_wrapper .slick-track {
    display: flex !important;
    align-items: center;
    opacity: 1;
}

.img-slider_bottom_wrapper.not-move-slide .slick-track {
    justify-content: center !important;
    width: 100% !important;
    transform: translate3d(0px, 0px, 0px) !important;
    margin: 0 auto !important;
}

.img-slider_bottom_wrapper .content-nav-btn::before,
.img-slider_bottom_wrapper .content-nav-btn::after {
    display: none !important;
    content: none !important;
}

.img-slider_bottom_wrapper .content-nav-btn {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 35px !important;
    height: 35px !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 12px !important; 
    cursor: pointer !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease-in-out !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.img-slider_bottom_wrapper .slick-prev-bottom {
    left: 12px !important;
    background-image: url("/wp-content/uploads/2024/02/icon_arrow.svg") !important;
}

.img-slider_bottom_wrapper .slick-next-bottom {
    right: 12px !important;
    background-image: url("/wp-content/uploads/2024/02/Icon_Arrow_Right.svg") !important;
}

.img-slider_bottom_wrapper .content-nav-btn:hover {
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: translateY(-50%) scale(1.1) !important; 
    transition: all 0.2s ease-in-out;
}

.img-slider_bottom_wrapper .slick-prev-bottom:hover {
    background-image: url("/wp-content/uploads/2024/02/icon_arrow.svg") !important;
}

.img-slider_bottom_wrapper .slick-next-bottom:hover {
    background-image: url("/wp-content/uploads/2024/02/Icon_Arrow_Right.svg") !important;
}

.img-slider_bottom_wrapper .arrow_bottom {
    position: static;
}

.not-move-slide.img-slider_bottom_wrapper .arrow_bottom button {
    cursor: not-allowed;
    opacity: 0.3;
}

.img-slider_bottom_wrapper .slick-disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.2;
}

@media screen and (max-width: 960px) {
    .img-slider_bottom_wrapper .arrow_bottom {
        display: block !important; 
        position: static; 
    }

    .img-slider_bottom_wrapper .slick-list {
        padding: 0 40px !important; 
        overflow: hidden !important;
    }

    .img-slider_bottom_wrapper .content-nav-btn {
        width: 30px !important;
        height: 30px !important;
        background-size: 10px !important;
    }

    .img-slider_bottom_wrapper .slick-prev-bottom {
        left: 5px !important;
    }

    .img-slider_bottom_wrapper .slick-next-bottom {
        right: 5px !important;
    }

    .img-slider_bottom_wrapper.not-move-slide .slick-track {
        justify-content: center !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

@media screen and (max-width: 960px) {
    .plan-flex-box { gap: 20px; }
    .plan-img-area { flex: 0 0 55% !important; }
}

@media screen and (max-width: 768px) {
    .plan-flex-box { flex-direction: column !important; text-align: center; }
    .plan-img-area, .plan-info-area { width: 100% !important; flex: 0 0 100% !important; }
    .plan-info-area { padding-right: 0; margin-top: 20px; }
    .plan-custom-thumb img { height: 60px; }
}

/* ==========================================================================
   [4] 間取り・地図エリア
   ========================================================================== */
.map-container h6,
.floor_plan_area h6 {
  color: var(--gh_white);
  background-color: var(--gh_dark_gray);
  padding: 10px;
  font-size: 15px;
}

.map-container .acf-map {
  height: 500px !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width: 960px) {
    .map-container .acf-map {
        height: 350px !important;
    }
}

.serif {
  font-family: Noto Serif JP;
}
.grid_new-title {
  font-family: Noto Serif JP;
  padding-bottom: 20px !important;
  position: relative;
}
.grid_new-title span::before {
  content: "";
  display: inline-block;
  margin-left: 10px;
  width: 100px;
  height: 5px;
  background-color: #3d4474;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

/* ==========================================================================
   [5] モーダル
   ========================================================================== */
.custom-modal-overlay {
    display: none; /* 기본 숨김 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

/* 모달 본체 (865x500 고정) */
.custom-modal-content {
    position: relative;
    width: 865px;
    height: 500px;
    background: #000;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* 비디오 컨테이너 */
.modal-video-container {
    width: 100%;
    height: 100%;
}

/* 닫기 버튼 */
.modal-close-btn {
    position: absolute;
    right: 0;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    font-size: 25px;
    cursor: pointer;
    line-height: 1;
    margin: 10px 5px;
    padding: 5px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    transition: background 0.3s;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
}

.custom-close-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    /* [수정] 깨진 Base64 데이터를 올바른 SVG 코드로 교체 */
    --the-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M27.5 24 43.4 8.1c.4-.4.4-1 0-1.4l-2.1-2.1c-.4-.4-1-.4-1.4 0L24 20.5 8.1 4.6c-.4-.4-1-.4-1.4 0L4.6 6.7c-.4.4-.4 1 0 1.4L20.5 24 4.6 39.9c-.4.4-.4 1 0 1.4l2.1 2.1c.4.4 1 .4 1.4 0L24 27.5l15.9 15.9c.4.4 1 .4 1.4 0l2.1-2.1c.4-.4.4-1 0-1.4L27.5 24z'%3E%3C/path%3E%3C/svg%3E");
    background-image: var(--the-icon-svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* [색상 보정] #0A0A0A에 가까운 매우 짙은 검은색 필터 */
    /* 기존 invert(1)은 흰색으로 만드니 제거하고 brightness만 조절합니다. */
    filter: brightness(0.04) !important; 
}

/* 반응형: 화면이 865px보다 작을 때 */
@media screen and (max-width: 865px) {
    .custom-modal-content {
        width: 90%;
        height: auto;
        aspect-ratio: 16 / 9; /* 비율 유지 */
    }
    .modal-close-btn {
        right: -5px;
        top: -49px;
        justify-content: end;
        background-color: rgba(255, 255, 255, 1) !important;
    }
}

/* ==========================================================================
   [6] 「動画を再生する」、「パノラマ・ビュー」ボタン
   ========================================================================== */
.lp_view_btn {
    display: none; /* 非公開：20260325時点 */
}

@media screen and (max-width: 768px) {
    .media_play_btn .swell-block-button__link,
    .lp_view_btn .swell-block-button__link {
        min-width: 280px; 
        width: auto;
        white-space: nowrap;
    } 
}


/* ==========================================================================
   [7] テーブル
   ========================================================================== */
.garage_info_area,
.table-container-summary {
    table-layout: fixed !important; 
    width: 100% !important;
}

.garage_info_area tr td:first-child,
.table-container-summary tr td:first-child,
.garage_info_area tr th:first-child,
.table-container-summary tr th:first-child {
    width: 30% !important;
    vertical-align: middle;
}

.garage_info_area tr td:last-child,
.table-container-summary tr td:last-child {
    width: 70% !important;
    vertical-align: middle;
}

.is-style-btn_line a:hover .swl-inline-color {
    color: #ffffff !important;
}

.property-inquiry-container.sp_only {
    padding: 30px 0px !important;
}

/* ==========================================================================
   4/8追加 LPカスタム、MV変更
   ========================================================================== */

.key-wrap img {
  width: 100%;
  height: auto;
}

.l-mainContent .post_content .key-wrap {
  width: 100%;
  position: relative;
  margin-bottom: 80px!important;
}

.key-img {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -10vw;
}

.key-logo-wrap {
  width: 100%;
  height: 63%;
  position: absolute;
  left: 0;
  top: 0;
}

.logo-yt {
  width: 26vw;
  position: sticky;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-top: 80px;
}

.logo-yt img {
  filter: drop-shadow(0 0 15px rgba(26, 41, 59, 0.80));
}

.key-txt-wrap {
  width: 100%;
  height: 97%;
  position: absolute;
  left: 0;
  top: 0;
}

.txt-yt {
  font-family: "Noto Serif JP", serif !important;
  font-weight: 700;
  font-size: 3.7vw!important;
  letter-spacing: 0.05em;
  line-height: 1!important;
  color: #fff;
  position: absolute!important;
  padding-left: 6vw;
  margin: 0!important;
  bottom: 7vw!important;
  left: 0!important;
  text-shadow: 0 0 15px rgba(26, 41, 59, 0.80);
}

.l-header .property-inquiry-btn, .l-fixHeader .property-inquiry-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.l-header .property-inquiry-btn .swell-block-button__link, .l-fixHeader .property-inquiry-btn .swell-block-button__link {
    background-color: #3f70b2;
    font-size: 145%;
    padding-top: .5em;
    padding-bottom: .5em;
    white-space: nowrap;
}

.c-headLogo {
    display: none!important;
}

.l-footer__foot .l-container {
    flex-direction: column;
    gap: 1.25em;
}

.l-footer__foot .l-container::before {
    width: 204px;
    height: 120px;
    margin-right: 0;
}

@media (max-width: 959px){
  .l-mainContent .post_content .key-wrap {
    width: 100%;
    position: relative;
    margin-bottom: 80px!important;
  }

  .key-img {
    bottom: -13vw;
  }

  .key-logo-wrap {
    height: 71%;
  }

  .logo-yt {
    left: 0;
    width: 60vw;
    padding-top: 0;
    transform: translateX(calc(50vw - 50%));
  }

  .logo-yt img {
    filter: drop-shadow(0 0 10px rgba(26, 41, 59, 0.80));
  }

  .key-txt-wrap {
    height: 100%;
  }

  .txt-yt {
    font-size: 6.8vw!important;
    padding-left: 8vw;
    bottom: 16vw!important;
    text-shadow: 0 0 10px rgba(26, 41, 59, 0.80);
  }

  .l-header .property-inquiry-btn .swell-block-button__link, .l-fixHeader .property-inquiry-btn .swell-block-button__link {
      font-size: 16px;
      padding: .25em .75em .25em 1em;
  }

}