/*
このファイルがあると、プラグインの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: #0A4D80;
    --color_main_light: #2C6AA8;
    --color_main_lighter: #B9D0E3;
    --color_main_dark: #073A60;
    --color_main_hover: #073A60;

    /* アクセントカラー（ボタン・リンク） */
    --color_accent: #0B6FA1;
    --color_accent_light: #76C4E2;
    --color_accent_dark: #064A6E;

    /* 背景カラー */
    --color_bg: #FFFFFF;
    --color_bg_white: #FFFFFF;
    --section_bg_2: #F7F9FC;
    --color_bg_alt: #E3EBF3;
    --section_bg_3: #F1F5F9;
    /* グラデーション（メインブルー基準） */
    --color_gradient1: #073A60;
    /* メインの少し濃い版 */
    --color_gradient2: #2C6AA8;
    /* メインの明るい版 */
    --contact_bg_overlay: rgb(10 77 128 / 30%);
    /* コンタクトエリアに使うオーバーレイ色 */
    --contact_inner_bg: rgba(255, 255, 255, 0.9);
    /* テキスト・ボタン用の白パネル */

    /* テキスト */
    --color_text: #333333;
    --color_text_sub: #555555;
    --color_text_invert: #ffffff;

    /* リンクカラー（メイン青と統一） */
    --color_link: #1A5E96;
    --color_link_hover: #0F4D78;

    /* 見出し */
    --color_htag: #073A60;
    --color_en_heading: #DEE5EA;

    /* 線・影 */
    --color_border: #ddd;
    --color_shadow: rgba(0, 0, 0, 0.08);

    /* チェックリスト・アイコンカラー系 */
    --color_list_check: #0A4D80;
    --color_list_num: #073A60;
    --color_list_good: #2C6AA8;
    --color_list_triangle: #073A60;
    --color_list_bad: #073A60;

    /* MV（メインビジュアル） */
    --mv_overlay_bg: rgb(222 229 234 / 35%);
    --mv_text_color: #ffffff;
    --mv_text_underline: #ffffff;
    --mv_text_shadow_light: 0 2px 6px rgb(0 0 0 / 20%);
    --mv_text_shadow_dark: 1px 1px 3px rgba(0, 0, 0, 0.4);

    /* FAQ */
    --faq_bg_question: #f5f5f5;
    --faq_q_color: #0A4D80;
    --faq_a_color: #073A60;

    /* ヘッダー・フッター */
    --color_header_bg: #ffffff;
    --color_header_text: #333;
    --color_footer_bg: #F8F8F8;
    --color_footer_text: #333;

    /* SWELL タイトルエリア：左パネル＋斜め仕切り＋右写真 */
    /* --panel_bg: #F3F6F8; */
    --panel_bg: rgb(243 246 248 / 90%);

    /* SWELL ボタン */
    --the_btn_color: #0A4D80;
    --btn_bg: #0A4D80;
    --btn_bg_hover: #073A60;
    --btn_text: #ffffff;

    /* SWELL ボタン（白背景バージョン） */
    --btn_bg_white: #ffffff;
    --btn_bg_white_hover: #E3EBF3;
    --btn_text_white: #0A4D80;
    --btn_border_white: #0A4D80;

    /* Contactフォーム用カラー */
    --contact_border: #ebebeb;
    --contact_btn_bg: #414141;
    --contact_btn_bg_hover: #666666;
    --color_error: #e41212;
    --contact_privacy_bg: #efefef;
    --contact_recapcha_text: #6e6e6e;
    --contact_modal_overlay_bg: rgba(0, 0, 0, 0.6);
    --contact_modal_shadow: rgba(0, 0, 0, 0.3);
    --contact_back_btn_bg: #ccc;
    --contact_back_btn_bg_hover: #bbb;
    --contact_back_btn_text: #333333;
    --contact_btn_shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    --contact_color_blue: #0064b0;
    --contact_color_blue_dark: #005499;

    /* 物件共通カラー */
    --estate_border: #e6e6e6;
    --estate_bg_white: #ffffff;
    --estate_bg_gray: #ededed;
    --estate_bg_gray_light: #ececec;
    /* カテゴリラベル */
    --estate_category_bg: #282828;
    --estate_category_text: #ffffff;
    /* 価格（赤） */
    --estate_price: #eb0f2c;
    /* 詳細ページ 見出し・強調 */
    --estate_heading_border: #333333;
    --estate_recommend_border: #282828;
    /* 施設リスト（青系） */
    --estate_facility_border: #c0d9ff;
    --estate_facility_bg: #f5fbff;
    /* メイン画像（背景グレー） */
    --estate_img_bg: #ededed;
    --estate_label_bg: #f5f5f5;
}




/* ========================================
   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);
}

.top-content .ttl-jp,
.contact-area .ttl-jp,
.subpage-content .ttl-jp {
    color: var(--color_main);
}

.top-content h3,
.subpage-content h3 {
    color: var(--color_main) !important;
}

/* ========================================
  ボタン
======================================== */
.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_main);
}

/* 見出しの下線 */
#top_title_area .c-pageTitle::after {
    background: var(--color_main);
}


/* ========================================
  会社概要
======================================== */
.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_footer_bg);
    color: var(--color_text);
}

.l-footer a {
    color: var(--color_main);
}

.l-footer__nav a:hover {
    color: var(--color_text_invert);
}

.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 {
    display: block;
    position: relative;
    height: 400px !important;
    background: var(--estate_bg_gray);
    box-sizing: border-box;
    overflow: hidden;
}