@charset "UTF-8";

.spTopBtm20 { padding: 6% 0; }

/*--- subTitle01 ----------------------------------------------------------------- */

.subTitle01 {
	text-align: center;
	margin: 0 0 2em 0;
}
.subTitle01 h3 {
	font-size: 28px;
	font-weight: bold;
	line-height: 1.4;
	margin: 0;
	padding: 0 0 0.4em 0;
}
.subTitle01line {
	width: 70%;
	text-align: center;
	margin: 0 auto;
	border-bottom: 1px solid #000;
}
.subTitle01 h3 img {
	max-width: 212px;
	width: 100%;
	height: auto;
	margin: 0 6px 0 0;
}
.subTitle01 p {
	 font-family:'Noto Sans JP', sans-serif; "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro";
	font-size: 16px;
	font-weight:400;
	font-weight: bold;
	margin: 0;
	padding: 0.8em 0 0 0;
}

@media all and (max-width: 767px) {
	.subTitle01 h3 {
		font-size: 18px;
		padding: 0 0 0.2em 0;
	}
}

@media all and (max-width: 767px) {
	.subTitle01 h3 {
		font-size: 20px;
		padding: 0 0 0.4em 0;
	}
	.subTitle01 h3 img {
		max-width: 170px;
		margin: 0 6px 5px 0;
	}
	.subTitle01 p {
		font-size: 14px;
	}
}


/* --------------------------------------------
 *            restockArea saleArea
 * -------------------------------------------- */

.itemBox {
	margin: 0;
	padding: 0;
	position: relative;

animation-name:wiggle;-webkit-animation-name:wiggle;animation-duration:10s;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite}
 @keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
 @-webkit-keyframes wiggle{0%,100%{-webkit-transform:rotate(-2deg)}50%{-webkit-transform:rotate(2deg)}
}

.itemBox img {
	max-width: 100%;
	height: auto;
	border-style: none;
	vertical-align: bottom;
	border:3px solid #fff;
	filter: drop-shadow(4px 4px 3px rgba(0,0,0,.2));

}


.saleIcon {
	top: 5px;
	left: 5px;
	position: absolute;
	z-index: 201;
}
.saleIcon img {
	max-width: 70px;
	width: 100%;
	height: auto;
	border:none !important;
}

/* @media only screen and (max-width: 640px){
.saleIcon img{
	max-width: 50px;
	width: 100%;
	height: auto;
	}
} */

@media (min-width: 960px) and (max-width: 1441px){
.saleIcon img{
	max-width: 50px;
	width: 100%;
	height: auto;
	}
}

@media (min-width: 600px) and (max-width: 959px){
.saleIcon img{
	max-width: 50px;
	width: 100%;
	height: auto;
	}
}

@media screen and (min-width: 414px) and (max-width: 599px){
.saleIcon img{
	max-width: 50px;
	width: 100%;
	height: auto;
	}
}

@media screen and (min-width: 375px) and (max-width: 413px){
.saleIcon img{
	max-width: 40px;
	width: 100%;
	height: auto;
	}
}

@media screen and (max-width: 320px){
.saleIcon img{
	max-width: 35px;
	width: 100%;
	height: auto;
	}
}

/*--- imgMask ----------------------------------------------------------------- */

.caption {
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
	color: #696969;
	padding-top: 10px;
	margin-bottom: 20px;
	font-family: 'Noto Sans JP', sans-serif;font-weight:400;
}

@media all and (max-width: 767px) {
	.itemBox {
		max-width: 320px;
		text-align: center;
		margin: 0 auto;
	}
}

/*--- pict ----------------------------------------------------------------- */

/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 5px; }

/* .flex-col4 .flex-child img {border:0px solid #BCB5B5} */

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 50px) / 5 ); }

/* 最終行は両端揃えにしない */
.flex-col4::before,
.flex-col4::after { content: ""; }
.flex-col4::before { order: 1; }

/* レスポンシブ対応 */
@media screen and (min-width: 1441px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 50px) / 5 ); }
}

/* 1440px以下で4列 → 3列 */
@media screen and (max-width: 1440px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 5 ); }
}

/* 1280px以下で4列 → 3列 */
@media screen and (max-width: 1280px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 5 ); }
}

/* 1024px以下で4列 → 3列 */
@media screen and (max-width: 1024px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 4 ); }
}

/* 960px以下で4列 → 3列 */
@media screen and (max-width: 960px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 4 ); }
}

/* 768px以下で4列・3列 → 2列 */
@media screen and (max-width: 768px) {
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}

/* 599px以下で全て2列 .flex-col4 .flex-child { width: 100%; } */
@media screen and (max-width: 599px) {
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 2 ); }
}



/* 加古川店リンク */
@media screen and (max-width: 320px){
.button-box{text-align: center; width:100%;margin:0;}
.button-box div{padding-bottom:5px;font-size: 20px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 100%;height: 80px;border-radius: 15px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 35px;color: #fff;font-size: 24px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;position:relative;top:6px;}
}
@media screen and (min-width: 375px) and (max-width: 413px){
.button-box{text-align: center; width:100%;margin:0;}
.button-box div{padding-bottom:5px;font-size: 22px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 100%;height: 80px;border-radius: 15px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 35px;color: #fff;font-size: 26px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;position:relative;top:6px;}
}
@media screen and (min-width: 414px) and (max-width: 599px){
.button-box{text-align: center; width:100%;margin:0;}
.button-box div{padding-bottom:5px;font-size: 25px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 100%;height: 80px;border-radius: 15px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 35px;color: #fff;font-size: 28px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;position:relative;top:6px;}
}
@media screen and (min-width: 600px) and (max-width: 768px){
.button-box{text-align: center; width:100%;margin:0;}
.button-box div{padding-bottom:5px;font-size: 36px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 100%;height: 80px;border-radius: 15px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 80px;color: #fff;font-size: 28px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;}
}
@media screen and (min-width: 769px) and (max-width: 960px){
.button-box{text-align: center; width:100%;margin:10px 0;}
.button-box div{padding-bottom:5px;font-size: 45px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 100%;height: 100px;border-radius: 20px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 100px;color: #fff;font-size: 35px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;}
}
@media screen and (min-width: 961px) and (max-width: 1024px){
.button-box{text-align: center; width:100%;margin:10px 0;}
.button-box div{padding-bottom:10px;font-size: 45px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 100%;height: 100px;border-radius: 20px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 100px;color: #fff;font-size: 38px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;}
}
@media screen and (min-width: 1025px) and (max-width: 1280px){
.button-box{text-align: center; width:100%;margin:20px 0;}
.button-box div{padding-bottom:10px;font-size: 50px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 90%;height: 100px;border-radius: 20px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 100px;color: #fff;font-size: 40px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;}
}
@media screen and (min-width: 1281px) and (max-width: 1440px){
.button-box{text-align: center; width:100%;margin:20px 0;}
.button-box div{padding-bottom:10px;font-size: 60px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 90%;height: 100px;border-radius: 20px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 100px;color: #fff;font-size: 45px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;}
}
@media screen and (min-width:1441px) {
.button-box{text-align: center; width:100%;margin:20px 0;}
.button-box div{padding-bottom:10px;font-size: 60px;color: #333333;font-family: 'M PLUS Rounded 1c', sans-serif;}
.button {display: inline-block;width: 80%;height: 100px;border-radius: 20px;text-align: center;background-color: #3A322F;}
.button p {text-decoration: none;line-height: 100px;color: #fff;font-size: 45px;font-family: 'M PLUS Rounded 1c', sans-serif;text-align: center;}
}



.button::before,
.button::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}

.button,
.button::before,
.button::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.button:hover {
background-color: #816F69;
}



.border_radius {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.clearBoth { clear: both; }