@charset "Shift_JIS";
/* CSS Document */
/*==============================================
共通 ここから
================================================*/

/* デフォルトの余白リセット */
main, main#wrapper, nav .category_nav {
    margin: 0;
    padding: 0;
    max-width: none;
}

/* br用クラス */
.smp-none {
    display: block;
}
.pc-none {
    display: none;
}

/* 変数上書き */
:root {
    /* 共通フォントサイズ(ディスプレイが900px以上の場合に14pxとなる) ※.contactlenses-innerの中の要素のみ */
    --font-size-text: 2.1cqw;

    /* 横の余白 上書き */
    --margin-space-beside: 2.8em;

    /* 縦の余白 上書き */
    --margin-space-vertical: 2em;
}

.contactlenses .pc_none {
    display: none;
}
/*==============================================
共通 ここまで
================================================*/

/*==============================================
.contactlenses 共通 STR
================================================*/

.contactlenses .contents {
    box-shadow: 0 0 2em rgba(138, 167, 199, 0.4);
}
/*==============================================
.contactlenses 共通 END
================================================*/

/*==============================================
.contactlenses スライダー STR
================================================*/

/* ラジオボタン非表示 */
.contactlenses .contactlenses-section .contactlenses-item-wrap .radio-slider {
    display: none;
}

.contactlenses .contactlenses-section .contactlenses-item-inner {
    overflow: visible;
    gap: 2%;
    padding-bottom: 1em;
}
.contactlenses .contactlenses-section .contactlenses-item{
    width: 32%;
    min-width: 32%;
    margin-right: 0;

    /* スライダー表示処理 */
    display: none;
    flex-direction: column;
}

/* スライダー矢印部分 */
.contactlenses .slider-arrow {
    position: absolute;
    top: 50%;  
    transform: translateY(-50%);
    width: 1.8em;
    height: 1.8em;
    background: #ffffff5e;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 100vw;
    z-index: 1;
    cursor: pointer;
}
.contactlenses .slider-arrow .arrow {
    position: relative;
    width: 9px;
    height: 9px;
}
.contactlenses .slider-arrow .arrow::before,
.contactlenses .slider-arrow .arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
    width: 9px;
    height: 3px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: calc(100% - 1px) 50%;
}
.contactlenses .slider-arrow .arrow::before {
    transform: rotate(45deg);
}
.contactlenses .slider-arrow .arrow::after {
    transform: rotate(-45deg);
}
.contactlenses .slider-arrow.prev-label {
    left: .5em;
}
/* 位置調整 */
.contactlenses .slider-arrow.prev-label .arrow {
    transform: rotate(-180deg);
    margin-right: -1px;
}
.contactlenses .slider-arrow.next-label {
    right: .5em;
}

/* ページネーション サークル */
.contactlenses .contactlenses-item-wrap .slider-pagination {
    display: flex;
    justify-content: center;
    gap: .5em;
    margin-bottom: 1em;
}
.contactlenses .contactlenses-item-wrap .slider-pagination__cir{
    width: .8em;
    height: .8em;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 100vw;
    cursor: pointer;
}

/* 有効なラジオボタンの色変更 */
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(1):checked ~ .slider-pagination .slider-pagination__cir:nth-of-type(1) {
    background-color: #ede485;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(2):checked ~ .slider-pagination .slider-pagination__cir:nth-of-type(2) {
    background-color:#ede485;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(3):checked ~ .slider-pagination .slider-pagination__cir:nth-of-type(3) {
    background-color:#ede485;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(4):checked ~ .slider-pagination .slider-pagination__cir:nth-of-type(4){
    background-color:#ede485;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(5):checked ~ .slider-pagination .slider-pagination__cir:nth-of-type(5) {
    background-color: #ede485;
}

/* 表示処理 ラジオボタン1つにつき、３商品表示 */
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(1):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(1),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(1):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(2),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(1):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(3), 
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(1):checked ~ .slider-arrow:nth-of-type(1),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(1):checked ~ .slider-arrow:nth-of-type(2) {
    display: flex;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(2):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(4),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(2):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(5),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(2):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(6), 
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(2):checked ~ .slider-arrow:nth-of-type(3),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(2):checked ~ .slider-arrow:nth-of-type(4) {
    display: flex;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(3):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(7),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(3):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(8),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(3):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(9), 
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(3):checked ~ .slider-arrow:nth-of-type(5),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(3):checked ~ .slider-arrow:nth-of-type(6){
    display: flex;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(4):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(10),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(4):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(11),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(4):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(12), 
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(4):checked ~ .slider-arrow:nth-of-type(7),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(4):checked ~ .slider-arrow:nth-of-type(8) {
    display: flex;
}
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(5):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(13),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(5):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(14),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(5):checked ~ .contactlenses-item-inner .contactlenses-item:nth-of-type(15), 
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(5):checked ~ .slider-arrow:nth-of-type(9),
.contactlenses .contactlenses-item-wrap .radio-slider:nth-of-type(5):checked ~ .slider-arrow:nth-of-type(10) {
    display: flex;
}

/*==============================================
.contactlenses スライダー END
================================================*/


/*==============================================
.contactlenses 調節 STR
================================================*/
.contactlenses .contents-inner,
.contactlenses .contactlenses-section .section-title{
    padding: 0 var(--margin-space-beside);
}
.contactlenses .contactlenses-section.ranking .item-list-parent{
    margin:0  var(--margin-space-beside);
}
.contactlenses .--category-ranking .item-list-parent {
    display: flex;
    gap: 10px;
    padding: 10px;
    counter-reset: rank-number 0;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: auto !important;
}
.contactlenses .--category-ranking .item-list-parent li {
    width: fit-content;
    min-width: 30%;
    border-bottom: none;
}
/*==============================================
.contactlenses 調節 END
================================================*/


/*==============================================
.contactlenses ホバー STR
================================================*/
.contactlenses .contactlenses-section.anchor li a:hover{
    box-shadow: none;
    transform: translateY(2px);
    color: var(--main-color) !important;
}
.contactlenses .section-title__more .more:hover{
    color: #fff !important;
    background:#9fb0db !important;
}
.contactlenses a:hover{
    opacity: .9;
}

/*==============================================
.contactlenses ホバー END
================================================*/