/* =========================
 Philosophy Page
========================= */


.philosophy-page{

    color:#403a32;
    line-break:strict;

}



/* Header
========================= */


.philosophy-header{

    max-width:800px;

    margin:160px auto 120px;

    text-align:center;

    padding:0 30px;

}


.page-label{

    font-size:13px;

    letter-spacing:.35em;

    color:#8b8175;

}


.philosophy-header h1{

    font-family:var(--font-title);

    font-size:clamp(1.8rem,4vw,2.7rem);

    font-weight:400;

    line-height:1.7;

    letter-spacing:.12em;

    margin:40px auto;

}

.philosophy-header h1,
.block-content h2,
.philosophy-message h2{

    font-family:
    "Shippori Mincho",
    serif;

    font-weight:400;

    letter-spacing:.15em;

}


.philosophy-header h1 span{

    display:block;

}


.philosophy-header p{

    line-height:2.3;

    letter-spacing:.08em;

    margin-bottom:25px;

}




/* Common Block
========================= */


.philosophy-block{

    max-width:1200px;

    margin:0 auto 160px;

    padding:0 40px;

}



.block-image{

    width:100%;

}



.block-image img{

    width:100%;

    height:600px;

    object-fit:cover;

}




.block-content{

    max-width:520px;

}


.block-number{

    display:block;

    color:#988d80;

    letter-spacing:.3em;

    margin-bottom:25px;

}



.block-content h2{

    font-size:clamp(2rem,3vw,3rem);

    font-weight:400;

    line-height:1.7;

    letter-spacing:.15em;

    margin-bottom:40px;

}



.block-content p{

    line-height:2.2;

    letter-spacing:.08em;

    margin-bottom:25px;

    ont-size:clamp(14px,1.1vw,16px);

    line-height:2.2;

    letter-spacing:.08em;

}





/* Natural & Maintenance
========================= */


.natural,
.maintenance{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}





/* Performance
========================= */


.performance{

    background:#f4f1ea;

    max-width:none;

    padding:

    120px max(calc((100vw - 1120px)/2),40px);

}



.performance-title{

    max-width:750px;

    margin:0 auto 70px;

    text-align:center;

}



.performance-cards{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}



.performance-card{

    background:#fffdf8;

    padding:45px;

    border:1px solid #e4ddd2;

}



.performance-card h3{

    font-size:22px;

    font-weight:400;

    letter-spacing:.15em;

    margin-bottom:25px;

}



.performance-card p{

    line-height:2;

}





/* Message
========================= */


.philosophy-message{

    text-align:center;

    padding:140px 30px;

    background:#f4f1ea;

}



.philosophy-message h2{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:400;

    line-height:1.7;

    letter-spacing:.15em;

    margin-bottom:50px;

}




.philosophy-message p{

    line-height:2.3;

    letter-spacing:.1em;

}







/* Mobile
========================= */


@media(max-width:768px){


.philosophy-header{

    margin:90px auto;

}



.philosophy-block{

    margin-bottom:90px;

    padding:0 20px;

}



.natural,
.maintenance{

    display:flex;

    flex-direction:column;

    gap:45px;

}



.block-image img{

    height:360px;

}



.performance{

    padding:80px 20px;

}



.performance-cards{

    grid-template-columns:1fr;

}



.performance-card{

    padding:30px;

}



.philosophy-message{

    padding:90px 20px;

}


}



/* =========================
   Tablet
========================= */


@media(max-width:1024px){


.philosophy-header{

    margin:120px auto 90px;

    padding:0 35px;

}


.philosophy-block{

    padding:0 35px;

    margin-bottom:120px;

}



.natural,
.maintenance{

    gap:50px;

}



.block-image img{

    height:480px;

}



.block-content h2{

    font-size:clamp(1.8rem,3vw,2.5rem);

}



.block-content p{

    font-size:15px;

}



.performance{

    padding:

    100px 35px;

}



.performance-card{

    padding:35px;

}



.performance-card h3{

    font-size:20px;

}



}

@media(max-width:768px){

.philosophy-header h1{

    font-size:1.60rem;

    letter-spacing:.1em;

}

}





/* =========================
   Mobile
========================= */


@media(max-width:768px){



.philosophy-header{

    margin:120px auto 70px;
    padding:0 20px;

}


.page-label{

    display:block;

    font-size:12px;

    letter-spacing:.35em;

    margin-bottom:30px;

}



.philosophy-header h1{

    font-size:2rem;

    letter-spacing:.12em;

    line-height:1.8;

    margin:30px 0;

}



.philosophy-header p{

    font-size:14px;

    line-height:2;

}




.philosophy-block{

    padding:0 20px;

    margin-bottom:90px;

}



.natural,
.maintenance{

    display:flex;

    flex-direction:column;

    gap:40px;

}




.block-image img{

    height:320px;

}




.block-number{

    font-size:13px;

}



.block-content h2{

    font-size:1.8rem;

    line-height:1.8;

    margin-bottom:30px;

}



.block-content p{

    font-size:14px;

    line-height:2;

}




/* Performance */


.performance{

    padding:

    70px 20px;

}



.performance-title{

    margin-bottom:50px;

}



.performance-title h2{

    font-size:1.8rem;

}



.performance-cards{

    grid-template-columns:1fr;

    gap:20px;

}



.performance-card{

    padding:28px 25px;

}



.performance-card h3{

    font-size:18px;

    margin-bottom:20px;

}



.performance-card p{

    font-size:14px;

    line-height:2;

}



/* Message */


.philosophy-message{

    padding:80px 20px;

}



.philosophy-message h2{

    font-size:1.9rem;

    line-height:1.8;

}



.philosophy-message p{

    font-size:14px;

    line-height:2;

}

}


@media(max-width:900px){

.natural,
.maintenance{

    display:flex;

    flex-direction:column;

}


.block-image{

    width:100%;

}




.block-content{

    max-width:100%;

}

}

@media(max-width:768px){

.philosophy-header h1{

    font-size:1.65rem;

    letter-spacing:.1em;

}

}