@charset "UTF-8";
#Wrap {width: 100%;}
#columnArchiveAll {font-feature-settings: 'palt'; text-align: justify; text-justify: inter-ideograph;} 
#columnArchiveAll p {font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'メイリオ', sans-serif;}
#columnArchiveAll a:hover {cursor: pointer; opacity: .5;}
#columnArchiveAll {font-size: 62.5%;}
#columnArchiveAll img,#columnArchiveAll span {display: block;}
#columnArchiveAll a:hover {cursor: pointer; opacity: .5;}
#columnArchiveAll ul li {list-style: none;}
#columnArchiveAll .futuraFont {font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}
#columnArchiveAll .dnpShueiMinchoFont {font-family: dnp-shuei-mincho-pr6, sans-serif;font-weight: 500;font-style: normal;}
.slick-prev:before,
.slick-next:before {
    content: '' !important;
}
.slick-prev:before, 
.slick-next:before {
    opacity: 1 !important;
}
/*************************************SP****************************************/
@media screen and ( max-width:560px ) {
    #columnArchiveAll .pcOnly {display: none;}
    #columnArchiveAll {
        padding-bottom: calc(32*(100vw/750));
    }
    #columnArchiveAll h2 {
        position: relative;
        margin-top: calc(150*(100vw/750));
        padding-bottom: calc(60*(100vw/750));
        color: #1a1a1a;
        font-size: calc(36*(100vw/750));
        letter-spacing: .04rem;
        text-align: center;
    }
    #columnArchiveAll h2::before {
        content: '';
        display: block;
        position: absolute;
        top: calc(38*(100vw/750));
        left: calc(170*(100vw/750));
        width: calc(410*(100vw/750));
        height: calc(2*(100vw/750));
        background-color: #1a1a1a;
    }
    #columnArchiveAll .slideArea {
        width: calc(596*(100vw/750));
        margin: 0 auto;
    }
    #columnArchiveAll .slideArea li,
    #columnArchiveAll .slideArea li img {
        width: calc(596*(100vw/750));
    }
    #columnArchiveAll p {
        line-height: 1.5; 
    }
    #columnArchiveAll ul li a p span:nth-of-type(1) {
        margin-top: calc(30*(100vw/750));
        color: #666;
        font-size: calc(22*(100vw/750));
    }
    #columnArchiveAll ul li a p span:nth-of-type(2) {
        margin-top: calc(8*(100vw/750));
        font-size: calc(24*(100vw/750));
    }
    /*==========================
    arrow
    ==========================*/
    .slick-prev, .slick-next {
        top: 41% !important;
        height: 20px;
    }
    .slick-arrow.slick-prev {
        left: -26px !important;
    }
    .slick-arrow.slick-next {
        right: -30px !important;
    }
    .slick-arrow::before {
        top: -6px !important;
    }
    .slick-prev::after {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
    }
    .slick-next::before {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
    }
    .slick-arrow::before, 
    .slick-arrow::after {
        height: 14px !important;
    }
    .slick-arrow::before, 
        .slick-arrow::after {
        background: #666 !important;
    }
    /*==========================
    View All
    ==========================*/
    #columnArchiveAll .checkItemAll {
        width: calc(355*(100vw/750));
        margin: calc(70*(100vw/750)) auto 0;
        text-align: center;
        border: 1px solid #333333;
    }
    #columnArchiveAll .checkItemAll a {
        display: inline-block;
        width: 100%;
        font-size: calc(24*(100vw/750));
        line-height: 2.45;
        letter-spacing: .03rem;
    }
}
/*************************************PC****************************************/
@media screen and (max-width: 1200px) and (min-width: 561px) {
    #columnArchiveAll {font-size: calc(10* (100vw / 1200)) !important;}}
@media only screen and (min-width: 561px) {
    #columnArchiveAll .spOnly {display: none;}
    #columnArchiveAll {
        width: 120rem;
        margin: 0 auto;
        padding-bottom: 11.5rem;
    }
    #columnArchiveAll h2 {
        position: relative;
        margin-top: 12rem;
        padding-bottom: 3rem;
        color: #1a1a1a;
        font-size: 2.2rem;
        letter-spacing: .04rem;
        text-align: center;
    }
    #columnArchiveAll h2::before {
        content: '';
        display: block;
        position: absolute;
        top: 2.2rem;
        left: 47.6rem;
        width: 24.8rem;
        height: .1rem;
        background-color: #1a1a1a;
    }
    #columnArchiveAll .slideArea {
        width: 103rem;
        margin: 0 auto;
    }
    #columnArchiveAll .slideArea li,
    #columnArchiveAll .slideArea li img {
        width: 33rem;
    }
    #columnArchiveAll .slideArea li {
        margin: 0 1rem;
    }
    #columnArchiveAll p {
        line-height: 1.5; 
    }
    #columnArchiveAll ul li a p span:nth-of-type(1) {
        margin-top: 2rem;
        color: #666;
        font-size: 1.2rem;
    }
    #columnArchiveAll ul li a p span:nth-of-type(2) {
        margin-top: .25rem;
        font-size: 1.3rem;
    }
    /*==========================
    arrow
    ==========================*/
    .slick-prev, .slick-next {
        top: 34% !important;
        height: 40px;
    }
    .slick-arrow.slick-prev {
        left: -3.6rem !important;
    }
    .slick-arrow.slick-next {
        right: -4.2rem !important;
    }
    .slick-prev,
    .slick-next {
        position: relative;
    }
    .slick-prev::before,
    .slick-next::before,
    .slick-prev::after,
    .slick-next::after  {
        content: '';
        display: block;
        position: absolute;
        width: 2rem;
        height: .1rem;
        background-color: #666;
    }
    .slick-prev::before,
    .slick-next::before {
        top: -.9rem;
    }
    .slick-prev::after,
    .slick-next::after {
        top: .9rem;
    }

    .slick-prev::before, .slick-next::before {
        top: 1rem;
    }
    .slick-prev::after, .slick-next::after {
        top: 2.8rem;
    }

    .slick-next::before,
    .slick-prev::after {
        -webkit-transform: rotate(68deg);
        transform: rotate(68deg);
    }
    .slick-prev::before,
    .slick-next::after {
        -webkit-transform: rotate(-68deg);
        transform: rotate(-68deg);
    }
    /*==========================
    View All
    ==========================*/
    #columnArchiveAll .checkItemAll {
        width: 22rem;
        margin: 5rem auto 0;
        text-align: center;
        border: 1px solid #333333;
    }
    #columnArchiveAll .checkItemAll a {
        display: inline-block;
        width: 100%;
        font-size: 1.5rem;
        line-height: 2.3;
        letter-spacing: .02rem;
    }
}