@charset 'UTF-8';
/*------------------------------
    top
------------------------------*/
#wrap_bg
{
    margin-top: -90px;
}

.header-logo
{
    width: 90px;
}

.sideArea
{
    position: relative;

    -webkit-box-align: baseline;
    align-items: baseline;
    -ms-flex-align: baseline;

    width: 854px;
    height: 60px;
    margin: 5% auto auto auto;
    padding: 0 0;

    border: #fff 6px solid;
    border-radius: 10px;
    background-image: url(../img/header/menu-bg-green.jpg);
    -webkit-box-shadow: 2px 2px 4px grey;
            box-shadow: 2px 2px 4px grey;
}

#nav li
{
    width: 140px;
}

.l-top-content
{
    position: relative;

    margin: 0 auto 0;
    padding: 0;
}

.main-visial-area
{
    position: relative;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    height: 1034px;

    background-image: url(../img/top/main_screen01.png);
}
.main-visial-area .main-visial-area-bg01
{
    height: 1034px;

    background-image: url(../img/top/main_screen01.png);
}
.main-visial-area .main-visial-area-bg02
{
    position: absolute;
    top: 0;

    display: none;

    width: 100%;
    height: 1034px;

    background-image: url(../img/top/main_screen02.png);
}
.main-visial-area .main-visial-area-bg03
{
    position: absolute;
    top: 0;

    display: none;

    width: 100%;
    height: 1034px;

    background-image: url(../img/top/main_screen03.png);
}
.main-visial-area .main-visial-area-bg04
{
    position: absolute;
    top: 0;

    display: none;

    width: 100%;
    height: 1034px;

    background-image: url(../img/top/main_screen04.png);
}
.main-visial-area .main-visial-area-main
{
    position: absolute;
    top: 0;
    right: 0;

    padding-top: 70px;
    padding-bottom: 90px;
}
.main-visial-area .flex-box
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 1200px;
    margin: 0 auto;
}
.main-visial-area .flex-box .catch
{
    position: relative;

    padding-top: 60px;

    text-align: center;
}
.main-visial-area .flex-box .catch .movieArea
{
    position: absolute;
    top: 75%;
    left: 24%;

    overflow: hidden;

    width: 51.9%;
    height: 0;
    margin: 1% 0;
    padding-bottom: 30%;
}
.main-visial-area .flex-box .catch .movieArea iframe
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
.main-visial-area .flex-box .catch .movieBtn
{
    position: absolute;
    top: 69%;
    left: 24%;

    display: block;

    width: 51.9%;
    height: 0;
    margin: 1% 0;
    padding-bottom: 30%;
}

@media only screen and (min-width: 1201px)
{
    .main-visial-area .main-visial-area-main
    {
        right: calc(350px - ((1920px - 100vw)*35/72)) !important;
    }
}
@media all and (-ms-high-contrast: none)
{
    .main-visial-area-main
    {
        width: 100%;
        /* IE10以上 */
    }

    .bannrAreawrap .bannrArea.twoColumn li
    {
        width: 50%;
    }
}
@media only screen and (min-width: 769px)
{
    @-moz-document url-prefix()
    {
        .main-visial-area .flex-box .catch .movieArea
        {
            top: 75%;
            left: 24%;

            transform: scale(.94, .94);
        }
    }
}
@media only screen and (min-width: 769px) and (min-width: 0\0) and (-webkit-min-device-pixel-ratio: .75), only screen and (min-width: 769px) and (min-width: 0\0) and (min-resolution: 72dpi)
{
    .main-visial-area .flex-box .catch .movieArea
    {
        top: 74%;
        left: 24%;

        -webkit-transform: scale(.77, .77);
                transform: scale(.77, .77);
    }
}
@media only screen and (min-width: 769px) and (min-width: 0\0) and (-webkit-min-device-pixel-ratio: .75) and (min-width: 1200px), only screen and (min-width: 769px) and (min-width: 0\0) and (min-resolution: 72dpi) and (min-width: 1200px)
{
    .main-visial-area .main-visial-area-main
    {
        right: calc(160px - ((1920px - 50vw)*4/33)) !important;
    }
}

@media only screen and (min-width: 769px) and (min-width: 0\0) and (-webkit-min-device-pixel-ratio: .75) and (max-width: 1200px), only screen and (min-width: 769px) and (min-width: 0\0) and (min-resolution: 72dpi) and (max-width: 1200px)
{
    .main-visial-area-main
    {
        left: 0;
    }
}
@media only screen and (min-width: 769px) and (min-width: 0\0) and (-webkit-min-device-pixel-ratio: .75) and (max-width: 768px), only screen and (min-width: 769px) and (min-width: 0\0) and (min-resolution: 72dpi) and (max-width: 768px)
{
    .main-visial-area-main
    {
        right: 0;
    }
}
@media only screen and (min-width: 769px)
{
    @supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial))
    {
        .main-visial-area .flex-box .catch .movieArea
        {
            top: 75%;
            left: 24%;

            -webkit-transform: scale(.91, .91);
                    transform: scale(.91, .91);
        }
    }
    @supports (-ms-ime-align: auto) and (-webkit-text-stroke: initial)
    {
        .main-visial-area .flex-box .catch .movieArea
        {
            top: 75%;
            left: 24%;

            -webkit-transform: scale(.91, .91);
                    transform: scale(.91, .91);
        }
    }
}
.bannrAreawrap
{
    position: relative;
    z-index: 10;

    width: 1200px;
    margin: -105px auto -100px;
}
.bannrAreawrap .bannrArea
{
    padding: 10px;

    text-align: center;
}
.bannrAreawrap .bannrArea li
{
    display: inline-block;
}

.yelow-bk
{
    width: 100%;

    background-image: url(../img/top/saishin_bg.png);
    background-size: cover;
}
.yelow-bk .headArea
{
    position: relative;

    overflow: hidden;

    width: 1080px;
    margin: 0 auto;
    padding: 105px 0 10px;

    text-align: center;
}
.yelow-bk .headArea .saishin-btn
{
    position: absolute;
    top: 110px;
    right: 0;
}
.yelow-bk .newsContent
{
    font-size: 14px;

    width: 300px;
    margin: 12px 28px 115px;

    text-decoration: none;

    color: #6b3517;
    border-radius: 6px;
    background-color: #fff;
    background-image: url(../img/top/stripe_loop.png);
    -webkit-box-shadow: 6px 6px #d9cb53;
            box-shadow: 6px 6px #d9cb53;
}
.yelow-bk .newsContent img
{
    margin: 30px 0;
}
.yelow-bk .newsContent .NewsDate
{
    margin: 0 10px;
}
.yelow-bk .newsContent .NewsTitle
{
    min-height: 84px;
    margin: 3px 10px 20px;
}

/* 1108 単独お知らせ追加 */
.yelow-bk .txtNewsArea
{
    font-size: 120%;

    padding: 70px 0 40px;
}
.yelow-bk .txtNewsArea ul
{
    width: 80%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 1%;

    -webkit-transform: skewY(0deg);
            transform: skewY(0deg);
    text-align: center;
}
.yelow-bk .txtNewsArea ul li
{
    border-radius: 6px;
    background: url(../img/top/stripe_loop.png) #fff;
    -webkit-box-shadow: 6px 6px #d9cb53;
            box-shadow: 6px 6px #d9cb53;
}
.yelow-bk .txtNewsArea ul li a
{
    display: block;

    padding: 4%;

    text-decoration: underline;

    color: #6b3517;
}
.yelow-bk .txtNewsArea ul li:hover
{
    background: #fff;
}

.LetsstartArea
{
    margin-bottom: 50px;

    background-image: url(../img/top/letsstart_bg.png);
    background-repeat: no-repeat;
}
.LetsstartArea .letsstart
{
    position: relative;

    width: 1200px;
    margin: 0 auto;
}
.LetsstartArea .letsstart .letsstart-btn
{
    max-width: 290px;
    margin: 50px 0 0;
    padding-bottom: 25px;
}
.LetsstartArea .letsstart p
{
    position: relative;
    z-index: 10;

    width: 70%;
}
.LetsstartArea .letsstart .Peat
{
    position: absolute;
    right: 162px;
    bottom: -30px;
}
.LetsstartArea .letsstart .kurea
{
    position: absolute;
    right: -140px;
    bottom: -10px;
}

.how
{
    position: relative;
}
.how .howcontent
{
    width: 1200px;
    margin: 0 auto;
}
.how .howcontent .slideBg01
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    content: '';

    background-image: url(../img/top/screen01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 0;
}
.how .howcontent .slideBg01.fixedWidget
{
    position: fixed;
}
.how .howcontent .howhead
{
    width: 1306px;
    max-width: inherit;
    margin-left: -26px;
    padding: 130px 0 30px;
}
.how .howcontent .slideArea01
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    margin-bottom: 30px;

    border-radius: 18px;
    background-image: url(../img/top/base_g.png);
}
.how .howcontent .slideArea01 .leftcontent .sliderArea
{
    position: relative;

    width: 620px;
    height: 390px;
    margin: 15px 10px 15px 57px;
}
.how .howcontent .slideArea01 .leftcontent .sliderArea ul
{
    overflow: hidden;
}
.how .howcontent .slideArea01 .leftcontent .sliderArea .slick-slide
{
    width: 620px;
}
.how .howcontent .slideArea01 .leftcontent .sliderArea .slick-arrow.prev
{
    z-index: 50;
    top: 41%;
    left: -51px;

    cursor: pointer;
}
.how .howcontent .slideArea01 .leftcontent .sliderArea .slick-arrow.next
{
    z-index: 50;
    top: 41%;
    right: -56px;

    cursor: pointer;
}
.how .howcontent .slideArea01 .rightcontent
{
    width: 430px;
    padding: 30px;
}
.how .howcontent .slideArea01 .rightcontent .subtitle01
{
    position: relative;
}
.how .howcontent .slideArea01 .rightcontent .subtitle01 .kabu
{
    position: absolute;
    top: -27px;
    right: 362px;

    max-width: 28%;
}
.how .howcontent .slideArea01 .rightcontent .detail
{
    max-width: 290px;
    margin: 40px 10px;

    cursor: pointer;
}
.how .howcontent .slideArea02
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    margin-bottom: 30px;

    border-radius: 19px;
    background-image: url(../img/top/base_o.png);
}
.how .howcontent .slideArea02 .slideBg02
{
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100vh;

    content: '';

    background-image: url(../img/top/screen02.png);
    background-position: center;
}
.how .howcontent .slideArea02 .rightcontent .sliderArea
{
    position: relative;

    width: 620px;
    height: 390px;
    margin: 15px 57px 15px 10px;
}
.how .howcontent .slideArea02 .rightcontent .sliderArea ul
{
    overflow: hidden;
}
.how .howcontent .slideArea02 .rightcontent .sliderArea .slick-slide
{
    width: 620px;
}
.how .howcontent .slideArea02 .rightcontent .sliderArea .slick-arrow.prev
{
    z-index: 50;
    top: 41%;
    left: -51px;

    cursor: pointer;
}
.how .howcontent .slideArea02 .rightcontent .sliderArea .slick-arrow.next
{
    z-index: 50;
    top: 41%;
    right: -56px;

    cursor: pointer;
}
.how .howcontent .slideArea02 .leftcontent
{
    padding: 30px 0 30px 90px;
}
.how .howcontent .slideArea02 .leftcontent .subtitle02
{
    position: relative;
}
.how .howcontent .slideArea02 .leftcontent .subtitle02 .dog
{
    position: absolute;
    top: -33px;
    left: -95px;

    max-width: 28%;
}
.how .howcontent .slideArea02 .leftcontent .detail
{
    max-width: 290px;
    margin: 30px 10px;

    cursor: pointer;
}
.how .howcontent .slideArea03
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    margin-bottom: 30px;

    border-radius: 19px;
    background-image: url(../img/top/base_b.png);
}
.how .howcontent .slideArea03 .leftcontent .sliderArea
{
    position: relative;

    width: 620px;
    height: 390px;
    margin: 15px 10px 15px 57px;
}
.how .howcontent .slideArea03 .leftcontent .sliderArea ul
{
    overflow: hidden;
}
.how .howcontent .slideArea03 .leftcontent .sliderArea .slick-slide
{
    width: 620px;
}
.how .howcontent .slideArea03 .leftcontent .sliderArea .slick-arrow.prev
{
    z-index: 50;
    top: 41%;
    left: -51px;

    cursor: pointer;
}
.how .howcontent .slideArea03 .leftcontent .sliderArea .slick-arrow.next
{
    z-index: 50;
    top: 41%;
    right: -56px;

    cursor: pointer;
}
.how .howcontent .slideArea03 .rightcontent
{
    width: 430px;
    padding: 30px 15px 30px 30px;
}
.how .howcontent .slideArea03 .rightcontent .subtitle03
{
    position: relative;
}
.how .howcontent .slideArea03 .rightcontent .subtitle03 .house
{
    position: absolute;
    top: -7px;
    right: 395px;

    width: 110px;
}


.how .howcontent .slideArea03 .rightcontent .detail
{
    max-width: 290px;
    margin: 30px 10px;

    cursor: pointer;
}
.how .howcontent .slideArea04
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    margin-bottom: 30px;

    border-radius: 19px;
    background-image: url(../img/top/base_p.png);
}
.how .howcontent .slideArea04 .slideBg03
{
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;

    display: block;
    display: none;

    width: 100%;
    height: 100vh;

    background-image: url(../img/top/screen03.png);
    background-position: center;
}
.how .howcontent .slideArea04 .rightcontent .sliderArea
{
    position: relative;

    width: 620px;
    height: 390px;
    margin: 15px 57px 15px 10px;
}
.how .howcontent .slideArea04 .rightcontent .sliderArea ul
{
    overflow: hidden;
}
.how .howcontent .slideArea04 .rightcontent .sliderArea .slick-slide
{
    width: 620px;
}
.how .howcontent .slideArea04 .rightcontent .sliderArea .slick-arrow.prev
{
    z-index: 50;
    top: 41%;
    left: -51px;

    cursor: pointer;
}
.how .howcontent .slideArea04 .rightcontent .sliderArea .slick-arrow.next
{
    z-index: 50;
    top: 41%;
    right: -56px;

    cursor: pointer;
}
.how .howcontent .slideArea04 .leftcontent
{
    padding: 30px 0 30px 90px;
}
.how .howcontent .slideArea04 .leftcontent .subtitle04
{
    position: relative;
}
.how .howcontent .slideArea04 .leftcontent .subtitle04 .heart
{
    position: absolute;
    top: -9px;
    left: -90px;

    max-width: 23%;
}
.how .howcontent .slideArea04 .leftcontent .detail
{
    max-width: 290px;
    margin: 30px 10px;

    cursor: pointer;
}
.how .howcontent .slideArea05
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    margin-bottom: 30px;

    border-radius: 19px;
    background-image: url(../img/top/base_s.png);
}
.how .howcontent .slideArea05 .leftcontent .sliderArea
{
    position: relative;

    width: 620px;
    height: 390px;
    margin: 15px 10px 15px 57px;
}
.how .howcontent .slideArea05 .leftcontent .sliderArea ul
{
    overflow: hidden;
}
.how .howcontent .slideArea05 .leftcontent .sliderArea .slick-slide
{
    width: 620px;
}
.how .howcontent .slideArea05 .leftcontent .sliderArea .slick-arrow.prev
{
    z-index: 50;
    top: 41%;
    left: -51px;

    cursor: pointer;
}
.how .howcontent .slideArea05 .leftcontent .sliderArea .slick-arrow.next
{
    z-index: 50;
    top: 41%;
    right: -56px;

    cursor: pointer;
}
.how .howcontent .slideArea05 .rightcontent
{
    width: 430px;
    padding: 20px 10px 20px 30px;
}
.how .howcontent .slideArea05 .rightcontent .subtitle05
{
    position: relative;
}
.how .howcontent .slideArea05 .rightcontent .subtitle05 .fish
{
    position: absolute;
    top: -2px;
    right: 397px;

    max-width: 29%;
}
.how .howcontent .slideArea05 .rightcontent .detail
{
    max-width: 290px;
    margin: 30px 10px;

    cursor: pointer;
}

.visibility-hidden
{
    visibility: hidden;
}

.gokounyu
{
    width: 90%;
    margin: 0 auto;
}

.hatubaikinen
{
    width: 90%;
}

.display-none
{
    display: none;
}

.none-btn-space
{
    padding-bottom: 2vw;
}

.pc-right
{
    margin-right: 10px;
}

/* media */
@media only screen and (max-width: 768px)
{
    body
    {
        overflow-x: hidden;

        background-image: none;
    }
    body::before
    {
        z-index: -2;
    }

    #wrap_bg
    {
        overflow-x: visible;
    }

    .header-logo
    {
        width: auto;
    }

    .main-visial-area
    {
        position: relative;
        top: -3vw;

        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        padding-top: 0;
        padding-bottom: 0;
        padding-bottom: 185%;

        background-image: url(../img/top/main-bg01-Sp.png);
    }
    .main-visial-area .main-visial-area-bg01
    {
        display: none;

        height: 0;

        background-image: url(../img/top/main-bg01-Sp.png);
    }
    .main-visial-area .main-visial-area-bg02
    {
        position: absolute;
        top: 0;

        display: none;

        width: 100%;
        height: auto;

        background-image: url(../img/top/main-bg02-Sp.png);
    }
    .main-visial-area .main-visial-area-bg03
    {
        position: absolute;
        top: 0;

        display: none;

        width: 100%;
        height: auto;

        background-image: url(../img/top/main-bg03-Sp.png);
    }
    .main-visial-area .main-visial-area-bg04
    {
        position: absolute;
        top: 0;

        display: none;

        width: 100%;
        height: auto;

        background-image: url(../img/top/main-bg04-Sp.png);
    }
    .main-visial-area .main-visial-area-main
    {
        left: 0;

        padding-top: 0;
        padding-bottom: 0;
    }
    .main-visial-area .flex-box
    {
        display: block;

        width: 100%;
        max-width: 714px;
    }
    .main-visial-area .flex-box .catch
    {
        position: relative;
        top: calc((-768px + 20vw) / 15);

        width: 90%;
        margin: auto;
        padding-top: 0;
    }
    .main-visial-area .flex-box .catch .movieArea
    {
        position: absolute;
        top: auto;
        bottom: 1%;
        left: 21.3%;

        overflow: hidden;

        width: 57.4%;
        height: 0;
        margin: 1% 0;
        padding-bottom: 34%;
    }
    .main-visial-area .flex-box .catch .movieBtn
    {
        position: absolute;
        top: auto;
        bottom: 1%;
        left: 21.3%;

        width: 57.4%;
        height: 0;
        margin: 1% 0;
        padding-bottom: 34%;
    }
    .main-visial-area .flex-box .catch .Switch
    {
        width: 100%;
        margin: auto;
    }

    .bannrAreawrap
    {
        position: relative;
        z-index: 10;

        width: 100%;
        margin: 0 auto;

        text-align: center;
    }
    .bannrAreawrap .bannrArea
    {
        padding: 1%;
    }
    .bannrAreawrap .bannrArea.twoColumn
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        margin: auto;
        padding: 0 1%;
    }
    .bannrAreawrap .bannrArea.twoColumn li
    {
        padding: 0 2% 0;
    }
    .bannrAreawrap .bannrArea li
    {
        display: inline-block;

        margin: 1% 0;
    }

    .yelow-bk
    {
        width: 100%;
        margin-top: 5vw;
        padding-bottom: 6vw;

        -webkit-transform: skewY(1.8deg);
                transform: skewY(1.8deg);

        background-color: #fffea2;
        background-image: url(../img/top/pattern_y.png);
        background-repeat: repeat;
        background-size: contain;
        -webkit-box-shadow: 10px 10px rgba(37, 114, 146, .25);
                box-shadow: 10px 10px rgba(37, 114, 146, .25);
    }
    .yelow-bk .headArea
    {
        position: relative;

        overflow: hidden;

        width: 100%;
        margin: 0 auto;
        padding: 7vw 0 10px;

        -webkit-transform: skewY(-1.8deg);
                transform: skewY(-1.8deg);
        text-align: center;
    }
    .yelow-bk .headArea .saishin-head
    {
        width: 40%;
        max-width: 200px;
    }
    .yelow-bk .headArea .saishin-btn
    {
        position: absolute;
        top: 8vw;
        right: 2%;

        width: 22%;
        max-width: 110px;
    }
    .yelow-bk .newsContent
    {
        font-size: 14px;

        width: 300px;
        margin: auto 1.5% auto .5%;

        color: #6b3517;
        border-radius: 6px;
        background-color: #fff;
        -webkit-box-shadow: 6px 6px #d9cb53;
                box-shadow: 6px 6px #d9cb53;
    }
    .yelow-bk .newsContent img
    {
        margin: 5vw 0;
    }
    .yelow-bk .newsContent .NewsDate
    {
        font-size: 2rem;

        margin: 0 10px;
    }
    .yelow-bk .newsContent .NewsTitle
    {
        font-size: 2rem;

        min-height: 120px;
        margin: 10px 10px 40px;
    }

    /* 1108 単独お知らせ追加 */
    .yelow-bk .txtNewsArea
    {
        font-size: 14px;

        padding: 40px 0 20px;
    }
    .yelow-bk .txtNewsArea ul
    {
        width: 90%;

        -webkit-transform: skewY(-1.8deg);
                transform: skewY(-1.8deg);
    }
    .yelow-bk .txtNewsArea ul li
    {
        border-radius: 6px;
        -webkit-box-shadow: 6px 6px #d9cb53;
                box-shadow: 6px 6px #d9cb53;
    }
    .yelow-bk .txtNewsArea ul li a
    {
    }
    .yelow-bk .txtNewsArea ul li:hover
    {
    }


    .LetsstartArea
    {
        margin: 5vw auto 0;
        padding-bottom: 7vw;

        background-image: url(../img/top/letsstart_bg-Sp.png);
        background-size: cover;
    }
    .LetsstartArea .letsstart
    {
        position: relative;

        width: 100%;
        margin: 0 auto;
    }
    .LetsstartArea .letsstart .letsstart-btn
    {
        width: 54%;
        margin: 4vw auto 0;
        padding-bottom: 4vw;

        text-align: center;
    }
    .LetsstartArea .letsstart p
    {
        position: relative;
        z-index: 10;

        width: 100%;
    }
    .LetsstartArea .letsstart .Peat
    {
        position: absolute;
        right: 45%;
        bottom: 12%;

        width: 48%;
    }
    .LetsstartArea .letsstart .kurea
    {
        position: absolute;
        right: 4%;
        bottom: 14%;

        width: 50%;
    }

    .how
    {
        position: relative;
    }
    .how .howcontent
    {
        position: relative;
        z-index: 1;

        width: 100%;
        margin: 0 auto;
    }
    .how .howcontent .slideBg01
    {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;

        content: '';

        background-image: url(../img/top/screen01.png);
        background-repeat: no-repeat;
    }
    .how .howcontent .slideBg01.fixedWidget
    {
        position: fixed;
    }
    .how .howcontent .howhead
    {
        width: 100%;
        margin-left: 0;
        padding: 5vw 0 5vw;
    }
    .how .howcontent .pc-right
    {
        margin: 0;
    }
    .how .howcontent .slideArea01
    {
        display: block;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

        width: 90%;
        margin: 0 auto 30px;

        border-radius: 18px;
        background-image: url(../img/top/base_g-Sp.png);
        background-repeat: no-repeat;
    }
    .how .howcontent .slideArea01 .leftcontent .sliderArea
    {
        position: relative;

        width: 85%;
        height: auto;
        margin: 1vw auto 1.5vw;
    }
    .how .howcontent .slideArea01 .leftcontent .sliderArea .slick-slide
    {
        width: 100%;
        padding: 0 10vw 0 0;
    }
    .how .howcontent .slideArea01 .leftcontent .sliderArea .slick-arrow.prev
    {
        z-index: 50;
        top: 35%;
        left: -5%;

        width: 15%;
    }
    .how .howcontent .slideArea01 .leftcontent .sliderArea .slick-arrow.prev img
    {
        width: 100%;
    }
    .how .howcontent .slideArea01 .leftcontent .sliderArea .slick-arrow.next
    {
        z-index: 50;
        top: 35%;
        right: -6%;

        width: 15%;
    }
    .how .howcontent .slideArea01 .leftcontent .sliderArea .slick-arrow.next img
    {
        width: 100%;
    }
    .how .howcontent .slideArea01 .leftcontent .subtitle01
    {
        position: relative;

        width: 50%;
        margin: 0 auto 0 15%;
        padding: 3.5vw 0 0;
    }
    .how .howcontent .slideArea01 .leftcontent .subtitle01 .kabu
    {
        position: absolute;
        top: 1%;
        right: auto;
        left: -24%;

        width: 25%;
    }
    .how .howcontent .slideArea01 .leftcontent .subtxt01
    {
        width: 58%;
        margin: 2vw auto 2vw;
    }
    .how .howcontent .slideArea01 .leftcontent .detail
    {
        width: 70%;
        max-width: 290px;
        margin: 0 auto;
        padding-bottom: 2vw;

        cursor: pointer;
        text-align: center;
    }
    .how .howcontent .slideArea01 .rightcontent
    {
        padding: 30px;
    }
    .how .howcontent .slideArea02
    {
        display: block;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

        width: 90%;
        margin: 0 auto 30px;

        border-radius: 18px;
        background-image: url(../img/top/base_o-Sp.png);
        background-repeat: no-repeat;
    }
    .how .howcontent .slideArea02 .slideBg02
    {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;

        display: none;

        width: 100%;
        height: 100vh;

        content: '';

        background-image: url(../img/top/screen02.png);
    }
    .how .howcontent .slideArea02 .rightcontent .sliderArea
    {
        position: relative;

        width: 85%;
        height: auto;
        margin: 1vw auto 1.5vw;
    }
    .how .howcontent .slideArea02 .rightcontent .sliderArea .slick-slide
    {
        width: 100%;
        padding: 0 10vw 0 0;
    }
    .how .howcontent .slideArea02 .rightcontent .sliderArea .slick-arrow.prev
    {
        z-index: 50;
        top: 35%;
        left: -5%;

        width: 15%;
    }
    .how .howcontent .slideArea02 .rightcontent .sliderArea .slick-arrow.prev img
    {
        width: 100%;
    }
    .how .howcontent .slideArea02 .rightcontent .sliderArea .slick-arrow.next
    {
        z-index: 50;
        top: 35%;
        right: -6%;

        width: 15%;
    }
    .how .howcontent .slideArea02 .rightcontent .sliderArea .slick-arrow.next img
    {
        width: 100%;
    }
    .how .howcontent .slideArea02 .rightcontent .subtitle02
    {
        position: relative;

        width: 37%;
        margin: 0 auto 0 15%;
        padding: 3.5vw 0 0;
    }
    .how .howcontent .slideArea02 .rightcontent .subtitle02 .dog
    {
        position: absolute;
        z-index: 10;
        top: -7%;
        right: auto;
        left: -29%;

        width: 29%;
    }
    .how .howcontent .slideArea02 .rightcontent .subtxt02
    {
        width: 58%;
        margin: 2vw auto 2vw;
    }
    .how .howcontent .slideArea02 .rightcontent .detail
    {
        width: 70%;
        max-width: 290px;
        margin: 0 auto;
        padding-bottom: 2vw;

        cursor: pointer;
        text-align: center;
    }
    .how .howcontent .slideArea02 .leftcontent
    {
        padding: 30px 0 30px 90px;
    }
    .how .howcontent .slideArea02 .leftcontent .subtitle02
    {
        position: relative;
    }
    .how .howcontent .slideArea02 .leftcontent .subtitle02 .dog
    {
        position: absolute;
        top: -50px;
        left: -105px;
    }
    .how .howcontent .slideArea02 .leftcontent .detail
    {
        margin: 30px 10px;

        cursor: pointer;
    }
    .how .howcontent .slideArea03
    {
        display: block;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

        width: 90%;
        margin: 0 auto 30px;

        border-radius: 18px;
        background-image: url(../img/top/base_b-Sp.png);
        background-repeat: no-repeat;
    }
    .how .howcontent .slideArea03 .leftcontent .sliderArea
    {
        position: relative;

        width: 85%;
        height: auto;
        margin: 1vw auto 1.5vw;
    }
    .how .howcontent .slideArea03 .leftcontent .sliderArea .slick-slide
    {
        width: 100%;
        padding: 0 10vw 0 0;
    }
    .how .howcontent .slideArea03 .leftcontent .sliderArea .slick-arrow.prev
    {
        z-index: 50;
        top: 35%;
        left: -5%;

        width: 15%;
    }
    .how .howcontent .slideArea03 .leftcontent .sliderArea .slick-arrow.prev img
    {
        width: 100%;
    }
    .how .howcontent .slideArea03 .leftcontent .sliderArea .slick-arrow.next
    {
        z-index: 50;
        top: 35%;
        right: -6%;

        width: 15%;
    }
    .how .howcontent .slideArea03 .leftcontent .sliderArea .slick-arrow.next img
    {
        width: 100%;
    }
    .how .howcontent .slideArea03 .leftcontent .subtitle03
    {
        position: relative;

        width: 37%;
        margin: 0 auto 0 15%;
        padding: 3.5vw 0 0;
    }
    .how .howcontent .slideArea03 .leftcontent .subtitle03 .house
    {
        position: absolute;
        top: 15%;
        right: auto;
        left: -41%;

        width: 42%;
    }
    .how .howcontent .slideArea03 .leftcontent .subtxt03
    {
        width: 65%;
        margin: 2vw auto 2vw;
    }
    .how .howcontent .slideArea03 .leftcontent .detail
    {
        width: 70%;
        max-width: 290px;
        margin: 0 auto;
        padding-bottom: 2vw;

        cursor: pointer;
        text-align: center;
    }
    .how .howcontent .slideArea03 .rightcontent
    {
        padding: 30px 15px 30px 30px;
    }
    .how .howcontent .slideArea03 .rightcontent .subtitle03
    {
        position: relative;
    }
    .how .howcontent .slideArea03 .rightcontent .subtitle03 .house
    {
        position: absolute;
        top: -20px;
        right: 415px;
    }
    .how .howcontent .slideArea03 .rightcontent .detail
    {
        margin: 30px 10px;

        cursor: pointer;
    }
    .how .howcontent .slideArea04
    {
        display: block;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

        width: 90%;
        margin: 0 auto 30px;

        border-radius: 18px;
        background-image: url(../img/top/base_p-Sp.png);
        background-repeat: no-repeat;
    }
    .how .howcontent .slideArea04 .slideBg03
    {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;

        display: block;
        display: none;

        width: 100%;
        height: 100vh;

        background-image: url(../img/top/screen03.png);
    }
    .how .howcontent .slideArea04 .rightcontent .sliderArea
    {
        position: relative;

        width: 85%;
        height: auto;
        margin: 1vw auto 1.5vw;
    }
    .how .howcontent .slideArea04 .rightcontent .sliderArea .slick-slide
    {
        width: 100%;
        padding: 0 10vw 0 0;
    }
    .how .howcontent .slideArea04 .rightcontent .sliderArea .slick-arrow.prev
    {
        z-index: 50;
        top: 35%;
        left: -5%;

        width: 15%;
    }
    .how .howcontent .slideArea04 .rightcontent .sliderArea .slick-arrow.prev img
    {
        width: 100%;
    }
    .how .howcontent .slideArea04 .rightcontent .sliderArea .slick-arrow.next
    {
        z-index: 50;
        top: 35%;
        right: -6%;

        width: 15%;
    }
    .how .howcontent .slideArea04 .rightcontent .sliderArea .slick-arrow.next img
    {
        width: 100%;
    }
    .how .howcontent .slideArea04 .rightcontent .subtitle04
    {
        position: relative;

        width: 34%;
        margin: 0 auto 0 15%;
        padding: 3.5vw 0 0;
    }
    .how .howcontent .slideArea04 .rightcontent .subtitle04 .heart
    {
        position: absolute;
        z-index: 10;
        top: 11%;
        right: auto;
        left: -35%;

        width: 33%;
    }
    .how .howcontent .slideArea04 .rightcontent .subtxt04
    {
        width: 65%;
        margin: 2vw auto 2vw;
    }
    .how .howcontent .slideArea04 .rightcontent .detail
    {
        width: 70%;
        max-width: 290px;
        margin: 0 auto;
        padding-bottom: 2vw;

        cursor: pointer;
        text-align: center;
    }
    .how .howcontent .slideArea04 .leftcontent
    {
        padding: 30px 0 30px 90px;
    }
    .how .howcontent .slideArea04 .leftcontent .subtitle04
    {
        position: relative;
    }
    .how .howcontent .slideArea04 .leftcontent .subtitle04 .heart
    {
        position: absolute;
        top: -15px;
        left: -95px;
    }
    .how .howcontent .slideArea04 .leftcontent .detail
    {
        margin: 30px 10px;

        cursor: pointer;
    }
    .how .howcontent .slideArea05
    {
        display: block;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

        width: 90%;
        margin: 0 auto 30px;

        border-radius: 18px;
        background-image: url(../img/top/base_s-Sp.png);
        background-repeat: no-repeat;
    }
    .how .howcontent .slideArea05 .leftcontent .sliderArea
    {
        position: relative;

        width: 85%;
        height: auto;
        margin: 1vw auto 1.5vw;
    }
    .how .howcontent .slideArea05 .leftcontent .sliderArea .slick-slide
    {
        width: 100%;
        padding: 0 10vw 0 0;
    }
    .how .howcontent .slideArea05 .leftcontent .sliderArea .slick-arrow.prev
    {
        z-index: 50;
        top: 35%;
        left: -5%;

        width: 15%;
    }
    .how .howcontent .slideArea05 .leftcontent .sliderArea .slick-arrow.prev img
    {
        width: 100%;
    }
    .how .howcontent .slideArea05 .leftcontent .sliderArea .slick-arrow.next
    {
        z-index: 50;
        top: 35%;
        right: -6%;

        width: 15%;
    }
    .how .howcontent .slideArea05 .leftcontent .sliderArea .slick-arrow.next img
    {
        width: 100%;
    }
    .how .howcontent .slideArea05 .leftcontent .subtitle05
    {
        position: relative;

        width: 60%;
        margin: 0 auto 0 15%;
        padding: 3.5vw 0 0;
    }
    .how .howcontent .slideArea05 .leftcontent .subtitle05 .fish
    {
        position: absolute;
        top: -15%;
        right: auto;
        left: -22%;

        width: 23%;
    }
    .how .howcontent .slideArea05 .leftcontent .subtxt05
    {
        width: 85%;
        margin: 2vw auto 2vw;
    }
    .how .howcontent .slideArea05 .leftcontent .detail
    {
        width: 70%;
        margin: 0 auto;
        padding-bottom: 2vw;

        cursor: pointer;
        text-align: center;
    }
    .how .howcontent .slideArea05 .rightcontent
    {
        padding: 10px 30px;
    }
    .how .howcontent .slideArea05 .rightcontent .subtitle05
    {
        position: relative;
    }
    .how .howcontent .slideArea05 .rightcontent .subtitle05 .fish
    {
        position: absolute;
        top: -10px;
        right: 370px;
    }
    .how .howcontent .slideArea05 .rightcontent .detail
    {
        max-width: 290px;
        margin: 30px 10px;

        cursor: pointer;
    }

    .footer-sp
    {
        position: relative;
        z-index: 10;
    }

    .l-footer_sub
    {
        position: relative;
        z-index: 10;
    }

    #header
    {
        width: 100%;
        padding: 20px 0 0;
    }

    #wrap_bg
    {
        overflow: visible;

        margin-top: -80px;
    }
}
@media only screen and (max-width: 711px)
{
    .main-visial-area
    {
        padding-bottom: 200%;
    }
}
@media only screen and (max-width: 500px)
{
    .how .howcontent .slideArea01 .leftcontent .detail
    {
        width: 60%;
    }
}
@media only screen and (max-width: 400px)
{
    .how .howcontent .slideArea01 .leftcontent .detail
    {
        width: 55%;
    }
}
@media only screen and (max-width: 768px) and (min-width: 0\0) and (-webkit-min-device-pixel-ratio: .75), only screen and (max-width: 768px) and (min-width: 0\0) and (min-resolution: 72dpi)
{
    .main-visial-area .flex-box .catch .movieArea
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
    }
    .main-visial-area .flex-box .catch .movieBtn
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
    }
}
@media only screen and (max-width: 768px)
{
    @supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial))
    {
        .main-visial-area .flex-box .catch .movieArea
        {
            -webkit-transform: scale(1, 1);
                    transform: scale(1, 1);
        }
        .main-visial-area .flex-box .catch .movieBtn
        {
            -webkit-transform: scale(1, 1);
                    transform: scale(1, 1);
        }
    }
    @supports (-ms-ime-align: auto) and (-webkit-text-stroke: initial)
    {
        .main-visial-area .flex-box .catch .movieArea
        {
            -webkit-transform: scale(1, 1);
                    transform: scale(1, 1);
        }
        .main-visial-area .flex-box .catch .movieBtn
        {
            -webkit-transform: scale(1, 1);
                    transform: scale(1, 1);
        }
    }
}
#colorbox
{
    overflow: visible !important;
}
#colorbox #cboxWrapper
{
    overflow: visible !important;
}
#colorbox #cboxWrapper #cboxContent #cboxLoadedContent
{
    overflow: visible !important;
}
#colorbox #cboxWrapper #cboxContent #cboxPrevious,
#colorbox #cboxWrapper #cboxContent #cboxNext,
#colorbox #cboxWrapper #cboxContent #cboxClose
{
    display: none !important;
}
#colorbox #cboxWrapper #cboxContent .btn_prev
{
    position: absolute;
    top: 44%;
    left: -5.5%;

    display: block;

    width: 7.5%;
    padding-bottom: 7.5%;

    background-size: contain;
}
#colorbox #cboxWrapper #cboxContent .btn_close
{
    position: absolute;
    top: -5%;
    right: -5%;

    display: block;

    width: 7.5%;
    padding-bottom: 7.5%;

    background-size: contain;
}
#colorbox #cboxWrapper #cboxContent .btn_next
{
    position: absolute;
    top: 44%;
    right: -6%;

    display: block;

    width: 7.5%;
    padding-bottom: 7.5%;

    background-size: contain;
}

.movieModal
{
    top: 7%;

    width: 100%;
    margin-bottom: 55%;
    padding-bottom: 56% !important;
}
.movieModal iframe
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1200px)
{
    #colorbox #cboxWrapper #cboxContent .btn_prev
    {
        position: absolute;
        top: 44%;
        left: -5%;

        display: block;

        width: 7.5%;
        padding-bottom: 7.5%;

        background-size: contain;
    }

    #colorbox #cboxWrapper #cboxContent .btn_close
    {
        position: absolute;
        top: -6%;
        right: -4%;

        display: block;

        width: 7.5%;
        padding-bottom: 7.5%;

        background-size: contain;
    }

    #colorbox #cboxWrapper #cboxContent .btn_next
    {
        position: absolute;
        top: 44%;
        right: -6%;

        display: block;

        width: 7.5%;
        padding-bottom: 7.5%;

        background-size: contain;
    }
}
@media only screen and (max-width: 768px)
{
    #colorbox #cboxWrapper #cboxContent .btn_prev
    {
        position: absolute;
        top: 44%;
        left: -10%;

        display: block;

        width: 15%;

        background-size: contain;
    }

    #colorbox #cboxWrapper #cboxContent .btn_next
    {
        position: absolute;
        top: 44%;
        right: -11%;

        display: block;

        width: 15%;

        background-size: contain;
    }

    #colorbox #cboxWrapper #cboxContent .btn_close
    {
        position: absolute;
        top: -11%;
        right: -10%;

        display: block;

        width: 15%;

        background-size: contain;
    }

    .movieModal
    {
        top: 7%;

        width: 100%;
        margin-bottom: 52%;
        padding-bottom: 52% !important;
    }
    .movieModal iframe
    {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }
}
.main-visial-icon
{
    width: 600px;
    min-width: 600px;
}

.main-visial-left
{
    min-width: 600px;
}

.indexModal
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    align-items: start;
    -ms-flex-align: start;

    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 2%;

    pointer-events: all;

    background-repeat: no-repeat;
    background-size: contain;
}
.indexModal .object-fit-contain
{
    width: 100%;
}


/*popup*/
.popup
{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    visibility: hidden;

    width: 100%;
    height: 100%;

    transition: .6s;

    opacity: 0;
}
.popup.is-show
{
    visibility: visible;

    opacity: 1;
}
.popup-inner
{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;

    width: 80%;
    max-width: 600px;
    padding: 50px;

    transform: translate(-50%,-50%);
}
@media only screen and (max-width: 769px)
{
    .popup-inner
    {
        width: 100%;
        padding: 5%;
    }
    .popup-inner .pop-btn .xbox span
    {
        font-size: 13px;

        margin-top: 6% !important;
    }
}
.popup-inner img
{
    width: 100%;
}
.black-background
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;

    background-color: rgba(0,0,0,.8);
}
.popup-inner p a
{
    display: inline-block;
}
.popup-inner p a:hover
{
    cursor: pointer;
}
.popup-inner .pop-logo
{
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 6%;
}
.popup-inner .pop-btn
{
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;

    margin-top: 5%;
}
.popup-inner .pop-btn p
{
    width: 48%;
}
.popup-inner .pop-btn .xbox
{
    text-align: center;
}
.popup-inner .pop-btn .xbox span
{
    font-weight: bold;

    display: inline-block;

    margin-top: 4%;

    color: #fff;
}