@charset "utf-8";
/* 共通部品 */
:root{
    --mainColor1: #5cbda2;
    --subColor1: #e5f4f3;
    --mainColor2: #f78e48;
    /*--subColor2: #;*/
    --white: #fff;
    --mainColor3: #0f947c;
}
.pc-view{
    display: block;}
.sp-view{
    display: none;}
article{
    width: 100%;}

html{
    font-size: 10px;
    font-family: 'Noto Sans JP', sans-serif, YuGothic,'Yu Gothic','メイリオ', Meiryo,
                'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
    font-weight: 500;
    color:#4d4d4d;}
body{
    font-size: 1.2rem;
    position: relative;
    margin:0 auto;
    color:#4d4d4d;}
html,body{
    max-width: 100%;
    overflow-x: hidden;
}
label.error {
    color: red;
}
/* a {
    color: var(--mainColor3);
} */
button, input, select, textarea{
    font-family: 'Noto Sans JP', sans-serif, YuGothic,'Yu Gothic','メイリオ', Meiryo,
                'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
    font-size: 1.2rem;
    color:#4d4d4d;}

.main-color1{
    color:var(--mainColor1);}
.sub-color1{
    color:var(--subColor1);}
.main-color2{
    color:var(--mainColor2);}
.main-color3{
    color:var(--mainColor3);}
.white-color{
    color:var(--white);}

.zero-margin{
    margin: 0;}
.zero-padding{
    padding: 0;}
.width-max{
    width: 100%;}
.height-max{
    height: 100%;}
.width-80{
    width: 80%;}
.width-half{
    width: 50%;}
.width-33{
    width: 33.333%;}
.height-80{
    height: 80%;}
.center-margin{
    margin-left: auto;
    margin-right: auto;}
.pointer{
    cursor: pointer;}

.opacity-on{
    opacity: 1;}
.opacity-off{
    opacity: 0;}
.bottom-halfline-margin{
    margin-bottom: 0.8rem;}
.bottom-1line-margin{
    margin-bottom: 1.6rem;}
.bottom-2line-margin{
    margin-bottom: 3.2rem;}
.bottom-1line-padding{
    padding-bottom: 1.6rem;}
.bottom-2line-padding{
    padding-bottom: 3.2rem;}
.top-bottom-small-padding{
    padding-top: 1rem;
    padding-bottom: 1rem;}
.top-bottom-middle-padding{
    padding-top: 3rem;
    padding-bottom: 3rem;}
.top-bottom-large-padding{
    padding-top: 5rem;
    padding-bottom: 5rem;}
.top-bottom-small-margin{
    margin-top: 1rem;
    margin-bottom: 1rem;}
.top-bottom-middle-margin{
    margin-top: 3rem;
    margin-bottom: 3rem;}
.top-bottom-large-margin{
    margin-top: 5rem;
    margin-bottom: 5rem;}
.content-top-margin{
    margin-top: 8rem;}
.content-bottom-margin{
    margin-bottom: 8rem;}
.left-padding{
    padding-left: 2rem;}
.right-padding{
    padding-right: 2rem;}
.lineup-3{
    width: 33.3%;
    text-align: center;
    font-size: 1rem;
    float: left;}
.lineup-2{
    width: 50%;
    text-align: center;
    font-size: 1rem;
    float: left;}
.lineup-3in2-margin-left{
    margin-left: 16.65%;}
.lineup-3in2-margin-right{
    margin-right:16.65%;}
.float-left{
    float: left;}
.float-clear::after{
    content: "";
    display: block;
    clear: both;}
.table-view{
    display: table;
    width: 100%}
.inline-view{
    display: inline;}
.block-view{
    display: block;}
.inline-block-view{
    display:inline-block;}
.table-cell-view{
    display: table-cell;}
.flex-view{
    list-style: none;
    display: flex;}
    .flex-view.w-center{
        justify-content: center;}
    .flex-view.space-around{/*左右余白 ＋ 均等割り*/
        justify-content: space-around;}
    .flex-view.h-center{
        align-items: center;}
    .flex-view.h-base{
        align-items: baseline;}
    .flex-view.wrap{
        flex-wrap: wrap;}
/* flexの真ん中寄せ ここから (ひとつで完結させる)*/
.flex-vertical-center{
    list-style: none;
    display: flex;
    flex-direction: column; /* 子要素をflexboxにより縦並びに。 */
    justify-content: center; /* 子要素をflexboxにより縦中央に配置する */
    align-items: center; /* 子要素をflexboxにより横中央に配置する */
}
/* flexの真ん中寄せ ここまで*/
.text-left{
    text-align: left;}
.text-right{
    text-align: right;}
.text-center{
    text-align: center;}
.weight-500{
    font-weight: 500;}
.weight-bold{
    font-weight: bold;}
.weight-unset{
    font-weight: unset;}
.font-small{
    font-size: 1.2rem;}
.font-middle{
    font-size: 1.6rem;}
.font-title-sub{
    font-size: 1.82rem;}
.font-large{
    font-size: 2.2rem;}
.topic-path{
    font-size: 1.2rem;}
.brightness:hover{
    filter: brightness(1.1);}

.no-underline{
    text-decoration: unset;}

.content{
    width: calc(100% - 10vw);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
p{
    margin:0;}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.7);}
    header .maru-title:hover{
        background-color:#0f947c;}
    header .logo{
        margin-top: 14px;
        position: absolute;
        top: 0;
        left: 0;
        height: 60%;}
    .header-menu {
        font-size: 1.6rem;
        height: 64px;
        line-height: 64px;
        list-style: none;
        display: flex;
        justify-content: flex-end;}
    .header-menu a {
        padding-left: 2vw;
        padding-right: 2vw;
        text-decoration: none;}
    .header-content{
        width: calc(100% - 10vw);
        margin-left: auto;
        margin-right: auto;
        position: relative;}
    header ul li:last-child{
        margin-left: 30px;}

.maru-title{
    background-color: var(--mainColor1);
    color: var(--white);
    border-radius: 30px;
    line-height: 4rem;
    text-align: center;}
    .maru-title.white-v{
        background-color: var(--white);
        color: #52b789;}
    .maru-title.orange-v{
        background-color: var(--mainColor2);
        color: var(--white);}
    .maru-title.gray-v{
        background-color: #949494;
        color: var(--white);}

.swiper-button-next, .swiper-button-prev{
    position: absolute;
    top: 50%;
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0)),
    url("../../../images/customer/v2/yajirusi_orange.png");
    background-size: 100% 100%;}
    .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after,
    .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
        content:"";}
        .swiper-button-next{
            transform: rotateZ(180deg);}
        .swiper-button-prev{
            transform: rotateZ(0deg);}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        left: -60px;
        right: auto;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        right: -60px;
        left: auto;}

.swiper-container{
    overflow: unset;}
.swiper-container,
.swiper-wrapper,
.swiper-slide{
    align-items: stretch;}
    .swiper-slide{
        position: relative;
        top:0;
        left:0;
        height:auto;}
        .swiper-slide .swiper-content{
            position: absolute;
            bottom: 0;
            left: 0;}

footer{
    }

    footer .footer-content{
        width: calc(100% - 10vw);
        margin-left: auto;
        margin-right: auto;
        position: relative;
        color: #0d8070;}

        footer .footer-content .sns-area{
            display: flex;
            justify-content: center;
            margin: 3.2rem 0;}
            footer .footer-content .sns-area .sns{
                width: 6rem;
                margin: 0 5rem;}
                footer .footer-content .sns-area .sns img{
                    width: 100%;}
            footer .footer-content .sns-area .sns.twitter{
                width: 6rem;
                margin: 0 5rem;}
                footer .footer-content .sns-area .sns.twitter img{
                    padding: 16%;
                    width: 68%;
                    border-radius: 10px;
                    background-color: #000;}

        footer .footer-content .logo{
            height: 3rem;}
        footer .footer-content .logo.sp-view{
            margin-top: 2rem;}
        footer .footer-content .logo.pc-view{
            position: absolute;
            top: calc(50% - 1.5rem);
            left: 0;}
        footer .footer-content p{
            margin-top: 2rem;
            margin-bottom: 2rem;}

    footer .copyright{
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #50b585;
        color:var(--white);}
    footer a{
        color: #0d8070}


.fadeout{
    opacity: 0;
    animation:  fadeout 3s ease 0s 1 alternate;}
.fadeout_short{
    opacity: 0;
    animation:  fadeout 1s ease 0s 1 alternate;}
.fadein{
    opacity: 1;
    animation:  fadein 3s ease 0s 1 alternate;}
.fadein-short{
    opacity: 1;
    animation:  fadein 1s ease 0s 1 alternate;}

.scroll-fadein{
    opacity: 1;
    top: 0;
    left: 0;
    animation:  scroll-fadein 1s ease 0s 1 alternate;}

.loaded{
    opacity: 0;
    transition: all 0.5s ease;
}

.loading-base{
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--white);
    animation: logo-view 3.1s ease 0s 1 alternate;
}
.loading-logo{
    position: absolute;
    top: calc(50% - 76px);
    left: calc(50% - 250px);
    height: 152px;
    width: 500px;}

.modal-how-to-use {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.yt-video {
    width: 100%;
}

.modal-yt-content {
    margin: 5% auto;
    width: 80%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.7s;
    animation-name: animatetop;
    animation-duration: 0.7s
}
@media (max-width: 890px) {
    .modal-yt-content {margin: 50% auto;}
    .yt-video {height: 36rem;}
}

@media (max-aspect-ratio: 10/9) {
    .pc-view{
        display: none;
    }
    .sp-view{
        display: block;
    }
    .loading-logo{
        position: absolute;
        top: calc(50% - 38px);
        left: calc(50% - 125px);
        height: 76px;
        width: 250px;}
    header{
        position: fixed;
        top:0;
        left:0;
        z-index: 2;}
    header .maru-title{
        line-height: 3rem;
        font-size: 1.4rem;}
    header .logo{
        margin-top: 16px;
        margin-left: 16px;
        height: 52%;}
    header ul li:last-child {
        margin-right: 60px;
    }
    .header-content {
        width: 100%;}

    .hamburger-btn{
        position: absolute;
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
        border-radius: 50%;
        cursor: pointer;}
        .hamburger-btn .hamburger-btn-line{
            position: absolute;
            top: 20px;
            left: 9px;}
        .hamburger-btn-line::before{
            transform: rotate(0deg);
            top: -7px;}
        .hamburger-btn-line::after{
            transform: rotate(0deg);
            top: 5px;}
        .hamburger-btn-line,.hamburger-btn-line::before,.hamburger-btn-line::after{
            display: block;
            content: " ";
            position: relative;
            height: 2px;
            width: 22px;
            background-color: #000;
            transition: all 0.5s ease;}
            .hamburger-btn-line.close-button::before{
                transform: rotate(45deg);
                top: -1px;}
            .hamburger-btn-line.close-button::after{
                transform: rotate(-45deg);
                top: -3px;}
            .hamburger-btn-line.close-button{
                background-color: rgba(0, 0, 0, 0);}
        .hamburger-btn-link{
            position: absolute;
            width: auto;
            top: 15px;
            right: 60px;
            cursor: pointer;}
            .hamburger-btn-link a {
                color: var(--white);
                padding-left: 2vw;
                padding-right: 2vw;
                text-decoration: none;}
    header .header-top-menu{
        position: absolute;
        top: 64px;
        right: -75vw;
        width: 75vw;
        text-align: center;
        font-size: 2vh;
        background-color: rgba(92,189,162,0.9);
        transition: all 0.5s ease;}
        header .header-top-menu li{
            list-style: none;}
            header .header-top-menu li a{
                text-decoration: none;
                color: #fff;
                width: 100%;
                height: 10vh;
                line-height: 10vh;
                display: block;}
                header .header-top-menu li a:hover{
                    background-color: rgba(92,189,162,0.7);}
            header .header-top-menu hr{
            height: 1px;
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            border: unset;}
            header .header-top-menu.menu-open{
                right: 0vw;
                transition: all 0.5s ease;}

    .content,
    footer .footer-content{
        width: calc(100% - 5vw);}
        footer .footer-content p{
            font-size: 1.2rem;}

    footer .footer-content .sns-area .sns{
        width: 6rem;
        margin: 0 1.6rem;}
    footer .footer-content .sns-area .sns.twitter{
        width: 6rem;
        margin: 0 1.6rem;}
}

.hidden-view,
.pc-hidden-view,
.sp-hidden-view{
    display: none;
}

@keyframes fadeout{
0%{opacity: 1;}
100%{opacity: 0;}
}
@keyframes fadein{
0%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes scroll-fadein {
0% {
    top:200px;
    opacity: 0;
}
100% {
    top:0px;
    opacity: 1;}
}
@keyframes logo-view {
0% {
    z-index: 1000;
}
99%{
    z-index: 1000;
}
100%{
    z-index: 0;}
}

.preview-box i.fa-close {
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;}
    .preview-box i:hover {
        color: #ff8181 !important;}