.fade-enter-active,
.fade-leave-active {
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

@media all and (min-width: 641px) {
    .contents {
        padding-bottom: 120px;
        position: relative
    }

    .contents:before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: transparent url("../img/top-bg.png") right top no-repeat
    }

    body.ver19 .purple {
        color: #370a4b
    }

    body.ver19 .red {
        color: #9d162e
    }

    body.ver19 .blue {
        color: #051469
    }

    body.ver19 .section-pagetop {
        height: 250px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center
    }

    body.ver19 .section-pagetop .page-title {
        width: 500px
    }

    body.ver19 .section-pagetop .page-title-text {
        font-weight: bold
    }

    body.ver19 .section-pagetop .page-title-holder {
        padding: 32px 0 30px
    }

    body.ver19 .section-start .holder {
        text-align: center;
        padding-top: 48px;
        background-color: rgba(255, 255, 255, 0.85);
        padding-bottom: 80px
    }

    body.ver19 .section-start .pic-check {
        width: 100px;
        margin: auto;
        margin-bottom: 30px
    }

    body.ver19 .section-start .section-title {
        font-weight: bold;
        font-size: 38px;
        margin-bottom: 8px
    }

    body.ver19 .section-start .text-lead {
        font-size: 16px;
        line-height: 36px
    }

    body.ver19 .section-start .btn-start {
        width: 280px;
        margin: auto;
        margin-top: 50px
    }

    body.ver19 .section-start .btn-start .text {
        font-size: 16px
    }

    body.ver19 .section-question .holder {
        text-align: center;
        padding-top: 40px;
        background-color: rgba(255, 255, 255, 0.85);
        padding-bottom: 60px;
        min-height: 315px
    }

    body.ver19 .section-question .progress {
        width: 300px;
        margin: auto;
        margin-bottom: 20px
    }

    body.ver19 .section-question .progress .text {
        margin-top: 5px;
        font-size: 11px;
        text-align: right
    }

    body.ver19 .section-question .progress .base {
        position: relative;
        height: 3px;
        width: 100%;
        background-color: #cccccc
    }

    body.ver19 .section-question .progress .progress-bar {
        height: 100%;
        width: 0;
        -webkit-transition: width .3s;
        transition: width .3s;
        background-color: #9d162e
    }

    body.ver19 .section-question .shoulder {
        width: 50px;
        height: 25px;
        margin: auto auto 14px
    }

    body.ver19 .section-question .question-title {
        font-weight: normal;
        font-size: 16px;
        margin-bottom: 36px
    }

    body.ver19 .section-question .answer-btn-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: -10px auto
    }

    body.ver19 .section-question .answer-btn-list .answer-item {
        width: 280px;
        margin: 10px
    }

    body.ver19 .section-question .answer-btn-list .btn-ans {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        width: 280px
    }

    body.ver19 .section-question .answer-btn-list .btn-ans .text {
        font-size: 16px
    }

    body.ver19 .section-question .inline-block {
        display: inline-block
    }

    body.ver19 .section-question .link-text {
        margin-top: 26px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        font-size: 15px
    }

    body.ver19 .section-question .link-text .text {
        display: block;
        margin-left: 10px;
        text-decoration: underline
    }

    body.ver19 .section-answer .holder {
        text-align: center;
        padding-top: 48px;
        background-color: rgba(255, 255, 255, 0.85);
        padding-bottom: 60px;
        margin-bottom: 90px
    }

    body.ver19 .section-answer .section-title {
        font-size: 26px;
        margin-bottom: 30px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    body.ver19 .section-answer .section-title .skintype {
        font-weight: normal;
        display: inline-block;
        margin-left: 10px;
        font-size: 46px
    }

    body.ver19 .section-answer .comment-holder {
        position: relative;
        width: 784px;
        margin: auto;
        padding-bottom: 50px;
        border-bottom: #ccc solid 1px
    }

    body.ver19 .section-answer .comment-holder .illust {
        width: 127px;
        position: absolute;
        bottom: 0;
        right: -50px
    }

    body.ver19 .section-answer .comment-title {
        font-size: 18px;
        position: relative;
        margin-bottom: 20px;
        letter-spacing: 0.07em
    }

    body.ver19 .section-answer .comment-title:before,
    body.ver19 .section-answer .comment-title:after {
        content: "";
        background-color: #ccc;
        height: 1px;
        width: 300px;
        position: absolute;
        top: 50%
    }

    body.ver19 .section-answer .comment-title:before {
        left: 0
    }

    body.ver19 .section-answer .comment-title:after {
        right: 0
    }

    body.ver19 .section-answer .comment-text {
        font-size: 16px;
        line-height: 28px
    }

    body.ver19 .section-answer .recommend-series {
        text-align: center;
        border: #CCC solid 1px;
        border-top: none;
        padding-bottom: 60px;
        margin-bottom: 60px
    }

    body.ver19 .section-answer .recommend-series hr {
        margin: 60px
    }

    body.ver19 .section-answer .recommend-series .btn-buy {
        width: 280px;
        margin: auto
    }

    body.ver19 .section-answer .recommend-series-title {
        font-weight: bold;
        position: relative;
        font-size: 34px;
        letter-spacing: -0.01em;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: 60px;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    body.ver19 .section-answer .recommend-series-title:before,
    body.ver19 .section-answer .recommend-series-title:after {
        content: "";
        background-color: #ccc;
        height: 1px;
        width: 180px;
        position: absolute;
        top: 50%
    }

    body.ver19 .section-answer .recommend-series-title:before {
        left: 0
    }

    body.ver19 .section-answer .recommend-series-title:after {
        right: 0
    }

    body.ver19 .section-answer .product-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-bottom: 60px
    }

    body.ver19 .section-answer .product-list .product-item {
        width: 29.333%;
        margin: 10px 2% 0;
        text-align: center
    }

    body.ver19 .section-answer .product-list .product-item .block-title {
        width: 180px;
        margin: auto;
        font-weight: bold;
        font-size: 24px;
        border-bottom: #ccc solid 1px;
        margin-bottom: 43px;
        padding-bottom: 10px
    }

    body.ver19 .section-answer .product-list .product-item .product-pic {
        width: 118px;
        margin: auto;
        margin-bottom: -55px
    }

    body.ver19 .section-answer .product-list .product-item .product-name {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 3px;
        height: 72px;/*questionの遷移先用*/
    }

    body.ver19 .section-answer .product-list .product-item .product-type {
        font-size: 16px;
        line-height: 1.5;
        height: 24px;/*questionの遷移先用*/
    }

    body.ver19 .section-answer .product-list .product-item .product-sale-name {
        font-size: 10px;
        line-height: 1.66;
        margin-top: 15px;
        letter-spacing: -0.02em;
        margin-bottom: 20px;
        height: 33px;/*questionの遷移先用*/
    }

    body.ver19 .section-answer .product-list .product-item .btn-holder {
        margin-top: 28px
    }

    body.ver19 .section-answer .product-list .product-item .btn-holder .btn-default {
        font-size: 16px;
        width: 200px;
        height: 50px;
        margin: auto
    }

    body.ver19 .section-answer .product-list .product-item .btn-holder .btn-default+.btn-default {
        margin-top: 15px
    }

    body.ver19 .section-answer .care-holder {
        text-align: center
    }

    body.ver19 .section-answer .care-title {
        font-weight: bold;
        position: relative;
        font-size: 34px;
        width: 813px;
        margin: auto;
        border-bottom: #CCC solid 1px;
        margin-bottom: 20px;
        padding-bottom: 10px
    }

    body.ver19 .section-answer .care-product-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    body.ver19 .section-answer .care-product-list .product-item {
        margin-top: 40px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        width: 48.04688%;
        text-align: left
    }

    body.ver19 .section-answer .care-product-list .product-pic {
        width: 190px;
        height: 270px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        margin-right: 20px
    }

    body.ver19 .section-answer .care-product-list .product-pic img {
        width: 129px
    }

    body.ver19 .section-answer .care-product-list .product-name {
        margin-top: -6px;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: end;
        height: 90px;
    }

    body.ver19 .section-answer .care-product-list .sub {
        display: block;
        font-size: 11px;
        font-weight: normal
    }

    body.ver19 .section-answer .care-product-list .product-sale-name {
        font-size: 10px;
        line-height: 1.66;
        margin-top: 6px;
        letter-spacing: -0.02em
    }

    body.ver19 .section-answer .care-product-list .t-read {
        margin-top: 10px;
        line-height: 25px
    }

    body.ver19 .section-answer .care-product-list .btn-default {
        font-size: 16px;
        width: 200px;
        height: 50px;
        margin-top: 25px
    }

    body.ver19 .btn-banner {
        display: block;
        width: 420px;
        margin: auto;
        margin-top: 60px;
        position: relative;

    }

    body.ver19 .btn-banner:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s
    }

    body.ver19 .btn-banner:hover:after {
        opacity: 1
    }

    body.ver19 .hover-border-red:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: #CCC solid 1px;
        -webkit-transition: border 0.3s;
        transition: border 0.3s
    }

    body.ver19 .hover-border-red .title {
        -webkit-transition: color 0.3s;
        transition: color 0.3s
    }

    body.ver19 .hover-border-red:hover:before {
        border: #9d162e solid 2px
    }

    body.ver19 .hover-border-red:hover .title {
        color: #9d162e
    }

    .touhatsu-day-interactive-contents-box {
        background: url(../img/bg-touhatsu-day.jpg) repeat;
        max-width: 420px;
        margin: 30px auto;
        padding: 30px;
        text-align: center;
    }

    .touhatsu-day-text-s {
        font-weight: bold;
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 10px;
    }

    .touhatsu-day-text-2 {
        margin-top: 20px;
        margin-bottom: 0;
    }

    .touhatsu-day-btn {
        max-width: 300px;
        width: 100%;
        margin: 10px auto 0;
    }

    .touhatsu-day-btn {
        display: block;
        position: relative;
    }

}

@media screen and (max-width: 640px) {
    .contents {
        position: relative;
        padding-bottom: 18.75vw
    }

    .contents:before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: transparent url("../img/top-bg-sp.png") no-repeat right top/60% auto
    }

    .contents .page-title img {
        width: 62.1875vw
    }

    body.ver19 .purple {
        color: #370a4b
    }

    body.ver19 .red {
        color: #9d162e
    }

    body.ver19 .blue {
        color: #051469
    }

    body.ver19 .section-start {
        margin-top: 4.6875vw
    }

    body.ver19 .section-start .holder {
        text-align: center;
        background-color: rgba(255, 255, 255, 0.85);
        padding-top: 9.375vw;
        padding-bottom: 9.375vw;
        padding-left: 8.59375vw;
        padding-right: 8.59375vw;
        margin-bottom: 15.625vw
    }

    body.ver19 .section-start .pic-check {
        margin: auto;
        width: 21.71875vw;
        margin-bottom: 7.8125vw
    }

    body.ver19 .section-start .section-title {
        font-weight: bold;
        font-size: 6.25vw;
        margin-bottom: 4.6875vw
    }

    body.ver19 .section-start .text-lead {
        line-height: 2.08333;
        font-size: 3.75vw;
        margin-bottom: 10.9375vw
    }

    body.ver19 .btn-banner {
        display: block;
        margin: auto;
        margin-top: 60px;
        width: 87.5vw;
        position: relative
    }

    body.ver19 .section-question .holder {
        text-align: center;
        background-color: rgba(255, 255, 255, 0.85);
        padding-top: 9.375vw;
        padding-bottom: 9.375vw;
        padding-left: 8.59375vw;
        padding-right: 8.59375vw
    }

    body.ver19 .section-question .progress {
        margin: auto;
        width: 60.9375vw;
        margin-bottom: 6.25vw
    }

    body.ver19 .section-question .progress .text {
        text-align: right;
        font-size: 3.125vw;
        margin-bottom: 1.5625vw
    }

    body.ver19 .section-question .progress .base {
        position: relative;
        width: 100%;
        background-color: #cccccc;
        height: .625vw;
        margin-bottom: 1.25vw
    }

    body.ver19 .section-question .progress .progress-bar {
        height: 100%;
        width: 0;
        -webkit-transition: width .3s;
        transition: width .3s;
        background-color: #9d162e
    }

    body.ver19 .section-question .shoulder {
        margin: auto auto 14px;
        width: 12.5vw
    }

    body.ver19 .section-question .question-title {
        line-height: 2.08333;
        font-weight: normal;
        font-size: 3.75vw
    }

    body.ver19 .section-question .answer-btn-list {
        margin-top: 7.8125vw
    }

    body.ver19 .section-question .answer-btn-list .btn-ans {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    body.ver19 .section-question .answer-item+.answer-item {
        margin-top: 4.6875vw
    }

    body.ver19 .section-question .inline-block {
        display: inline-block
    }

    body.ver19 .section-question .link-text {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        font-size: 3.75vw;
        margin-top: 4.6875vw
    }

    body.ver19 .section-question .link-text .text {
        display: block;
        text-decoration: underline;
        margin-left: 2.34375vw
    }

    body.ver19 .section-question .link-text svg {
        width: 1.5625vw;
        height: 2.5vw
    }

    body.ver19 .section-answer {
        position: relative
    }

    body.ver19 .section-answer .holder {
        text-align: center;
        padding-top: 7.8125vw;
        padding-bottom: 9.375vw;
        margin-bottom: 12.5vw;
        background-color: rgba(255, 255, 255, 0.85)
    }

    body.ver19 .section-answer .section-title {
        font-size: 5vw;
        margin-bottom: 4.6875vw
    }

    body.ver19 .section-answer .section-title .skintype {
        font-size: 8.4375vw;
        font-weight: normal;
        display: block
    }

    body.ver19 .section-answer .comment-holder {
        position: relative;
        margin: auto;
        margin-left: 6.25vw;
        margin-right: 6.25vw;
        border-bottom: #ccc solid 1px
    }

    body.ver19 .section-answer .comment-holder .illust {
        margin-top: 4.6875vw;
        width: 30.46875vw
    }

    body.ver19 .section-answer .comment-title {
        position: relative;
        font-size: 4.21875vw;
        margin-bottom: 3.125vw;
        letter-spacing: 0.07em
    }

    body.ver19 .section-answer .comment-title:before,
    body.ver19 .section-answer .comment-title:after {
        content: "";
        background-color: #ccc;
        height: 1px;
        width: 18.75vw;
        position: absolute;
        top: 50%
    }

    body.ver19 .section-answer .comment-title:before {
        left: 0
    }

    body.ver19 .section-answer .comment-title:after {
        right: 0
    }

    body.ver19 .section-answer .comment-text {
        font-size: 3.75vw;
        line-height: 6.875vw;
        text-align: left
    }

    body.ver19 .section-answer .recommend-series {
        text-align: center;
        border: #9e9e9e solid 1px;
        border-top: none;
        padding-bottom: 9.375vw;
        margin-bottom: 18.75vw;
        margin-left: -3.125vw;
        margin-right: -3.125vw
    }

    body.ver19 .section-answer .recommend-series hr {
        margin: 9.375vw;
        margin-top: 14.0625vw;
        margin-bottom: 12.5vw
    }

    body.ver19 .section-answer .recommend-series .btn-buy {
        font-size: 3.75vw;
        width: 75vw;
        min-height: 13.125vw;
        width: 75vw;
        margin: auto
    }

    body.ver19 .section-answer .recommend-series-title {
        font-weight: bold;
        position: relative;
        font-size: 6.25vw;
        line-height: 8.125vw;
        height: 16.25vw;
        margin-bottom: -7.8125vw;
        letter-spacing: 0.02em;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    body.ver19 .section-answer .recommend-series-title:before,
    body.ver19 .section-answer .recommend-series-title:after {
        content: "";
        background-color: #9e9e9e;
        height: 1px;
        width: 14.375vw;
        position: absolute;
        top: 50%
    }

    body.ver19 .section-answer .recommend-series-title:before {
        left: 0
    }

    body.ver19 .section-answer .recommend-series-title:after {
        right: 0
    }

    body.ver19 .section-answer .product-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-bottom: 9.375vw
    }

    body.ver19 .section-answer .product-list .product-item {
        width: 14.375vw;
        margin-top: 9.375vw;
        width: 50%;
        text-align: center
    }

    body.ver19 .section-answer .product-list .product-item .block-title {
        margin: auto;
        font-weight: bold;
        width: 37.5vw;
        font-size: 4.0625vw;
        padding-bottom: 1.5625vw;
        margin-bottom: 5.46875vw;
        border-bottom: #ccc solid 1px
    }

    body.ver19 .section-answer .product-list .product-item .product-pic {
        width: 23.4375vw;
        margin: auto;
        margin-bottom: -10.3125vw
    }

    body.ver19 .section-answer .product-list .product-item .product-pic img[src$='item-scalpd-jet.png'] {
        margin-top: -5.46875vw
    }

    body.ver19 .section-answer .product-list .product-item .product-name {
        font-size: 3.4375vw;
        line-height: 4.6875vw;
        margin-bottom: .78125vw;
        font-weight: bold;
        height: 90px;
    }

    body.ver19 .section-answer .product-list .product-item .product-type {
        font-size: 3.4375vw;
        line-height: 4.6875vw;
        height: 30px;
    }

    body.ver19 .section-answer .product-list .product-item .product-sale-name {
        font-size: 2.4vw;
        line-height: 4.0vw;
        margin-top: 1.875vw;
        margin-bottom: 3.125vw;
        letter-spacing: -0.02em;
        height: 77px;
    }

    body.ver19 .section-answer .product-list .product-item .btn-holder {
        margin-top: 4.6875vw
    }

    body.ver19 .section-answer .product-list .product-item .btn-holder .btn-default {
        font-size: 3.75vw;
        width: 40.625vw;
        min-height: 13.125vw;
        margin: auto
    }

    body.ver19 .section-answer .product-list .product-item .btn-holder .btn-default+.btn-default {
        margin-top: 3.125vw
    }

    body.ver19 .section-answer .care-holder {
        text-align: center
    }

    body.ver19 .section-answer .care-title {
        font-weight: bold;
        position: relative;
        margin: auto;
        font-size: 5.3125vw;
        letter-spacing: 0.1em;
        margin-bottom: 3.125vw;
        border-bottom: #000 solid 1px;
        padding-bottom: 10px
    }

    body.ver19 .section-answer .care-product-list .product-item {
        margin-top: 10.9375vw;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        text-align: left
    }

    body.ver19 .section-answer .care-product-list .product-pic {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        width: 33.4375vw;
        margin-right: 5vw
    }

    body.ver19 .section-answer .care-product-list .product-pic img {
        width: 24.6875vw
    }

    body.ver19 .section-answer .care-product-list .info-block {
        -webkit-flex-shrink: 1;
        flex-shrink: 1
    }

    body.ver19 .section-answer .care-product-list .product-name {
        margin-top: 1.5625vw;
        font-size: 3.4375vw;
        font-weight: bold
    }

    body.ver19 .section-answer .care-product-list sup {
        font-size: 1.5625vw
    }

    body.ver19 .section-answer .care-product-list .sub {
        display: block;
        margin-top: .78125vw;
        font-size: 3.125vw;
        font-weight: normal
    }

    body.ver19 .section-answer .care-product-list .product-sale-name {
        font-size: 2.4vw;
        line-height: 4.0vw;
        margin-top: 1.5625vw;
        letter-spacing: -0.02em
    }

    body.ver19 .section-answer .care-product-list .t-read {
        font-size: 3.4375vw;
        line-height: 4.6875vw;
        margin-top: 2.5vw
    }

    body.ver19 .section-answer .care-product-list .btn-default {
        font-size: 3.75vw;
        width: 40.625vw;
        min-height: 13.125vw;
        margin-top: 4.6875vw;
        margin-left: 0
    }

    .touhatsu-day-interactive-contents-box {
        background: url(../img/bg-touhatsu-day.jpg) repeat;
        margin: 6.25vw auto 0;
        padding: 6.25vw;
        text-align: center;
    }

    .touhatsu-day-text-s {
        font-weight: bold;
        line-height: 1.66667;
        font-size: 3.75vw;
        margin-bottom: 10px;
    }

    .touhatsu-day-text-l {
        font-size: 5vw;
    }

    .touhatsu-day-text-2 {
        margin-top: 3.90625vw;
        margin-bottom: 0;
    }

    .touhatsu-day-btn {
        width: 75%;
        margin: 10px auto 0;
        display: block;
        position: relative;
    }

}