@charset "UTF-8";
/* ====================================================
　共通CSS（ファーストビュー以降：フッター・ページトップ）
　common_body.css
==================================================== */


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

　フッター

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

/* ----- footer ----- */
.footer{ background: #202020; }

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

　footer__cta（お問い合わせCTA帯）

###################################################################################### */
.footer__cta{
    background: var(--color-primary);
    text-align: center;
}
@media print, screen and (min-width: 768px){
    /* Figma実測は帯上端から見出しまで90px、ボタン列下端から帯下端まで77px
       （旧値64px/64pxはFigma実測ではなく仮の均等値だった） */
    .footer__cta{ padding-top: 5.625em; padding-bottom: 4.8125em; } /* 90px／77px相当（bodyの1.6rem=16px基準） */
}
@media screen and (max-width: 767px){
    .footer__cta{ padding-top: 14.359vw; padding-bottom: 14.359vw; } /* Figma実測56px（390px基準） */
}

.footer__ctaHeading{
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.15;
    letter-spacing: 0.05em;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    .footer__ctaHeading{ font-size: 5.1282vw; } /* Figma実測20px（390px基準） */
}

.footer__ctaLead{
    margin-top: 0.75em; /* 12px相当（bodyの1.6rem=16px基準） */
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    .footer__ctaLead{ margin-top: 5.1282vw; font-size: 3.8462vw; } /* Figma実測15px（390px基準） */
}

.footer__ctaRow{
    display: flex;
    align-items: center;
    justify-content: center;
    /* Figma実測（フォームボタン右端から仕切り線まで約30.5px）に
       footer__ctaTel側のgap(12px)＋仕切り線幅を足した合計値。
       以前は32px相当でFigmaより狭かった */
    gap: 4.35em; /* 69.6px相当（bodyの1.6rem=16px基準） */
    margin-top: 2em; /* 同上 */
}
@media screen and (max-width: 767px){
    .footer__ctaRow{
        flex-direction: column;
        gap: 5.1282vw;
        margin-top: 5.1282vw;
    }
    /* Figma SPは電話番号ブロック→フォームボタンの順（PCと逆） */
    .footer__ctaTel{ order: 1; }
    .footer__ctaFormBtn{ order: 2; }
}

.footer__ctaFormBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 56px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-white);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: opacity var(--transition);
}
.footer__ctaFormBtn:hover{ opacity: 0.85; }
@media screen and (max-width: 767px){
    /* Figma SPはコンテナ幅いっぱい（max-width指定なし）、高さ50px基準、
       枠線なしのボタン */
    .footer__ctaFormBtn{ width: 100%; max-width: none; height: 12.8205vw; border: none; font-size: 3.8462vw; } /* Figma実測15px */
}

.footer__ctaTel{
    display: flex;
    align-items: center;
    height: 56px;
    gap: 0.75em; /* 12px相当（bodyの1.6rem=16px基準） */
    text-align: left;
}
@media screen and (max-width: 767px){
    .footer__ctaTel{ flex-direction: column; text-align: center; }
}

.footer__ctaTelDivider{
    flex-shrink: 0;
    width: 1px;
    height: 56px;
    background: rgba(255,255,255,0.4);
}
@media screen and (max-width: 767px){
    .footer__ctaTelDivider{ display: none; }
}

.footer__ctaTelGroup{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    align-self: center;
    column-gap: 0.75em; /* 12px相当（bodyの1.6rem=16px基準） */
    row-gap: 0;
}
@media screen and (max-width: 767px){
    /* FigmaのSPは「tel. + 電話番号」を1行にセンター配置し、その下に
       受付時間の注記を単独でセンター配置する（PCのbaseline/左揃えグリッドとは
       構造が異なるため、SPだけ専用のgrid-template-areasで組み直す） */
    .footer__ctaTelGroup{
        grid-template-columns: auto auto;
        grid-template-areas:
            "label number"
            "note  note";
        align-items: center;
        justify-content: center;
        column-gap: 2.5641vw;
        row-gap: 1.0256vw;
    }
}

.footer__ctaTelLabel{
    grid-column: 1;
    grid-row: 1;
    line-height: 1;
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: clamp(1.126rem, 1.4667vw, 2.2rem);
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    /* line-height:1のままだとtel.の実高さがFigma実測(26px)より低くなり、
       電話番号（36px）とのグリッド中央揃えで上に寄って見える。
       Figma実測比率（26÷18）に合わせて上下位置を合わせる */
    .footer__ctaTelLabel{ grid-area: label; font-size: 4.6154vw; line-height: 1.4444; } /* Figma実測18px（390px基準） */
}

.footer__ctaTelNumber{
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    line-height: 1;
    /* Figma指定はInter Bold（din-condensedではない）。
       din-condensedは字幅が狭く、電話番号の実幅がFigmaより短くなり、
       受付時間の注記（グリッド2列にまたがる）の幅を確保するために
       grid-template-columns:autoの1列目（tel.側）が余分に広がって
       「tel.」と電話番号の間が離れて見える原因にもなっていた */
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.253rem, 2.9333vw, 4.4rem);
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    /* Figma実測比率（36÷30）。tel.側のline-height調整とセットで
       グリッド行の基準高さ（36px相当）を正しく再現するために必要 */
    .footer__ctaTelNumber{ grid-area: number; font-size: 7.6923vw; justify-self: start; line-height: 1.2; } /* Figma実測30px（390px基準） */
}

.footer__ctaTelNote{
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 0;
    line-height: 1;
    font-family: var(--font-accent);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    .footer__ctaTelNote{ grid-area: note; justify-self: center; font-size: 3.3333vw; line-height: 1.4615; } /* Figma実測13px（390px基準） */
}


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

　footer__main（会社情報・サイトマップ）

###################################################################################### */
.footer__main{ background: #202020; }
@media print, screen and (min-width: 768px){
    /* Figma実測は上60px・下119px相当で非対称（下の方が広い）。
       一律3.75em（60px）だと下余白が不足していた */
    .footer__main{ padding-top: 3.75em; padding-bottom: 7.45em; } /* 60px／119px相当（bodyの1.6rem=16px基準） */
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端から会社名まで32px。下端側はfooter__bottomの
       padding-top（28px、既にFigma実測どおり）が同じ余白を担っているため
       footer__mainにpadding-bottomは持たせない（旧40px/40pxは未検証の
       概算値で、下側が二重に加算されていた） */
    .footer__main{ padding-top: 8.2051vw; padding-bottom: 0; background: #191f2e; }
}

.footer__mainInner{
    display: flex;
    justify-content: space-between;
    gap: 2.5em; /* 40px相当（bodyの1.6rem=16px基準） */
}
@media screen and (max-width: 767px){
    .footer__mainInner{ flex-direction: column; gap: 8.2051vw; text-align: center; }
}

.footer__companyName{
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: clamp(1.229rem, 1.6vw, 2.4rem);
    letter-spacing: 0.05em;
    color: var(--color-white);
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（22px文字に対し
       高さ26px＝比率約1.18）より高くなっていた */
    .footer__companyName{ font-size: 5.641vw; line-height: 1.18; } /* Figma実測22px（390px基準） */
}

.footer__companyAddress{
    margin-top: 1.25em; /* 20px相当（bodyの1.6rem=16px基準） */
    font-style: normal;
    line-height: 1.8667;
    font-size: clamp(0.768rem, 1vw, 1.5rem);
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.8);
}
@media screen and (max-width: 767px){
    .footer__companyAddress{ font-size: 3.5897vw; line-height: 1.857; } /* Figma実測14px（390px基準） */
}

.footer__navWrap{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Figma実測はサイトマップ下端からSNSアイコンまで約53px。以前は
       gap70px相当を置いたうえでfooter__sns側にmargin-top:-16.5pxの
       負のマージンを重ねて帳尻を合わせていたが、gapがvw基準・
       marginが固定em基準で別々に伸縮するため画面幅によってズレていた。
       gap側の数値をFigma実測に合わせ、負マージンを廃止する */
    gap: clamp(1.706em, 3.5533vw, 3.331em); /* 27.29px〜53.3px相当 */
}
@media screen and (max-width: 767px){
    .footer__navWrap{ align-items: stretch; gap: 6.1538vw; }
}

.footer__sns{
    display: flex;
    justify-content: flex-end;
    gap: 0.75em;          /* 12px相当（bodyの1.6rem=16px基準） */
}
.footer__sns img{ transition: opacity var(--transition); }
.footer__sns a:hover img{ opacity: 0.7; }
@media screen and (max-width: 767px){
    /* FigmaはSNSアイコンが会社情報とリンク一覧の間、中央揃えで配置 */
    .footer__sns{ order: -1; justify-content: center; margin-top: 0; }
}

.footer__sitemap{
    display: flex;
    gap: 5.4375em; /* Figma実測87px相当（bodyの1.6rem=16px基準） */
}
@media screen and (max-width: 767px){
    /* Figma SPは3列に分かれず、区切り線付きの1本のリストになる。
       並び順もPCの列ごと（縦積み）ではなく行方向に読んだ順
       （ホーム→会社案内→採用情報→施工事例→事業案内→協力業者の皆様へ→
       不動産情報→コンセプト→お問い合わせ）になるため、各列のulを
       display:contentsで解除してliをフラットに並べ替える
       （PC側のHTML構造・見た目は変更しない） */
    .footer__sitemap{ flex-direction: column; gap: 0; }
    .footer__sitemapList{ display: contents; }
    .footer__sitemapList:nth-child(1) li:nth-child(1){ order: 1; } /* ホーム */
    .footer__sitemapList:nth-child(1) li:nth-child(2){ order: 4; } /* 施工事例 */
    .footer__sitemapList:nth-child(1) li:nth-child(3){ order: 7; } /* 不動産情報 */
    .footer__sitemapList:nth-child(2) li:nth-child(1){ order: 2; } /* 会社案内 */
    .footer__sitemapList:nth-child(2) li:nth-child(2){ order: 5; } /* 事業案内 */
    .footer__sitemapList:nth-child(2) li:nth-child(3){ order: 8; } /* コンセプト */
    .footer__sitemapList:nth-child(3) li:nth-child(1){ order: 3; } /* 採用情報 */
    .footer__sitemapList:nth-child(3) li:nth-child(2){ order: 6; } /* 協力業者の皆様へ */
    .footer__sitemapList:nth-child(3) li:nth-child(3){ order: 9; } /* お問い合わせ */
}

.footer__sitemapList{
    display: flex;
    flex-direction: column;
}

.footer__sitemapList a{
    display: block;
    line-height: clamp(1.316em, 2.4vw, 2.571em); /* 18.43px〜36px相当（自身のfont-size 1.4rem=14px基準） */
    font-weight: 700;
    font-size: clamp(0.717rem, 0.9333vw, 1.4rem);
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.8);
    transition: color var(--transition);
}
.footer__sitemapList a:hover{ color: var(--color-white); }
@media screen and (max-width: 767px){
    /* line-height:normalだと実測でFigma（15px文字に対し高さ18px＝比率1.2）
       より高くなり、行の高さ（46px＝padding14px×2＋文字18px）が
       膨らんでいた */
    .footer__sitemapList a{
        line-height: 1.2;
        font-size: 3.8462vw; /* Figma実測15px（390px基準） */
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.12);
        padding-top: 3.5897vw;
        padding-bottom: 3.5897vw;
    }
    .footer__sitemapList:last-child li:last-child a{ border-bottom: none; }
}


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

　footer__bottom（コピーライト帯）

###################################################################################### */
.footer__bottom{
    padding-top: 1em;    /* 16px相当（bodyの1.6rem=16px基準） */
    padding-bottom: 1em; /* 同上 */
    background: #4c4b4b;
}
@media screen and (max-width: 767px){
    /* Figma SPはfooter__mainと同じ地の色でシームレスに繋がる。
       コピーライト下（画面最下部まで）の余白はFigma実測で44px */
    .footer__bottom{ padding-top: 7.1795vw; padding-bottom: 11.2821vw; background: #191f2e; }
}

.footer__bottomInner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em; /* 16px相当（bodyの1.6rem=16px基準） */
}
@media screen and (max-width: 767px){
    .footer__bottomInner{ flex-direction: column; align-items: center; gap: 2.5641vw; }
}

.footer__legalList{
    display: flex;
    gap: 1.5em; /* 24px相当（bodyの1.6rem=16px基準） */
}
.footer__legalList a{
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.7);
}
.footer__legalList a:hover{ color: var(--color-white); }
@media screen and (max-width: 767px){
    .footer__legalList{ gap: 5.1282vw; }
    /* line-height未指定だとbody継承の1.8になり、Figma実測（13px文字に対し
       高さ19px＝比率約1.46）より高くなっていた */
    .footer__legalList a{ font-size: 3.3333vw; line-height: 1.46; } /* Figma実測13px（390px基準） */
}

.footer__copyright{
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
@media screen and (max-width: 767px){
    /* line-height未指定だとbody継承の1.8になり、Figma実測（12px文字に対し
       高さ17px＝比率約1.42）より高くなっていた */
    .footer__copyright{ font-size: 3.0769vw; line-height: 1.42; } /* Figma実測12px（390px基準） */
}


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

　ページトップ

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

.pageTopFix{
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
}
.pageTopFix a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--color-white);
    text-align: center;
}