/*======================================
Concept Hero
======================================*/

.concept-hero{

text-align:center;
    
max-width:800px;

margin:160px auto 120px;

text-align:center;

padding:0 30px;

}

.concept-hero .container{

    max-width:760px;

}

.concept-hero__sub{

    font-size:.8rem;

    letter-spacing:.35em;

    color:#8c8176;

    margin-bottom:18px;

}

.concept-hero h1{

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

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

    font-weight:400;

    letter-spacing:.15em;

    line-height:1.7;

    margin:40px auto;

}

.concept-hero__lead{

    

    line-height:2.1;

    color:#6f665d;

}

.concept-hero p{

   line-height:2.3;

    letter-spacing:.08em;

    margin-bottom:25px;
}

/*======================================
Intro
======================================*/

.concept-intro{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.concept-intro p{

    line-height:2.4;

    margin-bottom:28px;

}

/*======================================
Divider
======================================*/

.concept-line{

    width:120px;

    height:1px;

    background:#cfc6bc;

    margin:100px auto;

}



/*======================================
Scene
======================================*/

.scene{

    max-width:1200px;
    margin:100px auto;
    padding:0 40px;

}



.scene-head{

    margin-bottom:70px;

}



.scene-number{

    display:block;

    font-size:13px;

    letter-spacing:.35em;

    color:#9c9486;

    margin-bottom:18px;

}



.scene-head h2{

    font-family:"Shippori Mincho",serif;

    font-size:36px;

    font-weight:500;

    letter-spacing:.15em;

    color:#2f2f2f;

    line-height:1.5;

   

}



.scene-sub{

    margin-top:16px;

    font-size:15px;

    letter-spacing:.25em;

    color:#8d8579;

}



.scene-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:start;

}



.scene-image img{

    width:100%;

    display:block;

}



.scene-text{

    max-width:520px;

}



.scene-text p{

    margin-bottom:32px;

    font-size:16px;

    line-height:2.4;

    letter-spacing:.08em;

    color:#242323;

}



.scene-text strong{

    font-weight:500;

    color:#2f2f2f;

}

.scene-note{

    margin-top:80px;

    padding-left:32px;

    border-left:2px solid #cfc5b5;

    font-family:"Shippori Mincho",serif;

    font-size:20px;

    font-weight:500;

    line-height:1.9;

    letter-spacing:.08em;

    color:#3d3d3d;

    max-width:620px;

}

.scene-point{

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid #d8d2c8;

}



.scene-point h3{

    font-size:12px;

    letter-spacing:.35em;

    color:#9a9183;

    margin-bottom:18px;

}



.scene-point ul{

    list-style:none;

    padding:0;

    margin:0;

}



.scene-point li{

    margin-bottom:12px;

    font-size:15px;

    color:#666;

    letter-spacing:.08em;

}

/*======================================
Reverse Layout
======================================*/

.scene.reverse .scene-content{

    grid-template-columns:1fr 1fr;

}

.scene.reverse .scene-image{

    order:2;

}

.scene.reverse .scene-text{

    order:1;

}

@media(max-width:768px){

.scene.reverse .scene-image,
.scene.reverse .scene-text{

    order:initial;

}

}


/*======================================
Ending Scene
======================================*/

.scene-ending{

    max-width:1400px;

    margin:220px auto 180px;

}



.scene-ending-image{

    position:relative;

}



.scene-ending-image img{

    width:100%;

    height:78vh;

    object-fit:cover;

    display:block;

}



.scene-ending-title{

    position:absolute;

    left:10%;

    bottom:12%;

    color:#fff;

}



.scene-ending-title .scene-number{

    color:rgba(255,255,255,.75);

    

}



.scene-ending-title h2{

    font-family:"Shippori Mincho",serif;

    font-size:58px;

    font-weight:500;

    letter-spacing:.18em;

    line-height:1.5;

   

}



.scene-ending-title p{

    margin-top:18px;

    font-size:16px;

    letter-spacing:.35em;

    

}



.scene-ending-text{

    max-width:760px;

    margin:120px auto 0;

    padding:0 40px;

}



.scene-ending-text p{

    margin-bottom:34px;

    font-size:16px;

    line-height:2.4;

    letter-spacing:.08em;

    color:#2b2a2a;

}



@media(max-width:768px){

.scene-ending{

    margin:120px auto 80px;

}



.scene-ending-image img{

    height:55vh;

}



.scene-ending-title{

    left:24px;

    bottom:28px;

}



.scene-ending-title h2{

    font-size:34px;

}



.scene-ending-text{

    margin-top:60px;

    padding:0 24px;

}

}

/*======================================
Concept Ending
======================================*/

.concept-ending{

    padding:180px 40px 220px;

}



.concept-ending-inner{

    max-width:700px;

    margin:0 auto;

    text-align:center;

}



.concept-ending-list{

    font-size:18px;

    line-height:2.6;

    letter-spacing:.18em;

    color:#666;

}



.concept-ending-line{

    width:60px;

    height:1px;

    background:#cfc7bb;

    margin:70px auto;

}



.concept-ending h2{

    font-family:"Shippori Mincho",serif;

    font-size:20px;

    font-weight:500;

    line-height:2;

    letter-spacing:.18em;

    color:#333;

}



@media(max-width:768px){

.concept-ending{

    padding:100px 24px 140px;

}

.concept-ending-list{

    font-size:17px;

    line-height:2.4;

}

.concept-ending-line{

    margin:50px auto;

}

.concept-ending h2{

    font-size:10px;

}

}


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

@media(max-width:1024px){

.scene{

    margin:120px auto;

}

.scene-content{

    gap:50px;

}

.scene-head h2{

    font-size:40px;

}

}



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

@media(max-width:768px){

.scene{

    padding:0 24px;

    margin:90px auto;

}

.scene-head{

    margin-bottom:40px;

}

.scene-head h2{

    font-size:32px;

    letter-spacing:.12em;

}

.scene-content{

    grid-template-columns:1fr;

    gap:35px;

}

.scene-text{

    max-width:none;

}

.scene-text p{

    font-size:15px;

    line-height:2.2;

}

.scene-point{

    margin-top:40px;

}

.scene-note{

    margin-top:45px;

    padding-left:20px;

    font-size:19px;

    line-height:1.9;

}

}

.sp-only{

    display:none;

}


@media(max-width:768px){

.sp-only{

    display:block;

}

}