/*
このファイルがあると、プラグインの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: #0D4B7E;
    --color_main_light: #3E739E;
    --color_main_lighter: #C4D7E6;
    --color_main_dark: #08385F;
    --color_main_hover: #08385F;

    /* アクセントカラー */
    --color_accent: #FC8D02;
    --color_accent_light: #FFB24D;
    --color_accent_lighter: #FFE2BD;
    --color_accent_dark: #D96F00;
    --color_accent_hover: #D96F00;

    /* 背景カラー */
    --color_bg: #FFFFFF;
    --color_bg_white: #FFFFFF;
    --section_bg_2: #F4F7FA;
    --color_bg_alt: #E7EFF5;
    --section_bg_3: #FFF7EC;

    /* グラデーション */
    --color_gradient1: #08385F;
    --color_gradient2: #3E739E;

    /* コンタクトエリア */
    --contact_bg_overlay: rgb(13 75 126 / 30%);
    --contact_inner_bg: rgba(255, 255, 255, 0.92);

    /* テキスト */
    --color_text: #25313A;
    --color_text_sub: #56616A;
    --color_text_light: #77838C;
    --color_text_invert: #FFFFFF;

    /* リンク */
    --color_link: #0D4B7E;
    --color_link_hover: #08385F;

    /* 見出し */
    --color_htag: #0D4B7E;
    --color_en_heading: #FC8D02;

    /* 線・影 */
    --color_border: #D8E1E8;
    --color_border_light: #E8EEF2;
    --color_shadow: rgba(4, 33, 55, 0.1);
    --color_shadow_dark: rgba(4, 33, 55, 0.18);

    /* チェックリスト・アイコン */
    --color_list_check: #0D4B7E;
    --color_list_num: #FC8D02;
    --color_list_good: #3E739E;
    --color_list_triangle: #FC8D02;
    --color_list_bad: #D96F00;

    /* MV */
    --mv_overlay_bg: rgb(13 75 126 / 24%);
    --mv_card_bg: rgb(13 75 126 / 94%);
    --mv_card_bg_sp: rgb(13 75 126 / 92%);
    --mv_text_color: #FFFFFF;
    --mv_text_underline: #FC8D02;
    --mv_text_shadow_light:
        0 2px 6px rgb(0 0 0 / 20%);
    --mv_text_shadow_dark:
        1px 1px 3px rgb(0 0 0 / 40%);

    /* FAQ */
    --faq_bg_question: #F4F7FA;
    --faq_q_color: #0D4B7E;
    --faq_a_color: #FC8D02;

    /* ヘッダー・フッター */
    --color_header_bg: #FFFFFF;
    --color_header_text: #25313A;
    --color_footer_bg: #08385F;
    --color_footer_text: #FFFFFF;

    /* SWELLタイトルエリア */
    --panel_bg: rgb(244 247 250 / 92%);

    /* SWELLボタン */
    --the_btn_color: #0D4B7E;
    --btn_bg: #0D4B7E;
    --btn_bg_hover: #08385F;
    --btn_text: #FFFFFF;

    /* SWELLボタン：白背景 */
    --btn_bg_white: #FFFFFF;
    --btn_bg_white_hover: #F4F7FA;
    --btn_text_white: #0D4B7E;
    --btn_border_white: #0D4B7E;

    /* Contactフォーム */
    --contact_border: #D8E1E8;
    --contact_btn_bg: #0D4B7E;
    --contact_btn_bg_hover: #08385F;
    --color_error: #D92D20;
    --contact_privacy_bg: #F4F7FA;
    --contact_recapcha_text: #66727A;
    --contact_modal_overlay_bg:
        rgba(4, 33, 55, 0.65);
    --contact_modal_shadow:
        rgba(4, 33, 55, 0.3);
    --contact_back_btn_bg: #D8E1E8;
    --contact_back_btn_bg_hover: #C4D0D9;
    --contact_back_btn_text: #25313A;
    --contact_btn_shadow:
        0 4px 12px rgba(4, 33, 55, 0.16);
    --contact_color_blue: #0D4B7E;
    --contact_color_blue_dark: #08385F;

    /* 物件共通 */
    --estate_border: #D8E1E8;
    --estate_bg_white: #FFFFFF;
    --estate_bg_gray: #E7EFF5;
    --estate_bg_gray_light: #F4F7FA;

    /* 物件カテゴリ */
    --estate_category_bg: #0D4B7E;
    --estate_category_text: #FFFFFF;

    /* 物件価格 */
    --estate_price: #D92D20;

    /* 物件詳細ページ */
    --estate_heading_border: #0D4B7E;
    --estate_recommend_border: #FC8D02;

    /* 物件施設リスト */
    --estate_facility_border: #C4D7E6;
    --estate_facility_bg: #F4F8FB;

    /* 物件画像 */
    --estate_img_bg: #E7EFF5;
    --estate_label_bg: #F4F7FA;
}



/* ========================================
   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;
}