.fm-fade {
opacity: 0;
transition: opacity 1s, transform 1s;
transform: translate(-30px,0px);
}

.fm-fade.d05 {
transition-delay: 0.5s;
}

.fm-fade.d1 {
transition-delay: 1s;
}

.fm-fade.inview {
opacity: 1;
transform: translate(0px,0px);
}

.btn-fade {
opacity: 0;
transition: opacity 1s;
transition-delay: 1.2s;
}

.btn-fade.inview {
opacity: 1;
}



.point_bg{
background-image: url("/assets/images/atfirst/sustainable_making/bg.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin-top: 60px;
}


.thumb_list{
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}

.thumb_list li{
width: 30vw;
max-width: 200px;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 50%;
position: relative;
display: block;
margin: 0 10px;
}

.thumb_list li:nth-child(odd){
margin: 0 10px 20px 10px;
}

.thumb_list li:nth-child(even){
margin: 20px 10px 0 10px;
}

.thumb_list.normal li:nth-child(odd){
margin: 0 10px 0 10px;
}

.thumb_list.normal li:nth-child(even){
margin: 0 10px 0 10px;
}

.thumb_list li .thumb{
z-index: 1;
position: absolute;
top: 0;
left: 0;
}

.thumb_list li .text{
position: absolute;
bottom: 2.4em;
left:50%;
transform:translate(-50%, 0);
z-index: 2;
font-weight: normal;
white-space: nowrap;
font-size:clamp(11px, 1.5vw, 18px);
line-height: 1.2;
}

.thumb_list li .text.line2{
bottom: 1.8em;
}

.future_area{
width: 100%;
background-image: url("/assets/images/atfirst/future_material/bg_future.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.content_976{
padding: 0 30px 60px 30px;
}


.future_area .text_wrap{
max-width: calc(976px + 60px);
  padding: 130px 30px;
  box-sizing: border-box;
  margin: 0 auto;
text-align: center;
color: #fff;
}

.attention_box{
border: 2px solid #fff;
padding: 70px;
position: relative;
margin-bottom: 160px;
}

.attention_box::after{
content: "";
background: #fff;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
width: 160px;
  height: 32px;
position: absolute;
bottom:-120px;
left: calc(50% - 80px);
}


.attention_box .eng{
font-size:clamp(32px, 5vw, 58px);
/*font-size: 58px;*/
font-weight: 500;
margin-bottom: 0.5em;
letter-spacing: 0.05em;
line-height: 1.4;
}

.attention_box .jpn{
font-size:clamp(16px, 3vw, 30px);
/*font-size: 30px;*/
font-weight: normal;
line-height: 1.8;
}

.future_area .sub{
font-size:clamp(20px, 4vw, 42px);
/*font-size: 42px;*/
font-weight: normal;
line-height: 1.8;
}

#section1,
#section3{
background: linear-gradient(135deg, rgba(3,144,153,0.2), rgba(0,87,170,0.2));
}

.point_wrap{
max-width: calc(976px + 60px);
padding: 150px 30px;
margin: 0 auto;
}

.point_title{
font-weight: normal;
font-size:clamp(26px, 5vw, 38px);
text-align: center;
margin-bottom: 1.4em;
}

.circled-number {
    display: inline-flex; /* インライン要素として振る舞う */
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    border: 4px solid #000;
    border-radius: 50%;
    font-size: 1rem;
    box-sizing: border-box;
    margin-right: 0;
font-size:clamp(24px, 3vw, 36px);

}

.attention{
padding: 0 0 0.3em 0;
/*border-bottom: 4px solid #000;*/
font-size:clamp(30px, 5vw, 44px);
position: relative;
}

.attention::after{
content: "";
display: block;
position: absolute;
bottom:0;
left:10%;
width: 80%;
height: 4px;
background: #000;
}

.text_wrap{
margin-top: 1.6em;
font-size:clamp(14px, 1.8vw, 18px);
line-height: 1.8;
}

#section1 .point_title{
color:#0057AA;
}
#section1 .circled-number{
border: 4px solid #0057AA;
}
#section1 .attention::after{
background: #0057AA;
}

#section2 .point_title{
color:#0277A1;
}
#section2 .circled-number{
border: 4px solid #0277A1;
}
#section2 .attention::after{
background: #0277A1;
}

#section3 .point_title{
color:#049098;
}
#section3 .circled-number{
border: 4px solid #049098;
}
#section3 .attention::after{
background: #049098;
}




#section4 .problem_title{
padding: 150px 0 0 0;
text-align: center;
}

#section4 .problem_title h2{
writing-mode: horizontal-tb;
display: inline-block;
font-weight: normal;
  background: linear-gradient(90deg, #039099 0%, #0057AA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size:clamp(28px, 3vw, 45px);
margin-bottom: 2em;
line-height: 1.4;
}


#section4 .problem_box{
position: relative;
list-style: none;
display: flex;
justify-content:space-around;
margin-bottom: 70px;
}

#section4 .problem_box .image{
width: 40%;
}

#section4 .problem_box .text{
width: 60%;
box-sizing: border-box;
padding-left: 60px;
}

#section4 .problem_box .text h3{
font-size:clamp(22px, 2.8vw, 36px);
font-weight: normal;
border-bottom: 3px solid #0057AA;
  display: inline-block;
  padding-bottom: 0.5em;
margin-bottom: 0.8em;
}


#section4 .problem_box .text p{
font-size:18px;
line-height: 1.8;
}


/*------------------------------------------------------------------------------------------------------------

SP

------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 976px) {


.point_bg{
background-image: url("/assets/images/atfirst/sustainable_making/bg_sp.jpg");
}

.thumb_list{

}

.thumb_list li{
max-width: 140px;
width: 34vw
}

.thumb_list li:nth-child(odd){
margin: 0 8px 16px 8px;
}

.thumb_list li:nth-child(even){
margin: 16px 8px 0 8px;
}

.thumb_list.normal li:nth-child(odd){
margin: 8px 8px 8px 8px;
}

.thumb_list.normal li:nth-child(even){
margin: 8px 8px 8px 8px;
}


.thumb_list li .text{
position: absolute;
bottom: 2em;
}


.future_area{
width: 100%;
background-image: url("/assets/images/atfirst/future_material/bg_future.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.content_976{
padding: 0 15px;
}


.future_area .text_wrap{
  padding: 50px 15px;
  box-sizing: border-box;
  margin: 0 auto;
text-align: center;
color: #fff;
}

.attention_box{
border: 2px solid #fff;
padding: 30px 15px;
position: relative;
margin-bottom: 80px;
}

.attention_box::after{
content: "";
background: #fff;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
width: 100px;
  height: 20px;
position: absolute;
bottom:-60px;
left: calc(50% - 50px);
}


.attention_box .eng{
font-size:clamp(28px, 3vw, 58px);
/*font-size: 58px;*/
font-weight: 500;
margin-bottom: 0.5em;
letter-spacing: 0.05em;
line-height: 1.4;
}

.attention_box .jpn{
font-size:clamp(16px, 3vw, 30px);
/*font-size: 30px;*/
font-weight: normal;
line-height: 1.8;
}

.future_area .sub{
font-size:clamp(20px, 4vw, 42px);
/*font-size: 42px;*/
font-weight: normal;
line-height: 1.8;
}

.point_wrap{
padding: 60px 15px 80px 15px;
margin: 0 auto;
}



#section4 .problem_title{
padding: 80px 0 20px 0;
text-align: center;
}

#section4 .problem_title h2{
display: inline-block;
font-weight: normal;
  background: linear-gradient(90deg, #039099 0%, #0057AA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size:clamp(24px, 2.4vw, 45px);
margin-bottom: 2em;
line-height: 1.4;
}


#section4 .problem_box{
position: relative;
list-style: none;
display: flex;
flex-direction: column;
justify-content:space-around;
margin-bottom: 70px;
}

#section4 .problem_box .image{
width: 100%;
margin-bottom: 30px;
}

#section4 .problem_box .text{
width: 100%;
box-sizing: border-box;
padding-left: 0px;
}

#section4 .problem_box .text h3{
font-size:clamp(22px, 2.8vw, 36px);
font-weight: normal;
border-bottom: 3px solid #0057AA;
  display: inline-block;
  padding-bottom: 0.5em;
margin-bottom: 0.8em;
}


#section4 .problem_box .text p{
font-size:clamp(14px, 2vw, 18px);
line-height: 1.8;
}


}