@charset "utf-8";

body {
    padding-top: 58px;
}

#sp-fixed {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
#sp-fixed-contents {
    background-color: #fff;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#siteid {
    display: flex;
    align-items: center;
}
#siteid a {
    display: block;
    transition: opacity .2s;
}
#siteid a img {
    height: 30px;
    width: auto;
}
#siteid a:hover {
    opacity: 0.7;
}
#siteid a.siteid-name {
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
    font-size: 16px;
    line-height: 24px;
    margin: 0 10px;
/*    color: #0071ce;*/
}

#sp-nav-toggle {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
}
#sp-nav-toggle span,
#sp-nav-toggle::before,
#sp-nav-toggle::after {
    display: block;
    width: 80%;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#sp-nav-toggle span {
    overflow: hidden;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}
#sp-nav-toggle::before,
#sp-nav-toggle::after {
    content: "";
    -webkit-transition: transform .2s;
    transition: transform .2s;
}
#sp-nav-toggle::before {
    top: -14px;
}
#sp-nav-toggle::after {
    bottom: -14px;
}
.nav-open #sp-nav-toggle span {
    opacity: 0;
}
.nav-open #sp-nav-toggle::before {
    top: 0;
    transform: rotate(45deg);
}
.nav-open #sp-nav-toggle::after {
    bottom: 0;
    transform: rotate(-45deg);
}

#sp-fixed-navigation {
    position: fixed;
    width: 100%;
    top: 58px;

    height: 0;
    overflow: hidden;
    -webkit-transition: height 0s;
    transition: height 0s;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
.nav-open #sp-fixed-navigation {
    height: 271px;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
#sp-fixed-navigation-list {
    position: relative;
    width: 100%;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
    opacity: 0;
    -webkit-transform: translate(0, -80%);
    transform: translate(0, -80%);
    -webkit-transition: transform .2s, opacity .2s;
    transition: transform .2s, opacity .2s;
}
.nav-open #sp-fixed-navigation-list {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
#sp-fixed-navigation-list li {
    border-top: solid 1px rgba(0,0,0,0.1);
}
#sp-fixed-navigation-list li a {
    font-family: 'SwistblnkMonthoers', sans-serif;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
    font-size: 28px;
    line-height: 36px;
    display: block;
    padding: 16px 8px;
    text-align: center;
}
/* Safari */
#sp-fixed-navigation-list li a {
    padding: 19px 8px 13px 8px;
}

@media (min-width: 768px)
{
    body {
        padding-top: 0;
    }
    #sp-fixed {
        position: relative;
    }
    #sp-fixed-contents {
        padding: 22px;
    }
    #siteid a img {
        height: 36px;
    }
    #siteid a.siteid-name {
        font-size: 20px;
        line-height: 24px;
        margin: 0 0 0 16px;
    }
    #sp-nav-toggle,
    #sp-fixed-navigation {
        display: none;
    }
}





#mv-container {
    max-width: 100%;
    overflow: hidden;
}
#mv {
    display: flex;
    flex-direction: column-reverse;
    background-color: #ccc198;
}
.mv-col {
    position: relative;
}
#mv-col-01 {
    background: url(../img/home/mv-col-01-bg-04-50pct.png) top right no-repeat;
    background-size: cover;
}
#mv-col-02 {
    position: relative;
    background: #fff;
    background-size: cover;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 100%;
    /*
    height: 310px; height: 82.666vw;
    height: 80vw;
    */
    height: 242px; height: 64.533vw;
    /*height: 232px; height: 62vw;*/
    flex-grow: 0;
    flex-shrink: 0;
}
#mv-col-03 {
    background: url(../img/home/mv-col-03-bg-04-50pct.png) top left no-repeat;
    background-size: cover;
}

#mv-element-01-sp,
#mv-element-03-sp {
    display: block;
    text-align: center;
    color: #fff;
    font-family: 'SwistblnkMonthoers', fot-tsukubrdgothic-std, sans-serif;
    font-weight: 400;
    font-size: 20px; font-size: 5.333vw;
    line-height: 1.25;
    padding: 6px;
}
/* Safari */
#mv-element-01-sp,
#mv-element-03-sp {
    padding: 8px 6px 4px 6px;
}
.mv-element-txt-ja {
    display: inline-block;
    font-family: fot-tsukubrdgothic-std, sans-serif;
    font-size: 0.95em;
    font-weight: 700;
    margin-left: 4px; margin-left: 1.066vw;
}
#mv-element-01-pc,
#mv-element-03-pc {
    display: none;
}

#mv-element-02-01,
#mv-element-02-02 {
    width: 100%;
    position: absolute;
    pointer-events: none;
    z-index: 5;
}
/*
    #mv-element-02-01 {
        bottom: 370px;
    }
    #mv-element-02-02 {
        font-size: 34px;
        line-height: 42px;
        bottom: 240px;
    }
*/
#mv-element-02-01 {
    width: 156px; width: 41.666vw;
    width: 200px; width: 53.333vw;
    max-width: 500px;
    right: 0;
    left: 0;
    bottom: 115px; bottom: 30.833vw;
    margin: 0 auto;
}
#mv-element-02-02 {
    font-size: 13px; font-size: 3.466vw;
    line-height: 1.4;
    font-weight: 700;

    display: flex;
    justify-content: center;
    right: 0;
    left: 0;
    bottom: 72px; bottom: 19.2vw;
    margin: 0 auto;
    text-shadow:
        -1px -1px 0 #fff, 0px -1px 0 #fff, 1px -1px 0 #fff,
        -1px 0px 0 #fff, 0px 0px 0 #fff, 1px 0px 0 #fff,
        -1px 1px 0 #fff, 0px 1px 0 #fff, 1px 1px 0 #fff;
}
#mv-element-02-02 .small {
    font-size: 0.65625em;
}

#mv-slider {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #fff;
}
#mv-slider .slick-list,
#mv-slider .slick-track {
    height: 100%;
}
.mv-slide {
    max-width: 1200px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.mv-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-slide .mv-slide-part {
    display: block;
    width: 60.666%;
    max-width: 728px;
    position: absolute;
    top: 0;
    mask-repeat: no-repeat;
    mask-position: 0 0;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 100%;
}
.mv-slide .mv-slide-part-01 {
    background-color: #eee;
    left: 0;
    mask-image: url("../img/home/mv-mask-01.svg");
    -webkit-mask-image: url("../img/home/mv-mask-01.svg");
}
.mv-slide .mv-slide-part-02 {
    right: 0;
    mask-image: url("../img/home/mv-mask-02.svg");
    -webkit-mask-image: url("../img/home/mv-mask-02.svg");
}

.mv-slide .mv-slide-part img {
    position: relative;
    opacity: 0;
    transition: 1.8s;
}
.mv-slide .mv-slide-part-01 img {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
}
.mv-slide.slick-active .mv-slide-part-01 img {
    -webkit-transform: translate(0, -62px);
    transform: translate(0, -62px);
    opacity: 1;
}
.mv-slide .mv-slide-part-02 img {
    -webkit-transform: translate(0, -62px);
    transform: translate(0, -62px);
}
.mv-slide.slick-active .mv-slide-part-02 img {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
}

@media (min-width: 768px)
{
    #mv-element-01-sp,
    #mv-element-03-sp {
        font-size: 40px;
        padding: 6px;
    }

    #mv-element-02-02 {
        text-shadow:
            -2px -2px 0 #fff, -1px -2px 0 #fff, 0px -2px 0 #fff, 1px -2px 0 #fff, 2px -2px 0 #fff,
            -2px -1px 0 #fff, -1px -1px 0 #fff, 0px -1px 0 #fff, 1px -1px 0 #fff, 2px -1px 0 #fff,
            -2px 0px 0 #fff, -1px 0px 0 #fff, 0px 0px 0 #fff, 1px 0px 0 #fff, 2px 0px 0 #fff,
            -2px 1px 0 #fff, -1px 1px 0 #fff, 0px 1px 0 #fff, 1px 1px 0 #fff, 2px 1px 0 #fff,
            -2px 2px 0 #fff, -1px 2px 0 #fff, 0px 2px 0 #fff, 1px 2px 0 #fff, 2px 2px 0;
    }
}

@media (min-width: 980px)
{
    #mv-element-02-02 {
        font-size: 34px;
        line-height: 42px;
    }
}

@media (min-width: 1200px)
{
    #mv-container {
        max-width: 100%;
        overflow: hidden;
    }
    #mv {
        display: flex;
        flex-direction: row;
        justify-content: center;
        /*height: 996px;*/
        height: 774px;
    }

    #mv-col-01 {
        flex-grow: 2;
        background-size: cover;
        min-width: 360px;
    }
    #mv-col-02 {
        width: 1200px;
        /*height: 996px;*/
        height: 774px;
    }
    #mv-col-03 {
        flex-grow: 2;
        background-size: cover;
        min-width: 360px;
    }

    #mv-element-01-sp,
    #mv-element-03-sp {
        display: none;
    }
    #mv-element-01-pc,
    #mv-element-03-pc {
        display: block;
        width: 100%;
        position: absolute;
        pointer-events: none;
        z-index: 5;
    }
    #mv-element-01-pc {
        max-width: 220px;
        top: 0;
        right: 0;
        z-index: 2;
    }
    #mv-element-03-pc {
        max-width: 300px;
        top: 0;
        left: 0;
        z-index: 2;
    }

    #mv-element-02-01 {
        bottom: 370px;
    }
    #mv-element-02-02 {
        font-size: 34px;
        line-height: 42px;
        bottom: 240px;
        text-shadow:
            -3px -3px 0 #fff, -2px -3px 0 #fff, -1px -3px 0 #fff, 0px -3px 0 #fff, 1px -3px 0 #fff, 2px -3px 0 #fff, 3px -3px 0 #fff,
            -3px -2px 0 #fff, -2px -2px 0 #fff, -1px -2px 0 #fff, 0px -2px 0 #fff, 1px -2px 0 #fff, 2px -2px 0 #fff, 3px -2px 0 #fff,
            -3px -1px 0 #fff, -2px -1px 0 #fff, -1px -1px 0 #fff, 0px -1px 0 #fff, 1px -1px 0 #fff, 2px -1px 0 #fff, 3px -1px 0 #fff,
            -3px 0px 0 #fff, -2px 0px 0 #fff, -1px 0px 0 #fff, 0px 0px 0 #fff, 1px 0px 0 #fff, 2px 0px 0 #fff, 3px 0px 0 #fff,
            -3px 1px 0 #fff, -2px 1px 0 #fff, -1px 1px 0 #fff, 0px 1px 0 #fff, 1px 1px 0 #fff, 2px 1px 0 #fff, 3px 1px 0 #fff,
            -3px 2px 0 #fff, -2px 2px 0 #fff, -1px 2px 0 #fff, 0px 2px 0 #fff, 1px 2px 0 #fff, 2px 2px 0 #fff, 3px 2px 0 #fff,
            -3px 3px 0 #fff, -2px 3px 0 #fff, -1px 3px 0 #fff, 0px 3px 0 #fff, 1px 3px 0 #fff, 2px 3px 0 #fff, 3px 3px 0 #fff;
    }

    .mv-slide .mv-slide-part {
        width: 728px;
    }
    .mv-slide.slick-active .mv-slide-part-01 img {
        -webkit-transform: translate(0, -200px);
        transform: translate(0, -200px);
    }
    .mv-slide .mv-slide-part-02 img {
        -webkit-transform: translate(0, -200px);
        transform: translate(0, -200px);
    }
    .mv-slide.slick-active .mv-slide-part-02 img {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}





#gnav {
    background-color: #ef93f1;
    color: #fff;
}
#gnav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
#gnav ul li {
    flex-basis: calc(100% / 1);
    position: relative;
}
#gnav ul li::before,
#gnav ul li:last-of-type::after {
    content: "";
    display: block;
    height: calc(100% - 24px);
    width: 1px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.4) 75%);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
#gnav ul li::before {
    left: 0;
}
#gnav ul li:first-of-type::before,
#gnav ul li:last-of-type::after {
    display: none;
}
#gnav ul li a {
    font-family: 'SwistblnkMonthoers', fot-tsukubrdgothic-std, sans-serif;
    font-weight: 400;
    display: block;
    color: inherit;
    text-decoration: none;
    font-size: 13px; font-size: 3.466vw;
    line-height: 1.45;
    padding: 16px 12px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: color .2s;
}
#gnav ul li a::before {
    content: "";
    display: block;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 4px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: -1;
    opacity: 0;
    transition: .2s;

    background: rgb(255,255,255);
    background: linear-gradient(165deg, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.125) 75%);
}
#gnav ul li a span {
    display: block;
}
/*#gnav ul li a:hover {
    color: #fff;
}*/
#gnav ul li a:hover::before {
    opacity: 1;
}

@media (min-width: 768px)
{
    #gnav ul li a {
        font-size: 26px;
        line-height: 36px;
        padding: 16px 12px;
    }
    #gnav ul li a::before {
        content: "";
        display: block;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        border-radius: 4px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: -1;
        opacity: 0;
        transition: .2s;
    
        background: rgb(255,255,255);
        background: linear-gradient(165deg, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.125) 75%);
    }
}

@media (min-width: 1200px)
{
    #gnav ul li::before {
        left: 0;
    }
    #gnav ul li:last-of-type::after {
        right: 0;
    }
    #gnav ul li:first-of-type::before,
    #gnav ul li:last-of-type::after {
        display: block;
    }
}


.trend {
}
.trend-title {
    font-weight: 400;
    white-space: nowrap;
    font-size: 32px; font-size: 7.533vw;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 14px; margin-bottom: 3.733vw;
}
.trend-title > span {
    position: relative;
    z-index: 1;
}
.trend-title span::before {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    bottom: 2px; bottom: 0.533vw;
    left: 0;
    z-index: -1;
}
.trend-caption {
    font-weight: 700;
    font-size: 14px; font-size: 3.733vw;
    line-height: 1.625;
    text-align: center;
}
.trend-title-before-txt {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.75;
    margin: 0 0 8px 0;
    margin-bottom: 2.133vw;
}

.trend-articles {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -10px; margin: 0 -2.666vw;
    padding: 6px 0; padding: 1.6vw 0;
}
.trend-article {
    position: relative;
    flex-basis: 300px; flex-basis: 80vw;
    margin: 20px 10px; margin: 5.333vw 2.666vw;
    max-width: 380px;
    display: flex;
    flex-direction: column;
}
.trend-article-detail {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.trend-article-img {
    margin-bottom: 5px;
    position: relative;
}
.trend-article-img-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    color: inherit;
    text-decoration: none;
}
.trend-article-img-link > img {
    position: relative;
    z-index: 1;
    -webkit-transition: transform .4s;
    transition: transform .4s;
}

.trend-article-slider-img-link {
    position: relative;
    width: 100%;
    display: block;
    padding-bottom: 139.4736%;
    overflow: hidden;
    background-color: #eee;
}
.article-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transition: transform .4s;
    transition: transform .4s;
}
.article-slider .slick-list,
.article-slider .slick-track,
.article-slider .slick-slide {
    height: 100%;
}

.trend-article-style {
    font-size: 16px;
    font-size: 4.266vw;
    line-height: 1.625;
    text-align: center;
    padding: 3px 0; padding: 0.8vw;
    flex-grow: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trend-article-caption {
    font-size: 13px; font-size: 3.466vw;
    line-height: 1.625;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.trend-article-more-btn {
    display: block;
    border: solid 1px #000;
    color: inherit;
    text-decoration: none;
    text-align: center;
    padding: 3px 3px 4px 3px;
    margin-top: 6px; margin-top: 1.6vw;
    transition: background-color .2s, color .2s;
}
.trend-article-more-btn span {
    position: relative;
    display: inline-block;
    padding-left: 14px; padding-left: 3.733vw;
}
.trend-article-more-btn span::before,
.trend-article-more-btn span::after {
    content: "";
    display: block;
    width: 9px; width: 2.4vw;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    transition: background-color .2s;
}
.trend-article-more-btn span::after {
    transform: rotate(90deg);
}
.trend-article-more-btn:hover {
    background-color: #fff;
    color: #000;
}
.trend-article-more-btn:hover span::before,
.trend-article-more-btn:hover span::after {
    background-color: #000;
}

.fav {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 78px; min-width: 86px;
    padding: 4px 8px;
    cursor: pointer;
    transition: transform .1s 0s, z-index 0s .3s;
    z-index: 3;
}
.fav::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: #EA545D;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
    transition: .2s;
}
.fav:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
.fav span {
    display: inline-block;
    position: relative;
    z-index: 2;
}
.fav-icon {
    width: 24px;
    min-width: 24px;
    margin-right: 8px;
}
.fav-icon img {
    /*
    width: 100%;
    height: auto;
    */
    width: 24px;
    height: 20px;
    min-width: 24px;
    min-height: 20px;
}
.fav-count {
    font-family: 'SwistblnkMonthoers', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    padding-right: 2px;
}
/* Safari */
_:lang(x)+_:-webkit-full-screen-document, .fav-count {
    margin-bottom: -5px;
}
/* Android */
.Android .fav-count {
    margin-bottom: -5px;
}
.fav:hover::before {
    background-color: rgba(234,84,93,0.9);
    box-shadow: 0 0 3px 0 rgba(234,84,93,0.8);
}
.trend-article:hover .fav {
    transition: z-index 0s 0s;
    z-index: 2;
}

.ripple {
    content: '';
    background-color: #EA545D;
    border: 1px solid #EA545D;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity:1;
    animation: 0.5s rippleAnimation forwards;
    z-index: 0;
    position: fixed;
    top: 1px;
    left: 1px;
    z-index: 999;
    pointer-events: none;
}

@keyframes rippleAnimation {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}



.fav2,
.fav2-txt,
.trend-article-img-link-icon {
    display: none;
}

@media (any-hover:hover)
{
    .fav2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 64px;
        height: 64px;
        top: 0;
        right: 0;
        bottom: 100px;
        left: 0;
        margin: auto;
        z-index: 4;
        cursor: pointer;
        opacity: 0;
        transition: .2s;
    }
    .trend-article-img:hover .fav2 {
        opacity: 1;
    }
    .fav2-icon {
        display: block;
        width: 48px;
        height: 48px;
        position: relative;
    }
    .fav2-icon::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        background: rgba(234,84,93,1);
        mask: url("../img/home/fav-icon.svg") no-repeat center center / contain;
        -webkit-mask: url("../img/home/fav-icon.svg") no-repeat center center / contain;
        position: absolute;
    }
    .fav2:hover .fav2-icon::before {
        animation: .1s linear 0s infinite alternate fav2HoverAnimation;
    }
    @keyframes fav2HoverAnimation {
        0% { transform: scale(1.0);}
        100% { transform: scale(1.1);}
    }
    
    .fav2-txt {
        display: block;
        text-align: center;
        color: #fff;
        font-size: 16px;
        white-space: nowrap;
        line-height: 1;
        margin: 6px -4px 0 0;
    }

    .trend-article-img:hover .trend-article-img-link > img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    .trend-article-img-link::before {
        background-color: rgba(0,0,0,0.4);
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: 0;
        transition: opacity .4s;
    }
    .trend-article-img:hover .trend-article-img-link::before,
    .trend-article-img:hover .trend-article-img-link-icon {
        opacity: 1;
    }
    .trend-article-img-link-icon,
    .trend-article-img-link::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    .trend-article-img-link-icon {
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        white-space: nowrap;
        width: 120px;
        height: 24px;
        padding:  0 0 0 20px;
        z-index: 3;
        opacity: 0;
        transition: opacity .4s;
    }
    #coat-trend-vol-01 .trend-article-img-link-icon {
        top: 60px;
    }

    .trend-article-img-link-icon::before,
    .trend-article-img-link-icon::after {
        content: "";
        display: block;
        width: 11px;
        height: 1px;
        background-color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
    }
    .trend-article-img-link-icon::after {
        transform: rotate(90deg);
    }

    .trend-article-img:hover .article-slider {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@media (min-width: 428px)
{
    .trend-caption {
        font-size: 16px;
    }
}

@media (min-width: 480px)
{
    .trend-article-style {
        font-size: 21px;
        padding: 6px 0;
    }
    .trend-article-caption {
        font-size: 16px;
    }
    .trend-article-more-btn {
        padding: 2px 3px 4px 3px;
        margin-top: 10px;
    }
    .trend-article-more-btn span {
        padding-left: 20px;
    }
    .trend-article-more-btn span::before,
    .trend-article-more-btn span::after {
        width: 11px;
    }
}

@media (min-width: 562px)
{
    .trend-articles {
        margin: 0 -15px;
        padding: 10px 0;
    }
    .trend-article {
        margin: 30px 15px;
    }
}

@media (min-width: 586px)
{
    .trend-title {
        font-size: 50px;
    }
}

@media (min-width: 768px)
{
    .trend-title {
        font-size: 50px;
        margin-bottom: 28px;
    }
    .trend-title span::before {
        bottom: 4px;
    }
    .trend-title-before-txt {
        font-size: 24px;
        margin-bottom: 18px;
    }
    .trend-article {
        flex-basis: 320px;
        flex-basis: 41.660vw;
    }

    .trend-article-style {
        font-size: 18px; font-size: 2.302vw;
        padding: 5px 0; padding: 0.6578vw;
    }
    .trend-article-caption {
        font-size: 14px; font-size: 1.7543vw;
    }
    .trend-article-more-btn {
        margin-top: 8px; margin-top: 1.09649vw;
    }
    .trend-article-more-btn span {
        padding-left: 17px; padding-left: 2.1929vw;
    }
    .trend-article-more-btn span::before,
    .trend-article-more-btn span::after {
        width: 9px; width: 1.206vw;
    }
}

@media (min-width: 912px) 
{
    .trend-article-style {
        font-size: 21px;
        padding: 6px 0;
    }
    .trend-article-caption {
        font-size: 16px;
    }
    .trend-article-more-btn {
        padding: 2px 3px 4px 3px;
        margin-top: 10px;
    }
    .trend-article-more-btn span {
        padding-left: 20px;
    }
    .trend-article-more-btn span::before,
    .trend-article-more-btn span::after {
        width: 11px;
    }
}

@media (min-width: 1200px)
{
    .trend-article {
        flex-basis: 346px; flex-basis: 28.833vw;
    }

    .trend-article-style {
        font-size: 19px; font-size: 1.593vw;
        padding: 5px 0; padding: 0.455vw 0;
    }
    .trend-article-caption {
        font-size: 15px; font-size: 1.2139vw;
    }
    .trend-article-more-btn {
        margin-top: 9px; margin-top: 0.758vw;
    }
    .trend-article-more-btn span {
        padding-left: 18px; padding-left: 1.5174vw;
    }
    .trend-article-more-btn span::before,
    .trend-article-more-btn span::after {
        width: 10px; width: 0.8345vw;
    }
}

@media (min-width: 1318px) 
{
    .trend-article-style {
        font-size: 21px;
        padding: 6px 0;
    }
    .trend-article-caption {
        font-size: 16px;
    }
    .trend-article-more-btn {
        padding: 2px 3px 4px 3px;
        margin-top: 10px;
    }
    .trend-article-more-btn span {
        padding-left: 20px;
    }
    .trend-article-more-btn span::before,
    .trend-article-more-btn span::after {
        width: 11px;
    }
}





#event-site {
}
.event-site-title {
    font-size: 24px; font-size: 6.4vw;
    line-height: 1.65;
    font-weight: 700;
    text-align: center;
    margin-bottom: 28px; margin-bottom: 7.6vw;
}
.event-site-title span {
    display: inline-block;
    position: relative;
}
.event-site-title span::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px; bottom: 1.066vw;
    margin: 0 auto;
}
.event-site-caption {
    font-size: 14px; font-size: 3.733vw;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 8px; margin-bottom: 2.133vw;
}
#event-site-outline-img {
    margin: 28px auto 12px auto; margin-top: 7.466vw; margin-bottom: 3.2vw;
    width: 100%;
    max-width: 960px;
}

@media (min-width: 500px)
{
    .event-site-title {
        font-size: 32px;
        margin-bottom: 38px;
    }
    .event-site-title span::after {
        bottom: 5px;
    }
}

@media (min-width: 588px)
{
    .event-site-caption {
        font-size: 22px;
        margin-bottom: 12px;
    }
}

@media (min-width: 960px)
{
    #event-site-outline-img {
        margin-top: 72px;
        margin-bottom: 30px;
    }
}





.collaboration-lead {
    font-size: 17px; font-size: 4.533vw;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 14px; margin-bottom: 3.733vw;
}
.collaboration-caption {
    font-size: 12px; font-size: 3.2vw;
    line-height: 1.65;
    text-align: center;
}

#collaboration-flow {
    padding: 20px 0; padding: 5.333vw 0;
    margin: 0 -12px; margin: 0 -3.2vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.collaboration-flow-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px 12px; margin: 5.333vw 3.2vw;
    width: 284px;
}
#collaboration-flow-col-01 {
    width: 396px;
}
.collaboration-flow-col-step {
    width: 100%;
    font-family: 'SwistblnkMonthoers', sans-serif;
    font-size: 22px; font-size: 5.806vw; font-size: 7.2vw;
    padding: 4px 0; padding: 1vw 0;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    position: relative;
    z-index: 1;
}
/* Safari */
_:lang(x)+_:-webkit-full-screen-document, .collaboration-flow-col-step {
    padding: 8px 0 2px 0;
}
.collaboration-flow-col-step::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #644500;
    opacity: 0.35;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: -1;
}
.collaboration-flow-col-img {
    padding: 10px 0; padding: 2.666vw 0;
}
.collaboration-flow-col-caption {
    font-feature-settings: "palt";
    font-size: 16px; font-size: 4.266vw;
    line-height: 1.2;
}

@media (min-width: 468px)
{
    .collaboration-flow-col-caption {
        font-size: 20px;
    }
}

@media (min-width: 500px)
{
    .collaboration-caption {
        font-size: 16px;
    }
    .collaboration-flow-col-step {
        font-size: 36px;;
        padding: 5px 0;
    }
    _:lang(x)+_:-webkit-full-screen-document, .collaboration-flow-col-step {
        padding: 8px 0 2px 0;
    }
}

@media (min-width: 620px)
{
    .collaboration-lead {
        font-size: 28px;
        margin-bottom: 24px;
    }
}

@media (min-width: 768px)
{
    .collaboration-lead {
        margin-bottom: 32px;
    }
    #collaboration-flow {
        padding: 40px 0;
        margin: 0 -24px;
    }
    .collaboration-flow-col {
        margin: 40px 24px;
    }
    .collaboration-flow-col-img {
        padding: 20px 0;
    }
}





.present-campaigns {
    padding-top: 12px; padding-top: 3.2vw;
}
.present-campaigns-row {
    margin-bottom: 22px; margin-bottom: 5.866vw;
}
.present-campaigns-lead {
    font-size: 17px; font-size: 4.533vw;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 2px; margin-bottom: 0.533vw;
}
.present-campaigns-caption {
    font-size: 12px; font-size: 3.2vw;
    line-height: 2;
    text-align: center;
}
.present-campaigns-btn {
    padding-top: 8px;
}
.present-campaigns-btn a {
    display: block;
    max-width: 480px;
    background-color: rgba(0,0,0,0.15);
    margin: 0 auto;
    color: inherit;
    text-decoration: none;
    text-align: center;
    font-size: 17px; font-size: 4.533vw;
    line-height: 1.2;
    white-space: nowrap;
    padding: 7px 12px 11px 12px;
    transition: background-color .2s, color .2s;
}
.present-campaigns-btn a:hover {
    background-color: rgba(0,0,0,1);
    color: #fff;
}
.present-campaigns-info {
    text-align: center;
}

@media (min-width: 500px)
{
    .present-campaigns-caption {
        font-size: 16px;
    }
}

@media (min-width: 620px)
{
    .present-campaigns-lead {
        font-size: 28px;
    }
    .present-campaigns-btn a {
        font-size: 27px;
    }
}

@media (min-width: 768px)
{
    .present-campaigns {
        padding-top: 12px;
    }
    .present-campaigns-row {
        margin-bottom: 44px;
    }
    .present-campaigns-lead {
        margin-bottom: 4px;
    }
    .present-campaigns-btn {
        padding-top: 16px;
    }
}





#new-open {
    padding-top: 44px; padding-top: 11.733vw;
}
#banner-list {
    list-style: none;
    padding: 12px 0; padding: 3.2vw 0;
    max-width: 960px;
    margin: 0 auto;
}
.banner-list-item-link:hover {
    opacity: 0.8;
}
/*
.banner-list-item-link {
    display: flex;
    align-items: center;
    background-color: #e5e3e2;
    border: solid 8px #35adaa;
    border-width: 2.133vw;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}
*/





#sns-information {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0 0 0; padding-top: 8.533vw;
}
#sns-information-title {
    font-size: 16px; font-size: 4.266vw;
    margin-bottom: 11px; margin-bottom: 2.857vw;
}
#sns-information-list {
    display: flex;
    align-items: center;
    padding-bottom: 3px; padding-bottom: 0.8vw;
    margin: 0 auto;
}
#sns-information-list li {
    width: 24px; width: 6.4vw;
    max-width: 32px;
}
#sns-information-list li+li {
    margin: 0 0 0 11px; margin-left: 2.857vw;
}
#sns-information-list li a {
    display: block;
    transition: transform .2s;
}
#sns-information-list li a:hover {
    transform: scale(1.1);
}

@media (min-width: 560px)
{
    #sns-information-title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    #sns-information-list li+li {
        margin-left: 16px;
    }
}

@media (min-width: 768px)
{
    #new-open {
        padding-top: 88px;
    }
    #banner-list {
        padding: 24px 0;
    }
    .banner-list-item-link {
        border-width: 15px;
    }

    #sns-information {
        padding-top: 64px;
    }
    #sns-information-list {
        padding-bottom: 6px;
    }
}





#illustrator {
    background-color: #30B7B3;
    color: #ffffff;
    padding: 48px 20px;
}
#illustrator .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#illustrator-img {
    max-width: 188px;
}
#illustrator-detail {
    max-width: 530px;
}
#illustrator-detail-header {
    display: flex;
    align-items: center;
}
#illustrator-name {
    font-size: 24px; font-size: 6.4vw;
    line-height: 1.25;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin: 18px 32px 14px 0; margin: 4.8vw 8.533vw 3.733vw 0;
}
#illustrator-name span+span {
    position: relative;
    padding-left: 16px; padding-left: 3.125vw;
    margin-left: 16px; margin-left: 3.125vw;
}
#illustrator-name span+span::before {
    content: "";
    display: block;
    width: 2px;
    height: 24px; height: 6.4vw;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    margin: auto 0;
}
#illustrator-sns-list {
    display: flex;
    align-items: center;
    padding: 2px 0 0 0; padding-top: 0.641vw;
}
#illustrator-sns-list li {
    width: 26px; width: 6.8376vw;
}
#illustrator-sns-list li+li {
    margin: 0 0 0 13px; margin-left: 3.4188vw;
}
#illustrator-sns-list li a {
    display: block;
    transition: transform .2s;
}
#illustrator-sns-list li a:hover {
    transform: scale(1.1);
}

#illustrator-detail-body {
    font-size: 14px; font-size: 3.733vw;
    line-height: 1.65;
}

@media (min-width: 428px)
{
    #illustrator-detail-body {
        font-size: 16px;
    }
}

@media (min-width: 468px)
{
    #illustrator-name {
        font-size: 30px;
        margin: 22px 40px 17px 0;
    }
    #illustrator-name span+span::before {
        height: 30px;
    }
    #illustrator-sns-list {
        padding-top: 3px;
    }
    #illustrator-sns-list li {
        width: 32px;
    }
    #illustrator-sns-list li+li {
        margin: 0 0 0 16px;
    }
}

@media (min-width: 768px)
{
    #illustrator {
        padding: 48px 40px;
    }
    #illustrator .wrapper {
        flex-direction: row;
        justify-content: center;
    }
    #illustrator-detail {
        max-width: 866px;
        padding-left: 40px;
    }

    #illustrator-name {
        font-size: 30px;
        margin: 0 60px 14px 0;
    }
    #illustrator-name span+span {
        padding-left: 24px;
        margin-left: 24px;
    }
    #illustrator-name span+span::before {
        height: 30px;
    }
    #illustrator-sns-list {
        padding: 0 0 6px 0;
    }
    #illustrator-sns-list li {
        width: 32px;
    }
    #illustrator-sns-list li+li {
        margin: 0 0 0 16px;
    }
    
    #illustrator-detail-body {
        font-size: 16px;
    }
}





#footer {}

#footer-secondary {
    padding: 40px 20px;
    border: solid 1px #ccc;
    border-width: 1px 0;
}
#footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -10px;
}
#footer-nav li {
    margin: 5px 10px;
}
#footer-nav li a {
    font-size: 12px;
    line-height: 1.75;
    text-decoration: none;
    color: inherit;
}
#footer-nav li a:hover {
    text-decoration: underline;
}

#footer-tertiary {
    padding: 48px 20px;
}
#footer-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 40px 0;
}
#footer-logo a {
    display: block;
    margin: 0 5px;
    height: 20px;
    transition: opacity .2s;
}
#footer-logo a:hover {
    opacity: 0.7;
}
#footer-logo a img {
    height: 100%;
    width: auto;
}
#footer-notes {
    padding: 0;
    margin: 0;
}
#footer-notes li {
    font-size: 11px;
    text-align: center;
    padding: 6px;
}

@media (min-width: 768px)
{
    #footer-secondary {
        padding: 42px 40px;
    }

    #footer-tertiary {
        padding: 48px 40px;
    }
}











#modal {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    overflow: hidden;
    /*
    opacity: 0;
    -webkit-transition: opacity 1.0s;
    transition: opacity 1.0s;
    */
    display: none;
}
#modal.active {
    /*
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    opacity: 1;
    */
    display: flex;
}
#modal-inner {
    position: relative;
    background-color: #E6E6E6;
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 840px;
    overflow: auto;
    opacity: 0;
    /*
    -webkit-transform: skew(90deg, 90deg);
    transform: skew(90deg, 90deg);
    -webkit-transition: transform 1.0s, opacity 1.0s;
    transition: transform 1.0s, opacity 1.0s;
    */
}
#modal-inner.active {
    opacity: 1;
    /*
    -webkit-transform: skew(0, 0);
    transform: skew(0, 0);
    */
}

#modal-slider {
    width: 100%;
}

#modal-slider-mainview {
    flex-shrink: 0;
    width: 100%;
    background-color: #000;
    position: relative;
    height: 525px; height: 140vw;
}
.article-modal #modal-slider-mainview {
    height: 100%;
}
#modal-slider-mainview .slick-arrow {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    line-height: 600%;
    overflow: hidden;
    background-color: #000;

    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 2;
    cursor: pointer;
}
#modal-slider-mainview .slick-arrow::before {
    content: "";
    display: block;
    width: 30%;
    height: 30%;
    border: solid 1px #fff;
    border-width: 1px 1px 0 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#modal-slider-mainview .slick-prev {
    left: 16px;
}
#modal-slider-mainview .slick-prev::before {
    transform: rotate(-135deg);
    left: 15%;
}
#modal-slider-mainview .slick-next {
    right: 16px;
}
#modal-slider-mainview .slick-next::before {
    transform: rotate(45deg);
    right: 15%;
}

#modal-slider-mainview .zoom-btn {
    pointer-events: none;
}

#modal-slider-mainview .slick-list,
#modal-slider-mainview .slick-track,
#modal-slider-mainview .slick-slide {
    height: 100%;
}
#modal .modal-clone-img-container {
    display: none;
}

#modal-slider-mainview .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}
.article-modal #modal-slider-mainview .slick-slide > img {
    height: 100%;
}

#modal-slider-navigation {
    width: 100%;
    max-height: 148px;
    overflow: hidden;
}
#modal-slider-navigation .slick-slide {
    width: 92px; width: 24.533vw;
    max-width: 112px;
    height: 122px; height: 32.533vw;
    max-height: 148px;
    margin: 0 1px;
    cursor: pointer;
}
#modal-slider-navigation .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-modal #modal-slider-navigation {
    display: none;
}

#modal-close {
    display: block;
    width: 36px;
    height: 36px;
    background-color: #000;
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    z-index: 5;
}
#modal-close::before,
#modal-close::after {
    content: "";
    display: block;
    width: calc(100% - 2px);
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#modal-close::before {
    transform: rotate(45deg);
}
#modal-close::after {
    transform: rotate(-45deg);
}

#modal-fav-box {
    position: absolute;
    /*bottom: 32px;*/
    top: 468px; top: calc(124.8vw - 16px);
    right: 16px;
    z-index: 5;
}
#modal-fav-box-txt {
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 6px;
}
#modal-fav-box .fav {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0 0 0 auto;
}

#modal-detail {
    padding-bottom: 32px; padding-bottom: 8vw;
    max-width: 618px;
}
#modal-detail-header {
    background-color: #4D4D4D;
    color: #fff;
    padding: 30px 38px; padding: 8vw 10vw;
    margin-bottom: 32px; margin-bottom: 8.4vw;
}
#modal-detail-title {
    font-size: 27px; font-size: 7.2vw;
    line-height: 1.2;
    margin-bottom: 9px; margin-bottom: 2.4vw;
}
#modal-detail-price {
    display: none;
}
#modal-detail-caption {
    font-size: 11px; font-size: 2.933vw;
    line-height: 1.54;
}

#modal-detail-body {
    padding: 0 38px; padding: 0 10vw;
    width: 100%;
}
.modal-detail2-item+.modal-detail2-item {
    margin: 9px 0 0 0; margin-top: 2.4vw;
    padding: 0;
}
.modal-detail2-item-name {
    font-size: 15px; font-size: 4vw;
    line-height: 1.5;
    padding: 0 0 1px 14px; padding: 0 0 0.266vw 3.6vw;
    position: relative;
}
.modal-detail2-item-name::before {
    content: "";
    display: block;
    width: 10px; width: 2.4vw;
    height: 10px; height: 2.4vw;
    background-color: #000;
    transform: rotate(45deg);
    position: absolute;
    left: 0;
    top: 8.5px; top: 2.2vw;
}
.modal-detail2-item-info {
    font-size: 10px; font-size: 2.666vw;
    display: table;
    margin-left: 14px; margin-left: 3.6vw;
}
.modal-detail2-item-info-row {
    display: table-row;
}
.modal-detail2-item-info-label {
    display: table-cell;
    white-space: nowrap;
}
.modal-detail2-item-info-label::after {
    content: "：";
}
.modal-detail2-item-info-caption {
    display: table-cell;
}
#modal-detail-place {
    padding: 12px 0 0 38px; padding: 3.2vw 0 0 10vw;
    font-size: 10px; font-size: 2.666vw;
    line-height: 1.75;
}

@media (min-width: 412px)
{
    .modal-detail2-item-info {
        font-size: 11px;
    }
    #modal-detail-place {
        font-size: 11px;
    }
}

@media (min-width: 443px)
{
    #modal-detail-caption {
        font-size: 13px;
    }
}

@media (min-width: 500px)
{
    #modal-slider-mainview,
    #modal-slider-mainview .slick-slide {
        height: 700px;
    }

    #modal-slider-navigation {
        height: 148px;
    }
    #modal-slider-navigation .slick-slide {
        width: 112px;
        height: 148px;
    }

    #modal-fav-box {
        top: 627px;
    }

    #modal-detail {
        padding-bottom: 40px;
    }
    #modal-detail-header {
        padding: 40px 50px;
        margin-bottom: 42px;
    }
    #modal-detail-title {
        font-size: 36px;
        margin-bottom: 12px;
    }
    #modal-detail-caption {
        font-size: 13px;
    }

    #modal-detail-body {
        padding: 0 50px;
    }

    .modal-detail2-item+.modal-detail2-item {
        margin: 12px 0 0 0;
    }
    .modal-detail2-item-name {
        font-size: 20px;
        padding: 0 0 0 18px;
    }
    .modal-detail2-item-name::before {
        width: 12px;
        height: 12px;
        top: 11px;
    }
    .modal-detail2-item-info {
        margin-left: 20px;
    }
    #modal-detail-place {
        padding: 16px 0 0 50px;
    }
}

@media (max-width: 959px)
{
    #modal-slider-mainview .slick-slide {
        display: flex;
        align-items: center;
    }
    #modal-slider-mainview .slick-slide img.horizontal {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 960px)
{
    #modal-inner {
        width: calc(100% - 80px);
        max-width: 1200px;
        height: auto;
        max-height: calc(100% - 80px);
        display: flex;
    }

    #modal-slider {
        width: 41.666vw;
        max-width: 500px;
    }
    #modal-slider-mainview {
        margin-bottom: 10px; margin-bottom: 1vw;
    }
    #modal-slider-mainview,
    #modal-slider-mainview .slick-slide {
        height: 672px; height: 56vw;
        max-height: 672px;
    }

    #modal-slider-navigation {
        height: 148px; height: 12.333vw;
    }
    #modal-slider-navigation .slick-slide {
        width: 112px; width: 9.333vw;
        height: 148px; height: 12.333vw;
    }

    #modal-slider-mainview .slick-slide .zoom-btn {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        pointer-events: all;
    }
    #modal-slider-mainview .slick-slide .zoom-btn::before {
        content: "";
        display: block;
        width: 32px;
        height: 32px;
        background: url(../img/home/zoom-icon.svg) center no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 18px;
        right: 18px;
        z-index: 1;
    }
    #modal .modal-clone-img-container {
        /*position: absolute;*/
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 5;
        cursor: pointer;
        display: none;
    }
    #modal .modal-clone-img {
        width: 100%;
        height: 100%;
        /*object-fit: cover;*/
        object-fit: contain;
        background-color: #E6E6E6;
    }
    #modal .modal-clone-img-container::after {
        content: "";
        display: block;
        width: 32px;
        height: 32px;
        background: url(../img/home/zoom-icon-02.svg) center no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 18px;
        right: 18px;
        z-index: 1;
    }

    #modal-fav-box {
        top: 240px;
    }
    #modal-fav-box-txt {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 6px;
    }

    #modal-detail {
        display: flex;
        flex-direction: column;
        padding-right: 54px; padding-right: 5.666vw;
        margin-left: 34px; margin-left: 3.5vw;
        /* padding-bottom: 132px; */
        padding-bottom: 19px; padding-bottom: 2vw;
    }
    #modal-detail-header {
        padding: 32px 40px; padding: 3.333vw 4.166vw;
        margin-bottom: 34px; margin-bottom: 3.5vw;
    }
    #modal-detail-title {
        font-size: 29px; font-size: 3vw;
        margin-bottom: 10px; margin-bottom: 1vw;
    }
    #modal-detail-caption {
        font-size: 10px; font-size: 1.083vw;
    }

    #modal-detail-body {
        padding-left: 44px; padding-left: 4.5833vw;
    }
    .modal-detail-item {
        display: flex;
        align-items: flex-start;
    }
    .modal-detail2-item+.modal-detail2-item {
        margin: 10px 0 0 0; margin-top: 1vw;
        padding: 0;
    }
    .modal-detail2-item-name {
        font-size: 16px; font-size: 1.666vw;
        padding: 0 0 0 14px; padding-left: 1.5vw;
    }
    .modal-detail2-item-name::before {
        width: 9px; width: 1vw;
        height: 9px; height: 1vw;
        top: 9px; top: 0.9166vw;
    }
    .modal-detail2-item-info {
        font-size: 10px; font-size: 0.9166vw;
        margin-left: 16px; margin-left: 1.666vw;
    }
    #modal-detail-place {
        /*padding: 19px 0 19px 44px; padding: 2vw 0 2vw 4.5833vw;*/
        padding: 19px 0 0 44px; padding: 2vw 0 0 4.5833vw;
        font-size: 10px; font-size: 1vw;
    }
}


@media (min-width: 1200px)
{
    #modal-slider-mainview {
        margin-bottom: 12px;
    }
    .article-modal #modal-slider-mainview {
        margin-bottom: 0;
    }
    #modal-detail {
        padding-right: 68px;
        padding-bottom: 24px;
        margin-left: 42px;
    }
    #modal-detail-header {
        padding: 40px 50px;
        margin-bottom: 42px;
    }
    #modal-detail-title {
        font-size: 36px;
        margin-bottom: 12px;
    }
    #modal-detail-caption {
        font-size: 13px;
    }
    #modal-detail-body {
        padding-left: 55px;
    }
    .modal-detail2-item+.modal-detail2-item {
        margin-top: 12px;
    }
    .modal-detail2-item-name {
        font-size: 20px;
        padding-left: 18px;
    }
    .modal-detail2-item-name::before {
        width: 12px;
        height: 12px;
        top: 11px;
    }
    .modal-detail2-item-info {
        font-size: 11px;
        margin-left: 20px;
    }
    #modal-detail-place {
        /*padding: 24px 0 24px 55px;*/
        padding: 24px 0 0 55px;
        font-size: 12px;
    }
}





.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 999;
    transition: opacity .4s;
}
.loader.fadeOut {
    opacity: 0;
}

.loader-icon,
.loader-icon:after {
    display: block;
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
.loader-icon {
    font-size: 10px;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}





#top-btn {
    position: fixed;
    bottom: 12px; bottom: 3.2vw;
    right: 12px; right: 3.2vw;
    z-index: 2;
    width: 0;
    height: 0;
    overflow: hidden;
    transition: 0s .2s;
}
#top-btn.active {
    width: 29px; width: 7.733vw;
    height: 29px; height: 7.73vw;
    transition: 0s 0s;
}
#top-btn a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    white-space: nowrap;
    line-height: 200px;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}
#top-btn a::before {
    content: "";
    display: block;
    width: 33%;
    height: 33%;
    border: solid 1px #fff;
    border-width: 1px 0 0 1px;
    position: absolute;
    top: 15%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#top-btn.active a {
    opacity: 1;
}
#top-btn.active a:hover {
    opacity: 0.8;
}

@media (min-width: 750px)
{
    #top-btn {
        bottom: 24px;
        right: 24px;
    }
    #top-btn.active {
        width: 58px;
        height: 58px;
    }
}










#coat-trend-vol-01,
#coat-trend-vol-02,
#present-campaign {
    background-color: #FFF;
    background-image: url(../img/home/splash-03-alpha-10-w-50pct.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

#coat-trend-vol-01::before,
#event-site::before,
#coat-trend-vol-02::before,
#present-campaign::before,
#collaboration::before {
    content: "";
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3;
    z-index: 1;
}

#coat-trend-vol-01::before {
    background-position: top left;
    top: 0;
    left: 0;
    /*width: 964px; width: 482px; */width: 241px; width: 64.266vw;
    /*height: 1560px; height: 780px; */height: 390px; height: 104vw;
    background-size: contain;
}

#event-site::before {

   background-position: top right;
    top: 0;
    right: 0;
    /*width: 854px; width: 427px; */width: 214px; width: 56.933vw;
    /*height: 1886px; height: 943px; */height: 472px; height: 125.733vw;
/*    mix-blend-mode: hard-light;*/
}

#coat-trend-vol-02::before {
    background-image: url(../img/home/coat-trend-vol-02-bg-01-50pct.png);
    background-position: top left;
    top: 0;
    left: 0;
    /*width: 1780px; width: 890px; */width: 445px; width: 118.666vw;
    /*height: 1920px; height: 960px; */height: 480px; height: 128vw;
}

#present-campaign::before {
    background-image: url(../img/home/bag-trend-bg-01-50pct.png);
    background-position: top right;
    top: 0;
    right: 0;
    /*width: 1154px; width: 577px; */width: 289px; width: 76.933vw;
    /*height: 2578px; height: 1289px; */height: 645px; height: 171.866vw;
    /*mix-blend-mode: hard-light;*/
}

#collaboration::before {
    background-image: url(../img/home/collaboration-bg-01-50pct.png);
    background-position: top left;
    top: 0;
    left: 0;
    /*width: 884px; width: 442px; */width: 221px; width: 58.933vw;
    /*height: 1410px; height: 705px; */width: 353px; height: 94vw;
}

@media (min-width: 768px)
{
    #coat-trend-vol-01::before {
        width: 964px;
        height: 1560px;
    }
    #event-site::before {
        width: 854px;
        height: 1886px;
    }
    #coat-trend-vol-02::before {
        width: 1780px;
        height: 1920px;
    }
    #present-campaign::before {
        width: 1154px;
        height: 2578px;
    }
    #collaboration::before {
        width: 884px;
        height: 1410px;
    }
}





/*.trend-title {
    text-shadow:
    -3px -3px 0 #000, -2px -3px 0 #000, -1px -3px 0 #000, 0px -3px 0 #000, 1px -3px 0 #000, 2px -3px 0 #000, 3px -3px 0 #000,
    -3px -2px 0 #000, -2px -2px 0 #000, -1px -2px 0 #000, 0px -2px 0 #000, 1px -2px 0 #000, 2px -2px 0 #000, 3px -2px 0 #000,
    -3px -1px 0 #000, -2px -1px 0 #000, -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, 2px -1px 0 #000, 3px -1px 0 #000,
    -3px 0px 0 #000, -2px 0px 0 #000, -1px 0px 0 #000, 0px 0px 0 #000, 1px 0px 0 #000, 2px 0px 0 #000, 3px 0px 0 #000,
    -3px 1px 0 #000, -2px 1px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000, 2px 1px 0 #000, 3px 1px 0 #000,
    -3px 2px 0 #000, -2px 2px 0 #000, -1px 2px 0 #000, 0px 2px 0 #000, 1px 2px 0 #000, 2px 2px 0 #000, 3px 2px 0 #000,
    -3px 3px 0 #000, -2px 3px 0 #000, -1px 3px 0 #000, 0px 3px 0 #000, 1px 3px 0 #000, 2px 3px 0 #000, 3px 3px 0 #000;
}*/

/*#bag-trend .trend-title,
#event-site .trend-title,
#present-campaign .trend-title {
    text-shadow:
    -3px -3px 0 #fff, -2px -3px 0 #fff, -1px -3px 0 #fff, 0px -3px 0 #fff, 1px -3px 0 #fff, 2px -3px 0 #fff, 3px -3px 0 #fff,
    -3px -2px 0 #fff, -2px -2px 0 #fff, -1px -2px 0 #fff, 0px -2px 0 #fff, 1px -2px 0 #fff, 2px -2px 0 #fff, 3px -2px 0 #fff,
    -3px -1px 0 #fff, -2px -1px 0 #fff, -1px -1px 0 #fff, 0px -1px 0 #fff, 1px -1px 0 #fff, 2px -1px 0 #fff, 3px -1px 0 #fff,
    -3px 0px 0 #fff, -2px 0px 0 #fff, -1px 0px 0 #fff, 0px 0px 0 #fff, 1px 0px 0 #fff, 2px 0px 0 #fff, 3px 0px 0 #fff,
    -3px 1px 0 #fff, -2px 1px 0 #fff, -1px 1px 0 #fff, 0px 1px 0 #fff, 1px 1px 0 #fff, 2px 1px 0 #fff, 3px 1px 0 #fff,
    -3px 2px 0 #fff, -2px 2px 0 #fff, -1px 2px 0 #fff, 0px 2px 0 #fff, 1px 2px 0 #fff, 2px 2px 0 #fff, 3px 2px 0 #fff,
    -3px 3px 0 #fff, -2px 3px 0 #fff, -1px 3px 0 #fff, 0px 3px 0 #fff, 1px 3px 0 #fff, 2px 3px 0 #fff, 3px 3px 0 #fff;
}*/

/*#bag-trend .trend-title span::before,
#event-site .trend-title span::before,
#present-campaign .trend-title span::before {
    background-color: #000;
}*/