body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin: 0;
    padding: 0
}

main {
    margin: 0;
    padding: 0
}

main article,main aside,main details,main figcaption,main figure,main footer,main header,main hgroup,main menu,main nav,main main,main section,main footer {
    display: block
}

main img {
    vertical-align: bottom
}

main a img {
    border: 0
}

main table {
    border-collapse: collapse;
    border-spacing: 0
}

main fieldset,main img {
    border: 0
}

main address,main caption,main cite,main code,main dfn,main em,main strong,main th,main var {
    font-style: normal;
    font-weight: normal
}

main ol,main ul {
    list-style: none
}

main caption,main th {
    text-align: left
}

main h1,main h2,main h3,main h4,main h5,main h6 {
    font-size: 100%;
    font-weight: normal
}

main q:before,main q:after {
    content: ''
}

main abbr,main acronym {
    border: 0
}

.mainContent {
    text-align: center
}

.leadCol {
    margin: auto;
    max-width: 1700px;
    width: 100%;
    background: url(../images/whats/lead_bg.png) no-repeat right -187px
}

@media screen and (max-width: 1650px) {
    .leadCol {
        background: url(../images/whats/lead_bg.png) no-repeat right -11.33333vw;
        background-size: 56.24242vw
    }
}

@media only screen and (max-width: 1280px) {
    .leadCol {
        background: url(../images/whats/lead_bg.png) no-repeat 42.96875vw -10.9375vw;
        background-size: 72.5vw
    }
}

@media only screen and (max-width: 767px) {
    .leadCol {
        background: none
    }
}

.leadCol .leadBox {
    margin: auto;
    max-width: 1260px;
    width: 98%;
    padding-top: 100px;
    padding-bottom: 100px
}

@media only screen and (max-width: 1280px) {
    .leadCol .leadBox {
        padding-top: 7.8125vw;
        padding-bottom: 7.8125vw
    }
}

@media only screen and (max-width: 767px) {
    .leadCol .leadBox {
        padding-top: 6.5189vw;
        padding-bottom: 0
    }
}

.leadCol .leadTxt {
    text-align: left
}

@media only screen and (max-width: 1280px) {
    .leadCol .leadTxt {
        width: 58.35938vw
    }
}

@media only screen and (max-width: 767px) {
    .leadCol .leadTxt {
        margin: auto;
        width: 86%
    }
}

.leadCol .arrow {
    margin: auto;
    padding-top: 90px;
    width: 108px
}

.bgBox {
    margin: 0 auto 110px auto;
    max-width: 1278px;
    width: 98%
}

@media screen and (max-width: 1310px) {
    .bgBox {
        margin: 0 auto 8.59375vw auto
    }
}

@media only screen and (max-width: 767px) {
    .bgBox {
        margin: 0 auto 13.03781vw auto;
        width: 100%
    }
}

.bgBox:before {
    content: "";
    background: url(../images/whats/whats_bg_top.png),no-repeat center top;
    width: 1278px;
    height: 54px;
    background-size: contain;
    display: inline-block;
    vertical-align: bottom
}

@media screen and (max-width: 1310px) {
    .bgBox:before {
        width: 98%;
        height: 4.21875vw
    }
}

@media only screen and (max-width: 767px) {
    .bgBox:before {
        content: none;
        background: none;
        width: 0;
        height: 0
    }
}

.bgBox:after {
    content: "";
    background: url(../images/whats/whats_bg_bottom.png),no-repeat center top;
    width: 1278px;
    height: 69px;
    background-size: contain;
    display: inline-block;
    vertical-align: bottom
}

@media screen and (max-width: 1310px) {
    .bgBox:after {
        width: 98%;
        height: 5.39063vw
    }
}

@media only screen and (max-width: 767px) {
    .bgBox:after {
        content: none;
        background: none;
        width: 0;
        height: 0
    }
}

@media only screen and (max-width: 767px) {
    .bgBoxspmg {
        margin: 0 auto 6.5189vw auto;
        width: 100%
    }
}

.bg {
    margin: auto;
    width: 1278px;
    background: url(../images/whats/whats_bg_repeat.png),repeat-y center top;
    background-size: contain
}

@media screen and (max-width: 1310px) {
    .bg {
        width: 98%;
        padding: 0 3%;
        box-sizing: border-box
    }
}

@media only screen and (max-width: 767px) {
    .bg {
        width: 100%;
        padding: 0 10%;
        background: url(../images/whats/whats_bg_repeat_sp.png),repeat center top;
        box-shadow: 0px 3px 6px #00000029
    }
}

.whatsCol .tit {
    padding-top: 4px;
    padding-bottom: 30px
}

@media only screen and (max-width: 1280px) {
    .whatsCol .tit {
        margin: auto;
        width: 50.46875vw
    }
}

@media only screen and (max-width: 767px) {
    .whatsCol .tit {
        padding-top: 5.21512vw;
        padding-bottom: 2.60756vw;
        width: 74.05476vw
    }
}

@media only screen and (max-width: 1280px) {
    .whatsCol .whatsimg {
        margin: auto;
        width: 89.375vw
    }
}

@media only screen and (max-width: 767px) {
    .whatsCol .whatsimg {
        padding-bottom: 6.5189vw;
        width: 100%
    }
}

.customization {
    position: relative
}

.customization .bt01 {
    position: absolute;
    top: 95%;
    left: 32%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width: 1280px) {
    .customization .bt01 {
        width: 31.09375vw;
        left: 24%
    }
}

.customization .bt02 {
    position: absolute;
    top: 95%;
    left: 68%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width: 1280px) {
    .customization .bt02 {
        width: 31.09375vw;
        left: 76%
    }
}

.arrow_blue {
    margin: auto;
    width: 63px
}

.txt_normal {
    font-size: 25px
}

@media only screen and (max-width: 1280px) {
    .txt_normal {
        font-size: 1.95313vw
    }
}

@media only screen and (max-width: 767px) {
    .txt_normal {
        font-size: 3.25945vw
    }
}

.txt_small {
    font-size: 20px
}

@media only screen and (max-width: 1280px) {
    .txt_small {
        font-size: 1.5625vw
    }
}

@media only screen and (max-width: 767px) {
    .txt_small {
        font-size: 2.60756vw
    }
}

.txt_w_m {
    font-weight: 500
}

.txt_w_b {
    font-weight: 700
}

.txt_center {
    text-align: center
}

.color_pink {
    color: #FF3B80
}

.color_blue {
    color: #0090FF
}

.pbsmall {
    padding-bottom: 14px
}

@media only screen and (max-width: 1280px) {
    .pbsmall {
        padding-bottom: 1.09375vw
    }
}

@media only screen and (max-width: 767px) {
    .pbsmall {
        padding-bottom: 1.82529vw
    }
}

.pbmiddle {
    padding-bottom: 30px
}

@media only screen and (max-width: 1280px) {
    .pbmiddle {
        padding-bottom: 2.34375vw
    }
}

.pblarge {
    padding-bottom: 50px
}

@media only screen and (max-width: 1280px) {
    .pblarge {
        padding-bottom: 3.90625vw
    }
}

.pbhuge {
    padding-bottom: 60px
}

@media only screen and (max-width: 1280px) {
    .pbhuge {
        padding-bottom: 4.6875vw
    }
}

.marker_b {
    background: linear-gradient(transparent 80%, #CAEFFB 80%)
}

.btList {
    margin: auto;
    padding-bottom: 50px;
    max-width: 945px;
    width: 98%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

@media only screen and (max-width: 767px) {
    .btList {
        display: block;
        padding-bottom: 5.21512vw
    }
}

@media only screen and (max-width: 767px) {
    .btList li {
        padding-bottom: 2.60756vw
    }
}

@media only screen and (max-width: 1280px) {
    .simulation_bt {
        margin: auto;
        width: 31.09375vw
    }
}

@media only screen and (max-width: 767px) {
    .simulation_bt {
        padding-bottom: 7.82269vw;
        width: 42.76402vw
    }
}

.message .messageimg img {
    max-width: 1315px;
    width: 98%;
    height: auto
}

.message .chara_bt {
    margin-top: -150px
}

@media only screen and (max-width: 1280px) {
    .message .chara_bt {
        margin: -11.71875vw auto 0 auto;
        width: 31.09375vw
    }
}

@media only screen and (max-width: 767px) {
    .message .chara_bt {
        width: 42.76402vw
    }
}

/*# sourceMappingURL=maps/whats.css.map */