@charset "UTF-8";
/* CSS Document */
/*fap-top-page*/
.faq-title {
    width: 15%;
    margin: 0 auto 1.5rem;
    display: block;
}
.list {
    margin: 0 0 -7rem -4rem;
}
.list .item {
    width: calc(25% - 4rem);
    margin: 0 0 7rem 4rem;
}
.faq-txt {
    text-align: center;
    padding-bottom: 2.5rem;
    margin-bottom: 1.5rem;
}
/*背景*/
.kasaneru {
    position: relative;
    width: 100%; /* 必要に応じて調整 */
}
/* 背景として使う画像 */
.kasaneru img {
    width: 100%;
    height: auto;
    display: block;
}
/* 文字を画像の上に中央重ね */
.kasaneru h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    width: 100%; /* 長文でも折り返す */
    padding: 0 0.5em;
    font-size: clamp(13px, 1.5vw, 22px);
}
/*fap-top-page-end*/
/*question-page*/

.faq-flex {
    display: flex;
    align-items:center;
}
/*.flex-item-1 {
    width: 55%;
    max-width: 560px;
    margin: 0 auto;
}
.flex-item-2 {
    width: 45%;
    max-width: 450px;
    padding-left: 7rem;
}*/
.flex-item-1 {
    width: 50%;
    max-width: 500px;
    margin: 0 auto ;
    order: 2;
}
.flex-item-2 {
    width: 45%;
    max-width: 500px;
    order: 1;
}

.point li, .point ul, .point p {
    padding-bottom: 1rem;
    margin-left: 2rem;
    
}
.point ul{
    margin-bottom: 2rem;
}

.sc-title {
    font-family: "Muli", sans-serif;
    font-weight: 600;
    font-size: 2.8rem;
    margin: 2rem 0;
}

/* Q・A 共通仕様 */
.question,
.answer {
    position: relative;
    padding-left: 5rem;   /* 画像幅＋余白 */
    margin-bottom: 3rem ;
}
/* 疑似要素（画像ラベル）共通 */
.question::before,
.answer::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;               /* 文章は画像の上から始まる */
    width: 8%;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* 画像だけを切り替え */
.question::before {
    background-image: url("../img/faq/question.jpg");
}
.answer::before {
    background-image: url("../img/faq/answer.jpg");
}


/*
.question, .answer {
    margin-bottom: 2rem;
}
.question::before, .answer::before {
    content: '';
    display: inline-block;
    width: 10%;
    aspect-ratio: 1 / 1;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 1rem;
}
.question::before {
    background-image: url("../img/faq/question.jpg");
}
.answer::before {
    background-image: url("../img/faq/answer.jpg");
}*/
.faq-img {
    max-width: 80%;
    margin: 0 auto;
    display: block;
}
.lp-art_ttl {
    font-size: 2rem;
    font-weight: 600;
    border-bottom: 1px solid #000;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    margin-top: 5rem;
}
.list-btn {
    text-align: right;
}
.more {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* 文字との間隔 */
    margin-top: 3rem;
}
/* 三角部分 */
.more .tri {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #1F1F1F; /* これが三角 */
    border-radius: 3px;
}
.more:hover {
    padding-right: 2rem;
}
.point-text {
    max-width: 100%;
    margin: 0 auto 15rem;
}

.section-product{
    margin: 5rem 0;
}


/*question-page-end*/
/*questionーyoutube*/
.product-video {
    width: 720px;
    max-width: 100%;
    margin: 0 auto;
}
.product-video_inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* ← 正方形にする */
    overflow: hidden;
}
.product-video_inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.youtube-link {
    color: #E60012;
}
.youtube-link::after {
    content: '';
    display: inline-block;
    width: 20px; /*画像の幅*/
    height: 20px; /*画像の高さ*/
    background-image: url("../img/faq/right.jpg");
    background-size: contain;
    vertical-align: middle;
}
.link {
    color: #E60012;
}

/*questionーyoutube-end*/
@media screen and (max-width: 768px) {
    /*faq-top-page*/
    .faq-title {
        width: 30%;
    }
    .list {
        margin: 0 0 -6.66667vw -4vw;
    }
    .list .item {
        width: calc(100% - 4vw);
        margin: 0 0 6.66667vw 4vw;
    }
    .item {
        display: flex;
    }
    .item div {
        flex-basis: 50%;
        margin: 0 auto;
    }
    .kasaneru h2 {
        font-size: clamp(0px, 3.5vw, 23px);
    }
    /*faq-top-page-end*/
    .question, .answer {
        font-size: clamp(0px, 4vw, 27px);
    }
    .faq-flex {
        display: block;
        margin: 0 auto;
    }
    .flex-item-1 {
        width: 100%;
    }
    .flex-item-1 img{
        margin-bottom: 2rem;
    }
    .flex-item-2 {
        width: 100%;
        padding-left: 0;
        margin: 0 auto;
    }
    .sc-title {
        font-size: 5vw;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    .q-title {
        width: 50%;
    }
    
    .section-product{
    margin: 0;
}

    
    
    .lp-art_ttl {
        font-size: 3.73333vw;
        font-weight: 600;
        border-bottom: 1px solid #000;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    .product-video {
        margin-bottom: 2rem;
    }
    .youtube-link::after {
        background-image: url("../img/faq/top.jpg");
    }
}