@charset "UTF-8";


/* ---------------------------------- 共通 ---------------------------------- */


body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}



p,a {
    font-size: 1em;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    line-height: 1.5;
    color: #777777;
}

p.sec-t-cnt {
    margin-bottom: 3em;
    font-size: min(2.3vw , 28px);
    text-align: center;
    opacity: 0;
    transform: translateY(1em);
    transition: .5s ease all;
}
p.sec-t-cnt.active {
    opacity: 1;
    transform: translateY(0);
}


h1,h2,h3,h4,h5 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    line-height: 1.5;
}

p span {
    display: inline-block;
}


.flex {
    display: flex;
}

.sec {
    width: 100%;
    margin: 0 auto;
    padding: 8em 0;
    font-size: min(1.82vw , 16px);
}
.sec-in {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


.sec-titel {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 1.86;
    margin-bottom: 3em;
}


@keyframes fadeInUpBounce {
    0% {
        transform: translateY(2em);
    }
    50% {
        transform: translateY(-0.5em);
    }
    70% {
        transform: translateY(0.2em);
    }
    100% {
        transform: translateY(0);
    }
}

.sec-titel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/title_symbol.webp) no-repeat center / contain;
    opacity: .15;
    transform: translateY(1em);
    visibility: hidden;
    transition: opacity .5s 1s  ease, transform 0.5s ease; 
}

.sec-titel.active::after {
    visibility: visible;
    animation: fadeInUpBounce 0.6s ease-out forwards;
}

.sec-titel h3 {
    height: 100%;
    text-align: center;
    align-content: center;
    font-size: 3.75em;
    color: #FA0000;
    opacity: 0;
    transform: translateY(1em);
    transition: .5s ease all;
}
.sec-titel.active h3 {
    opacity: 1;
    transform: translateY(0);
}


.sec-titel p {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50% , -1.5vw);
    color: #FA0000;
    font-size: 1.5em;
    font-weight: 700;
}

.btn-wrap {
    text-align: center;
    opacity: 0;
    transform: translateY(1em);
    transition: .5s ease all;
}
.btn-wrap.active {
    opacity: 1;
    transform: translateY(0);
}

.btn {
    position: relative;
    display: inline-block; 
    width: 100%;
    max-width: 30em;
    padding: 1em 5.5em 1em 2em;
    border: 1px solid #007D3D;
    background: #007D3D url(../images/arrow_w.webp) no-repeat 95% / .8em;
    transition: .2s ease all;
}
.btn:hover {
    background: #fff url(../images/arrow_g.webp) no-repeat 95% / .8em;
}

.btn p {
    color: #fff;
    font-size: 2em;
}
.btn:hover p {
    color: #007D3D;
}

.btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sp {
    display: none;
}


h1 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* ---------------------------------- 共通ここまで ---------------------------------- */

/* ---------------------------------- ヘッダー ---------------------------------- */


#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    font-size: min(1.8vw , 16px);
    background-color: #fff;

    transition: transform 0.4s ease-in-out;
    will-change: transform;
    transform: translateY(0);
}

#header-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: .5em 1em;
    background-color: #fff;
}

#header-in .logo {
    position: relative;
    width: auto;
    height: 100%;
    aspect-ratio: 2 / 1;
}
#header-in .logo a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}


#header-in .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
    opacity: 1;
}
#header-in .logo:hover img {
    opacity: .5;
}


.header-menu-in {
    display: flex;
    align-items: center;
    gap: min(2.08vw, 32px);
}

nav ul {
    display: flex;
}

nav li {
    border-right: 1px solid #333;
}
nav li:last-child {
    border-right: none;
}

nav li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: .2em min(2.08vw, 32px);
    transition: .2s ease all;
    font-weight: 400;
    color: #333;
}
nav li a:hover {
    color: #fff;
    background-color: #FA0000;
}

.header-menu .cv {
    position: relative;
    padding: .8em 1em;
    background-color: #007D3D;
    border: 1px solid #007D3D;
    transition: .2s ease all;
}

.header-menu .cv a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
.header-menu .cv:hover {
    background-color: #fff;
}

.header-menu .cv p {
    color: #fff;
    transition: .2s ease all;
}
.header-menu .cv:hover p {
    color: #007D3D;
}

.hamburger {
    display: none;
}


/* ---------------------------------- ヘッダーここまで ---------------------------------- */


/* ---------------------------------- Fv ---------------------------------- */


#fv {
    width: 100%;
    height: auto;
    max-height: 1080px;
    aspect-ratio: 16 / 9;
    margin-top: 80px;
    font-size: min(1.82vw , 16px);
    background-color: #F44348;
}

.fv-in {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 1080px;
}

.kv {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
}
.kv::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .15;
    background-color: #8B5858;
}

.kv-img {
    width: calc(100% / 3);
    height: 100%

}

.kv-img.kv-1 {
    background: url(../images/kv_01.webp) no-repeat center / cover;
    transform: translateY(-100%);
    transition: .5s ease all;
}

.kv-img.kv-2 {
    background: url(../images/kv_02.webp) no-repeat center / cover;
    transform: translateY(-100%);
    transition: .5s .2s ease all;

}
.kv-img.kv-3 {
    background: url(../images/kv_03.webp) no-repeat center / cover;
    transform: translateY(-100%);
    transition: .5s .4s ease all;

}

#fv.load .kv-img.kv-1,
#fv.load .kv-img.kv-2,
#fv.load .kv-img.kv-3 {
    transform: translateY(0);
}




#fv .copy {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50% , -70%) scale(.9);
    width: 75%;
    max-width: 1220px;
    height: auto;
    font-size: min(3vw , 50px);
    background-color: #fff;   
    opacity: 0;
    transition: .8s .5s ease all;
}

#fv.load .copy {
    opacity: 1;
    transform: translate(-50% , -70%) scale(1);
}
 
#fv .text-wrap .copy-in {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.copy p {
    font-size: 1em;
    font-weight: 700;
    color: #FA0000;
}

.copy .flex {
    justify-content: center;
    align-items: center;
    padding: .5em;
    gap: .5em;
}
 
.copy .flex-item_1 {
    height: 100%;
    width: 25%;
}
.copy .flex-item_1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.copy .flex-item_2 {
    width: 75%;
}


/* 下テキスト */

.text-2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: .5em;
    text-align: center;
    background-color: #FA0000;
}


.text-2 p {
    color: #fff;
    font-size: min(1.82vw , 26px);
}

/* ---------------------------------- Fvここまで ---------------------------------- */




/* ---------------------------------- 最短当日〜 ---------------------------------- */

.sec-lead.sec {
    padding: 8em 0;
}


.sec-lead h2 {
    text-align: center;
    font-size: min(4vw , 51px);
    font-weight: 700;
    color: #FA0000;
    transform: translateY(1em);
    opacity: 0;
    transition: .8s ease-in-out all;
}

.sec-lead.active h2 {
    transform: translateY(0);
    opacity: 1;
}

.sec-lead span.symbol {
    transform: translateY(.1em);
    display: inline-block;
    width: 1em;
    height: 1.2em;
    background: url(../images/symbol-r.webp) no-repeat center / contain;
}


.sec-lead span.focus {
    font-size: 1.26em;
    line-height: 1.3;
    border-bottom: .15em #FFBB39 dashed;
}


/* ---------------------------------- 最短当日〜ここまで ---------------------------------- */


/* ---------------------------------- cvバナー ---------------------------------- */

.cv-wrap {
    opacity: 0;
    transition: .5s ease all;
}
.cv-wrap.active {
    opacity: 1;
}

.cv-banner {
    position: relative;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    padding: 1em;
    border-radius: 50vw;
    font-size: min(1.82vw , 16px);
    border: .2em solid #007D3D;
    background: #CBE4D7 url(../images/arrow_g.webp) no-repeat 90% / 1em;
    transition: .2s ease all;

}

.cv-banner:hover {
    background: #fff url(../images/arrow_g.webp) no-repeat 90% / 1em;
}

.cv-banner a {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cv-banner img {
    width: 82%;
    height: 100%;
    object-fit: contain;
}


/* ---------------------------------- cvバナーここまで ---------------------------------- */


/* ---------------------------------- サービスの特徴 ---------------------------------- */

#sec-1 .flex {
    position: relative;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #FF9999;
    font-size: min(1.56vw , 16px);
}

#sec-1 .box-2 .flex{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}


#sec-1 .flex-item {
    position: relative;
    width: 50%;
    opacity: 0;
    transition: .5s ease all;
}
#sec-1 .flex-item.active {
    opacity: 1;
}

#sec-1 .flex-item.flex-item_1 {
    border-right: 1px solid #FF9999;
}

#sec-1 .flex-item.flex-item_1 .flex-item-in {
    width: 95%;
}

#sec-1 .flex-item.flex-item_2 .flex-item-in {
    width: 92%;
    margin-left: auto;
}


.box-title {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}


.box-title .box-icon {
    width: 25%;
    height: auto;
    aspect-ratio: 1 / 1;
}
.box-title .box-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.box-title .title-text {
    width: 75%;
}

.box-title h4 {
    font-size: min(3.9vw , 48px);
    line-height: 1.2;
    color: #FA0000;
}

.box-title h4 span.inline {
    display: inline-block;
}

.box-title p {
    transform: translateX(-.5em);
    font-size: 1.5em;
    color: #FA0000;
}


p span.symbol {
    width: auto;
    height: 1.2em;
    aspect-ratio: 2 / 5;
    margin-left: .2em;
    background: url(../images/text_symbol.webp) no-repeat center / contain;
}

.box .text-box {
    width: 75%;
}

#sec-1 .number {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

#sec-1 .number p {
    font-size: min(14vw, 200px);
    line-height: 1;
    font-weight: 700;
    color: #FFE6E6;

}


/* ３つ横並び */


#sec-1 .box-2 .flex-item {
    width: calc(100% /3);
}

#sec-1 .box-2 .box-title {
    display: block;
}

#sec-1 .box-2 .box-title .title-text {
    width: 100%;
}

#sec-1 .box-2 .box-title h4 {
    font-size: min(2.6vw , 36px);
}

#sec-1 .box-2 .box-title .box-icon {
    width: 45%;
    aspect-ratio: 1 / 1;
    margin: 0 auto .5em auto;
}


#sec-1 .box-2 .number {
    bottom: auto;
    top: 0;
    transform: translate(-.5em ,  -20%);
}
#sec-1 .box-2 .flex-item_3 .number {
    transform: translate(0 , -20%);
} 

#sec-1 .box-2 .flex-item.flex-item_2 {
    border-right: 1px solid #FF9999;
} 


#sec-1 .box.box-2 .text-box {
    width: 100%;
}


#sec-1 .box-2 .flex-item.flex-item_2 .flex-item-in {
    margin: 0 auto;
}


#sec-1 .box-2 .flex-item.flex-item_3 .flex-item-in {
    width: 92%;
    margin-left: auto;
}

.text-box_1 {
    display: flex;
    gap: .5em;
    margin-bottom: .5em;
}
.text-box_1:last-child {
    margin-bottom: 0;
}


.text-box_1 p {
    width: calc(100% - 3em);
}

.text-box_1 p.t-1 {
    width: 4em;
}

.text-box_1 p.t-1 span {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: .2em .25em ;
    font-size: .75em;
    color: #fff;
    background-color: #777777;
}




/* ---------------------------------- サービスの特徴ここまで ---------------------------------- */

/* ---------------------------------- こんな方におすすめ ---------------------------------- */


#sec-2 .sec-titel {
    aspect-ratio: initial;
}

#sec-2 .sec-titel::after {
    display: none;
}



#sec-2 .sec-titel h3 {
    color: #007D3D;
}

#sec-2 .sec-titel h3 span {
    display: inline-block;
    transform: translateY(.1em);
    width: .5em;
    height: auto;
    aspect-ratio: 2 / 5;
    margin-left: .1em;
    background: url(../images/symbol-g.webp) no-repeat center / contain;
}

#sec-2 .sec-titel img {
    display: block;
    margin: 0 auto;
}

#sec-2 .flex {
    gap: 4em;
    margin-bottom: 4em;
}

#sec-2 .flex .flex-item {
    width: calc(100% / 3);
    font-size: min(1.82vw , 26px);
}

#sec-2 .flex-t p {
    font-size: 1em;
    text-align: center;
    color: #007D3D;
    opacity: 0;
    transform: translateY(1em);
    transition: .5s ease all;
}
#sec-2 .flex-item.active .flex-t p {
    opacity: 1;
    transform: translateY(0);
}

#sec-2 .flex-t p span.c-1 {
    color: #FA0000;
}

#sec-2 .flex-t img {
    width: 100%;
    object-fit: contain;
}



#sec-2 .flex-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: .5s .5s ease all;

}
#sec-2 .flex-item.active img {
    opacity: 1;
}


/* ---------------------------------- こんな方におすすめはここまで ---------------------------------- */



/* ---------------------------------- 取り扱い商品 ---------------------------------- */

#sec-3 .sec-titel {
    margin-bottom: 1.5em;
}



#sec-3 .flex {
    flex-wrap: wrap;
    gap: 4em 2.5em;
    margin-bottom: 8.5em;
}

#sec-3 .flex-item {
    position: relative;
    width: calc(100% / 2 - 1.5em);
    height: auto;
    opacity: 0;
    transition: .5s ease all;
}
#sec-3 .flex-item.active {
    opacity: 1;
}

#sec-3 .flex-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

#sec-3 .flex-img {
    overflow: hidden;
    will-change: transform;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 5.8;
    background-color: #ccc;
}


#sec-3 .flex-img::after {
    content: '';
    position: absolute;
    top: -25%;
    left: 0;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transform: translateY(var(--parallax-y, 0px));
}


#sec-3 .flex-item.flex-item_1 .flex-img::after {
    background: url(../images/sec3-1.webp) no-repeat center / cover;
}
#sec-3 .flex-item.flex-item_2 .flex-img::after {
    background: url(../images/sec3-2.webp) no-repeat center / cover;
}
#sec-3 .flex-item.flex-item_3 .flex-img::after {
    background: url(../images/sec3-3.webp) no-repeat center / cover;
}
#sec-3 .flex-item.flex-item_4 .flex-img::after {
    background: url(../images/sec3-4.webp) no-repeat center / cover;
}


#sec-3 .bg {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-1em , 2.5em);
    width: 100%;
    height: 100%;
    background-color: #F44348;
}

#sec-3 .flex-item_2 .bg {
    background-color: #4A98E2;
}
#sec-3 .flex-item_3 .bg {
    background-color: #FFBB39;
}
#sec-3 .flex-item_4 .bg {
    background-color: #7AD173;
}

#sec-3 .flex-t {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    transform: translate(-1em , 2.5em);
    width: 35%;
}
#sec-3 .flex-t img {
    width: 100%;
    height: 100%;
}

#sec-3 .white {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-1.1em, 4em);
    z-index: 4;
    width: 20%;
    height: auto;
    aspect-ratio: 1 / 1;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    background-color: #fff;
}

#sec-3 .flex .text {
    position: absolute;
    bottom: 0;
    right: 0; 
    transform: translate(0 , 2em);
    z-index: 3;
    width: 100%;
    padding-left: 20%;
    text-align: center;
}

#sec-3 .flex .text p {
    font-size: min(1.75vw , 20px);
    color: #fff;
}

#sec-3 .flex .text p span {
    display: inline-block;
    transform: translateY(.3em);
    width: auto;
    height: 2.2em;
    aspect-ratio: 2 / 5;
    margin: 0 .25em;
    background: url(../images/symbol-w.webp) no-repeat center / contain;
}


#sec-3 .btn {
    max-width: 35em;
    transition: .2s ease all;
    background-color: #FA0000;
    border: 1px solid #F44348;
}
#sec-3 .btn:hover {
    background: #fff url(../images/arrow_r.webp) no-repeat 95% / .8em;
}

#sec-3 .btn .flex {
    flex-wrap: nowrap;
    gap: 1.5em;
    max-width: 25em;
    margin-bottom: 0;
}

#sec-3 .btn .flex img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#sec-3 .btn .flex p {
    width: 25em;
    margin-bottom: 0;
    text-align: left;
    font-size: min(2.9vw , 26px);
}

#sec-3 .btn .flex img.hover_1 {
    display: block;
}
#sec-3 .btn:hover .flex img.hover_1 {
    display: none;
}


#sec-3 .btn .flex img.hover_2 {
    display: none;
}
#sec-3 .btn:hover .flex img.hover_2 {
    display: block;
}

#sec-3 .btn:hover p {
    color: #FA0000;
}



/* ---------------------------------- 取り扱い商品はここまで ---------------------------------- */




/* ---------------------------------- 新規会員登録について ---------------------------------- */


#sec-4 .sec-titel {
    margin-bottom: 1.5em;
}


#sec-4  .flex {
    position: relative;
    gap: 8em;
    margin-bottom: 4em;
}
#sec-4  .flex::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% ,0);
    width: 1px;
    height: 100%;
    background-color: #98CAB0;
}

#sec-4 .flex-t  {
    margin-bottom: 1em;
}

#sec-4 .flex-t h4 {
    text-align: center;
    font-size: min(3.1vw , 48px);
    color: #007D3D;
}

#sec-4 .flex-t img {
    width: 100%;
}

#sec-4 .flex-item_1 p {
    display: flex;
    align-items: center;
    margin-bottom: .5em;
    font-size: min(2.08vw , 24px);
}
#sec-4 .flex-item_1 p:last-child {
    margin-bottom: 0;
}

#sec-4 .flex-item_1 p.flex-t_1 span,
#sec-4 .flex-item_1 p.flex-t_2 span {
    width: 2.5em;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-right: .5em;
    background: url(../images/icon-mail.webp) no-repeat center / contain;
}



#sec-4 .flex-item_1 p.flex-t_2 span {
    background: url(../images/icon-phone.webp) no-repeat center / contain;
}

#sec-4 .flex-item_2  {
    text-align: center;
}

#sec-4 .flex-item_2 .btn {
    margin-bottom: .5em;
}

#sec-4 .flex-item_2 .btn p {
    font-size: 1.5em;
}

#sec-4 .flex .flex-item {
    opacity: 0;
    transform: translateY(1em);
    transition: .5s ease all;
}
#sec-4 .flex .flex-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------- 新規会員登録についてここまで ---------------------------------- */

/* ---------------------------------- ご利用の流れ ---------------------------------- */

#sec-5 {
    background-color: #FFD9D9;
    width: 100%;
    overflow: hidden;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(1.5em);
    }

    100% {
        transform: translateX(0);
    }
}

#sec-5 .scroll {
    display: none;
    position: absolute;
    bottom: 0;
    animation: scroll 1.2s ease-in-out infinite;
}

.howto-container {
    overflow-x: auto;
    width: 100%;
    max-width: 1600px;
    margin: 3em auto 0 auto;
    opacity: 0;
    transition: .5s ease all;
}
.howto-container.active {
    opacity: 1;
}

.howto-list {
    display: flex;
    width: max-content;
    justify-content: space-between; 
    gap: 2em;

}

@media screen and (max-width: 1600px) {
    .howto-container {
        -webkit-overflow-scrolling: touch; 
    }

    .howto-list {
        padding-left: 10%;
        padding-right: 10%;
    }

    #sec-5 .scroll {
        display: block;
    }
}


.howto-item {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 370px;
    padding: 1em 0;
}


.howto-step {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 6.5em;
    height: auto;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-size: 1.2em;
    background: url(../images/step_fukidashi.webp) no-repeat center / contain;
}

.howto-step span {
    font-size: 1.1em;
    color: #fff;
}

.howto-step p {
    padding-bottom: .1em;
    font-size: 4em;
    font-weight: 700;
    line-height: .7;
    color: #fff;
}

.howto-img {
    width: 85%;
    aspect-ratio: 10 / 7.5;
    margin-left: auto;
}

.howto-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.howto-text {
    width: 85%;
    margin-left: auto;
    margin-top: 1em;
    text-align: center;
}

.howto-text h4 {
    font-size: 1.75em;
    color: #FA0000;
}

.howto-text p {
    font-size: 1em;
    line-height: 1.5;
}


/* ---------------------------------- ご利用の流れここまで ---------------------------------- */


/* ---------------------------------- よくある質問 ---------------------------------- */



.faq-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.5em;
    margin-bottom: 8em;
}

.faq-item {
    overflow: hidden;
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 3em;
    opacity: 0;
    transform: translateY(1em);
    transition: .5s ease all;
}
.faq-item.active {
    opacity: 1;
    transform: translateY(0);
}

.faq-q {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: 1.5em 4em 1.5em 1.5em;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-size: 1.25em;
    color: #fff;
    background-color: #777777;
}



.faq-icon-q {
    width: 1.5em;
    margin-right: .5em;
}

span.faq-icon-q_2 {
    width: calc(100% - 1.5em);
}

.faq-q::before,
.faq-q::after {
    content: '';
    position: absolute;
    right: 2em;
    top: 50%;
    width: .8em;
    height: 2px;
    background-color: #fff;
    transition: transform 0.3s ease;
}

.faq-q::after {
    transform: rotate(90deg);
}

.faq-q.is-open::after {
    transform: rotate(0deg);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.faq-q.is-open + .faq-a {
    grid-template-rows: 1fr;
}

.faq-a-in {
    overflow: hidden;
    display: flex;
    padding: 0 1.5em;
    transition: padding 0.3s ease;
}

.faq-q.is-open + .faq-a .faq-a-in {
    padding: 1.5em;
}

.faq-a p {
    margin: 0;
    font-size: 1em;
    line-height: 1.6;
    color: #555;
}

.faq-a a {
    color: #F44348;
    border-bottom: 1px solid #F44348;
}



/* ---------------------------------- よくある質問ここまで ---------------------------------- */


/* ---------------------------------- フッター ---------------------------------- */

#footer {
    position: relative;
    z-index: 100;
    padding: 4em 0 2em 0;
    border-top: .2em solid #DDD;
    background-color: #fff;
    font-size: min(1.82vw , 16px);
}

.footer-in {
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5%;
}

#footer .flex-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2em;
    margin-bottom: 3em;
}

#footer .flex-1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

#footer .flex-item_1 img {
    max-width: 150px;
    height: auto;
}

#footer .flex-item_1 .t-b {
    margin-bottom: 0.3em;
    font-weight: 700;
    color: #333;
}


#footer .flex-imte_2 {
    width: 45%;
}

#footer .flex-imte_2 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 1.5em;
}

#footer .flex-imte_2 li {
    display: list-item;
    width: 9em;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #777777;

}

#footer .flex-imte_2 li a {
    opacity: 1;
    transition: .2s ease all;
    font-weight: 400;
    color: #333;
}
#footer .flex-imte_2 li a:hover {
    opacity: .5;
}

.copyright {
    padding-top: 1.5em;
    text-align: center;
    font-size: 12px;
    color: #999;
}



/* ---------------------------------- フッターここまで ---------------------------------- */


/* ---------------------------------- 固定ボタン ---------------------------------- */

.flx-btn {
    visibility: visible;
    position: fixed;
    bottom: 2em;
    right: 2em;
    z-index: 99;
    width: 20%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    transform: scale(1);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    opacity: 1;
}
.flx-btn.is-hide {
    visibility: hidden;
    pointer-events: none; 
    opacity: 0;
    transform: translateY(20px); 
}

.flx-btn:hover {
    transform: scale(1.1);
}
.flx-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: -1;
    width: 110%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50vw;
    background-color: #fff;
    opacity: .8;
}

.flx-btn-in {
    position: relative;
    width: 100%;
    height: 100%;
}
.flx-btn-in a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.flx-btn-in img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%) rotate(0);
    width: 100%;
    height: 100%;
}

@keyframes rotateEvery10s {
    0%, 45% {
        transform: translate(-50% , -50%) rotate(0deg);
    }
    50%, 95% {
        transform: translate(-50% , -50%) rotate(180deg);
    }
    100% {
        transform: translate(-50% , -50%) rotate(360deg);
    }
}

.flx-btn-in img.flx-btn-img {
    animation: rotateEvery10s 10s ease-in-out infinite;
    transform-origin: center center; 
}




/* ---------------------------------- 固定ボタンここまで ---------------------------------- */





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


    /* ---------------------------------- sp_共通 ---------------------------------- */

    .sec {
        padding: 4em 0;
        font-size: min(3.75vw , 16px);
    }

    .sec-titel {
        aspect-ratio: 7 / 2;
    }

    .sec-titel h3 {
        font-size: 2.3em;
    }

    .sec-titel p {
        font-size: 1em;
        transform: translate(-50% , min(2vw , -0px));
    }

    p.sec-t-cnt {
        font-size: min(4.37vw , 18px);
    }

    .btn p {
        font-size: min(5.6vw , 32px);
    }

    .sp {
        display: block;
    }

    /* ---------------------------------- sp_ヘッダー ---------------------------------- */

    #header {
        height: 60px;
        font-size: min(3.75vw , 16px);
    }

    #header-in {
        height: 100%;
    }


    .header-menu {
        position: fixed;
        overflow-y: scroll;
        top: 0;
        left: 0;
        transform: translateX(100%);
        width: 100%;
        height: 100vh;
        padding: 2em;
        background-color: #fff;
        transition: .5s ease all;
    }
    .header-menu.active {
        transform: translateX(0);
    }

    .header-menu-in {
        flex-direction: column;
        max-width: 500px;
        margin: 0 auto;
    }

    #header-in .logo {
        width: 30%;
    }

    nav {
        width: 100%;
    }

    nav ul {
        flex-direction: column;
        margin-bottom: 2em;
    }

    nav li {
        border-right: 0;
        border-bottom: 1px solid #333;
    }

    nav li a {
        padding: 1.5em 0 1.5em 1em;
    }
    
    .header-menu .cv {
        width: 100%;
        text-align: center;
        font-size: 1.2em;
    }

    /* ハンバーガー */
    .hamburger {
        pointer-events: all;
        position: relative;
        display: block;
        width: auto;
        height: 100%;
        max-height: 60px;
        aspect-ratio: 1 / 1;
        background-color: #FA0000;
        border-radius: 50vw;
        transition: background-color .2s ease;
    }
    .hamburger:hover {
        background-color: #fff;
    }

    .hamburger-in {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: .2em;
        background-color: #fff; 
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
    }
    .hamburger:hover span {
        background-color: #FA0000;
    }

    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .hamburger span:nth-child(3) { top: 100%; transform: translateY(-100%); }



    .hamburger.active span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }


    /* ---------------------------------- sp_FV ---------------------------------- */

    #fv {
        height: calc(100vh - 60px);
        max-height: 700px;
        min-height: 700px;
        margin-top: 60px;
        font-size: min(3.75vw , 16px);
    }

    .kv {
        flex-direction: column;
    }
    .kv-img {
        width: 100%;
    }

    .kv-img.kv-1 {
        background: url(../images/kv_01-sp.webp) no-repeat center / cover;
    }
    .kv-img.kv-2 {
        background: url(../images/kv_02-sp.webp) no-repeat top / cover;
    }
    .kv-img.kv-3 {
        background: url(../images/kv_03-sp.webp) no-repeat center / cover;
    }

    .kv-img.kv-1 {
        transform: translateX(-100%);
    }

    .kv-img.kv-2 {
        transform: translateX(-100%);

    }
    .kv-img.kv-3 {
        transform: translateX(-100%);

    }

    #fv.load .kv-img.kv-1,
    #fv.load .kv-img.kv-2,
    #fv.load .kv-img.kv-3 {
        transform: translatex(0);
    }



    .text-2 p {
        font-size: min(3.75vw , 16px);
    }

    #fv p span {
        display: inline;
    }

    .text-2 {
        position: relative;
    }

    #fv .copy {
        width: 90%;
        font-size: min(3.75vw , 28px);
        transform: translate(-50% , -50%);
    }

    .copy .flex-item_1 {
        width: 22%;
    }

    .copy .flex-item_2 {
        width: 78%;
    }


    .cv-banner {
        font-size: min(3.75vw , 16px);
    }

    
    /* ---------------------------------- sp_リード ---------------------------------- */


    .sec.sec-lead {
        padding: 10em 0 4em 0;
    }


    .sec-lead p {
        font-size: min(6.8vw , 30px);
    }
    


    /* ---------------------------------- sp_サービス特徴 ---------------------------------- */

    #sec-1 .flex {
        flex-direction: column;
        gap: 2em;
        margin-bottom: 2em;
        padding-bottom: 2em;
        font-size: min(3.75vw , 16px);
    }

    #sec-1 .box {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
 

    #sec-1 .flex-item {
        width: 100%;
    }

    .box-title,
    #sec-1 .box-2 .box-title {
        display: flex;
    }
    

    .box-title h4,
    #sec-1 .box-2 .box-title h4 {
        font-size: min(6.25vw , 40px);
    }

    .box-title .box-icon,
    #sec-1 .box-2 .box-title .box-icon {
        width: 25%;
        max-width: 100px;
        margin: 0;
    }
    
    .box .text-box {
        width: 100%;
    }

    #sec-1 .number {
        bottom: auto;
        top: 0;
    }

    #sec-1 .flex-item.flex-item_1,
    #sec-1 .box-2 .flex-item.flex-item_2 {
        padding-bottom: 2em;
        border-right: 0;    
        border-bottom: 1px solid #FF9999;    
    }

    #sec-1 .box-2 .flex-item {
        width: 100%;
    }

    #sec-1 .flex-item.flex-item_1 .flex-item-in,
    #sec-1 .flex-item.flex-item_2 .flex-item-in,
    #sec-1 .box-2 .flex-item.flex-item_3 .flex-item-in {
        width: 90%;
        margin: 0 auto;
    }

    #sec-1 .box-2 .box-title .title-text {
        width: 75%;
    }

    #sec-1 .number p {
        font-size: min(31.25vw , 120px);
    }
    
    #sec-1 .box-2 .number,
    #sec-1 .box-2 .flex-item_3 .number {
        transform: translate(0);
    }

    .box-title p {
        font-size: 1em;
    }


    

    /* ---------------------------------- sp_こんな方におすすめ ---------------------------------- */


    #sec-2 .sec-titel img {
        width: 100%;

    }

    #sec-2 .flex {
        flex-direction: column;
        max-width: 500px;
        margin: 0 auto 4em auto;
        gap: 3em;
    }

    #sec-2 .flex .flex-item {
        text-align: center;
        width: 100%;
        font-size: min(6.25vw , 30px);
    }

     #sec-2 .flex-t {
        display: inline-block;
        width: 13em;
     }


    /* ---------------------------------- sp_取り扱い商品 ---------------------------------- */

    #sec-3 .flex {
        max-width: 500px;
        margin: 0 auto 8.5em auto;
    }

    #sec-3 .flex-item {
        width: 100%;
    }

    #sec-3 .flex .text p {
        font-size: min(3.75vw , 20px);
    }

    #sec-3 .btn-img {
        width: 4em;
    }

    #sec-3 .btn .flex p {
        width: calc(100% - 4em);
        font-size: min(4.1vw , 26px);
    }


    #sec-3 .btn .flex {
        gap: 1em;
    }

    #sec-3 .white {
        transform: translate(-27%, 3em);
    }

    #sec-3 .flex-img::after {
        top: -10%;
    }



    /* ---------------------------------- sp_新規会員登録について ---------------------------------- */

    #sec-4 .flex {
        flex-direction: column;
        gap: 2em;
        max-width: 500px;
        margin: 0 auto 4em auto;

    }

    #sec-4 .flex::after {
        display: none;
    }


    #sec-4 .flex-item_1 p {
        font-size: min(5vw, 24px);
    }

    #sec-4 .flex-t h4 {
       font-size: min(6.25vw, 30px); 
    }


        /* ---------------------------------- sp_ご利用の流れ ---------------------------------- */



    .howto-item {
        width: 80%;
        max-width: 300px;
    }

    .howto-item.sp {
        width: 2em;
    }

    .howto-container {
        padding-left: 0;
        width: 100%;
    }

    @keyframes scroll {
        0% {
            transform: translate(0 , 2.5em);
        }

        50% {
            transform: translate(1.5em , 2.5em);
        }

        100% {
           transform: translate(0 , 2.5em);
        }
    }

    #sec-5 .scroll {
        transform: translate(0 , 2.5em);
    }

    .howto-list {
        width: 100%;
        padding-right: 0;
    }

    /* ---------------------------------- sp_よくある質問 ---------------------------------- */


    .faq-q {
        font-size: min(4.37vw , 20px);
    }

    .faq-accordion {
        margin-bottom: 4em;
    }

    .howto-step {
        font-size: 1em;
    }

    .howto-text p {
        font-size: min(3.75vw , 14s px);
    }


    /* ---------------------------------- sp_フッター ---------------------------------- */

    #footer {
        font-size: min(3.75vw , 16px);
    }


    #footer .flex-wrap {
        flex-direction: column;
    }

    #footer .flex-1 {
        justify-content: center;
        text-align: center;
        margin: 0 auto;
    }

    #footer .flex-imte_2 {
        width: 80%;
        max-width: 400px;
        margin: 0 auto;
    }

    #footer .flex-imte_2 li {
        width: calc(100% / 2 - .8em);
    }

    /* ---------------------------------- sp_固定ボタン ---------------------------------- */


    .flx-btn {
        bottom: .5em;
        right: .5em;
        width: 32%;
        max-width: 150px;
    }

    .flx-btn-in img.flx-btn-img_2 {
        width: 75%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

}


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

    #fv {
        max-height: 600px;
        min-height: initial;
    }

    .kv-img.kv-3 {
        background: url(../images/kv_03-sp.webp) no-repeat top / cover;
    }


    /* ---------------------------------- sp_固定ボタン ---------------------------------- */


    .flx-btn {
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: initial;
        aspect-ratio: 5 / 1;
    }

    .flx-btn-in img.flx-btn-img {
        animation: initial;
        object-fit: contain;
    }

    .flx-btn::after {
        aspect-ratio: initial;
        height: calc(100% + 1em);
        border-radius: 0;
    }

    .flx-btn-in img.sp {
        display: none;
    }

}