@charset "utf-8";

html {
    font-size: 62.5%;
    /* 1rem = 10px */
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    scroll-behavior: smooth;
}

@media screen and (max-width:750px) {
    html {
        font-size: 1.333vw;
        /* = 10px / 750px */
    }
}

img {
    display: block;
}

/* =================================
common
================================= */
#app {
    padding-top: 114px;
}

#app #wrap {
    margin: 0 auto;
}

#app .app_inner {
    width: 98rem;
    margin: 0 auto;
}

.attention {
    text-align: center;
    font-size: 1.2rem;
}

.item_position {
    position: absolute;
}

#app .bg_dots {
    background-position: 0 0, 9px 19px;
    background-size: 19px 39px;
}

#app .bg_dots.blue {
    background-color: #b1dff7;
    background-image: radial-gradient(circle, #cceafa 3px, transparent 3px), radial-gradient(circle, #cceafa 3px, transparent 3px);
}

#app .bg_dots.yellow {
    background-color: #fbf2b1;
    background-image: radial-gradient(circle, #fcf7cc 3px, transparent 3px), radial-gradient(circle, #fcf7cc 3px, transparent 3px);
}

@media screen and (max-width:750px) {
    #app {
        padding-top: 15vw;
    }

    #app .app_inner {
        width: 69rem;
    }

    #app .attention {
        font-size: 1.8rem;
    }

    #app .bg_dots {
        background-image: radial-gradient(circle, #cceafa 2.5px, transparent 2.5px), radial-gradient(circle, #cceafa 2.5px, transparent 2.5px);
        background-position: 0 0, 8px 16px;
        background-size: 19px 27px;
    }

    #app .bg_dots.blue {
        background-image: radial-gradient(circle, #cceafa 2.5px, transparent 2.5px), radial-gradient(circle, #cceafa 2.5px, transparent 2.5px);
    }

    #app .bg_dots.yellow {
        background-image: radial-gradient(circle, #fcf7cc 2.5px, transparent 2.5px), radial-gradient(circle, #fcf7cc 2.5px, transparent 2.5px);
    }
}



/* =================================
app__kv
================================= */
#app .app__kv {
    background: url(../img3/app__kv_bg.png) no-repeat;
    background-size: cover;
}

@media screen and (max-width:750px) {
    #app .app__kv .app_inner {
        width: 100%;
    }
}



/* =================================
app__alignment
================================= */
#app .app__alignment {
    padding: 7rem 0 5.5rem;
}

#app .app__alignment .app_inner:nth-child(1) {
    position: relative;
}

#app .app__alignment .app_inner:nth-child(1) .item_position {
    bottom: 10%;
    left: 70%;
}

@media screen and (max-width:750px) {
    #app .app__alignment {
        padding: 6rem 0 6.5rem;
    }
}


/* =============== app__alignment__other =============== */
#app .app__alignment__other {
    position: relative;
}

#app .app__alignment__other .ttl {
    width: 30rem;
    left: 0;
    right: 0;
    top: -2rem;
    margin: auto;
    z-index: 1;
}

#app .app__alignment__other .rikuko {
    width: 16rem;
    left: 66%;
    top: -11rem;
    z-index: 1;
}

#app .app__alignment__other .attention {
    margin-top: 1rem;
}

/* =============== スライダー =============== */
#app .app__alignment__other .logo__slide {
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    margin-top: 8rem;
}

#app .app__alignment__other .logo__slide .splide__slide img {
    height: 11.2rem;
    width: auto;
    display: block;
}

@media screen and (max-width:750px) {
    #app .app__alignment__other .ttl {
        width: 37rem;
    }

    #app .app__alignment__other .rikuko {
        width: 21.5rem;
        left: 63%;
        top: -19rem;
    }

    #app .app__alignment__other .logo__slide .splide__slide img {
        height: 14.2rem;
    }
}



/* =================================
app__utilization
================================= */
#app .app__utilization {
    background-color: #fbf2b1;
    padding-bottom: 8rem;
}

#app .app__utilization .ttl {
    width: fit-content;
    margin: auto;
}

#app .app__utilization__point {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#app .app__utilization__point .position {
    position: relative;
}

#app .point01 .point01_itemwrap {
    display: flex;
    justify-content: center;
    gap: 3rem;
    top: 47%;
    left: 0;
    right: 0;
    margin: auto;
}

#app .point01 .item01 {
    top: 48%;
    left: 3%;
}

#app .point01 .item02 {
    left: .5%;
    right: 0;
    top: 66%;
    margin: auto;
}


#app .app__utilization__point .flex_box {
    display: flex;
    justify-content: space-between;
}

#app .point03 .item {
    top: 14.5%;
    left: 0.5%;
}

@media screen and (max-width:750px) {
    #app .app__utilization__point {
        gap: 2.5rem;
    }

    #app .app__utilization__point .flex_box {
        flex-direction: column;
        gap: 2.5rem;
    }

    #app .point01 .point01_itemwrap {
        flex-direction: column;
        top: 31%;
    }

    #app .point01 .item01 {
        width: 92%;
        top: 31%;
        left: 0;
        right: 0;
        margin: auto;
    }

    #app .point01 .item02 {
        width: 10%;
        left: 0;
        top: 60%;
    }

    #app .point03 .item {
        width: 98.5%;
        top: 9.5%;
        left: 0;
        right: 0;
        margin: auto;
    }
}



/* =================================
app__voice
================================= */
#app .app__voice {
    padding-bottom: 7rem;
}

#app .app__voice .ttl {
    width: fit-content;
    margin: auto;
}

#app .app__voice .app_inner:nth-child(1) {
    position: relative;
}

#app .app__voice .app_inner:nth-child(1) .item_position {
    bottom: 10%;
    left: 70%;
}

#app .app__voice .attention {
    margin-top: 1rem;
}



/* =================================
app__howto
================================= */
#app .app__howto {
    position: relative;
    padding-bottom: 7rem;
}

#app .app__howto .ttl {
    width: fit-content;
    margin: auto;
}

#app .app__howto .btn_wrap {
    position: relative;
}

/* =============== app__howto__howto01 =============== */
#app .app__howto__howto01 {
    margin-bottom: 5rem;
}

#app .app__howto__howto01.btn_wrap .btn {
    position: absolute;
    width: 50.8rem;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 6rem;
}

#app .app__howto__howto01 .rikuko {
    position: absolute;
    bottom: 12.5%;
    right: 39%;
    width: 18rem;
}


/* #app .app__howto__howto02 { */
#app .app__howto__howto02 {
    position: relative;
}

#app .app__howto .app__howto__howto02 .btn_wrap {
    position: absolute;
    display: flex;
    gap: 1rem;
    top: 70%;
    right: 10%;
}

#app .app__howto__howto02 .howto_contents {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 3rem;
    width: 87rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

#app .app__howto__howto02 .howto02__top {
    position: relative;
}

#app .app__howto__howto02 .howto02__bottom .tab_buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

#app .app__howto__howto02 .howto02__bottom .tab_btn {
    position: relative;
    padding: 1.2rem;
    font-size: 1.6rem;
    line-height: 1;
    color: #1d2088;
    background-color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: .5rem;
    border: solid 1px #1d2088;
}

#app .app__howto__howto02 .howto02__bottom .tab_btn::after {
    content: '';
    position: absolute;
    bottom: -1.5px;
    left: 0;
    right: 0;
    height: 1.5px;
    opacity: 0;
}

#app .app__howto__howto02 .howto02__bottom .tab_btn.active {
    background: #1d2088;
    color: #fff;
}

#app .app__howto__howto02 .howto02__bottom .tab_btn.active::after {
    content: "";
    display: block;
    height: 2rem;
    width: 2rem;
    background: #1d2088;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -1.5rem;
}

#app .app__howto__howto02 .howto02__bottom .tab_btn.active::after {
    opacity: 1;
}

#app .app__howto__howto02 .howto02__bottom .tab_btn span {
    display: block;
    font-size: 3.2rem;
    line-height: 1;
}

#app .app__howto__howto02 .howto02__bottom .tab_buttons .tab_btn:last-child span {
    font-size: 2rem;
}

#app .app__howto__howto02 .howto02__bottom .tab_panel_wrapper {
    border-radius: 0 6px 6px 6px;
    overflow: hidden;
    transition: border-color 0.3s;
}

#app .app__howto__howto02 .howto02__bottom .tab_panel {
    display: none;
    margin-top: 1.8rem;
    animation: fadeIn 0.25s ease;
}

#app .app__howto__howto02 .howto02__bottom .tab_panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#app .app__howto__howto02 .howto02__bottom .panel-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

@media screen and (max-width:750px) {
    #app .app__howto .app__howto__howto01 {
        margin-bottom: 6rem;
    }

    /* app__howto__howto01 */
    #app .app__howto__howto01.btn_wrap .btn {
        width: 90%;
    }

    #app .app__howto__howto01 .rikuko {
        bottom: 10%;
        right: 26%;
        width: 25rem;
    }

    /* app__howto__howto02 */
    #app .app__howto__howto02 .howto_contents {
        width: 90%;
        bottom: 7rem;
    }

    #app .app__howto__howto02 .howto02__bottom .tab_buttons {
        gap: 3rem;
    }

    #app .app__howto .app__howto__howto02 .btn_wrap {
        flex-direction: column;
        gap: 3rem;
        top: 39%;
        right: 8%;
        width: 28.5rem;
    }

    #app .app__howto__howto02 .howto02__bottom .tab_btn {
        font-size: 2rem;
        padding: 1.5rem;
        border-radius: 1rem;
    }

    #app .app__howto__howto02 .howto02__bottom .tab_btn span {
        font-size: 4rem;
    }

    #app .app__howto__howto02 .howto02__bottom .tab_buttons .tab_btn:last-child span {
        font-size: 2.6rem;
    }
}



/* =================================
app__qa
================================= */
#app .app__qa {
    padding-bottom: 6rem;
}

#app .app__qa .ttl {
    width: fit-content;
    margin: auto;
}

#app .qa-container {
    position: relative;
    width: 90rem;
    margin: 0 auto;
    background-color: #fff;
    padding: 6rem 0 11rem;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    border-radius: 2rem;
}

#app .qa_item {
    width: 80rem;
    background-color: #edf1fc;
    border-radius: .8rem;
    overflow: hidden;
}

#app .qa_question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem 1.2rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 2rem;

}

#app .qa_q_content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

#app .qa_q-icon {
    width: 4.8rem;
    height: auto;
    flex-shrink: 0;
}

#app .qa_q_text {
    margin: 0;
    font-weight: bold;
    color: #1a237e;
    font-size: 2rem;
    line-height: 1.2;
}

#app .qa_arrow {
    width: 2rem;
    height: 2rem;
    border-top: .6rem solid #1a237e;
    border-right: .6rem solid #1a237e;
    transform: rotate(135deg);
    transition: transform 0.3s ease, margin-top 0.3s ease;
    flex-shrink: 0;
    margin-left: 1.5rem
}

#app .qa_item.is-open .qa_arrow {
    transform: rotate(-45deg);
    margin-top: .8rem;
}

#app .qa_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #fff;
}

#app .qa_item.is-open .qa_answer {
    max-height: 2000rem;
}

#app .qa_a_content {
    padding: 1.2rem 2rem 1.2rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

#app .qa_a_content .qa_a_text {
    width: 94%;
}

#app .qa_a_content img {
    width: 33rem;
}


#app .qa_a_content .qa_a_icon {
    width: 4.8rem;
    height: auto;
    flex-shrink: 0;
}

#app .qa_a_text p,
#app .qa_a_text img {
    margin-bottom: 2rem;
}

#app .txt_red {
    color: #ee0000;
}

#app .qa_a_flex {
    display: flex;
}

#app .qa_a_flex img {
    width: 30rem;
}

#app .qa_a_text a {
    color: #1a237e;
    text-decoration: underline;
}

#app .qa_a_flex>div:first-child p {
    margin-left: 2.2rem;
}

#app .qa_faq_link_group {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .5rem;
}

#app .faq_label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #1a237e;
    color: #ffffff;
    padding: .6rem 1.2rem;
    flex-shrink: 0;
    height: 1.6em;
    border-radius: .6rem;
}

#app .faq_link {
    color: #1a237e;
    text-decoration: underline;
}

#app .direct_link {
    display: inline-block;
    margin-top: .5rem;
    color: #1a237e;
    text-decoration: underline;
    padding-bottom: 2rem;
}

#app .qa_a_content .q5_1_img {
    width: 36rem;
}

#app .qa_a_content .q5_5_img {
    width: 33.4rem;
}

#app .faq_youtube_wrap {
    display: flex;
    gap: 2rem;
}

#app .faq_youtube_content p {
    margin-bottom: 1rem;
}

#app .faq_youtube_content iframe {
    width: 35.6rem;
    height: 20rem;
}

#app .qa-container .btn {
    position: absolute;
    width: 18rem;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 3rem;
}


@media screen and (max-width:750px) {
    #app .qa-container {
        width: 90%;
        gap: 3rem;
        padding: 3rem 0 15rem;
    }

    #app .qa_a_content p {
        font-size: 2.4rem;
    }

    #app .qa_a_content img {
        width: 50rem;
        margin-bottom: 4rem;
    }

    #app .qa_arrow {
        width: 3rem;
        height: 3rem;
        border-top: 1rem solid #1a237e;
        border-right: 1rem solid #1a237e;
    }

    #app .qa_item {
        width: 63rem;
    }

    #app .qa_question {
        padding: 1.5rem 2.3rem 1.5rem 1.3rem;
    }

    #app .qa_q_content {
        align-items: start;
    }

    #app .qa_q-icon {
        width: 7rem;
    }

    #app .qa_a_content .qa_a_icon {
        width: 7rem;
    }

    #app .qa_q_text {
        font-size: 3rem;
        width: 46rem;
    }

    #app .qa_a_flex {
        flex-direction: column;
    }

    #app .qa_a_content {
        padding: 2rem 0rem 1.2rem 1rem;
    }

    #app .qa_a_flex p {
        margin-bottom: .5rem;
    }

    #app .qa_a_flex>div:first-child p {
        margin-left: 4.2rem;
    }

    #app .qa_faq_link_group {
        align-items: flex-start;
    }

    #app .direct_link.--new {
        display: block;
        /* text-align: right; */
        width: 100%;
    }

    #app .faq_label {
        padding: 1rem 1.5rem;
        height: 4rem;
        border-radius: .6rem;
        font-size: 2.4rem;
    }

    #app .faq_link,
    #app .qa_a_text a {
        font-size: 2.4rem;
    }

    #app .qa_a_content .q5_1_img {
        width: 53.2rem;
    }

    #app .qa_a_content .q5_5_img {
        width: 50rem;
    }

    #app .faq_youtube_wrap {
        flex-direction: column;
        gap: 1rem;
    }

    #app .faq_youtube_content iframe {
        width: 53rem;
        height: 30rem;
    }

    #app .qa-container .btn {
        width: 26.5rem;
        bottom: 3.5rem;
    }

}



/* =================================
ダウンロードボタン
================================= */
#app #app-flyout {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    margin: auto 0;
    width: 12rem;
}

#app #app-flyout li a {
    display: block;
}

#app #app-flyout li:nth-child(2) a {
    margin-top: -1rem;
}

/* キャンペーンバナー */
#app .cp-bnr {
    display: block;
    width: fit-content;
    margin: 50px auto 30px;
    text-align: center;
}

#app #merit3 .setsuden-challeng {
    margin: 50px auto 0;
    text-align: center;
}

#app #merit3 p.setsuden-challeng {
    padding-left: 0;
}

@media screen and (max-width:750px) {
    #app #app-flyout {
        width: 16rem;
        right: 0;
        top: auto;
        bottom: 2rem;
        height: auto;
        margin: initial;
    }
}