/* カスタマイズ用CSS */
/*カレンダー*/
.ec-calendar .ec-calendar__today:before {
    background: #ffd5ec
}
/*商品ページ*/
.ec-sliderItemRole .slideThumb{
    margin-bottom: 0px;
    margin-top: 25px;
}
/*全体*/

.ec-footerRole{
 background: #f8e0e8;
 color: #696969;
}
.ec-footerTitle__logo {
 color: #696969;
}
.ec-footerTitle__copyright {
     color: #696969;
}
.ec-footerNavi__link{
     color: #696969;
}

.ec-headerSearch .ec-headerSearch__keyword {
    position: relative;
    color: #525263;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
}

.ec-headerSearch .ec-headerSearch__keyword {
    float: right;
    width: 90%;
     border-bottom-left-radius: inherit;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.rec_Role {
            /* padding-left: 40px; */
            color: black;
            background: #F8F8F8;
            width: 90%;
            align-items: center;
            justify-content: center;
            margin-left: 5%;
            padding-bottom: 20px;
            padding-top: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .rec-role_sub {
            margin: 0 auto;
            padding-left: 20px;
            padding-right: 20px;
            box-sizing: border-box;
            font-size: 16px;
            line-height: 1.4;
            color: #525263;
            -webkit-text-size-adjust: 100%;
            width: 100%;
            max-width: 1130px;
        }
        .rec_secHeading {
            margin-bottom: 15px;
            color: black;
        }
        
        .rec_secHeading_ja {
             font-size: 15px;
            font-weight: normal;
            letter-spacing: .15em;
            vertical-align: 2px;
            padding: 15px;
        }
        .flex-container_rec_sp {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            justify-content: center;
        }
        .flex-rec_sp {
            margin: 5px;
            box-sizing: border-box;
            flex-basis: 30%;
            order:1;
            text-align: center;
        }
        
        /*ハンバーガー(スマホ)*/
        .menu-btn {
            position: fixed;
            display: flex;
            height: 35px;
            width: 35px;
            justify-content: center;
            align-items: center;
            z-index: 90;
            background-color: #ffd5ec;
            border-radius:30px;
        }
        .menu-btn span,
        .menu-btn span:before,
        .menu-btn span:after {
            content: '';
            display: block;
            height: 3px;
            width: 20px;
            border-radius: 3px;
            background-color: #696969;
            position: absolute;
        }
        .menu-btn span:before {
            bottom: 8px;
        }
        .menu-btn span:after {
            top: 8px;
        }
        #menu-btn-check {
            display: none;
        }
        #menu-btn-check:checked ~ .menu-btn span {
            background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
        }
        #menu-btn-check:checked ~ .menu-btn span::before {
            bottom: 0;
            transform: rotate(45deg);
        }
        #menu-btn-check:checked ~ .menu-btn span::after {
            top: 0;
            transform: rotate(-45deg);
        }
        #menu-btn-check:checked ~ .menu-content {
            right: 0;/*メニューを画面内へ*/
        }
        #menu-btn-check:checked ~ .menu-content_sp {
            right: 0;/*メニューを画面内へ*/
        }
        .menu-content {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            right: 100%;/*leftの値を変更してメニューを画面外へ*/
            z-index: 80;
            background-color: #ffd5ec;
            transition: all 0.5s;/*アニメーション設定*/
        }
        .menu-content_sp {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            right: 100%;/*leftの値を変更してメニューを画面外へ*/
            z-index: 80;
            background-color: #ffd5ec;
            transition: all 0.5s;/*アニメーション設定*/
            overflow:auto;
            padding-top: 50px;
            text-align: left;
        }
        
        .menu-content ul {
            padding: 70px 10px 0;
        }
        .menu-content ul li {
            border-bottom: solid 1px #ffffff;
            list-style: none;
        }
        .menu-content ul li a {
            display: block;
            width: 100%;
            font-size: 15px;
            box-sizing: border-box;
            color:#ffffff;
            text-decoration: none;
            padding: 9px 15px 10px 0;
            position: relative;
        }
        .menu-content ul li a::before {
            content: "";
            width: 7px;
            height: 7px;
            border-top: solid 2px #ffffff;
            border-right: solid 2px #ffffff;
            transform: rotate(45deg);
            position: absolute;
            right: 11px;
            top: 16px;
        }
        /*ここまでハンバーガー*/

        .category_box{
            padding:10px;
            width:100%;
            background:#fffacd;
            border:1px solid #999999;
        }
        .sub_category_box{
            position: relative;
            padding:10px;
            width:100%;
            height:100%;
            background:#ffd5ec;
        border:1px solid #cccccc;
        }
        .sub_sub_category_box{
            position: relative;
            padding-top:10px;
            padding-left:20px;
            padding-right: 10px;
            padding-bottom: 10px;
            width:100%;
            background:#fff0f5;
            border:1px solid #cccccc;
        }
        #nolink_a {
            text-decoration: none;
            color: black;
        }
        @media only screen and (max-width: 640px) {
            img.head{
                height: 22px;
            }
        }
        @media only screen and (min-width: 641px) {
            img.head{
                height: 27px;
            }
        }
        .flex-container_sp {
                justify-content: space-between;
                max-width: 1920px;
                margin-left: auto;
                margin-right: auto;
                display: flex;
                flex-wrap: nowrap;
                flex-direction: column;
            }
        .flex-logo_sp {
            margin: 5px;
        	box-sizing: border-box;
        	flex-basis: 30%;
        	order:1;
        	text-align: center;
        }
        .flex-search_sp {
            margin-left: 7%;
            margin-right: auto;
        	box-sizing: border-box;
        	flex-basis: 30%;
        	order:3;
        	align-self: center;
        }
        .flex-sub_sp {
            margin: 10px auto;
            flex-basis: 30%;
            order:2;
        }            

@media only screen and (max-width: 859px) {/*スマートフォン*/
	.info {
		text-align: center;
		margin: 20px auto;
		border-top:1px solid #999999;
		border-bottom: 1px solid #999999;
	}
	.info a {
		display: block;
		color: #222;
		padding: 10px;
		font-size: 12px;
		background-color: #ff9999;
		text-decoration: none;
	}
	div#header{
		background: #ffffff;
		padding: 0px;
		height:100%;
		margin: 0px auto;
		margin-left:auto;margin-right:auto;
	}

	.flex-container {
		justify-content: space-between;
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
	}
	.flex-search {
        margin: 10px auto;
        padding: 5px 10px;
        box-sizing: border-box;
        padding-right:38px;
    }

}
@media only screen and (min-width: 860px) {/*PC*/
	.info {
		text-align: center;
		margin: 20px auto;
	}
	.info a {
		display: block;
		color: #222;
		font-size: 18px;
		padding: 10px;
		background-color: #ff9999;
		text-decoration: none;
	}
	div#header{
		background: #ffffff;
		padding: 10px;
		height:100%;
		text-align: center;
		border: 1px solid #cccccc;
		margin: 0px auto;
		margin-left:auto;margin-right:auto;
		text-decoration: none;
	}
	.flex-container {
		justify-content: space-between;
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.flex-search {
		margin: 10px auto;
		padding: 5px 10px;
		box-sizing: border-box;
		padding-right:38px;
		width:30%;
	}

}
		           
            
	.flex-up {
		flex-basis: 30%;
	}
	.flex-down {
		flex-basis: 30%;
	}

	#space{
		line-width:300%;
	}


	.flex-subcontainer {
		justify-content: space-between;
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flex-up {
		flex-basis: 30%;
	}
	.flex-down {
		flex-basis: 30%;
	}

	/* 子要素(アイテム) */
	.flex-logo {
		margin: 10px auto;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	.flex-sub {
		margin:10px auto;
		padding: 5px 10px;
	}
	
	.slick-slider {
            margin-bottom: 30px;
            width: 100%;
            margin: 0 auto;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

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

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }
        
        
        /*送料テーブル*/
table.shipping_table{
	font-size: 98%;
	color: #696969;
	border-collapse: collapse;
}
table.shipping_table td {
	border: 1px solid #595959;
	border-collapse: collapse;
	text-align: center;
	width: 10rem;
}
table.shipping_table th {
	border: 1px solid #595959;
	border-collapse: collapse;
	text-align: left;
	padding: 5px;
}
td.shipping_table {
	padding: 3px;
	width: 30px;
	height: 25px;
}
th.shipping_table {
	padding: 3px;
	width: 30px;
	height: 25px;
}
th.shipping_table {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}
.shipping_table{
    padding: 10px;
}