@charset "shift_jis";
/* CSS Document */

/*-----------------------------------------------*/
/*ベース*/
/*-----------------------------------------------*/

#coolgoods2023{
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    padding:0;
    }

#coolgoods2023 .pc_none ,#coolgoods2023 .smp{
    display: none !important;
    }
    
#coolgoods2023 img{
    width: 100%
    }
#coolgoods2023 a{
    display:block;
    }
#coolgoods2023 a:hover{
    opacity: 0.9;
    }
/*-----------------------------------------------*/
/*看板下テキスト*/
/*-----------------------------------------------*/
#coolgoods2023 .title_txt {
    font-size: 16px;
    margin: 0;
    padding: 2% 0;
    color: #404040;
}


/*-----------------------------------------------*/
/*内容*/
/*-----------------------------------------------*/

#coolgoods2023 section{
    padding:10% 0 2% 0;
}
#coolgoods2023 section:nth-child(odd){/*#8fd6d4*/
    background:#8fd6d4;
    background: linear-gradient(0deg, rgb(92 209 223 / 51%) 0%, rgb(231 239 203) 52%, rgb(133 217 229) 100%);
}
#coolgoods2023 section:nth-child(even){/*#99c7e6*/
    background: rgb(141,193,229);
    background:linear-gradient(0deg, rgb(141 193 229 / 52%) 0%, rgba(194,237,240,1) 29%, rgba(194,237,240,1) 71%, rgb(119 185 223) 100%);
}

#coolgoods2023 .inner {
    margin: 0 6% 2% 6%;
    padding:0;
    /*background:#ffffff45;*/
    border-radius: 5px;
}

/*-----------------------------------------------*/
/*メイン見出し*/
/*-----------------------------------------------*/
#coolgoods2023 h3{
	position:relative;
	display:block;
	font-size: 44px;
	color:#fff;
	margin-bottom: 30px;
	padding-top: 0;
}

#coolgoods2023 h3 span{
	font-size: 23px;
    margin-right: 6px;
    font-weight: normal;

}

/******* 飾り文字 *******/
#coolgoods2023 h3::before {
    content: attr(data-en);
    position: absolute;
    top: -77%;
    left: 0;
    right: 0;
    font-size: 15px;
    font-family: 'Lato';
    display: inline;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-bottom: 2px solid;
    border-top: 2px solid;
    line-height: 1.8em;
    width: 120px;
    margin: 0 auto;
}

/******* アイコン画像 *******/
#coolgoods2023 section:nth-child(odd) h3::after,
#coolgoods2023 section:nth-child(even) h3::after{
    content: "";
    position: absolute;
    top: -103%;
    right: 41%;
    background-repeat: no-repeat;
    width: 35px;
    height: 65px;
    transform: rotate(22deg);
    background-size: 100%;

}
#coolgoods2023 section:nth-child(odd) h3::after{/*ペットボトル*/
    background-image: url(/IMAGE/coolgoods2023/cg23_icon1.png);

}
#coolgoods2023 section:nth-child(even) h3::after{/*ハンディファン*/
    background-image: url(/IMAGE/coolgoods2023/cg23_icon2.png);

}


/*-----------------------------------------------*/
/*ナビ*/
/*-----------------------------------------------*/
#coolgoods2023 .navi {
    padding: 40px 0;
    background: #fff;
    
}
/*タイトル*/
#coolgoods2023 .navi > h3{
    color: #7ab9cd;
    font-size: 35px;
    margin: 15px 0;
    font-family: 'Poppins', sans-serif;
    
}
#coolgoods2023 .navi ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    }
    
#coolgoods2023 .navi ul li{
    width: calc((100% - 15% )/ 2);
}
    
#coolgoods2023 .navi ul li a{
    background: #fff;
    margin:0 2%;
    box-sizing: border-box;
    border-radius: 5px;
   
}


#coolgoods2023 .navi ul li a{
    display:block;
    padding:20px 0;
    color:#fff;
    position: relative;
    font-size: 31px;
    line-height: 1.3em;
    border-radius: 4px;
    box-shadow: 0px 5px 0 #808b882b;
    top: -4px;
    transition: all 0.3s;
    
}
#coolgoods2023 .navi ul li a span{
    font-size: 18px;
    display: block;
    
}

/*テキスト色*/
#coolgoods2023 .navi ul li:nth-child(1) a{
    background: #85d9e5 !important;
}

#coolgoods2023 .navi ul li a:hover{
    color:#fff !important;
}


#coolgoods2023 .navi ul li:nth-child(2) a{
    background:#77b9df !important;
}


/*アイコン画像*/
#coolgoods2023 .navi ul li:nth-child(1) a::before,
#coolgoods2023 .navi ul li:nth-child(2) a::before{
    content: "";
    background-repeat: no-repeat;
    position: absolute;
    width: 8%;
    height: 71%;
    top: 14%;
    transform: rotate(22deg);
    background-size: 100%;
    transition: all 0.3s;
    
}

#coolgoods2023 .navi ul li:nth-child(1) a::before{/*ペットボトル*/
    background-image: url(/IMAGE/coolgoods2023/cg23_navi_icon1.png);
    right: 18%;
    
}
#coolgoods2023 .navi ul li:nth-child(2) a::before{/*ハンディファン*/
    background-image: url(/IMAGE/coolgoods2023/cg23_navi_icon2.png);
    right: 13%;
}

#coolgoods2023 .navi ul li a:hover{
    color:#222;
    top: 0px;
    box-shadow: none;
}
#coolgoods2023 .navi ul li a:hover::before{
    transform: rotate(0deg);
}
/*矢印*/
#coolgoods2023 .navi ul li a:after {
    font-family: 'Material Icons';
    font-size: 1em;
    position: absolute;
    content: "expand_more";
    transform: rotate(0deg);
    bottom: 27%;
    right: 4%;
    transition: all 0.3s;
    
}
#coolgoods2023 .navi ul li:nth-child(1) a:after::before{
    color: #8ddadf;
}

#coolgoods2023 .navi ul li:nth-child(2) a:after::before{
    color: #86cde0;
}

#coolgoods2023 .navi ul a:hover:after{
    bottom: 25%;
}



/*-----------------------------------------------*/
/*見出し*/
/*-----------------------------------------------*/
#coolgoods2023 h4{
    font-size: 24px;
    color: #373a3d;
    position: relative;
    margin:2% 0;
}
#coolgoods2023 h5 {
    font-size: 27px;
    margin: 4% 0 2% 0;
    color: #373a3d;
}


/*-----------------------------------------------*/
/*カラム*/
/*-----------------------------------------------*/
#coolgoods2023 ul[class^="col_"]{
    text-align: center;
    margin: 0;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

/********  li  ********/

#coolgoods2023 ul[class^="col_"] > li{
    width: calc((100% - 18%) /2);
    margin: 0 35px 40px 0;
    /*background: #ffffff29;*/
    transition: all 0.3s;
    position: relative;
}
#coolgoods2023 ul[class^="col_"] > li a{
    padding-bottom:15px;
}
#coolgoods2023 ul[class^="col_"] > li:nth-child(2n){
    margin-right:0;
}
#coolgoods2023 ul[class^="col_"] > li:hover{
    background:#ffffff3b;
}
/******** キャッチコピーアイコン ********/
#coolgoods2023 ul[class^="col_"]  li div.item_icon{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    z-index: 2;
    background: #9a8b1f;
    color: #ffffff;
    padding: 4px 7px;
}

/******** 内容 dl ********/
#coolgoods2023 ul[class^="col_"]  li dl{
    /*background: #fff;*/
    vertical-align: top;
    padding:0;
    border-radius: 5px;
    margin:0;
    position: relative;
}


/******** アイコン ********/
#coolgoods2023 ul[class^="col_"] dl dd.icon ul > li{
    display: inline-block;
    color:#373a3d;
    font-size: 13px;
    padding:  1px 8px;
    width: auto;
    margin: 0 0 3px 0;
    /*background: #fff;*/
    border: 1px solid;
    
}
/******** 商品名 ********/
#coolgoods2023 ul[class^="col_"] li dd.txt{
    font-size:17px;
    margin:24px 0 8px 0;
    color: #373a3d;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.3em;
    transition: all 0.3s;
}


/******** ご購入はこちらボタン *********/
#coolgoods2023 ul[class^="col_"] dl dd.btn {
    
    font-size: 14px;
    margin: 0 auto;
    border-radius: 50px;
    position: relative;
    padding: 4px 0;
    width: 62%;
    color: #fff;
    transition: all 0.3s;
    border: 2px solid;

}

/*背景色*/
#coolgoods2023 section:nth-child(odd) ul[class^="col_"] dl dd.btn{
    background: #76cfdb;
    border: 2px solid #76cfdb;
}

#coolgoods2023 section:nth-child(even) ul[class^="col_"] dl dd.btn {
    background: #5eb2e2;
    border: 2px solid #5eb2e2;
}
/*背景色 hover*/
#coolgoods2023 section:nth-child(odd) ul[class^="col_"] li:hover dl dd.btn {
    background: #fff;
    color:#76cfdb !important;
}
#coolgoods2023 section:nth-child(even) ul[class^="col_"] li:hover dl dd.btn {
    background: #fff;
    color:#5eb2e2 !important;
}

/*矢印*/
#coolgoods2023 ul[class^="col_"] dl dd.btn::after{
    font-family: 'Material Icons';
    font-size: 1.5em;
    position: absolute;
    content: "expand_more";
    transform: rotate(270deg);
    bottom:18%;
    right: 5%;
    transition: all 0.3s;
    color:#fff;
}

#coolgoods2023 ul[class^="col_"] li:hover dl dd.btn::after{
    right: 3%;
  
}

#coolgoods2023 section:nth-child(odd)  ul[class^="col_"] li:hover dl dd.btn::after{
    color:#76cfdb !important;
  
}
#coolgoods2023 section:nth-child(even)  ul[class^="col_"] li:hover dl dd.btn::after{
    color:#5eb2e2 !important;
  
}




/******** おすすめ商品枠 *********/
#coolgoods2023 .item_osusume {
    border: 2px solid #ffffff9c;
    margin: 90px 40px 0 40px;
    padding-bottom: 30px;

}

/*-----------------------------------------------*/
/*スライダー　シーン画像*/
/*-----------------------------------------------*/

#coolgoods2023 .slick-prev {
    left: -30px!important;
}
#coolgoods2023 .slick-next {
	right: -18px!important;
}
#coolgoods2023 .slick-prev, 
#coolgoods2023 .slick-next {
	 position: absolute;
	 top: 50%;
	 cursor: pointer;
	 outline: none;
	 border-top: 2px solid #fff;
	 border-right: 2px solid #fff;
	 height: 10px;
	 width: 10px;
	 z-index: 20;
}
#coolgoods2023 .slick-prev {
	 left: 3% !important;
	 transform: rotate(-135deg);
}
#coolgoods2023 .slick-next {
	 right: 5% !important;
	 transform: rotate(45deg);
}

#coolgoods2023 .slick-dots{
     bottom:-30px !important;
}

#coolgoods2023 .slick-dots li {
   display:inline-block;
   margin:0 !important;
   width: unset !important;
}

#coolgoods2023 .slick-track {
	display: flex!important;
}
#coolgoods2023 .slick-slide {
	height: auto !important;
	display: flex;
	margin-right:0;
}
  
#coolgoods2023 .slick-prev:before,
#coolgoods2023 .slick-next:before{display:none;}


#coolgoods2023 .slick-dots li button:before{
    content: '';
    border-radius: unset;
    width: 15px;
    height: 3px;
    margin: 0 6px;
    background-color: #222;
    opacity: 0.2;
}

#coolgoods2023 .slick-dots li.slick-active button:before {
    opacity: .75;
    background-color:#222;
}






/*-----------------------------------------------*/
/*価格プロ*/
/*-----------------------------------------------*/
#coolgoods2023 ul[class^="col_"] dl dd.price{
    margin:1% 0 3% 0;
}

#coolgoods2023 .buy_price {
    display: inline-block;
}

#coolgoods2023 .buy_price li{
	display: inline;
 }
#coolgoods2023 li.motoprice,
#coolgoods2023 span.spesicalprice {
	display: none;
}

#coolgoods2023 li.price {
	color: #373a3d !important;
	font-size: 30px;
	border: none;
	font-weight: bold;
	margin:0;
	background: none;
	letter-spacing: 1px;

}
#coolgoods2023 li.intax  {
	display:none !important;

}
#coolgoods2023 ul.col_1 li dl >div dd.price{/*1カラム*/
    display: block;
    margin-left: 20px;
}
#coolgoods2023 ul.col_3 dd.size .price {/*3カラム*/
	    width:62%;
}
 
/*-----------------------------------------------*/
/*その他はこちら*/
/*-----------------------------------------------*/

#coolgoods2023 ul[class^="cate-link_"]{
	margin:0 auto;
	text-align:center;
	width: 90%;
}

#coolgoods2023 ul[class^="cate-link_"] li a{
	font-size: 16px;
    display: block;
    padding: 12px 0;
    text-decoration: none;
    position: relative;
    border-radius: 5px;
    background: #fff;
}

/*テキスト色*/
#coolgoods2023 section:nth-child(odd) ul[class^="cate-link_"] li a{
    color: #76cfdb;

}
#coolgoods2023 section:nth-child(even) ul[class^="cate-link_"] li a{
    color:#5eb2e2;

}

#coolgoods2023 ul[class^="cate-link_"] li {
    display: inline-block;
}

#coolgoods2023 .cate-link_1 li {/*1カラム*/
	 width: 50%;
}
#coolgoods2023 .cate-link_2 li {/*2カラム*/
	 width: calc((100% - 8%) /2);
	 margin-right:3%;
}
#coolgoods2023 .cate-link_3 li {/*3カラム*/
	 width: calc((100% - 74px) /3);
	 margin-right:10px;
}
#coolgoods2023 ul[class^="cate-link_"] li:last-child {
	margin-right:0;

}

#coolgoods2023 ul[class^="cate-link_"] li a::after{
	font-family: 'Material Icons';
    font-size: 1.5em;
    position: absolute;
    content: "expand_more";
    transform: rotate(270deg);
    bottom:23%;
    right:5%;
    transition: all 0.3s;
}

#coolgoods2023 ul[class^="cate-link_"] li a:hover{
    color:#fff !important;

    background: #a2abb0;
}
#coolgoods2023 ul[class^="cate-link_"] li a:hover::after{
    right:3%;
    color:#fff !important;
}

/*-----------------------------------------------*/
/*おすすめ特集*/
/*-----------------------------------------------*/

#coolgoods2023 .osusume ul{
	margin:0 auto;
	text-align:center;
	width: 95%;
}

#coolgoods2023 .osusume ul li {
	 width: calc((100% - 6%) /2);
	 margin:0 1% 1% 0;
	 display: inline-block;
}

#coolgoods2023 .osusume ul li:nth-child(2n){
	 margin-right:0;
}


/*-----------------------------------------------*/
/*ライトナビ*/
/*-----------------------------------------------*/
#coolgoods2023 #elevator{
    position: fixed;
    z-index: 1;
    bottom: 0;
    height: 85vh;
    right: 0vw;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1em;
    opacity: 0; 
    text-align: center;
    transition: all 0.3s;
    
}

   #coolgoods2023 #elevator li{border-bottom: 1px dashed #b8ced6;}
   #coolgoods2023 #elevator li:first-child{border-top: 1px dashed #b8ced6;}
   #coolgoods2023 #elevator li a {color: #222222;text-align: center; margin: 0; padding: 0;font-size: 14px;}
   #coolgoods2023 #elevator li a:after{display:none;}
   #coolgoods2023 #elevator li a:hover h4{color: #60aaaa;}
   #coolgoods2023 #elevator ul{
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0;
    list-style: none;
    background:#ffffffbf;
}

#coolgoods2023 #elevator ul li a{
    display: block;
    text-decoration: none;
    color: #fff;
    position: relative;
    padding:15px 20px;
    font-size: 19px;
    line-height: 1.2em;
    transition: all 0.3s;
}

#coolgoods2023 #elevator ul li:nth-child(1) a{
    background:#87d9e4;
}
#coolgoods2023 #elevator ul li:nth-child(2) a{
    background: #77b9df;
}
#coolgoods2023 #elevator ul li:nth-child(3) a{
    background: #fff;
    font-size: 14px;
    color: #757575;
}


#coolgoods2023 #elevator ul li a span{
    display: block;
    font-size: 14px;
}


#coolgoods2023 #elevator ul li a:hover{
    background: #f2f9fa;
}


#coolgoods2023 #elevator ul li:nth-child(1) a:hover{
    color: #70c7be !important;
}
#coolgoods2023 #elevator ul li:nth-child(2) a:hover{
    color:#7db7df !important;
}
#coolgoods2023 #elevator ul li:nth-child(3) a:hover{
    color: #545353 !important;
}