@charset "UTF-8";

/*================================mainvisual================================*/
.mainvisual{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
background: url(../images/bg-mainvisual.jpg) no-repeat top center;
}
.mainvisual .inner{
position: relative;
width: 90%;
padding: 0 0 500px;
margin: auto ;
}
.mainvisual .wrap{
position: absolute;
top: 20%;
left: 0;
z-index: 1;
}
.mainvisual .catch{
width: 386px;
transition: 0.5s;
}
.mainvisual .catch img{
width: 100%;
height: auto;
filter:drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 1));
}
.mainvisual .lead{
margin-top: 30px;
transition: 0.5s;
}
.mainvisual .lead span{
display: inline-flex;
align-items: center;
width: 460px;
height: 60px;
border-radius: 10px;
color: #fff;
font-size: 2.4rem;
font-weight: 700;
line-height: 0;
letter-spacing: 1.5px;
padding: 0 30px;
background:linear-gradient(89deg, #C7E1AE -72.73%, #50C878 118.52%);
margin-bottom: 12px;
transition: 0.5s;
}
.mainvisual .slide{
aspect-ratio: 1262/692;
position: relative;
top: 180px;
width: 88vw;
max-width: 1642px;
min-width: 1126px;
background: url(../images/bg-mainvisual.svg) no-repeat;
background-size: 100% auto;
margin-left: 5%;
}
.mainvisual .slide figure{
clip-path: url(#svg);
}
.mainvisual .slide figure img{
aspect-ratio: 1262/692;
width: 88vw;
max-width: 1642px;
min-width: 1126px;
clip-path: url(#slideClip);
-webkit-clip-path:url(#slideClip);
}
.mainvisual .slide::before{
position: absolute;
right: 246px;
bottom: -52px;
content: "";
width: 155px;
height: 204px;
background: url(../images/parts-mainvisual.svg) no-repeat;
background-size: 100% auto;
z-index: 1;
}

@media  only screen and (max-width: 768px) {
.mainvisual{
width: 100%;
max-width: 100%;
background: url(../images/bg-mainvisual-sp.jpg) no-repeat top 70px center;
background-size: 100% auto;
}
.mainvisual .inner{
width: 100%;
padding: 0 20px 60%;
}
.mainvisual .wrap{
position: absolute;
top: 45%;
left: 10%;
width: 80%;
}
.mainvisual .catch{
width: 40%;
}
.mainvisual .lead{
width: 100%;
margin-top: 4vw;
}
.mainvisual .lead span{
justify-content: center;
width: 100%;
height: 9vw;
border-radius: 1.4vw;
font-size: 3vw;
padding: 0 4vw;
margin-bottom: 2vw;
}
.mainvisual .slide{
top: 70px;
width: 100%;
max-width: 100%;
min-width: 100%;
background: url(../images/bg-mainvisual.svg) no-repeat;
background-size: 100% auto;
margin-left: 0;
}
.mainvisual .slide figure{
clip-path: url(#svg);
}
.mainvisual .slide figure img{
aspect-ratio: 1262/692;
width: 100%;
max-width: 100%;
min-width: 100%;
}
.mainvisual .slide::before{
aspect-ratio: 115 / 204;
position: absolute;
right: 2vw;
bottom: -22vw;
content: "";
width: 24vw;
height: auto;
background: url(../images/parts-mainvisual.svg) no-repeat;
background-size: 100% auto;
z-index: 1;
}
}

/*=============================== news ================================*/
.news{
position: relative;
width: 100%;
max-width: 1920px;
height: 624px;
margin: auto;
padding: 300px 0 0;
background: url(../images/bg-news.png) no-repeat center top;
margin-top: -300px;
}
.news .inner{
position: relative;
width: 1036px;
margin: auto ;
display: flex;

}
.news .inner h2{
width: 210px;
color: #FFF;
font-weight: 500;
}
.news .inner h2 a{
color: #FFF;
text-decoration: none;
transition: 0.3s;
}
.news .inner h2 a:hover{
opacity: 0.7;
}
.news .inner h2 a > span:nth-child(1){
display: block;
color: #FFF;
font-size: 4rem;
font-weight: 500;
letter-spacing: 3.2px;
margin-bottom: 6px;
}
.news .inner h2 a > span:nth-child(2){
display: flex;
align-items: center;
gap: 10px;
font-size: 1.8rem;
letter-spacing: 1.44px;
}
.news .inner h2 a > span:nth-child(2)::after{
content: "";
width: 104px;
height: 1px;
background: #fff;
}
.news .inner ul{
border-bottom: 1px dotted #fff;
}
.news .inner ul li{
width: 826px;
border-top: 1px dotted #fff;
}
.news .inner ul li a{
display: flex;
gap: 58px; 
padding: 30px 0;
color: #FFF;
font-size: 1.7rem;
font-weight: 500;
letter-spacing: 1.36px;
text-decoration: none;
background: url(../images/icon/icon-arrow01.svg) no-repeat right 26px center;
transition: 0.3s;
}
.news .inner ul li a:hover{
opacity: 0.7;
}
.news .inner ul li.no-link{
display: flex;
gap: 58px;
padding: 30px 0;
color: #FFF;
font-size: 1.7rem;
font-weight: 500;
letter-spacing: 1.36px;
}
.news .inner ul li time{
width:90px;
}
.news .inner .btn01{
position: absolute;
left: 0;
/*bottom: -80px;*/
bottom: 0;
}
#news_list p.ttl {
    padding-right: 43px;
    line-height: 1.5;
}

@media  only screen and (max-width: 768px) {
.news{
position: relative;
width: 100%;
max-width: 100%;
height: auto;
margin: auto;
padding: 28vw 0 60px;
background: url(../images/bg-news.png) no-repeat left top ,linear-gradient(180deg, rgba(84, 200, 119, 0) 20%, rgba(84, 200, 119, 1) 20%, rgba(84, 200, 119, 1) 100%);
background-size: 150% auto;
margin-top: 0;
}
.news .inner{
width: 100%;
display: block;
padding: 0 20px;
}
.news .inner h2{
width: 100%;
margin-bottom: 20px;
}
.news .inner h2 a > span:nth-child(1){
font-size: 2.6rem;
margin-bottom: 4px;
}
.news .inner h2 a > span:nth-child(2){
gap: 8px;
font-size: 1.4rem;
}
.news .inner h2 a > span:nth-child(2)::after{
content: "";
width: 80px;
height: 1px;
background: #fff;
}
.news .inner ul{
border-bottom: 1px dotted #fff;
}
.news .inner ul li{
width: 100%;
border-top: 1px dotted #fff;
}
.news .inner ul li a{
display: block;
padding: 15px 0;
font-size: 1.4rem;
background: url(../images/icon/icon-arrow01.svg) no-repeat right 12px center;
background-size: 10px auto;
}
.news .inner ul li.no-link{
display: block;
padding: 15px 0;
font-size: 1.4rem;
}
.news .inner ul li time{
display: block;
width:100%;
margin-bottom: 4px;
}
.news .inner .btn01{
position: initial;
}
}

/*=============================== message ================================*/
.message{
margin-bottom: 100px;
}
.message .inner{
position: relative;
max-width: 1920px;
margin: auto;
padding: 100px 0 0;
width: 1200px;
}
.message .inner h2{
text-decoration: none;
transition: 0.3s;
text-align: center;
}
.message .inner h2:hover{
opacity: 0.7;
}
.message .inner h2 > span:nth-child(1){
display: block;
color:#50C878;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1.28px;
margin-bottom: 16px;
}
.message .inner h2 > span:nth-child(2){
color: var(--c-primary);
font-size: 4rem;
font-weight: 600;
letter-spacing: 3.2px;
}
.message .inner h2 > span:nth-child(2) span {
color: #50C878;
}
.message .area {
    margin-top: 50px;
    background: url(../images/message_bg.jpg) no-repeat right -98px bottom -90px;
    padding: 50px;
    height: 350px;
    background-size: 116% auto;
    border-radius: 30px;
}
.message .area p {
    width: 600px;
    margin-left: auto;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 1.36px;
}
.message .area p .name{
    text-align: right;
    display: block;
}
.message .area p .name span{
    font-size: 2rem;
}
@media  only screen and (max-width: 768px) {
.message{
margin-top: 20px;
margin-bottom: 50px;
}
.message .inner{
position: relative;
max-width: 100%;
width: 100%;
padding: 0 20px;
}
.message .inner h2{
margin-bottom:10px;
}
.message .inner h2 > span:nth-child(1){
font-size: 1.4rem;
margin-bottom: 8px;
}
.message .inner h2 > span:nth-child(2){
font-size: 3rem;
}
.message .inner h2 > span:nth-child(2) span {
color: #50C878;
}
.message .area {
    margin-top: 30px;
    background: url(../images/message_bg_sp.jpg) no-repeat center bottom;
    background-size: auto 108%;
    height: 450px;
    border-radius: 30px;
    padding: 20px;
}
.message .area p {
    width: 100%;
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: auto;
}
.message .area p .name span {
    font-size: 1.7rem;
}
}


/*=============================== voice ================================*/
.voice {
}
.voice .inner{
position: relative;
max-width: 1920px;
margin: auto;
width: 1200px;
}
.voice .inner h2 {
margin-bottom: 50px;
}
.voice .inner h2 a {
text-decoration: none;
transition: 0.3s;
text-align: center;
display: block;
}
.voice .inner h2 a:hover{
opacity: 0.7;
}
.voice .inner h2 a > span:nth-child(1){
display: block;
color:#50C878;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1.28px;
margin-bottom: 16px;
}
.voice .inner h2 a > span:nth-child(2){
color: var(--c-primary);
font-size: 4rem;
font-weight: 600;
letter-spacing: 3.2px;
}
.voice .inner h2 a > span:nth-child(2) span {
color: #50C878;
}
.voice ul {
display:flex;
justify-content: space-between;
gap:30px;
}
.voice ul li {
background: #F7F7F7;
width: calc((100% - 30px) / 3);
padding: 20px;
border-radius: 30px;
}
.voice ul li img {
width: 60%;
display: block;
margin: 0 auto;
padding-bottom: 20px;
}
.voice ul li p {
font-size: 1.6rem;
font-weight: 600;
line-height: 1.6;
letter-spacing: 1.36px;
}
.voice .btn01 {
  width: 180px;
  margin: 0 auto;
}
@media  only screen and (max-width: 768px) {
.voice {
}
.voice .inner{
position: relative;
max-width: 100%;
width: 100%;
padding: 0 20px;
}

.voice .inner h2 a{
margin-bottom:10px;
}
.voice .inner h2 a > span:nth-child(1){
font-size: 1.4rem;
margin-bottom: 8px;
}
.voice .inner h2 a > span:nth-child(2){
font-size: 3rem;
}
.voice .inner h2 a > span:nth-child(2) span {
color: #50C878;
}
.voice ul {
flex-wrap: wrap;
align-items: flex-start;
}
.voice ul li {
width:100%;
display: flex;
justify-content: space-between;
}
.voice ul li img {
width: 30%;
height: 100%;
display: block;
margin: 0 auto;
padding: 0;
}
.voice ul li p {
    width: 65%;
    height: auto;
}
}

/*=============================== reason ================================*/
.reason{
position: relative;
width: 100%;
max-width: 1920px;
height: 1060px;
margin: auto;
padding: 250px 0 0;
background: url(../images/bg-reason.jpg) no-repeat center top;
}
.reason .inner{
position: relative;
width: 1200px;
margin: auto ;
}
.reason .inner h2{
margin-bottom:24px;
}
.reason .inner h2 a{
text-decoration: none;
transition: 0.3s;
}
.reason .inner h2 a:hover{
opacity: 0.7;
}
.reason .inner h2 a > span:nth-child(1){
display: block;
color:#50C878;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1.28px;
margin-bottom: 16px;
}
.reason .inner h2 a > span:nth-child(2){
color: var(--c-primary);
font-size: 4rem;
font-weight: 600;
letter-spacing: 3.2px;
}
.reason .inner h2 a > span:nth-child(2) span{
color:#50C878;
font-size: 9.6rem;
letter-spacing: 3px;
}
.reason .inner .lead{
color: var(--c-primary);
font-size: 1.7rem;
font-weight: 600;
line-height: 1.8;
letter-spacing: 1.36px;
}
.reason .inner ol{
position: absolute;
top:100px;
right: 40px;
width: 688px;
display: flex;
flex-wrap: wrap;
gap: 50px;
counter-reset: num;
}
.reason .inner ol li{
position: relative;
width: 196px;
height: 196px;
}
.reason .inner ol li::before{
counter-increment: num 1;
content: counter(num, decimal-leading-zero);
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
color: #FFF;
font-size: 3.2rem;
font-weight: 600;
letter-spacing: 0;
border: 4px solid #fff;
border-radius: 50%;
padding-bottom: 4px;
position: absolute;
top: -10px;
left: -10px;
z-index: 1;
}
.reason .inner ol li figure{
width: 196px;
height: 196px;
border-radius: 196px;
overflow:hidden ;
background: #ddd;
}
.reason .inner ol li:nth-child(4){
margin-left: -118px;
}
.reason .inner ol li p{
position: absolute;
bottom: 12px;
right: -40px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
color: #FFF;
font-size: 20px;
font-weight: 700;
line-height: 1.5; 
letter-spacing: 1.6px;
border-radius: 36px;
background:  #50C878;
padding: 0 16px;
}
.reason .inner ol li:nth-child(1) p{background:  #E99A00;}
.reason .inner ol li:nth-child(2) p{background:  #DA78AD;}
.reason .inner ol li:nth-child(3) p{background:  #E94828;}
.reason .inner ol li:nth-child(4) p{background:  #50C878;}
.reason .inner ol li:nth-child(5) p{background:  #036EB8;}
.reason .inner ol li:nth-child(6) p{background:  #E4C500;}
.reason .inner ol li:nth-child(1):before{background: #E99A00;}
.reason .inner ol li:nth-child(2):before{background: #DA78AD;}
.reason .inner ol li:nth-child(3):before{background: #E94828;}
.reason .inner ol li:nth-child(4):before{background: #50C878;}
.reason .inner ol li:nth-child(5):before{background: #036EB8;}
.reason .inner ol li:nth-child(6):before{background: #E4C500;}
.reason .inner .btn02{width:180px;}

@media  only screen and (max-width: 768px) {
.reason{
position: relative;
width: 100%;
max-width: 100%;
height: auto;
padding: 60px 0 24vw;
background: url(../images/bg-reason-sp.jpg) no-repeat center top 40px;
background-size: 100% auto;
}
.reason .inner{
position: relative;
width: 100%;
padding: 0 20px;
}
.reason .inner h2{
margin-bottom:20px;
}
.reason .inner h2 a > span:nth-child(1){
font-size: 1.4rem;
margin-bottom: 8px;
}
.reason .inner h2 a > span:nth-child(2){
font-size: 3rem;
}
.reason .inner h2 a > span:nth-child(2) span{
font-size: 5rem;
}
.reason .inner .lead{
font-size: 1.5rem;
line-height: 1.8;
}
.reason .inner ol{
position: initial;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 40px 6px;
counter-reset: num;
margin-top: 50px;
}
.reason .inner ol li{
position: relative;
aspect-ratio: 1 / 1;
width: calc((100% - 6px) / 2);
height: auto;
}
.reason .inner ol li::before{
width: 12vw;
height: 12vw;
font-size:5vw;
border: 0.7vw solid #fff;
padding-bottom: 0.7vw;
position: absolute;
top: 0;
left: 0;
}
.reason .inner ol li figure{
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
border-radius: 50%;
overflow:hidden ;
}
.reason .inner ol li figure img{
width: 100%;
height: auto;
}
.reason .inner ol li:nth-child(4){
margin-left: 0;
}
.reason .inner ol li p{
width: 90%;
position: absolute;
bottom: 2vw;
left: 50%;
right:initial;
transform: translateX(-50%);
height: 8vw;
font-size: 3.2vw;
border-radius: 8vw;
padding: 0;
white-space: nowrap;
}
.reason .inner .btn02{
width:80%;
margin: auto;
}
}

/*=============================== showroom ================================*/
.showroom{
position: relative;
width: 100%;
max-width: 1920px;
height: 2264px;
margin: auto;
padding: 430px 0 0;
background: url(../images/bg-showroom.jpg) no-repeat center top;
}
.showroom .inner{
position: relative;
width: 1070px;
border-radius: 70px;
background: #FFF url(../images/parts-showroom.svg) no-repeat center top 390px;
padding: 74px 86px;
margin: auto ;
}
.showroom .inner::before{
position: absolute;
top:-80px;
right:  -64px;
content:"";
width: 318px;
height: 279px;
background: url(../images/parts-showroom01.png);
}
.showroom .inner::after{
position: absolute;
top:492px;
left: -64px;
content:"";
width: 224px;
height: 200px;
background: url(../images/parts-showroom02.png);
}
.showroom .inner h2{
display:block;
text-align: center;
margin-bottom: 96px;
}
.showroom .inner h2 a{
display: inline-block;
text-decoration: none;
transition: 0.3s;
}
.showroom .inner h2 a:hover{
opacity: 0.7;
}
.showroom .inner h2 a > span:nth-child(1){
display:block;
color:#50C878;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 1.2px;
margin-bottom: 12px;
}
.showroom .inner h2 a > span:nth-child(2){
color: var(--c-primary);
font-size: 4rem;
font-weight: 600;
letter-spacing: 3.2px;
}
.showroom .inner .catch{
text-align: center;
}
.showroom .inner .catch span{
display: inline-block;
font-size: 3.2rem;
font-weight: 600;
letter-spacing: 2.64px;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
padding: 16px 0;
margin: 16px 0 36px;
}
.showroom .inner p{
color:#50C878;
text-align: center;
font-size: 1.7rem;
font-weight: 600;
line-height: 1.8;
letter-spacing: 1.36px;
}

.showroom .inner .movie {
position: relative;
margin-top: 120px;
text-align: center;
}
.showroom .inner .movie::before{
position: absolute;
bottom:0 ;
right: -150px;
content:"";
width: 192px;
height: 173px;
background: url(../images/parts-showroom03.png);
z-index: 1;
}
.showroom .inner .movie h3{
display: inline-flex;
position: relative;
color: #FFF;
font-size: 3.3rem;
font-weight: 600;
letter-spacing: 2.64px;
margin-bottom: 36px;
}
.showroom .inner .movie h3::before{
content: "";
display: block;
width: 21px;
height: 37px;
background:url(../images/parts-h3.svg) no-repeat;
background-size: 100% auto;
margin-right: 12px;
}
.showroom .inner .movie h3::after{
content: "";
display: block;
width: 21px;
height: 37px;
background:url(../images/parts-h3.svg) no-repeat;
background-size: 100% auto;
transform: scaleX(-1);
margin-left: 12px;
}
.showroom .inner .movie .movie_wrap iframe{
width: 620px;
border-radius: 20px;
}
.showroom .inner .btn01 a{
width: 180px;
margin:34px auto 0;
}
.showroom .inner .bnr a{
display: block;
margin-top: 32px;
transition: 0.3s;
box-shadow: 0 6px 6.4px 0 rgba(0, 0, 0, 0.25);
}
.showroom .inner .bnr a:hover{
opacity: 0.7;
}

@media  only screen and (max-width: 768px) {
.showroom{
width: 100%;
max-width: 100%;
height:100%;
margin: auto;
padding: 50vw 20px 80px;
background:#f3f3f3 url(../images/bg-showroom-sp.jpg) no-repeat center top;
background-size: 100% auto;
}
.showroom::before{
aspect-ratio: 192/173;
position: absolute;
bottom:-20vw;
right: -10vw;
content:"";
width: 45vw;
height: auto;
background: url(../images/parts-showroom03.png);
background-size: 100% auto;
z-index: 1;
}
.showroom .inner{
width: 100%;
border-radius: 30px;
background: #FFF;
padding: 74px 15px 40px;
}
.showroom .inner::after {
display: none;
}
.showroom .inner::before{
aspect-ratio: 318/279;
position: absolute;
top:-64vw;
right: -10vw;
content:"";
width: 45vw;
height: auto;
background: url(../images/parts-showroom01.png);
background-size: 100% auto;
}
.showroom::after{
aspect-ratio: 224/200;
position: absolute;
top:42vw;
left: -4vw;
content:"";
width: 30vw;
height: auto;
background: url(../images/parts-showroom02.png);
background-size: 100% auto;
}
.showroom .inner h2{
margin-bottom: 40px;
}
.showroom .inner h2 a > span:nth-child(1){
font-size: 1.4rem;
margin-bottom: 8px;
}
.showroom .inner h2 a > span:nth-child(2){
font-size: 7vw;
white-space: nowrap;
}
.showroom .inner .catch{
padding: 0 20px;
}
.showroom .inner .catch img{
width: 100%;
}
.showroom .inner .catch span{
width: 100%;
font-size: 5vw;
padding: 12px 0;
margin: 16px 0 16px;
}
.showroom .inner p{
text-align: left;
font-size: 1.4rem;
line-height: 1.5;
margin: auto;
padding: 0 20px;
}
.showroom .inner p br{
display: none;
}
.showroom .inner .movie {
position: relative;
margin-top: 30px;
text-align: center;
background: #50c878 url(../images/parts-showroom.svg) no-repeat center top;
background-size: 100% auto;
border-radius: 16px;
padding: 40px 20px 40px;
}
.showroom .inner .movie::before{
display: none;
}
.showroom .inner .movie h3{
display: inline-flex;
font-size: 4vw;
line-height: 1.5;
margin-bottom: 20px;
}
.showroom .inner .movie h3::before{
content: "";
display: block;
width: 21px;
height: 37px;
background:url(../images/parts-h3.svg) no-repeat;
background-size: 100% auto;
margin-right: 6px;
}
.showroom .inner .movie h3::after{
content: "";
display: block;
width: 21px;
height: 37px;
background:url(../images/parts-h3.svg) no-repeat;
background-size: 100% auto;
transform: scaleX(-1);
margin-left: 6px;
}
.showroom .inner .movie .movie_wrap iframe{
width: 100%;
border-radius: 12px;
}
.showroom .inner .btn01 a{
width: 80%;
margin:30px auto 0;
}
.showroom .inner .bnr{
width: 100%;
}
.showroom .inner .bnr a{
margin-top: 40px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25);
}
.showroom .inner .bnr a img{
width: 100%;
height: auto;
}
}

/*=============================== flow ================================*/
.flow{
position: relative;
width: 100%;
max-width: 1920px;
height: 2156px;
margin: auto;
padding: 300px 0 0;
background: url(../images/bg-flow.png) no-repeat center top;
margin-top: -280px;
}
.flow .inner{
position: relative;
width: 1200px;
margin: auto ;
}
.flow .inner h2{
margin-bottom:24px;
}
.flow .inner h2 a{
text-decoration: none;
transition: 0.3s;
}
.flow .inner h2 a:hover{
opacity: 0.7;
}
.flow .inner h2 a > span:nth-child(1){
display: block;
color:#50C878;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1.28px;
margin-bottom: 16px;
}
.flow .inner h2 a > span:nth-child(2){
color: var(--c-primary);
font-size: 4rem;
font-weight: 600;
letter-spacing: 3.2px;
}
.flow .inner h2 a > span:nth-child(2) span {
color: #50C878;
}
.flow .inner .lead {
font-size: 1.7rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 1.36px;
}
.flow .inner .btn01 a {
width: 180px;
margin: 40px 0 0;
}
.flow .inner figure{
position: absolute;
}
.flow .inner figure::after{
position: absolute;
content: "";
display: block;
background: #50C878;
border-radius: 30px;
}
.flow .inner figure img{
position: relative;
width: 100%;
height: auto;
border-radius: 30px;
z-index: 1;
}
.flow .inner figure:nth-of-type(1) figcaption{
position: absolute;
top: -50px;
left: -32px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 329px;
height: 256px;
color:  #50C878;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 2px;
background: url(../images/flow-catch.svg) no-repeat ;
background-size: cover;
padding-top:16px;
filter: drop-shadow(-7px -10px 0 #50C878);
transform: translateZ(0);
}
.flow .inner figure:nth-of-type(1){
top: 50px;
right: 80px;
width: 653px;
transform: rotate(1.7deg);
}
.flow .inner figure:nth-of-type(1)::after{
top: 46px;
left: 60px;
width: 653px;
height: 453px;
transform: rotate(3deg);
}
.flow .inner figure:nth-of-type(2){
top: 430px;
left: 20px;
width: 328px;
height: 228px;
transform: rotate(-7deg);
}
.flow .inner figure:nth-of-type(2)::after{
top: 0;
left: 0;
width: 328px;
height: 228px;
transform: rotate(9.5deg);
}
.flow .inner figure:nth-of-type(3){
top: 770px;
left: 340px;
width: 236px;
height: 164px;
transform: rotate(16deg);
}
.flow .inner figure:nth-of-type(3)::after{
top: 16px;
left: 20px;
width: 236px;
height: 164px;
transform: rotate(-7.3deg);
}
.flow .inner figure:nth-of-type(4){
top: 1040px;
left: 180px;
width: 194px;
height: 135px;
transform: rotate(-13.4deg);
}
.flow .inner figure:nth-of-type(4)::after{
top: 12px;
left: 14px;
width: 194px;
height: 135px;
transform: rotate(0);
}
@media  only screen and (max-width: 768px) {
.flow{
width: 100%;
max-width:100%;
height: auto;
padding: 20vw 0 0;
background: url(../images/bg-flow.png) no-repeat center top;
background-size: 150% auto;
margin-top: -13vw;
}
.flow .inner{
width: 100%;
padding: 0 20px;
}
.flow .inner .wrap{
margin-bottom: 40vw;
}
.flow .inner h2{
margin-bottom:20px;
}
.flow .inner h2 a > span:nth-child(1){
font-size: 1.4rem;
margin-bottom: 8px;
}
.flow .inner h2 a > span:nth-child(2){
font-size: 3rem;
}
.flow .inner h2 a > span:nth-child(2) span {
color: #50C878;
}
.flow .inner .lead {
font-size: 1.5rem;
line-height: 1.8;
}
.flow .inner .btn01 a {
width: 180px;
margin: 40px 0 0;
}
.flow .inner figure{
position: relative;
}
.flow .inner figure::after{
position: absolute;
content: "";
display: block;
border-radius: 15px;
}
.flow .inner figure img{
position: relative;
width: 100%;
height: auto;
border-radius: 15px;
z-index: 1;
}
.flow .inner figure:nth-of-type(1) figcaption{
aspect-ratio: 329/256;
position: absolute;
top:-30vw;
left: -10px;
z-index: 2;
width: 70%;
height: auto;
font-size:4vw;
background: url(../images/flow-catch.svg) no-repeat ;
background-size: 100% auto;
padding-top:2vw;
filter: drop-shadow(-5px -7px 0 #50C878);
}
.flow .inner figure:nth-of-type(1){
aspect-ratio: 653 / 453;
top: initial;
right: initial;
width: 90%;
transform: rotate(1.7deg);
margin-bottom: 14vw;
}
.flow .inner figure:nth-of-type(1)::after{
aspect-ratio: 653 / 453;
top: 16px;
left: 16px;
width: 100%;
height: auto;
transform: rotate(3deg);
}
.flow .inner figure:nth-of-type(2){
aspect-ratio: 328 / 228;
top: initial;
left: initial;
width: 80%;
height: auto;
transform: rotate(-7deg);
margin-left: auto;
margin-bottom: 10vw;
}
.flow .inner figure:nth-of-type(2)::after{
aspect-ratio: 328 / 228;
top: 0;
left: 0;
width: 100%;
height: auto;
transform: rotate(9.5deg);
}
.flow .inner figure:nth-of-type(3){
aspect-ratio: 236 / 164;
top: initial;
left: initial;
width: 60%;
height: auto;
transform: rotate(16deg);
margin-bottom: 12vw;
}
.flow .inner figure:nth-of-type(3)::after{
aspect-ratio: 236 / 164;
top: 16px;
left: 20px;
width: 100%;
height: auto;
transform: rotate(-7.3deg);
}
.flow .inner figure:nth-of-type(4){
aspect-ratio: 194 / 135;
top: initial;
left: initial;
width: 60%;
height: auto;
transform: rotate(-13.4deg);
margin-left: auto;
margin-right: 4vw;
}
.flow .inner figure:nth-of-type(4)::after{
aspect-ratio: 194 / 135;
top: 12px;
left: 14px;
width: 100%;
height: auto;
transform: rotate(0);
}
.flow .inner .btn01 a{
width: 80%;
margin:30px auto 0;
}
}


/*=============================== case ================================*/
.case{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
z-index: 1;
}
.case .inner{
position: relative;
width: 1200px;
margin: -430px auto 0;
border-radius: 70px;
padding: 78px;
background: #50C878 url(../images/parts-case.svg) no-repeat top right 182px;
}
.case .inner .wrap{
display: flex;
gap: 36px;
margin-bottom: 60px;
}
.case .inner h2 a{
text-decoration: none;
transition: 0.3s;
}
.case .inner h2 a:hover{
opacity: 0.7;
}
.case .inner h2 a > span:nth-child(1){
display: block;
color:#fff;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1.28px;
margin-bottom: 16px;
}
.case .inner h2 a > span:nth-child(2){
color: #fff;
font-size: 4rem;
font-weight: 600;
letter-spacing: 3.2px;
}
.case .inner .wrap .lead{
color: #FFF;
font-size: 1.7rem;
font-weight: 600;
letter-spacing: 1.36px;
padding-top: 44px;
}
.case .inner ul{
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.case .inner ul li{
border-radius: 20px;
background: #FFF;
width: calc((100% - 72px) / 4);
display: flex;
flex-wrap: wrap;
filter: drop-shadow(5px 5px 0.5px rgba(0, 0, 0, 0.25));
transform: translateZ(0);
}
.case .inner ul li figure{
width: 100%;
height:56%;
border-radius: 20px 20px 0 0;
overflow: hidden;
}
.case .inner ul li figure img{
object-fit: cover;
width: 100%;
height:100%;
transition: 0.3s;
}
.case .inner ul li a:hover img{
transform: scale(1.05);
}
.case .inner ul li p{
width: 100%;
height:44%;
color: var(--c-primary);
font-size: 1.7rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: 1.36px;
padding: 20px 24px 24px;
}
.case .inner ul li a{
text-decoration: none;
}
.case .inner ul li p span{
display: -webkit-box;
width: 100%;
overflow: hidden;
-webkit-box-orient: vertical;
line-clamp: 3;
-webkit-line-clamp: 3;
}
.case .inner .btn01 a{
position: absolute;
bottom:-28px;
left: 50%;
transform: translateX(-50%);
width: 180px;
}
@media  only screen and (max-width: 768px) {
.case{
width: 100%;
max-width:  100%;
padding: 60px 20px 0;
}
.case .inner{
width: 100%;
border-radius: 20px;
margin: auto ;
padding: 40px 20px;
background: #50C878 url(../images/parts-case.svg) no-repeat top right 182px;
}
.case .inner .wrap{
display: block;
margin-bottom: 40px;
}
.case .inner h2 {
margin-bottom: 20px;
}
.case .inner h2 a > span:nth-child(1){
font-size: 1.4rem;
margin-bottom: 8px;
}
.case .inner h2 a > span:nth-child(2){
font-size: 3rem;
}
.case .inner .wrap .lead{
font-size: 1.4rem;
line-height: 1.8;
padding-top: 0;
}
.case .inner ul{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.case .inner ul li{
display: block;
border-radius: 10px;
width: calc((100% - 8px) / 2);
filter: drop-shadow(3px 3px 0.5px rgba(0, 0, 0, 0.25));
}
.case .inner ul li figure{
border-radius: 10px 10px 0 0;
}
.case .inner ul li p{
font-size: 1.2rem;
padding: 10px 12px 12px;
}
.case .inner .btn01 a{
position: initial;
transform: initial;
width:90%;
}
}

/*=============================== faq ================================*/
.faq{
position:relative;
width: 100%;
max-width: 1920px;
height: 1466px;
margin: -100px auto 0;
padding: 400px 0 0;
background: url(../images/bg-faq.png) no-repeat top center;
}
.faq .inner{
width: 1200px;
margin: auto;
}
.faq .inner .wrap{
display: flex;
gap: 36px;
margin-bottom: 60px;
}
.faq .inner h2 a{
text-decoration: none;
transition: 0.3s;
}
.faq .inner h2 a:hover{
opacity: 0.7;
}
.faq .inner h2 a > span:nth-child(1){
display: block;
color:#50C878;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1.28px;
margin-bottom: 16px;
}
.faq .inner h2 a > span:nth-child(2){
color: var(--c-primary);
font-size: 4rem;
font-weight: 600;
letter-spacing: 3.2px;
}
.faq .inner h2 a > span:nth-child(2) span{
color:#50C878;
}
.faq .inner .wrap .lead{
font-size: 1.7rem;
font-weight: 600;
letter-spacing: 1.36px;
padding-top: 44px;
}
.faq .inner ul{
display: flex;
gap:54px;
}
.faq .inner ul li{
position: relative;
width: calc((100% - (54px * 2)) / 3);
height: 448px;
border-radius: 30px;
transition: 0.3s;
}
.faq .inner ul li::after{
position: absolute;
right: 38px;
bottom: 21px;
content: "";
width: 40px;
height: 40px;
background: url(../images/icon/icon-arrow03.svg) no-repeat;
}
.faq .inner ul li:hover{
opacity: 0.7;
}
.faq .inner ul li a{
display: block;
height: 448px;
text-decoration: none;
}
.faq .inner ul li a:hover{
color: var(--c-primary);
}
.faq .inner ul li p{
position: absolute;
left: 0;
bottom: -1px;
width: 250px;
height: 80px;
border-radius: 0 30px 0 0;
background: #fff;
padding-top: 16px;
}
.faq .inner ul li p span:nth-child(1){
display: block;
color: #50C878;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.96px;
margin-bottom: 8px;
}
.faq .inner ul li p span:nth-child(2){
font-size: 2.3rem;
font-weight: 700;
letter-spacing: 2.4px;
}
.faq .inner ul li:nth-child(1){
background:url(../images/parts-faq01.svg) no-repeat bottom 70px left, linear-gradient(29deg, #FFF -16.29%, #CCEFD8 11.97%, #89DAA4 52.74%, #5FCD84 82.35%, #50C878 97.49%);
}
.faq .inner ul li:nth-child(2){
margin-top: 70px;
background:url(../images/parts-faq02.svg) no-repeat bottom 120px left, linear-gradient(29deg, #FFF -16.29%, #CCEFD8 11.97%, #89DAA4 52.74%, #5FCD84 82.35%, #50C878 97.49%);
}
.faq .inner ul li:nth-child(3){
background:url(../images/parts-faq03.svg) no-repeat bottom 120px left, linear-gradient(29deg, #FFF -16.29%, #CCEFD8 11.97%, #89DAA4 52.74%, #5FCD84 82.35%, #50C878 97.49%);
}
@media  only screen and (max-width: 768px) {
.faq{
position:relative;
width: 100%;
max-width: 100%;
height: auto;
margin:auto;
padding: 120px 0 60px;
background: url(../images/bg-faq-sp.png) no-repeat top 2vw center;
background-size: 100% auto;
}
.faq .inner{
width:100%;
padding: 0 20px;
}
.faq .inner .wrap{
display: block;
margin-bottom: 40px;
}
.faq .inner h2{
margin-bottom: 20px;
}
.faq .inner h2 a > span:nth-child(1){
font-size: 1.4rem;
margin-bottom: 8px;
}
.faq .inner h2 a > span:nth-child(2){
font-size: 3rem;
}
.faq .inner .wrap .lead{
font-size: 1.4rem;
padding-top: 0;
}
.faq .inner ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
width: 100%;
}
.faq .inner ul li{
aspect-ratio:5/6;
position: relative;
width: calc((100% - 8px) / 2);
height: 52vw;
border-radius: 10px;
}
.faq .inner ul li::after{
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
bottom: initial;
content: "";
width: 24px;
height: 24px;
background: url(../images/icon/icon-arrow03.svg) no-repeat;
background-size: 100% auto;
}
.faq .inner ul li a{
display: block;
height: 100%;
text-decoration: none;
}
.faq .inner ul li p{
position: absolute;
left: 0;
bottom: -1px;
width: 90%;
height: auto;
border-radius: 0 15px 0 0;
padding: 2vw 0 2vw 3vw
}
.faq .inner ul li p span:nth-child(1){
font-size: 3vw;
margin-bottom: 1vw;
}
.faq .inner ul li p span:nth-child(2){
font-size: 3.5vw;
letter-spacing: 1px;
}
.faq .inner ul li:nth-child(1){
background:url(../images/parts-faq01.svg) no-repeat bottom 4vw left, linear-gradient(29deg, #FFF -16.29%, #CCEFD8 11.97%, #89DAA4 52.74%, #5FCD84 82.35%, #50C878 97.49%);
background-size: 70% auto,100% auto;
}
.faq .inner ul li:nth-child(2){
margin-top: 0;
background:url(../images/parts-faq02.svg) no-repeat bottom 14vw left, linear-gradient(29deg, #FFF -16.29%, #CCEFD8 11.97%, #89DAA4 52.74%, #5FCD84 82.35%, #50C878 97.49%);
background-size: 70% auto,100% auto;
}
.faq .inner ul li:nth-child(3){
background:url(../images/parts-faq03.svg) no-repeat bottom 17vw left, linear-gradient(29deg, #FFF -16.29%, #CCEFD8 11.97%, #89DAA4 52.74%, #5FCD84 82.35%, #50C878 97.49%);
background-size: 75% auto,100% auto;
}

}