@charset "utf-8";

/* =========================================
section--intro
===========================================*/
.mainImg-sp {
    position: relative;
}

.mainImg {
    display: none;
}

.top_msg,.msg__main,.msg__sub {
    display: none;
}

.top_msg-sp {
    position: absolute;
    top:12%;
    left: 4%;
}

.msg__main-sp {
    color: var(--white);
    font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
    font-size: 2.4rem;
    font-weight:500;
    letter-spacing: 1.2px;
    text-align: left;
    opacity: 0.9;
    padding-bottom: 25px;
}

.msg__sub-sp {
    color: var(--white);
    font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    opacity: 0.9;
}

.slick-arrow:before{
	content:""!important;
}







.section--intro {
    padding:60px 0;
}




.intro__item {
    margin-bottom: 60px;
    /* かぶってる分を全体の高さで割る */
    padding-top: 23.6%;
    display: flex;
    position: relative;
}



.intro__img img {
    width: 85.3%;
    position: absolute;
    /* イメージが上にいってズレが生じないよう固定する */
    top: 0;
    left: 0;
    /* pddingで余白を開けて１０px分空ける */
    /* padding-top:  calc(29.2% - 10px); */
}

.intro__img {
    width: 100%;
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    bottom: 0;
    padding-top:  calc(29.2% - 10px);

}

.intro__item:last-child{
    margin-bottom: 0;
}

.intro__contents {
    width: 93%;
    margin-left: auto;
    background: var(--green, #868F74);
    padding: 10% 4% 3.7%;
}

.intro__item:nth-child(even)
.intro__contents{
    background-color:var(--beige);
    margin-left: 0;
    margin-right: auto;
    padding: 10% 4% 3.7%;
}

.intro__item:nth-child(even)
.intro__img img{
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    
}

.intro__subtitle {
    font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
    color: var(--white, #F2F2F2);
    text-align: center;
    font-weight: 700;
}

.intro__subtitle span {
    white-space: pre;
}

.intro__txt {
    font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
    color: var(--white, #F3F7F8);
    font-size: 1.4rem;
    text-align: left;
}

/* pc intro */
@media screen and (min-width:769px) {
    
    .section--intro {
        max-width: 1390px;
        margin: 0 auto;
        padding: 6.9%;
    }

    .intro__item {
        padding-top: 4.6%;
    }


    .intro__img {
        width: 100%;
        position: absolute;
    }

    .intro__img img {
        width: 59.5%;
        top: 0;
        left: 0;

    }


    .intro__item {
        margin-bottom: 120px;
        /* display: flex;
        position: relative; */
    }
    .intro__contents {
        width: 71.7%;
        padding: 40px 30px;
        padding-left: 34%;
        /* padding: 40px 9.8% 40px 52.9%; */
    }


    .intro__subtitle {
        text-align: center;
        font-size: 1.6vw;
        font-weight: 600;
        margin-bottom: 30px;
        line-height: 1.5;
    }

 
    .intro__item:nth-child(even){
        position: relative;
    }

    .intro__item:nth-child(even)
    .intro__contents{
        padding: 30px;
        padding-right: 34%;
    }

    .mainImg {
        display: block;
        position: relative;
    }
    
    .mainImg-sp {
        display: none;
    }
    
    .top_msg-sp,.msg__main-sp,.msg__sub-sp {
        display: none;
    }
    
    .top_msg {
        display: block;
        position: absolute;
        top:20%;
        left: 4%;
    }
    
    .msg__main {
        display: block;
        color: var(--white);
        font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
        font-size: 2.4vw;
        font-weight:500;
        letter-spacing: 1.8px;
        text-align: left;
        opacity: 0.8;
        padding-bottom: 15px;
    }
    
    .msg__sub {
        display: block;
        color: var(--white);
        font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
        font-size: 1.2vw;
        font-weight: 500;
        text-align: left;
        opacity: 0.8;
    }
    
    

   

   
}

/* =========================================
section--link
===========================================*/
.section--link {
    background-color: var(--lightgray,#D9D9D9);
    padding: 60px 5%;
}

.link__list {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.link__item {
    width: calc(100%/2.1);
    height: 100%; 
}

.link__item a {
    height: 100%;
}

.link__imgbox {
    overflow: hidden;
}

.link__img {
    width: 100%;
    height: 100%;
    /* transform: scale(1.05);
    /* transition: transform .4s; */
}


.link__title {
    background-color: var(--white,#F2F2F2);
    display: flex;
    justify-content: center;
    padding: 7px;
    gap: 10px;
}

.link__txt {
    font-size: 1.4rem;
    position: relative;
    transition: 0.4s;

}

.link__txt::after {
    display: inline-block;
    content: '';
    position: absolute;
    bottom: 0;
    width: 25px;
    text-align: center;
    height: 4px;
    border-bottom: 1px solid var(--gray);
    border-right: 1px solid var(--gray);
    transform: skew(45deg);
    margin-bottom: 5px;
    margin-left: 5px;
    transition: right .5s;
    right: -30px;
}

.link__txt:hover::after {
    right: -50px;
}

@media screen and (min-width:769px) {
    .section--link {
        padding: 60px 0;
    }

    .link__item {
        width: 23.1%;
        height: auto;
    }

    .link__list {
        max-width: 1190px;
        justify-content: center;
        display: flex;
        margin: 0 auto;
    }
}

/* =========================================
section--Q&A
===========================================*/
.section--FAQ {
    padding: 60px 5%;
}

.contents__title {
    text-align: center;
}

.faq__list {
    margin: 30px auto;
}


.faq__list--item {
    margin-top: 10px;;
    align-items: center;
    padding: 11px 10px;
    background: var(--lightgreen, #D4D7C4);
    color: var(--green,#868F74);
    font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
    font-size: 1.4rem;
    text-decoration: none;
    position: relative;
    
}

.faq__list--answear::before {
    content: "";
    display: block;
    border-top: 1px dashed var(--gray);
    margin: 10px auto;
    }


.faq__list--answear {
    display: none;
    color: var(--black);
    align-items: center;
    text-align: left;
    /* transition: opacity 0.3s ease-in-out, height 0.5s ease-in-out, margin 0.5s ease-in-out; */
}

.Answear {
    display: inline-block;
    color: var(--green);
    font-size: 1.6rem;
    vertical-align: -2px;
    margin-right: 5px;
}


.faq__list--question {
    list-style: none;
    align-items: center;
    transition: 1s;
}

.faq__list--question::after {
    content: '';
    width: 30px;
    height: 30px;
    display: inline-block;
    background-image: url(../image/faq__img.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 27px;
    right: 10px;
    transform: translateY(-50%) rotateZ(0deg);
}
.faq__list--question.open::after {
	transform: translateY(-50%) rotateZ(45deg);
    transition: 0.3s;
}


.faq__list--question {
    color: var(--black,#504C44);
    font-weight:400;
    text-align: left;
}



.faq__list--question span {
    color: var(--green, #868F74);
    font-size: 1.6rem;
}


.faq__link {
    color: var(--green);
    border-bottom: 1px solid var(--green);
    margin-left: 5px;
}

.faq__link:hover {
    opacity: 0.8;
}



/* faq pc */

@media screen and (min-width:769px) {
    .section--FAQ {
        padding: 60px 8.7%;
    }

    #faq__list--item {
        align-items: center;
        padding: 13px 30px;
        font-family: "Noto Sans","Noto Sans JP","Noto Sans TC","Noto Sans KR";
        font-size: 1.6rem;
    }

    .faq__list {
        max-width: 1190px;
    }
}

/* =========================================
section--contact
===========================================*/
.section--contact {
    background-image: url(../image/contact__img.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px 0;
}

.contact__contents {
    background: rgba(242, 242, 242, 0.73);
    backdrop-filter: blur(3px);
    width: 91.8%;
    margin-left: 8.2%;
    padding: 30px 0 30px 3%;
    
}

.contact__info {
    display: flex;
    justify-content: center;
}



.contact__item {
    width:50%;
    height: 200px;
    text-align: center;
    padding: 40px 9px 15px;
    
}

.contact__item span {
    white-space: pre;
}


.contact__icon {
    width: 30px;
    height: 30px;
}

.contact__subtitle {
    font-size: 1.6rem;
}

.contact__item p {
    font-size:1.2rem;
    line-height: normal;
}

::placeholder {
    font-size: 1.2rem;
    color: var(--gray);
    align-items: center;
}

.contactform {
    margin-left: 53px;
}

.form__item {
    width: 100%;
    background: var(--white, #F2F2F2);
    height: 53px;
    color: var(--lightgray);
    font-family: "Noto Sans";
    font-weight: 700;
    margin-bottom: 15px;
    align-items: center;
    padding-left: 14px;
    font-weight: 700;
    text-align: left;
}

.form__item--textarea {
    height: 100px;
}

.contact__btn {
    margin: 0 auto;
}

.contact__left {
    display: none;
}

label[for] {
    display: none;
}

/* comtact pc */
@media screen and (min-width:769px) {
   
    .section--contact {
        background-image: url(../image/contact__img-pc.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .contact__contents {
        background: rgba(242, 242, 242, 0.73);
        width: 50%;
        margin-left: 50%;
        padding: 30px 0 30px 3%;
    }
    
    .right__contents {
        /* max-width: 769px; */
    }



 

    .contact__title {
        text-align: center;
        line-height: 1;
    }

    .contact__info {
        flex-wrap: nowraps;
    }


    .contact__item {
        width: 25%;
        padding: 40px 9px 15px;
        height: auto;
    }

    .contactform {
        margin-top: 40px;
        margin-left: 0;
    }
    .contactForm__group {
        text-align: center;
        height: auto;
    }

    .form__item {
        max-width:600px ;
        background-color: var(--white);
        height: 53px;
        color: var(--gray, #868786);
        font-family: "Noto Sans";
        font-weight: 700;
        margin:0 auto 15px;
        align-items: center;
        text-align: left;
        padding-top: 2px;

    }
    .form__item:last-of-type {
        height: 93px;
    }
    .contact__btn {
        max-width: 320px;
        height: auto;
        width: 100%;
        padding: 15px 59px;
        position: relative;
        transition: 0.4s;
        justify-content: center;
    }

    
    .contact__left {
        display: none;
    }
}

/* contacy pc + */
@media screen and (min-width:769px) and (max-width:1204px) {
    .section--contact {
        background-image: url(../image/contact__img.jpeg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 60px 0;
    }
    
    .contact__contents {
        background: rgba(242, 242, 242, 0.73);
        width: 86.8%;
        margin-left: 13.2%;
        padding: 30px 0 30px 3%;
    }
    
    .right__contents {
        /* max-width: 769px; */
    }



    .contact__right {
        width: auto;
    }



    .contact__info {
        flex-wrap: nowraps;
    }


    .contact__item {
        width: 25%;
    }

    .contactform {
        margin-top: 40px;
        margin-left: 0;
    }
    .contactForm__group {
        text-align: right;
        height: auto;
    }

    .form__item {
        max-width:95% ;
        background-color: var(--white);
        height: 53px;
        color: var(--gray, #868786);
        font-family: "Noto Sans";
        font-weight: 700;
        margin:0 auto 15px;
        align-items: center;
        text-align: left;
        padding-top: 2px;

    }
    .form__item:last-of-type {
        height: 93px;
    }
    .contact__btn {
        max-width: 320px;
        height: auto;
        width: 100%;
        padding: 15px 59px;
        position: relative;
        transition: 0.4s;
        justify-content: center;
    }

    
    .contact__left {
        display: none;
    }
}