/*# sourceMappingURL=slick.min.css.map */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    word-break: normal
}

*,
:after,
:before {
    box-sizing: inherit
}

:after,
:before {
    text-decoration: inherit;
    vertical-align: inherit
}

* {
    margin: 0;
    outline: 0;
    padding: 0
}

article,
aside,
dialog,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

main {
    display: block
}

small {
    font-size: 80%
}

p {
    margin: 0
}

a {
    background-color: transparent;
    color: #333;
    text-decoration: none
}

a:visited {
    color: inherit
}

a:active,
a:hover {
    outline-width: 0
}

img {
    max-width: 100%;
    vertical-align: top
}

ol,
ul {
    padding: 0;
    list-style: none
}

@-webkit-keyframes anmCVbtn {
    0 {
        transform: scale(0.9)
    }

    25% {
        transform: scale(1)
    }

    50% {
        transform: scale(0.9)
    }

    75% {
        transform: scale(1)
    }
}

@keyframes anmCVbtn {

    0,
    to {
        transform: scale(0.9)
    }

    25% {
        transform: scale(1)
    }

    50% {
        transform: scale(0.9)
    }

    75% {
        transform: scale(1)
    }

    to {
        transform: scale(0.9)
    }
}

.article {
    max-width: 750px;
    margin: 0 auto
}

.article img {
    max-width: 100%;
    transition: all .3s
}

.fv {
    position: relative
}

.fv__item {
    left: 50%;
    bottom: -10%;
    transform: translateX(-50%);
    position: absolute;
    width: 95%;
    text-align: center
}

.fv-2 {
    position: relative;
    height: calc(100% - 7px)
}

.fv-2__item {
    left: 50%;
    bottom: -5%;
    transform: translateX(-50%);
    position: absolute;
    width: 95%;
    text-align: center
}

.fv-2 video {
    width: 100%;
    max-width: 750px;
    margin: 0 auto
}

.fv-2__video {
    max-height: 700px
}

.fv-3 {
    position: relative;
    height: calc(100% - 7px)
}

.fv-3__item {
    left: 22%;
    bottom: 16%;
    transform: translateX(-50%);
    position: absolute;
    width: 40%;
    text-align: center
}

.fv-3__3item {
    left: 22%;
    bottom: 17%;
    transform: translateX(-50%);
    position: absolute;
    width: 40%;
    text-align: center
}

.fv-3 video {
    width: 100%;
    max-width: 300px;
    margin: 0 auto
}

.fv-3__video {
    max-height: 700px
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    z-index: 3;
    width: 100%;
    max-width: 750px;
    padding: 15px;
    background: url(../images/cmn_fix_bg.png)no-repeat;
    background-size: cover
}


.bottom-nav__btn {
    display: block;
    float: right;
    width: 30%
}

@media(max-width:420px) {
    .bottom-nav {
        padding: 10px
    }
}

.fv-3__pi {
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
    position: absolute;
    width: 100%;
    text-align: center
}

.common-cv__btn-block {
    width: 100%;
    background: url(../images/cmn_cv_bg.jpg)repeat-y center;
    background-size: contain;
    text-align: center
}

.common-cv__btn-block a {
    display: block;
    width: 90%;
    margin: 0 auto
}

.common-cv__tel {
    padding: 20px 20px 30px;
    background: #f0f1f3;
    text-align: center
}

.shampoo {
    position: relative;
    padding-bottom: 0px;
    background: #f8f8f8
}

.shampoo__comment {
    position: absolute;
    bottom: 0%;
    left: 1%;
    z-index: 1
}

.shampoo__comment img {
    width: 100%
}

.shampoo__video {
    position: absolute;
    bottom: 40px;
    width: 100%;
    padding: 0 4%;
    text-align: center
}

.shampoo__video video {
    width: 100%;
    max-width: 40pc;
    margin: 0 auto
}

@media(max-width:640px) {
    .shampoo__comment img {
        max-width: 93%
    }
}

@media(max-width:420px) {
    .shampoo__comment img {
        max-width: 93%
    }
}

.sns {
    position: relative
}

.sns__01 {
    top: 6%;
    left: 4.7%
}

.sns__01,
.sns__02 {
    width: 59.7%;
    position: absolute
}

.sns__02 {
    top: 51.8%;
    right: 4.5%
}

.sns__03 {
    width: 29.8%;
    position: absolute;
    top: 72.7%;
    left: 4.7%
}

.yogore {
    padding: 30px 4% 3pc;
    background-color: #f5F9fb;
}

@media(min-width:420px) {
    .yogore {
        padding-bottom: 15pt
    }
}

.yogore__video {
    margin-bottom: 2pc
}

.yogore__text,
.yogore__video {
    text-align: center
}

.trouble {
    position: relative;
    text-align: center
}

.trouble__soshite {
    position: absolute;
    top: -2%;
    left: 50%;
    transform: translateX(-50%);
    width: 34%
}

.awa {
    padding: 4%;
    background: #f2f3f5;
    text-align: center
}

.awa video {
    width: 100%;
    max-width: 40pc;
    padding-bottom: 8px;
}

.keana {
    padding: 2pc 0 5pc;
    background: url(../img/03_11_bg.png)no-repeat bottom/contain;
    background-color: #f2f3f5
}

.keana p {
    text-align: center
}

.keana p:first-child {
    margin-bottom: 2pc
}

.keana__box {
    max-width: 92%;
    margin: 0 auto;
    padding: 8% 4%;
    border-radius: 20px;
    background: #c6b2a6
}

.keana-02 {
    padding: 0 4%;
    background-color: #f2f3f5;
    text-align: center
}

.voice {
    background: #ded6c9
}

.voice__slide {
    position: relative;
    padding: 4% 8% 8%
}

.voice__slide .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 90pt;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    text-indent: -9999px;
    z-index: 2
}

@media(max-width:420px) {
    .voice__slide .slick-arrow {
        width: 30px;
        height: 60px
    }
}

.voice__slide .slick-arrow:focus {
    border: 0;
    outline: 0
}

.voice__slide .slick-prev {
    left: 2%;
    background: url(/Landing/sin_bestz/img/btn_left.png)no-repeat;
    background-size: contain;
    content: ""
}

.voice__slide .slick-next {
    right: 2.2%;
    background: url(/Landing/sin_bestz/img/btn_right.png)no-repeat;
    background-size: contain;
    content: ""
}

.voice__slide .slick-dots {
    display: flex;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%)
}

.voice__slide .slick-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    outline: 0;
    background: #ddd6c9;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: -9999px
}

.voice__slide .slick-dots button:focus {
    border: 0;
    outline: 0
}

.voice__slide .slick-dots li {
    margin: 0 6px
}

.voice__slide .slick-dots .slick-active button {
    background: #d75045
}

.faq-block {
    padding: 4%;
    background: #f4e4d7;
    text-align: center
}

.faq {
    max-width: 680px
}

.faq li:not(:first-child) {
    margin-top: 24px
}

.faq__question {
    position: relative;
    cursor: pointer
}

.faq__answer {
    display: none;
    position: relative
}

.faq__answer:before {
    position: absolute;
    top: -8px;
    width: 100%;
    height: 8px;
    background: #fff;
    content: ""
}

.accordion-icon {
    right: 9pt;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    transition: all .3s
}

.accordion-icon:after,
.accordion-icon:before {
    position: absolute;
    right: 9pt;
    width: 24px;
    height: 1px;
    background: #323232;
    content: ""
}

@media(max-width:420px) {

    .accordion-icon:after,
    .accordion-icon:before {
        right: 8px;
        width: 1pc
    }
}

.accordion-icon:after {
    transform: rotate(90deg)
}

.accordion-icon.is-white:after,
.accordion-icon.is-white:before {
    background: #fff
}

.accordion-icon.is-active:after {
    display: none
}

.about {
    margin-top: 150px;
    padding: 0 4%
}

.about__item {
    max-width: 680px;
    margin: 0 auto
}

.about__item+.about__item {
    margin-top: 24px
}

.about__item div {
    position: relative
}

.about__text {
    display: none;
    font-size: 13px;
    padding: 2pc 0;
    line-height: 1.8
}

.about__text p {
    color: #323232
}

.about__text p:not(:first-child) {
    margin-top: 20px
}

.about__text p:nth-child(3) {
    margin-top: 40px
}

.about__text strong {
    line-height: 2
}

.about__card-img {
    width: 80%;
    margin: auto
}

.links {
    display: flex;
    justify-content: center;
    margin-top: 5pc;
    padding-bottom: 10pc
}

.links li {
    position: relative;
    padding: 0 8px;
    line-height: 1
}

.links li a {
    color: #323232;
    font-size: 9pt
}

.links li:not(:first-child) {
    border-left: 1px solid #323232
}

@media(max-width:420px) {
    .links {
        padding-bottom: 90pt
    }
}

@media screen and (min-width:640px) {
    .bottom-nav {
        display: none
    }
}

/*cart.css*/
.invalid-fields-notice-box {
    display: none
}

#ukokkei-landing-page-form .order-item-info {
    width: 100% !important
}

#ukokkei-landing-page-form .order-item-quantity {
    display: none
}

.amazonpay-button-inner-image {
    margin: 5px 0 10px
}

#ukokkei-landing-page-form .col-xs-3-5 {
    width: 100% !important
}

#ukokkei-landing-page-form .form-control {
    height: 60px !important
}

@media all and (min-width:980px) {
    #ukokkei-landing-page-form .form-control {
        height: 55px !important
    }
}

#ukokkei-landing-page-form>.container-fluid>div:nth-last-child(3),
#ukokkei-landing-page-form>.container-fluid>div:nth-last-child(5),
#ukokkei-landing-page-form>.container-fluid>div:nth-last-child(6)>.ibox-content>.form-horizontal>div:first-child {
    display: none
}

#ukokkei-landing-page-form .password-title-padding {
    padding-left: 15px
}

#ukokkei-landing-page-form .form-horizontal .control-label,
.ukokkei-base-css .form-horizontal .control-label {
    text-align: left !important;
    margin-bottom: 0;
    padding-top: 7px
}

#ukokkei-landing-page-form .password-title-padding {
    position: relative !important;
    min-height: 1px !important;
    padding-left: 15px !important;
    padding-right: 15px !important
}

#ukokkei-landing-page-form .text-right,
.ukokkei-base-css .text-right {
    text-align: left !important
}

#ukokkei-landing-page-form table th,
.ukokkei-base-css table th {
    display: block;
    margin-bottom: 10px
}

#ukokkei-landing-page-form table td,
.ukokkei-base-css table td {
    margin-bottom: 10px;
    padding-right: 3px
}

#ukokkei-landing-page-form .custom-checkbox-label,
#ukokkei-landing-page-form .custom-radio-btn-label,
#ukokkei-landing-page-form .security-code-label {
    padding-left: 15px !important
}

input,
select {
    font-size: 1pc !important
}

#ukokkei-landing-page-form .hr-line-dashed {
    margin: 5px 0 15px !important;
    border-top: 1px dashed #999 !important
}

img.fa-exclamation-circle {
    display: inline-block
}

#ukokkei-landing-page-form .col-lg-2 {
    width: 23.667% !important
}

#ukokkei-landing-page-form .form-horizontal .control-label {
    display: block
}

#ukokkei-landing-page-form .payment-method-description {
    max-height: 1735px !important
}

#ukokkei-landing-page-form .order-item-quantity {
    width: 100% !important;
    text-align: left !important
}

#ukokkei-landing-page-form .customer-info-birth-day-container,
#ukokkei-landing-page-form .customer-info-birth-month-container,
#ukokkei-landing-page-form .customer-info-birth-year-container {
    width: 100% !important
}

@media screen and (max-width:979px) {
    #ukokkei-landing-page-form .col-lg-2 {
        width: 70.833333333% !important
    }

    ul.f-ul {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #ebebeb 0 0 repeat scroll 0 0;
        color: #666;
        display: block;
        text-align: center;
        padding: 0
    }

    .f-ul li:first-child {
        border-top: 1px dotted #ccc
    }

    .f-ul li {
        border-bottom: 1px dotted #ccc;
        display: inline-block;
        margin: 0;
        text-align: left;
        width: 100%;
        padding: 15px 10px;
        font-size: 14px
    }

    p.cr {
        font-size: 10px;
        text-align: center;
        padding: 20px 5px
    }

    #ukokkei-landing-page-form .payment-method-description {
        max-height: 250px !important;
        padding: 0 !important;
        background: #fff !important
    }

    #ukokkei-landing-page-form .payment-method-description h2 {
        font-weight: 700;
        font-size: 80%
    }

    #ukokkei-landing-page-form .payment-method-description {
        max-height: 805px !important
    }
}

/*w2cart.css*/
.cartmain {
    margin: 0 auto
}

.card_comp img {
    width: 100%;
    height: auto
}

.user-input-subt {
    color: #fff;
    background-color: #999;
    padding: 8px;
    line-height: 38px;
    font-size: 17px
}

.fred_req {
    color: #e31515;
    font-size: .8em;
    padding-left: 3px
}

.orderBox .user-input,
.userBox .user-input {
    border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    background: #505050;
    padding: 15px
}

.orderBox dl,
.userBox dl {
    display: flex;
    background-color: #f5f5f7;
    padding: 15px 90pt 15px 10px
}

.orderBox dd,
.orderBox dt,
.userBox dd,
.userBox dt {
    font-size: 15px;
    color: #505050
}

.orderBox dt,
.userBox dt {
    flex: 1 1 0;
    padding: 10px 0 0 15px
}

.orderBox dd,
.userBox dd {
    flex: 2 1 0;
    color: #505050
}

.orderBox dd.w50,
.userBox dd.w50 {
    display: flex
}

.userBox .w50 input {
    flex: 1 1 0;
    margin-right: 10px
}

.orderBox .w100 input,
.userBox .w100 input {
    width: 100%
}

.loginform .w80 input {
    width: 80%
}

.userBox .zip .btn_add_sea,
.userBox .zip input {
    flex: 1 1 0
}

.zip .btn_add_sea {
    margin: 5px;
    display: block
}

.zip .btn-zip-large {
    padding: 7px 30px;
    font-size: 15px;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.zip .pdg_topC input {
    margin-right: 5px
}

.densan img {
    width: 100%
}

.userLogin {
    display: flex;
    padding: 15px 15px 10px 25px;
    background-color: #f5f5f7
}

.LoginWidth {
    width: 920px;
    margin: 10px auto
}

.loginTitle {
    border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    background: #505050;
    padding: 15px
}

.userLogin .loginform {
    flex: 1 1 60%
}

.userLogin .loginbutton {
    flex: 1 1 40%;
    padding-top: 20px
}

.userLogin inupt {
    width: 100%
}

.userLogin .btn {
    width: 185px;
    border: 0;
    border-radius: 5px;
    padding: 1em 2em;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ\ Ｐゴシック, MS PGothic, sans-serif
}

.btn-col-red {
    color: #fff;
    background-color: #ff0020
}

.btn-col-green {
    background-color: #5bb75b;
    color: #fff;
    background-image: -ms-linear-gradient(top, #62c462, #51a351);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(top, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0)
}

input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
    padding: 8px 8px 5px;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2) inset;
    font-size: 14px;
    -webkit-appearance: none;
    margin: 5px 0;
    height: 38px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.radio-input {
    padding-top: 5px
}

.radio-input input[type="radio"] {
    display: none
}

.radio-input input[type="radio"]+label {
    padding-left: 25px;
    font-size: 18px;
    position: relative;
    margin-right: 20px
}

.radio-input input[type="radio"]+label:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 3px;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 50%
}

.radio-input input[type="radio"]:checked+label {
    color: #007aff
}

.radio-input input[type="radio"]:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 6px;
    width: 11px;
    height: 11px;
    background: #007aff;
    border-radius: 50%
}

ol .cach_select {
    border-bottom: 1px solid #c8c8c8;
    padding: 10px 0
}

select {
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .2) inset;
    border-radius: 4px;
    background: #fff url(/SmartPhone/Image/select_arrow.png)no-repeat right center;
    background-size: 27px;
    -webkit-appearance: none;
    padding-right: 27px;
    white-space: nowrap
}

.address_change select,
.deliv select,
.payment-list select {
    background-color: #fff;
    border: 1px solid #d2d2d2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3c3c3c;
    font-size: 14px;
    min-height: 38px;
    padding: 7px 8px 6px 9pt;
    position: relative
}

.select_100 select {
    width: 100%
}

.select_address select {
    width: 40%
}

.select_payment select {
    width: 30%
}

.deliv_select {
    width: 20%
}

.birth {
    display: flex;
    font-size: 18px;
    vertical-align: baseline
}

.birth select {
    background-color: #fff;
    border: 1px solid #d2d2d2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3c3c3c;
    font-size: 1pc;
    min-height: 38px;
    padding: 7px 8px 6px 9pt;
    position: relative;
    margin: 0 6px 0 0
}

.birth .year {
    flex: 8 1 80px
}

.birth .date,
.birth .month {
    flex: 3 1 60px
}

.checkbox-input {
    padding-top: 5px
}

.checkbox-input input[type="checkbox"] {
    display: none
}

.checkbox-input label {
    padding-left: 30px;
    position: relative;
    margin-right: 20px;
    font-size: 18px
}

.checkbox-input label:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 5px;
    width: 17px;
    height: 17px;
    border: 1px solid #999;
    border-radius: 4px
}

.checkbox-input input[type="checkbox"]:checked+label {
    color: #007aff
}

.checkbox-input input[type="checkbox"]:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 10px;
    width: 9px;
    height: 1pc;
    transform: rotate(40deg);
    border-bottom: 3px solid #007aff;
    border-right: 3px solid #007aff
}

.order-form textarea {
    border-radius: 5px;
    padding: 7px 8px 6px 9pt;
    width: 100%;
    height: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #d2d2d2;
    position: relative;
    margin: 0
}

.confirm_userBox dl {
    display: flex
}

.confirm_userBox dd,
.confirm_userBox dt {
    flex: 1 0 0
}

.confirm_data_waku {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px 15px;
    margin: 3px 0 8px
}

.confirm_data {
    display: flex
}

.box {
    flex: 1 1 0
}

.box dl {
    display: flex;
    margin: 4px 0
}

.box dt {
    flex: 1 1 40%
}

.box dd {
    flex: 1 1 60%
}

.box em {
    font-weight: 700;
    font-size: 1.1em
}

.box .btnright {
    text-align: right;
    margin-right: 10px
}

.block {
    display: flex
}

.block .product_waku {
    flex: 1 1 65%
}

.block .product_waku dl {
    display: flex;
    margin: 8px 0 5px
}

.block .product_waku dt {
    flex: 1 1 40%
}

.block .product_waku dd {
    flex: 1 1 60%
}

.block .product_waku dt img {
    width: 150px;
    height: auto;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px
}

.block .price_waku {
    flex: 1 1 35%
}

.active {
    background-image: url(/SmartPhone/Image/min.png)
}

.active,
.disactive {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right;
    cursor: pointer
}

.disactive {
    background-image: url(/SmartPhone/Image/plu.png)
}