@charset "shift_jis";
/*======================

アイリスオーヤマ公式通販サイト アイリスプラザ
JAL Mall店
PC用CSS

=======================*/

/* スタイルリセット
================================ */
/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 | 20110126
	License: none (public domain)
*/

#nymileup *,
#nymileup *::before,
#nymileup *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
#nymileup h1,
#nymileup h2,
#nymileup h3,
#nymileup h4,
#nymileup h5,
#nymileup h6,
#nymileup ul,
#nymileup ol,
#nymileup dl,
#nymileup li,
#nymileup dt,
#nymileup dd,
#nymileup p,
#nymileup div,
#nymileup span,
#nymileup img,
#nymileup a,
#nymileup table,
#nymileup tr,
#nymileup th,
#nymileup td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

#nymileup header,
#nymileup footer,
#nymileup nav,
#nymileup section,
#nymileup article,
#nymileup main,
#nymileup aside,
#nymileup figure,
#nymileup figcaption {
    display: block;
}

#nymileup ol,
#nymileup ul,
#nymileup li {
    list-style: none;
    list-style-type: none;
}

#nymileup img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#nymileup a {
    color: inherit;
    text-decoration: none;
    transition: 0.2s;
}

#nymileup a:hover {
    opacity: 0.5;
}

#nymileup .no,
#nymileup .pc_none{
    display: none !important;
}

/* ここから追加
================================ */
/* ベース */
#nymileup {
    width: 980px;
    margin: 0 auto;
    font-size: 22px;
    font-family: "Noto Sans JP","Jost", sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #000;
    background-color: #fff;
}

#nymileup .inner_content{
    width: 900px;
    margin: 0 auto;
}

#nymileup img {
    width: 100%;
}

#nymileup section{
    padding: 0 0 20px 0;
}

#nymileup section.title,
#nymileup section.fotter {
    padding: 0 0;
}

#nymileup section:nth-last-child(2){
    padding-bottom: 50px;
}

/*価格プロ 税込削除*/
#nymileup div.prices span > span > span {
    display: none;
}

/* 共通 見出し
================================ */
#nymileup h1 {
    font-size: 0;
}

#nymileup h2 {
    font-size: 40px;
    text-align: center;
    color: #2d2d2d;
    padding:15px 0;
    font-weight: bold;
    margin-bottom: 10px;
}

/*見出し画像の時*/
#nymileup h2.h_img{
    padding:0 0;
    font-size:0;
    width: 900px;
    margin: 0 auto;
}

#nymileup h3 {
    font-size: 38px;
    text-align: center;
    color: #2d2d2d;
    padding:2% 0;
    font-weight: bold;
}

#nymileup h4{
    font-size: 0;
}


#nymileup p{
    color: #2d2d2d;
    font-size: 25px;
    text-align: center;
    font-weight: 700;
    padding:2% 0;
}

/* 共通 カラム
================================ */
#nymileup ul[class^="col_"]{
    display: flex;
    flex-wrap: wrap;
    gap:38px;
}

#nymileup ul.col_1 > li{
    width:100%;
}

#nymileup ul.col_2 > li{
    width: calc(calc(100% - 5%) / 2);
    position: relative;
}

#nymileup ul.col_3 > li{
    width: calc(calc(100% - 9%) / 3);
}

#nymileup ul.col_4 > li{
    width: calc(calc(100% - 3%) / 4);
}

#nymileup ul.col_5 > li{
    width: calc(calc(100% - 4%) / 5);
}

/*section anchor アンカー
================================ */
#nymileup .anchor ul{
    margin-bottom: 2%;
}

#nymileup .anchor ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95px;
    background-color: #fff;
    border-radius: 10px !important;
    /* border:solid 1px #d44159; */
}

#nymileup .anchor ul li a h3{
    font-size: 23px;
    font-weight: bold;
    text-align: center;
}


#nymileup .anchor ul li a:hover {
    transform: translate(0, 4px);
    box-shadow: #222 0px 0px;
}

#nymileup .anchor ul li a::after{
    position: absolute;
    font-family: 'Material Icons';
    content: 'expand_more';
    transform: translate(50%,-50%);
    top:50%;
    right: 7%;
    font-size: 25x;
    font-weight: bold;
}

/*カラムごとサイズ変更*/
#nymileup .anchor ul.col_1 li a h3{
    font-size: 31px;
}

#nymileup .anchor ul.col_2 li a h3{
    font-size: 23px;
}

#nymileup .anchor ul li a h3 span{
    font-size: 30px;
}


/*section side_anchor ハンバーガーメニュー
================================ */
#nymileup .toggle{
    position: fixed;
    z-index: 9999;
    bottom: 15%;
    right: 0;
    width:70px;
    height: 70px;
    background-color: #1b1b1b;
    border-radius: 50% !important;
    display: block;
    border: solid 5px #fff;
    cursor: pointer;
}

#nymileup .toggle span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 50%;
    width: 50%;
    height: 3px;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

#nymileup .toggle span:nth-of-type(1) { top: calc(50% - 10px)}
#nymileup .toggle span:nth-of-type(2) { top: calc(50%);}
#nymileup .toggle span:nth-of-type(3) { top: calc(50% + 10px);}
#nymileup .toggle.active span:nth-of-type(1) {
    top: calc(100%/2);
    transform: translate(-50%,-50%) rotate(-45deg);
}

#nymileup .toggle.active span:nth-of-type(2) { opacity: 0; }
#nymileup .toggle.active span:nth-of-type(3){
    top: calc(100%/2);
    transform: translate(-50%,-50%) rotate(45deg);;
}

#nymileup .side_anchor{
    position: fixed;
    height: 100vh;
    bottom: 0;
    right: -100%;
    width: 50%;
    background-color: #f8f4e1;
    transition: 0.6s;
    z-index: 999;
    padding: 1.2vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

#nymileup .side_anchor.panelactive{
    right: 0;
}

#nymileup .side_anchor ul{
    width: 95%;
    margin: 0 auto 2% auto;
}


#nymileup .side_anchor ul.top li a::after{
    content: '';
}

/*カラムごとサイズ変更*/
#nymileup .side_anchor ul.col_1 li a h3{
    font-size: min(2.5vw, 31px);
}

#nymileup .side_anchor ul.col_2 li a h3{
    font-size: min(1.4vw, 23px);
}

#nymileup .side_anchor ul.col_2 li a h3 span{
    font-size: min(1.6vw, 30px);
}

#nymileup .side_anchor ul.col_3 li a h3{
    font-size: min(1.5vw, 22px);
}


/* section coupon
================================ */
/*クーポンコード*/
#nymileup .coupon li p{
    font-size: 22px;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
}

#nymileup .coupon li p span{
    font-size: 28px;
}

/* section item
================================ */
#nymileup .item_box {
    margin-bottom: 25px;
}

#nymileup .item_box li{
    position: relative;
    background-color: #fff;
    border: solid 2px #b28c3b;
}

/*商品名*/
#nymileup .item_box li dl dt h4{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 21px;
    color: #1b1b1b;
    text-align: center;
    height: 80px;
    line-height: 32px;
    font-weight: bold;
}

/*販促・価格*/

/*販促内容*/
#nymileup .item_box li dd.sale_box .sale{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 105px; */
    min-height: 90px;
    background-color: #af1b1b;
    color: #fffde3;
    font-size: 23px;
    font-weight: 600;
    text-align: center;
    line-height: 30px;
    padding: 10px 0;
}

#nymileup .item_box li dd.sale_box .sale span{
    font-size: 32px;
}

/*販促を横並びに表示*/
#nymileup .item_box.medama li dd.sale_box{
    display: flex;
}


/*価格*/
#nymileup .item_box li dd.sale_box .price_block{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 90px;
    background-color: #fffde3;
}

#nymileup .item_box li dd.sale_box .price_block .price_nomal{
    font-size: 18px;
    color: #1b1b1b;
    text-decoration:line-through;
    text-align: center;
}

#nymileup .item_box li dd.sale_box .price_block .prices{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: 50px;
}

#nymileup .item_box li dd.sale_box .price_block .prices .prdisp-taxin{
    font-family: "Jost";
    color: #af1b1b;
    font-weight: 700;
    letter-spacing: -2px;
}

#nymileup .item_box li dd.sale_box .price_block .prices .prdisp-taxin span.value{
    font-size: 55px;
}

#nymileup .item_box li dd.sale_box .price_block .prices .prdisp-taxin span{
    font-size: 35px;
}

/*ボタン*/
#nymileup .item_box li dl dd.btn{
    position: relative;
    background-color: #1f1b14;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    border-radius: 80px !important;
    height: 60px;
    width:95%;
    padding-right: 10px;
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
}

#nymileup .item_box li dl dd.btn::after{
    position: absolute;
    font-family: 'Material Icons';
    content: "play_circle_filled";
    transform:translate(50%,-50%);
    font-size: 40px;
    top:50%;
    right: 10%;
}

/*クーポンコード*/
#nymileup .item_box li p{
    font-size: 20px;
    padding: 0 0 5% 0;
    color: #1f1b14;
}

#nymileup .item_box li p span{
    font-size: 25px;
}


/* section slider
================================ */
/*スライダー調節==========*/
#nymileup .swiper {
    width: 900px;
    margin: 0 auto 25px auto;
}

#nymileup .swiper ul li a{
    padding: 0;
}

/*矢印*/
#nymileup .swiper-button-prev,
#nymileup .swiper-button-next{
    top:40% !important;
}

#nymileup .swiper-button-prev:after,
#nymileup .swiper-button-next:after {
    color: #000;
    font-size: 35px;
}

#nymileup .icon {
    position: absolute;
    left: 0;
    top: 0px;
    text-align: center;
    color: #fff;
    background-color: #c31c38;
    display: flex;
    width: 100px;
    height: 75px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-right: solid 3px #fff;
    border-bottom: solid 3px #fff;
    border-radius: 0 0px 20px 0 !important;
    font-size: 22px;
    font-weight: 600;
    line-height: 19px;
    z-index: 99;
}

#nymileup .icon span{
    font-size: 30px;
    line-height: 30px;
}

/* 商品ポイントアイコン
================================ */

#nymileup .item_box .itemicon {
    position: absolute;
    left: -10px;
    top: -10px;
    text-align: center;
    color: #fff439;
    background-color: #ff002a;
    display: flex;
    width: 100px;
    height: 100px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 200px !important;
    font-size: 20px;
    font-weight: 900;
    line-height: 25px;
}

#nymileup .item_box .itemicon div span{
    font-size: 35px;
}



/* section cate カテゴリ
================================ */
#nymileup .cate {
    margin: 0 auto 25px auto;
    gap: 17px !important;
}
#nymileup .cate li {
    width: calc(calc(100% - 6%) / 4) !important;
}

#nymileup .cate li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    color: #1b1b1b;
    padding: 17px 0;
    font-weight: 600;
}

#nymileup .cate li h3{
    color: #1b1b1b;
    margin-bottom: 0;
    font-size: 20px;
}

#nymileup .cate li a::after{
    position: absolute;
    font-family: 'Material Icons';
    content: "navigate_next";
    transform:translate(50%,-50%);
    top:50%;
    right: 7%;
}

/* bn バナー
================================ */
#nymileup .bn{
    width: 750px;
    margin: 10px auto;
}

/*25.08.19 ADD START*/

/* クーポンコード
================================ */
#nymileup .coupon-code{
    background: #fffdf7;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 17px;
    padding: 15px 0;
}
#nymileup .coupon-code dt{
    font-size: 20px;
    font-weight: 600;
}
#nymileup .coupon-code dd{
    font-size: 40px;
    font-weight: bold;
    color: #b61c1a;
    display: contents;
}
/* クーポン1カラム
================================ */
#nymileup #cate_01 .item_box li {
    border: solid 3px #b61c1a;
}

#nymileup .copy-link {
    position: relative;
    display: flex;

    input {
        font-size: 40px;
        font-weight: bold;
        color: #b61c1a;
        border: none;
        outline: none;
        background: transparent;
        width: 25%;
        text-align: center;
    }
    button {
        padding: 10px 15px;
        background: #f7e5e5;
        font-size: 17px;
        color: #b61c1a;
        outline: none;
        border:none;
        cursor: pointer;
        border-radius: 5px;
        
        &:active {
            background: #ddd;
        }
        
        &::before {
        content: "コピーしました";
        position: absolute;
        bottom: 65px;
        right:195px;
        background: rgba(51, 51, 51, 0.95);
        color: #fff;
        border-radius: 10px;
        padding: 9px 15px;
        font-size: 14px;
        display: none;
    }
        &::after {
            content: "";
            position: absolute;
            bottom: 60px;
            right:253px;
            width: 10px;
            height: 10px;
            background:rgba(51, 51, 51, 0.95);
            transform: rotate(45deg);
            display: none;
        }
    }
    &.active button::after,
    &.active button::before {
        display: block;
    }
}

/* おすすめ特集
================================ */
#nymileup .osusume li{
    border: 2px solid #785522;
}
/* TOPへ戻る
================================ */
#nymileup .pagetop {
    position: fixed;
    bottom: 8%;
    right: 2%;
	z-index: 3;
    
}
#nymileup .pagetop a {
	display: flex;
	justify-content: center;
    align-items: center;
    text-align: center;
	vertical-align: middle;
	color: #fff;
	font-size:18px;
    background: rgba(27, 27, 27, 0.8);
    padding:0;
    border-radius: 100vw;
    transition: 0.3s all;
    width: 100px;
    height: 100px;
}
#nymileup .pagetop a:hover{
	transform: translateY(-2px);
}
/* クーポン詳細ボタン
================================ */
#nymileup .btn{
    background: #000;
    color: #fff;
    display: block;
    text-align: center;
    width: 80%;
    padding: 20px 0;
    border-radius: 10px;
    margin: 0 auto 30px auto;
    position: relative;
}
#nymileup .btn::after {
    position: absolute;
    transform: translateY(95%) rotate(-45deg);
    width: 9px;
    height: 9px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
    right: 4%;
}
/*25.08.19 ADD END*/