@charset "utf-8";
/* CSS Document */

#contents-Allbox{ width: 100%; overflow: hidden; padding:0; background-color: #AE1F24; }
#contents-Allbox #inline-box{ width:100%; max-width: 1000px; margin: 0rem auto;	color:#333333; text-align: center; font-size: 120%;	line-height: 2.5rem; padding:0.5em;}

#contents-Allbox #inline-box a{ text-decoration: none;}
#contents-Allbox #inline-box .menu{ font-size: 2.2rem; letter-spacing: 0.3rem; margin: 1rem auto 0.5rem; }
#contents-Allbox .fa-arrow-alt-circle-down{ margin: 0.2rem auto; color:#de0a00; font-size:120%;}
#contents-Allbox #inline-box img{ width:100%; border:none; }
#contents-Allbox #inline-box h1,h2,h3,h4,h5,h6,h7,h8{ margin: 0.2rem auto 1.6rem; font-size:130%; font-weight:bold; line-height: 3.3rem; }

.h2-spring{ position: relative; padding: 0.6em; background: #f3f4d5;}
.h2-spring:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #f3f4d5; width: 0; height: 0;}

.h3-spring{ position: relative; line-height: 1.4; padding:0.25em 1em; margin: 1em 0; display: inline-block; top:0;}
.h3-spring:before, .h3-spring:after { position: absolute; top: 0; content:''; width: 8px; height: 100%; display: inline-block;
}
.h3-spring:before { border-left: solid 1px black; border-top: solid 1px black; border-bottom: solid 1px black; left: 0;}
.h3-spring:after { content: ''; border-top: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black;  right: 0;}

.h3-fukidashi{ position: relative; padding: 0.6em; background: #cc0000; width: 80%; color: #ffffff; font-size: 1.1em; margin: 2em auto 1.5em; border-radius: 5px;}
.h3-fukidashi:after { position: absolute; content: ''; top: 100%; left: 1.3em; border: 10px solid transparent; border-top: 15px solid #cc0000; width: 0; height: 0;}


.hahanohi-img{ margin: 0 calc(50% - 50vw); width: 100vw; overflow: hidden; background-color: #ffffff; }

.catch{ font-size: 2rem; text-align: center; margin: 0 auto 10px; border-bottom: solid 2px #333333; width:70%;}
.introduction{ width:90%; background-color: #ffffff;/*rgba(255,255,255,0.9);*/ padding: 1rem; margin: 1rem auto 1.5rem; font-size: 90%;}
.introduction span{ color:#de0a00; font-weight: bold;}
.comment{ width:90%; padding: 1rem; margin: 1rem auto 1.5rem; font-size: 90%; text-align: left; }
.comment2{ text-align: center; }

#menu-contents{ width:98%; list-style: none; padding: 0; margin: 0 auto; display:flex; flex-wrap:wrap;}
/*#menu-contents li{ width: calc(100% / 3 - 10px); background-color: #FFFFFF; text-decoration: none; text-align: center; color: #333333; font-size:90%; font-weight:bold; padding:1rem 0; margin-bottom: 1rem; border-radius: 0.8rem; box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 2px 2px rgba(0, 0, 0, 0.19);}*/
#menu-contents li{ margin-right: 10px;}
#menu-contents li:last-child{ margin-right: 0px;}
#menu-contents,#menu-contents2 a{ display: block;}
#menu-contents a:link{ color: #333333; }
#menu-contents a:visited{ color: #333333; }

#menu-contents2{ width:98%; list-style: none; padding-left: 0; margin: 0 auto; display:flex; flex-wrap:wrap;}
#menu-contents2 li{ background-color: #990000; color:#FFFFFF; padding:0.5em 0; margin-bottom: 1.5em; }
#menu-contents2 li:nth-child(2n+1){ width:47%; margin-right: 4%;}
#menu-contents2 li:nth-child(2n){ width:47%; margin-right: 0;}
#menu-contents2 a:link{ color:#FFFFFF;}
#menu-contents2 a:visited{ color:#FFFFFF;}


.itembox_1,.itembox_2,.itembox_3{ width:98%; list-style: none; margin: 0 auto; padding: 0 0 3rem 0; position:relative; }
.itembox_2fit{ width:100%; list-style: none; margin: 0 auto; padding: 0; position:relative; }
.itembox_2shoplink{ list-style: none; margin: 0 auto; padding: 0 ; position:relative; }
.itembox_2,.itembox_3,.itembox_2fit,.itembox_2shoplink,.itembox_2list{ display:flex; flex-wrap:wrap; }
.itembox_2list{ width:100%; list-style: none; margin: 0 auto 1em; padding: 0; position:relative; }
.itembox_2list li{ margin-bottom: 2.5em; background: #FFFFFF;}
.itembox_2list li:nth-child(2n+1){ width:49%; margin-right: 2%;}/*奇数要素*/
.itembox_2list li:nth-child(2n){ width:49%; margin-right: 0;}/*偶数要素*/
/*.itembox_3 { margin-top: 1.5rem;}*/


.moreLink {
	display: block;
	width:90%;
	text-decoration: none;
	text-align: center;
	color: #333333;
	background: #f0c538;/*背景色*/
	border-bottom: solid 3px #be8126;/*少し濃い目の色に*/
	border-radius: 5px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-weight: bold;
}
.moreLink:active {
 	border-bottom: solid 2px #f0c538;
 	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.moreLink:link{ color: #333333; }
.moreLink:visited{ color: #333333; }

.moreLink2 {
	display: block;
	width:90%;
	padding: 1.5rem 0;
	margin: 0.8rem auto 2rem;
	text-decoration: none;
	text-align: center;
	color: #333333;
	background: #f0c538;/*背景色*/
	border-bottom: solid 3px #be8126;/*少し濃い目の色に*/
	border-radius: 5px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-weight: bold;
	letter-spacing: 0.1rem;
}
.moreLink2:active {
 	border-bottom: solid 2px #f0c538;
 	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.moreLink2:link{ color: #333333; }
.moreLink2:visited{ color: #333333; }

.arrow-icon {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: #333333;  
  transform: rotate(45deg);
  margin-left:0.5rem;
}
.moreLink2 > .arrow-icon { border-color: #333333; }

.moreLink3{ background-color: #cc6666; color:#FFFFFF; margin: 2em auto 0em;}
.moreLink3 a:link{ color:#FFFFFF;}
.moreLink3 a:visited{ color:#FFFFFF;}
.moreLink3 > .arrow-icon { border-color: #FFFFFF; }

/*福袋用ページリンクボタン*/
.moreLink4{ background-color: #990000; color:#FFFFFF; margin: 2em auto 0em;}
.moreLink4 a:link{ color:#FFFFFF;}
.moreLink4 a:visited{ color:#FFFFFF;}
.moreLink4 > .arrow-icon { border-color: #FFFFFF; }

.itembox_1 { width:95%; padding:5%; margin:0 auto 1rem; background-color: #FFFFFF;}
.itembox_1fit { width:100%; padding:0; margin:0 auto 3em; background-color: #FFFFFF; }
.itembox_2 li:nth-child(odd){ margin-right: 10px;}
.itembox_2 li{ width: calc(100% / 2 - 5px); padding:10px; background-color: #FFFFFF;}
.itembox_1shoplink,.itembox_2shoplink{ width:98%; line-height: 0; margin: 0 auto;}
.itembox_1shoplink{ padding: 0 0 8px 0; margin-bottom: 30px; background-color: #FFFFFF;}
.itembox_2shoplink li{ width: calc(100% / 2 - 0px); padding: 0; margin: 0;}
.itembox_3 li{ width: calc(100% / 3 - 0px);}
.itembox_2fit li{ width: calc(100% / 2 - 0px); padding:0px; background-color: #FFFFFF;}
/*.itembox_1 img,.itembox_1fit img,.itembox_2 li,.itembox_3 li{ box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;}*/
.item-img{ position:relative; }
.discount-rate{ position:absolute; top:-5px; right:-5px; background-color: #be0817; color:#FFFFFF; padding: 0.2rem 0.7rem; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; }
.before-discount span{ font-size:70%;}
.sale-price{ color:#de0a00; margin-top: 8px; font-size:190%; font-weight: bold;}
.sale-price span{ font-size:40%; font-weight:normal;}

.blank{ width:100%; margin: 5rem auto;}
.itembox_1 > .sizeLink{ margin-bottom: 0;}
.sizeLink{ width:98%; list-style: none; padding: 1rem 0; margin: 5px auto 2rem; }
.sizeLink li{ background-color: #f0c538; text-decoration: none; text-align: center;	color: #333333;}
.sizeLink li:nth-child(even){ margin-right: 0px;}
.sizeLink a{ display: block;}
.sizeLink a:link{ color: #333333; }
.sizeLink a:visited{ color: #333333; }
.soldout{ filter:opacity(60%) grayscale(100%);}

/* pc */ /*768px*/
@media screen and (min-width: 601px) {
	.sp-only{ display:none;}
	.before-discount > span{ padding-right:5px;}
	.moreLink { font-size:1.7rem; padding: 0.5rem 0; margin: 0.5rem auto; letter-spacing: 0.2rem;}
	.sizeLink{ font-size: 80%; display:flex; flex-wrap:wrap;}
	.sizeLink li{ width: calc(100% / 2 - 8px); margin: 5px 10px 7px 0; padding: 8px 0; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19); border-bottom: solid 2px #be8126;}
	.comment2{ font-size:1.3em; line-height: 1.4em; margin-bottom: 2em;}
	.moreLink3 { width:80%; padding: 0.5rem 0; margin: 0.5rem auto; border-radius: 5px;}
	.moreLink4 { width:80%; padding: 0.5rem 0; margin: 0.5rem auto; border-radius: 5px;}
}
/* sp */ /*767px*/
@media screen and (max-width: 600px) {
	.moreLink { font-size: 92%; padding: 0.4rem 0; margin: 0.5rem auto; }
	.sizeLink{ font-size: 85%; width:90%; margin: 0.5rem auto 1rem; font-weight: bold; }
	.sizeLink li{ width:100%; margin: 0 auto 1rem; padding: 1.5rem 0; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19); border-bottom: solid 2px #be8126;}
	.comment2{ margin-bottom: 1em; }
	.moreLink3 { font-size: 0.9em; width:90%; padding: 0.6rem 0; margin: 0.7rem auto; border-radius: 6px;}
	.moreLink4 { font-size: 0.9em; width:90%; padding: 0.6rem 0; margin: 0.7rem auto; border-radius: 6px;}
}