@charset "utf-8";
ul.menu__fourth-level,
ul.menu__second-level,
ul.menu__third-level {
    visibility: hidden;
    opacity: 0
}

.btn__box a:before,
.init-bottom:after {
    content: ''
}

.init-right:after,
.menu__second-level li,
.menu__third-level li {
    border-top: 1px solid #fff
}

.contents__inner {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    background-color: #FF1DA4
}

.contents__inner h1 {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 700
}

.btn__box {
    width: 250px;
    height: 50px;
    line-height: 50px;
    margin: 100px auto 0;
    font-size: 13px
}

.btn__box a {
    position: relative;
    display: block;
    color: #666;
    background: #fff
}

.faqs,
.faqs a:hover,
.honeico,
.honeico a:hover,
.mails,
.mails a:hover,
.planpay,
.planpay a:hover,
.raiten,
.raiten a:hover,
.riyouhouhou,
.riyouhouhou a:hover {
    background-repeat: no-repeat;
    background-position: 5px center
}

.menu,
.menu>li {
    height: 50px;
    background-color: #FF1DA4
}

.btn__box a:before {
    position: absolute;
    top: -5px;
    left: -5px;
    box-sizing: border-box;
    width: 250px;
    height: 50px;
    border: 1px solid #fff;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.menu,
.menu>li a:hover,
.menu>li.menu__single {
    position: relative
}

.btn__box a:hover:before {
    -webkit-transform: translate(10px, 10px);
    -ms-transform: translate(10px, 10px);
    transform: translate(10px, 10px)
}

.honeico,
.honeico a:hover {
    background-image: url(../images/header/menuicon_06.png);
    background-size: 20px auto
}

.riyouhouhou,
.riyouhouhou a:hover {
    background-image: url(../images/header/menuicon_19.png);
    background-size: 20px auto
}

.planpay,
.planpay a:hover {
    background-image: url(../images/header/menuicon_12.png);
    background-size: 20px auto
}

.raiten,
.raiten a:hover {
    background-image: url(../images/header/menuicon_03.png);
    background-size: 20px auto
}

.faqs,
.faqs a:hover {
    background-image: url(../images/header/menuicon_09.png);
    background-size: 15px auto
}

.mails,
.mails a:hover {
    background-image: url(../images/header/menuicon_23.png);
    background-size: 20px auto
}

.menu {
    width: 100%;
    margin: 0 auto
}

.menu>li {
    float: left;
    width: 16.66%;
    line-height: 50px;
    text-align: center
}

.init-bottom:after,
.init-right:after {
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff
}

.menu>li a {
    display: block;
    color: #fff;
    font-size: 13px
}

.menu>li a:hover {
    color: #D7468A;
    z-index: 99999
}

ul.menu__second-level {
    z-index: 1
}

li.menu__mega:hover ul.menu__second-level,
li.menu__multi ul.menu__second-level li ul.menu__third-level li:hover ul.menu__fourth-level,
li.menu__multi ul.menu__second-level li:hover ul.menu__third-level,
li.menu__multi:hover ul.menu__second-level {
    visibility: visible;
    opacity: 1
}

.menu>li:hover {
    background: #EFBDD7;
    -webkit-transition: all .5s;
    transition: all .5s;
    z-index: 99999
}

.menu__second-level li {
    text-align: center;
    z-index: 99999
}

.menu__second-level li a:hover {
    background-color: #D7468A;
    color: #fff;
    text-align: center;
    z-index: 99999;
    background-image: url(url)
}

.menu__third-level li a:hover {
    background: #D7468A;
    z-index: 99999
}

.menu__fourth-level li a:hover {
    background: #EFBDD7;
    z-index: 99999
}

.init-bottom:after {
    display: inline-block;
    width: 6px;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.menu:after,
.menu:before {
    content: " ";
    display: table
}

.menu:after {
    clear: both
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background-color: #EFBDD7;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    z-index: 99999
}

li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1
}

.menu>li.menu__multi {
    position: relative
}

li.menu__multi ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #F9C7D6;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

li.menu__multi ul.menu__second-level li ul.menu__third-level li:hover,
li.menu__multi ul.menu__second-level li:hover {
    background: #FF1DA4;
    z-index: 99999
}

li.menu__multi:hover ul.menu__second-level {
    top: 50px
}

li.menu__multi ul.menu__second-level li {
    position: relative
}

li.menu__multi ul.menu__second-level li ul.menu__third-level {
    position: absolute;
    top: -1px;
    left: 100%;
    width: 100%;
    background-color: #FF1DA4;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

li.menu__multi ul.menu__second-level li ul.menu__third-level li {
    position: relative;
    z-index: 99999
}

li.menu__multi ul.menu__second-level li ul.menu__third-level li ul.menu__fourth-level {
    position: absolute;
    top: -1px;
    left: 100%;
    width: 100%;
    background-color: #FF1DA4;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.init-right:after {
    content: '';
    display: inline-block;
    width: 6px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 40px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 2%;
    background-color: #EFBDD7;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

li.menu__mega:hover ul.menu__second-level {
    top: 50px
}

li.menu__mega ul.menu__second-level>li {
    float: left;
    width: 32%;
    border: none
}

li.menu__mega ul.menu__second-level>li:nth-child(3n+2) {
    margin: 0 1%
}

.contents__inner.spnone nav {
    width: 1000px;
    margin-left: auto;
    margin-right: auto
}

.contents__inner.spnone nav .telspace {
    position: absolute;
    right: 7px;
    top: 7px;
    bottom: 0;
    margin-bottom: auto;
    margin-top: auto;
    height: auto;
    color: #fff;
    width: 200px;
    display: block
}

nav .telspace img {
    width: 100%;
    height: auto
}

.menu__second-level li a {
    color: #FF1DA4;
    line-height: normal;
    padding-top: 15px;
    padding-bottom: 15px
}

.menu__second-level li a small {
    font-size: 12px;
}

@media (min-width:768px) and (max-width:1024px) {
    .contents__inner h1 {
        margin-bottom: 30px;
        font-size: 20px;
        font-weight: 700
    }
    .btn__box {
        width: 250px;
        height: 50px;
        line-height: 50px;
        margin: 100px auto 0;
        font-size: 13px
    }
    .btn__box a {
        position: relative;
        display: block;
        color: #666;
        background: #fff
    }
    .faqs,
    .faqs a:hover,
    .honeico,
    .honeico a:hover,
    .mails,
    .mails a:hover,
    .planpay,
    .planpay a:hover,
    .raiten,
    .raiten a:hover,
    .riyouhouhou,
    .riyouhouhou a:hover {
        background-repeat: no-repeat;
        background-position: 5px center
    }
    .menu,
    .menu>li {
        height: 50px;
        background-color: #FF1DA4
    }
    .btn__box a:before {
        position: absolute;
        top: -5px;
        left: -5px;
        box-sizing: border-box;
        width: 250px;
        height: 50px;
        border: 1px solid #fff;
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }
    .menu,
    .menu>li a:hover,
    .menu>li.menu__single {
        position: relative
    }
    .btn__box a:hover:before {
        -webkit-transform: translate(10px, 10px);
        -ms-transform: translate(10px, 10px);
        transform: translate(10px, 10px)
    }
    .honeico,
    .honeico a:hover {
        background-image: url();
        background-size: 10px auto
    }
    .riyouhouhou,
    .riyouhouhou a:hover {
        background-image: url();
        background-size: 10px auto
    }
    .planpay,
    .planpay a:hover {
        background-image: url();
        background-size: 10px auto
    }
    .raiten,
    .raiten a:hover {
        background-image: url();
        background-size: 10px auto
    }
    .faqs,
    .faqs a:hover {
        background-image: url();
        background-size: 10px auto
    }
    .mails,
    .mails a:hover {
        background-image: url();
        background-size: 10px auto
    }
    .menu {
        width: 100%;
        margin: 0 auto
    }
    .menu>li {
        float: left;
        width: 16.66%;
        line-height: 50px;
        text-align: center
    }
    .contents__inner.spnone nav {
        width: 100%;
        margin-left: auto;
        margin-right: auto
    }
}