/* osaki.css に記載する最終的な CSS 全文 (FIXED: ナビの文字色を白に変更) */
@charset "utf-8";
/* CSS Document */
header {
padding: 0 0 0 40px;
  background: #ffffff;
  border-bottom: none;
}
.globalnavList li .subs {
  top: 48px;
}
@media (min-width: 768px) {
    .sp { display: none; }    
}
/* 全体のテーマカラーを黒基調に設定 (px-common.cssやtop.cssの継承を考慮) */
body, main {
  background: #061303;
  color: #fff;
}
h3 span.jp,
section.sec-strengths h3 .en,
section.sec-tripleAppraisal .tripleAppraisalAbout .tripleAppraisalAboutTxt h3 .en,
section.sec-directPurchase .directPurchaseAbout .directPurchaseAboutTxt h3 .en {
  color: var(--Soutetsu-Navy, #FFF);
}
section.sec-pagejump details .pagejumpContents .btnList li a.orange {
  background: #36663A;
  color: #fff;
}
section.sec-pagejump details .pagejumpContents .btnList li a.line {
  background: #36663a;
  border: 2px solid #36663A;
}
@media (hover: hover) and (pointer: fine) {
  section.sec-pagejump details .pagejumpContents .btnList li a:hover.orange {
    background: #007440;
    color: #F4774E;
  }
  section.sec-pagejump details .pagejumpContents .btnList li a:hover.line {
    background: #007440;
    border: 2px solid #007440;
  }
}

@media only screen and (max-width: 1024px) {
  section.sec-kv {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
    header { padding: 0; }
    header nav .globalnavListWrap.active { background: #fff; }
    section.sec-kv { margin-top: 0px; }
}
section.sec-kv .kvWrap .kvBtn a.linkBtn {
  background: #061303; /*#36663A;*/
}
section.sec-news .newsLinkWrap ul > li > a .newsLink .viewmoreWrap .line,
section.sec-ourStaff .niceValuePlusWrap a .niceValuePlusLink .viewmoreWrap .line,
section.sec-contents-nav .contentsOther
{
  background: var(--Soutetsu-Navy, #4A4A4A); /*#9BA49F);*/
}
section.sec-news .newsLinkWrap ul > li > a .newsLink .viewmoreWrap .more,
section.sec-ourStaff .niceValuePlusWrap a .niceValuePlusLink .viewmoreWrap .more,
section.sec-ourStaff .ourStaffSubBox ul li,
footer .footerContents .footerSiteLinkWrap .footerCopyright
{
  color: var(--Soutetsu-Navy, #8E8E8E);
}
section.sec-news .newsLinkWrap ul > li > a .newsLink h4 .jp,
section.sec-contact .contactWrap .contactTxt .contactRead,
section.sec-contact .contactWrap .contactTxt .contactTel a,
section.sec-contact .contactWrap .contactTxt .contactTel p,
section.sec-storeInfo .storeInfoWrap .storeInfoDetail h4,
section.sec-storeInfo .storeInfoWrap .storeInfoDetail .contactWrap .tel,
section.sec-storeInfo .storeInfoWrap .storeInfoDetail .contactWrap .businessHours,
section.sec-ourStaff .ourStaffRead,
section.sec-ourStaff .niceValuePlusWrap a .niceValuePlusLink .niceValuePlusTxt h4 .jp,
section.sec-ourStaff .niceValuePlusWrap a .niceValuePlusLink .niceValuePlusTxt p,
section.sec-ourStaff .ourStaffSubBox .ourStaffSubTitle,
section.sec-ourStaff .ourStaffSubBox ul li a,
footer .footerSitenameWrap .footerSitename,
footer .footerSitenameWrap .footerLicence,
footer .footerContents .footerContactWrap .footerAddress,
footer .footerContents .footerContactWrap .footerContact .footerTel,
footer .footerContents .footerContactWrap .footerContact .footerBusinessHours,
footer .footerContents .footerSiteLinkWrap .footerSiteLink > li a,
section.sec-contents-nav .contentsOther p,
section.sec-achievements .achievementsWrap .achievementsTxt .achievementsRead,
section.sec-achievements .achievementsWrap .achievementsTxt .achievementsBox h4,
section.sec-achievements .achievementsWrap .achievementsTxt .achievementsBox p,
section.sec-strengths .strengthsWrap .strengthsList > li dl dt, 
section.sec-strengths .strengthsWrap .strengthsList > li dl dd,
section.sec-news .newsListWrap .newsListSlider a .newsContents .newsTitle,
section.sec-news .newsListWrap .newsListSlider a .newsContents .newsDetail .newsDate,
section.sec-newPropertyInfo .newPropertyListWrap .newPropertyInfoSlider a .newPropertiesListDetail .priceText .num,
section.sec-newPropertyInfo .newPropertyListWrap .newPropertyInfoSlider a .newPropertiesListDetail .priceText,
section.sec-newPropertyInfo .newPropertyListWrap .newPropertyInfoSlider a .newPropertiesListDetail .detailWrap > p,
section.sec-newPropertyInfo .newPropertyListWrap .newPropertyInfoSlider a .newPropertiesListDetail .detailTxt,
section.sec-newPropertyInfo .newPropertyListWrap .newPropertyInfoSlider a .newPropertiesListDetail .viewmoreWrap .more,
section.sec-Search .tabSearchWrap .tabSearchContents .conditionalSelectionWrap .titleWrap h4,
.navScrollWrapBox .nav-scroll .pagejumpContents .pagejumpList ul li a
{
  color: var(--Soutetsu-Navy, #FFF);
}
section.sec-news .newsListWrap .newsListSlider a .newsContents .newsDetail .newsCategory {
  border: 1px solid var(--NICE_green, #8E8E8E);
  color: var(--NICE_green, #fff);
}
section.sec-news .newsListWrap .newsListSlider a .newsContents .newsDetail {
  border-top: 1px solid var(--NICE_green, #8E8E8E);
}
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents .tabContentsWrap > .searchLeft .searchCheckWrap .checkTxt p,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents .tabContentsWrap > .searchLeft .searchCheckWrap .searchDetailBox h4,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents#tab-time .searchLeft .stationTxt,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents#tab-time .searchLeft .searchDetailBox .accordionWrap .accordionDetailWrap .accordionDetail > li > dl dt,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents .tabContentsWrap > .searchRight .accordionDetail .accordionDetailBox .dropdownList > li dl dd .checkbox .checkboxLabel,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents#tab-time .searchLeft .searchDetailBox .accordionWrap .accordionDetailWrap .accordionDetail > li > dl dd p,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents .tabContentsWrap > .searchRight .accordionDetail .accordionDetailBox
{
    color: #040404;
}
section.sec-ourStaff .staffList > li .text .message,
section.sec-ourStaff .staffList > li .recommend .propertyName,
section.sec-ourStaff .staffList > li .photo .nameBox .name
{
    color: var(--Soutetsu-Navy, #040404);
}
footer {
  background: #000;
}
.bgGreen , section.sec-contents-nav .contentsList li.green > a {
  background: #1c351f;
}
.bgWhite , section.sec-achievements,
section.sec-news .newsListWrap .splide__arrows .splide__arrow,
section.sec-newPropertyInfo .newPropertyListWrap .splide__arrows .splide__arrow,
section.sec-newPropertyInfo .newPropertyListWrap .newPropertyInfoSlider a .newPropertiesListDetail .viewmoreWrap .line
{
  background: #4A4A4A;
}
.bgRightGreen
{
  background: #4A4A4A;
}
section.sec-strengths .strengthsWrap .strengthsList > li {
  background: #061303;
}
section.sec-Search .tabSearchWrap .tabSearchContents .conditionalSelectionWrap .typeWrap {
  background: none;
}
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .horizontal > li.active a
{
  background: #1c351f;
}
@media (min-width: 768px) {
section.sec-pagejump details .pagejumpContents .pagejumpList li a {
  font-size: min(1.038961039vw, 13px);
}
}
@media only screen and (max-width: 1024px) {
    section.sec-pagejump details::before,
    section.sec-pagejump details[open]::after {
    top: 20px;
    right: 20px;
  }
}
section.sec-contents-nav .contentsOther p span {
  color: var(--NICE_green, #edd601);
}
a.linkBtn {
  background: #36663A;
}
section.sec-achievements .achievementsWrap .achievementsTxt .achievementsBox p .num {
  color: var(--NICE_green, #f6dd00);
}
a.linkBtn.black::before,
section.sec-achievements .achievementsWrap .achievementsTxt .achievementsBox h4::after,
section.sec-news .newsLinkWrap ul > li > a .newsLink .viewmoreWrap .line::before,
section.sec-newPropertyInfo .newPropertyListWrap .newPropertyInfoSlider a.is-new .imgWrap::after,
section.sec-ourStaff .staffList > li .recommend figure figcaption {
  background: #fff;
}
section.sec-achievements .achievementsWrap .achievementsTxt .achievementsBox {
  border-bottom: 6px solid #fff;
}
@media (hover: hover) and (pointer: fine) {
  .navScrollWrapBox .nav-scroll .pagejumpContents .btnList li a.black:hover,
      section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents .tabContentsWrap .submitWrap .submitBtn:hover,
      a.linkBtn:hover.black,
    section.sec-ourStaff .niceValuePlusWrap a .niceValuePlusLink .viewmoreWrap .line::before {
    background: #fff;
  }
}
.fltBTT::after { color: #7d7d7d; }

/* ========================================================= */
/* ページジャンプ (sec-pagejump) のスタイル調整 - FIXEDで重ねる */
/* ========================================================= */

/* ★ 修正: position: fixed で画面上部に固定し、メインビジュアルの上に重ねる ★ */
section.sec-pagejump { 
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    z-index: 100; /* 最前面に表示 */
    padding: 0; /* 元の padding をリセット */
    /* 通常は非表示だが、詳細は開く */
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
}

/* ページジャンプ全体に半透明の背景を適用 */
section.sec-pagejump details {
    background: rgba(0, 0, 0, 0.2); /* 黒の半透明 (透過率30%) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 下部に薄い境界線 */
    margin: 0;
    width: 100%;
}

/* ページジャンプのタイトルの調整 (文字色を白に) */
section.sec-pagejump details summary {
    color: #fff;
    padding: 16px 40px; /* PCでのパディング調整 */
    font-size: 20px;
    background: transparent;
}

/* ページジャンプ内のリンクと文字色を白に調整 */
section.sec-pagejump details .pagejumpContents,
section.sec-pagejump details .pagejumpContents * {
    color: #fff !important; /* リスト内の全テキストを強制的に白に */
}

/* ========================================================= */
/* メインビジュアル (sec-kv) スタイル */
/* ========================================================= */

/* メインコンテンツ全体をヘッダーの高さ分下げます (ヘッダーの高さが不明なため、一旦 70px と仮定) */
main#pxBase {
    padding-top: 40px; /* body/main の padding-top はリセット */
}

/* 全体をビューポートの高さ（全画面）に設定 */
section.sec-kv {
    height: 100vh;
    padding: 0 !important;
    background-color: #000;
    position: relative; /* 子要素の絶対配置の基準となる */
    z-index: 10;
}

/* kvWrap を全画面に固定 */
section.sec-kv .kvWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* メインビジュアルのコンテナを絶対配置で全画面に */
section.sec-kv .kvWrap .kvImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 画像をコンテナ全体に表示し、トリミング */
section.sec-kv .kvWrap .kvImg .kv,
section.sec-kv .kvWrap .kvImg .kv img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* object-fit: cover で画像をトリミングし、コンテナに合わせる */
section.sec-kv .kvWrap .kvImg .kv img.object-fit-cover {
    object-fit: cover !important;
}

/* キャッチコピーのコンテナ h2 全体にフォントと装飾を適用 */
section.sec-kv .kvWrap .kvTxt h2 {
    font-family: "Noto Serif JP", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

/* キャッチコピーの各行の背景を透明にする */
section.sec-kv .kvWrap .kvTxt h2 span {
    display: inline-block;
    padding: 0;
    background: none;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    color: #fff;
    letter-spacing: 0.05em;
}

/* キャッチコピーの位置調整 (上部に移動) */
section.sec-kv .kvWrap .kvTxt {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
    text-align: center;
    justify-content: center !important;
}

/* 1行目 (32px) - 2行目との間隔を調整 */
section.sec-kv .kvWrap .kvTxt h2 span:nth-of-type(1) {
    font-size: 32px;
    display: block;
    margin-bottom: 20px;
}

/* 2行目以降 (18px) - 2, 3行目間の狭い行間を維持 */
section.sec-kv .kvWrap .kvTxt h2 span:nth-of-type(n+2) {
    font-size: 18px;
    display: block;
    line-height: 1.2;
    margin-top: 0.1em;
}

/* ========================================================= */
/* マップバッジとボタンの調整 */
/* ========================================================= */

section.sec-kv .kvWrap .kvImg .badge {

    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 3;
    max-width: 424px;
    opacity: 0.8;
}

section.sec-kv .kvWrap .kvBtn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

section.sec-kv .kvWrap .kvBtn a.linkBtn {
    //background: #1E2549;
    border: 1px solid #c6b37e;
}
section.sec-kv .kvWrap .kvBtn a.linkBtn .btnText {
    color: #fff;
    font-size: 110%;
}
section.sec-kv .kvWrap .kvBtn a.linkBtn::before {
    background: #36663A;
}

section.sec-kv .kvWrap .kvBtn a.linkBtn:hover {
    background: #36663A;
    color: #1E2549;
}
section.sec-kv .kvWrap .kvBtn a.linkBtn:hover .arrow svg {
    fill: #1E2549;
}
.navScrollWrapBox .nav-scroll {
  background: #061303;
}
/* ========================================================= */
/* SP時の調整 */
/* ========================================================= */

@media only screen and (max-width: 1024px) {
    /* SP時はメインコンテンツの padding-top をリセット */
    main#pxBase {
        padding-top: 0 !important;
    }

    /* SP時は sec-pagejump が header の下に来るように調整 */
    section.sec-pagejump {
        top: 69px; /* header の高さに合わせる */
        background: rgba(0, 0, 0, 0);
    }

    section.sec-kv .kvWrap .kvImg .badge {
        bottom: 20px;
        right: 20px;
    }
}
@media only screen and (max-width: 767px) {
        section.sec-kv .kvWrap .kvImg .badge {
        bottom: 50px;
            width: 75%;
    }
    /* SP時のキャッチコピー位置調整 */
    section.sec-kv .kvWrap .kvTxt {
        top: 50%;
        padding: 0 20px;
    }

    /* SP時の1行目サイズとマージン */
    section.sec-kv .kvWrap .kvTxt h2 span:nth-of-type(1) {
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    /* SP時の2行目以降サイズ (16px) */
    section.sec-kv .kvWrap .kvTxt h2 span:nth-of-type(n+2) {
        font-size: 16px;
        line-height: 1.2;
        margin-top: 0.1em;
    }

    /* SP時のページジャンプの調整 */
    section.sec-pagejump details summary {
        padding: 12px 20px;
    }
    section.sec-pagejump details .pagejumpContents {
        padding: 0 20px 12px;
    }
}
/* ========================================================= */
/* 英文サブコピーの追加スタイル */
/* ========================================================= */

/* 英文サブコピーのスタイル */
section.sec-kv .kvWrap .kvTxt h2 .en-sub {
    /* Cormorant SC は px-common.css で読み込まれています */
    font-family: 'Cormorant SC', serif; 
    font-size: 22px; /* 小さめのフォントサイズ */
    font-weight: 300;
    letter-spacing: 0.15em; /* 文字間隔を広めに */
    display: block;
    line-height: 1.5; 
    margin-top: 0px; /* 「人生の、本質へ。」との間隔 */
    margin-bottom: 20px; /* 2行目以降（日本語）との間隔 */
}

/* 1行目の日本語（「人生の、本質へ。」）のスタイルを微調整 */
section.sec-kv .kvWrap .kvTxt h2 span:nth-of-type(1) {
    margin-bottom: 0; /* 英文サブコピーが間に来たため、一旦リセット */
}


/* 2行目以降（日本語）のスタイルを調整 */
section.sec-kv .kvWrap .kvTxt h2 span:nth-of-type(n+2) {
    /* 英文サブコピーの後に続く2行目以降の日本語 */
    font-size: 18px;
    margin-top: 0.1em; /* 英文後のマージンをリセットし、間隔を詰める */
    line-height: 1.6em;
}


/* ========================================================= */
/* SP時の調整 */
/* ========================================================= */

@media only screen and (max-width: 767px) {
    /* SP時の英文サイズ調整 */
    section.sec-kv .kvWrap .kvTxt h2 .en-sub {
        font-size: 14px;
        margin-top: 8px;
        margin-bottom: 10px;
    }

    /* SP時の1行目サイズ */
    section.sec-kv .kvWrap .kvTxt h2 span:nth-of-type(1) {
        font-size: 24px;
        margin-bottom: 0; 
    }
}
/* ========================================================= */
/* メインビジュアルテキストのアニメーション (修正版) */
/* ========================================================= */

/* 1. アニメーションキーフレームの定義 (変更なし) */
@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(30px); /* 30px 下からスタート */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 元の位置へ */
    }
}

/* ★★★ 修正箇所：初期状態の設定 ★★★ */
/* 2. アニメーション開始前の初期状態を設定 */
/* すべてのテキスト（h2 span）を非表示にし、少し下に配置します。 */
.kvTxt h2 span, .kvTxt.is-animated h2 span.en-sub {
    display: block; /* transformを適用するために必要 */
    opacity: 0 ; /* アニメーション開始まで非表示 */
    transform: translateY(30px); /* アニメーションの開始位置（下方向） */
}

/* 3. アニメーションを適用するコンテナのクラス */
/* このクラスがJavaScriptで追加されるとアニメーションが開始し、上記設定から切り替わります。 */
.kvTxt.is-animated h2 span {
    animation-name: slideInFromBottom;
    animation-duration: 1.0s; /* アニメーション時間 */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards; /* 終了時の状態（opacity: 1, translateY(0)）を保持 */
}

/* 4. 各行に遅延を設定して順番に表示 (変更なし) */
.kvTxt.is-animated h2 span:nth-of-type(1) {
    animation-delay: 0.0s; 
}
.kvTxt.is-animated h2 span.en-sub { /* 英文サブコピー */
    //animation-delay: 0.3s;
}
.kvTxt.is-animated h2 span:nth-of-type(2) { /* 3行目（日本語） */
    animation-delay: 0.6s;
}
.kvTxt.is-animated h2 span:nth-of-type(3) { /* 4行目（日本語） */
    animation-delay: 0.9s;
}
/* ========================================================= */
/* メインビジュアル スライダーアニメーション (フェード＆ズーム切り替え) */
/* ========================================================= */

/* 新しいズームインアニメーション */
@keyframes zoomIn {
    0% {
        transform: scale(1.0); /* 最初は等倍 */
    }
    100% {
        transform: scale(1.0); /* 15%拡大 */
    }
}

/* 画像が切り替わる際にズームアウトしながらフェードアウトするアニメーション */
@keyframes fadeOutZoom {
    0% {
        opacity: 1;
        transform: scale(1.0);
    }
    100% {
        opacity: 0.1;
        transform: scale(1.0); /* 少し拡大しながら消える */
    }
}

/* Splideのトラックとリストにアニメーションを可能にする設定 */
.sec-kv .kvSlider,
.sec-kv .kvSlider .splide__track,
.sec-kv .kvSlider .splide__list,
.sec-kv .kvSlider .splide__slide,
.sec-kv .kvSlider .kv {
    height: 100% !important;
}

/* 全ての画像に共通の初期スタイル */
.sec-kv .kvSlider .splide__slide img {
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
    transform: scale(1.0); /* デフォルトは等倍 */
    transition: none; /* Splideのデフォルトトランジションを無効化 */
    animation-fill-mode: forwards; /* アニメーション終了時の状態を保持 */
}

/* アクティブなスライドの画像にズームインアニメーションを適用 */
.sec-kv .kvSlider .splide__slide.is-active img {
    animation-name: zoomIn;
    animation-duration: 8s; /* ズームインにかける時間 */
    animation-timing-function: linear;
}

/* 切り替わり時に退場するスライドにズームアウト＆フェードアウトアニメーションを適用 */
.sec-kv .kvSlider .splide__slide.is-leaving img {
    animation-name: fadeOutZoom;
    animation-duration: 3.0s; /* フェードアウトにかける時間 */
    animation-timing-function: ease-out;
}
section.sec-contents-nav .contentsNavWrap,
section.sec-ourStaff .niceValuePlusWrap,
section.sec-ourStaff .ourStaffSubBox {
  border-top: none;
}
section.sec-contents-nav .contentsList li > a dl dt,
section.sec-Search .tabSearchWrap .tabSearchContents#searchCondition .tabSearch .tabContents .tabContentsWrap .submitWrap .submitBtn {
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
section.sec-storeInfo .storeInfoWrap .storeInfoDetail .storeAddress p {
  font-size: 14px;
}