/*
このファイルがあると、プラグインのinazuma-front-style.cssとともに読み込まれます。
            //【追加スタイルスイッチ機能】
            // プレゼン用やサンプル用に、クエリで一時切り替えを可能にする。
            // 通常ならstyle.cssに書くべきテーマのスタイルを、
            // テーマディレクトリに別ファイルで配置する。
            // このようにクエリ追加することで一時的切り替えを可能にする。
            // https://template01.wisesips.net/?styletype=black
            // https://template01.wisesips.net/?styletype=blue

            // ファイル配置について。テーマディレクトリ内に置く。
            // ファイル名：デフォルト
            // inazuma-front-style-ex-default.css
            // ファイル名：stypetype=hogeのとき
            // inazuma-front-style-ex-hoge.css
            // このように、任意の名前を付けてスイッチ可能に。
            
            // いちどスイッチするとセッションに保存して、そのブラウザでは状態が維持される。
            // つまり画面遷移したとしても残る。
            // デフォルトに戻すときは ?styletype=default とし直す。
*/


/* ============================================
   カラー・共通設定
   ============================================ */
:root {
    /* ----------------------------------------
    基本カラー
    ---------------------------------------- */

    /* メインカラー */
    --color-main: #002547;

    /* アクセントカラー */
    --color-accent: #C49A3A;

    /* テキスト */
    --color-text: #2D3748;
    --color-text-invert: #FFFFFF;

    /* 背景 */
    --color-bg: #FFFFFF;
    --color-bg-light: #F7F7F7;

    /* 背景装飾テキスト */
    --color-bg-text-light: #F8F9FA;
    --color-bg-text-dark: #375068;

    /* CTA */
    --color-cta: #B48928;

    /* ----------------------------------------
    背景グラデーション
    ---------------------------------------- */

    /* 背景グラデーション1 */
    --color-bg-gradient-1-start: #FFFFFF;
    --color-bg-gradient-1-end: #ECECEC;

    /* ----------------------------------------
    ボタン1：ゴールド
    ---------------------------------------- */

    /* 内側グラデーション */
    --button-1-inner-start: #D7AD4E;
    --button-1-inner-end: #AE8321;

    /* 外側グラデーション */
    --button-1-bg-start: #DBB96C;
    --button-1-bg-end: #B28725;

    /* 外側枠線 */
    --button-1-border: #CF9C26;

    /* 丸アイコン内の三角 */
    --button-1-icon: #C19635;


    /* ----------------------------------------
    ボタン2：グレー
    ---------------------------------------- */

    /* 内側グラデーション */
    --button-2-inner-start: #BEBEBE;
    --button-2-inner-end: #777777;

    /* 外側グラデーション */
    --button-2-bg-start: #A7A7A7;
    --button-2-bg-end: #50504F;

    /* 外側枠線 */
    --button-2-border: #727272;

    /* 丸アイコン内の三角 */
    --button-2-icon: #808080;


    /* ----------------------------------------
    ボタン3：ネイビー
    ---------------------------------------- */

    /* 内側グラデーション */
    --button-3-inner-start: #1A3F60;
    --button-3-inner-end: #00284C;

    /* 外側グラデーション */
    --button-3-bg-start: #3E5D78;
    --button-3-bg-end: #03284A;

    /* 外側枠線 */
    --button-3-border: #052848;

    /* 丸アイコン内の三角 */
    --button-3-icon: #032749;

    /* ----------------------------------------
    ボタン1〜3 共通
    ---------------------------------------- */

    /* 内側枠線 */
    --button-inner-border: #FFFFFF;
    --button-inner-border-width: 0.45px;

    /* 外側枠線 */
    --button-outer-border-width: 1.35px;

    /* 丸アイコン */
    --button-icon-bg: #FFFFFF;

    /* インナーシャドウ */
    --button-inner-shadow:
        inset 0 13.52px 14.28px 0 rgb(255 255 255 / 25%),
        inset 0 1.8px 5.41px 0 rgb(0 0 0 / 25%);

    /* ボタン本体のドロップシャドウ */
    --button-drop-shadow:
        0.45px 2.25px 2.84px 0 rgb(0 0 0 / 25%);

    /* 丸アイコンのドロップシャドウ */
    --button-icon-shadow:
        0.61px 1.22px 2.45px 0 rgb(0 0 0 / 25%);

    /* ----------------------------------------
    ボタン4：立体タイプ
    ---------------------------------------- */

    /* 背景 */
    --button-4-bg: #785B18;

    /* 枠線 */
    --button-4-border: #C49A3A;
    --button-4-border-width: 3.22px;

    /* テキスト */
    --button-4-text: #FFFFFF;

    /* 立体シャドウ */
    --button-4-shadow:
        3.91px 3.91px 0 0 #9D7722;
}


/* ========================================
   SWELL・WP共通パーツ用 カラー適用
   （この下は全部 var(--color-◯) で呼ぶ）
======================================== */

/* ヘッダー（SWELL） */
.l-header__bar {
    background-color: var(--color_main);
    color: var(--color_text_invert);
}

.l-header__bar a {
    color: var(--color_text_invert);
}

.l-header__bar a:hover {
    color: var(--color_main);
}

/* グローバルナビ */
.l-header__gnav .c-gnav li a {
    color: var(--color_header_text);
}

.l-header__gnav .c-gnav li a:hover {
    color: var(--color_main);
}

.l-header__gnav .c-gnav a::after {
    background: var(--color_main);
}

.l-fixHeader__gnav .c-gnav li a:hover {
    color: var(--color_main);
}

/* ボタン共通 */
.btn,
.wp-block-button__link {
    background-color: var(--color_main);
    color: var(--color_text_invert);
}

.btn:hover,
.wp-block-button__link:hover {
    background-color: var(--color_main_light);
}

/* リンク */
a {
    color: var(--color_link);
}

a:hover {
    color: var(--color_link_hover);
}

/* .section-block:nth-of-type(2n+1) {
    background-color: var(--color_bg);
} */

.section-block:nth-of-type(2n) {
    background-color: var(--section_bg_2);
}

/* ========================================
  共通見出し
======================================== */
.top-content .ttl-en,
.contact-area .ttl-en,
.subpage-content .ttl-en {
    color: var(--color_en_heading);
}

.subpage-content .ttl-en-sub {
    color: var(--color_en_heading);
}

.top-content .ttl-jp,
.contact-area .ttl-jp,
.subpage-content .ttl-jp {
    color: var(--color_text);
}

.top-content h3 {
    color: var(--color_main) !important;
}

.subpage-content h3 {
    color: var(--color_text);
}

/* ========================================
  ボタン
======================================== */
/* .btn-design-01 .swell-block-button__link {
    background: var(--btn_bg);
    color: var(--btn_text);
}

.btn-design-01 .swell-block-button__link:hover {
    background: var(--btn_bg_hover);
}

.btn-design-02 .swell-block-button__link {
    color: var(--color_main);
}

.btn-design-02 .swell-block-button__link:hover {
    background-color: var(--btn_bg_white);
    color: var(--color_main) !important;
} */

/* ========================================
  メインビジュアル
======================================== */
.p-mainVisual__slide::after {
    background: var(--mv_overlay_bg);
}

.mv-text .mv-text-maintext {
    color: var(--mv_text_color);
    border-bottom: 1px solid var(--mv_text_underline);
}

.mv-text .mv-text-subtext {
    color: var(--mv_text_color);
}

/* ========================================
  お知らせ
======================================== */
.p-postList__item .p-postList__cat {
    color: var(--color_main);
    border: 1px solid var(--color_main);
    background-color: var(--color_bg);
}

.p-postList__item .p-postList__link:hover {
    background-color: var(--color_bg);
    color: var(--color_link_hover);
}

.p-articleMetas .c-categoryList a {
    color: var(--color_main);
    border: 1px solid var(--color_main);
    background-color: var(--color_bg);
}

/* ========================================
  リストスタイル
======================================== */
/* リストスタイルの背景を白に固定 */
.is-style-border_sm,
.is-style-border_md,
.is-style-border_lg {
    background-color: var(--color_bg);
}

/* ========================================
  SWELL 下層ページタイトルエリア：左パネル＋斜め仕切り＋右写真
======================================== */
/* 左の淡色パネル */
#top_title_area.l-topTitleArea::before {
    background: var(--panel_bg);
}

/* 見出し（H1） */
#top_title_area .c-pageTitle {
    color: var(--color_text_invert);
}

/* 見出しの下線 */
#top_title_area .c-pageTitle::after {
    background: var(--color_text_invert);
}

/* ========================================
  会社概要
======================================== */
.staff_text_wrap .staff {
    border-bottom: 1px solid var(--color_main);
}

.staff_text_wrap .staff span {
    color: var(--color_main);
}


/* ========================================
  よくある質問
======================================== */
/* 質問 */
.inazuma_group.faq_linkgroup .inazuma_cluster_item[class$="_title"] {
    background: var(--faq_bg_question);
}

/* Qバッジ（塗りつぶし） */
.inazuma_group.faq_linkgroup .inazuma_cluster_item[class$="_title"]::before {
    color: var(--color_text_invert);
    background: var(--faq_q_color);
}

/* 回答 */
.inazuma_group.faq_linkgroup .inazuma_cluster_item[class$="_text"] {
    color: var(--color_text_invert);
}

/* Aバッジ（線のみ） */
.inazuma_group.faq_linkgroup .inazuma_cluster_item[class$="_text"]::before {
    color: var(--faq_a_color);
    background: var(--color_bg);
    border: 1px solid var(--faq_a_color);
}


/* ========================================
  プライバシーポリシー
======================================== */
.privacy-policy h3::after {
    background: var(--color_main);
}

/* ========================================
  コンタクトエリア
======================================== */
.contact-area {
    background-color: var(--contact_bg_overlay);
}

.contact-area .l-article {
    background-color: var(--contact_inner_bg);
}

.contact-area .contact-btn a {
    background-color: var(--color_bg);
    color: var(--the_btn_color);
}

.contact-area .contact-btn a:hover {
    color: var(--btn_text);
    background-color: var(--the_btn_color);
    border: 1px solid var(--color_bg);
    color: var(--btn_text) !important;
}

/* ========================================
  フッター
======================================== */
.l-footer {
    background-color: var(--color_bg);
    color: var(--color_text);
}

.l-footer a {
    color: var(--color_main);
}

.l-footer__nav a:hover {
    color: var(--color_text);
}

.copyright {
    color: var(--color_text);
}


/* 
=====================================
  お問い合わせページ
=====================================
*/

.contact-form-inner div {
    border-top: 1px solid var(--contact_border);
}

.contact-form-confirmation .wpcf7-list-item-label {
    border-bottom: 2px solid var(--color_error);
}

.contact-form-btn-send input,
.contact-form-btn-send button {
    background: var(--contact_btn_bg);
    color: var(--color_text_invert);
}

.contact-form-btn-send button:hover {
    background: var(--contact_btn_bg_hover);
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--contact_color_blue);
}

.wpcf7 form.invalid .wpcf7-response-output {
    border-color: var(--color_error);
    color: var(--color_error);
}

.wpcf7 form .acceptance-privacy-policy {
    background-color: var(--contact_privacy_bg);
}

.wpcf7-not-valid-tip {
    color: var(--color_error);
}

.contact-recapcha {
    color: var(--contact_recapcha_text);
}

/* モーダル */
#confirm-modal {
    background: var(--contact_modal_overlay_bg);
}

.modal-box {
    background: var(--color_bg_white);
    box-shadow: 0 4px 20px var(--contact_modal_shadow);
}

.modal-heading {
    background: var(--contact_color_blue);
    color: var(--color_text_invert);
}

#confirm-buttons button {
    box-shadow: var(--contact_btn_shadow);
}

#back-btn {
    background: var(--contact_back_btn_bg);
    color: var(--contact_back_btn_text);
}

#back-btn:hover {
    background: var(--contact_back_btn_bg_hover);
}

#final-submit-btn {
    background: var(--contact_color_blue);
    color: var(--color_bg_white);
}

#final-submit-btn:hover {
    background: var(--contact_color_blue);
}


/* 
=====================================
  物件一覧
=====================================
*/
.top-property .top-property-inner h3 {
    border-bottom: 1px solid var(--estate_border);
}

.post_content .estate-list-wrap .estate-list-block,
.custom-estate-list .estate-list-block {
    background: var(--estate_bg_white);
    border: 1px solid var(--estate_border);
}

.estate-list-img {
    background: var(--estate_img_bg);
}

.estate-list-block h3 {
    color: var(--color_text);
}

.estate-list-category {
    background-color: var(--estate_category_bg);
    color: var(--estate_category_text);
}

.estate-list-details {
    color: var(--color_text);
}

.estate-list-details dt {
    border: 1px solid var(--estate_border);
}

.estate-list-block p.estate-list-price {
    color: var(--estate_price);
}


.estate-detail-ttl .estate-category {
    background-color: var(--color_main);
    color: var(--estate_category_text);
}

.article-single-property h2 {
    border-bottom: 3px solid var(--estate_heading_border);
}

.estate-detail-info .estate-price dl {
    color: var(--estate_price);
}

.estate-detail-info .estate-info-list dl dt {
    background: var(--estate_label_bg);
}

.estate-detail-info .recommended-point {
    border: 2px solid var(--estate_recommend_border);
}

.estate-detail-info .recommended-point dl dt {
    color: var(--color_text);
}

.estate-facility-list ul li {
    border: 1px solid var(--estate_facility_border);
    background-color: var(--estate_facility_bg);
}

.estate-detail-tbl table th {
    background: var(--estate_bg_gray_light);
}

.estate-main-info .swiper-slide.main-slide a,
.parking-main-info .swiper-slide.main-slide a {
    display: block;
    position: relative;
    height: 400px !important;
    background: var(--estate_bg_gray);
    box-sizing: border-box;
    overflow: hidden;
}