/* rootここから */
:root {
    --main-color: #31b6a0;
}

/* rootここまで */

/* 全体共通ここから */
body {
    max-width: fit-content;
    margin: auto;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.fugaz-one {
    font-family: "Fugaz One", serif;
    font-weight: 400;
    font-style: normal;
}

.h2-wrapper {
    text-align: center;
    margin: auto;
}

.h2-wrapper h2 {
    font-size: 30px;
    padding-bottom: 15px;
}

.h2-under {
    border: 3px solid var(--main-color);
    width: 100px;
    margin: auto;
}

.text-color-white {
    color: white;
}

/*タイトル付き（ラベルボックス）*/
.taiou-uchiwake {
    background-color: #fff;
    /* ボックス背景色 */
    padding: 2em;
    /* ボックス内側余白 */
    position: relative;
    /* 配置(ここを基準に) */
    border: 2px solid var(--main-color);
    /* ボックスの線 (太さ・種類・色)*/
    margin: 3% 10%;
}

.taiou-uchiwake .taiou-uchiwake-title {
    background-color: #fff;
    /* タイトル背景色 */
    font-size: 15px;
    /* タイトル文字の大きさ */
    font-weight: 800;
    color: #666;
    /* タイトル文字色 */
    padding: 0 5px;
    /*タイトルの余白*/
    line-height: 1;
    /*タイトルの行の高さ*/
    position: absolute;
    /* 配置(ここを動かす) */
    top: -8px;
    /*上からの距離*/
    left: 20px;
    /*左からの距離*/
}

.rellax {
    z-index: -1;
    position: relative;
    /* 相対位置に設定 */
    top: 100px;
    /* 上から50pxだけ下げる */
}

.sp-br {
    display: none;
}

.sp-only {
    display: none;
}

/* ボタンここから */
.btn-wrapper {
    text-align: center;
    width: 100%;
    padding: 3%;
}

.btn-microcopy {
    margin-bottom: 10px;
}

.btn-wrapper span {
    font-size: 20px;
    font-weight: bold;
}

.btn-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 縦方向も中央に */
    width: 100%;
}

.btn-flex a {
    text-decoration: none;
}

.btn-iphone {
    margin-right: 10px;
}

.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    padding: .9em 2em;
    border: 1px solid green;
    border-radius: 25px;
    background-color: #fff;
    color: var(--main-color);
    font-size: 1em;
    box-shadow: rgb(57, 57, 57, 0.5) 2px 2px 8px 2px;
    font-weight: bold;
}

.button-1::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
    content: '';
}

/* ボタンここまで */

/* 全体共通ここまで */


/* ファーストビューここから */
.fv-wrapper {
    width: 100%;
    height: 70%;
    background-image: url(img/fv_bg.webp);
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.fv-top {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    padding-top: 3%;
}

.fv-top-left {
    width: 50%;
    padding-top: 5%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fv-top-left p {
    text-align: left;
    text-align: center;
    font-weight: bold;
}

.balloon-001 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: var(--main-color);
    color: white;
    text-align: center;
    font-size: 18px;
}

.balloon-001::before {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: var(--main-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.fv-top-title {
    font-size: 32px;
    line-height: 60px;
}

.fv-top-right {
    width: 40%;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0px 0px 10px #7e7e7e);
}

.fv-app-img {
    width: 100%;
    max-width: 350px;
    height: auto;
}

.fv-attention {
    width: 90%;
    margin: auto;
    padding-top: 2%;
    font-size: 0.7rem;
    text-align: right;
}

.pc-fv-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 2%;
}

.sp-fv-bottom {
    display: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.fv-bottom-msg {
    text-align: center;
}

.fv-bottom-msg-sub {
    font-weight: lighter;
}

.fv-bottom-msg-main {
    font-size: 40px;
}

.fv-margin {
    margin-right: 3%;
}

.app-icon-img {
    width: 10%;
    height: 10%;

    max-width: 100px;
    max-height: 100px;
}

.dl-btn-kari {
    background-color: var(--main-color);
    padding: 2%;
}

/* ファーストビューここまで */



/* お悩みここから */
.nayami {
    display: flex;
    align-items: center;
    text-align: center;
    max-width: 90%;
    margin: 1% auto;
}

.nayami-prop {
    text-align: center;
    border: 2px solid var(--main-color);
    margin: 2%;
    border-radius: 50px;
    width: 100%;
    box-shadow: gray 5px 5px 5px 5px;
    padding: 2%;
}

.nayami-prop p {
    font-size: 24px;
}

.nayami img {
    width: 50%;
}

/* お悩みここまで */

/* あなたにtokuriaここから */
.anata-tokuria-wrapper {
    text-align: center;
    padding: 2%;
    background-color: rgb(57, 57, 57);
    margin-bottom: 3%;
}

.anata-tokuria-wrapper h2 {
    font-size: 30px;
    color: white;
    line-height: 60px;
}

.anata-tokuria-wrapper span {
    font-size: 50px;
    font-family: "Fugaz One", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--main-color);
    padding: 0 3px;
    background-color: white;
}

/* あなたにtokuriaここまで */

/* tokuriaとはここから */
.about-tokuria {
    display: flex;
    margin: auto 5%;
    align-items: center;
    padding-bottom: 3%;
}

.about-tokuria-left {
    flex: 2;
    text-align: center;
}

.about-tokuria-left img {
    width: 60%;
}

.about-tokuria-right {
    flex: 2;

}

.about-tokuria-right p {
    line-height: 35px;
}

.about-tokuria-right span {
    font-size: 13px;
}

/* tokuriaとはここまで */

/* tokuria機能紹介ここから */
.tokuria-function-wrapper {
    background-color: var(--main-color);
    padding: 3% 0;
}

.tokuria-function-wrapper h2 {
    color: white;
}

.tokuria-function-wrapper .h2-under {
    border: 3px solid white;
}

.tokuria-function-item.pc-only {
    display: flex;
}

.tokuria-function-item {
    margin: 2% 10%;
    padding: 2%;
    border: 2px solid black;
    background-color: white;
    box-shadow: white 2px 2px 8px 2px;
    align-items: center;
}

.point-img {
    width: 8%;
    height: 8%;
    margin: 0 3%;
}

.function-img {
    width: 20%;
    height: 20%;
    margin: 0 3%;

}

.function-text {
    width: 100%;
    text-align: center;
}

.function-text h3 {
    font-size: 24px;
    padding-bottom: 2%;
}

.function-text p {
    line-height: 32px;
    font-size: 18px;
}

/* tokuria機能紹介ここまで */

/* 具体例ここから */
.example-wrapper {
    padding: 3% 0;
}

.example-wrapper-explain {
    text-align: center;
    padding: 1%;
    color: gray;
}

.example-carousel {
    text-align: center;
    width: 80%;
    margin: auto auto;
}

.example-item img {
    width: 15%;
    margin: auto auto;
}

/* 具体例ここまで */

/* 件数関連ここから */
.taiou-top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.taiou-top-wrapper img {
    width: 10%;
}

.taiou-sum-wrapper {
    text-align: center;
    margin: 2% 0;
}

.number {
    font-size: 30px;
    font-weight: bold;
}

table {
    width: 100%;
    text-align: center;
}

/* 件数関連ここまで */

/* フッターここから */
.footer {
    background-color: var(--main-color);
    text-align: center;
    padding: 5% 0;
}

.footer p {
    font-size: 32px;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: white;
}

.footer .btn-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.footer-end {
    text-align: center;
    padding: 3%;
}

.footer-end img {
    width: 50%;
}

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

/* フッター下ここから */
.footer-end img {
    width: 20%;
}

.footer-end-link {
    display: flex;
    justify-content: space-around;
}

.footer-end-link a:visited {
    color: #0000ff;
}

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



/* CTAここから */
.cta-wrapper {
    background-image: url("img/cta-bg.webp");
    background-size: cover;
    background-position: center;
}

.cta-contents {
    display: flex;
    align-items: center;
    /* 縦中央 */
    justify-content: center;
    padding: 5% 0;
    width: 100%;
}

.cta-contents img {
    width: 10%;
}

.cta-msg {
    text-align: center;
    color: white;
    margin-bottom: 10px;
}

/* CTAここまで */



/* フェードインここから */
.fade-in,
.fade-in-load {
    opacity: 0;
}

.fade-in.inview,
.fade-in-load.inview {
    animation-name: fade-in;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-delay: .4s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes fade-in {
    0% {
        transform: translateY(40px);
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes fade-in-load {
    0% {
        transform: translateY(40px);
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* フェードインここまで */

/* レスポンシブここから */
@media screen and (max-width: 768px) {
    .cta-contents {
        flex-direction: column;
    }

    .cta-contents img {
        width: 20%;
    }

    .cta-wrapper .button-1 {
        max-width: 200px;
    }
}

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

    /* 共通ここから */
    .h2-wrapper {
        padding: 5% 0;
    }

    .sp-br {
        display: block;
    }

    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .rellax {
        top: 0;
    }

    /* 共通ここまで */

    /* fvここから */
    .fv-top {
        flex-direction: column;

    }

    .fv-top-left {
        display: block;
    }

    .fv-top-left,
    .fv-top-right {
        width: 100%;
    }

    .balloon-001 {
        font-size: 14px;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .fv-top-title {
        font-size: 18px;
        line-height: 36px;
    }

    .fv-attention {
        font-size: 0.5rem;
    }

    .pc-fv-bottom {
        display: none;
    }

    .sp-fv-bottom {
        display: block;
        padding: 3%;
    }

    .sp-fv-bottom-top {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sp-fv-bottom-top img {
        width: 15%;
    }

    .sp-fv-bottom-bottom {
        margin: auto;
    }

    .fv-bottom-msg-sub {
        font-size: 14px;
    }

    .fv-bottom-msg-main {
        font-size: 32px;
    }

    /* fvここまで */

    /* お悩みここから */
    .nayami {
        display: block;
        align-items: normal;
    }

    .nayami-prop {
        width: 95%;
        margin-bottom: 10%;
    }

    .nayami-prop img {
        width: 40%;
    }

    /* お悩みここまで */

    /* あなたにtokuriaここから */
    .anata-tokuria-wrapper {
        line-height: 35px;
        padding: 5% 0;
    }

    /* あなたにtokuriaここまで */

    /* tokuriaとはここから */
    .about-tokuria {
        display: block;
    }

    .about-tokuria p {
        margin: 3%;
    }

    .about-tokuria-left img {
        width: 90%;
    }

    /* tokuriaとはここまで */

    /* tokuria機能紹介ここから */
    .tokuria-function-item.pc-only {
        display: none;
    }

    .tokuria-function-item {
        margin: 5%;
        justify-content: space-between;
    }

    .tokuria-function-item h3 {
        font-size: 22px;
    }

    .tokuria-function-item p {
        font-size: 16px;
        line-height: 24px;
    }

    .sp-function-top {
        display: flex;
        align-items: center;
    }

    .point-img {
        width: 15%;
    }

    .function-img {
        text-align: center;
    }

    /* tokuria機能紹介ここまで */

    /* 具体例ここから */
    .example-item img {
        width: 50%;
    }

    /* 具体例ここまで */

    /* 件数関連ここから */
    .taiou-top-wrapper img {
        width: 20%;
    }

    .taiou-uchiwake {
        padding: 5%;
    }

    /* 件数関連ここまで */

    /* フッターここから */
    .footer p {
        font-size: 24px;
    }

    .footer-end img {
        width: 50%;
    }

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

    /* CTAここから */
    .cta-contents .btn-flex {
        flex-direction: column;
    }

    .cta-contents .btn-iphone {
        margin-right: 0;
        margin-bottom: 5px;
    }

    /* CTAここまで */
}

/* レスポンシブここまで */