html:not(.responsive) {
    width: 100%;
}

/*=============================================
 * Font Don't Edit
 *=============================================*/
.fnt-noto-serif {
    font-family: "Noto Serif JP", serif;
}

.fnt-noto-sans {
    font-family: "Noto Sans JP", sans-serif;
}

.fnt-rosarivo {
    font-family: "Rosarivo", cursive;
}



/*=============================================
 * body
 *=============================================*/
body {
    font-family: "Noto Sans JP", sans-serif;
    background: #E9E1D8;
    color: #292929;
    text-align: left;
    min-width: inherit;
    min-height: inherit;
    max-height: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 1.4px;
}

body * {
    box-sizing: border-box;
}


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

.pc {
    display: none !important;
}

.sp {
    display: block;
}

.box-parallax {
    position: relative;
}

.img-parallax {
    clip: rect(0, auto, auto, 0);
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10;
}

.img-parallax img {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0) !important;
}

.wp-block-spacer {
	height: 0 !important;
}

/*=============================================
 * PC
 *=============================================*/
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
        letter-spacing: 1.6px;
    }

    .sp {
        display: none !important;
    }

    .pc {
        display: block !important;
    }

    .object-fit-cover {
        position: absolute !important;
    }

    .object-fit-cover img {
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }

    .img-full {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img-auto {
        width: 100%;
    }

    img {
        max-width: 100%;
        width: auto;
    }
}


/*=============================================
 * FCV - CUSTOMS
 *=============================================*/
li {
    list-style: none;
}

#feed a:hover {
    text-decoration: underline;
}

i {
    letter-spacing: inherit;
    font-weight: inherit;
}

.word-br {
    word-break: break-all;
}

.txt-center {
    text-align: center;
}

.break-all {
    word-break: break-all;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {

    .btn-over img,
    .over-img img,
    img.over,
    img:not(.btn):not(.non-over),
    button img,
    .btn {
        opacity: 1;
        transform: none !important;
        -moz-transform: none !important;
        -webkit-transform: none !important;
        transition: opacity .3s ease;
        -moz-transition: opacity .3s ease;
        -webkit-transition: opacity .3s ease;
    }

    .btn {
        transition: none !important;
        -moz-transition: none !important;
        -webkit-transition: none !important;
    }

    .over-img img:hover,
    img.over:hover,
    a:hover img:not(.btn):not(.non-over),
    button:hover img {
        cursor: pointer;
        opacity: .8;
        transform: none !important;
        -moz-transform: none !important;
        -webkit-transform: none !important;
    }

    .img-parallax img {
        height: auto !important;
    }
}

body.navOpen {
    touch-action: none !important;
    pointer-events: none !important;
}

body.navOpen .hamburger,
body.navOpen #ft-bnr-fixed,
body.navOpen #navigation,
body.navOpen #navigation,
body.navOpen #brandlist_menu {
    touch-action: auto !important;
    pointer-events: visible !important;
}

body.navOpen #navigation {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.navOpen {
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: none !important;
    pointer-events: none !important;
}

.navOpen #header .lead .logo img.off {
    opacity: 0
}

.navOpen #header .lead .logo img.on {
    opacity: 1
}

.navOpen #header.has-bg .lead {
    background: #fff;
}

a {
    text-decoration: none;
    transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease;
}

a:hover {
    text-decoration: none;
}

/*=============================================
 * <main>
 *=============================================*/
main {
    clear: both;
    width: 100%;
    position: relative;
}

.ovh {
    overflow: hidden;
}


/*=============================================
 * button
 *=============================================*/
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.animated {
    animation-duration: 2s;
    animation-delay: 0.3s;
    animation-fill-mode: both
}

@media (prefers-reduced-motion) {
    .animated {
        -webkit-animation: unset !important;
        -webkit-transition: none !important;
        animation: unset !important;
        transition: none !important
    }
}


/*=============================================
 * Header
 *=============================================*/
#header .lead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}

#header .lead .logo {
    position: relative;
    max-width: 254px
}

#header .lead .logo a {
    display: block
}

#header .lead .logo img {
    display: block
}

#header .lead .logo img.on {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: .3s linear
}

#header .lead .hamburger {
    position: relative;
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px
}

#header .lead .hamburger span {
    transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition-property: translate, rotate;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 1px;
    background: #292929;
    transform-origin: left
}

#header .lead .hamburger span:nth-child(1) {
    translate: 0 -2.5px
}

#header .lead .hamburger span:nth-child(2) {
    translate: 0 2.5px
}

#header .lead .hamburger.is-active span {
    width: 32px
}

#header .lead .hamburger.is-active span:nth-child(1) {
    translate: 0;
    rotate: 30deg
}

#header .lead .hamburger.is-active span:nth-child(2) {
    translate: 0;
    rotate: -30deg
}

#header #navigation .group {
    max-width: 67%;
    margin: 0 auto;
    padding-top: 70px
}

#header #navigation .nav-list li a {
    display: block;
    width: -moz-fit-content;
    width: fit-content
}

#header #navigation .nav-list li a span {
    display: block;
    line-height: 1
}

#header #navigation .nav-list li a span.jp {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0
}

#header #navigation .nav-list li a span.en {
    color: #d1c5b6;
    margin: 5px 0 0 4px;
    font-size: 10px;
    letter-spacing: 0
}

#header #navigation .nav-list li+li {
    margin-top: 25px
}

#header #navigation .photo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

@media screen and (max-width: 999px) {
    #header.has-bg .lead {
        background: #ebe8e4
    }

    #header .hamburger {
        display: block !important;
    }

    #header.has-bg .lead .logo img.off {
        opacity: 0
    }

    #header.has-bg .lead .logo img.on {
        opacity: 1
    }

    #header #navigation {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 998;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .3s linear
    }
}

@media screen and (min-width: 1000px) {
    #header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        -moz-column-gap: 20px;
        column-gap: 20px;
        top: 0;
        left: 0;
        right: 0;
        padding: 33px 25px;
        z-index: 999999;
        transition: .3s linear
    }

    #header.has-bg {
        background: #ebe8e4
    }

    #header.has-bg .lead .logo img.off {
        opacity: 0
    }

    #header.has-bg .lead .logo img.on {
        opacity: 1
    }

    #header.has-bg #navigation .nav-list li a span.en {
        color: #242424
    }

    #header.has-bg #navigation .nav-list li a::before {
        background: #242424
    }

    #header .lead {
        display: block;
        position: unset;
        background: none !important;
        padding: 0;
        width: 336px
    }

    #header .lead .logo {
        max-width: 100%
    }

    #header .lead .logo a {
        display: block
    }

    #header #navigation {
        flex: 1
    }

    #header #navigation .group {
        max-width: 100%;
        margin: 0;
        padding: 0
    }

    #header #navigation .nav-list {
        display: flex;
        justify-content: space-between;
        max-width: 737px;
        margin-left: auto
    }

    #header #navigation .nav-list li a {
        position: relative
    }

    #header #navigation .nav-list li a span.jp {
        display: none
    }

    #header #navigation .nav-list li a span.en {
        color: #fff;
        margin: 0;
        font-size: 14px
    }

    #header #navigation .nav-list li a::before {
        content: "";
        position: absolute;
        background: #fff;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 1px;
        opacity: 0
    }

    #header #navigation .nav-list li a:hover::before,
    #header #navigation .nav-list li a.active::before {
        opacity: 1
    }

    #header #navigation .nav-list li+li {
        margin: 0
    }
}


/*=============================================
 * Footer
 *=============================================*/
#footer {
    background: #242424;
    color: #fff
}

#footer .col-l {
    padding-top: 51px
}

#footer .col-l .socials {
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 18px;
    column-gap: 18px
}

#footer .col-l .socials li a {
    display: block
}

#footer .col-l .socials li:nth-child(1) {
    width: 26px
}

#footer .col-l .socials li:nth-child(2) {
    width: 28px
}

#footer .col-l address {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0
}

#footer .logo {
    margin-top: 29px
}

@media screen and (min-width: 768px) {
    #footer .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1240px;
        padding: 0 20px
    }

    #footer .col-l {
        padding-top: 125px
    }

    #footer .col-l .socials {
        justify-content: flex-start;
        -moz-column-gap: 18px;
        column-gap: 18px
    }

    #footer .col-l .socials li a {
        display: block
    }

    #footer .col-l .socials li:nth-child(1) {
        width: 26px
    }

    #footer .col-l .socials li:nth-child(2) {
        width: 28px
    }

    #footer .col-l address {
        text-align: left;
        margin-top: 19px
    }

    #footer .col-r {
        display: flex !important;
        justify-content: space-between;
        border-top: 1px solid #fff;
        flex: 1;
        max-width: 611px;
        width: 100%;
        margin-top: 88px;
        padding-top: 25px
    }

    #footer .col-r ul li a {
        display: block;
        font-size: 12px;
        line-height: 2;
        letter-spacing: 1.2px;
        text-underline-offset: 3px;
    }

    #footer .col-r ul li a:hover {
        text-decoration: underline;
    }

    #footer .col-r ul li+li {
        margin-top: 16px
    }

    #footer .logo {
        margin-top: 98px
    }

    #footer .logo img {
        width: 100%
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #footer .wrap {
        flex-direction: column;
    }
}

/*=============================================
 * Keyvisual
 *=============================================*/
#keyvisual {
    position: relative
}

#keyvisual h1 {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 1
}

#keyvisual h1 span {
    display: block;
    line-height: 1
}

#keyvisual h1 span.en {
    color: #ccbba1;
    font-size: 40px;
    letter-spacing: 0
}

#keyvisual h1 span.jp {
    margin-top: -9px;
    color: #fff;
    font-size: 24px;
    letter-spacing: 2.4px
}

#keyvisual .box-parallax {
    height: 560px;
}

@media screen and (min-width: 768px) {
    #keyvisual h1 {
        top: 210px;
        left: 110px;
        transform: none
    }

    #keyvisual h1 span.en {
        font-size: 100px
    }

    #keyvisual h1 span.jp {
        margin: -35px 0 0 6px;
        font-size: 32px;
        letter-spacing: 3.2px
    }

    #keyvisual .box-parallax {
        height: 660px;
    }
}


#keyvisual-noimage #keyvisual {
    height: 246px;
    border-bottom: 1px solid #c7beb2
}

#keyvisual-noimage #keyvisual h1 span.jp {
    color: #242424
}

#keyvisual-noimage #bread-area {
    bottom: 35px
}

#keyvisual-noimage #bread-area ul li {
    color: #242424
}

#keyvisual-noimage #bread-area ul li a {
    border-color: #242424
}

#keyvisual-noimage #bread-area ul li a::before {
    background: #242424
}

@media screen and (min-width: 768px) {
    #keyvisual-noimage #keyvisual {
        height: 390px
    }

    #keyvisual-noimage #keyvisual h1 {
        top: calc(50% + 20px);
        transform: translateY(-50%)
    }

    #keyvisual-noimage #bread-area {
        bottom: 46px
    }
}


/*=============================================
 * Breadarea
 *=============================================*/
#bread-area {
    position: absolute;
    bottom: 25px;
    right: 20px;
    z-index: 1
}

#bread-area ul {
    display: flex
}

#bread-area ul li {
    color: #fff;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 1px
}

#bread-area ul li * {
    letter-spacing: 1px
}

#bread-area ul li a {
    position: relative;
    display: block;
    margin-right: 19px;
    border-bottom: 1px solid #fff
}

#bread-area ul li a::before {
    content: "";
    position: absolute;
    background: #fff;
    width: 1px;
    height: 10px;
    top: 0;
    right: -9px;
    transform: rotate(20deg)
}

#bread-area ul li a:hover {
    border-color: rgba(0, 0, 0, 0)
}

@media screen and (min-width: 768px) {
    #bread-area {
        bottom: 30px;
        right: 119px
    }

    #bread-area ul {
        display: flex
    }

    #bread-area ul li {
        font-size: 12px;
        letter-spacing: 1.2px
    }

    #bread-area ul li * {
        letter-spacing: 1.2px
    }

    #bread-area ul li a {
        margin-right: 21px
    }

    #bread-area ul li a::before {
        height: 15px;
        top: -3px;
        right: -11px
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #bread-area {
        right: 30px !important;
    }
}


/*=============================================
 * Button shared
 *=============================================*/
.btn-shared a {
    font-family: "Rosarivo", cursive;
    position: relative;
    z-index: 1;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    color: #242424;
    padding: 0 34px 0 24px;
    font-size: 16px;
    line-height: 48px;
    letter-spacing: 0;
    transition: 0.3s linear;
}

.btn-shared a::before {
    content: "";
    position: absolute;
    background: #d4b38f;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.3s linear;
}

.btn-shared a:after {
    content: "";
    position: absolute;
    background: url("../img/shared/icon_arrow1.svg") no-repeat;
    background-size: 100%;
    width: 27px;
    height: 5px;
    top: calc(50% - 3px);
    right: 0;
    transform: translateY(-50%);
    transition: 0.3s linear;
}

.btn-shared a:hover::before {
    background: #865d3f;
}

.btn-shared.type2 a {
    color: #fff
}

.btn-shared.type2 a::before {
    background: #865d3f
}

.btn-shared.type2 a:after {
    background-image: url("../img/shared/icon_arrow2.svg")
}

.btn-shared.type2 a:hover::before {
    background: #D4B38F
}

@media screen and (min-width: 768px) {
    .btn-shared a {
        padding: 0 38px 0 31px;
        font-size: 20px;
        line-height: 56px
    }

    .btn-shared a::before {
        width: 56px;
        height: 56px
    }
}


/*=============================================
 * Title shared
 *=============================================*/
.ttl-shared span {
    text-align: center;
    display: block;
    line-height: 1
}

.ttl-shared span.en {
    color: #d1c5b6;
    font-size: 56px;
    letter-spacing: 0
}

.ttl-shared span.jp {
    color: #000;
    margin-top: -8px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2.4px
}

@media screen and (min-width: 768px) {
    .ttl-shared span.en {
        font-size: 100px
    }

    .ttl-shared span.jp {
        margin-top: 6px;
        font-size: 32px;
        letter-spacing: 3.2px
    }
}


/*=============================================
 * Section outline store
 *=============================================*/
#onlinestore a {
    display: block;
    padding: 88px 0
}

#onlinestore a h2 {
    position: relative;
    border-top: 3px solid #d9d9d9;
    border-bottom: 3px solid #d9d9d9;
    max-width: 245px;
    margin: 0 auto;
    padding: 37px 0 41px
}

#onlinestore a h2::before,
#onlinestore a h2:after {
    content: "";
    position: absolute;
    background: #d9d9d9;
    left: 0;
    right: 0;
    height: 1px
}

#onlinestore a h2::before {
    top: 3px
}

#onlinestore a h2:after {
    bottom: 3px
}

#onlinestore a h2 span {
    display: block;
    text-align: center
}

#onlinestore a h2 span.jp {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 2.4px
}

#onlinestore a h2 span.en {
    margin-top: 5px;
    color: #e2b696;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0
}

@media screen and (min-width: 768px) {
    #onlinestore a {
        padding: 179px 0
    }

    #onlinestore a:hover {
        opacity: 0.9;
    }

    #onlinestore a h2 {
        max-width: 378px;
        padding: 23px 0 37px
    }

    #onlinestore a h2 span.jp {
        font-size: 32px;
        letter-spacing: 3.2px
    }

    #onlinestore a h2 span.en {
        margin-top: 0;
        font-size: 16px
    }
}


/*=============================================
 * Section shop
 *=============================================*/
#shop {
    position: relative;
    background: url("../img/shared/bg1.jpg") repeat center top/100%;
    padding-bottom: 67px
}

#shop .photo {
    position: absolute;
    top: -13.6vw;
    left: 13.87%;
    z-index: 1;
}

#shop .group-txt {
    position: relative;
    z-index: 1;
    padding-top: 69.6vw
}

#shop .group-txt h2 span {
    display: block;
    line-height: 1
}

#shop .group-txt h2 span.en {
    color: #d8c4ab;
    font-size: 64px;
    letter-spacing: 0
}

#shop .group-txt h2 span.jp {
    margin-top: 9px;
    color: #000;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 5px
}

#shop .group-txt .info {
    color: #000;
    margin-top: 13px
}

#shop .group-txt .info .btn-mail {
    color: #a37134;
    text-underline-offset: 3px;
}

#shop .group-txt .info .btn-mail:hover {
    text-decoration: underline;
}

#shop .group-txt .info .btn-map {
    margin-top: 15px;
}

#shop .group-txt .info .btn-map a {
    position: relative;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    padding-right: 19px;
    color: #A0683F;
}

#shop .group-txt .info .btn-map a::before {
    content: "";
    position: absolute;
    background: url("../img/shared/icon_link.svg") no-repeat;
    width: 16px;
    height: 16px;
    background-size: 100%;
    top: 7px;
    right: 0
}

#shop .group-txt .info .btn-map a:after {
    content: "";
    position: absolute;
    background: #a37134;
    height: 1px;
    bottom: 2px;
    left: 0;
    right: 23px;
    opacity: 0;
}

#shop .group-txt .info .btn-map a:hover:after {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    #shop {
        padding-bottom: 105px
    }

    #shop .photo {
        top: -100px;
        bottom: 0;
        left: 0;
        right: calc(50% - 13px)
    }

    #shop .wrap {
        max-width: 1067px;
        padding: 0 30px;
    }

    #shop .group-txt {
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        padding-top: 114px
    }

    #shop .group-txt h2 span.en {
        font-size: 100px
    }

    #shop .group-txt h2 span.jp {
        margin-top: 17px;
        font-size: 32px;
        letter-spacing: 3.2px;
    }

    #shop .group-txt .info {
        margin-top: 31px;
    }

    #shop .group-txt .info .btn-map {
        margin-top: 1px
    }

    #shop .group-txt .info .btn-map a {
        padding-right: 22px
    }

    #shop .group-txt .info .btn-map a::before {
        width: 21px;
        height: 21px;
        top: 6px
    }

    #shop .group-txt .info .btn-map a:after {
        bottom: 4px
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #shop .group-txt {
        margin: 0 auto;
    }

    #shop .photo {
        top: -75px;
        height: 500px;
    }

    #shop .group-txt {
        padding-top: 385px;
    }
}

/*=============================================
 * Section tanners
 *=============================================*/
#tanners {
    position: relative;
    margin-top: -27px;
    padding-bottom: 64px
}

#tanners::before {
    content: "";
    position: absolute;
    background: #e9e1d8;
    top: 27px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

#tanners .txt {
    margin-top: 29px
}

#tanners .list-banner {
    margin-top: 23px
}

#tanners .list-banner .item {
    background: #fff;
    padding-bottom: 30px
}

#tanners .list-banner .item .logo {
    box-shadow: 8px 8px 4px rgba(0, 0, 0, .05);
    max-width: 100px;
    margin: -20px auto 0
}

#tanners .list-banner .item h3 {
    margin-top: 26px
}

#tanners .list-banner .item h3 span {
    text-align: center;
    display: block;
    line-height: 1
}

#tanners .list-banner .item h3 span.en {
    font-size: 24px;
    letter-spacing: 0
}

#tanners .list-banner .item h3 span.jp {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 1.2px
}

#tanners .list-banner .item+.item {
    margin-top: 16px
}

@media screen and (min-width: 768px) {
    #tanners {
        margin-top: -52px;
        padding-bottom: 230px
    }

    #tanners::before {
        top: 27px
    }

    #tanners .wrap {
        max-width: 1240px;
        padding: 0 20px
    }

    #tanners .txt {
        text-align: center;
        margin-top: 42px
    }

    #tanners .list-banner {
        display: flex;
        flex-wrap: wrap;
        gap: 32px 2.5833333333%;
        margin-top: 39px
    }

    #tanners .list-banner .item {
        width: 31.5833333333%;
        padding-bottom: 46px
    }

    #tanners .list-banner .item .logo {
        margin-top: -30px;
        max-width: 120px
    }

    #tanners .list-banner .item h3 {
        margin-top: 25px
    }

    #tanners .list-banner .item h3 span.en {
        font-size: 28px
    }

    #tanners .list-banner .item h3 span.jp {
        margin-top: 12px;
        font-size: 14px;
        letter-spacing: 1.4px
    }

    #tanners .list-banner .item+.item {
        margin: 0 0 0 0
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #tanners .list-banner .item h3 span.en {
        font-size: 25px;
    }
}


/*=============================================
 * Remodal
 *=============================================*/
.remodal {
    text-align: left;
    padding: 50px 20px
}

.remodal .inner {
    background: #fff
}

.remodal .group-txt {
    padding: 16px 20px 24px
}

.remodal .group-txt dl dt {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 2px
}

.remodal .group-txt dl dd {
    margin-top: 9px;
    color: #242424
}

@media screen and (min-width: 768px) {
    .remodal {
        position: relative;
        max-width: 994px;
        margin: 0 auto;
        padding: 0;
    }

    .remodal .inner {
        display: flex;
        align-items: center
    }

    .remodal .photo {
        width: 400px
    }

    .remodal .group-txt {
        flex: 1;
        padding: 40px
    }

    .remodal .group-txt dl dt {
        color: #242424;
        font-size: 24px;
        letter-spacing: 2.4px
    }

    .remodal .group-txt dl dd {
        max-width: 493px;
        margin-top: 24px
    }
}


/*=============================================
 * Hover img
 *=============================================*/
.hover-img,
.hover-img a {
    overflow: hidden;
}

.hover-img img,
.hover-img a img {
    transition: transform 0.3s !important;
}

.hover-img img:hover,
.hover-img a:hover img {
    transform: scale(1.05) !important;
}

/*=============================================
 * Scroll text
 *=============================================*/
.scroll-text {
    overflow: hidden;
    position: relative;
}

.scroll-text-inner {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1) 0.3s, opacity 0.8s ease 0.3s;
}

.is-loaded .scroll-text-inner {
    opacity: 1;
    transform: translateY(0);
}