@charset "UTF-8";

/* =========================================================
    基本設定・共通パーツ（index.php）
========================================================= */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f9f9f9;
}

a { text-decoration: none; color: #333; }
ul { list-style: none; padding: 0; margin: 0; }

/* ==============================================
   全体的なコンテンツ幅の拡張（上書き設定）
============================================== */
/* 共通のコンテンツ枠がある場合 */
.innerBlock {
    max-width: 1350px !important; 
}

/* 共通セクションタイトル */
.c-secTtl {
    margin-bottom: 40px;
    text-align: left;
}

.c-secTtl__main {
    font-size: 50px;
    letter-spacing: 0.3em;
    color: #333;
    margin-bottom: 10px;
    display: flex;
}

.c-secTtl__main span { display: inline-block; }

.c-secTtl__sub {
    font-size: 20px;
    font-weight: bold;
    color: #1b2a47; /* ネイビー色 */
    margin: 0;
    letter-spacing: 0.05em;
}

/* ボタンの中央寄せ用（複数セクションで共有） */
.btn-wrap-center {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* =========================================================
    ヘッダー
========================================================= */
header {
    height: 42px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 40px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-logo {
    font-size: 20px;
    font-weight: bold;
    color: #004284;
    display: flex;
    align-items: center;
}

.header-logo svg {
    height: 24px;
    margin-right: 10px;
    fill: #004284;
}

.header-nav {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-left: 40px;
    margin-right: auto;
}

.header-nav a {
    color: #333;
    font-size: 14px;
    font-weight: normal;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: #f4f5f7;
    border-radius: 20px;
    padding: 8px 16px;
}
.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 200px;
    font-size: 13px;
}

.search-box input::placeholder { color: #999; }

.search-btn {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23004284" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/%3E%3C/svg%3E') no-repeat center;
    background-size: 16px;
    width: 16px;
    height: 16px;
    border: none;
    cursor: pointer;
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 30px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.hamburger-btn::before, .hamburger-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
}

/* =========================================================
   ヘッダー全体の設定 (PC向け)
========================================================= */
.headerFixed {
  position: fixed; /* 画面上部に固定 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 軽い影をつける */
  z-index: 1000;
}

.headerFixedInner {
  display: flex;
  align-items: center; /* 縦の中央揃え */
  justify-content: space-between; /* 両端配置 */
  padding: 0 40px; /* 左右の余白 */
  height: 80px; /* ヘッダーの高さ */
  max-width: 1400px;
  margin: 0 auto;
}

/* =========================================================
    ハンバーガーメニュー モーダル
========================================================= */
.modal-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    z-index: 9999;
    
    /* シャッターの初期状態：画面の上（-100%）に隠しておく */
    transform: translateY(-100%);
    visibility: hidden;
    
    /* アニメーションの設定（0.5秒かけて滑らかに降りてくる） */
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.5s;
    
    /* display: none; がある場合は必ず削除してください！アニメーションしなくなります */
}

/* クラスが付与されて「開いた」時の状態 */
.modal-menu.is-active {
    transform: translateY(0); /* 元の位置に下ろす */
    visibility: visible;
}

/* ＋α：中身のメニューも少し遅れてフワッと出すとさらに高級感が出ます */
.modal-menu__inner {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.2s; /* シャッターが降りてから中身を出す */
}
.modal-menu.is-active .modal-menu__inner {
    opacity: 1;
    transform: translateY(0);
}

/* 閉じるボタン（×）のスタイル（すでに設定があれば微調整のみでOKです） */
.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10000;
}

.modal-close-btn::before, 
.modal-close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background-color: #333;
}

.modal-close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* モーダルの中身のレイアウト */
.modal-menu__inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    padding: 40px;
    gap: 60px;
}

.modal-menu__left { flex: 1; }
.modal-menu__right { flex: 1; display: flex; flex-direction: column; gap: 40px; }

/* 左側のリンク集 */
.modal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.modal-nav a {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.modal-nav a:hover { color: #004284; }

/* 右側のログインリンク */
.modal-action a {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    margin-bottom: 25px;
    transition: color 0.3s;
}

.modal-action a:hover { color: #004284; }

/* 右側の連絡先情報 */
.modal-contact .tel {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
}

.modal-contact .time {
    font-size: 12px;
    margin: 0 0 25px;
    color: #666;
}

.modal-contact .address {
    font-size: 12px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

/* =========================================================
    ハンバーガーメニュー モーダル
========================================================= */
.modal-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #ffffff; z-index: 9999;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex; justify-content: center; align-items: center; overflow-y: auto;
}
.modal-menu.is-active { opacity: 1; visibility: visible; }
.modal-close-btn {
    position: absolute; top: 30px; right: 40px; width: 40px; height: 40px;
    background: transparent; border: none; cursor: pointer;
}
.modal-close-btn::before, .modal-close-btn::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 2px; background-color: #333;
}
.modal-close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- モーダルの中身（3分割レイアウト） --- */
.modal-menu__inner {
    display: flex;
    justify-content: space-between;
    max-width: 1200px; /* 少し幅を広げる */
    margin: 120px auto 50px;
    padding: 0 40px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.2s;
}
.modal-menu.is-active .modal-menu__inner {
    opacity: 1;
    transform: translateY(0);
}

/* 3つのエリアの幅設定 */
.modal-menu__left {
    width: 25%;
}
.modal-menu__center {
    width: 35%;
    position: relative; /* サブメニューを重ねるための基準点 */
}
.modal-menu__right {
    width: 30%;
}

/* --- 左側：メインナビゲーション --- */
.modal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.modal-nav li {
    border: none; /* 下線を消す場合はこちら */
}
.modal-nav a {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    letter-spacing: 0.1em;
    position: relative;
    padding-left: 30px;
    transition: color 0.3s;
}
.modal-nav a::before {
    content: '■'; /* 先頭の四角いマーク */
    position: absolute;
    left: 0;
    font-size: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    opacity: 0; /* 初期状態は非表示 */
    transition: opacity 0.3s;
}
.modal-nav li:hover a::before {
    opacity: 1; /* ホバーでマークを表示 */
}

/* --- 中央：サブメニュー --- */
.modal-sub {
    position: absolute; /* 同じ場所に重ねる */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
/* jsで付与されるクラス */
.modal-sub.is-active {
    opacity: 1;
    visibility: visible;
}
.modal-sub__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.modal-sub__list a {
    display: block;
    padding: 12px 0;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: color 0.3s;
}
.modal-sub__list a:hover {
    color: #1b2a47;
}

/* --- 右側：連絡先など --- */
.modal-action {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.modal-action a {
    background: none;
    color: #333;
    padding: 10px 0;
    font-size: 16px;
    text-align: left;
    justify-content: flex-start;
    box-shadow: none;
}
.modal-contact {
    margin-top: 40px;
    font-size: 12px;
    color: #666;
    line-height: 1.8;
    letter-spacing: 0.05em;
}
.modal-contact p {
    margin: 0 0 5px 0;
}
.modal-contact .modal-tel {
    font-size: 16px;
    color: #333;
    letter-spacing: 0.1em;
}
.modal-contact .modal-address {
    margin-top: 15px;
}

/* --- スマホ対応（縦一列にする） --- */
@media screen and (max-width: 768px) {
    .modal-menu__inner {
        flex-direction: column;
    }
    .modal-menu__left, .modal-menu__center, .modal-menu__right {
        width: 100%;
    }
    .modal-menu__center {
        position: static;
        margin-top: 20px;
    }
    .modal-sub {
        position: static;
        display: none; /* スマホでは初期状態で隠す */
    }
    .modal-sub.is-active {
        display: block;
    }
}

/* =========================================================
    メインビジュアル ＆ 物件数ハイライト
========================================================= */
.hero-slider-wrapper {
    position: relative; 
    width: 100%;
    height: 650px;
    background-color: #e0e0e0;
    overflow: hidden;
}

.kvSlider {
    width: 100%;
    height: 100%;
    display: flex;
}

.kvSlider__item {
    width: 100%;
    height: 100%;
}

/* スライダーの画像を少しだけ大きく配置しておく（拡大の余白を持たせるため） */
.kvSlider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 最初は1.05倍の大きさで表示 */
    transform: scale(1.05);
    transition: transform 8s ease-in-out; /* 8秒かけてゆっくり変化させる設定 */
}

/* 
   Swiper で「今表示されているスライド（.swiper-slide-active）」に対して、
   画像を徐々に拡大する（scaleを大きくする）アニメーションを適用します。
*/
.swiper-slide-active .kvSlider__img {
    /* 1.05倍から1.15倍へ、8秒かけて拡大する */
    transform: scale(1.15);
}

.kv-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px 0;
    z-index: 10;
}
.kv-stats__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.kv-stats__badge {
    background-color: #004284;
    color: #fff;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.kv-stats__badge svg { margin-bottom: 5px; }

.stats-table {
    border-collapse: collapse;
    margin-bottom: 15px;
}
.stats-table th, .stats-table td {
    padding: 8px 15px;
    text-align: center;
    vertical-align: middle;
}
.label-public { border: 1px solid #004284; color: #004284; font-size: 11px; padding: 2px 8px; }
.label-private { background-color: #004284; color: #fff; font-size: 11px; padding: 2px 8px; }
.area-name { font-size: 13px; font-weight: bold; color: #333; text-align: right; border-bottom: 1px dashed #ccc; }
.num-public, .num-private, .arrow { border-bottom: 1px dashed #ccc; }
.num-public { color: #004284; font-weight: bold; font-size: 14px; }
.num-private { color: #d90000; font-weight: bold; font-size: 14px; }
.num-public span, .num-private span { font-size: 24px; margin-right: 2px; }
.arrow { color: #999; letter-spacing: -2px; }

.kv-stats__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.member-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d94b4b;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 4px;
    width: 100%;
    max-width: 600px;
    position: relative;
    transition: opacity 0.3s;
}
.member-btn:hover { opacity: 0.8; }
.member-btn__icon {
    position: absolute;
    right: 15px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==============================================
   メインビジュアル 中央の重ね画像
============================================== */
.kv-center-logos {
    /* スライダーの親要素（.hero-slider-wrapper）に対して絶対配置 */
    position: absolute;
    top: 30%; /* 上下の中央より少し上に配置 */
    left: 50%;
    transform: translate(-50%, -50%); /* 完全に中央に揃える魔法のコード */
    z-index: 10; /* スライダー画像より手前に表示させる */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 左右中央揃え */
    gap: 30px; /* キャッチコピーとロゴの間の余白 */
    width: 90%; /* 画面幅が狭いときに端が切れないように */
    max-width: 800px; /* 最大幅を制限 */
    pointer-events: none; /* 画像がクリックの邪魔にならないようにする */
}

/* 上のキャッチコピー画像（①.png） */
.kv-catchphrase {
    width: 100%;
    height: auto;
    max-width: 450px; /* 大きすぎないように制限 */
    /* 背景が暗い場合でも見えやすくするために、必要に応じて軽い影をつける */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

/* 下のロゴ画像（②.png） */
.kv-center-logo {
    width: 60%; /* キャッチコピーより少し小さめに表示 */
    height: auto;
    max-width: 250px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .kv-center-logos {
        gap: 15px; /* スマホでは間隔を狭める */
    }
    .kv-catchphrase {
        max-width: 90%; /* スマホでは幅いっぱいに */
    }
    .kv-center-logo {
        width: 70%;
    }
}

/* =========================================================
    検索ボックスエリア（中央）
========================================================= */
.searchBoxArea {
    background-color: #ffffff;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}
.searchBoxWrap {
    width: 100%;
    max-width: 400px;
}
.searchBoxWrap .searchBox {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 30px;
    padding: 5px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    margin-bottom: 15px;
}
.searchBoxWrap .inputBlock { flex: 1; }
.searchBoxWrap .inputBlock input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #333;
    padding: 10px 0;
}
.searchBoxWrap .searchBtn input {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%231b2a47" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/%3E%3C/svg%3E') no-repeat center;
    background-size: 18px;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    color: transparent;
}
.conditionsBtnList {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.conditionsBtnList .condition-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b2a47;
    color: #ffffff;
    padding: 12px 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: opacity 0.2s;
}
.conditionsBtnList .condition-btn:hover { opacity: 0.8; }

/* =========================================================
    物件カード共通デザイン（NEW ARRIVALS / KITA AREA で再利用）
========================================================= */
.property-card {
    background: #ffffff;
    transition: transform 0.3s;
}
.property-card:hover {
    transform: translateY(-5px);
}
.property-card__link {
    display: block;
    text-decoration: none;
    color: #333;
}
.property-card__upper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eee;
}
.property-card__upper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.property-card__label {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #1b2a47;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
}
.label-new {
    font-size: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    margin-bottom: 2px;
    letter-spacing: 0.1em;
}
.label-price {
    font-size: 18px;
    font-weight: bold;
}
.label-price span {
    font-size: 10px;
    font-weight: normal;
    margin-left: 2px;
}
.property-card__lower {
    padding: 15px 0;
}
.property-title {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.property-desc {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
}
.property-tag {
    display: inline-block;
    font-size: 10px;
    padding: 4px 8px;
    margin-top: 5px;
    border-radius: 2px;
}
.property-tag.-mansion { background-color: #f2eef8; color: #6a4c9c; }
.property-tag.-new-house { background-color: #eef4f8; color: #3d79a5; }
.property-tag.-used-house { background-color: #eef8f2; color: #4c9c6a; }

/* =========================================================
    KITA AREAセクション
========================================================= */
.commonSection.-kitaarea {
    background-color: #ffffff;
    padding: 80px 20px;
}
.property-grid-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
}
/* 会員限定バナー用の特別設定 */
.property-card.-member {
    background: transparent;
    box-shadow: none;
}
.property-card.-member:hover {
    transform: translateY(-3px);
}
.property-card.-member .property-card__link {
    height: 100%;
    display: flex;
    align-items: center;
}
.property-card.-member img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========================================================
    THANKS VOICEセクション
========================================================= */
.commonSection.-thanks {
    background-color: #ffffff;
    padding: 80px 20px;
}
.voiceList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}
.voice-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s, box-shadow 0.3s;
}
.voice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.voice-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: #333;
}
.voice-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f4f5f7;
}
.voice-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.voice-card__body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.voice-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.voice-card__title {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.voice-card__badge {
    background-color: #f0f4f8;
    color: #1b2a47;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
}
.voice-card__comment {
    font-size: 11px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 15px 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.voice-card__staff-wrap {
    text-align: right;
}
.voice-card__staff {
    display: inline-block;
    font-size: 10px;
    color: #666;
    border: 1px solid #ccc;
    padding: 3px 6px;
}

/* =========================================================
    NEW ARRIVALSセクション
========================================================= */
.commonSection.-newarrivals {
    background-color: #ffffff;
    padding: 80px 0; 
    overflow: hidden;
}
.js-newarrival-swiper {
    width: 100%;
    padding: 20px 40px 60px;
    box-sizing: border-box;
    position: relative;
}
.js-newarrival-swiper .swiper-button-prev,
.js-newarrival-swiper .swiper-button-next {
    background-color: #1b2a47;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.8;
}
.js-newarrival-swiper .swiper-button-prev:after,
.js-newarrival-swiper .swiper-button-next:after {
    font-size: 16px;
}

/* =========================================================
    SEARCHセクション
========================================================= */
.commonSection.-search {
    background-color: #f4f5f7;
    padding: 80px 20px;
}
.searchArea {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.tabList {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #e5eaf2;
}
.tabList .tab {
    flex: 1;
    text-align: center;
    padding: 20px 0;
    font-size: 15px;
    font-weight: bold;
    color: #1b2a47;
    cursor: pointer;
    border-right: 1px solid #ffffff;
    transition: background-color 0.3s, color 0.3s;
}
.tabList .tab:last-child {
    border-right: none;
}
.tabList .tab.is-active {
    background-color: #1b2a47;
    color: #ffffff;
}
.basicSearchList {
    display: flex;
    flex-direction: column;
}
.basicSearchList__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 40px;
    text-decoration: none;
    background-color: #f0f4f8;
    border-bottom: 1px solid #ffffff;
    color: #1b2a47;
    transition: background-color 0.3s;
}
.basicSearchList__link:last-child { border-bottom: none; }
.basicSearchList__link:hover { background-color: #e2e8f0; }
.basicSearchList__link .label { font-size: 15px; font-weight: bold; }
.basicSearchList__link .text { font-size: 13px; display: flex; align-items: center; gap: 10px; }
.basicSearchList__link .arrow { font-style: normal; font-size: 10px; color: #999; }

.searchArea .btnList {
    display: flex;
    gap: 5px;
    padding: 20px 40px 40px;
    background-color: #ffffff;
}
.searchArea .search-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b2a47;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 20px 0;
    border-radius: 6px;
    position: relative;
    transition: opacity 0.3s;
}
.searchArea .search-btn:hover { opacity: 0.8; }
.searchArea .arrow-circle {
    position: absolute;
    right: 15px;
    font-style: normal;
    font-size: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================================
    SPECIALセクション（こだわりから探す）
========================================================= */
.commonSection.-special {
    background-color: #ffffff;
    padding: 80px 20px;
    text-align: center;
}
.-special .innerBlock {
    text-align: left;
}
.bannerList.-special {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
}
.-special .list {
    width: calc(33.333% - 20px);
    box-sizing: border-box;
    margin-bottom: 20px;
}
.-special .link {
    display: block;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}
.-special .link:hover { opacity: 0.8; }
.-special .img {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}
.-special .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.-special .title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    color: #333;
    text-align: left;
}

/* 共通：もっとみるボタン */
.more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b2a47;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    width: 300px;
    height: 60px;
    border-radius: 8px;
    position: relative;
    transition: opacity 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.more-btn:hover {
    opacity: 0.8;
    color: #ffffff;
}
.more-btn__icon {
    position: absolute;
    right: 20px;
    font-size: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================================
    SERVICEセクション
========================================================= */
.commonSection.-service {
    background-color: #f4f5f7;
    padding: 80px 20px;
}
.bannerList.-service {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}
.-service .list {
    width: calc(50% - 15px);
    margin-bottom: 40px;
    box-sizing: border-box;
}
.-service .link {
    display: block;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}
.-service .link:hover { opacity: 0.8; }
.-service .img {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}
.-service .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
}
.-service .title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1.5;
    color: #333;
}

/* =========================================================
    NEWSセクション
========================================================= */
.commonSection.-news {
    background-color: #ffffff;
    padding: 80px 20px;
}
.rowList.-news {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
}
.-news .list {
    border-bottom: 1px solid #dcdcdc;
}
.-news .link {
    display: flex;
    align-items: center;
    padding: 25px 0;
    text-decoration: none;
    transition: opacity 0.3s;
}
.-news .link:hover { opacity: 0.7; }
.-news .detail {
    width: 200px;
    flex-shrink: 0;
}
.-news .date {
    font-size: 14px;
    font-weight: bold;
    color: #1b2a47;
}
.-news .text {
    font-size: 15px;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* ==============================================
   NEWS（お知らせ）ページ
============================================== */
.news-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル */
.page-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px 40px;
}
.page-main-ttl {
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #1b2a47; /* ネイビー */
    margin: 0 0 10px 0;
    font-weight: normal;
}
.page-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
    letter-spacing: 0.1em;
}

/* 中央のコンテンツエリア */
.news-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* 全体を中央揃え */
}

/* 登録件数テキスト */
.news-count {
    font-size: 13px;
    color: #999;
    margin: 40px 0;
    letter-spacing: 0.1em;
}

/* ニュースリストのグレーボックス（記事がない状態のプレースホルダー） */
.news-list-box {
    background-color: #f5f5f5; /* 薄いグレー */
    width: 100%;
    height: 300px; /* 画像に近い高さ */
    margin: 0 auto;
}

/* ページネーション（ページ送り） */
.pagination {
    margin: 40px 0 20px;
}
.page-current {
    display: inline-block;
    font-size: 15px;
    color: #333;
}

/* =========================================================
    フッター全体設定（完全版）
========================================================= */
.site-footer {
    background-color: #1a2a44;
    color: #ffffff;
    padding: 60px 40px 30px;
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}
.footerInner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}
.footerNavWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footerNav__ttl {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: #ffffff;
}
.footerNav__listWrap {
    display: flex;
    gap: 40px;
}
.footerNav__item {
    margin-bottom: 15px;
}
.footerNav__link {
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s;
}
.footerNav__link:hover { opacity: 0.7; }

.footerLoginWrap {
    margin-bottom: 40px;
}
.footerBnrRow {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}
.footerBnr {
    flex: 1;
    background-color: #6a778b;
    transition: opacity 0.3s;
}
.footerBnr:hover { opacity: 0.8; }
.footerBnr__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 110px;
    color: #ffffff;
    text-decoration: none;
}
.footerBnr__text.-sub {
    font-size: 13px;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
}
.footerBnr__text.-main {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.footerInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 50px;
    margin-bottom: 40px;
    padding-right: 60px;
}
.footerInfoLogo img {
    max-width: 350px;
    height: auto;
}
.footerInfoRow {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 8px;
}
.footerInfoRow__tel {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.05em;
}
.footerInfoRow__text {
    font-size: 12px;
    margin: 0;
    color: #d0d5dc;
}

.footerBottom {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}
.footerBottomTexts {
    font-size: 12px;
    line-height: 1.6;
    font-weight: bold;
}
.copyright {
    font-size: 11px;
    color: #ffffff;
    letter-spacing: 0.05em;
    padding-bottom: 2px;
}

.gototop {
    position: absolute;
    right: -200px;
    bottom: 63px;
}

.gototop__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    text-decoration: none;
}

.gototop__line {
    width: 1px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.4);
    margin-bottom: 30px;
}

/* =========================================================
    メインビジュアル・物件数ハイライト
========================================================= */
.hero-slider-wrapper {
    position: relative; /* 帯を重ねるための基準点 */
    width: 100%;
    height: 810px;
    background-color: #f4f5f7;
    overflow: hidden;
}
.kvSlider {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0;
    margin: 0;
}
.kvSlider__item {
    width: 100%;
    height: 100%;
    list-style: none;
}
.kvSlider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 半透明の白い帯 */
.kv-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px 0;
    z-index: 10;
}
.kv-stats__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}
.kv-stats__badge {
    background-color: #004284;
    color: #fff;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.kv-stats__badge svg { margin-bottom: 5px; }
.stats-table {
    border-collapse: collapse;
    margin-bottom: 15px;
}
.stats-table th, .stats-table td {
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
}
.label-public { border: 1px solid #004284; color: #004284; font-size: 11px; padding: 2px 8px; }
.label-private { background-color: #004284; color: #fff; font-size: 11px; padding: 2px 8px; }
.area-name { font-size: 13px; font-weight: bold; color: #333; text-align: right; border-bottom: 1px dashed #ccc; }
.num-public, .num-private, .arrow { border-bottom: 1px dashed #ccc; }
.num-public { color: #004284; font-weight: bold; font-size: 14px; }
.num-private { color: #d90000; font-weight: bold; font-size: 14px; }
.num-public span, .num-private span { font-size: 24px; margin-right: 2px; }
.arrow { color: #999; letter-spacing: -2px; }

.member-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d94b4b;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 4px;
    width: 100%;
    position: relative;
    transition: opacity 0.3s;
}
.member-btn:hover { opacity: 0.8; }
.member-btn__icon {
    position: absolute;
    right: 15px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================================
    検索ボックスエリア（中央）
========================================================= */
.searchBoxArea {
    background-color: #ffffff;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.searchBoxWrap {
    width: 100%;
    max-width: 400px; /* 検索エリアの最大幅 */
}

/* カプセル型の検索窓 */
.searchBoxWrap .searchBox {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 30px;
    padding: 5px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

.searchBoxWrap .inputBlock {
    flex: 1;
}

.searchBoxWrap .inputBlock input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #333;
    padding: 10px 0;
}

/* 虫眼鏡アイコン付きの送信ボタン */
.searchBoxWrap .searchBtn input {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%231b2a47" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/%3E%3C/svg%3E') no-repeat center;
    background-size: 18px;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    color: transparent;
}

/* エリア・こだわりボタンの横並び */
.conditionsBtnList {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.conditionsBtnList .condition-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b2a47; /* ネイビー */
    color: #ffffff;
    padding: 12px 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: opacity 0.2s;
}

.conditionsBtnList .condition-btn:hover {
    opacity: 0.8;
}

/* =========================================================
    KITA AREAセクション
========================================================= */
.commonSection.-kitaarea {
    background-color: #ffffff; /* 白背景 */
    padding: 80px 20px;
}

/* 物件カードを4列に並べるグリッド設定 */
.property-grid-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 均等に4列 */
    gap: 40px 20px; /* 縦の隙間40px、横の隙間20px */
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
}

/* 会員限定バナー用の特別設定 */
.property-card.-member {
    background: transparent;
    box-shadow: none; /* 影を消す */
}
.property-card.-member:hover {
    transform: translateY(-3px); /* バナーも少しだけ浮かせる */
}
.property-card.-member .property-card__link {
    height: 100%;
    display: flex;
    align-items: center; /* 縦方向に中央揃え */
}
.property-card.-member img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========================================================
    THANKS VOICEセクション
========================================================= */
.commonSection.-thanks {
    background-color: #ffffff; /* 白背景 */
    padding: 80px 20px;
}

/* リストの4列配置 */
.voiceList {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 均等に4列 */
    gap: 20px; /* カード間の隙間 */
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

/* お客様の声カード */
.voice-card {
    background: #ffffff;
    border: 1px solid #e0e0e0; /* 薄いグレーの枠線 */
    transition: transform 0.3s, box-shadow 0.3s;
}
.voice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.voice-card__link {
    display: flex;
    flex-direction: column;
    height: 100%; /* 高さを揃える */
    text-decoration: none;
    color: #333;
}

/* 画像部分 */
.voice-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f4f5f7;
}
.voice-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキストエリア */
.voice-card__body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1; /* 高さを埋める */
}

.voice-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.voice-card__title {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    /* 長い名前を省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 購入バッジ */
.voice-card__badge {
    background-color: #f0f4f8; /* 薄いブルー */
    color: #1b2a47;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
}

/* コメント本文（3行で省略する設定） */
.voice-card__comment {
    font-size: 11px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 15px 0;
    flex: 1; /* 余白を埋める */
    /* 3行を超えたら「...」にする */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 担当者名 */
.voice-card__staff-wrap {
    text-align: right;
}
.voice-card__staff {
    display: inline-block;
    font-size: 10px;
    color: #666;
    border: 1px solid #ccc;
    padding: 3px 6px;
}

/* =========================================================
    NEW ARRIVALS（新着物件）＆ 物件カード共通デザイン
========================================================= */
.commonSection.-newarrivals {
    background-color: #ffffff;
    padding: 80px 0; /* スライダーを画面幅いっぱいにするため左右のpaddingを消す */
    overflow: hidden;
}

/* スライダー自体の設定 */
.js-newarrival-swiper {
    width: 100%;
    padding: 20px 40px 60px; /* 矢印のスペースと影のスペースを確保 */
    box-sizing: border-box;
    position: relative;
}

/* 矢印のデザイン上書き */
.js-newarrival-swiper .swiper-button-prev,
.js-newarrival-swiper .swiper-button-next {
    background-color: #1b2a47;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.8;
}
.js-newarrival-swiper .swiper-button-prev:after,
.js-newarrival-swiper .swiper-button-next:after {
    font-size: 16px;
}

/* 物件カード（池上さんが再利用するモジュール） */
.property-card {
    background: #ffffff;
    transition: transform 0.3s;
}
.property-card:hover {
    transform: translateY(-5px); /* ホバーで少し浮く */
}
.property-card__link {
    display: block;
    text-decoration: none;
    color: #333;
}

/* カード上部（画像と価格バッジ） */
.property-card__upper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eee;
}
.property-card__upper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card__label {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #1b2a47;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
}
.label-new {
    font-size: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    margin-bottom: 2px;
    letter-spacing: 0.1em;
}
.label-price {
    font-size: 18px;
    font-weight: bold;
}
.label-price span {
    font-size: 10px;
    font-weight: normal;
    margin-left: 2px;
}

/* カード下部（テキスト情報） */
.property-card__lower {
    padding: 15px 0;
}
.property-title {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
    /* 長い文字を「...」にする */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.property-desc {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
}

/* 物件種別タグ */
.property-tag {
    display: inline-block;
    font-size: 10px;
    padding: 4px 8px;
    margin-top: 5px;
    border-radius: 2px;
}
.property-tag.-mansion { background-color: #f2eef8; color: #6a4c9c; }
.property-tag.-new-house { background-color: #eef4f8; color: #3d79a5; }
.property-tag.-used-house { background-color: #eef8f2; color: #4c9c6a; }

/* ボタンの中央寄せ用 */
.btn-wrap-center {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* =========================================================
    SEARCHセクション
========================================================= */
.commonSection.-search {
    background-color: #f4f5f7; /* 薄いグレー背景 */
    padding: 80px 20px;
}

.searchArea {
    max-width: 800px; /* 検索エリアの幅 */
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px; /* 全体の角を丸く */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 1. 物件種別タブ */
.tabList {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #e5eaf2; /* 非アクティブタブの背景色 */
}

.tabList .tab {
    flex: 1;
    text-align: center;
    padding: 20px 0;
    font-size: 15px;
    font-weight: bold;
    color: #1b2a47;
    cursor: pointer;
    border-right: 1px solid #ffffff; /* タブ間の区切り線 */
    transition: background-color 0.3s, color 0.3s;
}
.tabList .tab:last-child {
    border-right: none;
}

.tabList .tab.is-active {
    background-color: #1b2a47; /* アクティブ時のネイビー */
    color: #ffffff;
}

/* 2. 基本検索リンク（エリア・沿線） */
.basicSearchList {
    display: flex;
    flex-direction: column;
}

.basicSearchList__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 40px;
    text-decoration: none;
    background-color: #f0f4f8; /* リンク行の背景色 */
    border-bottom: 1px solid #ffffff;
    color: #1b2a47;
    transition: background-color 0.3s;
}
.basicSearchList__link:last-child {
    border-bottom: none;
}
.basicSearchList__link:hover {
    background-color: #e2e8f0;
}

.basicSearchList__link .label {
    font-size: 15px;
    font-weight: bold;
}
.basicSearchList__link .text {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.basicSearchList__link .arrow {
    font-style: normal;
    font-size: 10px;
    color: #999;
}

/* 3. 詳細検索ボタン（学区・地図・通勤時間） */
.searchArea .btnList {
    display: flex;
    gap: 5px;
    padding: 20px 40px 40px;
    background-color: #ffffff;
}

.searchArea .search-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b2a47; /* ネイビー */
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 20px 0;
    border-radius: 6px;
    position: relative;
    transition: opacity 0.3s;
}
.searchArea .search-btn:hover {
    opacity: 0.8;
}

.searchArea .arrow-circle {
    position: absolute;
    right: 15px;
    font-style: normal;
    font-size: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================================
    SPECIALセクション
========================================================= */
.commonSection.-special {
    background-color: #ffffff; /* 白背景 */
    padding: 80px 20px;
    text-align: center; /* タイトルとボタンを中央に配置するためのベース */
}

.innerBlock {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

/* バナーリスト（3列の横並び） */
.bannerList.-special {
    display: flex;
    flex-wrap: wrap; /* 横幅が足りない場合に折り返す */
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0; /* 下のボタンとの隙間 */
}

.-special .list {
    width: calc(33.333% - 20px); /* 3等分して隙間を引く */
    box-sizing: border-box;
    margin-bottom: 20px;
}

.-special .link {
    display: block;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}

.-special .link:hover {
    opacity: 0.8;
}

.-special .img {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}

.-special .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* 画像の比率を4:3に固定 */
    object-fit: cover;
    display: block;
}

.-special .title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    color: #333;
    text-align: left;
}

/* もっとみるボタン */
.-special .btn-wrap {
    display: flex;
    justify-content: center; /* ボタン自体を中央揃え */
}

.more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b2a47; /* ネイビー色 */
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    width: 300px; /* ボタンの幅 */
    height: 60px;
    border-radius: 8px; /* 角丸 */
    position: relative;
    transition: opacity 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.more-btn:hover {
    opacity: 0.8;
    color: #ffffff;
}

.more-btn__icon {
    position: absolute;
    right: 20px;
    font-size: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================================
    SERVICEセクション
========================================================= */
.commonSection.-service {
    background-color: #f4f5f7; /* セクション全体の薄いグレー背景 */
    padding: 80px 20px;
}

.-service .innerBlock {
    max-width: 1000px;
    margin: 0 auto;
}

/* セクションタイトル */
.c-secTtl {
    margin-bottom: 40px;
    text-align: left;
}

/* バナーリスト（2列の横並びに強制する設定） */
.bannerList.-service {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 左右に均等配置 */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各バナーの横幅を全体の半分（50%）に設定 */
.-service .list {
    width: calc(50% - 15px); /* 間の隙間(30px)の半分を引いてぴったり2列にする */
    margin-bottom: 40px; /* 下の行との隙間 */
    box-sizing: border-box;
}

.-service .link {
    display: block;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}

.-service .link:hover {
    opacity: 0.8;
}

.-service .img {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px; /* 画像とテキストの隙間 */
    position: relative;
}

.-service .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1; /* 画像の比率を横2：縦1に固定 */
    object-fit: cover;
    display: block;
}

.-service .title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1.5;
    color: #333;
}

/* =========================================================
    NEWSセクション
========================================================= */
.commonSection.-news {
    background-color: #ffffff; /* 白背景 */
    padding: 80px 20px;
}

.rowList.-news {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0; /* 下のボタンとの隙間 */
}

.-news .list {
    border-bottom: 1px solid #dcdcdc; /* リスト間の区切り線 */
}

.-news .link {
    display: flex;
    align-items: center; /* 日付とテキストを縦の中央で揃える */
    padding: 25px 0; /* 上下の余白 */
    text-decoration: none;
    transition: opacity 0.3s;
}

.-news .link:hover {
    opacity: 0.7;
}

.-news .detail {
    width: 200px; /* 日付エリアの幅を固定 */
    flex-shrink: 0; /* スマホ幅になっても縮ませない */
}

.-news .date {
    font-size: 14px;
    font-weight: bold;
    color: #1b2a47; /* ネイビー色 */
}

.-news .text {
    font-size: 15px;
    color: #333;
    margin: 0;
    font-weight: normal; /* 見出しの太字を解除 */
}

.-news .btn-wrap {
    display: flex;
    justify-content: center; /* ボタンを中央揃え */
}

/* =========================================================
    フッター全体設定
========================================================= */
.site-footer {
    background-color: #1a2a44;
    color: #ffffff;
    padding: 60px 40px 30px;
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}
.footerInner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* -----------------------------------
    サイトマップ（リンク集）
----------------------------------- */
.footerNavWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footerNav__ttl {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: #ffffff;
}

.footerNav__listWrap {
    display: flex;
    gap: 40px;
}

.footerNav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footerNav__item {
    margin-bottom: 15px;
}

.footerNav__link {
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footerNav__link:hover {
    opacity: 0.7;
}

/* -----------------------------------
    ロゴと連絡先
----------------------------------- */
.footerInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 50px;
    margin-bottom: 40px;
    padding-right: 60px;
}
.footerInfoLogo img {
    max-width: 350px;
    height: auto;
}
.footerInfoRow {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 8px;
}
.footerInfoRow__tel {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.05em;
}
.footerInfoRow__text {
    font-size: 12px;
    margin: 0;
    color: #d0d5dc;
}

/* -----------------------------------
    コピーライトとPAGE TOP
----------------------------------- */
.footerBottom {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}
.footerBottomTexts {
    font-size: 12px;
    line-height: 1.6;
    font-weight: bold;
}
.copyright {
    font-size: 11px;
    color: #ffffff;
    letter-spacing: 0.05em;
    padding-bottom: 2px;
}

/* =========================================================
    詳細ページ：パンくずリスト detail.php
========================================================= */
.breadcrumb {
    display: flex;
    gap: 10px;
    padding: 20px 40px;
    font-size: 12px;
    color: #666;
    background-color: #f9f9f9;
}

/* =========================================================
    詳細ページ：メイン情報エリア
========================================================= */
.schDetailArea {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #fff;
}

.schDetailArea .upperBlock {
    position: relative;
    margin-bottom: 20px;
}
.schDetailArea .upperBlock img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}
.schDetailArea .price {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(27, 42, 71, 0.9);
    color: #fff;
    padding: 10px 20px;
    font-size: 32px;
    font-weight: bold;
}
.schDetailArea .price .unit { font-size: 14px; margin-left: 5px; }

.schDetailArea .middleBlock .title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.schDetailArea .middleBlock .des {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

.schDetailArea .lowerBlock {
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.schDetailArea .status {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-weight: bold;
}
.schDetailArea .status .cat {
    background: #f2eef8;
    color: #6a4c9c;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
}

.schDetailArea .btnWrap {
    text-align: center;
    margin-bottom: 30px;
}
.schDetailArea .btnWrap .c-btn {
    display: inline-block;
    background: #d94b4b; /* お問い合わせボタンの赤 */
    color: #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    width: 100%;
    max-width: 400px;
}

/* =========================================================
    詳細ページ：ギャラリー（サムネイル）
========================================================= */
.schDetail-gallery {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 0 20px;
}
.schDetail-gallery__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* サムネイルは4列 */
    gap: 10px;
}
.schDetail-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s;
}
.schDetail-gallery__item img:hover { opacity: 0.7; }

/* =========================================================
    詳細ページ：物件概要テーブル
========================================================= */
.schDetail-about {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 0 20px;
}
.schDetail-aboutOpen__btn {
    background: #1b2a47;
    color: #fff;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
}
.schDetail-aboutTable {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
.schDetail-aboutTable__tr {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.schDetail-aboutTable__th {
    background: #f4f5f7;
    padding: 15px;
    width: 20%;
    font-weight: bold;
    border-right: 1px solid #ddd;
}
.schDetail-aboutTable__td {
    padding: 15px;
    width: 80%;
    border-right: 1px solid #ddd;
}
.-fourColumn {
    /* 4カラム（2列×2）に分ける場合 */
    flex-wrap: wrap;
}
.-fourColumn .schDetail-aboutTable__trIn {
    display: flex;
    width: 50%;
}
.-fourColumn .schDetail-aboutTable__th { width: 40%; }
.-fourColumn .schDetail-aboutTable__td { width: 60%; }

/* =========================================================
    検索条件・絞り込みエリア（list.php）
========================================================= */
.searchFormArea {
    background-color: #ffffff;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.searchFormArea__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    border-bottom: 2px solid #1b2a47;
    padding-bottom: 10px;
}

.searchFormArea__title {
    font-size: 14px;
    margin: 0;
    color: #666;
}
.searchFormArea__title span {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

.searchFormArea__result {
    font-size: 14px;
}
.searchFormArea__result .large {
    font-size: 24px;
    font-weight: bold;
    color: #1b2a47;
}

/* 絞り込みボタン群（簡易デザイン） */
.filter-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.filter-btn {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    background-color: #eef4f8;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #dcdcdc;
    transition: 0.2s;
}
.filter-btn.is-active {
    background-color: #1b2a47;
    color: #fff;
    border-color: #1b2a47;
}
.filter-more {
    width: 100%;
    padding: 15px 0;
    background-color: #f4f5f7;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    border: none;
    color: #1b2a47;
    font-weight: bold;
}

/* ユーティリティ（表示件数・ソート） */
.utility-row {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 30px;
    font-size: 12px;
    align-items: center;
}
.utility-row select {
    padding: 5px;
    border: 1px solid #ccc;
}

/* =========================================================
    物件一覧（グリッド表示：PCで2列）
========================================================= */
.property-grid-list.-col2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列に設定 */
    gap: 40px 20px;
    margin-bottom: 50px;
}

/* 物件カード（トップページから流用） */
.property-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s;
}
.property-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.property-card__link { display: block; text-decoration: none; color: #333; }

.property-card__upper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eee;
}
.property-card__upper img { width: 100%; height: 100%; object-fit: cover; }
.property-card__label {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #1b2a47;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
}
.label-new { font-size: 10px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px; margin-bottom: 2px; }
.label-price { font-size: 18px; font-weight: bold; }
.label-price span { font-size: 10px; font-weight: normal; margin-left: 2px; }

.property-card__lower { padding: 15px; }
.property-title { font-size: 15px; font-weight: bold; margin: 0 0 10px 0; }
.property-desc { font-size: 12px; color: #666; margin: 0 0 5px 0; }
.property-tag { display: inline-block; font-size: 10px; padding: 4px 8px; margin-top: 5px; border-radius: 2px; }
.property-tag.-mansion { background-color: #f2eef8; color: #6a4c9c; }
.property-tag.-new-house { background-color: #eef4f8; color: #3d79a5; }

/* =========================================================
    ページネーション（ページ送り）
========================================================= */
.pagination-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 80px;
}
.numList {
    display: flex;
    gap: 10px;
}
.numList .num {
    font-size: 14px;
}
.numList .num a {
    color: #666;
    padding: 5px;
}
.numList .num.-current a {
    color: #1b2a47;
    font-weight: bold;
    border-bottom: 2px solid #1b2a47;
}
.next-btn {
    background-color: #1b2a47;
    color: #ffffff;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    transition: opacity 0.3s;
}
.next-btn:hover { opacity: 0.8; }

/* =========================================================
    詳細ページ：パンくずリスト（detail.php）
========================================================= */
.breadcrumbArea {
    background-color: #f9f9f9;
}
.breadcrumb {
    display: flex;
    gap: 10px;
    padding: 20px 40px;
    font-size: 12px;
    color: #666;
    max-width: 1000px;
    margin: 0 auto;
}
.breadcrumb a:hover { text-decoration: underline; }

/* =========================================================
    詳細ページ：メイン情報エリア
========================================================= */
.schDetailArea {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.schDetailArea .upperBlock {
    position: relative;
    margin-bottom: 20px;
}
.schDetailArea .upperBlock img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}
.schDetailArea .price {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(27, 42, 71, 0.9);
    color: #fff;
    padding: 10px 20px;
    font-size: 32px;
    font-weight: bold;
}
.schDetailArea .price .unit { font-size: 14px; margin-left: 5px; }

.schDetailArea .middleBlock .title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.schDetailArea .middleBlock .des {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

.schDetailArea .lowerBlock {
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.schDetailArea .status {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-weight: bold;
}
.schDetailArea .status .cat {
    background: #f2eef8;
    color: #6a4c9c;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
}

.schDetailArea .btnWrap {
    text-align: center;
    margin-bottom: 10px;
}

/* =========================================================
    詳細ページ：ギャラリー（サムネイル）
========================================================= */
.schDetail-gallery {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 0 20px;
}
.schDetail-gallery__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.schDetail-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s;
}
.schDetail-gallery__item img:hover { opacity: 0.7; }

/* =========================================================
    詳細ページ：担当者レポート
========================================================= */
.schDetail-report {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 40px;
    background-color: #f4f5f7;
    display: flex;
    gap: 40px;
    align-items: center;
}
.schDetail-report__staff {
    text-align: center;
    width: 200px;
    flex-shrink: 0;
}
.schDetail-report__staffImg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
}
.schDetail-report__staffImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.schDetail-report__info {
    flex: 1;
}
.schDetail-report__info .telNum {
    font-size: 28px;
    font-weight: bold;
    color: #d94b4b;
    margin: 10px 0;
}

/* =========================================================
    詳細ページ：物件概要テーブル
========================================================= */
.schDetail-about {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
}
.schDetail-aboutOpen__btn {
    background: #1b2a47;
    color: #fff;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
    transition: opacity 0.3s;
}
.schDetail-aboutOpen__btn:hover { opacity: 0.8; }

.schDetail-aboutTable {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    font-size: 14px;
}
.schDetail-aboutTable__tr {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.schDetail-aboutTable__th {
    background: #f4f5f7;
    padding: 15px;
    width: 20%;
    font-weight: bold;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
}
.schDetail-aboutTable__td {
    padding: 15px;
    width: 80%;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
    line-height: 1.6;
}
.-fourColumn {
    flex-wrap: wrap;
}
.-fourColumn .schDetail-aboutTable__trIn {
    display: flex;
    width: 50%;
}
.-fourColumn .schDetail-aboutTable__th { width: 40%; }
.-fourColumn .schDetail-aboutTable__td { width: 60%; }

/* =========================================================
    物件カード共通（おすすめ物件用）
========================================================= */
.property-card { background: #ffffff; transition: transform 0.3s; border: 1px solid #eee; }
.property-card:hover { transform: translateY(-5px); }
.property-card__link { display: block; text-decoration: none; color: #333; }
.property-card__upper { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; }
.property-card__upper img { width: 100%; height: 100%; object-fit: cover; }
.property-card__label { position: absolute; bottom: 0; left: 0; background-color: #1b2a47; color: #ffffff; display: flex; flex-direction: column; padding: 5px 10px; }
.label-new { font-size: 10px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px; margin-bottom: 2px; letter-spacing: 0.1em; }
.label-price { font-size: 18px; font-weight: bold; }
.label-price span { font-size: 10px; font-weight: normal; margin-left: 2px; }
.property-card__lower { padding: 15px; }
.property-title { font-size: 14px; font-weight: bold; margin: 0 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.property-desc { font-size: 12px; color: #666; margin: 0 0 5px 0; }
.property-tag { display: inline-block; font-size: 10px; padding: 4px 8px; margin-top: 5px; border-radius: 2px; }
.property-tag.-mansion { background-color: #f2eef8; color: #6a4c9c; }
.property-tag.-new-house { background-color: #eef4f8; color: #3d79a5; }

/* スライダーコンテナ */
.commonSection.-reco { background-color: #fff; padding: 60px 0; }
.js-reco-swiper { padding: 20px 40px 60px; }
.js-reco-swiper .swiper-button-prev, .js-reco-swiper .swiper-button-next {
    background-color: #1b2a47; color: #ffffff; width: 40px; height: 40px; border-radius: 50%; opacity: 0.8;
}
.js-reco-swiper .swiper-button-prev:after, .js-reco-swiper .swiper-button-next:after { font-size: 16px; }

/* =========================================================
    パンくずリスト
========================================================= */
.breadcrumbArea { background-color: #f9f9f9; border-bottom: 1px solid #eee; }
.breadcrumb { display: flex; gap: 10px; padding: 20px 40px; font-size: 12px; color: #666; max-width: 1000px; margin: 0 auto; }
.breadcrumb a:hover { text-decoration: underline; }

/* =========================================================
    ログインページ：メインレイアウト
========================================================= */
.page-ttl {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 50px 0 40px;
}
.page-ttl__sub { display: block; font-size: 12px; color: #666; margin-top: 5px; }

.login-wrap {
    background-color: #f0f1f4; /* 薄いグレー背景 */
    padding: 60px 20px;
    margin-bottom: 80px;
}
.login-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 60px; /* 左右のカラムの隙間 */
    background: #f0f1f4;
}
.login-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 共通見出し・テキスト */
.login-ttl {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
}
.login-attention {
    font-size: 12px;
    color: #666;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

/* 左側：ログインフォームのパーツ */
.login-list {
    margin-bottom: 30px;
}
.login-list__item {
    margin-bottom: 20px;
    display: flex;
    align-items: center; /* ラベルと入力を横並びに */
    border-bottom: 1px solid #ccc; /* 入力欄の下線 */
    padding-bottom: 10px;
}
.login-item__name {
    width: 120px;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
}
.login-name__en {
    display: block;
    font-size: 10px;
    font-weight: normal;
    color: #999;
}
.login-item__input {
    flex: 1;
}
.c-inputText {
    width: 100%;
    padding: 10px;
    border: none; /* 枠線を消す */
    background: transparent;
    font-size: 14px;
    outline: none;
}

/* チェックボックス（ログイン状態を保持） */
.c-checkRadioWrap {
    display: flex;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
    margin-top: 10px;
}
.c-checkbox { margin-right: 8px; }

/* リンクテキスト（パスワード再発行など） */
.login-pw { font-size: 13px; }
.login-pw a { color: #6a778b; text-decoration: underline; }
.login-pw a:hover { text-decoration: none; }

/* =========================================================
    基本設定・共通パーツ（form.php）
========================================================= */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #ffffff;
}
a { text-decoration: none; color: #333; }
ul { list-style: none; padding: 0; margin: 0; }

.innerBlock { max-width: 1000px; margin: 0 auto; width: 100%; }

/* 共通ボタン */
.c-btn {
    display: flex;
    justify-content: center;
    margin: 40px auto;
}
.c-btn button {
    background: #4a74b4; /* 登録ボタンのブルー */
    color: #fff;
    padding: 15px 80px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
}
.c-btn button:hover { opacity: 0.8; }

/* =========================================================
    ヘッダー
========================================================= */
header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 40px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-logo {
    font-size: 20px;
    font-weight: bold;
    color: #004284;
    display: flex;
    align-items: center;
}
.header-logo a {
    display: block;
}
.header-logo img {
    height: 60px; /* 画像の高さ。ヘッダーの大きさに合わせて変更してください */
    width: auto;
    display: block;
}
.header-nav {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-left: 40px;
    margin-right: auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}
.search-box {
    display: flex;
    align-items: center;
    background-color: #f4f5f7;
    border-radius: 20px;
    padding: 8px 16px;
}
.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 200px;
    font-size: 13px;
}
.search-box input::placeholder { color: #999; }
.search-btn {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23004284" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/%3E%3C/svg%3E') no-repeat center;
    background-size: 16px;
    width: 16px;
    height: 16px;
    border: none;
    cursor: pointer;
}
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 30px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.hamburger-btn::before, .hamburger-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
}

/* =========================================================
    メガメニュー（ドロップダウン）の設定
========================================================= */
/* ヘッダーの高さいっぱいにホバー判定を持たせる */
.nav-item {
    display: flex;
    align-items: center;
    height: 80px; /* ヘッダーの高さに合わせてください */
}

/* ドロップダウンメニューの大きな白背景 */
.dropdown-menu {
    position: absolute;
    top: 100%; /* ヘッダーのすぐ下に配置 */
    left: 0;
    width: 100%; /* 画面幅いっぱいに広げる */
    background-color: #ffffff;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05); /* 下方向にフワッと影 */
    
    /* 初期状態は透明にして隠す */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

/* 親要素（買いたい）にマウスが乗ったら表示する */
.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* ドロップダウンの中央寄せレイアウト */
.dropdown-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px;
    display: flex;
    gap: 60px;
}

/* 左側：タイトル */
.dropdown-left {
    width: 180px;
    border-right: 1px solid #ddd;
    display: flex;
    align-items: flex-start;
}
.dropdown-title {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.2em;
    color: #333;
    margin: 0;
}

/* 右側：3列のリンク群 */
.dropdown-right {
    display: flex;
    gap: 80px;
    flex: 1;
}
.dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 25px; /* 縦の隙間 */
}
.dropdown-list a {
    font-size: 13px;
    color: #333;
    font-weight: normal;
}
.dropdown-list a:hover {
    color: #004284;
}

/* =========================================================
    パンくずリスト
========================================================= */
.breadcrumbArea { background-color: #f9f9f9; border-bottom: 1px solid #eee; }
.breadcrumb { display: flex; gap: 10px; padding: 20px 40px; font-size: 12px; color: #666; max-width: 1000px; margin: 0 auto; }
.breadcrumb a:hover { text-decoration: underline; }

/* =========================================================
    フォームページ：タイトル・特徴エリア
========================================================= */
.page-ttl {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 50px 0 20px;
}
.page-ttl__sub { display: block; font-size: 12px; color: #666; margin-top: 5px; }

.subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
}

.feature_list {
    max-width: 800px;
    margin: 0 auto 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.feature_list li {
    display: flex;
    border: 1px solid #ddd;
    background: #fff;
    align-items: stretch;
}
.feature_subtitle {
    background-color: #f4f8fc;
    color: #3d79a5;
    font-weight: bold;
    padding: 20px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ddd;
}
.feature_text {
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}
.feature_text p { margin: 0; }
.feature_text .main_text { font-weight: bold; }
.feature_sublist { padding-left: 20px; margin-top: 5px; color: #666; }
.feature_sublist li { list-style-type: disc; }

/* =========================================================
    フォームページ：入力エリア
========================================================= */
.form-bg {
    background-color: #f0f1f4; /* 薄いグレー背景 */
    padding: 60px 20px;
}
.form-inner {
    max-width: 800px;
    margin: 0 auto;
}
.sch-ttl {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}
.sch-ttl__sub {
    font-size: 12px;
    font-weight: normal;
    color: #666;
    margin: 5px 0 0 0;
}

/* 入力テーブル */
.c-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.c-table th, .c-table td {
    border-bottom: 1px solid #e0e0e0;
    padding: 20px;
    vertical-align: top;
    font-size: 14px;
}
.c-table th {
    width: 25%;
    background-color: #f9f9f9;
    text-align: left;
    font-weight: bold;
}
.c-table td {
    width: 75%;
    background-color: transparent; /* 背景と同じ色にする場合は透明に */
}
.c-table__required {
    background-color: #1b2a47; /* 必須バッジのネイビー */
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 入力パーツ */
.c-inputText, .c-select, .c-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
}
.c-textarea {
    resize: vertical;
    height: 120px;
}
.c-inputWrap { margin-bottom: 10px; }
.c-inputWrap:last-child { margin-bottom: 0; }
.c-inputWrap__text { display: block; font-size: 12px; margin-bottom: 5px; }
.c-inputWrap__text.-notice { color: #d94b4b; margin-top: 5px; }

/* チェックボックス・ラジオボタン */
.c-tableList {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.c-checkRadioWrap {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.c-checkbox { margin-right: 5px; }

/* メールに関する注意事項 */
.about-mail {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin-top: 40px;
}
.about-mail__ttl { margin: 0 0 10px 0; }
.about-mail__text { margin: 0 0 15px 0; }
.secure-sign { margin-top: 20px; }
.toPrivacy a { color: #004284; text-decoration: underline; }

/* =========================================================
    フッター
========================================================= */
.site-footer { background-color: #1a2a44; color: #ffffff; padding: 60px 40px 30px; font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; }
.footerInner { max-width: 1100px; margin: 0 auto; }
.footerNavWrap { display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footerNav__ttl { font-size: 14px; font-weight: bold; margin: 0 0 20px 0; color: #ffffff; }
.footerNav__listWrap { display: flex; gap: 40px; }
.footerNav__item { margin-bottom: 15px; }
.footerNav__link { font-size: 12px; color: #ffffff; text-decoration: none; transition: opacity 0.3s; }
.footerNav__link:hover { opacity: 0.7; }
.footerLoginWrap { margin-bottom: 40px; }
.footerBnrRow { display: flex; gap: 2px; margin-bottom: 2px; }
.footerBnr { flex: 1; background-color: #6a778b; transition: opacity 0.3s; }
.footerBnr:hover { opacity: 0.8; }
.footerBnr__link { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 110px; color: #ffffff; text-decoration: none; }
.footerBnr__text.-sub { font-size: 13px; letter-spacing: 0.15em; margin-bottom: 6px; }
.footerBnr__text.-main { font-size: 13px; font-weight: bold; letter-spacing: 0.05em; }
.footerInfo { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px; margin-bottom: 40px; padding-right: 60px; }
.footerInfoLogo img { max-width: 350px; height: auto; }
.footerInfoRow { display: flex; align-items: baseline; justify-content: flex-end; gap: 15px; margin-bottom: 8px; }
.footerInfoRow__tel { font-size: 24px; font-weight: bold; margin: 0; }
.footerInfoRow__text { font-size: 12px; margin: 0; color: #d0d5dc; }
.footerBottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 20px; }
.copyright { font-size: 11px; color: #ffffff; letter-spacing: 0.05em; }

.sitemap-page {
    background-color: #f0f1f4; /* ページ全体の薄いグレー背景 */
    padding-bottom: 80px;
}
.sitemap-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px;
}
.sitemap-main-ttl {
    font-size: 24px;
    letter-spacing: 0.2em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.sitemap-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.sitemap-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.sitemap-section {
    margin-bottom: 60px;
}
.sitemap-section__ttl {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;
    color: #1b2a47;
    margin-bottom: 30px;
}
.sitemap-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 均等に4列配置 */
    gap: 30px 20px; /* 縦の隙間30px、横の隙間20px */
    list-style: none;
    padding: 0;
    margin: 0;
}
.sitemap-list a {
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: opacity 0.3s;
}
.sitemap-list a:hover {
    opacity: 0.6;
}

/* =========================================================
    エリアから探す
========================================================= */

.search-page {
    background-color: #fff;
    padding-bottom: 80px;
}
.search-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
}
.search-main-ttl {
    font-size: 24px;
    letter-spacing: 0.2em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.search-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.search-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* タブ */
.search-tabs {
    display: flex;
}
.search-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    background-color: #dcdcdc;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-right: 1px solid #fff;
}
.search-tab:last-child { border-right: none; }
.search-tab.is-active {
    background-color: #666;
    color: #fff;
}

/* フォームエリア */
.search-form-wrap {
    background-color: #e8ebf0; /* 薄いブルーグレー */
    padding: 50px 40px;
}

/* エリア選択ブロック */
.area-block {
    margin-bottom: 40px;
}
.area-block__ttl {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
}
.area-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    font-size: 13px;
}
.area-grid label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.area-grid input { margin-right: 5px; }

/* 検索ボタン */
.search-submit-area {
    text-align: center;
    margin: 40px 0;
}
.search-count {
    font-size: 14px;
    margin-bottom: 10px;
}
.search-count span {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.btn-search-submit {
    background-color: #5b8bd0; /* 青いボタン */
    color: #fff;
    border: none;
    padding: 15px 60px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.btn-search-submit:hover { opacity: 0.8; }

/* 詳細条件ブロック */
.detail-block {
    margin-top: 60px;
}
.detail-block__ttl {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 20px;
}
.detail-table {
    width: 100%;
    border-top: 1px solid #ccc;
}
.detail-table tr {
    border-bottom: 1px solid #ccc;
}
.detail-table th {
    width: 150px;
    padding: 20px 10px;
    text-align: left;
    font-weight: normal;
    font-size: 13px;
    vertical-align: middle;
}
.detail-table td {
    padding: 20px 10px;
    font-size: 13px;
}
.detail-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    align-items: center;
}
.detail-inputs label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.detail-inputs input { margin-right: 5px; }
.c-select-box {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
.tilde { margin: 0 10px; }

/* =========================================================
    沿線・駅から探す
========================================================= */

.search-page {
    background-color: #fff;
    padding-bottom: 80px;
}
.search-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
}
.search-main-ttl {
    font-size: 24px;
    letter-spacing: 0.2em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.search-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.search-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* タブ */
.search-tabs {
    display: flex;
}
.search-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    background-color: #dcdcdc;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-right: 1px solid #fff;
}
.search-tab:last-child { border-right: none; }
.search-tab.is-active {
    background-color: #666;
    color: #fff;
}

/* フォームエリア */
.search-form-wrap {
    background-color: #e8ebf0;
    padding: 50px 40px;
}

/* 路線選択ブロック */
.area-block {
    margin-bottom: 40px;
}
.area-block__ttl {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}
.area-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    font-size: 13px;
}
.area-grid label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.area-grid input { margin-right: 5px; }

/* 検索ボタン */
.search-submit-area {
    text-align: center;
    margin: 40px 0;
}
.search-count {
    font-size: 14px;
    margin-bottom: 10px;
}
.search-count span {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.btn-search-submit {
    background-color: #5b8bd0;
    color: #fff;
    border: none;
    padding: 15px 60px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.btn-search-submit:hover { opacity: 0.8; }

/* 詳細条件ブロック */
.detail-block {
    margin-top: 60px;
}
.detail-block__ttl {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 20px;
}
.detail-table {
    width: 100%;
    border-top: 1px solid #ccc;
}
.detail-table tr {
    border-bottom: 1px solid #ccc;
}
.detail-table th {
    width: 150px;
    padding: 20px 10px;
    text-align: left;
    font-weight: normal;
    font-size: 13px;
    vertical-align: middle;
}
.detail-table td {
    padding: 20px 10px;
    font-size: 13px;
}
.detail-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    align-items: center;
}
.detail-inputs label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.detail-inputs input { margin-right: 5px; }
.c-select-box {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
.tilde { margin: 0 10px; }

/* =========================================================
    地図から探す
========================================================= */
.search-page {
    background-color: #fff;
    padding-bottom: 80px;
}

.search-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 上部のタイトル付きビジュアルエリア */
.map-visual-area {
    position: relative;
    max-width: 1000px;
    margin: 40px auto 20px;
    height: 200px;
    background-color: #e8ebf0; /* ダミー背景色 */
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* 背景の航空写真ダミー（実稼働時は差し替えてください） */
.map-visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}
.map-visual-title {
    position: relative;
    background: #fff;
    padding: 20px 40px;
    font-size: 32px;
    font-weight: normal;
    letter-spacing: 0.2em;
    color: #333;
    z-index: 1;
}
.map-visual-title span {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 5px;
    letter-spacing: 0.1em;
}

/* タブ */
.search-tabs {
    display: flex;
}
.search-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    background-color: #dcdcdc;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-right: 1px solid #fff;
}
.search-tab:last-child { border-right: none; }
.search-tab.is-active {
    background-color: #666;
    color: #fff;
}

/* フォーム・マップエリア */
.search-form-wrap {
    background-color: #e8ebf0;
    padding: 40px;
}

/* マップとリストの横並び */
.map-flex-container {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

/* 左側：Googleマップ */
.map-left-area {
    flex: 1;
    background-color: #fff;
    min-height: 500px;
    position: relative;
}
.map-left-area iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

/* 右側：物件リスト */
.map-right-area {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 500px;
    overflow-y: auto; /* スクロール可能にする */
    padding-right: 5px;
}
/* スクロールバーの装飾 */
.map-right-area::-webkit-scrollbar { width: 6px; }
.map-right-area::-webkit-scrollbar-track { background: #dcdcdc; }
.map-right-area::-webkit-scrollbar-thumb { background: #999; }

.map-property-card {
    display: flex;
    background-color: #fff;
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}
.map-property-card:hover {
    opacity: 0.8;
}
.map-property-card img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    margin-right: 15px;
}
.map-property-info {
    flex: 1;
}
.map-property-price {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}
.map-property-desc {
    font-size: 11px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* 使い方・注意点 */
.map-instruction {
    border-top: 1px solid #ccc;
    padding-top: 30px;
}
.map-instruction__ttl {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 20px 0;
}
.map-instruction__list {
    font-size: 12px;
    line-height: 2;
    color: #333;
}
.map-instruction__list dt {
    float: left;
    clear: left;
    width: 220px;
    font-weight: bold;
}
.map-instruction__list dd {
    margin-left: 220px;
    margin-bottom: 10px;
}
.map-instruction__note {
    font-size: 11px;
    color: #666;
    margin-top: 20px;
    clear: both;
}

/* =========================================================
    通勤時間から探す
========================================================= */

.search-page {
    background-color: #fff;
    padding-bottom: 80px;
}

.search-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 上部のタイトル付きビジュアルエリア */
.commute-visual-area {
    display: flex;
    max-width: 1000px;
    margin: 40px auto 20px;
    height: 250px;
    background-color: #fff;
}
.commute-visual-title {
    width: 300px;
    padding: 40px 0;
    font-size: 32px;
    font-weight: normal;
    letter-spacing: 0.1em;
    color: #333;
}
.commute-visual-title span {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 10px;
    letter-spacing: 0.1em;
}
.commute-visual-img {
    flex: 1;
    height: 100%;
    background-color: #e8ebf0; /* 画像が読み込めない時のダミー背景 */
}
.commute-visual-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* タブ */
.search-tabs {
    display: flex;
}
.search-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    background-color: #dcdcdc;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-right: 1px solid #fff;
}
.search-tab:last-child { border-right: none; }
.search-tab.is-active {
    background-color: #666;
    color: #fff;
}

/* フォームエリア */
.search-form-wrap {
    background-color: #e8ebf0; /* 薄いブルーグレー */
    padding: 50px 40px;
}

/* 通勤時間入力ブロック */
.commute-input-block {
    margin-bottom: 40px;
}
.commute-input-block__ttl {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
}
.commute-input-row {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}
.c-input-text {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 250px;
    font-size: 14px;
}
.c-select-box {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
}
.btn-add-condition {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px 15px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    color: #333;
}

/* 検索ボタン */
.search-submit-area {
    text-align: center;
    margin: 40px 0;
}
.btn-search-submit {
    background-color: #5b8bd0; /* 青いボタン */
    color: #fff;
    border: none;
    padding: 15px 80px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.btn-search-submit:hover { opacity: 0.8; }

/* 詳細条件ブロック */
.detail-block {
    margin-top: 60px;
}
.detail-block__ttl {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 20px;
}
.detail-table {
    width: 100%;
    border-top: 1px solid #ccc;
}
.detail-table tr {
    border-bottom: 1px solid #ccc;
}
.detail-table th {
    width: 150px;
    padding: 20px 10px;
    text-align: left;
    font-weight: normal;
    font-size: 13px;
    vertical-align: middle;
}
.detail-table td {
    padding: 20px 10px;
    font-size: 13px;
}
.detail-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    align-items: center;
}
.detail-inputs label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.detail-inputs input { margin-right: 5px; }
.tilde { margin: 0 10px; }

/* =========================================================
    こだわりから探す
========================================================= */

.search-page {
    background-color: #fff;
}

/* ページ上部のタイトル */
.search-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
}
.search-main-ttl {
    font-size: 24px;
    letter-spacing: 0.2em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.search-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* こだわり条件のカードリスト */
.kodawari-container {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
}
.kodawari-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列に配置 */
    gap: 40px 20px;
}
.kodawari-card {
    text-decoration: none;
    color: #333;
    display: block;
    transition: opacity 0.3s;
}
.kodawari-card:hover {
    opacity: 0.8;
}
.kodawari-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 15px;
    background-color: #eee;
}
.kodawari-card__en {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.1em;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}
.kodawari-card__ttl {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 5px 0;
}
.kodawari-card__sub {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* 下部の条件指定エリア */
.other-search-area {
    background-color: #f4f5f7; /* 薄いグレー */
    padding: 60px 20px;
}
.other-search-inner {
    max-width: 800px;
    margin: 0 auto;
}
.other-search-header {
    margin-bottom: 30px;
}
.other-search-main-ttl {
    font-size: 20px;
    letter-spacing: 0.2em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.other-search-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.other-search-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 30px;
}
.other-search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e5eaf2;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 20px 0;
    transition: background-color 0.3s, color 0.3s;
}
.other-search-btn:hover {
    background-color: #1b2a47;
    color: #fff;
}
.other-search-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #5b8bd0; /* 青色バナー */
    color: #fff;
    text-decoration: none;
    padding: 25px 0;
    border-radius: 4px;
    transition: opacity 0.3s;
}
.other-search-banner:hover {
    opacity: 0.8;
}
.other-search-banner span {
    font-size: 11px;
    font-weight: normal;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}
.other-search-banner strong {
    font-size: 18px;
    font-weight: bold;
}

/* =========================================================
    基本設定・共通パーツ（form.php）
========================================================= */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #ffffff;
}
a { text-decoration: none; color: #333; }
ul { list-style: none; padding: 0; margin: 0; }

.innerBlock { max-width: 1000px; margin: 0 auto; width: 100%; }

/* 共通ボタン */
.c-btn {
    display: flex;
    justify-content: center;
    margin: 40px auto;
}
.c-btn button {
    background: #4a74b4; /* 登録ボタンのブルー */
    color: #fff;
    padding: 15px 80px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
}
.c-btn button:hover { opacity: 0.8; }

/* =========================================================
    ヘッダー
========================================================= */
header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 40px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-logo {
    font-size: 20px;
    font-weight: bold;
    color: #004284;
    display: flex;
    align-items: center;
}
.header-logo svg {
    height: 24px;
    margin-right: 10px;
    fill: #004284;
}
.header-nav {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-left: 40px;
    margin-right: auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}
.search-box {
    display: flex;
    align-items: center;
    background-color: #f4f5f7;
    border-radius: 20px;
    padding: 8px 16px;
}
.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 200px;
    font-size: 13px;
}
.search-box input::placeholder { color: #999; }
.search-btn {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23004284" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/%3E%3C/svg%3E') no-repeat center;
    background-size: 16px;
    width: 16px;
    height: 16px;
    border: none;
    cursor: pointer;
}
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 30px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.hamburger-btn::before, .hamburger-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
}

/* =========================================================
    パンくずリスト
========================================================= */
.breadcrumbArea { background-color: #f9f9f9; border-bottom: 1px solid #eee; }
.breadcrumb { display: flex; gap: 10px; padding: 20px 40px; font-size: 12px; color: #666; max-width: 1000px; margin: 0 auto; }
.breadcrumb a:hover { text-decoration: underline; }

/* =========================================================
    フォームページ：タイトル・特徴エリア
========================================================= */
.page-ttl {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 50px 0 20px;
}
.page-ttl__sub { display: block; font-size: 12px; color: #666; margin-top: 5px; }

.subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
}

.feature_list {
    max-width: 800px;
    margin: 0 auto 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.feature_list li {
    display: flex;
    border: 1px solid #ddd;
    background: #fff;
    align-items: stretch;
}
.feature_subtitle {
    background-color: #f4f8fc;
    color: #3d79a5;
    font-weight: bold;
    padding: 20px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ddd;
}
.feature_text {
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}
.feature_text p { margin: 0; }
.feature_text .main_text { font-weight: bold; }
.feature_sublist { padding-left: 20px; margin-top: 5px; color: #666; }
.feature_sublist li { list-style-type: disc; }

/* =========================================================
    フォームページ：入力エリア
========================================================= */
.form-bg {
    background-color: #f0f1f4; /* 薄いグレー背景 */
    padding: 60px 20px;
}
.form-inner {
    max-width: 800px;
    margin: 0 auto;
}
.sch-ttl {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}
.sch-ttl__sub {
    font-size: 12px;
    font-weight: normal;
    color: #666;
    margin: 5px 0 0 0;
}

/* 入力テーブル */
.c-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.c-table th, .c-table td {
    border-bottom: 1px solid #e0e0e0;
    padding: 20px;
    vertical-align: top;
    font-size: 14px;
}
.c-table th {
    width: 25%;
    background-color: #f9f9f9;
    text-align: left;
    font-weight: bold;
}
.c-table td {
    width: 75%;
    background-color: transparent; /* 背景と同じ色にする場合は透明に */
}
.c-table__required {
    background-color: #1b2a47; /* 必須バッジのネイビー */
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 入力パーツ */
.c-inputText, .c-select, .c-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
}
.c-textarea {
    resize: vertical;
    height: 120px;
}
.c-inputWrap { margin-bottom: 10px; }
.c-inputWrap:last-child { margin-bottom: 0; }
.c-inputWrap__text { display: block; font-size: 12px; margin-bottom: 5px; }
.c-inputWrap__text.-notice { color: #d94b4b; margin-top: 5px; }

/* チェックボックス・ラジオボタン */
.c-tableList {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.c-checkRadioWrap {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.c-checkbox { margin-right: 5px; }

/* メールに関する注意事項 */
.about-mail {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin-top: 40px;
}
.about-mail__ttl { margin: 0 0 10px 0; }
.about-mail__text { margin: 0 0 15px 0; }
.secure-sign { margin-top: 20px; }
.toPrivacy a { color: #004284; text-decoration: underline; }

/* =========================================================
    フッター
========================================================= */
.site-footer { background-color: #1a2a44; color: #ffffff; padding: 60px 40px 30px; font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; }
.footerInner { max-width: 1100px; margin: 0 auto; }
.footerNavWrap { display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footerNav__ttl { font-size: 14px; font-weight: bold; margin: 0 0 20px 0; color: #ffffff; }
.footerNav__listWrap { display: flex; gap: 40px; }
.footerNav__item { margin-bottom: 15px; }
.footerNav__link { font-size: 12px; color: #ffffff; text-decoration: none; transition: opacity 0.3s; }
.footerNav__link:hover { opacity: 0.7; }
.footerLoginWrap { margin-bottom: 40px; }
.footerBnrRow { display: flex; gap: 2px; margin-bottom: 2px; }
.footerBnr { flex: 1; background-color: #6a778b; transition: opacity 0.3s; }
.footerBnr:hover { opacity: 0.8; }
.footerBnr__link { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 110px; color: #ffffff; text-decoration: none; }
.footerBnr__text.-sub { font-size: 13px; letter-spacing: 0.15em; margin-bottom: 6px; }
.footerBnr__text.-main { font-size: 13px; font-weight: bold; letter-spacing: 0.05em; }
.footerInfo { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px; margin-bottom: 40px; padding-right: 60px; }
.footerInfoLogo img { max-width: 350px; height: auto; }
.footerInfoRow { display: flex; align-items: baseline; justify-content: flex-end; gap: 15px; margin-bottom: 8px; }
.footerInfoRow__tel { font-size: 24px; font-weight: bold; margin: 0; }
.footerInfoRow__text { font-size: 12px; margin: 0; color: #d0d5dc; }
.footerBottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 20px; }
.copyright { font-size: 11px; color: #ffffff; letter-spacing: 0.05em; }

/* =========================================================
    基本設定・共通パーツ（login.php）
========================================================= */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #ffffff;
}
a { text-decoration: none; color: #333; }
ul { list-style: none; padding: 0; margin: 0; }

.innerBlock { max-width: 1000px; margin: 0 auto; width: 100%; }

/* 共通ボタン */
.c-btn {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.c-btn button, .c-btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #6a778b; /* ボタンのブルーグレー */
    color: #fff;
    width: 100%;
    max-width: 400px;
    height: 80px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s;
}
.c-btn button:hover, .c-btn a:hover { opacity: 0.8; }
.c-btn .en { font-size: 12px; letter-spacing: 0.1em; margin-bottom: 5px; font-weight: normal; }

/* =========================================================
    ヘッダー
========================================================= */
header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 40px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-logo {
    font-size: 20px;
    font-weight: bold;
    color: #004284;
    display: flex;
    align-items: center;
}
.header-logo svg {
    height: 24px;
    margin-right: 10px;
    fill: #004284;
}
.header-nav {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-left: 40px;
    margin-right: auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}
.search-box {
    display: flex;
    align-items: center;
    background-color: #f4f5f7;
    border-radius: 20px;
    padding: 8px 16px;
}
.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 200px;
    font-size: 13px;
}
.search-box input::placeholder { color: #999; }
.search-btn {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23004284" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/%3E%3C/svg%3E') no-repeat center;
    background-size: 16px;
    width: 16px;
    height: 16px;
    border: none;
    cursor: pointer;
}
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 30px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.hamburger-btn::before, .hamburger-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
}

/* =========================================================
    パンくずリスト
========================================================= */
.breadcrumbArea { background-color: #f9f9f9; border-bottom: 1px solid #eee; }
.breadcrumb { display: flex; gap: 10px; padding: 20px 40px; font-size: 12px; color: #666; max-width: 1000px; margin: 0 auto; }
.breadcrumb a:hover { text-decoration: underline; }

/* =========================================================
    ログインページ：メインレイアウト
========================================================= */
.page-ttl {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 50px 0 40px;
}
.page-ttl__sub { display: block; font-size: 12px; color: #666; margin-top: 5px; }

.login-wrap {
    background-color: #f0f1f4; /* 薄いグレー背景 */
    padding: 60px 20px;
    margin-bottom: 80px;
}
.login-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 60px; /* 左右のカラムの隙間 */
    background: #f0f1f4;
}
.login-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 共通見出し・テキスト */
.login-ttl {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
}
.login-attention {
    font-size: 12px;
    color: #666;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

/* 左側：ログインフォームのパーツ */
.login-list {
    margin-bottom: 30px;
}
.login-list__item {
    margin-bottom: 20px;
    display: flex;
    align-items: center; /* ラベルと入力を横並びに */
    border-bottom: 1px solid #ccc; /* 入力欄の下線 */
    padding-bottom: 10px;
}
.login-item__name {
    width: 120px;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
}
.login-name__en {
    display: block;
    font-size: 10px;
    font-weight: normal;
    color: #999;
}
.login-item__input {
    flex: 1;
}
.c-inputText {
    width: 100%;
    padding: 10px;
    border: none; /* 枠線を消す */
    background: transparent;
    font-size: 14px;
    outline: none;
}

/* チェックボックス（ログイン状態を保持） */
.c-checkRadioWrap {
    display: flex;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
    margin-top: 10px;
}
.c-checkbox { margin-right: 8px; }

/* リンクテキスト（パスワード再発行など） */
.login-pw { font-size: 13px; }
.login-pw a { color: #6a778b; text-decoration: underline; }
.login-pw a:hover { text-decoration: none; }

/* =========================================================
    フッター
========================================================= */
.site-footer { background-color: #1a2a44; color: #ffffff; padding: 60px 40px 30px; font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; }
.footerInner { max-width: 1250px; margin: 0 auto; }
.footerNavWrap { display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footerNav__ttl { font-size: 14px; font-weight: bold; margin: 0 0 20px 0; color: #ffffff; }
.footerNav__listWrap { display: flex; gap: 40px; }
.footerNav__item { margin-bottom: 15px; }
.footerNav__link { font-size: 12px; color: #ffffff; text-decoration: none; transition: opacity 0.3s; }
.footerNav__link:hover { opacity: 0.7; }
.footerLoginWrap { margin-bottom: 40px; }
.footerBnrRow { display: flex; gap: 2px; margin-bottom: 20px; }
.footerBnr { flex: 1; background-color: #6a778b; transition: opacity 0.3s; }
.footerBnr:hover { opacity: 0.8; }
.footerBnr__link { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 110px; color: #ffffff; text-decoration: none; }
.footerBnr__text.-sub { font-size: 13px; letter-spacing: 0.15em; margin-bottom: 6px; }
.footerBnr__text.-main { font-size: 13px; font-weight: bold; letter-spacing: 0.05em; }
.footerInfo { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px; margin-bottom: 40px; padding-right: 60px; }
.footerInfoLogo img { max-width: 350px; height: auto; }
.footerInfoRow { display: flex; align-items: baseline; justify-content: flex-end; gap: 15px; margin-bottom: 8px; }
.footerInfoRow__tel { font-size: 24px; font-weight: bold; margin: 0; }
.footerInfoRow__text { font-size: 12px; margin: 0; color: #d0d5dc; }
.footerBottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 20px; }
.copyright { font-size: 11px; color: #ffffff; letter-spacing: 0.05em; }

/* =========================================================
    不動産売却について
========================================================= */

.sell-page {
    background-color: #f4f5f7; /* 全体的に薄いグレー背景 */
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    color: #333;
}

/* メインビジュアル */
.sell-mv {
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #1b2a47;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.sell-mv img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.sell-mv-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.sell-mv-content h1 {
    font-size: 36px;
    letter-spacing: 0.1em;
    margin: 0 0 15px;
}
.sell-mv-content p {
    font-size: 16px;
    margin: 0;
}

/* ==============================================
   不動産売却について・売却ポイント4箇条エリア（赤枠部分）
============================================== */

/* エリア全体の背景と余白 */
.sell-points-area {
    background-color: #f0f3f8; /* 薄いグレーブルーの背景 */
    padding: 60px 0;
}

/* カードを横並びにするコンテナ */
.sell-points-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px; /* カード間の隙間 */
}

/* 各白いカードのデザイン */
.point-card {
    background-color: #fff;
    width: 25%; /* 4つ並べるので約25% */
    padding: 40px 20px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* ホバー時のアクション（少し浮き上がる） */
.point-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

/* 小さな「POINT」の文字 */
.point-label {
    font-size: 11px;
    color: #999;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
}

/* 番号「01」など */
.point-num {
    font-size: 32px;
    font-weight: bold;
    color: #1b2a47; /* ネイビー */
    margin: 0 0 10px 0;
    line-height: 1;
}

/* タイトル「早く、正確に」など */
.point-title {
    font-size: 15px;
    font-weight: bold;
    color: #1b2a47;
    margin: 0 0 15px 0;
}

/* 区切り線（短い横線） */
.point-line {
    width: 20px;
    height: 1px;
    background-color: #1b2a47;
    border: none;
    margin: 0 0 15px 0;
}

/* 説明テキスト */
.point-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 25px 0;
    flex-grow: 1; /* テキストの長さが違っても下の矢印の位置を揃える */
}

/* 下向きの矢印（V字） */
.point-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #999;
    border-bottom: 1.5px solid #999;
    transform: rotate(45deg);
}

/* ==============================================
   不動産売却について・簡単査定フォームセクション
============================================== */
.sell-quick-satei {
    background-color: #1b2a47; /* ネイビー背景 */
    padding: 60px 20px 80px;
}
.quick-satei-header {
    text-align: center;
    margin-bottom: 40px;
}
.quick-satei-title {
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.1em;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}
.quick-satei-title .l-txt {
    font-size: 24px;
}
/* タイトル下の白い線と吹き出しの三角 */
.quick-satei-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 1px;
    background-color: #fff;
}
.quick-satei-title::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid #fff;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    z-index: 2;
}

/* 白いフォームボックス */
.quick-satei-box {
    background-color: #fff;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.quick-satei-inputs {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 40px;
}
.quick-input {
    width: 23%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    outline: none;
}
.quick-satei-btn-wrap {
    text-align: center;
}
.btn-satei-submit {
    background-color: #0d2b5c;
    color: #fff;
    border: none;
    padding: 15px 80px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s;
}
.btn-satei-submit:hover {
    opacity: 0.8;
}

/* ==============================================
   不動産売却について・売却ポイントセクション
============================================== */
.sell-points-section {
    padding: 60px 20px;
    background-color: #fff;
}
.sell-points-list {
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.sell-point-item {
    margin-bottom: 15px;
    cursor: pointer;
}
.sell-point-head {
    display: flex;
    align-items: stretch;
    background-color: #eff3f8; /* 薄い青/グレー背景 */
    transition: background-color 0.3s;
}
.sell-point-head:hover {
    background-color: #e2eaf4;
}
.point-label {
    background-color: #1b2a47; /* ネイビー */
    color: #fff;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.point-label span {
    font-size: 18px;
    margin-left: 5px;
}
.point-title {
    flex: 1;
    padding: 20px;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.point-icon {
    width: 50px;
    position: relative;
}
/* 右側のＶ字アイコン */
.point-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #5b8bd0;
    border-right: 1px solid #5b8bd0;
    transform: translate(-50%, -70%) rotate(45deg);
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .quick-satei-inputs {
        flex-wrap: wrap;
    }
    .quick-input {
        width: 48%; /* 2列にする */
        margin-bottom: 15px;
    }
    .quick-satei-title {
        font-size: 16px;
    }
    .quick-satei-title .l-txt {
        font-size: 20px;
    }
    .quick-satei-box {
        padding: 30px 20px;
    }
    .btn-satei-submit {
        width: 100%;
        padding: 15px;
    }
    .point-title {
        font-size: 13px;
        padding: 15px;
    }
}

/* ==============================================
   POINT 01 東宝ハウス王子は、高く早く売却します！
============================================== */
.point-detail-section {
    background-color: #f5f7fa; /* 全体の薄いグレー背景 */
    padding: 80px 20px 100px;
}

/* 見出し部分 */
.point-detail-header {
    text-align: center;
    margin-bottom: 50px;
}
.point-detail-label {
    font-size: 18px;
    color: #5b8bd0; /* 青色 */
    font-weight: bold;
    margin: 0 0 15px 0;
    letter-spacing: 0.1em;
}
.point-detail-label span {
    font-size: 13px;
}
/* ラベル下の短い青線 */
.point-detail-label::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background-color: #5b8bd0;
    margin: 15px auto 0;
}
.point-detail-title {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
}

/* カードを並べるグリッド（flexboxを使用） */
.point-detail-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* カード同士のすき間 */
}

/* カードの基本デザイン */
.detail-card {
    background-color: #fff;
    padding: 50px 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* ほんのり影をつける */
    border-radius: 4px;
    box-sizing: border-box;
}
.detail-card-title {
    color: #1b2a47; /* ネイビー */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 30px 0;
    letter-spacing: 0.1em;
}
.detail-card-img {
    text-align: center;
    margin-bottom: 20px;
}
.detail-card-img img {
    max-width: 100%;
    height: auto;
}
.detail-card-text {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.8;
    margin: 0;
}

/* 半分幅のカード（1・2行目） */
.detail-card.-half {
    width: calc(50% - 10px); /* すき間(20px)の半分を引く */
}

/* 全幅のカード（3・4行目） */
.detail-card.-full {
    width: 100%;
}

/* 全幅カードの中身を横並びにする */
.detail-card-content.-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.detail-card-desc {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.8;
}
.detail-card-desc p {
    margin: 0;
}
.detail-card-img.-side {
    width: 250px;
    margin-bottom: 0;
}
.detail-card-img.-logos {
    width: 300px;
    margin-bottom: 0;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .point-detail-section {
        padding: 50px 20px 60px;
    }
    .point-detail-title {
        font-size: 18px;
    }
    .detail-card {
        padding: 40px 20px;
    }
    .detail-card.-half {
        width: 100%; /* スマホでは半分カードも全幅にして縦に並べる */
    }
    .detail-card-content.-flex {
        flex-direction: column; /* 全幅カードの中身も縦並びに */
    }
    .detail-card-img.-side,
    .detail-card-img.-logos {
        width: 100%;
        max-width: 300px;
        margin-bottom: 20px;
    }
    /* 4行目のロゴ画像の順番を、テキストの上に持ってくる */
    .detail-card-content.-flex .detail-card-img.-logos {
        order: -1; 
    }
}

/* ==============================================
   POINT 02 東宝ハウス王子は「高預かり」しません！
============================================== */
.point-detail-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: #1b2a47; /* ネイビー */
    margin-top: 20px;
    letter-spacing: 0.1em;
}

/* コンテンツエリアの幅制限 */
.point-detail-content {
    max-width: 900px;
    margin: 0 auto;
}

/* 質問バー */
.question-bar {
    background-color: #eef3f8; /* 薄い青背景 */
    color: #5b8bd0; /* 青文字 */
    text-align: center;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    border-radius: 4px;
}
.q-icon {
    margin-right: 5px;
    font-size: 18px;
}

/* CASE 01 の左右レイアウト */
.case-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}
.case-card-wrap {
    width: 50%;
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-radius: 4px;
    text-align: center;
}
.case-card-wrap img {
    max-width: 100%;
    height: auto;
}
.case-text-wrap {
    width: 50%;
}
.case-title {
    font-size: 16px;
    font-weight: bold;
    color: #1b2a47;
    letter-spacing: 0.1em;
}

/* 宣言文エリア */
.policy-box {
    text-align: center;
    margin-bottom: 50px;
}
.policy-title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: #0d2b5c;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    padding-bottom: 15px;
    position: relative;
}
.policy-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: #5b8bd0;
}
.policy-text {
    font-size: 14px;
    color: #666;
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin: 0;
}

/* 3枚のギャラリー画像 */
.policy-gallery {
    display: flex;
    gap: 10px; /* 画像同士のすき間 */
}
.policy-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .case-flex {
        flex-direction: column;
        gap: 20px;
    }
    .case-card-wrap,
    .case-text-wrap {
        width: 100%;
    }
    .case-text-wrap {
        text-align: center;
    }
    .policy-text {
        font-size: 13px;
        text-align: left; /* スマホでは左揃えが読みやすい */
    }
    .policy-gallery {
        flex-direction: column;
    }
    .policy-gallery img {
        width: 100%;
    }
}

/* ==============================================
   不動産売却について・グループ創業50年の実績
============================================== */
/* 青い帯の見出し */
.blue-heading-bar {
    background-color: #729cd6; /* 画像に近い少し明るめの青 */
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 4px;
    margin-bottom: 30px;
}
.blue-heading-bar span {
    font-size: 20px; /* 数字などを少し強調する */
}

/* 画像だけを置くカード枠（余白をなくして画像をピッタリ収める） */
.case-card-wrap.-img-only {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}
.case-card-wrap.-img-only img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    /* 画像自体に白い背景と影をつけてカードっぽく見せる */
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* --- スマホ対応の微調整 --- */
@media screen and (max-width: 768px) {
    .blue-heading-bar {
        font-size: 14px;
        padding: 15px;
    }
    .blue-heading-bar span {
        font-size: 18px;
    }
}

/* ==============================================
   本当に売れるの？
============================================== */
.consult-section {
    background-color: #fff;
    padding: 60px 20px 100px;
}

/* 吹き出し見出し */
.speech-bubble-title {
    max-width: 600px;
    margin: 0 auto 50px;
    padding: 30px;
    border: 2px solid #729cd6; /* 青枠 */
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #1b2a47;
    line-height: 1.8;
    position: relative;
    background-color: #fff;
    letter-spacing: 0.1em;
}
/* 吹き出しのしっぽ（外側の青い三角） */
.speech-bubble-title::after {
    content: '';
    position: absolute;
    bottom: -15px; 
    left: 50%;
    transform: translateX(-50%);
    border-top: 15px solid #729cd6;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
/* 吹き出しのしっぽ（内側の白い三角で中を抜く） */
.speech-bubble-title::before {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 13px solid #fff;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    z-index: 1;
}

/* 相談リスト（2列レイアウト） */
.consult-list {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px; /* 縦20px、横40pxのすき間 */
}
.consult-list li {
    width: calc(50% - 20px); /* 半分幅にして2列にする */
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
/* 丸で囲まれた「？」アイコン */
.q-mark {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #729cd6;
    border-radius: 50%;
    color: #729cd6;
    font-size: 12px;
    margin-right: 10px;
    flex-shrink: 0; /* 文字が多くてもアイコンが潰れないようにする */
    margin-top: 2px;
}

/* セカンドオピニオンBOX */
.second-opinion-box {
    background-color: #2b3d5c; /* ネイビー背景 */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    max-width: 900px;
    margin: 0 auto 60px;
}
.so-title {
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 30px 0;
    position: relative;
    padding-bottom: 20px;
    letter-spacing: 0.1em;
}
/* タイトル下の白い線 */
.so-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 1px;
    background-color: #fff;
}
.so-text {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}
/* 白枠ボタン */
.btn-so {
    display: inline-block;
    padding: 15px 50px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}
.btn-so:hover {
    background-color: #fff;
    color: #2b3d5c; /* ホバーで文字をネイビーに */
}

/* 下部の濃い青い帯 */
.blue-footer-bar {
    background-color: #003e7e; /* 濃いめの青 */
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: 0.1em;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .speech-bubble-title {
        font-size: 16px;
        padding: 20px;
    }
    .consult-list li {
        width: 100%; /* スマホでは縦1列にする */
    }
    .second-opinion-box {
        padding: 40px 20px;
    }
    .so-title {
        font-size: 18px;
    }
    .so-text {
        font-size: 13px;
        text-align: left; /* スマホでは左揃えの方が見やすい */
    }
    .btn-so {
        width: 100%;
        box-sizing: border-box;
    }
    .blue-footer-bar {
        font-size: 14px;
    }
}

/* ==============================================
   スマホ対応（画面が狭い場合は2列×2行にする）
============================================== */
@media screen and (max-width: 768px) {
    .sell-points-inner {
        flex-wrap: wrap; /* 折り返しを許可 */
    }
    .point-card {
        width: calc(50% - 10px); /* 2列にする */
        padding: 30px 15px;
    }
}
@media screen and (max-width: 480px) {
    .point-card {
        width: 100%; /* さらに狭い場合は1列にする */
    }
}

/* 4つの特徴メニュー */
.sell-features-menu {
    max-width: 1000px;
    margin: -40px auto 40px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 10;
    padding: 0 20px;
}
.sell-feature-box {
    background: #fff;
    flex: 1;
    padding: 30px 10px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-weight: bold;
    font-size: 14px;
    color: #1b2a47;
}

/* 共通セクション設定 */
.sell-section {
    max-width: 1000px;
    margin: 0 auto 60px;
    background: #fff;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.sell-sec-ttl {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    color: #1b2a47;
    margin: 0 0 40px;
    letter-spacing: 0.1em;
}

/* CTA（お問い合わせ）ブロック */
.sell-cta {
    background-color: #1a2a44; /* 紺色背景 */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 60px;
}
.sell-cta-ttl {
    font-size: 22px;
    margin: 0 0 20px;
}
.sell-cta-desc {
    font-size: 14px;
    margin: 0 0 30px;
}
.sell-cta-btn {
    display: inline-block;
    background-color: #fff;
    color: #1a2a44;
    text-decoration: none;
    padding: 15px 80px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    transition: opacity 0.3s;
}
.sell-cta-btn:hover {
    opacity: 0.8;
}

/* 実績・データ（グラフエリア） */
.sell-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.sell-data-card {
    background: #f9f9f9;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
}
.sell-data-card h4 {
    font-size: 16px;
    margin: 0 0 20px;
    color: #333;
}
.sell-data-img {
    width: 100%;
    height: auto;
    max-width: 250px;
    margin: 0 auto;
}

/* 選ばれる理由などのリスト */
.sell-reason-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sell-reason-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.sell-reason-item:last-child {
    border-bottom: none;
}
.sell-reason-num {
    background: #1b2a47;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 20px;
}
.sell-reason-text {
    font-size: 16px;
    font-weight: bold;
}

/* 表（相場データなど） */
.sell-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}
.sell-table th, .sell-table td {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    font-size: 14px;
}
.sell-table th {
    background: #1b2a47;
    color: #fff;
}

/* サポート・流れ */
.sell-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.sell-flow-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
}
.sell-flow-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    margin-bottom: 15px;
}
.sell-flow-card h4 {
    font-size: 15px;
    margin: 0 0 10px;
    color: #1b2a47;
}
.sell-flow-card p {
    font-size: 12px;
    color: #666;
    text-align: left;
    margin: 0;
}

/* ==============================================
   SERVICE 01 - 住まい本来の価値をカンタンにすぐに届けます
============================================== */
.service-detail-section {
    background-color: #fff;
    padding: 80px 20px 100px;
}

/* 見出し部分 */
.service-detail-header {
    text-align: center;
    margin-bottom: 50px;
}
.service-detail-label {
    font-size: 16px;
    color: #0d2b5c; /* 濃いブルー */
    font-weight: bold;
    margin: 0 0 15px 0;
    letter-spacing: 0.1em;
}
.service-detail-label span {
    font-size: 12px;
}
/* ラベル下の細い線 */
.service-detail-label::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background-color: #0d2b5c;
    margin: 15px auto 0;
}
.service-detail-title {
    font-size: 22px;
    color: #0d2b5c;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0 0 20px 0;
}
.service-detail-subtitle {
    font-size: 16px;
    font-weight: bold;
    color: #0d2b5c;
    letter-spacing: 0.1em;
    margin: 0;
}

/* 画像エリア */
.service-image-wrap {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}
.service-image-wrap img {
    max-width: 100%;
    height: auto;
}

/* 解説テキストエリア */
.service-desc-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.service-desc-title {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #0d2b5c;
    letter-spacing: 0.1em;
    padding: 15px 60px;
    margin: 0 0 30px 0;
    /* 上下のライン */
    border-top: 1px solid #0d2b5c;
    border-bottom: 1px solid #0d2b5c;
}
.service-desc-text {
    font-size: 14px;
    color: #333;
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin: 0;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .service-detail-section {
        padding: 50px 20px 60px;
    }
    .service-detail-title {
        font-size: 16px;
    }
    .service-detail-subtitle {
        font-size: 14px;
    }
    .service-desc-title {
        padding: 15px 30px; /* スマホでは左右の余白を少し狭める */
        font-size: 14px;
    }
    .service-desc-text {
        font-size: 13px;
        text-align: left; /* スマホでは左揃えが読みやすいです */
    }
}

/* ==============================================
   SERVICE 02 - 本当に安心できる保証
============================================== */
.service-flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    gap: 50px;
}
.service-img-col {
    width: 40%;
    text-align: center;
}
.service-img-col img {
    max-width: 100%;
    height: auto;
}
.service-text-col {
    width: 60%;
}
.service-text {
    font-size: 14px;
    color: #333;
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin: 0;
}
.note-text {
    display: block;
    margin-top: 15px;
    color: #666;
}

/* --- スマホ対応への追記 --- */
/* (すでに記述がある @media screen and (max-width: 768px) の中に以下を追記してください) */
@media screen and (max-width: 768px) {
    .service-flex-box {
        flex-direction: column; /* 縦並びに変更 */
        gap: 20px;
    }
    .service-img-col,
    .service-text-col {
        width: 100%;
    }
    .service-text {
        text-align: left; /* スマホでは左揃え */
    }
}

/* ==============================================
   SERVICE 03 - 充実のアフターサポートで人生に安心と豊かさを
============================================== */
.thc-features-wrap {
    max-width: 900px;
    margin: 60px auto 0;
}

/* 共通カードスタイル（薄いグレー背景） */
.thc-main-card,
.thc-card {
    background-color: #f7f9fa; /* 薄いグレー */
    border-radius: 4px;
    padding: 30px;
    box-sizing: border-box;
}

/* テキスト共通 */
.thc-card-title {
    color: #0d2b5c; /* ネイビー */
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.1em;
}
.thc-text {
    font-size: 12px;
    color: #333;
    line-height: 2;
    margin: 20px 0 0;
    letter-spacing: 0.05em;
}
.thc-text .note {
    color: #666;
    display: inline-block;
    margin-top: 10px;
}

/* 1. メインカード (Club Off プレミアム) */
.thc-main-card {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
}
.thc-main-text {
    flex: 1;
}
.thc-main-img {
    width: 45%;
    text-align: right;
}
.thc-main-img img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 2. グリッドカード群 (2列) */
.thc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1の2列レイアウト */
    gap: 20px;
}
/* 見出しと「※お買い換え〜」バッジを横並びにする */
.thc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.thc-badge {
    font-size: 11px;
    color: #0d2b5c;
    font-weight: bold;
}

/* 3. 区切り線 */
.thc-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 60px 0;
}

/* 4. 下部バナーリンク */
.thc-banners {
    display: flex;
    gap: 20px;
}
.thc-banner-link {
    position: relative; /* 重ねる基準 */
    width: 50%;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    transition: opacity 0.3s;
}
.thc-banner-link:hover {
    opacity: 0.8; /* ホバーで少し暗く */
}
.thc-banner-link img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像自体を少し暗くして文字を目立たせる */
    filter: brightness(0.8);
}
/* 画像の上に重なるボタン風テキスト */
.thc-banner-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .thc-main-card {
        flex-direction: column;
    }
    .thc-main-img {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    .thc-grid {
        grid-template-columns: 1fr; /* スマホでは縦1列 */
    }
    .thc-banners {
        flex-direction: column; /* バナーも縦並び */
    }
    .thc-banner-link {
        width: 100%;
    }
}

/* =========================================================
    サービス・未来カレンダー
========================================================= */

.mirai-page {
    background-color: #fff;
    padding-bottom: 80px;
}

/* ページ上部のタイトルとナビゲーション */
.mirai-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 0;
}
.mirai-main-ttl {
    font-size: 24px;
    letter-spacing: 0.2em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.mirai-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.mirai-nav {
    display: flex;
    margin-top: 30px;
    border-bottom: 1px solid #ddd;
}
.mirai-nav-item {
    padding: 15px 30px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}
.mirai-nav-item:hover, 
.mirai-nav-item.is-active {
    border-bottom-color: #1b2a47;
    color: #1b2a47;
}

/* タブナビゲーション */
.mirai-tabs {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0 20px;
}
.mirai-tab {
    padding: 8px 30px;
    border: 1px solid #ccc;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    transition: 0.3s;
}

.mirai-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
    border-color: #1b2a47;
}

/* コンテンツ共通 */
.mirai-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.mirai-section {
    margin-top: 80px;
}

/* 画像とテキストボックスの重なりレイアウト */
.mirai-overlap-right {
    position: relative;
    margin-top: 60px;
}
.mirai-img-box {
    text-align: right;
}
.mirai-img-box img {
    width: 80%;
    max-width: 800px;
    height: auto;
    display: inline-block;
}
.mirai-text-box {
    background-color: #f4f5f7;
    padding: 40px;
    width: 45%;
    position: absolute;
    bottom: -30px;
    left: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.mirai-box-ttl {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 15px 0;
    color: #1b2a47;
}
.mirai-box-txt {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

/* 左右分割レイアウト（テキストとグレー背景） */
.mirai-flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 100px;
}
.mirai-text-area {
    flex: 1;
}
.mirai-gray-box {
    flex: 1;
    background-color: #f4f5f7;
    padding: 50px 40px;
}
.mirai-sec-ttl {
    font-size: 22px;
    line-height: 1.5;
    margin: 0 0 20px 0;
    color: #1b2a47;
    font-weight: normal;
}
.mirai-sec-ttl.center {
    text-align: center;
}
.mirai-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}
.mirai-box-sub-ttl {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 15px 0;
    color: #333;
}

/* 中央テキストとカレンダー表画像 */
.mirai-center-text {
    text-align: center;
    margin-bottom: 40px;
}
.mirai-table-img img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
}
.mirai-note {
    font-size: 11px;
    color: #999;
    margin-top: 10px;
    text-align: right;
}

/* フロー（流れ）エリア */
.mirai-bg-gray {
    background-color: #f9f9f9;
    padding: 60px 0;
    margin-top: 100px;
}
.mirai-flow-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}
.mirai-step-box {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 40px;
    margin-top: 40px;
    text-align: center;
}
.mirai-step {
    margin-bottom: 10px;
}
.mirai-step-num {
    display: inline-block;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}
.mirai-step-txt {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
}
.mirai-step-arrow {
    color: #ccc;
    margin: 15px 0;
    font-size: 12px;
}

/* アクションボタン */
.mirai-btn-area {
    text-align: center;
    margin-top: 40px;
}
.mirai-btn {
    display: inline-block;
    background-color: #1b2a47;
    color: #fff;
    padding: 20px 60px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    border-radius: 4px;
    transition: opacity 0.3s;
}
.mirai-btn:hover {
    opacity: 0.8;
}

.mirai-bottom-cta {
    text-align: center;
    margin-top: 80px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* =========================================================
    THANKS.php
========================================================= */

.thanks-wrap {
    background-color: #f0f1f4;
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 80px;
}
.thanks-inner {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 60px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.thanks-ttl {
    font-size: 24px;
    font-weight: bold;
    color: #1b2a47;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #1b2a47;
}
.thanks-text {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 40px;
}
.thanks-text span {
    display: block;
    margin-bottom: 15px;
}
.btn-back-home {
    display: inline-block;
    background: #6a778b;
    color: #fff;
    padding: 15px 80px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.3s;
}
.btn-back-home:hover {
    opacity: 0.8;
}

/* =========================================================
    無料売却査定
========================================================= */

.flow-page {
    background-color: #fff;
    padding-bottom: 80px;
}

/* ページ上部のタイトル */
.flow-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.flow-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
}
.flow-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* タブナビゲーション */
.flow-tabs {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0 20px;
}
.flow-tab {
    padding: 8px 30px;
    border: 1px solid #ccc;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    transition: 0.3s;
}
.flow-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
    border-color: #1b2a47;
}
.flow-tab:hover {
    opacity: 0.8;
}

/* メインコンテンツ枠 */
.flow-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.flow-sec-ttl {
    text-align: center;
    font-size: 18px;
    color: #333;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

/* ステップ部分 */
.flow-steps-wrap {
    background-color: #f4f5f7; /* 薄いグレー背景 */
    border-radius: 4px;
    overflow: hidden;
}
.flow-step {
    text-align: center;
    padding: 40px 20px;
    border-bottom: 1px solid #e0e0e0;
}
.flow-step:last-child {
    border-bottom: none;
}
/* アクティブ（強調）ステップ */
.flow-step.is-active {
    background-color: #1b2a47;
    color: #fff;
    border-bottom: none;
}

.flow-step-num {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    display: block;
    color: #999;
}
.flow-step.is-active .flow-step-num {
    color: #ccc;
}
.flow-step-ttl {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 15px 0;
}
.flow-step-desc {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}
.flow-step.is-active .flow-step-desc {
    color: #fff;
}

/* 下部のポイント部分 */
.flow-points-wrap {
    margin-top: 80px;
    text-align: center;
}
.flow-point {
    margin-bottom: 40px;
}
.flow-point-num {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 5px;
    display: block;
}
.flow-point-ttl {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
}
.flow-point-desc {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* =========================================================
    無料売却査定・入力情報確認ページ
========================================================= */

.satei-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル */
.satei-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 40px;
}
.satei-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0 0 5px 0;
    font-weight: normal;
}
.satei-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
    letter-spacing: 0.1em;
}

/* 背景エリア */
.satei-form-bg {
    background-color: #e8ebf0; /* 薄いグレー背景 */
    padding: 60px 20px;
}
.satei-form-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* セクションタイトル */
.satei-sec-ttl {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px 0;
    letter-spacing: 0.1em;
}

/* 確認項目の行 */
.confirm-row {
    display: flex;
    border-top: 1px solid #c0c0c0;
    padding: 25px 0;
}
/* 最後の行の下にもボーダーを引く */
.confirm-group .confirm-row:last-of-type {
    border-bottom: 1px solid #c0c0c0;
}

/* 項目の見出し（左側） */
.confirm-label {
    width: 250px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: flex-start;
}

/* 入力内容の表示（右側） */
.confirm-value {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    /* 長いテキストでも折り返すように */
    word-break: break-all;
}

/* ボタンエリア */
.confirm-btn-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
}
.btn-back, .btn-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    padding: 20px 0;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.3s, transform 0.3s;
    cursor: pointer;
    border: none;
}

/* 修正するボタン */
.btn-back {
    background-color: #5b8bd0;
    color: #fff;
}

/* 送信するボタン */
.btn-submit {
    background-color: #5b8bd0; /* 画像の通り青色に統一 */
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-back:hover, .btn-submit:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .confirm-row {
        flex-direction: column;
        gap: 10px;
        padding: 15px 0;
    }
    .confirm-label {
        width: 100%;
        color: #666; /* スマホ時は少し色を変えて見やすく */
        font-size: 12px;
    }
    .confirm-btn-area {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .btn-back, .btn-submit {
        width: 100%;
        max-width: 300px;
    }
}

/* =========================================================
    無料売却査定・送信完了ページ
========================================================= */

.satei-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル */
.satei-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 40px;
}
.satei-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0 0 5px 0;
    font-weight: normal;
}
.satei-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
    letter-spacing: 0.1em;
}

/* 完了メッセージエリア（グレー背景） */
.satei-complete-bg {
    background-color: #e8ebf0; /* 薄いグレー背景 */
    padding: 100px 20px;
    text-align: center;
}
.satei-complete-inner {
    max-width: 800px;
    margin: 0 auto;
}
.satei-complete-ttl {
    font-size: 20px;
    font-weight: normal;
    color: #333;
    margin: 0 0 40px 0;
    letter-spacing: 0.1em;
}
.satei-complete-txt {
    font-size: 14px;
    line-height: 2;
    color: #333;
    margin: 0 0 60px 0;
}

/* TOPに戻るボタン */
.btn-back-top {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    padding: 20px 0;
    background-color: #5b8bd0; /* 青いボタン */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-back-top:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .satei-complete-bg {
        padding: 60px 20px;
    }
    .satei-complete-ttl {
        font-size: 18px;
    }
    .satei-complete-txt {
        font-size: 13px;
    }
}

/* =========================================================
    無料会員登録サービス
========================================================= */

.member-page {
    background-color: #fff;
    color: #333;
    padding-bottom: 80px;
}

/* ヘッダーエリア */
.member-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.member-main-ttl {
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.member-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
}

/* タブナビゲーション */
.member-tabs {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0 20px;
}
.member-tab {
    padding: 8px 30px;
    border: 1px solid #ccc;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    transition: 0.3s;
}
.member-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
    border-color: #1b2a47;
}

/* 物件数ハイライト */
.member-stats-wrap {
    background-color: #f9f9f9;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 60px;
}
.member-stats-ttl {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}
.member-stats-inner {
    display: flex;
    justify-content: center;
    gap: 60px;
}
.stat-box {
    text-align: center;
}
.stat-box dt {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}
.stat-box dd {
    font-size: 36px;
    font-weight: normal;
    margin: 0;
    color: #333;
    letter-spacing: 0.05em;
}
.stat-box.-total dd {
    color: #999;
}

/* 6つのメリット（アイコンリスト） */
.member-benefits-grid {
    max-width: 900px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 20px;
}
.benefit-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px 15px;
    text-align: center;
    background: #fff;
}
.benefit-card img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}
.benefit-card p {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    line-height: 1.5;
}

/* CTAボタン */
.member-cta-wrap {
    text-align: center;
    margin: 40px 0 60px;
}
.member-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px; /* ← 幅を制限して、左の丸いバッジとの被りを防ぎます */
    margin: 30px auto 0; /* ← 左右をautoにすることで中央寄せにします */
    padding: 16px 20px;
    background-color: #cc5451; /* ← ここを青から赤色に変更 */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    position: relative;
    box-sizing: border-box;
    transition: opacity 0.3s;
}
.member-btn:hover {
    opacity: 0.8;
}

/* 各詳細セクション共通 */
.member-section {
    padding: 80px 20px;
}
.member-section.-bg-gray {
    background-color: #f4f5f7;
}
.member-sec-inner {
    max-width: 900px;
    margin: 0 auto;
}
.member-sec-ttl {
    font-size: 22px;
    font-weight: normal;
    color: #1b2a47;
    margin: 0 0 30px;
    text-align: center;
}
.member-sec-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 40px;
}

/* 左右レイアウト用 */
.flex-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}
.flex-img {
    flex: 1;
}
.flex-img img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    background: #fff;
}
.flex-text {
    flex: 1;
}

/* 未公開物件イメージ */
.private-property-img {
    text-align: center;
    margin-bottom: 40px;
}
.private-property-img img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
    会社概要
========================================================= */

.company-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル */
.company-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.company-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.company-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* タブナビゲーション */
.company-tabs {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: flex;
    gap: 5px;
    padding: 0 20px;
}
.company-tab {
    padding: 12px 30px;
    background-color: #e5eaf2;
    color: #1b2a47;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}
.company-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
}
.company-tab:hover {
    opacity: 0.8;
}

/* 会社概要エリア（薄いグレー背景） */
.company-info-wrap {
    background-color: #f4f5f7;
    padding: 60px 0;
    margin-bottom: 80px;
}
.company-info-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.company-sec-ttl {
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 40px 0;
    letter-spacing: 0.1em;
}

/* 会社情報テーブル（2カラム） */
.company-table-wrap {
    display: flex;
    gap: 40px;
}
.company-table {
    flex: 1;
    width: 100%;
    border-collapse: collapse;
}
.company-table th, .company-table td {
    padding: 15px 10px;
    font-size: 13px;
    line-height: 1.6;
    vertical-align: top;
    border-bottom: 1px solid #e0e0e0;
}
.company-table th {
    width: 120px;
    text-align: left;
    font-weight: bold;
}

/* 代表挨拶エリア */
.message-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 80px;
}
.message-flex {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}
.message-text-area {
    flex: 1;
}
.message-text-area p {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 20px;
}
.message-img-area {
    width: 400px;
    flex-shrink: 0;
}
.message-img-area img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}
.ceo-name {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.ceo-name span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

/* ボタンエリア */
.company-btn-area {
    text-align: center;
    margin-top: 40px;
}
.btn-blue {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #5b8bd0; /* 青色ボタン */
    color: #fff;
    padding: 20px 80px;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    transition: opacity 0.3s;
}
.btn-blue:hover {
    opacity: 0.8;
}

/* =========================================================
無料売却査定
========================================================= */

.satei-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル */
.satei-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 40px;
}
.satei-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0 0 5px 0;
    font-weight: normal;
}
.satei-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
    letter-spacing: 0.1em;
}

/* フォームエリア背景 */
.satei-form-bg {
    background-color: #e8ebf0; /* 薄いグレー背景 */
    padding: 60px 20px;
}
.satei-form-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* セクションタイトル */
.satei-sec-ttl {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px 0;
    letter-spacing: 0.1em;
}

/* フォームの行 */
.satei-form-row {
    display: flex;
    border-top: 1px solid #c0c0c0;
    padding: 25px 0;
}
.satei-form-row:last-of-type {
    border-bottom: 1px solid #c0c0c0;
}

/* フォームのラベル側（左） */
.satei-form-label {
    width: 250px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
}
.required-mark {
    background-color: #1b2a47; /* ネイビー */
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    margin-left: 15px;
    border-radius: 2px;
    font-weight: normal;
}
.optional-mark {
    background-color: #999; /* グレー */
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    margin-left: 15px;
    border-radius: 2px;
    font-weight: normal;
}

/* フォームの入力側（右） */
.satei-form-input {
    flex: 1;
    font-size: 14px;
}

/* 各種入力パーツ */
.c-select {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 14px;
    min-width: 150px;
    border-radius: 2px;
}
.c-input-text {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.c-input-text.short {
    width: 120px;
}
.c-input-text.medium {
    width: 300px;
}
.c-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 14px;
    height: 120px;
    box-sizing: border-box;
    border-radius: 2px;
    resize: vertical;
}

/* フレックス配置用 */
.flex-inputs {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
}
.flex-inputs:last-child {
    margin-bottom: 0;
}
.radio-group {
    display: flex;
    gap: 30px;
    padding-top: 10px;
}
.radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.radio-group input[type="radio"] {
    margin-right: 8px;
    transform: scale(1.2);
}

/* 詳細項目エリア（マンション名など） */
.detail-item-group {
    margin-top: 20px;
}
.detail-row {
    display: flex;
    align-items: center;
    border-top: 1px solid #e0e0e0;
    padding: 15px 0;
}
.detail-label {
    width: 150px;
    font-size: 13px;
    color: #666;
}
.detail-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 個人情報の取り扱い文言 */
.privacy-note {
    font-size: 11px;
    color: #666;
    line-height: 1.8;
    margin-top: 40px;
}
.privacy-note a {
    color: #5b8bd0;
    text-decoration: underline;
}

/* 送信ボタン */
.satei-submit-area {
    text-align: center;
    margin-top: 40px;
}
.btn-submit {
    background-color: #5b8bd0; /* 青いボタン */
    color: #fff;
    border: none;
    padding: 20px 80px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-submit:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .satei-form-row {
        flex-direction: column;
        gap: 15px;
    }
    .satei-form-label {
        width: 100%;
        padding-top: 0;
    }
    .flex-inputs {
        flex-wrap: wrap;
    }
    .radio-group {
        flex-wrap: wrap;
        gap: 15px;
    }
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* =========================================================
会社案内・アクセス
========================================================= */

.access-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル（会社概要と共通） */
.company-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.company-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.company-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* タブナビゲーション（会社概要と共通） */
.company-tabs {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: flex;
    gap: 5px;
    padding: 0 20px;
}
.company-tab {
    padding: 12px 30px;
    background-color: #e5eaf2;
    color: #1b2a47;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}
.company-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
}
.company-tab:hover {
    opacity: 0.8;
}

/* マップとアクセス情報のエリア */
.access-map-area {
    background-color: #f4f5f7; /* 下部背景色 */
    padding-bottom: 60px;
    position: relative;
}
.access-map-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.access-iframe-wrap {
    width: 100%;
    height: 450px;
    margin-bottom: -30px; /* 下のテキストボックスと少し重ねる場合 */
    position: relative;
    z-index: 1;
}
.access-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 住所・アクセス情報のグレーボックス */
.access-info-box {
    background-color: #f4f5f7;
    padding: 50px 40px;
    max-width: 800px;
    margin: 0;
    position: relative;
    z-index: 2;
}
.access-info-text {
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    color: #333;
}

/* 案内ボタンエリア */
.access-btn-wrap {
    max-width: 1000px;
    margin: 60px auto;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0 20px;
}
.btn-access-guide {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 20px 40px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    transition: all 0.3s;
}
.btn-access-guide:hover {
    background-color: #f4f5f7;
    opacity: 0.8;
}

/* ギャラリー（店舗写真） */
.access-gallery-wrap {
    background-color: #f4f5f7;
    padding: 60px 0;
}
.access-gallery-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 20px;
}
.access-gallery-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: #ddd;
}

/* =========================================================
会社案内・弊社の特徴
========================================================= */

.strength-page {
    background-color: #fff;
    padding-bottom: 120px;
    color: #333;
}

/* ページ上部のタイトル（会社案内共通） */
.company-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.company-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.company-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* タブナビゲーション（会社案内共通） */
.company-tabs {
    max-width: 1000px;
    margin: 0 auto 80px;
    display: flex;
    gap: 5px;
    padding: 0 20px;
}
.company-tab {
    padding: 12px 30px;
    background-color: #e5eaf2;
    color: #1b2a47;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}
.company-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
}
.company-tab:hover {
    opacity: 0.8;
}

/* ジグザグレイアウトのコンテナ */
.strength-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 120px; /* ブロック間の余白 */
}

/* 各ブロックの設定 */
.strength-block {
    position: relative;
    width: 100%;
}

/* 画像部分 */
.strength-img {
    width: 75%;
    height: auto;
    display: block;
}
.strength-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    background-color: #eee;
}

/* 画像を右寄せにする場合 */
.strength-img.right {
    margin-left: auto;
}

/* テキストボックス部分 */
.strength-text {
    position: absolute;
    width: 50%;
    background-color: #f4f5f7; /* 薄いグレー背景 */
    padding: 50px 40px;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    /* 上下に少しずらして重ねる */
    top: 50%;
    transform: translateY(-20%);
}

/* テキストボックスを左に重ねる場合 */
.strength-text.left {
    left: 0;
}

/* テキストボックスを右に重ねる場合 */
.strength-text.right {
    right: 0;
}

.strength-ttl {
    font-size: 18px;
    font-weight: bold;
    color: #1b2a47;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.strength-desc {
    font-size: 13px;
    line-height: 2;
    color: #333;
    margin: 0;
}

/* スマホ対応などのレスポンシブ（必要に応じて調整） */
@media screen and (max-width: 768px) {
    .strength-container { gap: 60px; }
    .strength-img { width: 100%; }
    .strength-text {
        position: relative;
        width: 90%;
        margin: -40px auto 0;
        top: 0;
        transform: none;
    }
}

/* =========================================================
会社案内・スタッフ一覧
========================================================= */

.staff-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル（会社案内共通） */
.company-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.company-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.company-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* タブナビゲーション（会社案内共通） */
.company-tabs {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: flex;
    gap: 5px;
    padding: 0 20px;
}
.company-tab {
    padding: 12px 30px;
    background-color: #e5eaf2;
    color: #1b2a47;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}
.company-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
}
.company-tab:hover {
    opacity: 0.8;
}

/* メッセージボックス */
.staff-message-wrap {
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 0 20px;
}
.staff-message-box {
    background-color: #f4f5f7; /* 薄いグレー背景 */
    padding: 60px 50px;
    max-width: 800px;
}
.staff-message-ttl {
    font-size: 20px;
    font-weight: normal;
    color: #1b2a47;
    margin: 0 0 20px 0;
    line-height: 1.6;
    letter-spacing: 0.1em;
}
.staff-message-txt {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* スタッフリスト（4列グリッド） */
.staff-list-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.staff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
}
.staff-card {
    text-decoration: none;
    color: #333;
    display: block;
    transition: opacity 0.3s;
}
.staff-card:hover {
    opacity: 0.8;
}
.staff-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #eee;
}
.staff-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.staff-card:hover .staff-img img {
    transform: scale(1.05); /* ホバー時に画像を少しズーム */
}
.staff-name {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
}
.staff-name-en {
    font-size: 11px;
    color: #999;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .staff-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホ時は2列 */
        gap: 30px 15px;
    }
    .staff-message-box {
        padding: 30px 20px;
    }
}

/* =========================================================
会社案内・グループ案内
========================================================= */

.group-page {
    background-color: #fff;
    padding-bottom: 0; /* 下部がグレー背景で終わるため0に設定 */
    color: #333;
}

/* ページ上部のタイトル（会社案内共通） */
.company-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.company-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.company-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* タブナビゲーション（会社案内共通） */
.company-tabs {
    max-width: 1000px;
    margin: 0 auto 80px;
    display: flex;
    gap: 5px;
    padding: 0 20px;
}
.company-tab {
    padding: 12px 30px;
    background-color: #e5eaf2;
    color: #1b2a47;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}
.company-tab.is-active {
    background-color: #1b2a47;
    color: #fff;
}
.company-tab:hover {
    opacity: 0.8;
}

/* グループ紹介（テキストと地図） */
.group-intro-wrap {
    max-width: 1000px;
    margin: 0 auto 80px;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
}
.group-intro-text {
    flex: 1;
}
.group-intro-text h3 {
    font-size: 22px;
    font-weight: normal;
    margin: 0 0 20px;
    color: #1b2a47;
    letter-spacing: 0.1em;
}
.group-intro-text p {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}
.group-intro-map {
    flex: 1;
    text-align: right;
}
.group-intro-map img {
    max-width: 100%;
    height: auto;
}

/* 沿革（ヒストリー） */
.group-history-wrap {
    max-width: 800px;
    margin: 0 auto 100px;
    padding: 0 20px;
}
.group-history-ttl {
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
    color: #333;
}
.history-list {
    border-left: 1px solid #ccc;
    padding-left: 40px;
    margin-left: 150px; /* 年号を左に配置するための余白 */
}
.history-item {
    position: relative;
    margin-bottom: 40px;
}
.history-item:last-child {
    margin-bottom: 0;
}
.history-item::before {
    content: "";
    position: absolute;
    left: -45.5px; /* ボーダーの位置に合わせる */
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #1b2a47;
}
.history-year {
    position: absolute;
    left: -150px;
    top: -2px;
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
}
.history-desc {
    font-size: 14px;
    margin: 0 0 5px 0;
    font-weight: bold;
    color: #333;
}
.history-sub {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* グループ会社一覧（グレー背景） */
.group-companies-wrap {
    background-color: #f4f5f7;
    padding: 80px 0;
}
.group-companies-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.company-area-block {
    display: flex;
    border-top: 1px solid #dcdcdc;
    padding: 40px 0;
}
.company-area-block:first-child {
    border-top: none;
    padding-top: 0;
}
.company-area-name {
    width: 200px;
    font-size: 16px;
    font-weight: bold;
    color: #1b2a47;
    flex-shrink: 0;
}
.company-list-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
}
.group-company-item h4 {
    font-size: 15px;
    margin: 0 0 10px;
    color: #333;
}
.group-company-item p {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}
.group-company-item a {
    color: #5b8bd0;
    text-decoration: none;
}
.group-company-item a:hover {
    text-decoration: underline;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .group-intro-wrap {
        flex-direction: column;
    }
    .group-intro-map {
        text-align: center;
    }
    .history-list {
        margin-left: 0;
        padding-left: 20px;
    }
    .history-year {
        position: static;
        display: block;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .history-item::before {
        left: -25.5px;
        top: 5px;
    }
    .company-area-block {
        flex-direction: column;
    }
    .company-area-name {
        margin-bottom: 20px;
    }
    .company-list-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
会社案内・採用情報
========================================================= */

.recruit-page {
    background-color: #fff;
    color: #333;
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    padding-bottom: 80px;
}

/* メインビジュアル（下部カーブ） */
.recruit-mv {
    position: relative;
    width: 100%;
    height: 800px;
    background-image: url('https://via.placeholder.com/1400x600/cccccc/ffffff?text=Recruit+Main+Visual');
    background-size: cover;
    background-position: center;
    /* 下部をゆるやかにカーブさせる */
    border-radius: 0 0 50% 50% / 0 0 15% 15%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}

/* 追加した背景画像 */
.recruit-mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったまま枠いっぱいに広げる */
    z-index: 1; /* テキストより後ろに配置 */
}

.recruit-mv-inner {
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
}

.recruit-mv-inner h1 {
    font-size: 48px;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
}

.recruit-mv-inner p {
    font-size: 18px;
    letter-spacing: 0.2em;
    margin: 0;
}

/* 共通セクション設定 */
.recruit-section {
    max-width: 1000px;
    margin: 0 auto 100px;
    padding: 0 20px;
}
.recruit-sec-ttl {
    text-align: center;
    font-size: 28px;
    font-weight: normal;
    color: #1b2a47;
    margin: 0 0 50px;
    letter-spacing: 0.1em;
}

/* メッセージエリア */
.recruit-message {
    display: flex;
    align-items: center;
    gap: 40px;
}
.recruit-message-text {
    flex: 1;
}
.recruit-message-text h2 {
    font-size: 24px;
    line-height: 1.6;
    margin: 0 0 20px;
    color: #1b2a47;
}
.recruit-message-text p {
    font-size: 15px;
    line-height: 2;
    color: #333;
}
.recruit-message-img {
    flex: 1;
    text-align: right;
}
.recruit-message-img img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ==============================================
   採用情報 メッセージセクション
============================================== */
.recruit-message-section {
    position: relative;
    background-color: #fff; /* 下部の背景色は白 */
    padding: 120px 20px 80px;
    overflow: hidden; /* カーブのはみ出しを隠す */
}

/* 背景のやわらかな曲線（薄いグレー） */
.recruit-message-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 85%; /* 下を少し空けて白を見せる */
    background-color: #f7f9fa; /* 薄いグレー */
    border-radius: 0 0 50% 50%; /* 下側を緩やかな円形にカーブさせる */
    z-index: 1;
}

.recruit-message-inner {
    position: relative;
    z-index: 2; /* 背景カーブの上にコンテンツを表示 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    gap: 40px;
}

/* --- 左側：テキストエリア --- */
.recruit-message-text {
    width: 55%;
}
.recruit-message-text p {
    font-size: 15px;
    color: #333;
    line-height: 2.6; /* ゆったりとした行間 */
    letter-spacing: 0.05em;
    margin-bottom: 45px; /* 段落ごとの広い余白 */
}
.recruit-message-text p:last-child {
    margin-bottom: 0;
}

/* --- 右側：画像コラージュエリア --- */
.recruit-message-images {
    width: 40%;
    position: relative;
    height: 600px; /* 画像を自由に配置するためのキャンバスサイズ */
}

/* 画像の共通設定 */
.rm-img {
    position: absolute;
    width: 220px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* ふんわりとした影 */
}

/* 個別の画像配置（絶対座標で少しずつずらす） */
.rm-img-1 {
    top: 0;
    right: 0;
    height: 300px;
}
.rm-img-2 {
    top: 35%;
    left: -20px; /* 少し左にはみ出させる */
    height: 250px;
    z-index: 2; /* 少し手前に出す */
}
.rm-img-3 {
    bottom: 0;
    right: 15%;
    height: 280px;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .recruit-message-section {
        padding: 60px 20px;
    }
    .recruit-message-section::before {
        height: 90%;
        border-radius: 0 0 30% 30%; /* スマホではカーブを少し緩やかに */
    }
    .recruit-message-inner {
        flex-direction: column;
    }
    .recruit-message-text,
    .recruit-message-images {
        width: 100%;
    }
    .recruit-message-text p {
        font-size: 14px;
        margin-bottom: 30px;
        line-height: 2.2;
    }
    /* スマホでは画像のキャンバスを少し小さくする */
    .recruit-message-images {
        height: 400px;
        margin-top: 20px;
    }
    .rm-img {
        width: 45%;
    }
    .rm-img-1 {
        top: 0;
        right: 0;
        height: 220px;
    }
    .rm-img-2 {
        top: 25%;
        left: 0;
        height: 180px;
    }
    .rm-img-3 {
        bottom: 0;
        right: 10%;
        height: 200px;
    }
}

/* ==============================================
   東宝ハウスとは？ セクション
============================================== */
.recruit-about-section {
    background-color: #fff;
    padding: 80px 0 100px; /* 写真を画面幅いっぱいに広げるため左右のpaddingは0にする */
    overflow: hidden; /* 斜めの写真が画面外にはみ出すのを隠す */
}

/* 見出し部分 */
.recruit-about-header {
    text-align: center;
    margin-bottom: 60px;
}
.about-dot {
    color: #1b2a47;
    font-size: 10px;
    display: block;
    margin-bottom: 10px;
}
.about-title {
    font-size: 16px;
    color: #1b2a47;
    letter-spacing: 0.1em;
    font-weight: normal;
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}
/* タイトル下の細い線 */
.about-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 1px;
    background-color: #1b2a47;
}

/* --- 斜めの写真ギャラリー --- */
.about-gallery-wrap {
    width: 100%;
    margin-bottom: 80px;
    /* 全体を少し斜め（約-5度）に傾ける */
    transform: rotate(-5deg);
}

/* スクロールさせる親要素 */
.about-images-scroll {
    display: flex;
    width: max-content;
    /* 40秒かけて左へスライド（数字を小さくすると速くなります） */
    animation: scroll-marquee-img 40s linear infinite;
}

/* 画像のグループ */
.about-images-marquee {
    display: flex;
    gap: 20px;           /* 画像と画像の間のすき間 */
    padding-right: 20px; /* 1セット目と2セット目の間のすき間（gapと同じにする） */
}

/* 各画像の設定（動画のように角丸にする） */
.about-images-marquee img {
    width: 300px;        /* お好みの幅に調整してください */
    height: 200px;       /* 高さを揃えると綺麗に並びます */
    object-fit: cover;   /* 指定したサイズに合わせて画像を切り抜き */
    border-radius: 10px; /* 動画のように角を丸くする */
}

/* スライドアニメーション */
@keyframes scroll-marquee-img {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 全体の半分（1セット分）進んだらリセット */
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .about-images-marquee img {
        width: 220px;  /* スマホでは少し画像を小さくする */
        height: 150px;
    }
}

.about-gallery-inner {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* 画面幅より広くして、傾けた時に端が切れないようにする */
    width: 120%;
    margin-left: -10%;
}

.about-img {
    width: 20%; /* 5枚の写真を均等に並べる */
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- メインメッセージ --- */
.about-message-box {
    text-align: center;
    margin-bottom: 60px;
    /* innerBlockの幅（padding: 0 20px）をここで再度適用する */
    padding: 0 20px; 
}
.about-message-title {
    font-size: 24px;
    color: #1b2a47; /* ネイビー */
    line-height: 2;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0;
}

/* --- 図解画像 --- */
.about-diagram-wrap {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
.about-diagram-wrap img {
    max-width: 100%;
    height: auto;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .recruit-about-section {
        padding: 50px 0 60px;
    }
    .about-gallery-wrap {
        transform: rotate(-3deg); /* スマホでは傾きを少し緩やかに */
        margin-bottom: 50px;
    }
    .about-gallery-inner {
        width: 150%; /* スマホでは画像を大きく見せるために幅を広げる */
        margin-left: -25%;
    }
    .about-img {
        height: 150px;
    }
    .about-message-title {
        font-size: 18px;
    }
}

/* ==============================================
   実績・ビジョン（スライダー風）セクション
============================================== */
.recruit-slider-section {
    background-color: #f0f4f8; /* 薄いブルーグレー背景 */
    padding: 80px 20px 100px;
}

/* スライダーコンテンツエリア */
.slider-content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto 50px;
    position: relative;
}

/* 左右の矢印ボタン */
.slider-nav-btn {
    width: 40px;
    height: 40px;
    background-color: #1b2a47; /* ネイビー */
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: opacity 0.3s;
}
.slider-nav-btn:hover {
    opacity: 0.8;
}

/* 中央のカードとテキストの横並び */
.slider-card-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1;
    margin: 0 30px;
}
/* テキストを左にする場合 */
.slider-card-flex.-reverse {
    flex-direction: row-reverse;
}

/* 白いカード部分 */
.slider-card-image {
    background-color: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    flex: 1;
    text-align: center;
}
.slider-card-image img {
    max-width: 100%;
    height: auto;
}

/* テキスト部分 */
.slider-card-text {
    width: 250px;
    color: #1b2a47; /* ネイビー */
    font-size: 18px;
    line-height: 2;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.slider-card-text .l-num {
    font-size: 36px;
    margin: 0 5px;
}

/* --- 下部のドットナビゲーション --- */
.slider-pagination-custom {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
/* 背景の点線 */
.page-line {
    position: absolute;
    bottom: 7px; /* ドットの中心に合わせる */
    left: 10%;
    width: 80%;
    height: 1px;
    border-bottom: 2px dotted #1b2a47; /* ネイビーの点線 */
    z-index: 1;
}
/* 各項目の設定 */
.page-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    position: relative;
    z-index: 2;
}
.page-text {
    font-size: 12px;
    font-weight: bold;
    color: #1b2a47;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}
.page-text .num {
    font-size: 16px;
    margin: 0 2px;
}
/* 丸いドット */
.page-dot {
    width: 16px;
    height: 16px;
    background-color: #c0c8d1; /* 非アクティブはグレー */
    border-radius: 50%;
    border: 3px solid #f0f4f8; /* 背景色と同じ枠線で点線を隠す */
}
/* アクティブ（現在）のドット */
.page-item.is-active .page-dot {
    background-color: #f0f4f8; /* 中は背景色 */
    border: 4px solid #1b2a47; /* ネイビーの太い枠線 */
    width: 20px;
    height: 20px;
    margin-top: -2px; /* 少し大きい分位置をずらす */
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .slider-content-wrap {
        margin: 0 -10px 40px; /* 矢印を画面端に寄せる */
    }
    .slider-card-flex,
    .slider-card-flex.-reverse {
        flex-direction: column; /* スマホでは縦並び */
        gap: 20px;
        margin: 0 10px;
    }
    .slider-card-image {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    .slider-card-text {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }
    .slider-nav-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
        position: absolute;
        top: 30%; /* 画像の横あたりに配置 */
        z-index: 10;
    }
    .slider-nav-btn.-prev { left: 0; }
    .slider-nav-btn.-next { right: 0; }
    
    .page-text {
        font-size: 10px;
    }
    .page-text .num {
        font-size: 14px;
    }
}

/* ==============================================
   なぜ、成長し続けるのか？ セクション
============================================== */
.recruit-reason-section {
    position: relative;
    background-color: #f0f4f8; /* 上のセクションと色を合わせる */
    overflow: hidden;
    padding-bottom: 100px;
}

/* 大きなネイビーの円形背景 */
.recruit-reason-bg {
    background-color: #1b2a47; /* ネイビー */
    width: 160%; /* 画面幅より大きくして緩やかなカーブを作る */
    margin-left: -30%; /* 中央に配置 */
    border-radius: 50%;
    padding: 100px 30%; /* margin-leftでずらした分をpaddingで戻す */
    box-sizing: border-box;
}

/* 白文字用の見出し調整 */
.recruit-about-header.-white .about-title::after {
    background-color: #fff;
}

/* 図解とテキストのレイアウト */
.reason-flex-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 900px;
    margin: 0 auto 60px;
}
.reason-img-col {
    width: 50%;
    text-align: right;
}
.reason-img-col img {
    max-width: 100%;
    height: auto;
}
.reason-text-col {
    width: 50%;
    color: #fff;
    font-size: 14px;
    line-height: 2.4;
    letter-spacing: 0.1em;
    font-weight: bold;
}

/* 白いボタン（アコーディオン風） */
.reason-accordion-wrap {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.reason-accordion-btn {
    background-color: #fff;
    color: #1b2a47;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 25px;
    border: none;
    border-radius: 4px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: opacity 0.3s;
}
.reason-accordion-btn:hover {
    opacity: 0.9;
}
/* 右側のＶ字アイコン */
.reason-accordion-btn::after {
    content: '';
    position: absolute;
    right: 30px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    transform: rotate(45deg);
}

/* ==============================================
   成長する先輩・キャリアステップ セクション
============================================== */
.recruit-senior-section {
    background-color: #fafbfc; /* ほんのりグレーがかった白 */
    padding: 100px 20px;
}

/* キャッチコピーと写真のレイアウト */
.senior-flex-box {
    display: flex;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 100px;
    gap: 40px;
}
.senior-text-col {
    width: 40%;
}
.senior-catch {
    font-size: 22px;
    color: #333;
    line-height: 2;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0;
}
.senior-img-col {
    width: 60%;
}
.senior-img-col img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* ==============================================
   成長する先輩 スライドアニメーション
============================================== */
.senior-slider-wrap {
    overflow: hidden; /* 枠からはみ出した部分を隠す */
    width: 100%;
}

.senior-slider-track {
    display: flex;
    gap: 20px; /* 画像と画像の間のすき間 */
    transition: transform 0.6s ease-in-out; /* 0.6秒かけて滑らかにスライド */
}

.senior-slide-item {
    /* 動画のように、メイン画像を大きく見せつつ右の画像を少し見切れさせる幅 */
    width: 85%; 
    flex-shrink: 0; /* 画像が潰れないようにする */
    height: 450px; /* 高さを揃える（画像に合わせて調整してください） */
    object-fit: cover;
    border-radius: 10px; /* 角を少し丸くする */
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .senior-slide-item {
        width: 90%; /* スマホではメイン画像を少し広めにとる */
        height: 250px;
    }
}

/* キャリアステップ */
.career-step-wrap {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.career-step-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #1b2a47;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
}
/* タイトルの左右の線 */
.career-step-title::before,
.career-step-title::after {
    content: '';
    width: 80px;
    height: 1px;
    background-color: #1b2a47;
    margin: 0 20px;
}
.career-step-img img {
    max-width: 100%;
    height: auto;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .recruit-reason-bg {
        width: 200%;
        margin-left: -50%;
        padding: 60px 50%;
        border-radius: 50% 50% 0 0; /* 下のカーブをなくす */
    }
    .reason-flex-box {
        flex-direction: column;
        gap: 30px;
    }
    .reason-img-col,
    .reason-text-col {
        width: 100%;
        text-align: center;
    }
    .reason-text-col {
        font-size: 13px;
    }
    .reason-accordion-btn {
        font-size: 13px;
        padding: 20px;
    }
    
    .senior-flex-box {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        margin-bottom: 60px;
    }
    .senior-text-col,
    .senior-img-col {
        width: 100%;
    }
    .senior-catch {
        font-size: 18px;
    }
    .career-step-title::before,
    .career-step-title::after {
        width: 40px;
    }
}

/* ==============================================
   「成長する先輩」テキストの前面への重ね合わせ
============================================== */
.senior-flex-box {
    position: relative;
    display: block !important; /* 横並び（flex）を解除して重ねる */
}

/* 画像スライダーエリアを全幅に広げる */
.senior-img-col {
    width: 100% !important;
}

/* テキストを画像の上に絶対配置して最前面へ */
.senior-text-col {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 10; /* ★スライダー画像より最前面に配置 */
    width: auto !important;
}

/* 画像と重なっても文字が読めるように装飾 */
.senior-catch {
    background-color: rgba(255, 255, 255, 0.85); /* 半透明の白背景 */
    padding: 40px 60px 40px 20px; /* 余白の調整 */
    border-radius: 0 10px 10px 0; /* 右側だけ角を丸くする */
    box-shadow: 5px 5px 20px rgba(0,0,0,0.05); /* ふんわりとした影 */
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .senior-text-col {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90% !important;
        text-align: center;
    }
    .senior-catch {
        padding: 20px;
        border-radius: 8px; /* スマホでは四隅を丸くする */
        font-size: 16px;
    }
}

/* ==============================================
   数字でみる東宝ハウス王子 セクション
============================================== */
.recruit-numbers-section {
    background-color: #f7f9fb; /* 非常に薄い青みがかったグレー */
    padding: 100px 20px;
}

/* 「東宝ハウスグループから見た」などの小見出し */
.about-sub-title {
    font-size: 12px;
    color: #1b2a47;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
}

/* 「数字でみる東宝ハウス王子」の見出し（左右に線） */
.numbers-main-title-wrap {
    text-align: center;
    margin-bottom: 80px;
}
.numbers-main-title {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #1b2a47;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.numbers-main-title::before,
.numbers-main-title::after {
    content: '';
    width: 60px;
    height: 1px;
    background-color: #1b2a47;
    margin: 0 20px;
}

/* --- 各ブロック (01, 02, 03, 04) の共通設定 --- */
.number-block {
    max-width: 900px;
    margin: 0 auto 100px;
}
.number-block:last-child {
    margin-bottom: 0;
}

/* 01, 02 などの見出しスタイル */
.number-head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
    color: #1b2a47;
}
.num-large {
    font-size: 40px;
    font-weight: 300; /* 細字 */
    line-height: 1;
    margin-bottom: 5px;
    position: relative;
    padding-bottom: 15px;
}
.num-large::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 1px;
    background-color: #1b2a47;
}
.num-en {
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-top: 10px;
}
.num-ja {
    font-size: 10px;
    color: #666;
    letter-spacing: 0.1em;
    margin-top: 5px;
}

/* --- 01 FACT のレイアウト --- */
.fact-flex-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.fact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.fact-row.-reverse {
    flex-direction: row-reverse;
}
.fact-text {
    width: 35%;
    color: #333;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    font-weight: bold;
}
.fact-text.-left { text-align: left; }
.fact-text.-right { text-align: left; } /* 画像の右側にあるテキストも基本は左揃えが綺麗です */

.fact-highlight {
    font-size: 18px;
    color: #1b2a47;
    margin-top: 10px;
}
.fact-highlight .l-num {
    font-size: 40px;
    margin: 0 5px;
}
.fact-img {
    width: 60%;
    background-color: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    text-align: center;
}
.fact-img img {
    max-width: 100%;
    height: auto;
}

/* --- 02〜04 丸い画像のグリッドレイアウト --- */
.circle-data-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.circle-data-grid img {
    height: auto;
}
/* 4列の場合 */
.circle-data-grid.-col4 img {
    width: calc(25% - 22.5px);
}
/* 2列の場合 */
.circle-data-grid.-col2 img {
    width: calc(35% - 15px); /* 少し大きめに表示 */
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .numbers-main-title::before,
    .numbers-main-title::after {
        width: 30px;
    }
    
    .fact-row, 
    .fact-row.-reverse {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .fact-text {
        width: 100%;
        text-align: center;
    }
    .fact-text.-left, 
    .fact-text.-right {
        text-align: center;
    }
    .fact-img {
        width: 100%;
        box-sizing: border-box;
    }

    /* スマホでは丸い画像を2列にする */
    .circle-data-grid.-col4 img {
        width: calc(50% - 15px);
    }
    .circle-data-grid.-col2 img {
        width: calc(50% - 15px);
    }
}

/* ==============================================
   選考フロー・募集要項 セクション
============================================== */
.recruit-flow-section {
    background-color: #f7f9fb; /* 上のセクションと背景色を合わせる */
    padding: 80px 20px 100px;
}

/* 上下線の見出し */
.flow-heading-wrap {
    text-align: center;
    margin-bottom: 50px;
}
.line-heading {
    display: inline-block;
    font-size: 14px;
    color: #1b2a47;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 15px 60px;
    border-top: 1px solid #1b2a47;
    border-bottom: 1px solid #1b2a47;
    margin: 0;
}

/* 選考フロー画像 */
.flow-img-wrap {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.flow-img-wrap img {
    max-width: 100%;
    height: auto;
}

/* --- こんな方におすすめ！ --- */
.recommend-catch {
    text-align: center;
    color: #1b2a47;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 60px;
    margin-top: 80px;
}

/* ふきだしコンテナ */
.recommend-bubbles {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    /* 右側にはみ出ているレイアウトを表現する場合は overflow: hidden を親要素につけるか調整 */
}

/* ふきだし共通スタイル */
.recommend-bubble {
    position: relative;
    width: 220px;
    height: 280px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.recommend-bubble p {
    font-size: 14px;
    color: #1b2a47;
    line-height: 2;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ふきだしのしっぽ（下部の三角） */
.recommend-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 40%; /* 少し左寄りに配置 */
    border-top: 15px solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

/* ふきだしの色設定 */
.recommend-bubble.color-blue { background-color: #eef3f8; }
.recommend-bubble.color-blue::after { border-top-color: #eef3f8; }

.recommend-bubble.color-orange { background-color: #faede6; }
.recommend-bubble.color-orange::after { border-top-color: #faede6; }

.recommend-bubble.color-green { background-color: #f2f7e3; }
.recommend-bubble.color-green::after { border-top-color: #f2f7e3; }

.recommend-bubble.color-light-blue { background-color: #ebf0f8; }
.recommend-bubble.color-light-blue::after { border-top-color: #ebf0f8; }

/* ジグザグの配置（偶数番目を下げる） */
.recommend-bubble:nth-child(even) {
    margin-top: 40px;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .recommend-bubbles {
        flex-wrap: wrap; /* スマホでは2列に折り返す */
        gap: 20px 10px;
    }
    .recommend-bubble {
        width: calc(50% - 10px);
        height: 200px;
    }
    .recommend-bubble p {
        font-size: 12px;
    }
    .recommend-bubble:nth-child(even) {
        margin-top: 20px; /* スマホではズレを小さくする */
    }
}

/* 全体が横にはみ出さないように隠す */
.recommend-wrap {
    overflow: hidden;
    width: 100%;
}

/* スクロールする親要素 */
.recommend-scroll-container {
    display: flex;
    width: max-content; /* 中身の幅に合わせて広がる */
    /* 35秒かけて左にスライドし、無限にループする */
    animation: scroll-marquee 35s linear infinite;
}

/* カーソルを合わせた時に動きを止めたい場合はこれを追加 */
.recommend-scroll-container:hover {
    animation-play-state: paused;
}

/* 吹き出しのグループ */
.recommend-bubbles-marquee {
    display: flex;
    gap: 20px;
    padding-right: 20px; /* 1セット目と2セット目の隙間 */
}

/* スライドさせるアニメーションの設定 */
@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 全体の半分の位置（1セット分）まで移動したら0%に戻る */
}

/* 追加された新しい吹き出しの色設定 */
.recommend-bubble.color-pink { background-color: #fae6e6; }
.recommend-bubble.color-pink::after { border-top-color: #fae6e6; }

.recommend-bubble.color-yellow { background-color: #fdf5d3; }
.recommend-bubble.color-yellow::after { border-top-color: #fdf5d3; }

/* スマホ対応（以前の折り返し設定を無効にして横に流し続ける） */
@media screen and (max-width: 768px) {
    .recommend-bubble {
        width: 180px; /* スマホでは少し小さくする */
        height: 220px;
    }
}

/* ==============================================
   募集要項 詳細ボックス
============================================== */
.recruit-req-box {
    background-color: #fff;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 80px;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* ふんわりとした影 */
}

/* 各項目の区切りと余白 */
.req-item {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.req-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 見出し（● 応募資格 など） */
.req-title {
    font-size: 16px;
    color: #1b2a47; /* ネイビー */
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
}
.req-dot {
    font-size: 12px;
    margin-right: 10px;
}

/* 本文テキスト */
.req-desc {
    padding-left: 22px; /* ドットの分だけ字下げして頭を揃える */
}
.req-desc p {
    font-size: 14px;
    color: #333;
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin: 0;
}
.req-desc strong {
    color: #1b2a47;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .recruit-req-box {
        padding: 40px 20px;
    }
    .req-desc {
        padding-left: 0; /* スマホでは画面を広く使うため字下げを解除 */
    }
    .req-item {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
}

/* ==============================================
   ENTRY（応募フォーム） セクション
============================================== */
.recruit-entry-section {
    background-color: #f7f9fb; /* 背景色 */
    padding: 100px 20px 120px;
}

/* 見出し */
.entry-header {
    text-align: center;
    margin-bottom: 60px;
}
.entry-title {
    font-size: 40px;
    color: #1b2a47;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0 0 10px 0;
}
.entry-sub-title {
    font-size: 13px;
    color: #333;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
}

/* フォーム全体 */
.entry-form-wrap {
    max-width: 900px;
    margin: 0 auto;
}
.entry-form {
    border-top: 1px solid #ccc; /* 一番上の区切り線 */
}

/* フォームの各行 */
.entry-row {
    display: flex;
    padding: 30px 0;
    border-bottom: 1px solid #ccc; /* 行ごとの区切り線 */
}
.entry-row.-last {
    border-bottom: 2px solid #ccc; /* 最後の線は少し太め */
}

/* ラベル部分（左側） */
.entry-label {
    width: 25%;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.entry-label .note {
    font-size: 12px;
    color: #666;
    font-weight: normal;
}
.req-badge {
    background-color: #c9d8e8; /* 薄い青 */
    color: #1b2a47;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 2px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 入力エリア部分（右側） */
.entry-input-group {
    width: 75%;
}
.entry-input-group.-flex {
    display: flex;
    gap: 30px;
}
.input-col {
    flex: 1;
}
.sub-label {
    display: block;
    font-size: 12px;
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
}

/* 入力フィールド共通 */
.entry-input,
.entry-select,
.entry-textarea {
    width: 100%;
    padding: 15px;
    border: none;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    outline: none;
}
.entry-input::placeholder,
.entry-textarea::placeholder {
    color: #999;
}

/* 入力フィールドのサイズ調整 */
.entry-input.-short {
    width: 80px;
    margin: 0 5px;
    text-align: center;
}
.entry-input.-long {
    width: 60%;
}
.entry-input.-full {
    width: 100%;
}
.entry-textarea {
    height: 200px;
    resize: vertical;
}
.input-note {
    font-size: 12px;
    color: #999;
    margin: 5px 0 0;
}

/* セレクトボックスの矢印カスタマイズ */
.select-wrap {
    position: relative;
    width: 200px;
}
.select-wrap::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 10px;
    color: #333;
    pointer-events: none;
}
.entry-select {
    appearance: none;
    -webkit-appearance: none;
}

/* 注意書き */
.entry-notes {
    padding: 40px 0 60px;
    font-size: 12px;
    color: #333;
    line-height: 2;
}
.notes-title {
    font-weight: bold;
    margin-bottom: 10px;
}
.privacy-link {
    color: #333;
    text-decoration: underline;
}
.privacy-link:hover {
    text-decoration: none;
}

/* 送信ボタン */
.entry-submit-wrap {
    text-align: center;
}
.btn-entry-submit {
    background-color: #1b2a47; /* ネイビー */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 20px 80px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: opacity 0.3s;
}
.btn-entry-submit:hover {
    opacity: 0.8;
}
.btn-entry-submit::after {
    content: '＞';
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    font-weight: normal;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .entry-row {
        flex-direction: column;
        padding: 20px 0;
    }
    .entry-label {
        width: 100%;
        margin-bottom: 15px;
    }
    .entry-input-group {
        width: 100%;
    }
    .entry-input-group.-flex {
        flex-direction: column;
        gap: 15px;
    }
    .entry-input.-long {
        width: 100%;
    }
    .entry-input.-short {
        width: 60px;
    }
    .select-wrap {
        width: 100%;
    }
    .btn-entry-submit {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==============================================
   確認画面（entry_confirm.php）用スタイル
============================================== */
/* 入力内容の表示エリア */
.entry-value {
    width: 75%;
    font-size: 14px;
    color: #333;
    line-height: 1.8;
    padding: 0 15px; /* 入力フォームの余白と合わせる */
    box-sizing: border-box;
}

/* 確認画面のボタン配置（縦並び） */
.confirm-btn-wrap {
    text-align: center;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 修正するボタン（送信ボタンのデザインをベースに調整） */
.btn-entry-back {
    background-color: #2b3b5a; /* 送信ボタンより少しだけ明るいネイビー */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 20px 80px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: opacity 0.3s;
    width: 300px; /* 送信ボタンと幅を揃える場合 */
    box-sizing: border-box;
}
.btn-entry-back:hover {
    opacity: 0.8;
}
.btn-entry-back::after {
    content: '＞';
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    font-weight: normal;
}
.btn-entry-submit {
    width: 300px; /* 送信ボタンの幅も固定して揃える */
    box-sizing: border-box;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .entry-value {
        width: 100%;
        padding: 0;
        margin-top: 10px;
    }
    .btn-entry-submit,
    .btn-entry-back {
        width: 100%;
    }
}

/* ==============================================
   送信完了画面（entry_send.php）用スタイル
============================================== */
.entry-complete-box {
    background-color: #fff;
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 40px;
    text-align: center;
    border-top: 1px solid #ccc;
}
.complete-title {
    font-size: 24px;
    color: #1b2a47;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}
.complete-text {
    font-size: 15px;
    color: #333;
    line-height: 2;
    margin-bottom: 50px;
}
.complete-btn-wrap {
    text-align: center;
}
.btn-back-home {
    display: inline-block;
    background-color: #1b2a47;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 20px 60px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.3s;
}
.btn-back-home:hover {
    opacity: 0.8;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .entry-complete-box {
        padding: 50px 20px;
    }
    .complete-title {
        font-size: 18px;
    }
    .complete-text {
        font-size: 13px;
    }
    .btn-back-home {
        width: 100%;
        box-sizing: border-box;
    }
}

/* 数字で見るデータエリア（背景ブルー） */
.recruit-data-area {
    background-color: #f4f7fb;
    padding: 80px 0;
    margin-bottom: 100px;
}
.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.data-box {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.data-box h4 {
    font-size: 16px;
    color: #666;
    margin: 0 0 15px;
}
.data-box .num {
    font-size: 36px;
    font-weight: bold;
    color: #1b2a47;
}
.data-box .unit {
    font-size: 16px;
    color: #1b2a47;
}
.data-box img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-top: 20px;
}

/* 丸いハイライトエリア（ネイビー） */
.recruit-highlight {
    background-color: #1b2a47;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    border-radius: 500px 500px 0 0 / 100px 100px 0 0;
    margin-bottom: 80px;
}
.recruit-highlight h3 {
    font-size: 24px;
    margin: 0 0 30px;
    letter-spacing: 0.1em;
}
.highlight-circles {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}
.circle-item {
    width: 150px;
    height: 150px;
    background-color: #fff;
    color: #1b2a47;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: bold;
}
.circle-item span {
    font-size: 24px;
}
.btn-white {
    display: inline-block;
    background-color: #fff;
    color: #1b2a47;
    padding: 15px 60px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    transition: 0.3s;
}
.btn-white:hover {
    opacity: 0.8;
}

/* 募集要項テーブル */
.req-table {
    width: 100%;
    border-collapse: collapse;
}
.req-table th, .req-table td {
    border: 1px solid #e0e0e0;
    padding: 20px;
    line-height: 1.6;
}
.req-table th {
    width: 200px;
    background-color: #f4f5f7;
    text-align: left;
    font-weight: bold;
    color: #333;
}
.req-table td {
    font-size: 14px;
    color: #333;
}

/* エントリーボタンエリア */
.entry-btn-wrap {
    text-align: center;
    margin-top: 60px;
}
.btn-entry {
    display: inline-block;
    background-color: #5b8bd0;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 100px;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-entry:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
    .recruit-message { flex-direction: column; }
    .data-grid { grid-template-columns: 1fr; }
    .highlight-circles { flex-direction: column; align-items: center; }
    .req-table th, .req-table td { display: block; width: 100%; }
}

/* =========================================================
会社案内・プライバシーポリシー
========================================================= */

.privacy-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル */
.privacy-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    text-align: left;
}
.privacy-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0 0 5px 0;
    font-weight: normal;
}
.privacy-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0;
    letter-spacing: 0.1em;
}

/* 規約テキストエリア（グレー背景） */
.privacy-content-wrap {
    background-color: #f4f5f7;
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px;
}
.privacy-sec-ttl {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: #333;
}
.privacy-txt {
    font-size: 13px;
    line-height: 2;
    margin: 0 0 50px 0;
    color: #333;
}
.privacy-list {
    padding-left: 20px;
    margin: 0 0 50px 0;
    font-size: 13px;
    line-height: 2;
    color: #333;
}
.privacy-list li {
    margin-bottom: 10px;
    list-style-type: decimal; /* 数字の箇条書き */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .privacy-content-wrap {
        padding: 40px 20px;
    }
}

/* =========================================================
会社案内・ありがとうの声
========================================================= */

.thanks-page {
    background-color: #fff;
    padding-bottom: 80px;
    color: #333;
}

/* ページ上部のタイトル */
.thanks-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 20px;
    text-align: left;
}
.thanks-sub-ttl {
    font-size: 12px;
    color: #666;
    margin: 0 0 5px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.thanks-main-ttl {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0;
    font-weight: normal;
}

/* ページネーション（ページ送り） */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 40px 0;
    font-size: 14px;
}
.page-link {
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
    transition: 0.3s;
}
.page-link.is-active {
    border-bottom: 2px solid #333;
    font-weight: bold;
}
.page-link:hover:not(.is-active) {
    opacity: 0.6;
}
.page-dots {
    color: #999;
}
.page-next {
    background-color: #e5eaf2;
    color: #1b2a47;
    padding: 10px 40px;
    text-decoration: none;
    font-weight: bold;
    margin-left: 20px;
    border-radius: 4px;
    transition: 0.3s;
}
.page-next:hover {
    opacity: 0.8;
}

/* グリッドコンテナ */
.thanks-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 4列のカードリスト */
.thanks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 15px;
}
.thanks-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}
.thanks-card:hover {
    opacity: 0.8;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}
.thanks-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: #f4f5f7;
}
.thanks-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.thanks-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.thanks-name {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}
.thanks-tag {
    font-size: 11px;
    color: #5b8bd0; /* 青色タグ */
    font-weight: bold;
    margin: 0;
}
.thanks-comment {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 15px 0;
    color: #333;
    /* 2行で三点リーダー表示にする設定 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.thanks-staff {
    font-size: 11px;
    color: #666;
    text-align: right;
    margin: 0;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .thanks-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホ時は2列 */
        gap: 20px 10px;
    }
}

/* ==============================================
   スクロールアニメーション（ふわっと表示）
============================================== */
/* アニメーションさせる要素の初期状態（透明 ＆ 少し下に配置） */
.fade-in {
    opacity: 0;
    transform: translateY(40px); /* 40px下から上がってくる */
    transition: opacity 1s ease-out, transform 1s ease-out; /* 1秒かけてゆっくり変化 */
}

/* 画面に入って「is-visible」クラスが追加された時の状態（表示 ＆ 元の位置） */
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 少し遅れて表示させたい場合（時間差アニメーション用） */
.fade-in.delay-1 { transition-delay: 0.2s; }
.fade-in.delay-2 { transition-delay: 0.4s; }
.fade-in.delay-3 { transition-delay: 0.6s; }

/* ==============================================
   カスタムカーソル
============================================== */
/* デフォルトのマウスカーソルを非表示にしたい場合はコメントアウトを外してください */
/* 
body, a, button {
    cursor: none !important;
} 
*/

/* 小さな丸（ドット） */
.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #1b2a47; /* ネイビー（お好みの色に変更してください） */
    position: fixed;
    border-radius: 50%;
    pointer-events: none; /* クリックの邪魔にならないようにする */
    z-index: 9999; /* 一番手前に表示 */
    transform: translate(-50%, -50%); /* マウスの先端を中心に合わせる */
}

/* ホバー時に広がる薄暗い円 */
.cursor-bg {
    width: 125px;
    height: 125px;
    background-color: rgba(27, 42, 71, 0.3); /* 薄暗いネイビー */
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998; /* ドットの1つ下に配置 */
    /* 最初は透明で小さくしておく */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* リンクにホバーした時に付与されるクラス */
.cursor-bg.is-hover {
    transform: translate(-50%, -50%) scale(1); /* 元のサイズ（50px）に拡大 */
    opacity: 1; /* 表示する */
}