/* 基本的な設定 */
* {
    font-family:'Lato', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif, 'FontAwesome'!important;
}
.ph_rela {
    position: relative;
    height: 62vw;
}
.ph_abu {
    position: absolute;
}
.txt_area {
    position: absolute;
    font-size: 1vw;
}
.txt_area_en {
    font-size: 2.2vw;
    letter-spacing: 8px;
    margin: 0;
}
.txt_area_jp {
    font-size: 0.9vw;
    letter-spacing: 5px;
    margin: 0;
    border-bottom: 1px solid #333;
    padding: 0 0 15px;
}
.txt_area_copy {
    font-size: 0.9vw;
    line-height: 1.6vw;
    text-align: justify;
    letter-spacing: 1px;
    margin: 1vw 0px;
}
.r_pad {
    padding-right: 2vw;
}
.l_pad {
    padding-left: 4vw;
}



/* 看板エリア */

.cat-top__wrap {
    background: url(https://perfectspace.itembox.design/item/img/cat/cat_art_top.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 35vw;
    position: relative;
    background-repeat: no-repeat;
}
.cat-top__txt {
    color: #fff;
    font-size: 1vw;
    letter-spacing: 0.2vw;
    line-height: 2vw;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 60%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
.cat-top__wrap::before {
    content: "";
    padding: 9.5rem 13.5rem;
    top: 3%;
    left: 1%;
    position: absolute;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}
.cat-top__wrap::after {
    content: "";
    padding: 9.5rem 13.5rem;
    position: absolute;
    bottom: 3%;
    right: 1%;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}
.cat-top__logo {
    position: absolute;
    z-index: 1;
    top: 45%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    width: 10%;
}

.cat-scroll__arrow {
    animation: pathmove 2.4s ease-in-out infinite;
    opacity:0;
}
@keyframes pathmove{
    0%{
        height:0;
        opacity: 0;
        top: 89%;
    }
    30%{
        height:30px;
        opacity: 1;
    }
    100%{
        height:0;
        opacity: 0;
        top: 98%;
    }
}
.cat-scroll__txt {
    color: #fff;
    font-size: 0.7vw;
    letter-spacing: 0.2vw;
    line-height: 2vw;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 86%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
.cat-scroll__arrow {
    width: 0.5vw;
    height: 3vw;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: skewy(-45deg);
    margin: -5px 0 0 -3px;
    top: 89%;
    left: 50%;
    position: absolute;
}

/* スライダー */
.autoplay-slider {
    display: flex;
    min-width: 100%;
    width: min-content;
    animation: 40s linear infinite sliderAnimation;
}
.slide {
    width: 18vw;
    margin: 0 1vw 0 0;
}
.cat_ph_sl{
    margin: 60px 0;
    display: flex;
    padding: 0 0 0 12vw;
    align-items: center;
    display: -ms-grid;
    -ms-grid-columns: min-content;
} 
.cat_ph_sl_wrap {
    overflow: hidden;
}
.cat_phsl_white {
    width: 68vw;
    background: #fff;
    z-index: 1;
}
.cat_phsl_white h3 {
    font-size: 1.5vw;
    letter-spacing: 0.3vw;
    font-weight: bold;
    margin: 0 0 2vw;
}
.cat_phsl_white p {
    font-size: 1vw;
    letter-spacing: 0.1vw;
line-height: 2vw;
}
.cat_phsl_white div {
    color: #b7b7b7;
    letter-spacing: 0.3vw;
    margin: 0 0 0.4vw;
}
@keyframes sliderAnimation {
    100% {
        transform: translateX(-50%);
    }
}


/* 子カテ */
.cat_pick__wrap{
    padding: 8vw 0 0;
    background: linear-gradient(to bottom, #ebdfd9 0%, #d7f1f5e0 30%, #f1ecd3 70%, #dbe8f1 100%);
}
.cat_pick__wrap .txt_area,
.cat_pick__wrap .cat_head_en,
.cat_pick__wrap .cat_head_catch {
    color: #494949;
}
.cat_pick__wrap .txt_area_jp,
.cat_pick__wrap .cat-common__line-arrow {
    border-color: #516067;
}
.cat_pick__wrap .cat-common__txt,
.cat_pick__wrap .itemprice {
    color: #516067;
}


/* 商品エリア */
.txt_area_price {
    letter-spacing: 2px;
}
.cat-common__detail-btn {
    margin: 0 0 0 75%;
    transition: all 0.5s;
    letter-spacing: 3px;
    font-size: 0.9vw;
    padding: 0 2vw 0 0;
}
.cat-common__detail-btn:hover {
    margin: 0 0 0 70%;
}
.cat-common__line-arrow {
    width: 97%;
    height: 10px;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    transform: skew(45deg);
    margin: -5px 0 0 -3px;
}
.ph_white-line {
    outline: 1px solid #fff;
    outline-offset: -16px;
}

[class^="before_bg__"]::before {
    position: absolute;
    content: "";
    left: 36vw;
    top: 28vw;
    width: 47.428571vw;
    height: 26vw;
    background-size: cover;
    z-index: 0;
}

.before_bg__yellow::before {
    background: #F3F5E8;
}
.before_bg__pink::before {
    background: #FBF1F1;
}
.before_bg__sky::before {
    background: #F2F7FB;
}
.before_bg__gray::before {
    background: #f1f5f7;
}
.before_bg__darkorange::before {
    background: #754b38;
}
.before_bg__darkgray::before {
    background: #303133;
}
.before_bg__vividyellow::before {
    background: #fff6ac;
}
.before_bg__vividsky::before {
    background: #9dc5cd;
}
.before_bg__softgray::before {
    background: #ffcdba;
}
.before_bg__softblue::before {
    background: #d5e5ed;
}
.before_bg__softorange::before {
    background: #d6cac2;
}
.before_bg__lightyellow::before {
    background: #fffce8;
}
.before_bg__lightgray::before {
    background: #eeeeee;
}
.before_bg__softgreen::before {
    background: #d9dfd0;
}
.before_bg__pailsky::before {
    background: #d3dee5;
}
.before_bg__pailorange::before {
    background: #f5e4d9;
}
.before_bg__pailyellow::before {
    background: #eaf4dd;
}
.before_bg__pailbrown::before {
    background: #dcd4ce;
}
.before_bg__pailgreengray::before {
    background: #d9dcdb;
}
.before_bg__skeletonwhite::before {
    background: #ffffff75;
}

.cat_item01::before {
    position: absolute;
    content: "";
    left: 36vw;
    top: 28vw;
    width: 47.428571vw;
    height: 26vw;
    /* background: #F3F5E8; */
    background-size: cover;
    z-index: 0;
}
.cat_item02::before {
    position: absolute;
    content: "";
    right: 19vw;
    top: 18vw;
    width: 47.428571vw;
    height: 26vw;
    /* background: #FBF1F1; */
    background-size: cover;
    z-index: 0;
}
.cat_item03::before {
    position: absolute;
    content: "";
    left: 36vw;
    top: 28vw;
    width: 47.428571vw;
    height: 26vw;
    /* background: #F2F7FB; */
    background-size: cover;
    z-index: 0;
}
.cat_item04::before {
    position: absolute;
    content: "";
    right: 19vw;
    top: 18vw;
    width: 47.428571vw;
    height: 26vw;
    /* background: #f1f5f7; */
    background-size: cover;
    z-index: 0;
}


/* フェード */
.element {
    /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 商品1個目 */
.cat_item01 .txt_area,
.cat_item03 .txt_area {
    width: 33vw;
    top: 0vw;
    left: 16vw;
}
.cat_item01__a,
.cat_item03__a {
    top: 22vw;
    left: 16vw;
    width: 26.714286vw;
    z-index: 10;
}
.cat_item01__b,
.cat_item03__b {
    top: 0vw;
    left: 47.7vw;
    z-index: 10;
    width: 51vw;
}
.cat_item01__b img,
.cat_item03__b img {
    z-index: 10;
}



/* 商品2個目 */
.cat_item02 .txt_area,
.cat_item04 .txt_area {
    width: 33vw;
    top: 0vw;
    right: 7vw;
}
.cat_item02__a,
.cat_item04__a {
    top: 21vw;
    right: 5vw;
    width: 27.714286vw;
    z-index: 10;
}
.cat_item02__b,
.cat_item04__b {
    top: 0vw;
    right: 40vw;
    z-index: 10;
    width: 51vw;
}
.cat_item02__b img,
.cat_item04__b img {
    z-index: 10;
}
.cat_head {
    display: flex;
    align-items: flex-end;
    margin: 0 0 5vw;
}
.cat_head_en {
    letter-spacing: 1vw;
    font-size: 6vw;
    margin: 0 1vw 0 0;
    line-height: 5vw;
}
.cat_head_catch {
    width: 33vw;
    font-size: 0.8vw;
    letter-spacing: 0.2vw;
}

.cat_suzukimasaru {
    padding: 3vw 0 0;
}

.cat_suzukimasaru .cat_head_en {
    color: #dfdfdf;
}

.cat_hokuouart {
    background-color: #f6fff6;
    padding: 3vw 0 0;
}
.cat_museum {
    padding: 3vw 0 0;
}
.cat_popart {
    background-color: #f8f8f8;
    padding: 3vw 0 0;
}
.cat_artdeco {
    background-color: #3D4853;
padding: 3vw 0 0;
}
.cat_artdeco .txt_area {
    color: #fff;
}
.cat_artdeco .cat_head_en {
    color: #fff;
}
.cat_artdeco .txt_area_jp {
    border-color: #fff;
}
.cat_artdeco .cat-common__line-arrow {
    border-color: #fff;
}
.cat_artdeco .cat_head_catch {
    color: #fff;
}


/* カミングスーン */
.cat_coming-soon h2 {
    font-size: 3vw;
    letter-spacing: 1vw;
    display: flex;
    align-items: center;
}
.cat_coming-soon ul {
    display: flex;
    justify-content: space-between;
flex-wrap: wrap;
}
.cat_coming-soon ul li {
    width: 50%;
    margin: 0 0 1vw;
}
.cat_coming_bg {
background: #00000030;
position: relative;
height: 400px;
    overflow: hidden;
}
.cat_coming_bg::after {
    content: "ComingSoon…";
    position: absolute;
    z-index: 1;
    color: #fff;
    font-size: 1.5vw;
    letter-spacing: 0.6vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.cat_coming-soon ul li img {
    mix-blend-mode: multiply;
    height: 400px;
    object-fit: cover;
    width: 100%;
    transition: transform .6s ease;
}
.cat_coming-soon ul li img:hover {
    transform: scale(1.1);
}
.cat_coming-soon ul li p {
    font-size: 15px;
    margin: 5px 0;
}
.cat_coming_txt {
    margin: 1vw 0;
}
.cat_coming-soon {
    margin: 0 auto 6vw;
}
.cat_coming-soon h2::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
    margin: 0 0 0 2vw;
}


@media screen and (max-width: 680px) {
    .cat-top__wrap {
        background-attachment: unset;
        height: 85vw;
    }
    .cat-top__wrap::before {
        padding: 6.5rem 6.5rem;
    }
    .cat-top__wrap::after {
        padding: 6.5rem 6.5rem;
    }
    .cat-top__logo {
        top: 38%;
        width: 27%;
    }
    .cat-top__txt {
        font-size: 3vw;
        letter-spacing: 0.4vw;
        line-height: 5vw;
        top: 60%;
        width: 100%;
    }
    .cat-scroll__txt {
        font-size: 1.8vw;
        letter-spacing: 0.7vw;
        line-height: 2vw;
        top: 86%;
    }
    .cat-scroll__arrow {
        width: 1vw;
        height: 4vw;
        top: 91%;
    }

    .autoplay-slider {
        padding: 55vw 0 0;
    }


    .cat_ph_sl {
        margin: 60px 0 35px;
        padding: 0 0 0 5vw;
    }
    .cat_phsl_white {
        width: 100%;
        margin: -15vw 0 45vw;
    }
    .cat_phsl_white div {
        letter-spacing: 0.3vw;
        margin: 0 0 0.4vw;
        font-size: 2.8vw;
        text-shadow: 1px 1px 5px #ffffff59, -1px 1px 5px #ffffff59, 1px -1px 5px #ffffff59, -1px -1px 5px #ffffff59;
    }
    .cat_phsl_white h3 {
        font-size: 5.5vw;
        letter-spacing: 1vw;
        margin: 0 0 5vw;
        white-space: nowrap;
    }
    .cat_phsl_white p {
        font-size: 3.5vw;
        letter-spacing: 1vw;
        white-space: nowrap;
        line-height: 6vw;
    }
    .slide {
        width: 32vw;
        margin: 0 3vw 0 0;
    }
    .fs-l-main {
        padding: 0;
    }
    .ph_white-line {
        outline-offset: -5px;
    }
    .ph_rela {
        height: 130vw;
    }
    .cat_head {
        display: block;
        margin: 0 0 5vw;
    }
    .cat_head_en {
        letter-spacing: 1.4vw;
        font-size: 9vw;
        margin: 0 1vw 4vw 0;
        line-height: 6vw;
    }
    .cat_head_catch {
        width: 100%;
        font-size: 2.8vw;
        letter-spacing: 0.2vw;
    }
    .ph_rela {
        height: 147vw;
    }
    .cat_item01 .txt_area, .cat_item03 .txt_area {
        width: 90%;
        top: 92vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    .txt_area_en {
        font-size: 5.2vw;
        letter-spacing: 4px;
        margin: 0;
    }
    .r_pad {
        padding-right: 0;
    }
    .txt_area_jp {
        font-size: 2.9vw;
        letter-spacing: 3px;
        margin: 0;
        border-bottom: 1px solid #333;
        padding: 0 0 5px;
    }
    .txt_area_copy {
        font-size: 3.4vw;
        line-height: 5.6vw;
        text-align: justify;
        letter-spacing: 1px;
        margin: 2vw 0px;
    }
    .txt_area_price {
        letter-spacing: 2px;
        font-size: 4vw;
    }
    .cat-common__detail-btn {
        margin: 0px 0 0 80%;
        transition: all 0.5s;
        letter-spacing: 2px;
        font-size: 2.2vw;
        padding: 0;
    }
    .cat-common__line-arrow {
        width: 97%;
        height: 4px;
        border-bottom: 1px solid #333;
        border-right: 1px solid #333;
        transform: skew(45deg);
        margin: -5px 0 0 -3px;
    }

    .cat_item01__a, .cat_item03__a {
        top: 62vw;
        left: 62vw;
        width: 36.714286vw;
        z-index: 12;
    }
    .cat_item01__b, .cat_item03__b {
        top: 0vw;
        left: 7.7vw;
        z-index: 10;
        width: 82vw;
    }
    .cat_item01::before,
    .cat_item03::before  {
        left: -5vw;
        top: 43vw;
        width: 56.428571vw;
        height: 45vw;
    }
    .cat_item02::before,
    .cat_item04::before {
        right: 0vw;
        top: 43vw;
        width: 56.428571vw;
        height: 45vw;
    }
    .cat_item02 .txt_area, .cat_item04 .txt_area {
        width: 90%;
        top: 92vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    .cat_item02__a, .cat_item04__a {
        top: 62vw;
        right: 64vw;
        width: 36.714286vw;
        z-index: 11;
    }
    .cat_item02__b, .cat_item04__b {
        top: 0vw;
        right: 7.7vw;
        z-index: 10;
        width: 82vw;
    }
    .l_pad {
        padding-left: 0;
    }
    .txt_area_en.l_pad {
        text-align: right;
    }
    .txt_area_jp.l_pad {
        text-align: right;
    }

    .cat_coming_bg {
        background: #00000030;
        position: relative;
        height: 150px;
        overflow: hidden;
    }
    .cat_coming-soon h2 {
        font-size: 7vw;
        margin: 0 0 3vw;
    }
    .cat_coming_txt {
        margin: 1vw 0 3vw;
        font-size: 3vw;
    }
    .cat_coming_bg::after {
        font-size: 3.5vw;
    }
    .cat_coming_bg {
        height: 150px;
    }
    .cat_coming-soon ul li img {
        height: 150px;
    }
}