/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.3.1780311399
Updated: 2026-06-01 19:56:39
*/

/* =========================================================
   目次
   ---------------------------------------------------------
   01. 変数・基本設定
   02. コンテナ余白
   03. 画面サイズ別の表示・非表示
   04. 日本語段落の左寄せ・均等割り付け・禁則処理
   05. ヘッダー、メニュー
   06. ファーストビュー
   07. キャンペーン文字列・ゴールド装飾英字見出し
   08. TOPページ・オーバーラッピングレイアウト
   09. コンタクトフォーム
   10. メインフッター（Fat Footer）領域
   11. 固定フッター領域
   12. フッタードロワー（offcanvas）
   13. TOPへ戻るボタンの位置
   14. 居室タイプの切り替えタブの幅・見取り図下の表スタイル
   =========================================================
   物件：ブルックサイドレジデンス木場（br-kiba.com）
   制作：さとごデザイン
   更新：2026年7月1日
*/

/* =========================================================
01. 変数・基本設定
========================================================= */
:root {
    /* PCヘッダーの高さ */
    --header-height: 106.87px;

    /* ブレークポイント */
    --breakpoint-tb: 768px;
    /* タブレットの分岐点 */
    --breakpoint-sp: 480px;
    /* スマホの分岐点 */

    /* カラー */
    --color-gold: #d4af37;
    --color-warm-gold: #B8975A;
    --color-burgundy: #8B2635;
    --color-dark: #1a1a1a;
    --color-text: #333333;
    --main-color: #1d3557;
    /* 紺色 */
    --conversion-orange: #e94600;
    /* CVボタンの色 */
    --bg-color-gray: #f0eef2;
    /* 薄い赤みあるグレー（背景用） */

    /* フォントファミリー */
    --font-heading: 'Noto Serif JP', serif;
    --font-body: 'Noto Sans JP', sans-serif;
    --font-en: 'Cormorant Garamond', serif;


    /* フォントサイズ */
    --fs-heading-ja: 2.0rem;
    --fs-heading-en: 0.75rem;
    --fs-body: 1.0rem;

    /* スペーシング */
    --section-padding: 80px 0;
}

/* Astraリンク文字色を上書き*/
a {
    --ast-global-color-0: #0000EE;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* =========================================================
02. コンテナ余白
========================================================= */
/* Elementor コンテナのデフォルトpadding上書き */
.e-con-full,
.e-con>.e-con-inner {
    --padding-block-start: 50px;
    --padding-block-end: 50px;
}

/* 上記の設定の例外 */
#post-477 .elementor-element-6142171.e-flex>div>.e-con-full,
.no-padding-top,
.no-padding-top>.e-con-inner {
    --padding-block-start: ;
    /* 空文字リセット */
}

.no-padding-bottom,
.no-padding-bottom>.e-con-inner {
    --padding-block-end: ;
    /* 空文字リセット */
}

@media (max-width: 768px) {

    .e-con.mobile-no-padding-top>.e-con-inner,
    .mobile-no-padding-top {
        --padding-block-start: ;
        /* 空文字リセット */
    }

    .mobile-no-padding-bottom,
    .e-con>.e-con-inner.mobile-no-padding-bottom,
    .mobile-no-padding-bottom>.e-con-inner {
        --padding-block-end: ;
        /* 空文字リセット */
    }
}

/* =========================================================
03. 画面サイズ別の表示・非表示
========================================================= */

/* 1. パソコン (1025px以上) で非表示 */
@media (min-width: 1025px) {
    .none-pc {
        display: none !important;
    }
}

/* 2. タブレット (768px以上 〜 1024px以下) で非表示 */
@media (min-width: 768px) and (max-width: 1024px) {
    .none-tb {
        display: none !important;
    }
}

/* 3. スマートフォン (768px以下) で非表示 */
@media (max-width: 768px) {
    .none-sp {
        display: none !important;
    }
}

/* =========================================================
04. 日本語段落の左寄せ・均等割り付け・禁則処理
========================================================= */
.ja-justify {
    /* 両端揃え（＝均等割り付け） */
    text-align: justify;

    /* 最終行だけは左揃え（Wordの「左寄せ・均等割付」に相当） */
    text-align-last: left;

    /* 日本語の均等割付の方法（対応ブラウザで有効） */
    text-justify: inter-character;
    /* 旧Edge/IEは inter-ideograph */

    /* 日本語の禁則処理（句読点の行頭/行末制御など） */
    line-break: strict;
    -webkit-line-break: strict;
    /* WebKit系向けの補助 */

    /* 変な単語分割を避ける（CJKは通常これでOK） */
    word-break: normal;

    /* 長い英数字/URLだけは折り返したいときの保険（任意） */
    overflow-wrap: break-word;

    /* Safariで句読点ぶら下げ許可（任意・対応ブラウザのみ） */
    hanging-punctuation: allow-end;
}

/* =========================================================
05. ヘッダー、メニュー
========================================================= */
@media (max-width: 768px) {
    :root {
        --header-height: 0px;
        /* モバイルではヘッダー非表示 */
    }
}

html {
    height: 100dvh;
    box-sizing: border-box;
    font-size: 100%;
    /* FVやページ内リンクのずれを補正（余白はお好み（20px）） */
    scroll-padding-top: calc(var(--header-height) + 20px);
}

#masthead {
    position: sticky !important;
    top: 0;
    z-index: 999;

}

/* desktopヘッダーの表示/非表示をデフォルトより狭くする */
@media (min-width: 769px) {
    #ast-desktop-header {
        display: block;
    }

    .ast-header-break-point #ast-mobile-header {
        display: none;
    }
}

@media (max-width: 768px) {
    #ast-desktop-header {
        display: none;
    }

    .ast-header-break-point #ast-mobile-header {
        display: none;
        /* モバイルヘッダーは全く表示せず、下部固定フッターを表示 */
    }
}

/* 画面幅小でヘッダータイトル非表示 */
@media (max-width: 1111px) {
    .ast-site-title-wrap {
        display: none;
    }
}

#ast-mobile-header>.ast-main-header-wrap.main-header-bar-wrap .site-header-primary-section-left {
    padding-left: 10px;
    /* モバイル画面で、ロゴマークの左余白をあける */
}

/* ヘッダー下のナビゲーションメニューを画面幅を狭くしても開かないようにする */
/* 指定幅以上ではメニューを横並びで表示 */
@media (min-width: 769px) {
    #ast-desktop-header>ast-below-header-wrap>div {
        height: 30px;
    }

    #ast-hf-menu-1 {
        display: flex !important;
        flex-direction: row !important;
        background-color: initial;
    }

    #ast-hf-menu-1.stack-on-mobile {
        flex-direction: row !important;
    }

    #ast-hf-menu-1.stack-on-mobile li {
        width: auto !important;
    }

    /* ヘッダー下の高さが50pxになるのを回避 */
    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
        line-height: 30px !important;
    }
}

/* =========================================================
06. ファーストビュー
========================================================= */
/* 子コンテナに背景画像がセットされている */
article>.entry-content>.elementor>.fv-section {
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 0;
    /* 背景画像とコンテナのスキマを 0 に */
    padding-bottom: 0;
}

/* FV画像サイズよりも画面幅が狭くなった時（モバイル幅まで） */
@media (max-width: 1440px) and (min-width: 768px) {
    article>.entry-content>.elementor>.fv-section>.e-child {
        padding-top: 44.4%;
        height: auto;
        min-height: unset;
        background-size: cover;
        background-position: center center;
    }
}

/*
 *  モバイル表示でのFV領域を画像にピッタリに合わせる（不要な余白を作らない）
 *  親要素（.elementor-element-8ee7337）に設定 
*/
@media (max-width: 768px) {
    .elementor-element-8ee7337 {
        min-height: 0 !important;
        height: auto !important;
        /* 1136 ÷ 750 × 100 = 151.5% */
        padding-top: 151.5% !important;
        padding-bottom: 0 !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* =========================================================
07. キャンペーン文字列・ゴールド装飾英字見出し
========================================================= */
/* キャンペーンセクションの上下余白 */
#post-1415>div>div>.elementor-element-3adb264.campaign.e-con-full {
    padding: 45px;
}

/* 限定キャンペーン文字列用 */
.e-con-inner>.campaign>.e-con-inner>.e-con-full>.heading-label>h2 {
    font-weight: 600;
}

.campaign .elementor-widget:last-child>h2 {
    max-width: 57vw;
}

/* 3行を囲むブロックの上下余白 */
div.elementor-element.elementor-element-5178d82.campaign.e-flex.e-child>.e-con-inner {
    padding: 0;
}

/* 3行の間隔 */
.campaign>.e-con-inner>.e-child {
    padding: 0 10px;
}

@media (max-width: 768px) {

    #post-1415 .elementor-element-3adb264.campaign.e-con-full,
    .elementor-element-3adb264.e-con>.e-con-inner {
        padding: 30px 0 !important;
    }
}

/* 見出し下に装飾的につける英語見出し */
.heading-label,
.heading-label>h2,
.heading-label>h3,
.heading-label>h4 {
    display: block;
    font-family: 'Cormorant Garamond', 'Trajan Pro', serif;
    font-size: 1.0rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    background: linear-gradient(90deg,
            #c9a84c 0%,
            #e2c46a 40%,
            #f5e09a 60%,
            #e2c46a 80%,
            #c9a84c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================================
08. TOPページ ・オーバーラッピングレイアウト
========================================================= */
/* ========================================================= 
   「ACCESS」「INTERIOR」セクション
   ========================================================= */

/* 最外コンテナ */
.section-access,
.section-interior {
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* bgimg-wrapper 背景画像のラッパー */
.wrapper-all {
    position: relative;
    padding: 0;
    width: 100%;
}

.wrapper-all>.e-con-inner {

    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 背景画像コンテナを右寄せ固定 */
.top-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(1140px * .75 + (100% - 1140px) / 2);
    height: 100%;
    min-height: 600px;
}

/* 背景画像の表示設定 */
.top-bg-image:not(.elementor-motion-effects-element-type-background),
.top-bg-image>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* テキストブロック：白背景でオーバーラップ */
.outer-text-box {
    position: relative;
    z-index: 1;
    width: auto !important;
}

/* text-box-wrapper */
.text-box-wrapper {
    flex-direction: row;
    justify-content: flex-start;
    width: auto !important;
}

/* text-box：白背景 */
.text-box {
    background: #fff;
    padding: 40px;
    width: 47%;
    max-width: 47%;
    position: relative;
    z-index: 1;
}

/* aタグ化したtext-boxのリンクスタイルをリセット */
.text-box,
.text-box:hover,
.text-box:visited,
.text-box:active {
    color: inherit !important;
    text-decoration: none !important;
}

.text-box * {
    text-decoration: none !important;
}

.section-access .outer-text-box .heading-label>h2 {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {

    /* セクション全体に最低高さを確保 */
    .section-access,
    .section-interior {
        min-height: 700px;
    }

    /* 背景画像をモバイルで全幅・絶対配置に */
    .top-bg-image {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 700px;
        z-index: 0;
    }

    .section-access .top-bg-image:not(.elementor-motion-effects-element-type-background),
    .section-access .top-bg-image>.elementor-motion-effects-container>.elementor-motion-effects-layer {
        background-size: 198% auto !important;
        background-position: 89% -29% !important;
    }

    .section-interior .top-bg-image:not(.elementor-motion-effects-element-type-background),
    .section-interior .top-bg-image>.elementor-motion-effects-container>.elementor-motion-effects-layer {
        background-size: 100% auto !important;
        background-position: 0% 0% !important;
    }


    /* テキストブロックを背景の上に重ねる */
    .outer-text-box {
        position: relative;
        z-index: 1;
        margin-top: 150px;
        /* 上部に少し地図を見せる余白 */
    }

    /* text-box-wrapper をモバイルで100%幅に */
    .text-box-wrapper {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 4c7d485（text-box-wrapperの親）もモバイルで100% */
    .elementor-element-4c7d485 {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }

    /* text-box自体も画面幅に収める */
    .text-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 40px 10px;
    }

}

/* ========================================================= 
   「AMENITIES」「LOCATION」セクション
   ========================================================= */
/* 最外コンテナ */
.section-amenities,
.section-location {
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* 背景画像コンテナを右寄せ固定 */
.top-bg-image-left {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(1140px * .75 + (100% - 1140px) / 2);
    height: 100%;
    min-height: 600px;
}

/* 背景画像の表示設定 */
.top-bg-image-left:not(.elementor-motion-effects-element-type-background),
.top-bg-image-left>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-amenities .text-box-wrapper,
.section-location .text-box-wrapper {
    justify-content: flex-end !important;
}

.section-amenities .outer-text-box .heading-label>h2,
.section-location .outer-text-box .heading-label>h2 {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {

    /* セクション全体に最低高さを確保 */
    .section-amenities,
    .section-location {
        min-height: 700px;
    }

    /* 背景画像をモバイルで全幅・絶対配置に */
    .top-bg-image-left {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 700px;
        z-index: 0;
    }

    .section-amenities .top-bg-image-left:not(.elementor-motion-effects-element-type-background),
    .section-amenities .top-bg-image-left>.elementor-motion-effects-container>.elementor-motion-effects-layer {
        background-size: 138% auto !important;
        background-position: 67% -16% !important;
    }

    .section-location .top-bg-image-left:not(.elementor-motion-effects-element-type-background),
    .section-location .top-bg-image-left>.elementor-motion-effects-container>.elementor-motion-effects-layer {
        background-size: 100% auto !important;
        background-position: 0% 0% !important;
    }


    /* テキストブロックを背景の上に重ねる */
    .outer-text-box-right {
        position: relative;
        z-index: 1;
        margin-top: 150px;
        /* 上部に少し地図を見せる余白 */
        padding-bottom: 0;
    }

    /* text-box-wrapper をモバイルで100%幅に */
    .text-box-wrapper {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 4c7d485（text-box-wrapperの親）もモバイルで100% */
    .elementor-element-4c7d485 {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }
}

/* =========================================================
09. コンタクトフォーム
========================================================= */
.wpcf7>form>p>label>.required {
    color: #ff1c18;
    /* 【必須】を赤に */
}

.wpcf7>form>p>label {
    font-weight: 600;
    /* 各項目タイトルをやや太字 */
}

/* 送信ボタン */
input[type="submit"] {
    color: #ffffff;
    border: 1px solid #5a1020;
    background: linear-gradient(0deg,
            #6B1C29 0%,
            #6B1C29 45%,
            #b03045 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
    padding: 15px 30px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    transition: filter 0.2s;
    cursor: pointer;
}

input[type="submit"]:hover {
    filter: brightness(1.15);
}

/* disabled：グレーアウト */
.wpcf7 .wpcf7-submit:disabled {
    background: #999999;
    border-color: #777777;
    color: #cccccc;
    cursor: not-allowed;
    filter: none;
}

/* =========================================================
10. メインフッター（Fat Footer）領域
========================================================= */
/* モバイル画面でボタン幅をいっぱいに広げる */
@media (max-width: 768px) {

    .hfe-before-footer-wrap .e-flex .e-con-full a,
    .hfe-before-footer-wrap .e-flex .elementor-widget-button>a {
        width: 100%;
    }
}

#page>div.hfe-before-footer-wrap>div>div>div>div.elementor-element.elementor-element-611e8b0.e-flex.e-con-boxed.e-con.e-child>div>div.elementor-element.elementor-element-2b32c9c.e-con-full.e-flex.e-con.e-child {
    padding-top: 20px;
}

/* 中央のメニュー文字列が折り返されないようにする */
#page>.hfe-before-footer-wrap .e-con-boxed .e-con-inner {
    max-width: 100%;
    white-space: nowrap;
}

#page>.hfe-before-footer-wrap .e-con-boxed nav>ul>li {
    width: 100%;
}

#page>.hfe-before-footer-wrap .e-con-boxed nav>ul>li>a {
    justify-content: flex-start;
}

/* 中央のナビゲーションメニュー各項目の先頭に「—」を付ける */
.hfe-before-footer-wrap nav>ul>li>a::before {
    content: "— ";
    position: static !important;
    margin-right: 20px;
    color: #fff;
    opacity: 1 !important;
}

/* =========================================================
11. 固定フッター領域
========================================================= */
#colophon>.site-below-footer-wrap {
    display: none;
}
/* PC：非表示、モバイル：下部固定表示 */
@media (max-width: 768px) {
    #colophon>.site-below-footer-wrap {
        display: block;
        position: fixed;
        bottom: 0;
        background-color: #0a1810;
        padding: 0;
        z-index: 99999;
    }
}

#colophon>.site-below-footer-wrap .site-footer-below-section-1 {
    margin: 0;
}

/* ボタンの間隔をとる設定 */
/* ボタングループの親要素をflexboxに */
.ast-builder-html-element p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* ボタン間の間隔 */
    padding: 0 4px;
}

/* 画面幅が広い場合は間隔を広げる */
@media (min-width: 400px) {
    .ast-builder-html-element p {
        gap: 8px;
        padding: 0 8px;
    }
}

@media (min-width: 480px) {
    .ast-builder-html-element p {
        gap: 12px;
        padding: 0 12px;
    }
}

/* =========================================================
12. フッタードロワー（offcanvas）
========================================================= */
#footer-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

#footer-drawer.open {
    display: block;
}

#footer-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

#footer-drawer-menu {
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    background: #F5F0E8;
    padding: 24px 24px 50px 24px;
    border-radius: 10px;
}

#footer-drawer-close {
    display: block;
    margin-left: auto;
    background: #F5F0E8;
    border: none;
    color: #454545;
    font-size: 13px;
    letter-spacing: 0.1em;
    cursor: pointer;
    margin-bottom: 16px;
}

.footer-drawer-nav {
    margin: 0;
}

.footer-drawer-nav li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #d6cdbe;
}

.footer-drawer-nav li a {
    display: block;
    padding: 16px 8px;
    color: #615c4d;
    letter-spacing: 0.1em;
    text-decoration: none;
    font-size: 14px;
}

.footer-drawer-nav li a:hover {
    color: rgba(196, 168, 100, 0.9);
}

/* =========================================================
13. TOPへ戻るボタンの位置（モバイル画面で固定フッターに隠れないように）
========================================================= */
@media (max-width: 768px) {
    #ast-scroll-top {
        right: 9px;
        bottom: 65px;
    }
}

.floor-plan-specs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}


/* =========================================================
14. 居室タイプの切り替えタブの幅、見取り図の下の表のスタイル
========================================================= */
@media (max-width: 768px) {
    #post-1262 .e-con-full>.elementor-widget-n-tabs .e-n-tabs-heading>button {
        padding: 12px 15px;
    }

    .floor-plan-specs th,
    .floor-plan-specs td {
        padding: 6px 12px;
        border: 1px solid var(--ast-border-color);
        text-align: left;
        vertical-align: middle;
    }

    .floor-plan-specs th {
        width: 20%;
        color: var(--main-color);
        font-weight: 500;
        background: transparent;
    }

    .floor-plan-specs td {
        color: var(--color-text);
    }
}