@charset "utf8";
@media screen and (max-width:1160px) {
    .cont {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media screen and (max-width:1030px) {
    .menu li a {
        font-size: 14px;
        padding: 5px;
    }
}
@media screen and (max-width:960px) {
    .top-two-item.left {
        width: 100%;
        margin-right: 0;
        order: 1;
    }
    .top-two-item.right {
        width: 100%;
        order: 0;
    }
    .top-css-three {
        margin-bottom: 25px;
    }
    .top-css-four {
        padding-top: 0;
        padding-bottom: 25px;
    }
    .top-css-one {
        padding-top: 10px;
    }
    .top-two-row {
        padding-top: 40px;
    }
    .owl-carousel.spinner .owl-item img {
        height: 180px;
    }
    .owl-theme .owl-dots .owl-dot span {
        width: 50px;
    }
    .product-colums-right {
        padding-top: 30px;
        padding-bottom: 0px;
    }
    .top-css-four ul li img {
        height: inherit;
        object-fit: inherit;
    }
    .top-css-four ul {
        height: inherit;
    }
    .top-css-four ul.s2 li {
        margin-bottom: 13px;
    }
    .top-css-four ul.s1>li>a {
        min-height: 185px;
        padding: 100px 30px;
    }
    .top-css-four ul.s1 {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
        background-size: cover;
    }
    .top-css-four ul.s2 {
        width: 100%;
    }
    .top-css-four ul.s2 li img {
        display: block;
        margin: 0 auto;
    }
    .top-css-four ul.s2 li:nth-child(1) {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#da1053+0,9e1eac+100 */
        background: rgb(218, 16, 83);
        /* Old browsers */
        background: -moz-linear-gradient(-45deg, rgba(218, 16, 83, 1) 0%, rgba(158, 30, 172, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg, rgba(218, 16, 83, 1) 0%, rgba(158, 30, 172, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg, rgba(218, 16, 83, 1) 0%, rgba(158, 30, 172, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da1053', endColorstr='#9e1eac', GradientType=1);
        /* IE6-9 fallback on horizontal gradient */
    }
    .top-css-four ul.s2 li:nth-child(3) {
        background: #4267B1;
    }
    .top-css-four ul.s2 {
        font-size: 0;
    }
    .top-css-four ul.s2 li {
        float: inherit;
        display: inline-block;
        vertical-align: top;
        border: 0px solid #000;
    }
}

@media screen and (max-width:900px) {
    .block-htopnav--item a {
        height: 40px;
        font-size: 12px;
        padding: 0 10px;
    }
    .block-htop {
        height: 40px;
    }
    .block-hheadline p {
        padding: 0 0 0 40px;
        width: 100%;
    }
    .block-hheadline p:before {
        left: 10px;
    }
    .menu {
        width: 100%;
        max-width: 310px;
        position: fixed;
        background: #333;
        height: 100%;
        right: -100%;
        z-index: 99999;
        top: 0;
        transition: all 0.6s;
        -webkit-transition: all 0.6s;
        -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
        -o-transition: all 0.6s;
}
    .sub-menusmartphone a.close {
        display: none;
    }
    .menu.active li.close {
        display: block;
        width: 100%;
        padding-bottom: 15px;
    }
    .menu.active {
        right: -10%;
        top: 0;
        transition: all 0.6s;
        -webkit-transition: all 0.6s;
        -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
        -o-transition: all 0.6s;
}
    .menu.none-active {
        right: -100%;
    }
    .flow-mxh {
        display: none;
    }
    .head-wrap {
        height: 80px;
    }
    .logo {
        width: 71%;
    }
    .logo img {
        height: 30px;
    }
    .sub-menusmartphone {
        width: 29%;
        display: block;
    }
    .sub-menusmartphone a {
        background: #666666;
        padding: 8px;
        display: inline-block;
        float: right;
    }
    .sub-menusmartphone img {
        height: 30px;
    }
    .top-css-one {
        padding-top: 0px;
    }
    .top-two-row {
        padding-top: 20px;
    }
    .menu.active li {
        display: block;
        text-align: left;
        padding: 0 20px;
        overflow: hidden;
    }
    .menu.active li.sp-1 {
        display: block;
        float: left;
        margin-top: 20px;
    }
    .menu.active li.sp-1 a {
        display: inline-block;
        padding: 0;
    }
    .menu.active li a {
        display: block;
        color: #fff;
        padding: 10px 0;
    }
    .product-colums-right li img {
        height: 150px;
    }
    .product-colums-right li span.titlegia-product {
        font-size: 13px;
    }
    .product-colums-right li span.titleName-product {
        font-size: 15px;
        line-height: 140%;
        padding: 5px 0;
        padding-bottom: 0;
    }
    .title-product-colums-right {
        padding: 10px 0;
        padding-top: 15px;
    }
    .title-product-colums-right h3, .title-top h3 {
        font-size: 18px;
    }
    a.subTop {
        bottom: 53px;
    }

    .sub-menu-top{
        background: none;
        position: relative;
        display: block;
        top: 0;
        left: 0;
    }

    .sub-menu-top li{
        padding: 0 !important;
        padding-left: 15px !important;
    }
    .sub-menu-top li a{border: 0px solid #000;}        
    #namako,#saboten,#kojin-yunyu-asia,#privacy{padding-bottom: 30px;}
}


@media screen and (max-width:767px) {
    .product02-mt50 {
		margin-top: 0px !important;
    }
    .discri a {
        font-size: 14px;
        color: #0d8561;
        word-break: break-all;
    }
    .box01 h3 {
        position: absolute;
        top: 0px;
        left: 100px;
    }
    .box01 h3 {
        position: absolute;
        top: 0px;
        left: 100px;
    }
    .box01 h3 span {
        position: absolute;
        background-color: #f5f6f6;
        z-index: 5;
        padding: 0 0px 0 0;
    }
    .point {
        color: #111;
        font-size: 30px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid #0d8561;
        box-sizing: border-box;
        padding-top: 20px;
        font-family: 'Cinzel', serif;
        -webkit-mask-image: url(../images/mask02.png);
        mask-image: url(../images/mask02.png);
        mask-size: auto auto;
        -webkit-mask-size: 100px auto;
        transform: rotate(-10deg);
        margin-bottom: 30px;
        text-align: center;
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
    }
    .sub-menusmartphone a {
        background: #fff;
        padding: 2px;
        display: inline-block;
        float: right;
    }
    .sub-menusmartphone img {
        height: 40px;
    }
    .head-wrap {
        height: 50px;
    }
    #header .block-htop {
        display: none;
    }
    #header .cont {
        background: #ffffff;
        position: relative;
        left: unset;
        top: unset;
        transform: none;
    }
    /* css fs-16 sp */
    .discri,ol.use,label,.low,.pp,ol.privacy {
        font-size: 16px;
        line-height: 160%;
    }
    .head_h4_privacy {
        font-size: 18px;
    }
    /* End css fs-16 sp */
}
@media screen and (max-width:600px) {
    .block-htopnav {
        display: none;
    }
    .asian-colums-three {
        padding-left: 10px;
        padding-right: 10px;
    }
    .asian-colums-three p, .asian-colums-three a {
        color: #000;
        line-height: 150%;
    }
    .banner-page {
        min-height: 200px;
        margin-top: 40px;
    }
    .banner-page h2 {
        font-size: 20px;
    }
    .banner-page h1{font-size: 15px;}
}

@media screen and (max-width:480px) {
    .owl-carousel.spinner .owl-item img {
        height: 150px;
    }
    .br_show {
        display: block;
    }
    .banner-colums-right li {
        width: calc( (100% - 2%) / 2);
        margin-bottom: 7px;
    }
    .banner-colums-right li:nth-child(2n) {
        margin-right: 0;
    }
    .sp_show {
        display: block;
    }
    .product-colums-right {
        padding-top: 0;
        padding-bottom: 0px;
    }
    .product-colums-right li {
        width: calc( (100% - 2%) / 2);
        margin-bottom: 17px;
    }
    .product-colums-right li:nth-child(2n) {
        margin-right: 0;
    }
    .owl-carousel.spinner .owl-item img {
        height: 150px;
    }
    .top-css-three {
        margin-bottom: 25px;
    }
    .asian-colums-three img {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .asian-colums-three {
        padding-bottom: 25px;
    }
    .new-reading li:nth-child(3n) {
        margin-right: 2%;
    }
    .title-colums-left h3 {
        font-size: 16px;
    }
    .top-css-four {
        padding-top: 0;
        padding-bottom: 25px;
    }
    .top-css-four ul.s1, .top-css-four ul.s2 {
        width: 100%;
        margin-right: 0;
    }
    .top-css-four ul li img, .top-css-four ul {
        height: inherit;
    }
    .top-css-four ul.s2 li {
        width: 50%;
        margin-right: 0;
        margin-bottom: 0;
    }
    .wp-footer {
        padding: 15px 0;
    }
    .footer {
        margin-top: 50px;
    }
    .coppy-right {
        line-height: 140%;
    }
    a.subTop {
        width: 40px;
        height: 40px;
    }
    .top-css-four ul.s1 {
        background-size: cover;
    }
    .top-css-four ul.s1>li>a {
        min-height: 100px;
        padding: 30px;
    }
    .top-css-four ul.s2 li:nth-child(2) a {
        font-size: 14px;
    }
    .top-css-four ul.s2 li:nth-child(4) a {
        font-size: 14px;
    }
    .logo-slider {
        padding: 10px;
    }
}
@media screen and (max-width:320px) {
    .logo {
        width: 67%;
    }
    .sub-menusmartphone {
        width: 33%;
    }
    #footer {
        margin-top: -58px;
    }
}