html, body {
  height: 100%;
  margin: 0;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
background-color: transparent;
}

html.snap-off,
body.snap-off {
  scroll-snap-type: none;
  scroll-behavior: auto;
}


.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;
}

.snap-section {
  scroll-snap-align: start;
}

/* ここから下はスナップしないようにする */
.no-snap {
  scroll-snap-align: none;
}

.end-space {
  height: 1px;
  scroll-snap-align: none;
}

main{
position: relative;
}

#wrapper{
position: relative;
}

.bg_future_material{
/*background-image: url("/assets/images/atfirst/future_material/bg_future_material.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;*/
position: relative;
}

.bg_future_material.bg-off::after{
background:none;
}

.bg_future_material::after{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index: -1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:center center;
background-image: url("/assets/images/atfirst/future_material/bg_future_material.jpg");
background-size:cover;
}


#section1,
#section2,
#section3,
#section4,
#section5{
height: 100vh;
width: 100%;
position: relative;
}


.btn_nav{
position: absolute;
bottom: 30px;
left: 50%;
transform:translate(-50%, 0);
}

.btn_next{
position: relative;
color: #fff;
text-decoration: none;
font-family:'Jost', sans-serif;
padding-bottom: 40px;
font-size: 18px;
letter-spacing: 0.1em;
display: inline-block;
}

.btn_next::before{
content: '';
position: absolute;
  left: calc(50% - 18px);
  bottom: 0;
box-sizing: border-box;
width: 34px;
height: 34px;
border: 2px solid #fff;
-webkit-border-radius: 50%;
border-radius: 50%;
}


.btn_next::after{
content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  left: calc(50% - 6px);
  bottom: 13px;
transform: rotate(135deg);
}

.fm_wrap{
width: 100%;

}



.text_box{
position: relative;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}

#section1 .text_box h1{
line-height: 1.4;
/*font-size: 6vw;*/
font-size:clamp(32px, 6vw, 120px);
color: #fff;
text-align: center;
font-weight: 500;
}

#section1 .text_box h1 span{
display: block;
white-space: nowrap;

}

#section1 .text_box h1 span:nth-child(1){
margin-right: 2em;
}

#section1 .text_box h1 span:nth-child(2){
margin-left: 4em;
}


.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);
}


#section2 .fm_wrap,
#section3 .fm_wrap,
#section4 .fm_wrap,
#section5 .fm_wrap{
box-sizing: border-box;
padding: 0 30px;
width: 100%;
max-width: calc(976px + 60px);
margin: 0 auto;
}

#section2 .text_box{
width: 100%;
}

#section2 .text_box h2{
line-height: 1.4;
font-size:clamp(28px, 4vw, 60px);
color: #fff;
text-align: center;
margin-bottom: 1.4em;
font-weight: 500;
}

#section2 .text_box .body_text{
line-height: 1.4;
font-size:clamp(20px, 3.4vw, 45px);
color: #fff;
text-align: center;
margin-top: 1.8em;
font-weight: 500;
}


#section3 .text_box{
display: flex;
align-items: center;

}

#section3 .text_box .text_wrap{

}

#section3 .text_box h2{
line-height: 1.4;
font-size:clamp(28px, 3vw, 45px);
color: #fff;
text-align: left;
font-weight: 500;
white-space: nowrap;
}

#section3 .text_box .img_wrap{
width: 500px;
}


#section4 .text_box{
display: flex;
align-items: center;
flex-direction: row-reverse;

}

#section4 .text_box .text_wrap{

}

#section4 .text_box h2{
line-height: 1.4;
font-size:clamp(28px, 3vw, 45px);
color: #fff;
text-align: left;
margin-bottom: 1em;
font-weight: 500;
white-space: nowrap;
}



#section4 .text_box .img_wrap{
width: 500px;
}


#section5 .text_box{
width: 100%;
}

#section5 .text_box .body_text{
line-height: 1.4;
font-size:clamp(24px, 2.8vw, 45px);
color: #fff;
text-align: center;
margin-top: 1.4em;
font-weight: 500;
}

#section5 .text_box .sub_text{
line-height: 1.8;
font-size:clamp(14px, 2vw, 22px);
color: #fff;
text-align: center;
margin-top: 1.4em;
}

#mainSec .history_title{
padding: 150px 0 120px 0;
text-align: center;
}

#mainSec .history_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: 1.4em;
line-height: 1.4;
}

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


#mainSec .history_step{
position: relative;
list-style: none;
margin-bottom: 160px;
}

#mainSec .history_step::after{
content: "";
background: linear-gradient(to top, #039099, #0057AA);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
width: 160px;
  height: 32px;
position: absolute;
bottom:-90px;
left: calc(50% - 80px);
}

#mainSec .history_step .title_wrap{
display: flex;
justify-content:space-around;
}

#mainSec .history_step .title_wrap .image{
width: 50%;
}

#mainSec .history_step .title_wrap .text{
width: 50%;
box-sizing: border-box;
padding-left: 30px;
}

#mainSec .history_step .title_wrap .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;
}


#mainSec .history_step .title_wrap .text p{
font-size:18px;
line-height: 1.8;
}

#mainSec .history_step .table_wrap{
width: 100%;
box-sizing: border-box;
padding-left: 25%;
margin-top: 60px;
}

#mainSec .history_step .table_wrap h4{
font-size: 24px;
font-weight: normal;
margin-bottom: 1em;
}

.dl_table dt,
.dl_table dd {
  border-bottom: 1px dashed #000;
  padding: 16px 0;
  margin: 0;
}

.dl_table {
  border-top: 1px dashed #000;
font-size: 16px;
}

.dl_table {
  display: flex;
  flex-wrap: wrap;
border-top: 1px dashed #000;
}

.dl_table dt {
  width: 35%; /* 項目の幅 */
  font-weight: normal;
}

.dl_table dd {
  width: 65%;
}


.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;
}


.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;
}





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

SP

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


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

#section1,
#section2,
#section3,
#section4,
#section5{
padding-top: 62px;
height: calc(100vh - 62px);
}


main{
padding-top: 0;
}



.btn_nav{
position: absolute;
bottom: 5vh;
display: none;
}

#section1 .btn_nav{
bottom: 14vh;
display: none;
}


.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;
}


#section1 .text_box h1 span:nth-child(1){
margin-right: 1em;
}

#section1 .text_box h1 span:nth-child(2){
margin-left: 2em;
}

#section2 .text_box h2{
margin-bottom: 1em;
}

#section2 .text_box .body_text{
margin-top: 1.4em;
}

#section3 .text_box{
width: 100%;
flex-direction: column;
padding-top: 30px;

}

#section3 .text_box .text_wrap{
margin-bottom: 2em;
}

#section3 .text_box h2{
line-height: 1.4;
font-size:clamp(28px, 3vw, 45px);
color: #fff;
text-align: left;
font-weight: 500;
white-space: nowrap;
}

#section3 .text_box .img_wrap{
width: 100%;
}


#section4 .text_box{
width: 100%;
flex-direction: column;
padding-top: 50px;

}


#section4 .text_box .text_wrap{
margin-bottom: 2em;
}

#section4 .text_box h2{
line-height: 1.4;
font-size:clamp(28px, 3vw, 45px);
color: #fff;
text-align: left;
margin-bottom: 1em;
font-weight: 500;
white-space: nowrap;
}

#section4 .text_box p{
line-height: 1.8;
font-size:clamp(14px, 2vw, 22px);
color: #fff;
text-align: left;
white-space: nowrap;
}

#section4 .text_box .img_wrap{
width: 100%;
}


#section5 .text_box{
width: 100%;
padding-top: 50px;
}

#section5 .text_box .body_text{
line-height: 1.4;
font-size:clamp(24px, 2.8vw, 45px);
color: #fff;
text-align: center;
margin-top: 1.2em;
}

#mainSec .history_title{
padding: 90px 0 50px 0;
}

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

#mainSec .history_title p{
font-size:clamp(14px, 2vw, 18px);
line-height: 1.8;
text-align: left;
}


#mainSec .history_step{
position: relative;
list-style: none;
margin-bottom: 80px;
}

#mainSec .history_step::after{
content: "";
background: linear-gradient(to top, #039099, #0057AA);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
width: 100px;
  height: 20px;
position: absolute;
bottom:-50px;
left: calc(50% - 50px);
}

#mainSec .history_step .title_wrap{
display: flex;
flex-direction: column;
justify-content:space-around;
}

#mainSec .history_step .title_wrap .image{
width: 100%;
margin-bottom: 30px;
}

#mainSec .history_step .title_wrap .text{
width: 100%;
box-sizing: border-box;
padding-left: 0;
}

#mainSec .history_step .title_wrap .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;
}


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

#mainSec .history_step .table_wrap{
width: 100%;
box-sizing: border-box;
padding-left: 0;
margin-top: 30px;
}

#mainSec .history_step .table_wrap h4{
font-size: 18px;
font-weight: normal;
margin-bottom: 1em;
}

.dl_table dt,
.dl_table dd {
  border-bottom: 1px dashed #000;
  padding: 16px 0;
  margin: 0;
}

.dl_table {
  border-top: 1px dashed #000;
font-size: 12px;
line-height: 1.6;
}

.dl_table {
  display: flex;
  flex-wrap: wrap;
border-top: 1px dashed #000;
}

.dl_table dt {
  width: 40%; /* 項目の幅 */
  font-weight: normal;
}

.dl_table dd {
  width: 60%;
}


.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;
}


}