@charset "UTF-8";

:root {
    --main-color:#006E42;
    --white-color:#FFFFFF;

    /* テキストフォント */
    /* 日本語ベース */
    --font-base-family:'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    /* 英語見出し */
    --font-base-family-en:'Josefin Sans', 'Noto Sans JP', sans-serif;
    --font-base-size:1rem; /* 16px */
    --font-base-weight-medium:500;
    --font-base-weight-regular:400;
    --font-base-weight-semibold:600;
    --font-base-weight-bold:700;
    --font-base-weight-black:900;
    --font-base-line-height:1.8;

    /* テキストカラー */
    --base-text-color:#000000;
    --white-text:#FFFFFF;
}

/* 背景色 */
.bg-gray {
    background:#F5F5F5;
}


/* ===========================================================================
*   改行（パーツ）
=========================================================================== */
.br-pc { display:block;}
.br-sp { display:none;}

/* ~ 768px */
@media screen and (max-width:768px){
    .br-pc { display:none;}
    .br-sp { display:block;}
}


/* ===========================================================================
*   見出し（パーツ）
=========================================================================== */
.strength-title {
    margin-top:10px;
    color:var(--main-color);
    font-size:2.8125rem;
    font-weight:700;
    text-align:center;
    line-height:1.68;
}


/*===========================================================================
*   リンク（パーツ）
===========================================================================*/
.link {
    font-size:13px;
    color:#fff;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    width:fit-content;
    padding:1.25em 1em;
    border:solid 1px var(--main-color);
    border-radius:10px;
    background-color:var(--main-color);
    transition:.3s;

    &::after {
        content:"";
        display:block;
        width:2em;
        height:0.9lh;
        background:url(../../image/strength/icon_arrow.svg) no-repeat center right / 1.15em auto;
        border-left:solid 1px currentColor;
        transition:.3s;
    }
    & span { justify-self:center;}
}
/* 反転 */
.link.reverse { 
    color:var(--main-color);
    background-color:#fff;

    &::after { background-image:url(../../image/strength//icon_arrow_hover.svg);}
}

/* hover */
a.link:is(:focus-visible, :active),
a:is(:focus-visible, :active) .link {
    color:var(--main-color);
    background-color:#fff;

    &::after { background-image:url(../../image/strength//icon_arrow_hover.svg);}
}
a.link.reverse:is(:focus-visible, :active),
a:is(:focus-visible, :active) .link.reverse {
    color:#fff;
    background-color:var(--main-color);

    &::after { background-image:url(../../image/strength//icon_arrow.svg);}
}
@media (hover:hover){
    a.link:hover,
    a:hover .link {
        color:var(--main-color);
        background-color:#fff;
        
        &::after { background-image:url(../../image/strength/icon_arrow_hover.svg);}
    }
    a.link.reverse:hover,
    a:hover .link.reverse {
        color:#fff;
        background-color:var(--main-color);

        &::after { background-image:url(../../image/strength//icon_arrow.svg);}
    }
}

/* ~ 768px */
@media screen and (max-width:768px){
    .link {
        font-size:12px;
        gap:1em;
        margin-inline:auto;
        padding-block:0.7em;
        width:fit-content;
    }
}

/* ===========================================================================
*   バナーリンク（パーツ）
=========================================================================== */
a.banner {
    --r:20px;   /* 角丸の距離 */
    --g-start-pos:0px;  /* グラデーション開始位置 */
    --g-range:0px;      /* グラデーション処理の距離 */

    container-type:inline-size;
    position:relative;
    display:flex;
    align-items:center;
    padding:1em 55px;
    min-height:210px;
    color:#fff;
    border-radius:var(--r) var(--r) 0 var(--r);
    overflow:hidden;
    z-index:1;

    &::before,
    &::after {
        content:"";
        position:absolute;
        inset-block:0 auto;
        height:100%;
        pointer-events:none;
    }

    /* 背景画像 */
    &::before {
        /* background-positionの遷移を実現するための変数 */
        --bg-pos:0px;

        inset-inline:auto 0;
        background:url() no-repeat center right var(--bg-pos) / cover;
        z-index:-2;
    }
    /* 背景のグラデーション */
    &::after {
        inset-inline:0 auto;
        width:100%;
        background:linear-gradient(
            to right,
            var(--main-color),
            var(--main-color) var(--g-start-pos),
            transparent calc(var(--g-start-pos) + var(--g-range)),
            transparent 100%
        );
        z-index:-1;
    }

    /* 見出し */
    & hgroup {
        letter-spacing:0.1em;
    }
    & hgroup h3 {
        font-size:clamp(2.25rem, calc(1.994rem + 1.091vw), 2.813rem);/* vp:375-1200px 36-45px */
        font-weight:var(--font-base-weight-bold);
    }
    & hgroup p {
        font-size:clamp(0.938rem, calc(0.653rem + 1.212vw), 1.563rem);/* vp:375-1200px 15-25px */
        font-weight:var(--font-base-weight-bold);
        line-height:1.5;
        margin-top:1em;
        width:60cqw;
    }

    /* 右下のリンク風装飾 */
    & .banner-flowText {
        font-size:clamp(12px, calc(0.58rem + 0.727vw), 1.125rem);/* vp:375-1200px 12-18px */
        line-height:1.8;
        position:absolute;
        inset:auto 0 0 auto;
        display:flex;
        align-items:center;
        padding:0.75em 1lh;
        border-radius:10px 0 0 0;
        background-color:color-mix(in sRGB, var(--main-color) 90%, transparent 10%);
    }
    & .banner-flowText::after {
        content:"";
        display:block;
        margin-left:0.65em;
        width:1lh;
        height:1.5em;
        border-left:solid 1px;
        background:url(../../image/strength/icon_arrow.svg) no-repeat center right / 1em auto;
    }

    &:is(:focus-visible, :active) { opacity:0.75;}
    @media (hover:hover){ &:hover { opacity:0.75;}}
}
/* 買取査定 */
a.banner-purchase {
    margin-top:80px;

    &::before {
        --bg-pos:clamp(-8rem, calc(-20rem + 25vw), 0rem); /* vp:768-1280px -128px ~ 0px */

        width:min(980px, 100%);
        background-image:url(../../image/strength/bg_purchase_pc.webp);
        mask-image:linear-gradient(to right, transparent, transparent 1em, #fff 5em, #fff);
    }
    &::after{
        --g-start-pos:300px;
        --g-range:300px;
    }
    /* & .banner-flowText::before {
        content:"";
        display:block;
        margin-right:0.5em;
        width:1.33em;
        aspect-ratio:1;
        background-color:currentColor;
        mask:url(../../image/strength/icon_purchase.svg) no-repeat center / contain;
    } */
}
/* リナイスの住まいに対する思い */
a.banner-thoughts {
    margin-top:2rem;

    &::before {
        width:100%;
        background-image:url(../../image/strength/bg_sale_pc.webp);
    }
    & .banner-img {
        position:absolute;
        inset:0 auto auto 0;
        display:flex;
        align-items:center;
        padding-block:1rem;
        padding-inline:6% 8.5%;
        width:min(750px, 55%);
        height:100%;
        background-image:linear-gradient(
            to right,
            rgb(255 255 255 / 0.92),
            rgb(255 255 255 / 0.92) calc(100% - 4rem),
            transparent
        );
    }
}

/* 施工実績 */
a.banner-example {
    
    &::before {
        width:min(980px, 100%);
        background-image:url(../../image/strength/bg_construction_pc.webp);
        mask-image:linear-gradient(to right, transparent, transparent 1em, #fff 5em, #fff);
    }
    &::after {
        --g-start-pos:345px;
        --g-range:415px;
    }
}

/* ~ 1000px */
@media screen and (max-width:1000px){
    /* .banner-thoughts */
    a.banner-thoughts {
        display:grid;
        justify-items:center;
        gap:35px;
        border-radius:var(--r);
        
        &::before {
            background-image:url(../../image/strength//bg_sale_sp.webp);
        }
        & .banner-img {
            position:static;
            padding:0px;
            width:245px;
            background-image:none;
        }
        & .banner-flowText {
            position:static;
            padding:0.5em 1em;
            color:var(--main-color);
            background-color:#fff;
            border-radius:calc(var(--r) / 2);
        }
        & .banner-flowText::after {
            background-image:url(../../image/strength/icon_arrow_hover.svg);
        }
    }
}
/* ~ 768px */
@media screen and (max-width:768px){
    a.banner {
        display:grid;
        grid-template-rows:1fr auto;
        padding:1.64em 1.2em;
        min-height:270px;
        border-radius:var(--r);

        &:is(.banner-purchase, .banner-solution, .banner-reason)::before {
            --bg-pos:0;
        }
        & hgroup { align-self:center;}
        & hgroup p { margin-top:2em; width:100%;}
        & .banner-flowText {
            position:static;
            color:var(--main-color);
            padding-inline:1em;
            width:fit-content;
            border-radius:10px;
            background-color:#fff;

            &::after { background-image:url(../../image/strength/icon_arrow_hover.svg);}
        }
    }

    /* .banner-purchase */
    a.banner-purchase {
        margin-top:40px;

        &::before { background-image:url(../../image/strength/bg_purchase_sp.webp);}
        &::after { --g-start-pos:140px; --g-range:110px;}
    }
    /* .banner-example */
    a.banner-example {
        &::before { background-image:url(../../image/strength/bg_construction_sp.webp);}
        &::after { --g-start-pos:125px; --g-range:118px;}
        & hgroup { align-self:start;}
        & h3 { font-size:40px;}
    }
}

/* ===========================================================================
*   .strength-kv
=========================================================================== */
/* パンくず */
.breadcrumb.pc {
    left:clamp(1rem, calc(-9.5rem + 16.8vw), 6.25rem);/* vp:1000-1500px 16-100px */
}

.strength-kv {
    position:relative;

    &::before,
    &::after {
        content:"";
        position:absolute;
        display:block;
        background:url() no-repeat center / contain;
    }
    &::before {
        inset:0 auto auto 0;
        width:17.9411vw;
        aspect-ratio:305/450;;
        background-image:url(../../image/strength/icon_kv_before_pc.svg);
    }
    &::after {
        inset:auto 0 0 auto;
        width:58.8235vw;
        aspect-ratio:1000/430;
        background-image:url(../../image/strength/icon_kv_after_pc.svg);
    }
}
.strength-kv-wrap {
    display:flex;
    align-items:center;
}
.strength-kv-summary {
    width:min(450px, 100%);
    margin-inline:auto;
    padding-block:30px;
    text-align:center;
}
.strength-kv-lead {
    /* font-size:2.25rem; */
    font-size:clamp(1.375rem, calc(0.457rem + 1.913vw), 2.25rem);/* vp:768-1500px 22-36px */
    font-weight:700;
    text-align:center;
    line-height:1.6;

    & span {
        display:block;
        color:var(--main-color);
    }
}
.strength-kv-title {
    margin-top:clamp(1.5rem, calc(-0.074rem + 3.279vw), 3rem);/* vp:768-1500px 24-48px */
    margin-inline:auto;
    /* width:min(297px, 100%); */
    width:clamp(12.5rem, calc(5.943rem + 13.661vw), 18.75rem);/* vp:768-1500px 200-300px */

    & p {
        font-size:clamp(1.375rem, calc(0.719rem + 1.366vw), 2rem);/* vp:768-1500px 22-32px */
        /* font-size:2rem; */
        font-weight:700;
        line-height:1.2;
        color:var(--main-color);
        text-align:start;
    }
}
.strength-kv-text {
    /* font-size:1.25rem; */
    font-size:clamp(1rem, calc(0.738rem + 0.546vw), 1.25rem);/* vp:768-1500px 16-20px */
    font-weight:500;
    margin-top:2em;
    line-height:1.7;
}
.strength-kv-img {
    /* max-width:880px; */
    max-width:51.76470588235295vw;
    width:100%;
}
.strength-kv-sp { display:none;}


/* ~ 1000px */
@media screen and (max-width:1000px){
    /* パンくずの表示形式・配置を調整するための処理 */
    .strength-header { display:grid;}
    .strength-kv {
        order:2;

        &::before { width:15vw;}
    }
    .breadcrumb.pc {
        order:1;
        position:static;
        width:fit-content;
        margin-inline:auto;
        padding-block:0.5em;
        color:#000;
    }
}

/* ~ 768px */
@media screen and (max-width:768px){
    .strength-kv::before {
        width:65.1741vw;
        aspect-ratio:262/245;
        background-image:url(../../image/strength/icon_kv_before_sp.svg);
        z-index:-1;
    }
    .strength-kv::after {
        width:100vw;
        aspect-ratio:402/135;
        background-image:url(../../image/strength/icon_kv_after_sp.svg);
    }
    .strength-kv-wrap { flex-direction:column;}
    .strength-kv-summary { padding-bottom:0px;}
    .strength-kv-text { font-weight:bold;}
    .strength-kv-img { max-width:100%; margin-top:30px;}
    .strength-kv-sp { display:block;}
}


/* ===========================================================================
*   コンテンツ
=========================================================================== */
section.strength-section { max-width:100%; padding:0;}
.strength-wrap {
    width:min(1540px, 100%);
    margin-inline:auto;
    padding:140px min(6.25rem, 8.3333vw) 160px;
}
.strength-icon { display:block; margin-inline:auto;}
.strength-content { margin-top:60px;}
.strength-unit {
    display:flex;
    align-items:center;
    /* gap:min(120px, 9%); */
    gap:clamp(1.875rem, calc(-9.375rem + 18vw), 7.5rem);/* vp:1000-1500px 30-120px */
}
.strength-unit:nth-child(2) { margin-top:100px;}
.strength-unit-reverse { flex-direction:row-reverse;}
.strength-img { width:min(620px, 100%);}
.strength-detail { width:min(600px, 100%);}
.strength-number {
    color:var(--main-color);
    font-size:3.125rem;
    font-weight:600;
    font-family:var(--font-base-family-en);
    line-height:1;
}
.strength-lead {
    font-size:1.625rem;
    font-weight:700;
    line-height:calc(38/26);
    margin-top:0.75em;
}
.strength-text {
    font-size:1rem;
    font-weight:400;
    line-height:calc(34/16);
    margin-top:1.6875em;

    & span {
        display:block;
        margin-top:15px;
        font-size:0.875rem;
        line-height:1;
    }
}
.thoughts { margin:100px auto;}
h3.thoughts-title {
    display:block;
    font-size:1.75rem;
    font-weight:700;
    line-height:calc(44/28);
    text-align:center;
}
.thoughts-title span { display:block; color:var(--main-color);}

/* ~ 1000px */
@media screen and (max-width:1000px){
    .strength-wrap {
        padding-block:100px 110px;
    }
}
/* ~ 768px */
@media screen and (max-width:768px){
    .strength-wrap {
        padding:60px 20px;
    }
    .strength-number {
        font-size:2.15em;
    }
    .strength-lead {
        margin-top:10px;
        font-size:1.64em;
        line-height:calc(31/23);
    }
    .strength-text {
        margin-top:10px;
        font-size:1em;
        line-height:calc(27/14);

        & span {
            font-size:0.85rem;
        }
    }
    h3.thoughts-title {
        font-size:1.42em;
    }
    .thoughts-title span {
        line-height:calc(30/20);
    }
}


/* ===========================================================================
*   CTA
=========================================================================== */
section.cta { max-width:100%; padding:0;}
.cta-inner { width:min(1540px, 100%); margin-inline:auto; padding:140px 20px 80px;}
.cta-list {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:45px;
    margin-top:40px;
}
.cta-item {
    position:relative;
    display:grid;
    justify-items:center;
    grid-template:
        "icon" 1fr
        "link" auto / 1fr;
    gap:20px;
    width:min(470px, 100%);
    min-height:220px;
    border-radius:20px;
    padding:20px;
    background:url() no-repeat center / cover;
    z-index:0;

    &.bg-gradient::before {
        content:"";
        position:absolute;
        inset:auto auto 0 0;
        display:block;
        width:100%;
        height:114px;
        background:linear-gradient(0deg, var(--main-color) 30%, transparent);
        border-radius:0 0 20px 20px;
        z-index:-1;
    }
    &.has-icon::after {
        content:"";
        grid-area:icon;
        display:block;
        width:164px;
        aspect-ratio:164/95;
        background:url(../../image/strength/icon_cta.svg) no-repeat center / contain;
    }
    & .link {
        grid-area:link;
        font-size:15px;
        width:min(307px, 100%);
        padding-block:0.8em;
    }

    /* hover */
    &:is(:focus-visible, :active) .link { border-color:#fff;}
    @media (hover:hover){ &:hover .link { border-color:#fff;}}
}
/* :nth-child(1 of .cta-item){ background-image:url(../../image/strength/bg_strength_pc.webp);} */
:nth-child(1 of .cta-item){ background-image:url(../../image/strength/bg_brand_pc.webp);}
:nth-child(2 of .cta-item){ background-image:url(../../image/strength/bg_gyoumu_pc.webp);}

/* ~ 768px */
@media screen and (max-width:768px){
    .cta-inner {
        max-width:1540px;
        width:100%;
        margin:0 auto;
        padding:60px 20px 40px;
    }
    .cta-list {
        align-items:center;
        flex-direction:column;
        gap:30px;
        margin-top:30px;
    }
    .cta-item {
        &.has-icon::after { align-self:center;}
        & .link { font-size:0.85em; width:min(240px, 100%);}
    }
    /* :nth-child(1 of .cta-item) { background-image:url(../../image/strength/bg_strength_sp.webp);} */
    :nth-child(1 of .cta-item) { background-image:url(../../image/strength/bg_brand_sp.webp);}
    :nth-child(2 of .cta-item) { background-image:url(../../image/strength/bg_gyoumu_sp.webp);}
}


/* ===========================================================================
*   Contact
=========================================================================== */
section.contact {
    max-width:100%;
    padding:0;
    border-top:1px solid #CBCBCB;
}
.contact-inner {
    width:100%;
    margin-inline:auto;
    padding:80px 20px 100px;
}
.contact-title {
    color:var(--main-color);
    font-size:3.75rem;
    font-weight:600;
    font-family:var(--font-base-family-en);
    line-height:calc(78/60);
    text-align:center;

    & span {
        display:block;
        margin-top:16px;
        color:#020202;
        font-size:1rem;
        font-weight:500;
        line-height:calc(20/16);
    }
}
.contact-text {
    margin-top:60px;
    font-size:1.75rem;
    font-weight:700;
    line-height:calc(30/28);
    text-align:center;
}
.contact-list {
    display:flex;
    justify-content:center;
    gap:1.25em;
    margin-top:2.8125em;

    & .link {
        /* width:min(200px, 100%); */
        gap:1em;
        padding-block:1.1em;
    }
}

/* = 768px */
@media screen and (max-width:768px){
    .contact-inner {
        padding:40px 21px 90px 20px;
    }
    .contact-title {
        font-size:2.5em;;
        line-height:calc(49/35);

        & span {
            margin-top:5px;
            font-size:0.37em;
            line-height:calc(20/13);
        }
    }
    .contact-text {
        margin-block:1.5em;
        font-size:1.3em;
        line-height:calc(30/19);
    }
    .contact-list {
        align-items:center;
        flex-direction:column;
        gap:15px;
        margin-top:0px;

        & .link {
            width:min(200px, 100%);
        }
    }
}





/* ===========================================================================
*   個別設定
=========================================================================== */
/* .strength-section1 */
section.strength-section1 {
    & .strength-icon { width:min(120px, 100%);}
}

/* .strength-section2 */
section.strength-section2 {
    & .strength-icon { width:min(112px, 100%);}
}

/* .strength-section3 */
section.strength-section3 {
    & .strength-icon { width:min(120px, 100%);}
    & .strength-wrap { padding-block:140px;}
    & .strength-title { margin-top:0.4em;}
    & .link { width:min(307px, 100%); margin-top:40px; padding:1em;}
}

/* ~ 1000px */
@media screen and (max-width:1000px){
    section.strength-section3 {

        & .strength-wrap { padding-block:100px;}
    }
}

/* ~ 768px */
@media screen and (max-width:768px){
    section:is(.strength-section1, .strength-section2, .strength-section3) {
        & .strength-icon { width:79px;}
    }
    section.strength-section3 {
        & .strength-wrap { padding-block:60px;}
        & .link { width:fit-content; margin-top:20px; padding-block:0.7em;}
    }
}






/* ~ 1200px */
@media screen and (max-width:1200px) {
    .cta-item { background-position:center;}
    .cta-link { max-width:245px;}
}

/* ~ 1000px */
@media screen and (max-width:1000px){
    .strength-unit {
        flex-direction:column;
        gap:30px;
    }
    .strength-unit:nth-child(2) {
        margin-top:60px;
    }
}

/* ~ 768px */
@media screen and (max-width:768px) {
    .breadcrumb { padding-top:20px;}
    .breadcrumb.pc { display:none;}
    .strength-title {
        margin-top:20px;
        font-size:1.875rem;
        line-height:calc(40/30);
    }
    .strength-content {
        margin-top:40px;
    }
    .strength-img {
        margin:0 auto;
    }
    .strength-detail {
        margin:0 auto;
    }
    
    
    
    .strength-link {
        max-width:234px;
        margin:20px auto 0;
        padding:9px 38px 9px 18px;
    }
    .strength-link span {
        justify-content:flex-start;
        padding:6px 0 4px;
        font-size:0.75rem;
        line-height:1;
    }
    .thoughts {
        margin:60px auto;
    }
}