/* =========================================
   共通
   ========================================= */
.btn-round-blue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    background-color: #172A88; /* 青 */
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    border-radius: 40px;       /* 丸み */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}
.btn-round-blue:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    opacity: 1;
}

.btn-arrow-text {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #B37642;
    font-size: 2rem;
    font-weight: 700;
    transition: opacity 0.3s;
}

/* 丸い矢印アイコン */
.circle-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #B37642; /* 茶色 */
    color: #fff;
    font-size: 2.0rem;
    font-family: sans-serif;
    transition: transform 0.3s;
}

.circle-arrow.blue{
    background-color:#172A88
}

/* ホバー時に矢印を少し右へ */
.btn-arrow-text:hover .circle-arrow {
    transform: translateX(5px);
}


/* ==========================================================================
   FV (First View) - PC Style
   ========================================================================== */

.fv {
    position: relative;
    width: 100%;
    /* ★変更：画面いっぱい + 100px */
    height: calc(100vh + 100px); 
    min-height: 700px;
    margin-top: -80px;  /* ヘッダーの裏に潜り込ませる */
    
    /* overflow: visible; はボタンをはみ出させる必要がなくなった場合は hidden でもOKですが
       念のため visible のままにしておきます */
    overflow: visible; 
    
    background-color: #000; 
    box-sizing: border-box;
}

/* --------------------------------------------
   背景スライドショー
   -------------------------------------------- */
.fv__bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.fv__bg-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: slideAnime 18s infinite;
}

.fv__bg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.fv__img-sp { display: none; }
.fv__img-pc { display: block; }

@keyframes slideAnime {
    0% { opacity: 0; transform: scale(1.05); }
    5% { opacity: 1; }
    33% { opacity: 1; }
    38% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; }
}

.fv__bg-item:nth-child(1) { animation-delay: 0s; }
.fv__bg-item:nth-child(2) { animation-delay: 6s; }
.fv__bg-item:nth-child(3) { animation-delay: 12s; }


/* --------------------------------------------
   キャッチコピー・コンテンツ
   -------------------------------------------- */
.fv__content {
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    width: 80%;
}

.fv__catch {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
}

.fv__lead {
    font-size: 2.2rem;
    font-weight: 500;
}

/* --------------------------------------------
   SCROLL DOWN ボタン
   -------------------------------------------- */
.scroll-down {
    position: absolute;
    bottom: 130px;
    right: 20px; /* 右下に配置 */
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scroll-down a {
    text-decoration: none;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 矢印 */
.arrow_down {
    display: block;
    width: 14px;
    height: 14px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: 10px;
    animation: scrollArrowAnime 1.5s infinite;
}

@keyframes scrollArrowAnime {
    0% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
    50% { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
    100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
}

/* ==========================================================================
   Intro / LINE Section (物件検索 & LINE訴求)
   ========================================================================== */

.intro {
    position: relative;
    width: 100%;
    background-color: #10C755; /* LINEグリーン */
    padding: 80px 0 0; /* 上部の余白（ボタンとの干渉避け） */
    color: #fff;       /* 緑背景なので文字は白 */
    overflow: visible; /* ボタンをFV側に飛び出させるために必須 */
    z-index: 20;       /* FVより手前に表示 */
}

.intro .container {
    max-width: 1000px; /* コンテンツ幅を少し絞って見やすく */
    position: relative;
}

/* --------------------------------------------
   物件検索ボタン (FVとの境界に配置)
   -------------------------------------------- */
.intro__search {
    position: absolute;
    top: 0;             /* セクションの上端 */
    left: 50%;
    transform: translate(-50%, -50%); /* 中央揃え＆半分上にずらす */
    z-index: 30;
    width: 400px;       /* ボタン幅 */
}

/* 外部リンスアイコン（CSSで作成） */
.icon-external {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    border: 2px solid #fff;
    border-radius: 4px;
    position: relative;
    top: -2px; /* 微調整 */
}
/* 矢印部分 */
.icon-external::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #fff transparent transparent; /* 三角形 */
}
/* 斜め線部分 */
.icon-external::before {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 2px;
    background-color: #fff;
    transform: rotate(-45deg);
    transform-origin: right top;
}


/* ==========================================================================
   Intro / LINE Section (物件検索 & LINE訴求)
   ========================================================================== */

/* LINEセクション全体 */
.intro {
    position: relative;
    width: 100%;
    background-color: #10C755; /* LINEグリーン */
    padding: 60px 0 0;         /* 上部の余白（ボタンとの干渉避け） */
    color: #fff;
    overflow: visible;         /* 上のボタンをはみ出させるために必須 */
    z-index: 20;               /* FVより手前に表示 */
}

.intro .container {
    max-width: 800px;
    position: relative;
    /* コンテナの下余白をゼロにして、画像がセクションの底辺に触れるようにする */
    padding-bottom: 0; 
}

/* --------------------------------------------
   物件検索ボタン (FVとの境界に配置)
   -------------------------------------------- */
.intro__search {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央揃え＆半分上にずらす */
    z-index: 30;
    width: 400px;
}

/* 外部リンクアイコン */
.icon-external {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    border: 2px solid #fff;
    border-radius: 4px;
    position: relative;
    top: -2px;
}
.icon-external::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #fff transparent transparent;
}
.icon-external::before {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 2px;
    background-color: #fff;
    transform: rotate(-45deg);
    transform-origin: right top; 
}


/* --------------------------------------------
   LINE コンテンツエリア
   -------------------------------------------- */
.intro__line-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-bottom: 0;     /* セクション底辺に合わせる */
}

/* --- 左側：テキスト情報エリア --- */
.intro__line-content {
    width: 61%;
    padding-bottom: 60px;
}

/* ヘッダー飾り (アイコン + テキスト) */
.intro__line-head {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
    justify-content: center;
    gap: 20px;
}

.icon-line {
    width: 250px; /* 指定いただいた幅 */
    height: auto;
    display: block;
}
.icon-line img {
    width: 100%;
    height: auto;
}

/* 「\ 友だち限定 /」テキスト */
.text-white {
    color: #fff;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1;
    position: relative;
    white-space: nowrap; /* 改行させない */
}

/* メインキャッチ (黄色) */
.intro__line-title {
    color: #FFF100;
    font-size: 4.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 40px;
}

.intro__line-title .text-small {
    font-size: 0.6em;
    margin-left: 10px;
}

/* ボディ部分 (QR + 説明 + ボタン) */
.intro__line-body {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* QRコードボックス */
.intro__line-qr {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    background-color: #fff; /* QRが見やすいよう背景白推奨 */
    padding: 10px;          /* 余白 */
    border-radius: 10px;
}
.intro__line-qr img {
    width: 100%;
    height: auto;
    display: block;
}

/* 説明文エリア */
.intro__line-desc {
    flex-grow: 1;
}

.intro__line-desc p {
    font-size: 1.5rem;
    font-weight: 500;
}

.intro__line-desc .highlight {
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid rgba(255, 241, 0, 0.6); /* 下線マーカー風にアレンジ */
    padding-bottom: 2px;
}

/* ボタン (display:none が指定されていたのでそのままにします) */
.btn-line {
    display: none; 
    /* 将来表示する場合用 */
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #10C755;
    font-weight: 700;
    font-size: 1.6rem;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}


/* --- 右側：スマホ画像（ここを修正！） --- */
.intro__line-mock {
    width: 37%;
    position: relative;
    
    /* ▼ クリッピング用設定 ▼ */
    height: 450px;      /* ★ここで表示したい高さを決めます。画像の上から480pxだけ表示 */
    overflow: hidden;   /* ★指定した高さを超えた分（下側）を切り取る */
    
    /* フレックスアイテムの設定 */
    align-self: flex-end; /* 底辺に揃える */
    margin-bottom: 0;     /* 余計な余白を除去 */
    
    /* 画像を枠の上端に合わせる */
    display: flex;
    align-items: flex-start; 
}

.intro__line-mock img {
    width: 100%;
    height: auto;
    /* 念のため画像の上辺を基準にする */
    object-position: top; 
}

/* ==========================================================================
   ABOUT US Section
   ========================================================================== */

.about {
    padding: 140px 0 100px;
    position: relative;
    /* 背景装飾用：エリア外にはみ出るロゴを隠すかどうかはお好みですが、
       基本は overflow: hidden; でセクション内に収めるのが安全です */
    overflow: hidden; 
}

.about .container {
    max-width: 1000px;
    position: relative;
    z-index: 2; /* 背景ロゴより手前に表示 */
}

/* --------------------------------------------
   背景の巨大ロゴマーク
   -------------------------------------------- */
.about .container::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 350px;
    height: 300px;
    background-image: url(../img/logomark.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 1;
    pointer-events: none;
}

/* --------------------------------------------
   メインレイアウト (Flexbox)
   -------------------------------------------- */
.about__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* --- 左側：画像エリア --- */
.about__img {
    width: 370px;
    height: 460px;
}

.about__img img {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* 柔らかい影 */
    border-radius: 0 80px 0 80px;
    object-position: 80% center;
}

/* --- 右側：テキストエリア --- */
.about__text {
    width: 55%;    /* 右側の幅 */
}

/* セクションタイトル (ABOUT US) */
.about__text .section-title {
    font-size: 8rem;
    font-weight: 500;
    color: #172A88; /* 青 */
    margin-bottom: 20px;
    line-height: 1;
    font-family: 'Gabarito', sans-serif;
}

/* リード文 (徹底的に〜) */
.about__lead {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* 本文 (タウンエステート株式会社は〜) */
.about__desc {
    font-size: 1.6rem;
     /* 読みやすく広めに */
    text-align: justify; /* 両端揃えできれいに見せる */
    letter-spacing: 0.05em;
}

/* ==========================================================================
   BUY / SELL Section Common
   ========================================================================== */
.buy, .sell {
    position: relative;
    padding: 100px 0;
    overflow: hidden; /* 背景の巨大文字がはみ出しても大丈夫なように */
}

.buy .container,
.sell .container {
    max-width: 1000px;
    position: relative;
    z-index: 2; /* 背景文字より手前 */
}

/* レイアウト共通 (Flexbox) */
.buy__inner,
.sell__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

/* テキストエリア共通 */
.buy__text,
.sell__text {
    width: 55%;
}

/* セクション見出し (買いたい・売りたい) */
.section-title{
    position: relative;
}
.section-title-jp {
    font-size: 5.2rem;
    font-weight: 700;
    margin-bottom: 70px;
    text-align: center;
    line-height: 1;
}
.buy__img-sub,.sell__img-sub{
    display: none;
}
.bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20rem;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    z-index: -1;
    pointer-events: none;
    font-family: 'Gabarito', sans-serif;
}
/* 画像エリア共通 (position: relativeでボタン配置の基準に) */
.buy__img,
.sell__img {
    width: 370px;
    height: 400px;
    max-width: 40%;
    position: relative;
}

.buy__img img,
.sell__img img {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.buy__img img{
    border-radius: 80px 0 80px 0;
}
.sell__img img{
    border-radius: 0 80px 0 80px;
    object-position: 70% center;
}

/* ボタン調整 (画像の上に重ねる) */
.buy__img .btn-round-blue,
.sell__img .btn-round-blue {
    position: absolute;
    bottom: -30px; /* 画像の下にはみ出させる */
    width: 320px;  /* ボタン幅 */
    /* ホバー時の透過防止は共通CSSで対応済みと想定 */
}

.buy__img .btn-round-blue {
    right: -20px;  /* 右にはみ出させる */
}

.sell__img .btn-round-blue {
    left: -20px;   /* 左にはみ出させる */
}


/* ==========================================================================
   BUY Section Specific
   ========================================================================== */
.buy {
    background-color: #EBE0D7; /* ベージュ */
}

/* ==========================================================================
   SELL Section Specific
   ========================================================================== */
.sell {
    background-color: #CBD1E3; /* 薄いブルー */
}

/* ==========================================================================
   REASON Section (選ばれる理由)
   ========================================================================== */

.reason {
    padding: 100px 0 160px;
    position: relative;
    overflow: hidden;
}

.reason .container {
    z-index: 2;
}

/* セクション全体のタイトル */
.reason__main-title {
    font-size: 4.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 80px;
    line-height: 1.4;
}

/* --------------------------------------------
   背景の巨大文字 (REASON - 縦書き)
   -------------------------------------------- */
.bg-text-vertical {
    position: absolute;
    top: 100px;
    left: calc(50% - 500px); /* コンテンツの左側に配置 */
    /* 縦書き指定 */
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl; /* IE用フォールバック(念のため) */
    font-family: 'Gabarito', sans-serif;
    font-size: 26rem;
    font-weight: 500;
    line-height: 1;
    color: #E3E3E3;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* --------------------------------------------
   リストスタイル
   -------------------------------------------- */
.reason__list {
    list-style: none;
    margin: 0 auto 20px;
    max-width: 700px;
}
.reason__item{
    position: relative;
}

.reason__item {
    position: relative;
    padding: 0 0 60px;
}

/* 最後の線は消す場合 */
.reason__item:last-child {
    border-bottom: none;
}


/* --- 番号と見出しの横並びラッパー --- */
.reason__meta {
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 30px;           /* 番号と見出しの間隔 */
    margin-bottom: 20px;
}

/* 番号 (01, 02...) */
.reason__num {
    font-family: 'Gabarito', sans-serif;
    font-size: 8rem;
    font-weight: 500;
    color: #B37642;      /* 茶色 */
    line-height: 1;
    flex-shrink: 0;      /* 数字が潰れないように */
}

/* 見出し */
.reason__head {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #B37642;
}

/* --- 本文 --- */
.reason__desc {
    font-size: 1.6rem;
}

/* --- アイコン (絶対配置) --- */
.reason__icon {
    position: absolute;
    top: 40px;      /* .reason__itemのpadding-topと同じ位置に合わせる */
    right: 0;       /* 右端に配置 */
    width: 100px;
    height: auto;
    z-index: -1;
}

.reason__icon img {
    width: 100%;
    height: auto;
    display: block;
}


/* --------------------------------------------
   ボタンエリア (詳しく見る →)
   -------------------------------------------- */
.reason__btn {
    text-align: right;
}

/* ==========================================================================
   VOICE Section (お客様の声) - Swiper対応版 (PC)
   ========================================================================== */

/* 全体の背景設定 */
.voice {
    /* グラデーション背景（上半分白、下半分グレー） */
    background: linear-gradient(to bottom, #fff 50%, #F2F0EE 50%);
    padding-bottom: 50px;
}

/* メインコンテナ（背景画像付きの白い大きな枠） */
.voice .container {
    max-width: 1200px;
    position: relative;
    z-index: 1;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(../img/voice_bg.webp) center / cover no-repeat;
    border-radius: 60px;
    padding: 100px 5% 5%;
}

/* --------------------------------------------
   ヘッダーエリア (見出し + リード文)
   -------------------------------------------- */
.voice__head {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    margin-bottom: 60px; /* スライダーとの余白 */
}

/* 巨大タイトル (CUSTOMER'S VOICE) */
.voice__title {
    font-family: 'Gabarito', sans-serif;
    font-size: 12rem;
    font-weight: 500;
    line-height: 1.0;
    color: #172A88;
    position: absolute;
    top: -6rem;
    left: 5%;
    z-index: 2;
}

/* リード文エリア */
.voice__lead-text {
    width: 55%;
}

.voice__lead-text h3 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.voice__lead-text p {
    text-align: justify;
}


/* --------------------------------------------
   スライダーエリア (Swiper設定)
   -------------------------------------------- */

/* Swiperコンテナ (.voice__list から変更) */
.voice__slider.swiper {
    width: 100%;
    overflow:visible;
}

/* --------------------------------------------
   カード設定 (Swiper Slide)
   -------------------------------------------- */

/* 各カード (li から div.swiper-slide に変更) */
.voice__card.swiper-slide {
    background-color: #fff;
    /* スライドの高さを揃える設定 */
    height: auto;
    display: flex;
    flex-direction: column;
    
    /* カードの基本形状（共通） */
    border-radius: 20px; 
    overflow: hidden;

    /* Swiper内での幅指定はJSで行うか、autoにする */
    /* ここではJSの slidesPerView: 3 に従うため width指定は不要だが、念のためbox-sizing */
    box-sizing: border-box;
}

/* --- カードごとの形状変化 --- */
/* 奇数番目のカードなどを変形させたい場合は nth-child を使用 */
/* 例：すべてのカードを特定の形にするなら下記 */
.voice__card.swiper-slide {
    border-radius: 0 80px 0 80px;
}
/* ※もし「1枚目だけ形を変える」などの要望があれば以下のように調整 */
/* .voice__card.swiper-slide:nth-child(1) { ... } */


/* --- カード内部 --- */
.voice__card-body {
    padding: 30px;
    flex-grow: 1; /* 内容が少なくても下まで広げる */
}

.voice__card-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #B37642; /* 茶色 */
    line-height: 1.5;
    margin-bottom: 20px;
    /* タイトルの高さ揃え */
    min-height: 3.0em; 
}


/* --------------------------------------------
   ページネーション (インジケーター)
   -------------------------------------------- */
.swiper-pagination {
    position: unset;
    margin-top: 20px;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ccc;
    opacity: 1;
    margin: 0 8px !important;
}

.swiper-pagination-bullet-active {
    background-color: #172A88; /* アクティブ時は濃い青 */
    transform: scale(1.2);
}

/* 注釈 */
.voice_attention{
    font-size: 1.2rem;
    text-align: right!important;
}

/* ==========================================================================
   COMPANY Section (会社案内)
   ========================================================================== */

.company {
    background-color: #F2F0EE; /* 指定の背景色 */
    padding: 50px 0;
}

/* コンテンツの幅を程よくまとめる */
.company .container {
    max-width: 1000px;
}

/* --------------------------------------------
   セクションタイトル (中央配置)
   -------------------------------------------- */
.section-title-center {
    text-align: center;
    margin-bottom: 60px;
}

/* 英語部分 (COMPANY) - 白くて巨大な文字 */
.section-title-center .en {
    display: block;
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(5rem,12vw,10rem);
    font-weight: 500;
    line-height: 1;
    color: #ffffff;    /* 指定通り白 */
    margin-bottom: 10px;
}

/* 日本語部分 (会社案内) */
.section-title-center .jp {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
}

/* --------------------------------------------
   コンテンツレイアウト
   -------------------------------------------- */
.company__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* マップエリア */
.company__map {
    width: 500px;  /* スクリーンショットの比率に合わせて幅指定 */
    height: 320px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* 軽く影をつける */
}

.company__map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px; /* ごくわずかに角を丸める */
}

/* 情報テキストエリア */
.company__info {
    flex: 1;         /* 残りの幅を使う */
    max-width: 400px;
}

.company__name {
    font-size: 2.0rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.company__address {
    margin-bottom: 40px;
    font-size: 1.8rem;
}

/* --------------------------------------------
   ボタン位置調整
   -------------------------------------------- */
.company__btn {
    text-align: right; /* 右寄せ */
}

/* ==========================================================================
   CONTACT Section (お問い合わせ)
   ========================================================================== */

.contact {
    background: linear-gradient(to bottom, #F2F0EE 75%, #172A88 25%);
    padding: 50px 0 0;
}

.contact .container {
    max-width: 800px;
}

/* --------------------------------------------
   白いお問い合わせボックス
   -------------------------------------------- */
.contact__inner {
    background-color: #fff;
    border-radius: 40px; /* 大きな角丸 */
    padding: 60px 80px;
}

/* 左側のテキストエリア */
.contact__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

/* セクションタイトル（左寄せ上書き） */
.contact__inner .section-title-center {
    text-align: left;
    margin-bottom: 30px;
}

.contact__inner .section-title-center .en {
    font-size: 6.2rem;
    color: #172A88;
    margin-bottom: 5px;
}

.contact__inner .section-title-center .jp {
    font-size: 2.6rem;
    font-weight: 700;
}

/* 説明文 */
.contact__desc {
    margin: 0;
}

/* --------------------------------------------
   右側のボタンエリア
   -------------------------------------------- */
.contact__btn {
    flex-shrink: 0; /* ボタンが潰れないように */
}


/* ==========================================================================
   Responsive (Tablet / SP)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet & Small PC (Max 960px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {
    /* コンテナの余白調整 */
    .container,
    .intro .container,
    .about .container,
    .buy .container,
    .sell .container,
    .reason .container,
    .company .container,
    .contact .container {
        box-sizing: border-box;
        max-width: 700px;
    }
    /* About / Buy / Sell レイアウト調整 */
    .about__inner,
    .buy__inner,
    .sell__inner,
    .company__inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .sell__inner{
        flex-direction: column-reverse;
    }
    .about__text,.buy__text,.sell__text,
    .company__map, .company__info {
        width: 100%;
    }

    /* --- FV ---*/
    .fv__catch { font-size: 3.6rem; }

    /* ---Intro (LINE)--- */
    .intro{
        padding: 100px 0 0;
    }
    .intro__search { width: 80%; }
    .intro__line-box {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .intro__line-title { font-size: 3.2rem; }
    .intro__line-content {
        width: 100%;
        padding-bottom: 0;
        text-align: center;
    }
    .icon-line { width: 180px; }
    .text-white { font-size: 2rem; }
    .intro__line-title {
        font-size: 3.4rem;
        margin-bottom: 20px;
    }
    .intro__line-title .text-small{
        font-size: 2rem;
    }
    .intro__line-qr {
        display: none;
    }
    .intro__line-desc p {
        text-align: center;
    }
    .btn-line {
        display: flex; /* Flexboxで表示 */
        width: 100%;   /* 幅いっぱい */
        max-width: 300px;
        margin: 10px auto 0;
    }
    .intro__line-mock {
        width: 300px;
        align-self: center;
        height: 300px;
    }

    /* --- About --- */
    .about .container::before{
        right: 0;
    }
    .about__inner {
        flex-direction: column-reverse;
        align-items: baseline;
    }
    .about__img{
        width: 250px;
        height: 200px;
    }

    /* --- Buy / Sell --- */
    .buy, .sell { padding: 60px 0; }
    .bg-text {
        font-size: 12rem;
        position: unset;
    }
    .buy__img-sub,.sell__img-sub{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        width: 50%;
        height: 180px;
    }
    .sell__img-sub{
        left: 0;
    }
    .buy__img-sub>img,.sell__img-sub>img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .buy__img-sub>img{
        border-radius: 80px 0 80px 0;
    }
    .sell__img-sub>img{
        border-radius: 0 80px 0 80px;
        object-position: 85%;
    }
    .buy__img, .sell__img{
        max-width: 100%;
        height: auto;
    }
    .buy__img>img, .sell__img>img {
        display: none;
    }
    .buy__text .section-title,.buy__text .section-title-jp{
        text-align: left;
        margin-bottom: 40px;
    }
    .sell__text .section-title,.sell__text .section-title-jp{
        text-align: right;
        margin-bottom: 40px;
    }
    /* ボタンのはみ出し調整 */
    .buy__img .btn-round-blue,
    .sell__img .btn-round-blue {
        position: relative; /* 絶対配置をやめる */
        bottom: auto; right: auto; left: auto;
        width: 100%;
        transform: none;   /* ホバーエフェクトの初期位置リセット */
    }

    /* ---Reason--- */
    .reason{
        padding: 100px 0;
    }

    /* ---Voice--- */
    .voice .container{
        padding: 120px 5% 5%;
    }
    .voice__title {
        font-size: clamp(5rem, 13vw, 8rem);
        top: -4rem;
    }
    .voice__head { flex-direction: column; }
    .voice__lead-text { width: 100%; }

    /* ---Company--- */
    .company__inner{
        flex-direction: column-reverse;
    }

    /* ---Contact--- */
    .contact__inner{
        padding: 8% 5%;
    }
}

/* --------------------------------------------------------------------------
   Smartphone (Max 480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {

    /* --- Common --- */
    .section-title-jp {
        font-size: 3.2rem;
        margin-bottom: 40px;
    }
    .btn-round-blue {
        height: 60px;
        font-size: 1.8rem;
    }

    /* --- FV --- */
    .fv__img-sp { display: block; }
    .fv__img-pc { display: none; }

    .fv__content {
        width: 90%;
        left: 5%;
        top: 30%;
    }
    .fv__catch {
        font-size: 2.8rem; /* 少し小さめに */
        margin-bottom: 10px;
    }
    .fv__lead {
        font-size: 1.6rem;
    }
    .scroll-down {
        bottom: 135px;
        right: 10px;
    }

    /* --- Intro (物件検索 & LINE) --- */
    .intro {
        padding-top: 60px;
    }

    /* 物件検索ボタン: 幅を画面いっぱいに */
    .intro__search {
        width: 90%;
        font-size: 1.6rem; /* ボタン内文字サイズ調整 */
    }

    /* LINE */
    .intro__line-desc p {
        text-align: left;
    }

    /* --- About --- */
    .about { padding: 80px 0 60px; }
    .about .container::before {
        width: 200px; right: -40px; top: -100px; /* 背景ロゴ調整 */
    }
    .about__text .section-title { font-size: 6rem; }
    .about__lead { font-size: 1.8rem; }

    /* ---Buy&Sell--- */
    .buy__img-sub,.sell__img-sub{
        width: 180px;
        height: 160px;
    }

    /* --- Reason --- */
    .reason { padding: 60px 0; }
    .reason__main-title { font-size: 2.8rem; margin-bottom: 60px; }
    .reason__list{
        margin-bottom: 0;
    }
    .reason__item{
        padding: 0 0 40px;
    }
    
    /* 背景縦書き文字 */
    .bg-text-vertical {
        font-size: 26rem; /* 大幅縮小 */
        top: 60px;
        left: -42px;
        opacity: 0.2; /* 薄くする */
    }

    /* リストアイテム */
    .reason__meta {
        gap: 15px;
    }
    .reason__num { font-size: 6rem; }
    .reason__head { font-size: 1.8rem; }
    .reason__icon {
        width: 60px;
        top: 10px;
    }
    .reason__btn {
        margin: 0;
    }

    /* --- Voice --- */
    .voice .container {
        padding: 80px 5% 40px;
        border-radius: 45px;
    }
    .voice__title {
        font-size: 5rem;
        top: -2.5rem;
        left: 5%;
    }
    .voice__lead-text h3{
        font-size: 2.2rem;
    }
    .voice__card-body { padding: 20px; }
    .voice__card-title { font-size: 1.6rem; min-height: auto; }

    /* --- Company --- */
    .company { padding: 40px 0; }
    .section-title-center{
        margin-bottom: 30px;
    }
    .section-title-center .en {
        font-size: 5.8rem;
        margin-bottom: 0;
    }
    .section-title-center .jp{
        font-size: 2.2rem;
    }
    .company__map { height: 250px; }
    .company__name{
        font-size: 2rem;
    }
    .company__address{
        font-size: 1.6rem;
    }
    .company__btn { text-align: right; }

    /* --- Contact --- */
    .contact__inner {
        padding: 40px 20px;
        border-radius: 45px;
    }
    .contact__body {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact__desc{
        margin-bottom: 10px;
    }
    .contact__inner .section-title-center .en { font-size: 4.8rem; }
    .contact__inner .section-title-center .jp{
        font-size: 2rem;
    }
    .contact__btn {
        width: 100%;
        text-align: right;
    }
    .contact__btn .btn-round-blue { height: 70px; } /* 押しやすく少し大きく */
}

/* ==========================================================================
   SP Floating Menu (トップページ専用の表示制御)
   ========================================================================== */

/* 最初は隠しておく */
.sp-float-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* もし pointer-events を制御している場合は以下も有効 */
    pointer-events: none; 
}

/* JSでこのクラスが付いたら表示する */
.sp-float-menu.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}