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

/*-----------------------------------------------*/
/*ベース*/
/*-----------------------------------------------*/
#kafun2023{
    width: 1000px;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    padding:0 0 2vw 0;
    }
    
#kafun2023 .smp{
    display: none !important;
    }
    
#kafun2023 img{
    width: 100%
    }
/*-----------------------------------------------*/
/*看板下テキスト*/
/*-----------------------------------------------*/
#kafun2023 .title_txt {
    font-size: 18px;
    margin: 0;
    background: #5cb1b2;
    padding: 15px 0;
    color: #fff;
}
/*-----------------------------------------------*/
/*メイン見出し*/
/*-----------------------------------------------*/
#kafun2023 .sub {
    margin:0;
    padding: 45px 0 0 0;
 
}
#kafun2023 .top{
    margin-top: 50px !important;
}

#kafun2023 .sub > p{
    font-size: 17px;
}

#kafun2023 .sub h3{
	position:relative;
	display:block;
	padding:15px 0;
	font-size: 30px;
	color:#dcb740;
}
#kafun2023 .sub h3:before, #kafun2023 .sub h3:after{
	content:"";
	display:block;
	width:35%;
	height:4px;
	border-top:1px dashed #dcb740;
	position:absolute;
	top:0;
}
#kafun2023 .sub h3:before{left:105px;}
#kafun2023 .sub h3:after{right:105px;}
#kafun2023 .sub h3 span{
	display:block;
	width:4px;height:4px;
	border:2px solid #dcb740;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	position:absolute;
	top:-4px;
	left:50%;
	margin-left:-4px;
}

#kafun2023 .sub h3 div{
	font-size: 38px;
	display: inline-block;
}

/*-----------------------------------------------*/
/*カテゴリ間のメニュー*/
/*-----------------------------------------------*/

#kafun2023 #menu {margin:30px 0 0 0;}

#kafun2023 #menu ul{text-align: center;margin: 0 auto;}

#kafun2023 #menu li a{
    display:block;
    padding: 0 0 25px 0;
    color:#fff;
    position: relative;
}

#kafun2023 #menu li{
    display: inline-block;
    text-align: center;
    width: calc((100% - 22px )/ 3);
    margin: 0 7px 10px 0;
    box-sizing: border-box;
    background: #60aaaa;
    border: 2px solid #60aaaa;
    border-radius: 6px;
    background-image: radial-gradient(#ffffff29 0px, transparent 1px);
    background-size: 6px 6px;
}

#kafun2023 #menu li:hover{
    background: #fff;
}
#kafun2023 #menu li:nth-child(3n){margin-right:0;}


#kafun2023 #menu a h5 {
    color: #fff;
    font-size: 21px;
    padding:0;
    margin: 0 0 10px 0;
}


#kafun2023 #menu li p{
    font-size: 14px;
    color: #fff;
    background: #ffffff2e;
    padding: 7px 0;
    margin: 0 0 15px 0;
    border-radius: 6px 6px 0 0;
}

#kafun2023 #menu li a:after {
    font-family: 'Material Icons';
    font-size: 1.5em;
    position: absolute;
    content: "expand_more";
    transform: rotate(0deg);
    bottom:0;
    right:0;
    left:0;
    color: #fff;
}


#kafun2023 #menu li a:hover h5,
#kafun2023 #menu li a:hover p,
#kafun2023 #menu li a:hover:after{
    color:#60aaaa;
}

#kafun2023 #menu li a:hover p{
   background: #e8f2f2;
}



/*-----------------------------------------------*/
/*ブロック別背景*/
/*-----------------------------------------------*/

#kafun2023 [class^="bg"] {
    padding: 0 80px 25px;
}

#kafun2023 .bg1 {
    background: #f6fbf7;
}
#kafun2023 .bg2 {
    background:#e6f3f4;
    background-image: radial-gradient(#ffffff29 1px, transparent 1px);
    background-size: 6px 6px;
}


/*-----------------------------------------------*/
/*見出し*/
/*-----------------------------------------------*/

#kafun2023 h4{
    font-size: 33px;
    padding:50px 0 20px 0;
    color: #5cb1b2;
    margin:0;
    position: relative;
}
#kafun2023 h4 span{
    font-size: 19px;
    font-family: 'Satisfy', cursive;
    display: block;
    margin-top: 7px;

}
/*
#kafun2023 h4:after{
    position: absolute;
    content: '';
    background: #5cb1b2;
    bottom:0;
    left: calc(50% - 7%);
    width: 14%;
    height: 3px;
}*/

/*-----------------------------------------------*/
/*ライトナビ*/
/*-----------------------------------------------*/
#kafun2023 #elevator{
    position: fixed;
    z-index: 1;
    bottom: 0;
    height: 85vh;
    right: 1vw;
    transition: all .3s;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1em;
    opacity: 0; 
}
#kafun2023 #elevator li:first-of-type{padding-top: ;}
    #kafun2023 #elevator li{border-bottom: 1px solid #222222;
        padding-bottom: 1em;
        margin-bottom: 1em;}
    #kafun2023 #elevator li a h4{color: #222222;text-align: center; margin: 0; padding: 0;font-size: 14px;}
    #kafun2023 #elevator li a h4:after{display:none;}
    #kafun2023 #elevator li a:hover h4{color: #60aaaa;}
    #kafun2023 #elevator ul{
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0;
    list-style: none;
}

#kafun2023 #elevator ul li a{
    display: block;
    text-decoration: none;
    color: #333;
}

#kafun2023 #elevator ul li a{
   position: relative;
}
/*-----------------------------------------------*/
/*カラム*/
/*-----------------------------------------------*/
/*共通*/
#kafun2023 ul[class^="col_"] {
    text-align: center;
    margin:0 0 30px 0;
}

#kafun2023 ul[class^="col_"]  > li a{
    display: block;
    padding:8px 10px 10px 10px;
}

#kafun2023 ul[class^="col_"] > li{
    display: inline-block;
    background: #fff;
    vertical-align: top;
    padding:0;
}


#kafun2023 ul[class^="col_"] > li:hover{
    box-shadow: 0px 0px 10px #c1d5d8;
}

/*商品名*/
#kafun2023 ul[class^="col_"] > li dd.txt{
    font-size:19px;
    margin:10px 0 14px 0;
    line-height: 1.3em;
    color: #60aaaa;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dashed;
    padding: 0 0 10px 0;    
}

/*型番*/
#kafun2023 ul[class^="col_"] > li dd.txt span{
    font-size: 12px;
    background: #eef7f7;
    padding:0 5px 1px 5px;
    display:inline-block;
    margin: 0 0 0 5px;

}

/*商品説明文*/
#kafun2023 ul[class^="col_"] > li dd.comment{
    font-size:14px;
    margin:10px 0;
    line-height: 1.4em;
    color: #383838;
    font-weight: 300;
}
/*アイコン*/
#kafun2023 ul[class^="col_"] dl dd.icon  ul > li{
    display: inline-block;
    color: #fff;
    font-size: 13px;
    padding:  1px 8px 2px 8px;
    width: auto;
    margin: 0;
    background: #383838;
    border: 1px solid;
}

#kafun2023 ul[class^="col_"]  > li:hover{
    opacity: 0.9;
    }

/*********************** カラム別 ***********************/
#kafun2023 ul.col_2 li:nth-child(2n),
#kafun2023 ul.col_3 li:nth-child(3n),
#kafun2023 ul.col_4 li:nth-child(4n){
    margin-right:0;
    }

#kafun2023 ul.col_1 > li{/*1カラム*/
    width: 100%;
    margin: 0;
}

#kafun2023 ul.col_1 li dl >div {/*1カラム flex*/
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
#kafun2023 ul.col_1 li dl >div dd.icon{/*1カラム アイコン*/
    width: auto;
}

#kafun2023 ul.col_1 li dl >div dd.price{/*1カラム 価格*/
    display: block;
    margin-left: 20px;
}

#kafun2023 ul.col_2 > li{/*2カラム*/
    width: calc((100% - 20px )/ 2);
    margin: 0 16px 0 0;
}

#kafun2023 ul.col_3 > li{/*3カラム*/
    width: calc((100% - 12% )/ 3);
    margin: 0 8px 23px 0;
}

#kafun2023 ul.col_4 > li{/*4カラム*/
    width: calc((100% - 14% )/ 4);
    margin: 0 6px 20px 0;
}


/*-----------------------------------------------*/
/*価格プロ*/
/*-----------------------------------------------*/

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

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

#kafun2023 li.price {
	color: #222;
	font-size: 26px;
	border: none;
	font-weight: bold;
	margin:0;
	background: none;
	letter-spacing: 1px;

}
#kafun2023 li.intax  {
	font-size: 11px;
	color:#222;
	background: none;
	margin: 0 !important;

}



/*-----------------------------------------------*/
/*その他はこちら*/
/*-----------------------------------------------*/

#kafun2023 ul[class^="cate-link_"]{
	margin:20px auto;
	text-align:center;
}

#kafun2023 ul[class^="cate-link_"] li a{
	font-size: 16px;
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #fff;
    position: relative;
    border-radius: 50px;
    margin: 0 15px;
    background: #97cbcb;
    border: 2px solid #97cbcb;
}

#kafun2023 ul[class^="cate-link_"] li {
    display: inline-block;
    margin: 0 0 10px 0;
}

#kafun2023 .cate-link_1 li {/*1カラム*/
	 width: 50%;
}
#kafun2023 .cate-link_2 li {/*2カラム*/
	 width: calc((100% - 40px) /2);
}
#kafun2023 .cate-link_3 li {/*3カラム*/
	 width: calc((100% - 19px) /3);
}


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

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



/*-----------------------------------------------*/
/*トップページ*/
/*-----------------------------------------------*/

#kafun2023 .pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
	z-index: 9999;
	
}
#kafun2023 .pagetop a {
  	display: table;
	width: 70px;
	height: 70px;
	
	
}
#kafun2023 .pagetop a span {
	display: table-cell;
    text-align: center;
	vertical-align: middle;
	color: #222;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background-color: #eceef3;
	border-radius: 80px;
    line-height: 1.3em;
	
}
#kafun2023 .pagetop a:hover span {
	background-color: #c8c6bf;
	transform: translateY(-2px);
}

/*-----------------------------------------------*/
/*アニメーション*/
/*-----------------------------------------------*/
#kafun2023 #menu li,
#kafun2023 .pagetop a span,
#kafun2023 ul[class^="col_"]  > li,
#kafun2023 ul[class^="cate-link_"] li a:after,
#kafun2023 ul[class^="col_"] .btn > li p,
#kafun2023 ul[class^="col_"] .btn > li a:hover::after{
    transition: 0.3s;
    }


#kafun2023 .smp{display: none;}