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


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

　CONCEPT FEATURE（リード文＋4つの特徴カード）

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

/* ----- conceptFeature ----- */
.conceptFeature{ background: var(--color-white); }

@media print, screen and (min-width: 768px){
    /* Figma実測：帯上端からリード見出しまで95px、最終カード下端から帯下端まで124px（自身のfont-size16px基準） */
    .conceptFeature{ padding-top: 5.9375em; padding-bottom: 7.75em; }
}
@media screen and (max-width: 767px){
    .conceptFeature{ padding-top: 12.3077vw; padding-bottom: 14.359vw; }
}

/* conceptFeature__intro
---------------------------------------------------- */
.conceptFeature__intro{ text-align: center; }
@media screen and (max-width: 767px){
    /* Figma実測：SPは見出し・リード文とも左寄せ（PCの中央揃えを上書き） */
    .conceptFeature__intro{ text-align: left; }
}

/* conceptFeature__heading（共通部分は widget/sectionHeading.css の .sectionHeading）
---------------------------------------------------- */
.conceptFeature__heading{
    --sectionHeading-letterSpacing: 0.03em;
    --sectionHeading-color: #242424;
    --sectionHeading-lineHeight-pc: 1.867;
    --sectionHeading-fontSize-sp: 6.6667vw; /* Figma実測26px */
    --sectionHeading-lineHeight-sp: 1.538;
}

/* conceptFeature__lead（共通部分は widget/sectionHeading.css の .sectionLead）
---------------------------------------------------- */
.conceptFeature__lead{
    --sectionLead-letterSpacing: 0.05em;
    --sectionLead-color: #242424;
    /* margin-topは自身のfont-size基準（Figma実測18px÷15px＝1.2em）。font-sizeが
       vwで縮小してもmargin-topは同じ比率で追従するため、別途clampは不要 */
    --sectionLead-marginTop-pc: 1.2em;
    --sectionLead-marginTop-sp: 6.1538vw;
    --sectionLead-lineHeight-sp: 2;
}

/* conceptFeature__grid
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .conceptFeature__grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 5em;
        row-gap: 6.875em;
        margin-top: 5em;
    }
}
@media screen and (max-width: 767px){
    .conceptFeature__grid{
        display: flex;
        flex-direction: column;
        gap: 8.2051vw;
        margin-top: 12.3077vw; /* IntroのFigma実測下パディング48px（390px基準） */
    }
}

/* conceptFeatureCard
---------------------------------------------------- */
@media screen and (max-width: 767px){
    .conceptFeatureCard{ display: flex; flex-direction: column; gap: 4.1026vw; }
}

/* conceptFeatureCard__photoWrap
---------------------------------------------------- */
.conceptFeatureCard__photoWrap{ position: relative; }

/* conceptFeatureCard__photo
---------------------------------------------------- */
.conceptFeatureCard__photo{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
@media print, screen and (min-width: 768px){
    .conceptFeatureCard__photo{ aspect-ratio: 560 / 350; }
}
@media screen and (max-width: 767px){
    .conceptFeatureCard__photo{ aspect-ratio: 342 / 220; border-radius: 4px; }
}

/* conceptFeatureCard__badge（円形バッジ。%指定でphotoWrapとの相対比率を常に維持する）
---------------------------------------------------- */
.conceptFeatureCard__badge{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -5.714%;
    left: 3.571%;
    width: 19.643%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255,255,255,0.6);
    background: var(--color-primary);
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.15em;
    color: var(--color-white);
}
@media print, screen and (min-width: 768px){
    /* Figma実測26px（メンテナンスのみ2行のため実測22px、差は許容範囲として統一） */
    .conceptFeatureCard__badge{ font-size: 2.6rem; }
}
@media screen and (max-width: 767px){
    /* Figma実測はカードごとにバッジ位置・サイズが微妙に異なる(top0.9〜3.6%/left3.5〜5%/
       width22.2〜24%)が、差が数px程度のため4カード共通の中間値に統一する */
    .conceptFeatureCard__badge{ top: 2%; left: 4%; width: 23%; border: none; box-shadow: none; font-size: 4.6154vw; letter-spacing: 0.05em; } /* Figma実測18px（390px基準） */
}

/* conceptFeatureCard__head（タイトル＋ボタン）
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .conceptFeatureCard__head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        margin-top: 1.8125em; /* Figma実測29px（自身font-size16px基準） */
    }
}
@media screen and (max-width: 767px){
    .conceptFeatureCard__head{ display: contents; }
}

/* conceptFeatureCard__title
---------------------------------------------------- */
.conceptFeatureCard__title{
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    .conceptFeatureCard__title{ font-size: 2.8rem; line-height: 1.571; }
}
@media screen and (max-width: 767px){
    .conceptFeatureCard__title{ font-size: 5.8974vw; line-height: 1.652; color: #222; } /* Figma実測23px */
}

/* conceptFeatureCard__btn
---------------------------------------------------- */
.conceptFeatureCard__btn{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    transition: opacity var(--transition);
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    font-weight: 700;
    color: #2a4178;
}
.conceptFeatureCard__btn:hover{ opacity: 0.7; }
@media print, screen and (min-width: 768px){
    .conceptFeatureCard__btn{
        width: 240px;
        height: 56px;
        letter-spacing: 0.03em;
        font-size: 1.5rem;
    }
    .conceptFeatureCard__btn img{ flex-shrink: 0; width: 15px; height: 15px; }
}
@media screen and (max-width: 767px){
    .conceptFeatureCard__btn{
        order: 1;
        width: 100%;
        height: 14.1026vw; /* Figma実測55px（390px基準） */
        font-size: 4.1026vw; /* Figma実測16px */
    }
    .conceptFeatureCard__btn img{ display: none; }
    .conceptFeatureCard__btn::after{ content: "→"; }
}

/* conceptFeatureCard__text
---------------------------------------------------- */
.conceptFeatureCard__text{
    color: #242424;
}
@media print, screen and (min-width: 768px){
    /* margin-topは自身のfont-size基準（Figma実測22px÷15px） */
    .conceptFeatureCard__text{ margin-top: 1.4667em; font-size: 1.5rem; line-height: 1.733; }
}
@media screen and (max-width: 767px){
    .conceptFeatureCard__text{ font-size: 3.8462vw; line-height: 1.867; color: #222; }
}


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

　CONCEPT LIFESTYLE（暮らしに寄り添う住まいづくり）

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

/* ----- conceptLifestyle ----- */
.conceptLifestyle{ background: #eff1f4; }

@media print, screen and (min-width: 768px){
    /* Figma実測：帯上端から見出しまで87px、最終行下端から帯下端まで211px（自身font-size16px基準） */
    .conceptLifestyle{ padding-top: 5.4375em; padding-bottom: 13.1875em; }
}
@media screen and (max-width: 767px){
    .conceptLifestyle{ padding-top: 6.1538vw; padding-bottom: 14.359vw; }
}

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

/* conceptLifestyle__heading
---------------------------------------------------- */
.conceptLifestyle__heading{
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    .conceptLifestyle__heading{ font-size: 3.4rem; line-height: 1.647; }
}
@media screen and (max-width: 767px){
    .conceptLifestyle__heading{ font-size: 6.9231vw; line-height: 1.556; color: #222; text-align: left; } /* Figma実測27px */
}

/* conceptLifestyle__lead
---------------------------------------------------- */
.conceptLifestyle__lead{
    letter-spacing: 0.05em;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    /* margin-topは自身のfont-size基準（Figma実測31px÷15px） */
    .conceptLifestyle__lead{ margin-top: 2.0667em; font-size: 1.5rem; line-height: 1.867; text-align: center; }
}
@media screen and (max-width: 767px){
    .conceptLifestyle__lead{ margin-top: 5.1282vw; font-size: 3.8462vw; line-height: 1.867; text-align: left; color: #242424; }
}

/* conceptLifestyle__list
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .conceptLifestyle__list{ margin-top: 3.75em; }
}
@media screen and (max-width: 767px){
    .conceptLifestyle__list{ margin-top: 9.7436vw; display: flex; flex-direction: column; gap: 8.2051vw; } /* margin-top:IntroのFigma実測下パディング38px（390px基準） */
}

/* conceptLifestyleItem
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .conceptLifestyleItem{ display: flex; align-items: center; gap: 5em; }
    .conceptLifestyleItem + .conceptLifestyleItem{ margin-top: 5.625em; }
    .conceptLifestyleItem--reverse{ flex-direction: row-reverse; }
}
@media screen and (max-width: 767px){
    .conceptLifestyleItem{ display: flex; flex-direction: column; }
}

/* conceptLifestyleItem__body
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .conceptLifestyleItem__body{ flex: 1; min-width: 0; }
}
@media screen and (max-width: 767px){
    /* Figma実測：SPの表示順は label→heading→photo→text（PCのDOM順とは異なる）。
       __bodyをdisplay:contentsで消し、中の子要素を.conceptLifestyleItemの
       flexアイテムとして直接並べ替える（HTML自体の変更・orderの単純付け替えではなく、
       PC/SPで見た目上必要な順序が異なる構造差をCSS側で吸収する） */
    .conceptLifestyleItem__body{ display: contents; }
    .conceptLifestyleItem__label{ order: 1; }
    .conceptLifestyleItem__heading{ order: 2; }
    .conceptLifestyleItem__photoWrap{ order: 3; }
    .conceptLifestyleItem__text{ order: 4; }
}

/* conceptLifestyleItem__label（works-label-lineと同じ2色バー装飾）
---------------------------------------------------- */
.conceptLifestyleItem__label{
    display: block;
    position: relative;
}
.conceptLifestyleItem__label::before,
.conceptLifestyleItem__label::after{
    content: "";
    display: inline-block;
    height: 4px;
    width: 30px;
}
.conceptLifestyleItem__label::before{ background: var(--color-primary); }
.conceptLifestyleItem__label::after{ background: #dedede; }
@media screen and (max-width: 767px){
    .conceptLifestyleItem__label::before,
    .conceptLifestyleItem__label::after{ height: 1.0256vw; width: 7.6923vw; }
}

/* conceptLifestyleItem__heading
---------------------------------------------------- */
.conceptLifestyleItem__heading{
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    /* margin-topは自身のfont-size基準（Figma実測20px÷30px） */
    .conceptLifestyleItem__heading{ margin-top: 0.6667em; font-size: 3rem; line-height: 1.667; }
}
@media screen and (max-width: 767px){
    .conceptLifestyleItem__heading{ margin-top: 5.1282vw; font-size: 5.8974vw; line-height: 1.652; color: #222; } /* Figma実測23px */
}

/* conceptLifestyleItem__photoWrap
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .conceptLifestyleItem__photoWrap{ flex-shrink: 0; width: 560px; }
}
@media screen and (max-width: 767px){
    /* Figma実測：見出し下端〜写真まで16px（写真の順序は上の.conceptLifestyleItem__body参照） */
    .conceptLifestyleItem__photoWrap{ margin-top: 4.1026vw; }
}

/* conceptLifestyleItem__photo
---------------------------------------------------- */
.conceptLifestyleItem__photo{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
@media print, screen and (min-width: 768px){
    .conceptLifestyleItem__photo{ aspect-ratio: 560 / 340; }
}
@media screen and (max-width: 767px){
    .conceptLifestyleItem__photo{ aspect-ratio: 342 / 200; border-radius: 4px; }
}

/* conceptLifestyleItem__text
---------------------------------------------------- */
.conceptLifestyleItem__text{
    color: #242424;
}
@media print, screen and (min-width: 768px){
    /* margin-topは自身のfont-size基準（Figma実測29px÷15px） */
    .conceptLifestyleItem__text{ margin-top: 1.9333em; font-size: 1.5rem; line-height: 1.867; }
}
@media screen and (max-width: 767px){
    .conceptLifestyleItem__text{ margin-top: 4.1026vw; font-size: 3.8462vw; line-height: 1.867; color: #222; }
}