@charset "UTF-8";

/* common */
html { font-family: 'Yu Gothic', sans-serif; color: #2F2F2F; font-size: 1rem; }
main { width: 100%; }
textarea { overflow: hidden; }

/* fv */
.fv__container { position: relative; width: 100%; }
.fv-text__container { 
    position: absolute; 
    text-align: left; 
    left: 15%;
    top: 43%;
    transform: translateY(-50%);
}
.fv-text__container .line1__text { 
    letter-spacing: 0.2em; 
    line-height: 1.2;
    text-align: left;
    font-size: clamp(1.75rem, 0.313rem + 3.59vw, 4.625rem);
    font-family: 'Zen Maru Gothic', sans-serif;
    color: #FE6730; 
}
.fv-text__container .line2__text {
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-align: left;
    font-size: clamp(1.875rem, 0.313rem + 3.91vw, 5rem); 
    font-family: 'Zen Maru Gothic', sans-serif;
}
.fv-text__container .line3__text { 
    letter-spacing: 0.1em;
    text-align: left;
    font-size: clamp(1rem, 0.375rem + 1.56vw, 2.25rem); 
    font-family: 'Roboto', sans-serif;
    color: #FE6730; 
}
@media screen and (max-width: 640px) {
    .fv-text__container { left: 10%; top: 20%; } 
    .fv-text__container .line1__text { font-size: 2rem; line-height: 1.3; }
    .fv-text__container .line2__text { font-size: 2.125rem; }
    .fv-text__container .line3__text { font-size: 1.375rem; }
}

/* LP　＝共通＝ */
/* font */
.ibm-plex-sans-jp-regular {
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
}
.ibm-plex-sans-jp-medium {
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 500;
font-style: normal;
}
.ibm-plex-sans-jp-semibold {
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 600;
font-style: normal;
}
.ibm-plex-sans-jp-bold {
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 700;
font-style: normal;
}

.zen-maru-gothic{
font-family: 'Zen Maru Gothic', sans-serif;
font-style: normal;
}

/* link */
a,a:link{display: block;}

/* margin padding */
.--marbtmnon {margin-bottom: 0px !important;}
.--marbtm8 {margin-bottom: 8px !important;}
.--marbtm16 {margin-bottom: 16px !important;}
.--marbtm20 {margin-bottom: 20px !important;}
.--marbtm24 {margin-bottom: 24px !important;}
.--marbtm40 {margin-bottom: 40px !important;}
.--marbtm60 {margin-bottom: 60px !important;}
.--marbtm80 {margin-bottom: 80px !important;}
.--marbtm120 {margin-bottom: 120px !important;}
.--marbtm240 {margin-bottom: 240px !important;}

/* p */
p, p span {font-size: 16px;}
.--size1616{font-size: 16px;}
.--size1618{font-size: 18px;}
.--size1620, .--size2020{font-size: 20px;}
.--size2024, .--size1624, .--size2424{font-size: 24px;}
.--size2828{font-size: 28px;}
.--size2430, .--size3030{font-size: 30px;}
.--size2432{font-size: 32px;}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    p, p span {font-size: 16px;}
    .--size1616{font-size: 16px;}
    .--size1618{font-size: 18px;}
    .--size1620, .--size2020{font-size: 20px;}
    .--size2024, .--size1624, .--size2424{font-size: 24px;}
    .--size2828{font-size: 28px;}
    .--size2430, .--size3030{font-size: 30px;}
    .--size2432{font-size: 32px;}
}
@media screen and (max-width: 767px) {
    p, p span {font-size: 15px;}
    .--size1616{font-size: 16px;}
    .--size1620, .--size1624{font-size: 16px;}
    .--size1618{font-size: 18px;}
    .--size2020, .--size2024{font-size: 20px;}
     .--size2424, .--size2432, .--size2430{font-size: 24px;}
    .--size2828{font-size: 28px;}
    .--size3030{font-size: 30px;}
}

/* align */
.--align-left {text-align: left;}
.--align-right {text-align: right;}
.--align-center {text-align: center;}

/* font color */
.--color-red {color: #FF3737;}
.--color-orange{color: #FFBC51;}
.--color-blue{color: #0408E2;}

.--weight6{
font-weight: 600;
font-style: normal;
}
.--weight7{
font-weight: 700;
font-style: normal;
}
.--weight9{
font-weight: 900;
font-style: normal;
}

.--line-height10{
line-height: 1;
}
.--line-height16{
line-height: 1.6;
}
.--line-height20{
line-height: 2;
}

/* heading */
.index {margin-bottom: 48px;}

/* marker */
.--marker{
display: inline;
line-height: 1 !important;
}
.--line-yellow{background: linear-gradient(transparent 60%, #FEF2D0 30%);}
.--line-orange{background: linear-gradient(transparent 60%, #FFEEE0 30%);}
.--line-orange2{background: linear-gradient(transparent 60%, #FFDFA3 30%);}

.--line-nami{
position: relative;
z-index: 1;
display: inline-block;
}
.--orange-nami1::before{
content: "";
display: inline-block;
width: 100%;
height: 56px;
background: url(../../images/contact/lp/marker_orange1.webp?1);
background-position: center 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 30%;
z-index: -1;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        left: 0;
    }
    @media screen and (max-width: 767px){
        left: 0;
    }
}
.--orange-nami1.--en::before{
content: "";
display: inline-block;
width: 100%;
height: 56px;
background: url(../../images/contact/lp/marker_orange1.webp?1);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.--orange-nami1.--zh-CN::before{
content: "";
display: inline-block;
width: 100%;
height: 30px;
background: url(../../images/contact/lp/marker_orange1.webp?1);
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.--orange-nami1.--vi::before{
content: "";
display: inline-block;
width: 100%;
height: 56px;
background: url(../../images/contact/lp/marker_orange1.webp?1);
background-position: center 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.--orange-nami1.--short::before{
content: "";
display: inline-block;
width: 183px;
height: 29px;
background: url(../../images/contact/lp/marker_orange1-short.webp);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
/*top: 30%;*/
z-index: -1;
}
.--orange-nami1.--en.--short::before{
content: "";
display: inline-block;
width: 83px;
height: 29px;
background: url(../../images/contact/lp/marker_orange1-short.webp);
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: -10%;
z-index: -1;
}
.--orange-nami2.--nami::before{
content: "";
display: inline-block;
width: 100%;
height: 44px;
background: url(../../images/contact/lp/marker_orange2.webp?1);
background-position: center 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 30%;
z-index: -1;
}
.--pink-nami.--ribon::before{
content: "";
display: inline-block;
width: 175px;
height: 39px;
background: url(../../images/contact/lp/marker_pink.webp);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 5%;
top: 10%;
z-index: -1;
}
.--blue-nami::before{
content: "";
display: inline-block;
width: 203px;
height: 26px;
background: url(../../images/contact/lp/marker_blue.webp?1);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: -5%;
top: 40%;
z-index: -1;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        width: 160px;
    }
    @media screen and (max-width: 767px){
        width: 160px;
    }
}
.--blue-nami.--en::before{
content: "";
display: inline-block;
width: 100%;
height: 50px;
background: url(../../images/contact/lp/marker_blue.webp?1);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 35%;
z-index: -1;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        width: 200px;
    }
    @media screen and (max-width: 767px){
        width: 200px;
    }
}
.--blue-nami.--zh-CN::before{
content: "";
display: inline-block;
width: 100%;
height: 50px;
background: url(../../images/contact/lp/marker_blue.webp?1);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 35%;
z-index: -1;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        width: 160px;
    }
    @media screen and (max-width: 767px){
        width: 90px;
    }
}
.--blue-nami.--vi::before{
content: "";
display: inline-block;
width: 100%;
height: 50px;
background: url(../../images/contact/lp/marker_blue.webp?1);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 35%;
z-index: -1;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        width: 180px;
    }
    @media screen and (max-width: 767px){
        width: 180px;
    }
}

/* text block */
.--line-block, .--first-line, .--second-line{display: block;}

/* block or none*/
.pc_show{display: block !important;}
.pc_none,.tab_show,.sp_show{display: none;}
@media screen and (min-width:821px) and (max-width:1024px){
    .tab_show{display: block !important;}
    .tab_none{display: none !important;}
}
@media screen and (min-width:768px) and (max-width:820px){
    .tab_show{display: block !important;}
    .tab_none{display: none !important;}
}
@media screen and (max-width: 640px) {
    .sp_show{display: block;}
    .sp_none{display: none;}
}

#lp{
margin: 0 auto;
font-family: 'Zen Maru Gothic', sans-serif;
font-size: clamp(1.375rem, 1.155rem + 0.94vw, 2rem);
text-align: center;
}

.--lpBox--max{
width: 100%;
margin: 0 auto;
position: relative;
}
.--lpBox{
width: 1000px;
height: auto;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
position: relative;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        width: auto;
        padding: 0 16px;
    }
    @media screen and (max-width: 767px){
        width: auto;
        padding: 0 16px;
    }
}
.--container-padding{
padding: 80px 0;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        padding: 80px 30px;
    }
    @media screen and (max-width: 767px){
        padding: 80px 16px;
    }
}
.--container-padding--btmnone{
padding: 80px 0 40px;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        padding: 80px 30px 40px;
    }
    @media screen and (max-width: 767px){
        padding: 80px 16px 0;
    }
}
.--container-padding--topnone{
padding: 80px 0 40px;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        padding: 24px 30px 40px;
    }
    @media screen and (max-width: 767px){
        padding: 24px 16px 0;
    }
}

.sub__container{}
.sub__container.--bg-point-dot{
background: url(../../images/contact/lp/decoration_dot_pink.webp), url(../../images/contact/lp/decoration_dot_pink.webp);
background-position: left 40px bottom 115px, right 40px top 95px;
background-repeat: no-repeat;
background-size: 173px;
    @media screen and (max-width: 767px){
        background: none;
    }
}
.sub__container img{
margin: 0 auto 48px;
}
.sub__container p.--decoration-mark-line{
display: inline-block;
position: relative;
}
.sub__container p.--decoration-mark-line::after{
content: "";
display: inline-block;
width: 25px;
height: 22px;
background: url(../../images/contact/lp/decoration_mark_line.webp);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -20px;
right: -10px;
}

.reason__container{
background: #FFF3E9;
}
.reason__List{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 10px;
justify-content: center;
align-items: stretch;
width: 1000px;
margin: 96px auto 0;
padding: 0;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        width: auto;
    }
    @media screen and (min-width: 640px) and (max-width: 767px){
        grid-template-columns: none;
        grid-template-rows: repeat(3, auto);
        row-gap: 36px;
        width: 70%;
        padding: 0 32px;
    }
    @media screen and (max-width: 639px){
        grid-template-columns: none;
        grid-template-rows: repeat(3, auto);
        row-gap: 36px;
        width: auto;
        padding: 0 24px;
    }
}
.reason__List li{
padding: 24px 20px;
background: #fff;
border-radius: 18px;
text-align: center;
position: relative;
z-index: 50;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        padding: 24px;
    }
    @media screen and (max-width: 767px){
        margin-bottom: 72px;
        &:last-child{
            margin-bottom: 0;
        }
    }
}
.reason__List li h3{
display: inline-block;
position: absolute;
left: calc(50% - 71px);
top: -50px;
z-index: -10;
}
.reason__List li h4,
.reason__List li h5{
margin-bottom: 16px;
}
.reason__List li h4 span{
font-size: 24px;
line-height: 1.4;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 16px;
    }
    @media screen and (max-width: 767px){
        font-size: 20px;
    }
}
.reason__List li h5 span{
font-size: 14px;
line-height: 1.4;
}
.reason__List li .catch{
margin-bottom: 16px;
line-height: 1;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        font-size: 14px;
    }
}
.reason__List li img.--reason-img{
width: 100%;
margin: 0 auto 16px;
}
.reason__List li img.--mark-align-center{
margin: 0 auto 16px;
}
.reason__List li .cmnt{
margin-bottom: 4px;
padding: 0 4px;
text-align: left;
}
.reason__List li .caution{
font-size: 12px;
}


.support__container{
text-align: left;
position: relative;
}
.support__container p.maincatch{
margin-bottom: 18px;
padding-left: 47%;
    @media screen and (min-width: 768px) and (max-width:1023px){
        padding-left: 37%;
    }
    @media screen and (max-width: 767px){
        padding: 0;
        text-align: center;
    }
}
.support__container .contents{
margin-bottom: 18px;
padding-left: 47%;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        padding-left: 37%;
    }
    @media screen and (max-width: 767px){
        padding-left: 37%;
    }
}
.support__container .contents .support__mark{
margin-bottom: 18px;
}
.support__container .--decoration_animation{
width: 261px;
animation: rotation 10s linear infinite;
position: absolute;
left: 17%;
top: 25%;
    @media screen and (min-width: 768px) and (max-width:1023px){
        width: 220px;
        left: 7%;
    }
    @media screen and (max-width: 767px){
        width: 221px;
        left: calc(5% - 110px);
        top: 40%;
    }
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

.problems__container{
background: url(../../images/contact/lp/decoration_dot_blue2.webp), url(../../images/contact/lp/decoration_dot_blue1.webp);
background-position: left 0px top 95px, right 40px bottom 95px;
background-repeat: no-repeat;
background-size: 173px;
    @media screen and (max-width: 767px){
        background: none;
    }
}
.problems__container h2.--decoration-mark-problems,
.problems__container .--decoration-mark-kira{
display: inline-block;
position: relative;
}
.problems__container h2.--decoration-mark-problems::after{
content: "";
display: inline-block;
width: 41px;
height: 57px;
background: url(../../images/contact/lp/decoration_mark_problems.webp);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -25%;
right: -20%;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        right: -15%;
    }
    @media screen and (max-width: 767px){
        right: -40%;
    }
}
.problems__container .--decoration-mark-kira{
display: grid;
grid-template-columns: auto auto auto;
grid-auto-columns: 8px;
justify-content: center;
align-items: center;
font-size: 30px;
}
.problems__container .--decoration-mark-kira::before,
.problems__container .--decoration-mark-kira::after{
content: "";
display: inline-block;
width: 42px;
height: 42px;
background: url(../../images/contact/lp/decoration_mark_kirakira.webp);
background-repeat: no-repeat;
background-size: contain;
}
.problems__container .--decoration-mark-kira::before{
transform: scale(-1, 1);
}
.problems__List{
width: 100%;
max-width: 705px;
height: 300px;
margin: 0 auto 20px;
position: relative;
    @media screen and (min-width: 768px) and (max-width:1023px){
        max-width: 90%;
        height: 450px;
    }
    @media screen and (max-width: 767px){
        max-width: 100%;
        height: 390px;
    }
}
.problems__List li{
position: absolute;
}
.problems__List li.--liArea-A{
left: 0;
top: 0;
z-index: 5;
    @media screen and (min-width: 768px) and (max-width:1023px){
        left: 10%;
        top: 40%;
    }
    @media screen and (max-width: 767px){
        left: 0;
        top: 40%;
    }
}
.problems__List li.--liArea-B{
left: calc(50% - 129px);
top: 0;
    @media screen and (max-width: 767px){
        left: calc(50% - 100px);
    }
}
.problems__List li.--liArea-C{
right: 0;
top: 0;
z-index: 6;
    @media screen and (min-width: 768px) and (max-width:1023px){
        right: 10%;
        top: 40%;
    }
    @media screen and (max-width: 767px){
        right: 0;
        top: 40%;
    }
}
.problems__List li img{
width: 100%;
max-width: 258px;
    @media screen and (max-width: 767px){
        width: 100%;
        max-width: 200px;
    }
}
.problems__List::after{
content: "";
display: block;
background: url(../../images/contact/lp/problems_arrow.webp);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
width: 22px;
height: 19px;
position: absolute;
left: calc(50% - 11px);
bottom: 0;
}

.voice__container{}
.voice__container h2 span{
font-size: 30px;
}
.voice__List{
display: grid;
grid-template-columns: auto auto;
column-gap: 86px;
justify-content: center;
align-items: center;
margin: 0 auto;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 86px;
        width: 50%;
    }
    @media screen and (min-width: 740px) and (max-width:767px){
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 86px;
        width: 60%;
    }
    @media screen and (max-width: 739px){
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 86px;
        width: 80%;
    }
}
.voice__List li{
display: grid;
grid-template-columns: minmax(auto,101px) minmax(auto,218px);
column-gap: 20px;
justify-content: center;
align-items: center;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        &.--first{
        grid-template-columns: minmax(auto,101px) minmax(auto,1fr);
        column-gap: 20px;
        }
        &.--second{
        grid-template-columns: minmax(auto,1fr) minmax(auto,101px);
        column-gap: 20px;
            .person-data{
            order: 2;
            }
            .person-cmnt{
            order: 1;
            }
        }
    }
    @media screen and (max-width: 767px){
        &.--first{
        grid-template-columns: minmax(101px,30%) minmax(auto,1fr);
        column-gap: 8%;
        }
        &.--second{
        grid-template-columns: minmax(auto,1fr) minmax(101px,30%);
        column-gap: 8%;
            .person-data{
            order: 2;
            }
            .person-cmnt{
            order: 1;
            }
        }
    }
}
.voice__List li .person-star{
margin-bottom: 12px;
font-size: 14px;
}
.voice__List li .person-cmnt{
position: relative;
display: inline-block;
padding: 10px 17px;
background: #FDF6E2;
border-radius: 10px;
text-align: left;
}
.voice__List li.--first .person-cmnt::before {
content: "";
display: inline-block;
position: absolute;
top: 25%;
left: -10%;
margin-top: -15px;
border: 10px solid transparent;
border-right: 15px solid #FDF6E2;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        top: 25%;
        left: -7%;
    }    
    @media screen and (min-width: 740px) and (max-width:767px){
        top: 25%;
        left: -9%;
    }
    @media screen and (max-width: 739px){
        top: 25%;
        left: -13%;
    }
}

.voice__List li.--second .person-cmnt::before{
content: "";
display: inline-block;
position: absolute;
top: 25%;
left: -10%;
margin-top: -15px;
border: 10px solid transparent;
border-right: 15px solid #FDF6E2;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        display: none;
    }
    @media screen and (max-width: 767px){
        display: none;
    }
}
.voice__List li.--second .person-cmnt::after{
display: none;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        content: "";
        display: inline-block;
        position: absolute;
        top: 25%;
        right: -7%;
        margin-top: -15px;
        border: 10px solid transparent;
        border-left: 15px solid #FDF6E2;
    }
    @media screen and (min-width: 740px) and (max-width:767px){
        content: "";
        display: inline-block;
        position: absolute;
        top: 25%;
        right: -9%;
        margin-top: -15px;
        border: 10px solid transparent;
        border-left: 15px solid #FDF6E2;
    }
    @media screen and (max-width: 739px){
        content: "";
        display: inline-block;
        position: absolute;
        top: 25%;
        right: -13%;
        margin-top: -15px;
        border: 10px solid transparent;
        border-left: 15px solid #FDF6E2;
    }
}


.step-support__container{}
.step-support__container h2 .--first-line{
margin-bottom: 8px;
}
.step-support__container h2 .--line-orange-nami-2::before{
width: 292px;
height: 44px;
left: 0;
top: 10%;
}
.step-support__List .button__container.--nofixed .step-support__button-catch{
margin-bottom: 8px;
}
.step-support__container h2 .--decoration-mark-diagonalline,
.step-support__List .button__container.--nofixed .step-support__button-catch.--decoration-mark-diagonalline{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 16px;
justify-content: center;
align-items: center;
    @media screen and (min-width: 768px) and (max-width: 1023px){
    column-gap: 5px;
    }
}
.step-support__container h2 .--decoration-mark-diagonalline::before,
.step-support__container h2 .--decoration-mark-diagonalline::after{
content: "";
display: inline-block;
width: 2px;
height: 16px;
background: #464E53;
border-radius: 100px;
}
.step-support__List .button__container.--nofixed .step-support__button-catch.--decoration-mark-diagonalline::before,
.step-support__List .button__container.--nofixed .step-support__button-catch.--decoration-mark-diagonalline::after{
content: "";
display: inline-block;
width: 2px;
height: 16px;
background: #FF3737;
border-radius: 100px;
}
.step-support__container h2 .--decoration-mark-diagonalline::before,
.step-support__List .button__container.--nofixed .step-support__button-catch.--decoration-mark-diagonalline::before{
transform: rotate(-35deg);
}
.step-support__container h2 .--decoration-mark-diagonalline::after,
.step-support__List .button__container.--nofixed .step-support__button-catch.--decoration-mark-diagonalline::after{
transform: rotate(35deg);
}

.step-support__List{
display: grid;
grid-template-columns: repeat(3,minmax(auto,300px));
column-gap: 55px;
justify-content: center;
align-items: stretch;
padding: 0 16px;
    @media screen and (max-width: 767px){
        width: auto;
        max-width: 500px;
        margin: 0 auto;
        padding: 0 16px;
        grid-template-columns: none;
        grid-template-rows: repeat(3,auto);
        row-gap: 64px;
    }
}
.step-support__List li{
padding: 24px 16px 40px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 3px 3px rgba(179, 112, 5, 0.10);
position: relative;
}
.step-support__List li h3{
font-size: 24px;
color: #FFCF85;
}
.step-support__List li .--step-support-img{
width: 100%;
}
.step-support__List li .cmnt{
text-align: left;
}
.step-support__List li::after{
content: "";
display: inline-block;
width: 28px;
height: 32px;
background: url(../../images/contact/lp/support_arrow.webp);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: -42px;
top: calc(50% - 14px);
transform: rotate(-90deg);
    @media screen and (max-width: 767px){
        margin-top: 20px;
        right: calc(50% - 14px);
        top: calc(100%);
        bottom: 0;
        transform: rotate(360deg);
    }
}
.step-support__List li:nth-child(3)::after{
display: none;
}



.fandq__container{
padding: 80px 0;
background: #FFF3E9;
}
.fandq__container h2 span{
font-size: 30px;
}
.fandq__container .fandq__List{
width: 90%;
max-width: 600px;
margin: 0 auto 15px;
border-radius: 5px;
}
.fandq__container .fandq__List.details {
background: #fff;
border-radius: 5px;
box-shadow: 1px 1px 1px #60212125;
}
.fandq__container .fandq__List.details .details-summary {
position: relative;
display: block;
padding: 32px;
background: #fff;
border-radius: 5px;
font-size: 16px;
text-align: left;
&:hover {
cursor: pointer;
opacity: 0.8;
}
.btn {
position: absolute;
top: 37%;
right: 5%;
width: 16px;
height: 16px;
transform-origin: center center;
transition-duration: 0.2s;
&::before,
&::after {
content: "";
background: #5659FF;
border-radius: 10px;
width: 16px;
height: 2px;
position: absolute;
top: 7px;
right: 0;
transform-origin: center center;
}
&::before {
width: 2px;
height: 16px;
top: 0;
right: 7px;
}
}
&.is-active {
&::after{
content: "";
display: block;
width: 100%;
margin: 0 auto;
}
.btn {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
&::before {
content: none;
}	
}
}
}
.details-summary::-webkit-details-marker {
display: none;
}
.details-content {
padding: 0 32px 32px;
p {
margin: 0 0 20px;
font-size: 14px;
text-align: left;
&:last-of-type {
margin: 0 0 0;
padding-top: 32px;
border-top: 1px solid #F0F0F0;
}
}
}


.guidance__container{
width: 100%;
max-width: 574px;
padding: 80px 0;
text-align: left;
    @media screen and (max-width: 767px){
        width: auto;
        padding-left: 30px;
        padding-right: 30px;
    }
    &.--en{
    max-width: 664px;
    }
    &.--vi{
    max-width: 690px;
    }
}
.guidance__container .box.--box-first{
height: 256px;
margin: 0 auto 40px;
position: relative;
}
.guidance__container .box.--box-first .maincatch{
width: 68%;
padding-top: 32px;
}
.guidance__container.--zh-CN .box.--box-first .maincatch,
.guidance__container.--vi .box.--box-first .maincatch{
width: 80%;
padding-top: 32px;
}

.guidance__container .box.--box-first .maincatch .caution{
    text-align: right;
    @media screen and (max-width: 767px){
        text-align: left;
    }
}

.guidance__container .box.--box-second{
width: 100%;
max-width: 422px;
height: 128px;
margin: 0 auto;
position: relative;
    @media screen and (max-width: 767px){
        height: 200px;
    }
}
.guidance__container.--en .box.--box-second,
.guidance__container.--vi .box.--box-second{
width: 100%;
max-width: 522px;
height: 128px;
margin: 0 auto;
position: relative;
}
.guidance__container .box.--box-second .sub-catch{
display: inline-block;
width: auto;
margin: 0 auto;
    @media screen and (max-width: 767px){
        position: absolute;
        left: 10%;
        top: 60px;
    }
span{
margin-bottom: 10px;
}
}
.guidance__container.--vi .box.--box-second .sub-catch{
    @media screen and (max-width: 767px){
        position: absolute;
        left: 5%;
        top: 60px;
    }
span{
margin-bottom: 10px;
}
}
.guidance__container .box img.--guidence-img{
position: absolute;
right: 5%;
top: 0;
    @media screen and (min-width: 768px) and (max-width: 1023px){
        width: 200px;
        max-width: 80%;
    }
    @media screen and (max-width: 767px){
        width: 150px;
        max-width: 80%;
        right: 0;
        top: 15%;
    }
}
.guidance__container .box img.--guidence-img2{
width: 151px;
position: absolute;
right: 5%;
top: 0;
    @media screen and (max-width: 767px){
        width: 36%;
        right: 10%;
        top: 0%;
        z-index: -1;
    }
}
.guidance__container.--en .box img.--guidence-img2,
.guidance__container.--zh-CN .box img.--guidence-img2{
    @media screen and (max-width: 767px){
        width: 36%;
        right: 0%;
        top: 0%;
        z-index: -1;
    }
}
.guidance__container.--vi .box img.--guidence-img2{
    @media screen and (max-width: 767px){
        width: 36%;
        right: 0%;
        top: -20%;
        z-index: -1;
    }
}


/* top button */
.back-to-top {
position: fixed;
bottom: 90px;
right: 20px;
width: 60px;
height: 60px;
background: #FFB47660;
text-align: center;
line-height: 50px;  /* 要素の高さと合わせることで縦中央揃え */
font-size: 24px;
border-radius: 50%; /* 円形にする */
opacity: 0.7;
transition: opacity 0.3s;
display: none; /* 初期状態は非表示 */
z-index: 800;
    @media screen and (min-width: 768px) and (max-width:1023px){
        bottom: 240px;
    }
.arrow {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
top: 25%;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
left: calc(50% - 2px);
width: 4px;
height: 24px;
border-radius: 9999px;
background-color: #fff;
transform-origin: 50% 2px;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
&:hover{
opacity: 1;
}
}


/* fixed button */
.button__container{
display: grid;
grid-template-rows: auto auto;
row-gap: 0;
width: /*220px*/auto;
margin: 0 auto 48px;
&.--fixed{
display: grid;
grid-template-rows: auto auto;
row-gap: 0;
width: auto;
margin: 0 auto;
padding-bottom: 16px;
position: sticky;
top: 0;
left: calc(50% - 145px);
z-index: 100;
}
&.--nofixed{
display: grid;
grid-template-rows: auto auto;
row-gap: 0;
width: auto;
margin: 0 auto;
padding-bottom: 16px;
position: sticky;
top: 0;
left: calc(50% - 145px);
z-index: 100;
}
}
.button__container img{
margin: 0 auto;
&.sp-nemu{
    width: 80%;
}
}
.button__container a,
.button__container a:link{
display: block;
margin: 0 auto;
}
.button__container a:hover{
opacity: 0.8;
box-shadow: 0px 0px 0px 0px;
}
.button__container .--button.--cta,
.button__container .--button.--normal,
.cta-button__container .--button{
filter: drop-shadow(0px 4px 0px rgba(47, 47, 47, 0.15));
margin: 0 auto;
}




/* フォーム */
.contact__wrapper {
    background-image: url(../../images/contact/main-bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 3.5rem;
}
.contact__wrapper::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        #2f2f2f 0px,
        #2f2f2f 8px,   /* 線の長さ */
        transparent 8px,
        transparent 16px  /* 間隔含めた合計 */
    )
}
    @media screen and (max-width: 820px) {
        .contact__wrapper { 
            background-position: 0% 0%;
            background-image: url(../../images/contact/main-bg-sp.webp); 
            padding-bottom: 1.5rem; 
        } 
}

.contact__container {
    width: 900px;
    margin: 0 auto;
    @media screen and (min-width: 641px) and (max-width:1023px) {
        width: 90%;
    }
    @media screen and (max-width: 642px){
        width: 100%;
    }
}

.title__container {
    position: relative;
    padding: 5rem 0;
    /*padding-bottom: 12.5rem;*/
    font-family: 'Montserrat', sans-serif;
}
.line1__text,
.line2__text {
    display: block;
    text-align: center;
}
.title__container .line1__text {
    margin-left: 10px;
    font-size: 1.25rem;
    letter-spacing: 0.5em;
    font-weight: bold;
}
.title__container .line2__text {
    position: relative;
    font-size: 2.375rem;
    line-height: 1;
    letter-spacing: 0.03em;
    font-weight: bold;
    color: #3178FF;
}
@media screen and (max-width: 820px) {
    .title__container { padding-bottom: 6rem; }
    .title__container .line1__text { margin-bottom: 3px; font-size: 1rem; letter-spacing: 0.9em; }
    .title__container .line2__text { font-size: 2.5rem; }
}

.title__container .check-line1__text {
    margin-bottom: 20px;
    font-size: 2.375rem;
    line-height: 1;
    letter-spacing: 0.03em;
    font-weight: bold;
    color: #3178FF;
}
.title__container .check-line2__text {
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-align: left;
}
.title__container .title__underline {
    display: block;
    left: 39%;
    height: 2px;
    background-color: #2979ff;
    position: absolute;
    width: 200px;
    margin-top: 10px;
    @media screen and (max-width: 820px) {
        left: 25%;
    }
}
.title__container .title__underline::before {
    content: "";
    position: absolute;
    left: 0px;
    top: -4px;
    width: 0;
    height: 0;
    border-bottom: 5px solid #2979ff;
    border-left: 60px solid #2979ff;
    border-right: 12px solid transparent;
}

/*
.form__container {
    display: flex;
    flex-direction: column;
    width: 900px;
    margin: 0 auto;
    @media screen and (max-width: 820px) {
        width: 100%;
    }
}
.input__container {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    gap: 30px;
    @media screen and (max-width: 820px) {
        flex-direction: column;
        justify-content: flex-start;
        gap: 5px;
    }
}*/

#contact__form{
    display: grid;
    grid-template-rows: repeat(10,auto);
    row-gap: 30px;
    justify-content: center;
    align-items: center;
}
.form__container {
}
.input__container {
    display: grid;
    grid-template-columns: minmax(220px,25%) minmax(660px,73%);
    column-gap: 2%;
    justify-content: center;
    align-items: center;
    @media screen and (min-width: 821px) and (max-width:1023px) {
        grid-template-columns: 30% 63%; 
    }
    @media screen and (max-width: 820px) {
        grid-template-columns: none;
        column-gap: 0;
        grid-template-rows: auto auto;
        row-gap: 5%;

    }
}

.input__container.residence-status { align-items: flex-start; height: auto; }
.input__container.residence-status.open { height: 320px; }
.input__container.contractor { align-items: flex-start; height: auto; }
.input__container.movein-date { align-items: flex-start; height: auto; }
.input__container.movein-date.open { height: 180px; }
.input__container.residence-period { align-items: flex-start; height: auto; }
.input__container.residence-period.open { height: 180px; }
.input__container.residence-area {
    align-items: flex-start;
    height: auto;
}
.input__container.residence-area.open {
    /*height: 140px;*/
}
@media screen and (max-width: 820px) {
    .input__container.residence-status.open { height: auto; }
    .input__container.contractor.open { height: auto; }
    .input__container.movein-date.open { height: auto; }
    .input__container.residence-period.open { height: auto; }
    .input__container.residence-area.open { height: auto; }
}

.input__container input,
.input__container textarea,
.input__container .dropdown__container {
    background-color: #FFF9F4;
    width: 100%;
    /*height: auto;
    max-height: 60px;*/
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #FFC6B4;
    /*line-height: 1.6;*/
    resize: none;
}
.input__container p,
.input__container label,
.input__container span,
.input__container input,
.input__container textarea {
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
}

.input__container #nationality:focus,
.input__container #fullname:focus,
.input__container #email:focus,
.input__container #tel:focus { padding-top: 1.125rem; }

.input__container #nationality:focus::placeholder,
.input__container #fullname:focus::placeholder,
.input__container #email:focus::placeholder,
.input__container #tel:focus::placeholder,
.input__container #residence-area:focus::placeholder { opacity: 0; }
@media screen and (max-width: 820px) {
    .input__container input,
    .input__container textarea {
        width: 340px;
        /*padding-top: 0.4rem;*/
    }
    .input__container .dropdown__container {
        width: 340px;
        height: auto;
        max-height: 80px;
    }

    /*.input__container #nationality,
    .input__container #tel,
    .input__container #residence-area,
    .input__container.contractor .dropdown__container {
        padding-top: 1.125rem;
    }*/

    .input__container #residence-area {
        height: 190px;
        font-size: 1rem;
        text-align: left;
    }

    .input__container {
        width: 340px;
        margin: 0 auto;
        margin-bottom: 32px;
    }

    .input__container p,
    .input__container span,
    .input__container input,
    .input__container textarea { font-size: 0.875rem; }

    .input__container label { font-size: 1.125rem; }
}
.input__container input::placeholder,
.input__container textarea::placeholder { color: #737373; font-family: 'Yu Gothic', sans-serif; }

.input__container #residence-area {
    height: 190px;
    @media screen and (max-width: 820px) {
        width: 340px;
        height: 250px;
    }
}

.input__container .dropdown__container {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 5px;
    cursor: pointer;
    /*
    display: flex;
    align-items: center;
    */
}
.input__container .dropdown__container p {
    display: inline-block;
    font-size: 1rem;
}
.input__container .dropdown__container .arrow-down__icon {
    position: absolute;
    right: 50px;
    top: 20px;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-top: 2px solid #2f2f2f;
    border-right: 2px solid #2f2f2f;
    transform: rotate(135deg);
    background-color: transparent;
}
.input__container .dropdown__container .dropdown-text__container {
    /*
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    */
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 5px;
    justify-content: start;
    align-items: center;
    @media screen and (max-width: 820px) {
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
    }
}
@media screen and (max-width: 820px) {
    .input__container .dropdown__container p {
        /*font-size: 1rem;*/
        font-size: 0.875rem;
        text-align: left;
    }
    .input__container .dropdown__container .dropdown-text__container{
        flex-direction: column;
        height: auto;
    }
    .input__container.contractor .dropdown-text__container .line1__text { display: none; }
}

.input__container .select__container {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%);
    border-radius: 10px;
}
.input__container.open .select__container {
    display: flex;
}
.input__container .select__container p {
    font-size: 1rem !important;
    overflow-wrap: break-word;
}
.input__container .select__container div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 35px;
    padding: 10px;
    border-radius: 5px;
    @media screen and (max-width: 820px) {
        height: 50px;
    }
}
.input__container .select__container div.selected { background-color: #FFC6B4; }
.input__container .select__container div:hover { background-color: #FFC6B4; cursor: pointer; }

 /*.input__container .label__container {
   display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    width: 210px;
}*/

.input__container .label__container .required__icon { 
    display: inline-block;
    width: 45px;
    height: 25px;
    border: 2px solid #F21D4B;
    border-radius: 4.9px;
    color: #F21D4B;
    font-size: 0.75rem;
    line-height: 2;
    text-align: center;
}
@media screen and (max-width: 820px) { 
    .input__container .label__container {
        width: 340px;
        text-align: left;
        /*padding: 0 24px;*/
    }
}

.input__container .label-text__container {
    /*
    display: flex;
    justify-content: center;
    text-align: left;
    */
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 5px;
    justify-content: start;
    align-items: center;
}

/*
.input__container .label-text__container label { margin-right: 8px; }
*/
/*
.input__container.contractor .label-text__container,
.input__container.residence-status .label-text__container,
.input__container.movein-date .label-text__container,
.input__container.residence-area .label-text__container,
.input__container.residence-period .label-text__container { margin-top: 15px; }
.input__container.contractor .label-text__container { flex-direction: column; }
.input__container.residence-status .label-text__container { flex-direction: row; }
.input__container.residence-area .label-text__container { flex-direction: column; }
*/
.input__container .kome__text {
    margin-top: 10px;
    text-align: left;
    font-size: 0.875rem;
}
@media screen and (max-width: 820px) {
    .input__container .label-text__container { align-items: center; }
    .input__container .label-text__container p { margin-bottom: 0; font-size: 1.125rem; }
    .input__container .label-text__container .required__icon { /*font-size: 0.875rem;*/ }
    .input__container.contractor .label-text__container { flex-direction: row; }
    .input__container.residence-area .label-text__container { flex-direction: row; }
}

.input__container .field__container {
    text-align: left;
}
@media screen and (max-width: 820px) { 
    /*.input__container .field__container {
        width: 340px;
    }*/
    .input__container.fullname .field__container,
    .input__container.email .field__container {
        /*padding-top: 0.5rem;*/
    }
}

.input__container.privacy-policy {
    margin-bottom: 10px;
}
.input__container .privacy-policy__text {
    margin-bottom: 5px;
    text-align: left;
    @media screen and (max-width: 820px) {
        font-size: 1rem;
    }
}
.input__container .privacy-policy__text a,
.input__container .privacy-policy__text a:link{
    display: inline-block;
    @media screen and (max-width: 820px) {
        display: block;
    }
}
.input__container .privacy-policy__link {
    text-decoration: underline;
}

.checkbox__container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.checkbox__container .checkbox__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.checkbox__container .checkbox__icon {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 3px 2px;
    border: 2px solid #808080;
    border-radius: 5px;
    background: #fff;
}
.checkbox__container .checkbox__icon img { display: none; }
.checkbox__container .checkbox__input:checked + .checkbox__icon img { display: block; }
.checkbox__container .checkbox__text { display: inline-block; }
@media screen and (max-width: 820px) {
    .checkbox__container { margin-top: 20px; }
    .checkbox__container .checkbox__icon { width: 28px; height: 28px; }
    .checkbox__container .checkbox__text {  font-size: 1.125rem; }
}

#error-message__container {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 520px;
    margin: 0 auto;
    margin-top: 3.5rem;
}
#error-message__container p { 
    display: flex; 
    align-items: center; 
    font-size: 0.875rem; 
    color: #F21D4B; 
    text-align: left;
}
#error-message__container p img { 
    display: flex; 
    width: 18px; 
    height: auto; 
    margin-right: 8px; 
}
@media screen and (max-width: 820px) {
    #error-message__container { 
        width: 340px;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    #error-message__container p img { width: 16px; }
}

.submit__part {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3.5rem;
}
.submit__part:hover { cursor: pointer; }
.submit__part p {
    font-size: 1.375rem;
    font-weight: bold;
}
.submit__part .submit__button {
    position: relative;
    width: 360px;
    height: 80px;
    background-color: #3178FF;
    color: #FFF;
    font-size: 1.375rem;
    border-radius: 100px;
    border: none;
}
.submit__part .back__button {
    position: relative;
    background-color: #FFF;
    width: 360px;
    height: 80px;
    margin-top: 30px;
    border-radius: 100px;
    border: 3px solid #3178FF;
    font-size: 1.375rem;
    color: #3178FF;
}
@media screen and (max-width: 820px) {
    .submit__part .back__button { width: 340px; }
}
.submit__part .next__icon {
    position: absolute;
    right: 40px;
    top: 33px;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-top: 3.7px solid white;
    border-right: 3.7px solid white;
    transform: rotate(45deg);
    background-color: transparent;
}
@media screen and (max-width: 820px) {
    .submit__part { margin-top: 20px; }
    .submit__part p { font-size: 1.125rem; }
    .submit__part .submit__button { width: 340px; }
    .submit__part .next__icon { top: 35px; right: 60px; }
}

.arrow-top__image {
    display: none;
    position: fixed;
    z-index: 100;
    bottom: calc(180 / 1080 * 100vh);
    right: calc(180 / 1920 * 100vw);
    width: 60px;
    height: auto;
}
@media screen and (max-width: 820px) {
    .arrow-top__image { 
        width: 49px;
        bottom: 90px;
        right: 20px;
    }
}