body {color: #333;}
.pull-left {float: left;}
.pull-right {float: right;}
.text-right {text-align: right;}
.position-unset {position: unset;}
.position-relative {position: relative;}
.clearfix:before,.clearfix:after {content: '';display: table;width: 100%;}
.font-normal {font-weight: normal;}
.pointer{cursor: pointer;}

.banner-top {
    height: 331px;
    background: #fff url("/img/oem_sale2_lp/bg_banner.jpg") top no-repeat;
    background-size: 100% 331px;
}

.block-items {padding: 80px 0;}
.block-items:nth-child(even) {background: #F8F8F8;}
#block_1.block-items {padding-top: 62px;}

.block-items-title {
    text-align: center;
    position: relative;
    padding-bottom: 45px;    
    font: normal normal 700 40px/normal "Noto Sans JP", sans-serif;
}

.desc-top-content {margin-bottom: 64px;}
.desc-top-content .desc-top-title {
    text-align: center;
    margin-bottom: 8px;
    font: normal normal 700 24px/normal "Noto Sans JP", sans-serif;
}
.desc-top-content p {font-size: 18px;}

#block_1 .block-items-title {padding-bottom: 25px;}

.icon-items-title {margin-bottom: 16px;}

.item-block {
    border: none;
    width: 320px;
    padding: 16px;
    outline: none;
    flex: 0 0 auto;
    overflow: hidden;
    margin-left: 4px;
    margin-right: 4px;    
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
}

.item-block:first-child {margin-left: 0;}
.item-block:last-child {margin-right: 0;}

.image-content {
    width: 288px;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.border-radius {
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
}

.image-content .top-pos{
    width: 35px;
    height: 31px;
    color: #fff;
    position: absolute;
    display: inline-flex;
    padding: 5px 10px 0px 10px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 14px 0px;
    font: normal normal 600 20px/20px "Hiragino Kaku Gothic Pro", sans-serif;
}

.image-content .top1 {background: linear-gradient(131deg, #F5D59A 0%, #754B2F 146.12%);}
.image-content .top2 {background: linear-gradient(131deg, #D7D2C6 0%, #685A5A 146.12%);}
.image-content .top3 {background: linear-gradient(131deg, #8C7B65 0%, #463520 146.12%);}
.image-content .top4 {background: linear-gradient(131deg, #285169 0%, #142935 146.12%);}

.image-content .rank {
    right: -1px;
    bottom: -1px;
    position: absolute;
    padding: 1px 4px 0px 4px;
    border-radius: 14px 0px;
    background: #FFF;    
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
}

.item-body {
    background: #fff;}

.title-bg-content {
    padding-bottom: 4px;
    background: #fff;}

.item-bg:first-child {margin-top: 0;}

.title-item {
    height: 40px;
    overflow: hidden;
    margin-top: 12px;
    font: normal normal 700 14px/20px "Noto Sans JP", sans-serif;
}

.position {
    margin-top: 14px;
    padding-left: 20px;
    font: normal normal 400 12px/20px "Noto Sans JP", sans-serif;
    background: url("/img/oem_sale2_lp/icon_pos.svg") no-repeat left center;
}

.desc-item {
    height: 60px;
    margin-top: 14px;
    overflow: hidden;
    font: normal normal 400 14px/20px "Noto Sans JP", sans-serif;    
}
    
.label-item {
    top: -1px;
    margin-right: 3px;
    position: relative;
    display: inline-block;
    font: normal normal 400 12px/20px "Noto Sans JP", sans-serif;
}

.item-price {
    margin-top: 4px;
    color: #FF2323;
    display: inline-block;
    font: normal normal 400 12px/20px "Noto Sans JP", sans-serif;
}

.item-price span {font: normal normal 700 20px/20px "Noto Sans JP", sans-serif;}
.item-price span.font-normal {font: normal normal normal 12px/20px "Noto Sans JP", sans-serif;color: #333;margin-left: 5px;}
.item-price span.about {font: normal normal 700 20px/20x "Noto Sans JP", sans-serif;}

.btn-link {
    height: 40px;
    padding: 0;
    margin-top: 10px;
}

.btn-link a {
    height: 40px;
    color: #fff;    
    display: block;
    padding-top: 9px;
    border-radius: 8px;
    background: #1E3957;    
    text-decoration: none;
    transition: all 0.2s ease-in-out;    
    font: normal normal 700 14px/20px "Noto Sans JP", sans-serif;
}

.btn-link a:hover {
    text-decoration: none;
    background: #87A9C4;
    transition: all 0.2s ease-in-out
}

.btn-link:hover,
.btn-link:focus {text-decoration: none;}

.bg-white-content {
    position: relative;
    border-radius: 16px;
    background: #FFF;
    padding: 24px 20px;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}

.slide-img-content {
    float: left;
    width: 521px;
    border-radius: 16px;
    overflow: hidden;
}

.desc-content-slide {
    width: 580px;
    float: right;
}

.title-item-slide {
    margin-bottom: 16px;
    font: normal normal 700 32px/normal "Noto Sans JP", sans-serif;
}
.title-item-slide .sub-title-item-slide {
    display: block;
    font: normal normal 700 24px/normal "Noto Sans JP", sans-serif;
}

.desc-content-slide p {
    font: normal normal 400 19px/32px "Noto Sans JP", sans-serif;
}

.desc-content-slide .btn-link {
    height: 54px;
    margin-top: 26px;
    border-radius: 8px;

}
.desc-content-slide .btn-link a {
    height: 54px;
    padding-top: 15px;    
    font: normal normal 700 20px/20px "Noto Sans JP", sans-serif;
}

.slilde-items {
    height: 348px;
    overflow: hidden;
    position: relative;   
}
.slilde-items img {float: left;}
.slick-arrow {
    width: 64px;
    height: 64px;
    bottom: 24px;
    position: absolute;
    z-index: 10000;
    border: none;
    font-size: 0;
}

.slick-prev {
    left: 0;
    background: url("/img/oem_sale2_lp/arrow_pre.svg") no-repeat left center;
}
.slick-prev:hover {
    background: url("/img/oem_sale2_lp/arrow_pre_hover.svg") no-repeat left center;
}
.slick-prev:hover {
    background: url("/img/oem_sale2_lp/arrow_pre_hover.svg") no-repeat left center;
}
.slick-next {
    right: 0;
    background: url("/img/oem_sale2_lp/arrow_next.svg") no-repeat left center;
}
.slick-next:hover {
    background: url("/img/oem_sale2_lp/arrow_next_hover.svg") no-repeat left center;
}

.slick-arrow.slick-disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

.slick-dots {    
    left: 0;
    bottom: 45px;
    width: 100%;
    z-index: 1000;
    position: absolute;
    text-align: center;
}

.slick-dots li {
    display: inline-block;
    padding: 0;
}

.slick-dots li button {
    width: 14px;
    height: 14px;
    font-size: 0;
    position: relative;
    background: transparent;
    border: none;
}

.slick-dots li button::after {
    content: '';
    top: 0;
    left: 2px;    
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #fff;
    border-radius: 50%;
}

.slick-dots li.slick-active button::after {
    background: #fff;
}

.slick-list {position: relative;}
.slick-list::after {
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 206px;
    z-index: 1000;
    position: absolute;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 41, 53, 0.00) 28.4%, #142935 100%);
}

.bg-gray {
    margin-top: -24px;
    padding: 60px 24px 20px;
    border-radius: 0px 0px 16px 16px;
    background: #EAEBF0;
}

.info-pos {
    font: normal normal 400 16px/24px "Noto Sans JP", sans-serif;
}

.info-pos li {
    width: 50%;
    float: left;
    text-align: left;
    padding-right: 16px;
}

.info-pos li span.label-info {
    width: 100px;
    font-weight: bold;
    vertical-align: top;
    display: inline-block;    
    background: transparent;
}

.media {
    width: 100%;
    display: table;    
    margin-bottom: 16px;}

.media .media-left,
.media .media-right {
    display: table-cell;
    vertical-align: top;
    text-align: left;
}

.media .media-right {width: 10000px;}

.media .media-right a {
    color: #333;
    text-decoration: underline;
}

.media .media-right a:hover {text-decoration: none;}

.scroll {
    width: 100%;
    height: auto;
    display: flex;
    cursor: default;    
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    align-items: center;    
    padding: 20px 0;
    overflow: scroll hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.25rem;}

.scroll::-webkit-scrollbar {height: 8px;}
.scroll::-webkit-scrollbar-button {width: 150px;}
.scroll::-webkit-scrollbar-track {
    background: #e5e5e5;
    opacity: 0.24;
    border-radius: 10px;}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #7DABCF;
    -webkit-box-shadow: inset 0 0 6px #7DABCF;}

.scroll.active {
    cursor: grab;
    cursor: -webkit-grab; 
}

.link-network {
    text-align: center;
    font-size: 0;
    margin: 80px 0;}

.link-network a {
    display: inline-block;
    margin: 0 12px;}

.breadcrum {
    font-size: 11px;
    border-top: 1px solid #EAEBF0;
    background: #F4F5F6;}

.breadcrum-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 0;}

.breadcrum a {
    color: #196fb9;
    position: relative;
    text-decoration: none;
    padding-right: 20px;
    margin-right: 8px;
    background: url("/img/oem_sale2_lp/icon_breadcrum.svg") no-repeat right center;
}
    
.breadcrum a:hover {text-decoration: underline;}

.cms-group-title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}

.view-all{
    display: block;
}

.scrollable-y {
    overflow-y: auto;
}

.w-100 {
    width: 100%;
}

.max-h-500 {
    max-height: 500px;
}

.h-viewport-minus-100 {
    height: calc(100vh - 100px);
}