@charset "UTF-8";
/* ====================================================
　トップページ固有CSS（ファーストビュー以降）
　pageIndex_body.css
==================================================== */


/* ######################################################################################

　共通：セクション見出し

###################################################################################### */

/* 背景色
---------------------------------------------------- */
.estate,
.philosophy,
.service,
.news{ background: var(--color-white); }

.works,
.company,
.instagram{ background: var(--color-bg-alt); }



/* コンテナ左右padding（SP）
---------------------------------------------------- */
/* サイト共通の --container-pad-sp は20pxだが、トップページの各セクション
   （Works/Estate/Service/Company/News/Instagram）はFigma実測で
   一貫して24pxが使われている。共通変数を変えると他ページ・ヘッダー/
   フッターにも影響するため変更せず、このページの .contents 系ラッパーだけ
   ページ内で24pxに上書きする。 */
@media screen and (max-width: 767px){
    .philosophy__inner.contents,
    .works__inner.contents,
    .estate__inner.contents,
    .service__inner.contents,
    .company__inner.contents,
    .news__inner.contents,
    .instagram__inner.contents{
        padding-right: 6.1538vw;
        padding-left: 6.1538vw;
    }
}


/* ----- sectionHeading ----- */
.philosophy__heading,
.works__heading,
.estate__heading,
.service__heading,
.company__heading,
.news__heading{
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.0667em;
    color: var(--color-text);
}

/* eyebrowLabel カラー */
.philosophy__heading .eyebrowLabel,
.works__heading .eyebrowLabel,
.estate__heading .eyebrowLabel,
.service__heading .eyebrowLabel,
.news__heading .eyebrowLabel{ color: var(--color-primary); }

/* eyebrowLabel（widget/eyebrowLabel.css）はサイト共通でPC基準のclampのため、
   共通CSS自体・PC側の挙動は変更せず、max-width:767pxにスコープして
   トップページの4見出し（WORKS/ESTATE/SERVICE/ABOUT）だけ
   Figma実測（15px）基準の固定remで上書きする（通常テキストのためSPでも
   画面幅に連動させない） */
@media screen and (max-width: 767px){
    .works__heading .eyebrowLabel,
    .estate__heading .eyebrowLabel,
    .service__heading .eyebrowLabel,
    .company__heading .eyebrowLabel{
        /* line-height未指定だとbody継承の1.8になり、Figma実測（15px文字に
           対し高さ22px＝比率約1.467）より高くなっていた */
        font-size: 3.8462vw; /* Figma実測15px */
        line-height: 1.467;
        margin-bottom: 2.0513vw;
    }
}

/* eyebrowLabel下の装飾罫線（::after）も同じ理由で短くなっていたため、
   このページの4見出しだけmax-width:767pxにスコープして上書きする
   （border-widthは寸法系のためpx/vwどちらでも可。既存のvw指定を踏襲） */
@media screen and (max-width: 767px){
    .works__heading .eyebrowLabel::after,
    .estate__heading .eyebrowLabel::after,
    .service__heading .eyebrowLabel::after{
        border-right-width: max(16.41px, 5.1282vw);
        border-right-color: #bcbcbc;
        border-left-width: max(16.41px, 5.1282vw);
    }
    /* ABOUTはFigmaでは左揃えだが、他セクション（WORKS/ESTATE/SERVICE）と
       統一しeyebrowLabel（"ABOUT"の文字）だけ中央揃えに変更する
       （見出し本文「中塚建設について」は引き続き左揃えのまま。罫線
       （::after）は別途margin:autoで中央揃え済みで動かしていない。
       罫線幅自体の上書きはCompanyセクション側のルールで行う。後方の
       .company__heading .eyebrowLabel::after{border-right:...}という
       shorthand指定より後ろに書かないと打ち消されてしまうため） */
    .company__heading .eyebrowLabel{ text-align: center; }
}


/* ######################################################################################

　PHILOSOPHY

###################################################################################### */

/* ----- philosophy ----- */

@media print, screen and (min-width: 768px){
    /* padding-bottomはFigmaとの差分（後述のphilosophy__leadのmargin-top
       撤去分＝約24px）を吸収し、帯（セクション）の高さ自体は変えずに
       コンテンツだけを上へ寄せるための調整込みの値 */
    .philosophy{ padding-top: 5em; padding-bottom: 5em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端からリード文まで55px、valueList下端から帯下端まで
       63px（旧値60px/48pxは未検証の概算値だった） */
    .philosophy{ padding-top: 14.1026vw; padding-bottom: 16.1538vw; }
}

/* philosophy__inner
---------------------------------------------------- */
.philosophy__inner{ text-align: center; }

/* philosophy__heading
---------------------------------------------------- */
.philosophy__heading{
    letter-spacing: 0.08em;
    font-size: 4rem;
}
@media screen and (max-width: 767px){
    .philosophy__heading{ font-size: 6.1538vw; } /* Figma実測24px */
}

/* philosophy__lead
---------------------------------------------------- */
.philosophy__lead{
    line-height: 2.1538;
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.0385em;
    font-size: 2.6rem;
    color: var(--color-text);
}
@media print, screen and (min-width: 768px){
    .philosophy__lead{ margin-bottom: 2.4615em; }
}
@media screen and (max-width: 767px){
    .philosophy__lead{ margin-bottom: 12.3077vw; font-size: 5.1282vw; line-height: 1.9; } /* Figma実測20px */
}

/* philosophy__valueList
---------------------------------------------------- */
.philosophy__valueList{
    display: flex;
    padding-top: 2.5em;
}
@media print, screen and (min-width: 768px){
    .philosophy__valueList{ justify-content: center; gap: 10em; }
}
@media screen and (max-width: 767px){
    .philosophy__valueList{
        flex-direction: column;
        align-items: flex-start;
        gap: 8.7179vw;
        /* リード文の margin-bottom（Figma実測48px）で見出し〜カード間の余白を
           一括管理するため、こちらの padding-top は重複させない */
        padding-top: 0;
        /* Figmaはリード文（左右8px相当）より内側の50px位置から始まる。
           コンテナの標準padding（24px）に加えて26px分の追加インデントが必要 */
        padding-left: 6.6667vw;
    }
}

/* philosophy__valueItem
---------------------------------------------------- */
.philosophy__valueItem{
    position: relative;
    padding-left: 1.5em;
    text-align: left;
}
.philosophy__valueItem::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0;
    border-top: 30px solid var(--color-primary);
    border-bottom: 30px solid #dedede;
}
@media screen and (max-width: 767px){
    .philosophy__valueItem{ padding-left: 5.1282vw; }
    .philosophy__valueItem::before{
        border-top-width: max(24.62px, 7.6923vw);
        border-bottom-width: max(24.62px, 7.6923vw);
    }
}

/* philosophy__valueEn
---------------------------------------------------- */
.philosophy__valueEn{
    text-align: left;
    letter-spacing: 0.05em;
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--color-primary);
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（11px文字に対し
       高さ16px＝比率約1.45）より高くなっていた */
    .philosophy__valueEn{ font-size: 2.8205vw; line-height: 1.45; } /* Figma実測11px */
}

/* philosophy__valueJa
---------------------------------------------------- */
.philosophy__valueJa{
    margin-top: 0.1538em;
    letter-spacing: 0.0385em;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--color-text);
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（22px文字に対し
       高さ32px＝比率約1.45）より高くなっていた */
    .philosophy__valueJa{ margin-top: 1.0256vw; font-size: 5.641vw; line-height: 1.45; } /* Figma実測22px */
}

/* philosophy__valueDesc
---------------------------------------------------- */
.philosophy__valueDesc{
    margin-top: 0.2667em;
    letter-spacing: 0.05em;
    font-size: 1.5rem;
    color: var(--color-text);
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（14px文字に対し
       高さ21px前後＝比率約1.5）より高くなっていた */
    .philosophy__valueDesc{ margin-top: 2.0513vw; font-size: 3.5897vw; line-height: 1.5; } /* Figma実測14px */
}


/* ######################################################################################

　WORKS

###################################################################################### */

/* ----- works ----- */

@media print, screen and (min-width: 768px){
    /* Figma実測（帯上端から見出し「WORKS」まで70px）に対し、従来は
       philosophyと同じpadding-top(80px相当)を流用していたため10px下に
       ズレていた。帯（セクション）の高さは変えず、差分をpadding-bottomへ
       付け替えてコンテンツだけ上へ寄せる */
    .works{ padding-top: 4.375em; padding-bottom: 4.125em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端から見出しまで44px、ボタン下端から帯下端まで58px
       （旧値60px/48pxはPC同様の未検証の概算値だった） */
    .works{ padding-top: 11.2821vw; padding-bottom: 14.8718vw; }
}

/* works__inner
---------------------------------------------------- */
.works__inner{ text-align: center; }

/* Figmaのカード3枚分の実寸（460px×3＋gap60px×2＝1500px）に合わせて
   スライダー部分のみ標準コンテナ（1440px）より広いバウンディングにする */
.works__inner.contents{ max-width: 1580px; }

/* works__heading
---------------------------------------------------- */
.works__heading{
    font-size: 3rem;
}
@media screen and (max-width: 767px){
    .works__heading{ font-size: 6.1538vw; } /* Figma実測24px */
}

/* works__list
---------------------------------------------------- */
/* touch-action：lib/jquery/slick/slick.cssの.slick-slider既定値が
   touch-action:pan-y（pinch-zoomを含まない）のため、SPでカード上の
   ピンチイン/アウトができなくなる（pageWorksDetail_body.cssの
   .workDetail__mainSliderで確認済みの同じ不具合。詳細は
   [[coding_widget]] スライダー・カルーセルのピンチズームの項を参照）。
   pan-y（縦スクロールはブラウザに委ね、横方向はslickのJSスワイプに
   委ねる）はそのまま維持しつつpinch-zoomだけ許可し直す */
.works__list{
    touch-action: pan-y pinch-zoom;
    margin-top: 2em;
}
.works__list:not(.slick-initialized){
    display: flex;
    opacity: 0;
}
@media print, screen and (min-width: 768px){
    .works__list:not(.slick-initialized){ gap: 3.75em; }
}
@media screen and (max-width: 767px){
    .works__list:not(.slick-initialized){ flex-direction: column; gap: 4.1026vw; }
}
.works__list.slick-initialized{
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* works__list（slick初期化後）
---------------------------------------------------- */
/* slickはliに直接 .slick-slide を付与するだけで、各スライドを個別のdivで
   ラップしない（ラップされるのは全スライド共通の .slick-track のみ）。
   そのため「.slick-slide > div」は実在しないノードを指しており、
   ここに書かれたpadding（カード間の余白）は一度も適用されていなかった。
   カード本体（.workCard = .slick-slide本体）にmarginを与え、
   slickが自動計算するslide幅（offset計算）で帳尻を合わせる方式に修正する。 */
.works__list.slick-initialized{ margin-right: clamp(-1.875em, -2vw, -0.96em); margin-left: clamp(-1.875em, -2vw, -0.96em); }
.works__list .slick-track{
    display: flex;
    align-items: stretch;
}
.works__list .slick-slide{ height: auto; }
.works__list.slick-initialized .workCard{
    /* infinite:true はクローンスライドを同じtrack内に並べるため、
       flex:1（flex-basis:0%の等分割）のままだとクローン込みの本数で
       等分され、slickがJSで設定する実幅（slideWidth基準）と競合して
       カード幅が崩れる。初期化後は幅をJS計算値に委ねるため伸縮を止める。 */
    flex: none;
    margin-right: 1.875em;
    margin-left: 1.875em;
}
.works__list .workCard{ width: 100%; }

/* works__list（SP：カード幅260px固定＋左24px基点で右方向に次カードが見切れる） */
@media screen and (max-width: 767px){
    .works__list{ margin-top: 8.2051vw; }
    .works__list.slick-initialized{ margin-right: min(-19.69px, -6.1538vw); margin-left: 0; }
    .works__list.slick-initialized .workCard{ margin-right: 0; margin-left: 0; }
    .works__list .slick-track{ gap: 4.1026vw; }
    .works__list .workCard{ width: max(213.33px, 66.6667vw); flex: none; }
}

/* works__list .slick-list（横方向のみクリップしつつ縦方向のbox-shadowを
   見せるための調整）
   overflow-xとoverflow-yの一方だけを visible にしても、CSSの仕様上もう
   一方が非visible（ここではhidden）なら visible は強制的に auto へ
   computeされ、結局縦方向もクリップされてしまう（overflow-x:hidden;
   overflow-y:visible; という組み合わせでは効果がない）。
   さらに、overflowのままpadding-top/bottomでクリップ境界（padding edge）
   を広げる方法も、heightがautoの.slick-listでは.slick-track側に
   同量の負のmarginを足さないと見た目の位置・全体高さが崩れてしまい、
   その負のmarginがpaddingの拡張分をちょうど打ち消して振り出しに戻って
   しまう（実測でclip境界がworkCardの外形と完全に一致し、影が全く
   出ない状態になることをcomputed styleで確認済み）ため採用できない。
   次に試した overflow:visible + clip-path（inset()の各辺を独立指定して
   左右だけ切る）は、見た目の描画（ペイント）は正しくクリップできるが、
   clip-pathはレイアウト上のoverflow（スクロール可能領域）には影響しない。
   .slick-trackはslick.js側でvariableWidth:true時に
   `width(5000 * slideCount)`という巨大幅（実測3万px前後）を明示的に
   設定しており、overflow:visibleにするとこの巨大な.slick-trackが
   （見た目はclip-pathで隠れていても）ページ全体のスクロール可能幅に
   そのまま算入されてしまい、PC/SPとも実際に横方向へ大きくスクロール
   できてしまう不具合が実測（document.body.scrollWidth）で判明した。
   overflow-x:clip はhiddenと同様にレイアウト上のoverflow-xも遮断しつつ、
   hidden特有の「他方の軸がvisibleでも強制的にautoへ丸められる」仕様の
   対象外（clipはhidden/auto/scroll/visibleのいずれとも異なる値のため、
   このoverflow-x/-yの相互強制ルールが適用されない）で、overflow-yを
   本当にvisibleのまま維持できるため、これを採用する */
.works__list .slick-list{
    overflow-x: clip;
    overflow-y: visible;
}

/* workCard
---------------------------------------------------- */
/* 「詳細を見る」の位置をタイトル行数に関わらず下端に揃えるため、
   .workCard〜.workCard__bodyまでを縦方向Flexで連結し、flex:1の
   バケツリレーでworkCard__bodyを伸縮させる。height:100%（%指定）は
   slick-trackのalign-items:stretchが各カードの基準高さを算出する際の
   hypothetical sizeが不定になりやすいため使わず、flex-growのみで
   伸縮させる（カード自体の高さ＝align-items:stretchによる決定方式は
   変更しない） */
.workCard{
    /* slick.css（ライブラリ）の .slick-initialized .slick-slide{display:block}
       がクラス2つ分の詳細度を持ち、.workCardの display:flex（クラス1つ）を
       上書きしてしまうため、この宣言のみ !important で確実に勝たせる */
    display: flex !important;
    flex: 1;
    flex-direction: column;
    transition: box-shadow var(--transition);
    border-radius: 8px;
    background: var(--color-white);
    /* .worksセクションの背景（--color-bg-alt:#f7f7f7）は.estateセクション
       （--color-white:#fff）より暗いため、同じalpha値では影のコントラストが
       弱く見える。見た目の濃さをestateCardと揃えるためalphaを上げている */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.workCard:hover{
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* workCard__link
---------------------------------------------------- */
.workCard__link{
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* workCard__figure
---------------------------------------------------- */
.workCard__figure{
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
.workCard__figure picture{ display: contents; }
/* 表示領域は300:225＝4:3固定（2026-09確定）。以前はFigmaのダミー画像
   （works_0X_pc.png 460×240／works_0X_sp.png 520×300）自体の比率を
   フレームのaspect-ratioにそのまま流用しており、実際の投稿サムネイル
   （縦長・横長など比率が不揃い）を object-fit 未指定（初期値 fill）の
   <img> で表示していたため、フレーム比率に強制的に引き伸ばされて
   変形して見えていた。フレーム比率をPC/SP共通で4:3に統一し、
   下のworkCard__photo側でcoverによるトリミングに切り替える */
.workCard__figure{ aspect-ratio: 300 / 225; }
@media screen and (max-width: 767px){
    /* カード幅がvwで可変になるため、固定高さではなくaspect-ratioで
       4:3比率を維持する */
    .workCard__figure{ height: auto; }
}

/* workCard__photo
---------------------------------------------------- */
.workCard__photo{
    /* 元画像の縦横比は変えず、4:3フレームいっぱいにcoverで配置し、
       はみ出した部分だけトリミングする（画像自体を4:3へ変形しない） */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* workCard__body
---------------------------------------------------- */
.workCard__body{
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: 1em;
    padding-right: 1.25em;
    padding-bottom: 1.5em;
    padding-left: 1.25em;
    text-align: left;
}
@media screen and (max-width: 767px){
    .workCard__body{
        align-items: flex-start;
        gap: 2.5641vw;
        padding: 5.1282vw;
    }
}

/* workCard__tagList（カテゴリを複数選択した投稿はタグが複数並ぶための行ラッパー）
---------------------------------------------------- */
.workCard__tagList{
    /* .workCard__bodyがdisplay:flex(column)のフレックスアイテムになった
       ことで、align-items未指定＝normal（=stretch相当）によりタグ行が
       横幅いっぱいに伸びて見た目上ブロック要素のようになっていた
       （PCのみ。SPは.workCard__body側でalign-items:flex-start済み）。
       align-self:flex-startでラッパー自身の伸長だけを止め、
       内容幅に戻す */
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    gap: 0.4em;
}

/* workCard__tag（tagBadge 最低幅）
---------------------------------------------------- */
.workCard__tag{
    min-width: 56px;
}
@media screen and (max-width: 767px){
    /* .tagBadge（widget/tagBadge.css）はサイト共通で固定サイズのため、
       このページのカードタグだけ上書きする（共通CSS自体は変更しない） */
    .workCard__tag{ font-size: 2.8205vw; } /* Figma実測11px */
}

/* workCard__title
---------------------------------------------------- */
.workCard__title{
    margin-top: 0.625em;
    /* タイトル直後にタグが自然に続くための確定余白（カード間で揃えない） */
    margin-bottom: 0.375em;
    letter-spacing: 0.05em;
    font-family: var(--font-serif-work);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--color-text);
}
@media screen and (max-width: 767px){
    /* SPはworkCard__body側のgapが確定余白を担うため、ここでは0にする。
       line-height:1.6はPC実測に基づく値でSPのFigma実測（18px文字に対し
       高さ22px＝比率約1.22）とは合わず、カード全体の高さが膨らむ原因に
       なっていたためSPだけ上書きする */
    .workCard__title{ margin-top: 0; margin-bottom: 0; font-size: 4.6154vw; line-height: 1.22; } /* Figma実測18px */
}

/* workCard__footer（タグ＋詳細リンクの縦積みラッパー）
---------------------------------------------------- */
/* タグはタイトル直下に自然配置し、詳細を見るだけをカード下端に揃えたいため、
   footer自体をflex:1でbody内の残り高さいっぱいに広げ、内部をタグ→（可変の
   余白）→詳細を見る、という縦積みにする。タグの縦位置はカードごとの行数
   （タイトル・タグとも）に応じて変わってよく、詳細を見る側のmargin-top:auto
   （後述）だけがカード間で高さの違いを吸収する */
.workCard__footer{
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    /* タグ→詳細を見るの確定最小余白（自然に見える間隔）。カード間の
       高さ差はworkCard__moreのmargin-top:autoが追加で吸収する */
    gap: 0.5em;
}
@media screen and (max-width: 767px){
    .workCard__footer{ gap: 2.5641vw; } /* Figma実測10px（390px基準） */
}

/* workCard__tags
---------------------------------------------------- */
.workCard__tags{
    letter-spacing: 0.08em;
    font-size: 1.2rem;
    color: var(--color-text-sub);
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（13px文字に
       対し高さ16px＝比率約1.23）より大幅に高くなっていた */
    .workCard__tags{ font-size: 3.3333vw; line-height: 1.23; } /* Figma実測13px */
}

/* workCard__more
---------------------------------------------------- */
.workCard__more{
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* タイトル・タグの行数差で生まれる余りスペースをここへ集約し、
       「詳細を見る」を常にカード下端（workCard__footerの下端）に揃える */
    margin-top: auto;
    gap: 0.4286em;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-primary);
}
.workCard__more img{
    width: 20px;
    height: 20px;
}
@media screen and (max-width: 767px){
    /* FigmaのSPは丸アイコンではなく「詳細を見る →」のテキスト矢印のみ。
       line-height未指定だとbody継承の1.8になり、Figma実測（14px文字に
       対し高さ17px＝比率約1.21）より大幅に高くなっていた */
    .workCard__more{ font-size: 3.5897vw; line-height: 1.21; } /* Figma実測14px */
    .workCard__more img{ display: none; }
    .workCard__more::after{ content: "→"; }
}

/* works__pager（slick dots・arrows）
---------------------------------------------------- */
/* .works__pager は .works__inner.contents の直下の子要素であり、
   親側で既にコンテナ幅とpaddingが適用済み（.works__list や
   works-more-btn と同じ基準）。ここに独自の max-width / padding を
   重ねて持たせると、親のpaddingと二重に効いて右端が内側にずれ、
   カード列の右端（.works__list）とボタン列の右端がFigmaと違って
   揃わなくなっていた。親から幅・paddingを継承させ、同じ基準で
   right端が一致するようにする。 */
.works__pager{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.5em;
}
@media screen and (max-width: 767px){
    /* FigmaのSPデザインにはページャー（トラック・前後ボタン）が存在せず
       フリック操作のみの仕様だが、今回の追加仕様（操作UIをカード一覧と
       「施工事例一覧を見る」ボタンの間に表示）としてFigmaより優先し表示する。
       margin-topはSPが上限固定禁止のためvw化（PCの1.5emに相当する比率）。
       ボタンとの間隔は.works__btnWrapの既存margin-topをそのまま使うため
       ここでは追加しない */
    .works__pager{ margin-top: 6.1538vw; }
}

/* トラック→前ボタン：25px／前ボタン→次ボタン：15px（Figma実測、均等gapにしない） */
.works__pagerTrack{ margin-right: 1.5625em; }
.works__pager .slick-prev{ margin-right: 0.9375em; }
@media screen and (max-width: 767px){
    .works__pagerTrack{ margin-right: 3.5897vw; }
    .works__pager .slick-prev{ margin-right: 2.0513vw; }
}

.works__pager .slick-prev{ order: 2; }
.works__pager .slick-next{ order: 3; }

.works__pagerTrack{
    position: relative;
    order: 1;
    width: 240px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    overflow: hidden;
}
@media screen and (max-width: 767px){
    .works__pagerTrack{ width: max(98.46px, 30.7692vw); height: max(3.28px, 1.0256vw); }
}
.works__pagerFill{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--color-primary);
    transition: left var(--transition), width var(--transition);
}

.works__pager .slick-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    transform: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background var(--transition);
}
@media screen and (max-width: 767px){
    /* タップ領域はFigma実測(35×35)を固定し、viewport幅による縮小はしない
       （操作性・アクセシビリティ上の最低サイズを優先。寸法系のためpx可） */
    .works__pager .slick-arrow{ width: 35px; height: 35px; }
}
.works__pager .slick-arrow:before{
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    opacity: 1;
}
@media screen and (max-width: 767px){
    /* ボタン自体を固定サイズにしたため、中の矢印アイコンも比率を保つため固定 */
    .works__pager .slick-arrow:before{ width: 7px; height: 7px; }
}
.works__pager .slick-prev:before{ transform: rotate(-135deg); margin-right: clamp(-0.125em, -0.1333vw, -0.06375em); }
.works__pager .slick-next:before{ transform: rotate(45deg); margin-left: clamp(-0.125em, -0.1333vw, -0.06375em); }
.works__pager .slick-arrow.slick-disabled{ background: var(--color-border); opacity: 0.5; }
/* 色は左右（prev/next）ではなく、操作可否（.slick-disabledの有無）だけで決まる。
   本スライダーはslidesToScroll:3・infinite:trueのため、slick自身が
   .slick-disabledを付与することはなく、PREV/NEXTとも常に操作可能＝常に青になる */
.works__pager .slick-arrow:not(.slick-disabled){ background: var(--color-primary); }
.works__pager .slick-arrow:hover:not(.slick-disabled){ opacity: 0.8; }

/* works__btnWrap
---------------------------------------------------- */
.works__btnWrap{ margin-top: 2em; }
@media screen and (max-width: 767px){
    .works__btnWrap{ margin-top: 8.2051vw; }
}

/* works__moreBtn
---------------------------------------------------- */
.works__moreBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
    width: 240px;
    height: 56px;
    border: 1.5px solid var(--color-primary);
    border-radius: 4px;
    background: var(--color-white);
    letter-spacing: 0.07em;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
}
.works__moreBtn:hover{
    background: var(--color-primary);
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    .works__moreBtn{ width: 100%; height: max(45.95px, 14.359vw); font-size: 3.8462vw; } /* Figma実測15px */
}


/* ######################################################################################

　SERVICE

###################################################################################### */

/* ----- service ----- */

@media print, screen and (min-width: 768px){
    /* Figma実測は帯上端から見出しまで60px、ボタン下端から帯下端まで70px（旧値は
       他セクションと同じ一律80pxが流用されていた） */
    .service{ padding-top: 3.75em; padding-bottom: 4.375em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端から見出しまで54px、ボタン下端から帯下端まで58px
       （旧値60px/60pxは未検証の概算値だった） */
    .service{ padding-top: 13.8462vw; padding-bottom: 14.8718vw; }
}

/* service__inner
---------------------------------------------------- */
.service__inner{ text-align: center; }

/* service__heading
---------------------------------------------------- */
.service__heading{
    font-size: 3rem;
}
@media screen and (max-width: 767px){
    .service__heading{ font-size: 6.1538vw; } /* Figma実測24px */
}

/* service__list
---------------------------------------------------- */
.service__list{
    display: flex;
    margin-top: 2.5em;
}
@media print, screen and (min-width: 768px){
    /* justify-content:centerは3件で行が埋まる場合は無効果、1〜2件のときに
       カード群全体を中央寄せする（.serviceCardのflex-basis固定とセットで機能） */
    .service__list{ gap: 3.125em; justify-content: center; }
}
@media screen and (max-width: 767px){
    .service__list{ flex-direction: column; gap: 6.1538vw; margin-top: 7.6923vw; }
}

/* serviceCard
---------------------------------------------------- */
.serviceCard{
    flex: 1;
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--transition);
    border-radius: 8px;
    background: var(--color-primary);
}
@media print, screen and (min-width: 768px){
    /* flex:1（grow）だと件数が減るたびカード幅が等分に広がってしまうため、
       PCのみ3カラム基準のflex-basisで幅を固定し、grow/shrinkを止める。
       件数に関わらず常にこの3分割幅を維持し、余った分は.service__listの
       justify-content:centerで中央寄せに回す（1件・2件でも同じ考え方） */
    .serviceCard{ flex: 0 0 calc((100% - 3.125em * 2) / 3); }
}
.serviceCard:hover{ box-shadow: 0 8px 24px rgba(56,85,153,0.3); }

/* serviceCard__link
---------------------------------------------------- */
.serviceCard__link{
    display: flex;
    align-items: center;
    position: relative;
    aspect-ratio: 370 / 280;
}
@media screen and (max-width: 767px){
    /* Figma SPはテキストが中央ではなく下揃え。カード幅がvwで可変のため
       固定高さではなくaspect-ratio（342:240）で比率を維持する */
    .serviceCard__link{ align-items: flex-end; aspect-ratio: 342 / 240; }
}

/* serviceCard__figure
---------------------------------------------------- */
.serviceCard__figure{
    position: absolute;
    inset: 0;
}
.serviceCard__figure picture{ display: contents; }
/* Figma実測ではブランドカラー（#385599）の全面オーバーレイ
   （opacity 0.4〜0.5）が通常時にかかっており、ホバー時に消えて
   写真が見える仕様（過去の修正で下部グラデーションに置き換えられて
   いたが、Figma実測を再確認した結果ブランドカラーの全面オーバーレイが
   正しいことを確認したため戻す）。PCのみ有効（SPはホバー操作が
   ないため常にオーバーレイ非表示のまま） */
.serviceCard__figure::after{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    opacity: 0.4;
    transition: opacity var(--transition);
}
@media print, screen and (min-width: 768px){
    .serviceCard:hover .serviceCard__figure::after{ opacity: 0; }
}
@media screen and (max-width: 767px){
    .serviceCard__figure::after{ opacity: 0.4; }
}

/* serviceCard__photo
---------------------------------------------------- */
.serviceCard__photo{
    /* service_*_pc.png（370×280）／service_*_sp.png（684×480＝342:240の2倍）は
       いずれも.serviceCard__link のaspect-ratio（370:280／342:240）と一致する
       比率で書き出し済みのため、object-fit:coverによるトリミングは不要 */
    display: block;
    transition: transform var(--transition);
    width: 100%;
    height: 100%;
}
.serviceCard:hover .serviceCard__photo{ transform: scale(1.04); }

/* serviceCard__body
---------------------------------------------------- */
.serviceCard__body{
    position: relative;
    z-index: 1;
    padding-left: 1.5em;
    text-align: left;
}
@media screen and (max-width: 767px){
    .serviceCard__body{ padding: 0 5.1282vw 6.1538vw; }
}

/* serviceCard__en
---------------------------------------------------- */
.serviceCard__en{
    letter-spacing: 0.3em;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    .serviceCard__en{ font-size: 2.5641vw; } /* Figma実測10px */
}

/* serviceCard__ja
---------------------------------------------------- */
.serviceCard__ja{
    margin-top: 0.1667em;
    letter-spacing: 0.0417em;
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 2.4rem;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    .serviceCard__ja{ margin-top: 1.0256vw; font-size: 5.1282vw; } /* Figma実測20px */
}

/* serviceCard__desc
---------------------------------------------------- */
.serviceCard__desc{
    margin-top: 0.5714em;
    line-height: 1.857;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    .serviceCard__desc{ margin-top: 2.0513vw; font-size: 4.1026vw; line-height: 1.625; } /* Figma実測16px */
}

/* service__btnWrap / service__moreBtn
---------------------------------------------------- */
.service__btnWrap{ margin-top: 3.125em; } /* Figma実測50px */
@media screen and (max-width: 767px){
    .service__btnWrap{ margin-top: 8.2051vw; }
}
.service__moreBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
    width: 240px;
    height: 56px;
    border: 1.5px solid var(--color-primary);
    border-radius: 4px;
    background: var(--color-white);
    letter-spacing: 0.07em;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
}
@media screen and (max-width: 767px){
    .service__moreBtn{ width: 100%; height: max(45.95px, 14.359vw); font-size: 3.8462vw; } /* Figma実測15px */
}
.service__moreBtn:hover{
    background: var(--color-primary);
    color: var(--color-white);
}


/* ######################################################################################

　COMPANY

###################################################################################### */

/* ----- company ----- */

@media print, screen and (min-width: 768px){
    .company{ padding-top: 5em; padding-bottom: 5em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端からABOUT見出しまで64px、ボタン下端から
       次セクション（お知らせ）開始位置まで42px（旧値60px/60pxは
       未検証の概算値だった） */
    .company{ padding-top: 16.4103vw; padding-bottom: 10.7692vw; }
}

/* company__inner
---------------------------------------------------- */
.company__inner{
    display: flex;
    align-items: center;
    gap: 3.75em;
}
@media print, screen and (min-width: 768px){
    /* Figma実測ではテキスト（自然幅）と写真（固定幅710px／コンテナ幅1210pxの
       58.68%）がコンテナの両端に配置され、その間の余白（約230px）は
       gapとして明示された値ではなく単純な余りスペースになっている。
       gap（60px相当）だけで再現しようとすると余白が狭くなりすぎるため、
       justify-content:space-betweenで両端揃えにする */
    .company__inner{ justify-content: space-between; }
}
@media screen and (max-width: 767px){
    /* Figma SPは「テキスト→写真→ボタン」の順。ボタンは.company__textBlock内に
       あるが、写真の後ろに表示させるためtextBlockをdisplay:contentsで解除し、
       各要素をcompany__innerの直接のflexアイテムとしてorderで並べ替える
       （HTML構造・PC側の見た目は変更しない） */
    .company__inner{ flex-direction: column; gap: 0; }
    .company__textBlock{ display: contents; }
    .company__heading{ order: 1; }
    .company__body{ order: 2; }
    .company__photoBlock{ order: 3; margin-top: 8.2051vw; }
    .company__btn{ order: 4; }
}

/* company__textBlock
---------------------------------------------------- */
/* Figma実測ではテキストブロックは固定幅ではなく、明示的な改行（<br>）で
   区切られた各行のうち最長行（約269px）に自然に収まる幅（=コンテンツの
   実幅）になっている。width:clampで380px幅に固定していたためテキスト側が
   広がりすぎ、flex:1のcompany__photoBlock（写真）がその分狭くなっていた。
   幅指定を外し、内容に応じた自然幅（auto）にする */
.company__textBlock{ flex-shrink: 0; }

/* company__heading（eyebrowLabel左寄せ）
---------------------------------------------------- */
.company__heading{
    text-align: left;
    font-size: 3rem;
}
.company__heading .eyebrowLabel{
    color: var(--color-primary);
}
@media print, screen and (min-width: 768px){
    /* PCはFigmaどおり左揃え。以前はここが無条件（メディアクエリなし）
       指定だったため、後方のSP用text-align:centerと詳細度が同じまま
       ソース順で競合し、SP側のcenter指定が常に打ち消されていた
       （「ABOUT」がSPでも左寄りに見えていた原因）。PC専用にスコープする */
    .company__heading .eyebrowLabel{ text-align: left; }
}
.company__heading .eyebrowLabel::after{
    content: "";
    display: block;
    margin-top: 0.2143em;
    margin-right: auto;
    margin-left: 0;
    width: 0;
    height: 1px;
    border-right: 20px solid #dedede;
    border-left: 20px solid var(--color-primary);
}
@media screen and (max-width: 767px){
    .company__heading{ font-size: 6.1538vw; } /* Figma実測24px */
    /* SPは中央揃えに変更するため、罫線の位置揃えもcenterへ */
    .company__heading .eyebrowLabel::after{
        margin-top: 1.5385vw;
        margin-right: auto;
        margin-left: auto;
        border-right-width: max(16.41px, 5.1282vw);
        border-left-width: max(16.41px, 5.1282vw);
    }
}

/* company__body
---------------------------------------------------- */
.company__body{
    margin-top: 1.6em;
    line-height: 2;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text);
}
@media screen and (max-width: 767px){
    .company__body{ margin-top: 6.1538vw; font-size: 4.1026vw; } /* Figma実測16px */
}

/* company__btn
---------------------------------------------------- */
.company__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
    margin-top: 2em;
    width: 240px;
    height: 56px;
    border: 1.5px solid var(--color-primary);
    border-radius: 4px;
    background: var(--color-primary);
    letter-spacing: 0.07em;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-white);
}
.company__btn:hover{
    background: var(--color-white);
    color: var(--color-primary);
}
@media screen and (max-width: 767px){
    /* Figma SPはボタンが写真の下（テキストブロック直後ではない）に来るため、
       photoBlockに続くボタンとしての余白に上書きする */
    .company__btn{ width: 100%; height: max(45.95px, 14.359vw); font-size: 3.8462vw; margin-top: 8.7692vw; } /* Figma実測15px */
}

/* company__photoBlock
---------------------------------------------------- */
.company__photoBlock{ flex: 1; }
.company__photoBlock picture{ display: contents; }
@media print, screen and (min-width: 768px){
    /* flex:1（残り幅を全部埋める）だとテキスト側の幅修正後に写真が
       Figma実測（710px／コンテナ幅1210pxの58.6777%）より広くなりすぎるため、
       コンテナに対する比率の固定幅にする（justify-content:space-betweenと
       セットで、テキストは左端・写真は右端に揃う） */
    .company__photoBlock{ flex: none; width: 58.6777%; }
}

/* company__photo
---------------------------------------------------- */
.company__photo{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
@media print, screen and (min-width: 768px){
    /* company_pc.png（600×400）はFigmaでトリミング済みの書き出し画像のため、
       CSS側でobject-fit:coverによるトリミングは行わず、画像自体の比率
       （600:400）をaspect-ratioで反映して表示サイズのみ可変にする。
       photoBlock幅はflexの58.6777%で可変のため、独立したheight:clampだと
       画像比率とズレる（=CSS側で暗黙にトリミングされる）ことになっていた */
    .company__photo{ aspect-ratio: 600 / 400; }
}
@media screen and (max-width: 767px){
    /* Figma SPは写真がコンテナ余白を無視して画面幅いっぱいに広がる */
    .company__photoBlock{
        margin-right: -6.1538vw;
        margin-left: -6.1538vw;
    }
    /* company_sp.png（390×300）と一致する比率 */
    .company__photo{ aspect-ratio: 390 / 300; border-radius: 0; }
}


/* ######################################################################################

　NEWS

###################################################################################### */

/* ----- news ----- */

@media print, screen and (min-width: 768px){
    /* Figma実測は帯上端からリストコンテナまで90px、リストコンテナ下端から
       帯下端まで107px（旧値は他セクションと同じ一律80pxが流用されていた） */
    .news{ padding-top: 5.625em; padding-bottom: 6.6875em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端から見出しまで54px、リスト下端から帯下端まで64px
       （旧値60px/60pxは未検証の概算値だった） */
    .news{ padding-top: 13.8462vw; padding-bottom: 16.4103vw; }
}

/* news__inner（見出し＝左／リスト＝右の横並び）
---------------------------------------------------- */
.news__inner{
    display: flex;
    align-items: flex-start;
    text-align: left;
}
@media print, screen and (min-width: 768px){
    .news__inner{ gap: 4.375em; }
}
@media screen and (max-width: 767px){
    .news__inner{ flex-direction: column; gap: 6.4103vw; }
}

/* news__heading
---------------------------------------------------- */
.news__heading{
    /* 見出し単体を中央配置するのではなく、上セクションの「会社案内はこちら」
       ボタン（.company__btn）と同じ列幅・同じ左端基準を与えることで、
       見出しテキストの中心がボタンの中心と自然に一致するようにする
       （company__btnのwidth:240pxと同一値） */
    flex-shrink: 0;
    width: 240px;
    text-align: center;
    font-size: 3rem;
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（26px文字に対し
       高さ38px＝比率約1.46）より高くなっていた */
    .news__heading{ width: auto; text-align: left; font-size: 6.6667vw; line-height: 1.46; } /* Figma実測26px */
}

/* news__list（topicsInfoの配置調整）
---------------------------------------------------- */
.news__list{
    flex: 1;
    min-width: 0;
}
@media print, screen and (min-width: 768px){
    /* Figma実測は見出し上端とリスト上端を揃えず、見出し自身の行の高さ分
       （約58.5px）リストを下げた位置から開始する。また一覧の最上部には
       罫線がない（項目間の区切り線のみ）ため、共通ウィジェットの
       topBorderをPCも打ち消す（SPは.news__list.topBorderで既に対応済み） */
    .news__list{ margin-top: 3.65625em; }
    .news__list.topBorder{ border-top: none; }
}
@media screen and (max-width: 767px){
    /* .topicsInfo（widget/topicsInfo.css）はサイト共通で固定サイズのため、
       このページのニュース一覧だけ上書きする（共通CSS自体は変更しない） */
    /* いずれもline-height未指定だとbody継承の1.8になり、Figma実測より
       高くなっていた（date:13px文字に高さ16px＝比率約1.23／
       tag:11px文字に高さ13px＝比率約1.18／text:16px文字1行あたり
       高さ24px＝比率1.5） */
    .news__list .date{ font-size: 3.3333vw; line-height: 1.23; }  /* Figma実測13px */
    .news__list .tag{ font-size: 2.8205vw; line-height: 1.18; }   /* Figma実測11px */
    .news__list .text{ font-size: 4.1026vw; line-height: 1.5; }  /* Figma実測16px */
    .news__list .body{ font-size: 3.3333vw; line-height: 1.5; }  /* .dateと同じ13px相当（本文用Figma指定なしのため既存タイポグラフィのスケールに合わせる） */
    /* Figmaは一覧の最上部・最下部に罫線がなく、項目間の区切り線のみ */
    .news__list.topBorder{ border-top: none; }
    .news__list .entry:last-child{ border-bottom: none; margin-bottom: 0; }
    /* .topicsInfo（widget/topicsInfo.css）は上下固定サイズだが、Figmaは
       「本文〜罫線」20px＋「罫線〜次項目」20pxの構成。共通CSSは変更せず
       このページのニュース一覧だけ上書きする */
    .news__list .entry{
        padding-top: 0;
        padding-bottom: 5.1282vw;
        margin-bottom: 5.1282vw;
    }
}


/* ######################################################################################

　ESTATE（不動産情報）

###################################################################################### */

/* ----- estate ----- */

/* estate__inner
---------------------------------------------------- */
/* .works__inner/.service__innerには既にtext-align:centerがあるが、
   .estate__innerだけ抜けていたため見出し「不動産情報」（eyebrowLabelを
   含まない素のテキストノード）が左揃えのまま表示されていた（左に
   ずれて見える原因）。他セクションと同じく揃える */
.estate__inner{ text-align: center; }

@media print, screen and (min-width: 768px){
    /* Figma実測は帯上端から見出し「ESTATE」まで68px、ボタン列下端から
       帯下端まで136px（旧値92pxは「上下差分をpadding-bottomへ付け替える」
       前提で概算した値で、実際のFigma実測とは異なっていた） */
    .estate{ padding-top: 4.25em; padding-bottom: 8.5em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端から見出しまで54px、ボタン列下端から帯下端まで59px
       （旧値60px/60pxは未検証の概算値だった） */
    .estate{ padding-top: 13.8462vw; padding-bottom: 15.1282vw; }
}

/* estate__heading
---------------------------------------------------- */
.estate__heading{
    font-size: 3rem;
}
.estate__heading .eyebrowLabel::after{ border-right-color: #bcbcbc; }
@media screen and (max-width: 767px){
    .estate__heading{ font-size: 6.1538vw; } /* Figma実測24px */
}

/* estate__lead
---------------------------------------------------- */
.estate__lead{
    margin-top: 1.8125em; /* Figma実測29px */
    line-height: 1.7;
    font-size: 1.5rem;
    color: var(--color-text);
}
@media screen and (max-width: 767px){
    .estate__lead{ margin-top: 5.641vw; font-size: 3.8462vw; line-height: 1.867; } /* Figma実測15px */
}

/* estate__list
---------------------------------------------------- */
.estate__list{
    display: flex;
    margin-top: 2em;
}
@media print, screen and (min-width: 768px){
    .estate__list{ gap: 3.75em; }
}
@media screen and (max-width: 767px){
    /* Figma SPは縦積みではなく、固定幅260pxのカードを横スクロールで見せる
       （施工事例スライダーと同じ「隣のカードが見切れる」表現） */
    .estate__list{
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4.1026vw;
        margin-top: 7.6923vw;
        margin-right: -6.1538vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
}

/* estateCard
---------------------------------------------------- */
.estateCard{
    position: relative;
    flex: 1;
    text-align: left;
}
@media screen and (max-width: 767px){
    /* Figma SPはカード全体（画像＋テキスト）を1枚のカードとして
       枠線・影で囲む。PCはFigma実測で影・枠線が画像部分にしか付かず、
       テキスト部分（表組み等）には付かないため、SPだけカード全体に
       overflow/border/box-shadow/border-radiusを適用する
       （PC側は.estateCard__figureへ移設） */
    .estateCard{
        flex: 0 0 max(213.33px, 66.6667vw);
        scroll-snap-align: start;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        background: var(--color-white);
        box-shadow: 0 0 20px rgba(0,0,0,0.06);
    }
    .estateCard:hover{ box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
}

/* estateCard__link
---------------------------------------------------- */
.estateCard__link{ display: block; }
@media screen and (max-width: 767px){
    /* Figma SPは写真がフルブリードではなく、カード内側にインセットで
       表示される（写真220×160、周囲20px/下24pxパディング、gap20px）*/
    .estateCard__link{
        display: flex;
        flex-direction: column;
        gap: 5.1282vw;
        padding: 5.1282vw 5.1282vw 6.1538vw;
    }
}

/* estateCard__tag（売約済等）
---------------------------------------------------- */
.estateCard__tag{
    position: absolute;
    top: 0.9375em;
    left: 1.25em;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding-right: 0.75em;
    padding-left: 0.75em;
    border-radius: 2px;
    background: #e2171a;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    /* Figma SPは売約済等のステータスをタイトル文字色（下線付き青）のみで
       表現し、写真上の赤バッジは重複表示として存在しない */
    .estateCard__tag{ display: none; }
}

/* estateCard__figure
---------------------------------------------------- */
.estateCard__figure{
    overflow: hidden;
    aspect-ratio: 420 / 310;
    transition: box-shadow var(--transition);
}
@media print, screen and (min-width: 768px){
    /* Figma実測では影・角丸は画像部分のみに付き、テキスト部分（表組み等）
       には付かない（.estateCardから移設）。区切り線（border-bottom）は
       Figmaに存在しないため付けない。
       またFigmaの「写真」は白背景＋枠線のカード（460×340）に対し、
       実画像（420×310）が周囲20px（左右）/15px（上下）のインセットで
       配置されている（測量図等、端まで切れると困る画像のため全体表示）。
       aspect-ratioはカード自体の比率（460/310ではなく460/340）とし、
       box-sizing:border-boxでpaddingをこの比率の内側に収め、
       写真はobject-fit:containで余白の中に全体表示させる */
    .estateCard__figure{
        box-sizing: border-box;
        aspect-ratio: 460 / 340;
        padding: 1.40625em 1.875em; /* Figma実測の1.5倍（指示による） */
        border: 1px solid #dedede; /* Figma実測（--color-borderとは別値） */
        border-radius: 6px;
        background: var(--color-white);
        box-shadow: 0 0 20px rgba(0,0,0,0.06);
    }
    .estateCard:hover .estateCard__figure{ box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
}
.estateCard__photo{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media print, screen and (min-width: 768px){
    /* SPのobject-fit:cover（220×160が実写真とほぼ同比率のため成立）を
       PCだけ上書き。PCは.estateCard__figureのpaddingで確保した余白の中に
       写真全体を表示するためcontainにする */
    .estateCard__photo{ object-fit: contain; }
}
@media screen and (max-width: 767px){
    .estateCard__figure{
        width: 100%;
        height: auto;
        aspect-ratio: 220 / 160;
        flex-shrink: 0;
        border-radius: 4px;
    }
}

/* estateCard__body
---------------------------------------------------- */
.estateCard__body{
    /* Figma実測は上/左右20pxに対し下だけ24pxと非対称（padding:pt-20 px-20 pb-24）。
       一律1.25em(=20px相当)のショートハンドだと下側がFigmaより不足していた */
    padding-top: 1.25em;
    padding-right: 1.25em;
    padding-bottom: 1.5em;
    padding-left: 1.25em;
}
@media screen and (max-width: 767px){
    /* SPは親の .estateCard__link 側でpadding/gapを管理するため打ち消す */
    .estateCard__body{ display: contents; }
}

/* estateCard__title
---------------------------------------------------- */
.estateCard__title{
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    /* Figmaのピクセル値を実測した結果、色は#254dabではなく--color-primary
       （#385599）、かつ下線なしが正しい値だったため修正
       （node-id 852-121に貼り付けた実装スクリーンショットとの比較で判明） */
    color: var(--color-primary);
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（18px文字2行に
       対し高さ56px＝1行あたり比率約1.56）より高くなっていた */
    .estateCard__title{ font-size: 4.6154vw; line-height: 1.56; } /* Figma実測18px */
}

/* estateCard__table
---------------------------------------------------- */
.estateCard__table{
    margin-top: 1em;
    border-top: 1px solid var(--color-border);
}
.estateCard__row{
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    border-bottom: 1px solid var(--color-border);
    padding-top: 0.625em;
    padding-bottom: 0.625em;
}
.estateCard__rowLabel{
    flex-shrink: 0;
    width: 6em;
    font-size: 1.4rem;
    color: var(--color-text-sub);
}
.estateCard__rowValue{
    font-size: 1.4rem;
    color: var(--color-text);
}
@media screen and (max-width: 767px){
    /* .estateCard__body が display:contents になるため、gap:20px による
       間隔管理と重複しないよう margin-top は打ち消す */
    /* Figmaに「所在地」上の罫線は存在しないため削除する */
    .estateCard__table{ margin-top: 0; border-top: none; }
    .estateCard__row{
        flex-direction: column;
        align-items: flex-start;
        gap: 1.0256vw;
        padding-top: 3.0769vw;
        padding-bottom: 3.0769vw;
    }
    /* line-height未指定だとbody継承の1.8になり、Figma実測より高くなっていた
       （label:13px文字に対し高さ16px＝比率約1.23／value:15px文字に対し
       高さ22px＝比率約1.47） */
    .estateCard__rowLabel{ width: auto; font-size: 3.3333vw; font-weight: 700; line-height: 1.23; } /* Figma実測13px */
    .estateCard__rowValue{ font-size: 3.8462vw; line-height: 1.47; } /* Figma実測15px */
}

/* estateCard__more
---------------------------------------------------- */
.estateCard__more{
    display: inline-flex;
    align-items: center;
    gap: 0.4286em;
    margin-top: 1.1429em;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-primary);
}
/* Figma実測のPCは丸矢印アイコン（workCard__moreと同じアセット）が
   テキストの前に付き、SPはアイコンなしのテキスト矢印「→」のみ
   （Figma SPデザインを維持） */
.estateCard__more img{ width: 20px; height: 20px; }
@media screen and (max-width: 767px){
    .estateCard__more img{ display: none; }
    .estateCard__more::after{ content: "→"; }
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（15px文字に対し
       高さ18px＝比率1.2）より高くなっていた */
    .estateCard__more{ margin-top: 0; font-size: 3.8462vw; line-height: 1.2; } /* Figma実測15px */
}

/* estate__btnWrap
---------------------------------------------------- */
.estate__btnWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.875em;
    margin-top: 4.6875em; /* Figma実測75px */
}
@media screen and (max-width: 767px){
    .estate__btnWrap{ flex-direction: column; gap: 4.1026vw; margin-top: 8.2051vw; }
}

.estate__listBtn,
.estate__contactBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 56px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    transition: background var(--transition), color var(--transition);
}
.estate__listBtn{
    border: 1.5px solid var(--color-primary);
    background: var(--color-white);
    color: var(--color-primary);
}
.estate__listBtn:hover{ background: var(--color-primary); color: var(--color-white); }
.estate__contactBtn{
    background: var(--color-primary);
    color: var(--color-white);
}
.estate__contactBtn:hover{ opacity: 0.85; }
@media screen and (max-width: 767px){
    /* Figma SPはボタン幅がコンテナ幅いっぱい（342px）で、280px上限は存在しない */
    .estate__listBtn,
    .estate__contactBtn{ width: 100%; max-width: none; height: max(45.95px, 14.359vw); font-size: 3.8462vw; } /* Figma実測15px */
}


/* ######################################################################################

　INSTAGRAM

###################################################################################### */

/* ----- instagram ----- */

@media print, screen and (min-width: 768px){
    /* Figma実測は帯上端から見出しまで101px、ボタン下端から帯下端まで132px
       （旧値は他セクションと同じ一律80pxが流用されていた） */
    .instagram{ padding-top: 6.3125em; padding-bottom: 8.25em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端から見出しまで64px（下端は旧値60pxのまま一致） */
    .instagram{ padding-top: 16.4103vw; padding-bottom: 15.3846vw; }
}

/* instagram__inner
---------------------------------------------------- */
.instagram__inner{ text-align: center; }
@media print, screen and (min-width: 768px){
    /* Figma実測はコンテナ幅1562px相当（標準の1440pxより広い）。
       サムネイル9枚グリッドの幅がFigmaより狭く、その分サムネイル
       サイズも小さくなっていた原因。works__inner.contentsと同様、
       このセクションだけ.contentsを上書きする */
    .instagram__inner.contents{ max-width: 1642px; }
}

/* instagram__heading
---------------------------------------------------- */
.instagram__heading{
    display: inline-flex;
    align-items: center;
    gap: 0.625em;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 2.8rem;
    letter-spacing: 0.04em;
    color: var(--color-text);
}
.instagram__heading img{ width: 22px; height: 22px; }
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（24px文字に対し
       高さ29px＝比率約1.21）より高くなっていた */
    .instagram__heading{ font-size: 6.1538vw; line-height: 1.21; } /* Figma実測24px */
    /* FigmaのSPデザインはこのアイコンを表示しない */
    .instagram__heading img{ display: none; }
}

/* instagram__lead
---------------------------------------------------- */
.instagram__lead{
    margin-top: 1.0625em; /* Figma実測17px */
    line-height: 1.8667;
    letter-spacing: 0.05em;
    font-size: 1.5rem;
    color: var(--color-text);
}
@media screen and (max-width: 767px){
    /* letter-spacingはFigma実測で無指定（0）。PC用の0.05emを引き継ぐと
       「Instagram/ facebookで」の「で」だけ3行目に送られ、Figmaの改行
       位置（…facebookで／発信しています。）とずれるため、SPのみ0に戻す */
    .instagram__lead{ margin-top: 3.5897vw; font-size: 3.5897vw; line-height: 1.857; letter-spacing: normal; } /* Figma実測14px */
}

/* instagram__list
---------------------------------------------------- */
.instagram__list{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5em;
    margin-top: 2.875em; /* Figma実測46px */
}
@media screen and (max-width: 991px){
    .instagram__list{ grid-template-columns: repeat(4, 1fr); }
}
@media screen and (max-width: 767px){
    /* Figma SPはコンテナ余白を無視して画面幅いっぱいに並ぶ。
       説明文からのアキもFigma実測（58px）に合わせる */
    .instagram__list{
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5128vw;
        margin-top: 14.8718vw;
        margin-right: -6.1538vw;
        margin-left: -6.1538vw;
    }
}

.instagram__item{
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}
.instagram__item::before{
    content: "";
    display: block;
    padding-top: 100%;
}
.instagram__item a{
    display: block;
    position: absolute;
    inset: 0;
}
.instagram__item img{
    /* template-parts/footer/instagram.php がInstagram Graph APIから
       取得する実写真・動画サムネイルは元の縦横比のまま返るため
       （258×258に書き出し済みの静的プレースホルダー画像ではない）、
       正方形の.instagram__item内でobject-fit:coverにより
       中央基準・縦横比維持でトリミングする */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition);
}
.instagram__item a:hover img{ transform: scale(1.05); }

/* instagram__btn
---------------------------------------------------- */
/* ボタン自体はテキストを天地中央に配置する（align-items:center）。
   アイコンをこの中央揃えに直接混ぜるとアイコンだけボタン中央に来て
   Figmaより下がって見えるため、アイコン+テキストを
   .instagram__btnLabel でひとまとめにし、その内部だけ
   align-items:baselineでアイコンをテキストのベースラインに揃える。
   こうするとテキストはボタン中央、アイコンはテキスト基準の位置、
   という2つの要求を1つのFlex構造（ネスト）で両立できる */
.instagram__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 3.1875em; /* Figma実測51px */
    width: 280px;
    height: 56px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: background var(--transition), color var(--transition);
}
.instagram__btn:hover{ background: var(--color-primary); color: var(--color-white); }
/* icon-instagram-small.svgはfill="#385599"（var(--color-primary)）で
   書き出し済みのimg読み込みのため、CSSのcolorを継承しない。
   hover背景が同じprimary色になるとアイコンが同化して見えなくなるため、
   filterで白へ反転させる */
.instagram__btn:hover img{ filter: brightness(0) invert(1); }
.instagram__btnLabel{
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
}
.instagram__btn img{
    width: 14px;
    height: 14px;
    /* align-items:baselineだけだとFigma実測よりわずかに上に浮いて見えるため、
       アイコン自身の高さ比率で微調整する（目視確認済みの値） */
    transform: translateY(16%);
}
@media screen and (max-width: 767px){
    .instagram__btn{ width: 100%; max-width: none; height: max(44.31px, 13.8462vw); font-size: 3.8462vw; margin-top: 8.2051vw; } /* Figma実測15px */
    /* ロゴアイコンがFigma実測（14px）より小さく表示されていたため、
       SPだけvwで上書きする（寸法系のためpx/vwどちらでも可） */
    .instagram__btn img{ width: max(11.49px, 3.5897vw); height: max(11.49px, 3.5897vw); }
}