@charset "UTF-8";


html {
    font-size: 62.5%;
}

#em220610PUMA {
    transform: none;
    filter: none;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    letter-spacing: 0.05em;
    color: #000;
    background-color: #fff;
}

.sp-only {
    display: block;
}

.pc-only {
    display: none;
}

body {
    width: 100%;
}

#em220610PUMA img,
#em220610PUMA video,
#em220610PUMA svg {
    width: 100%;
    height: auto;
}

#em220610PUMA * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#em220610PUMA a,
#em220610PUMA picture {
    display: block;
}

.main-area::after {
    margin: 0 auto 0;
}


/* ============================= ▼ タブレット ▼ == */
@media screen and (min-width: 768px) and (max-width: 1400px) {
    html {
        font-size: calc(10 * (100vw/1400));
    }
}

#em220610PUMA .heading__wrapper {
    width: calc(750 * (100vw / 750));
}

#em220610PUMA .content__lead--wrapper {
    margin-top: calc(140 * (100vw / 750));
    font-size: calc(25 * (100vw / 750));
    line-height: 1.92;
    letter-spacing: 0.025em;
}

#em220610PUMA .content__lead--02 {
    margin-top: calc(32 * (100vw / 750));
}

#em220610PUMA .content__item {
    margin-top: calc(140 * (100vw / 750));
}

#em220610PUMA .content__itme-img {
    width: calc(520 * (100vw / 750));
    margin: 0 auto;
}

#em220610PUMA .content__item-name {
    margin-top: calc(24 * (100vw / 750));
    font-family: pragmatica, sans-serif;
    font-size: calc(48 * (100vw / 750));
    letter-spacing: 0.05em;
}
#em220610PUMA .content__item-name a {
    display: inline-block;
}

#em220610PUMA .content__item-tax {
    margin-top: calc(52 * (100vw / 750));
    font-size: calc(28 * (100vw / 750));
    display: inline-block;
    letter-spacing: 0.05em;
    font-family: pragmatica, sans-serif;
    text-decoration: underline;
}

#em220610PUMA .content__item-desc {
    margin-top: calc(59* (100vw / 750));
    font-size: calc(30 * (100vw / 750));
    letter-spacing: 0;
}

#em220610PUMA .date {
    display: inline-block;
    font-family: pragmatica, sans-serif;
}

#em220610PUMA .content__block--01 {
    margin-top: calc(150 * (100vw / 750));
}

#em220610PUMA .content__unit--01 {
    width: calc(750 * (100vw / 750));
}

#em220610PUMA .content__credit {
    margin: calc(42 * (100vw / 750)) auto 0 calc(30 * (100vw / 750));
    font-family: pragmatica, sans-serif;
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.07em;
    line-height: 1.9166666667;
    text-align: left;
}
#em220610PUMA .content__credit span {
    display: block;
}

#em220610PUMA .content__credit a {
    display: inline-block;
}

#em220610PUMA .content__unit--02 {
    margin: calc(140 * (100vw / 750)) 0 0 auto;
    width: calc(520 * (100vw / 750));
}

#em220610PUMA .content__block--02 {
    width: calc(520 * (100vw / 750));
    margin: calc(70 * (100vw / 750)) auto 0 calc(50 * (100vw / 750));
}

#em220610PUMA .content__img--03 {
    position: relative;
    z-index: 1;
}

#em220610PUMA .content__img--03::after {
    position: absolute;
    content: "";
    background-color: rgba(163, 168, 173, 0.4);
    width: calc(520 * (100vw / 750));
    height: calc(690 * (100vw / 750));
    top: calc(50 * (100vw / 750));
    left: calc(50 * (100vw / 750));
    z-index: -1;
}

#em220610PUMA .content__block--03 {
    margin: calc(198 * (100vw / 750)) auto 0;
    position: relative;
    display: inline-block;
    padding: calc(48 * (100vw / 750)) calc(112 * (100vw / 750)) calc(42 * (100vw / 750));
}

#em220610PUMA .content__block--03::before,
#em220610PUMA .content__block--03::after {
    position: absolute;
    content: "";
    width: calc(108 * (100vw / 750));
    height: calc(54 * (100vw / 750));
    background-repeat: no-repeat;
    background-size: 100%;
}

#em220610PUMA .content__block--03::before {
    top: 0;
    left: 0;
    background-image: url(../img/sp/quote-before.svg);
}

#em220610PUMA .content__block--03::after {
    bottom: 0;
    right: 0;
    background-image: url(../img/sp/quote-after.svg);
}

#em220610PUMA .content__ttl {
    font-family: classico-urw, sans-serif;
    font-size: calc(44 * (100vw / 750));
    letter-spacing: 0.04em;
    position: relative;
    padding-bottom: calc(38 * (100vw / 750));
    display: inline-block;
}

#em220610PUMA .content__ttl::after {
    position: absolute;
    content: "";
    width: calc(30 * (100vw / 750));
    height: 1px;
    background-color: #000;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#em220610PUMA .content__desc {
    padding-top: calc(28 * (100vw / 750));
    font-size: calc(25 * (100vw / 750));
    letter-spacing: 0.025em;
    line-height: 1.92;
}

#em220610PUMA .content__block--04 {
    margin-top: calc(148 * (100vw / 750));
    background-color: rgba(163, 168, 173, 0.2);
    padding-bottom: calc(100 * (100vw / 750));
}

#em220610PUMA .content__ttl--snap {
    padding-top: calc(80 * (100vw / 750));
}


/* ============================= ▼ footer ▼ == */
#em220610PUMA .check_btn {
    margin: calc(150 * (100vw / 750)) auto calc(10 * (100vw / 750));
}

#em220610PUMA .check_btn a {
    font-family: pragmatica, sans-serif;
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.05em;
    width: calc(352 * (100vw / 750));
    margin: 0 auto;
    height: calc(56 * (100vw / 750));
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* ============================= ▼ PC ▼ == */
@media screen and (min-width: 768px) {

    /* ============================= ▼ 全体 ▼ == */
    #em220610PUMA .sp-only {
        display: none;
    }

    #em220610PUMA .pc-only {
        display: block;
    }

    #footer_emmi {
        margin-top: 120px;
    }
    

    #em220610PUMA .heading__wrapper {
        width: 108rem;
        margin: 0 auto;
    }

    #em220610PUMA .content__lead--wrapper {
        margin-top: 7.5rem;
        font-size: 1.4rem;
        line-height: 2.0714285714;
    }

    #em220610PUMA .content__lead--02 {
        margin-top: 1.7rem;
    }

    #em220610PUMA .content__item {
        margin-top: 11.4rem;
    }

    #em220610PUMA .content__itme-img {
        width: 35rem;
    }

    #em220610PUMA .content__item-name {
        margin-top: 1.4rem;
        font-size: 3.4rem;
    }

    #em220610PUMA .content__item-tax {
        margin-top: 3.5rem;
        font-size: 1.6rem;
    }

    #em220610PUMA .content__item-desc {
        margin-top: 3.8rem;
        font-size: 1.8rem;
    }

    #em220610PUMA .content__block--01 {
        margin-top: 12rem;
        position: relative;
        padding: 0 0 4.8rem 30rem;
        display: inline-block;
    }

    #em220610PUMA .content__unit--01 {
        width: 60rem;

    }

    #em220610PUMA .content__credit {
        margin: 2.5rem 0 0 auto;
        font-size: 1.2rem;
        line-height: 1.8333333333;
        text-align: right;
    }

    #em220610PUMA .content__unit--02 {
        position: absolute;
        margin: 0;
        width: 38.5rem;
        bottom: 0;
        left: 0;
        z-index: 1;
        padding: 2.5rem 2.5rem 0 0;
    }

    #em220610PUMA .content__unit--02::after {
        position: absolute;
        content: "";
        z-index: -1;
        background-color: #fff;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
    }

    #em220610PUMA .content__block--02 {
        width: 45.5rem;
        margin: 10.6rem auto 0;
    }

    #em220610PUMA .content__img--03 {
        padding: 0 2.5rem 2.5rem 0;
    }

    #em220610PUMA .content__img--03::after {
        position: absolute;
        content: "";
        background-color: rgba(163, 168, 173, 0.4);
        width: 43rem;
        height: 57rem;
        top: auto;
        left: auto;
        bottom: 0;
        right: 0;
    }

    #em220610PUMA .content__block--03 {
        margin: 11.8rem auto 0;
        padding: 4.2rem 11.5rem 3.9rem;
    }

    #em220610PUMA .content__block--03::before,
    #em220610PUMA .content__block--03::after {
        width: 8rem;
        height: 4rem;
    }

    #em220610PUMA .content__block--03::before {
        background-image: url(../img/quote-before.svg);
    }

    #em220610PUMA .content__block--03::after {
        background-image: url(../img/quote-after.svg);
    }

    #em220610PUMA .content__ttl {
        font-size: 2.6rem;
        padding-bottom: 2.3rem;
    }

    #em220610PUMA .content__ttl::after {
        width: 1.6rem;
    }

    #em220610PUMA .content__desc {
        padding-top: 1.5rem;
        font-size: 1.4rem;
        line-height: 2.0714285714;
    }

    #em220610PUMA .content__block--04 {
        margin-top: 12.2rem;
        padding-bottom: 7rem;
    }

    #em220610PUMA .content__ttl--snap {
        padding-top: 5rem;
    }

    /* ============================= ▼ check-btn ▼ == */
    #em220610PUMA .check_btn {
        margin: 12rem auto 0;
    }

    #em220610PUMA .check_btn a {
        width: 22rem;
        height: 3.5rem;
        font-size: 1.5rem;
    }
}


/* ============================= ▼ slick ▼ == */
#em220610PUMA .modalOpen:hover {
    opacity: .7;
    cursor: pointer;
}

#em220610PUMA .slick-slide {
    transition: .3s ease;
    position: relative;
}

/*
#em220610PUMA .slick-slide:not(.slick-current) {
    opacity: .4;
}
*/
#em220610PUMA .slider-wrapper {
    margin-top: calc(57 * (100vw / 750));
}

#em220610PUMA .slider img {
    width: 100%;
    height: calc(400 * (100vw / 750));
    object-fit: cover;
    object-position: 50% 50%;
    padding: 0 calc(10 * (100vw / 750));
    margin: 0 auto;
}

#em220610PUMA .slick-prev,
#em220610PUMA .slick-next {
    position: absolute;
    cursor: pointer;
    outline: none;
    top: 50%;
    transform: translateY(-50%);
    height: calc(68 * (100vw / 750));
    width: calc(34 * (100vw / 750));
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
}

#em220610PUMA .slick-next:before,
#em220610PUMA .slick-prev:before,
#em220610PUMA .slick-arrow::after,
#em220610PUMA .slick-arrow::after {
    content: none;
}

#em220610PUMA .slick-prev {
    /*戻る矢印の位置と形状*/
    left: calc(12 * (100vw / 750));
    background-image: url(../img/arrow_prev.svg);
}

#em220610PUMA .slick-next {
    /*次へ矢印の位置と形状*/
    right: calc(12 * (100vw / 750));
    background-image: url(../img/arrow_next.svg);
}

#em220610PUMA .slick-prev:hover,
#em220610PUMA .slick-prev:focus {
    background-image: url(../img/arrow_prev.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

#em220610PUMA .slick-next:hover,
#em220610PUMA .slick-next:focus {
    background-image: url(../img/arrow_next.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

/* ============================= ▼ PC ▼ == */
@media screen and (min-width: 768px) {

    /* ============================= ▼ slick ▼ == */
    /*
    #em220610PUMA .slick-slide:not(.slick-current) {
        opacity: 1;
    }
    */

    #em220610PUMA .slider-wrapper {
        width: 99rem;
        margin: 5rem auto 0;
    }

    #em220610PUMA .slider img {
        height: 40rem;
        padding: 0 1.5rem;
    }

    #em220610PUMA .slick-prev,
    #em220610PUMA .slick-next {
        height: 4rem;
        width: 2rem;
    }

    #em220610PUMA .slick-prev {
        left: 0;
    }

    #em220610PUMA .slick-next {
        /*次へ矢印の位置と形状*/
        right: 0;
    }

    /* ============================= ▲ slick ▲ == */
}


/* ============================= ▲ slick ▲ == */


/* ---------------------------- */
/* --- Base --- */
/* ---------------------------- */

/* モーダル */
#em220610PUMA .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: calc(80 * (100vw / 750)) calc(20 * (100vw / 750));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    pointer-events: none;
    opacity: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.5);
     height: calc(var(--vh, 1vh) * 100);
}



/* モーダルがactiveの時 */
#em220610PUMA .modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
#em220610PUMA .modal__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* モーダルのコンテンツ */
#em220610PUMA .modal__content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding: calc(80 * (100vw / 750)) calc(40 * (100vw / 750));
    background: #FFF;
}

#em220610PUMA .modal_inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* 閉じるボタン */
#em220610PUMA .modal__close-btn {
    position: absolute;
    right: calc(20 * (100vw / 750));
    top: calc(40 * (100vw / 750));
    width: calc(50 * (100vw / 750));
    height: calc(50 * (100vw / 750));
    cursor: pointer;
    z-index: 20;
    background-image: url(../img/close.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

#em220610PUMA .swiper-button-prev,
#em220610PUMA .swiper-rtl .swiper-button-next {
    left: calc(14 * (100vw / 750));
    right: auto;
    top: calc(467 * (100vw / 750));
    background-image: url(../img/arrow_prev.svg);
    height: calc(68 * (100vw / 750));
    width: calc(34 * (100vw / 750));
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    margin-top: 0;
}

#em220610PUMA .swiper-button-next,
#em220610PUMA .swiper-rtl .swiper-button-prev {
    right: calc(14 * (100vw / 750));
    left: auto;
    top: calc(467 * (100vw / 750));
    background-image: url(../img/arrow_next.svg);
    height: calc(68 * (100vw / 750));
    width: calc(34 * (100vw / 750));
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    margin-top: 0;
}

#em220610PUMA .modal-block {
    padding-bottom: calc(80 * (100vw / 750));
}
#em220610PUMA .modal-img {
    width: calc(630 * (100vw / 750));
}

#em220610PUMA .modal__itme-img {
    width: calc(300 * (100vw / 750));
    margin: calc(80 * (100vw / 750)) auto 0;
}

#em220610PUMA .modal__item-name {
    margin: calc(20 * (100vw / 750)) auto 0;
    font-family: pragmatica, sans-serif;
    font-size: calc(27 * (100vw / 750));
    letter-spacing: 0.05em;
}
#em220610PUMA .modal__item-name a,
#em220610PUMA .modal__item-tax a {
    display: inline-block;
}
#em220610PUMA .modal__item-tax {
    margin: calc(14 * (100vw / 750)) auto 0;
    font-family: pragmatica, sans-serif;
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.07em;
}

#em220610PUMA .modal__insta {
    margin-top: calc(62 * (100vw / 750));
    display: flex;
}

#em220610PUMA .modal__insta a {
    display: inline-block;
}

#em220610PUMA .modal__insta--wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#em220610PUMA .insta-icon {
    width: calc(40 * (100vw / 750));
}

#em220610PUMA .insta-account {
    margin-left: calc(20 * (100vw / 750));
    font-family: pragmatica, sans-serif;
    font-size: calc(23 * (100vw / 750));
    letter-spacing: 0.025em;
}

#em220610PUMA .modal__item-desc {
    margin-top: calc(50 * (100vw / 750));
    font-size: calc(23 * (100vw / 750));
    letter-spacing: 0.025em;
    line-height: 2;
    text-align: left;
}

#em220610PUMA .modaal-container img {
    width: 100%;
}





/* ============================= ▼ PC ▼ == */
@media screen and (min-width: 768px) {

    /* ============================= // swiper == */


    /* モーダルのコンテンツ */
    #em220610PUMA .modal {
        padding: 0;
    }
    #em220610PUMA .modal__content {
        position: relative;
        width: 108rem;
        height: 68rem;
        bottom: 0;
        padding: 4rem 8rem;
        overflow: visible;
    }

    #em220610PUMA .modal_inner {
        overflow: visible;
    }

    /* 閉じるボタン */
    #em220610PUMA .modal__close-btn {
        right: 2rem;
        top: 2rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    #em220610PUMA .swiper-button-prev,
    #em220610PUMA .swiper-rtl .swiper-button-next {
        left: 2rem;
        top: 32.3rem;
        height: 4rem;
        width: 2rem;
    }

    #em220610PUMA .swiper-button-next,
    #em220610PUMA .swiper-rtl .swiper-button-prev {
        right: 2rem;
        top: 32.3rem;
        height: 4rem;
        width: 2rem;
    }

    #em220610PUMA .modal-block {
        display: flex;
        justify-content: center;
        padding-bottom: 4rem;
    }

    #em220610PUMA .modal-img {
        width: 45rem;
    }

    #em220610PUMA .modal--desc-wrapper {
        margin-left: 7rem;
        width: 40rem;
    }

    #em220610PUMA .modal__itme-img {
        width: 18rem;
        margin: 3.3rem auto 0;
    }

    #em220610PUMA .modal__item-name {
        margin: 1.2rem auto 0;
        font-size: 1.4rem;
    }

    #em220610PUMA .modal__item-tax {
        margin: 1.1rem auto 0;
        font-size: 1.2rem;
    }

    #em220610PUMA .modal__insta {
        margin-top: 4.1rem;
    }
    
    #em220610PUMA .insta-icon {
        width: 2rem;
    }

    #em220610PUMA .insta-account {
        margin-left: 1rem;
        font-size: 1.3rem;
    }

    #em220610PUMA .modal__item-desc {
        margin-top: 3.3rem;
        font-size: 1.3rem;
        line-height: 2.1538461538;
        height: 24.7rem;
        overflow-y: scroll;
        padding-right: 3rem;
    }



    #em220610PUMA .modal__item-desc::-webkit-scrollbar {
        width: 0.2rem;
    }

    #em220610PUMA .modal__item-desc::-webkit-scrollbar-thumb {
        background: #000000;
        border-radius: 100vw;
    }

    #em220610PUMA .modal__item-desc::-webkit-scrollbar-track {
        background: #E2E2E2;
    }


}