#main_contents {
	width:100% !important;
	max-width:100% !important;
}

#Casual div,#Casual p,#Casual span,#Casual figure,#Casual h2, #Casual h3, #Casual ul, #Casual li, #Casual ol, #Casual li { margin:0; padding:0; list-style-type:none; border:0; }

#Casual .pc { display:block !important; }
#Casual .sp { display:none !important; }

#Casual {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	letter-spacing:0.1em;
	text-align:center;
	color:#000;
}
#Casual a {
	text-decoration:none;
}
#Casual img {
	max-width:100% !important;
	height:auto;
}
#Casual > h1 {
	width:100% !important;
	display:block !important;
	text-align:center !important;
	font-size:30px;
	margin:7% auto 2.0em auto !important;
	color:#000;
	font-weight:bold;
	line-height:1.76em;
}
#Casual > h1 > img {
	height:3.0em;
	width:auto;
}
#Casual > h2 {
	width:100% !important;
	display:block !important;
	text-align:center !important;
	font-size:30px;
	margin:7% auto 2% auto !important;
	color:#000;
	font-weight:bold;
}
#Casual > img {
	width:100% !important;
	max-width:630px !important;
}
#Casual > p {
	width:100% !important;
	display:block !important;
	text-align:center;
	font-size:20px;
	width:90%;
	max-width:800px;
	margin:1.5em auto 5.0em auto !important;
	line-height:180%;
}
#Casual > p > span {
	display:inline-block;
	text-align:left;
}
#Casual span.ml {
	margin-left:-0.5em;
}


#Casual .area_flex {
	display:flex;
}
#Casual .itembox {
	width:90%;
	max-width:1000px;
	margin:2% auto 10% auto !important;
	justify-content:space-between;
	align-items:center;
}
	#Casual .itembox > .img {
		width:60%;
	}
	#Casual .itembox > .txt {
		width:38%;
		display:block;
		text-align:center;
		display:flex;
		justify-content:flex-end;
		flex-wrap:wrap;
	}
	#Casual .itembox.type_r > .txt { order:1; }
	#Casual .itembox.type_r > .img { order:2; }

	#Casual .itembox > .txt > p {
		display:inline-block;
		text-align:left;
		font-weight:normal;
		line-height:1.4em !important;
	}
	#Casual .itembox > .txt > p:nth-of-type(1) {
		margin-bottom:0.7em;
	}

	#Casual .itembox > .txt > span {
		display:block;
		margin-bottom:0.7em;
	}
	#Casual .itembox > .txt > span:last-nth-of-type(1) {
		margin-bottom:0em;
	}
	#Casual .itembox > .txt > p > span {
		display:inline-block;
		margin:0.7em 0;
		font-weight:normal;
	}
	#Casual .itembox > .txt > p > span.price {
		margin-left:1.0em;
	}
	#Casual .itembox > .txt > p span.tax {
		font-size:80%;
		margin-left:0.3em;
	}

	#Casual section a {
		width:auto;
		display:inline-block;
		text-decoration:none;
		position:relative;
		margin-top:-0.4em !important;
	}
	#Casual section a > span {
		display:block;
		text-align:center;
		box-sizing:border-box;
		background:#000;
		color:#fff;
		padding:0.5em 2.5em 0.5em 1.2em !important;
		text-decoration:none;
		position:relative;
	}
	#Casual section a > span:after {
		content:"";
		display:block;
		width:0.7em;
		height:calc(0.7em * 1.16);
		background:url(images/i_arrow_r.svg) no-repeat;
		background-size:contain;
		position:absolute;
		top:50%;
		right:1.0em;
		-webkit-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		transform:translate(0%, -50%);
	}
#Casual #info > div {
	display:block;
	width:90% !important;
	max-width:650px !important;
	margin:0 auto;
	text-align:center;
	box-sizing:border-box;
	padding:2.0em 2.5em !important;
	border:1px solid #000;
	background:#eee;
}
#Casual #info > div h1 {
	font-size:20px;
	font-weight:bold;
	margin-bottom:1.5em;
}
#Casual #info > div p {
	text-align:left;
}
#Casual #info > div p > span {
	display:block;
	text-align:center;
	margin-bottom:0.5em;
}
#Casual #info > div p.tyui {
	margin:1.5em auto;
}
#Casual #info > div p.tyui > span {
	display:block;
	text-align:left;
	text-indent:-1.0em;
	padding-left:1.0em;
}
#Casual a.all_list {
	display:block;
	width:65% !important;
	max-wdith:400px;
	text-align:center;
	font-size:24px;
	margin:7.0em auto 10% auto;
	background:#000;
	color:#fff;
	box-sizing:border-box;
	padding:0.7em 0 !important;
}

/* ------------------------------------------- */

@media screen and (max-width:767px) {

#Casual .pc { display:none !important; }
#Casual .sp { display:block !important; }

#Casual {
	font-size:2.7vw !important;
}
#Casual > h1 {
	text-align:center;
	font-size:4.0vw !important;
}
	#Casual .itembox > .img {
		width:37%;
	}
	#Casual .itembox > .txt {
		width:60%;
		display:block;
		text-align:center;
	}
#Casual .itembox {
	flex-wrap:wrap;
	width:95%;
	margin:2% auto 10% auto !important;
	justify-content:space-between;
	align-items:center;
}
#Casual section:nth-of-type(2) {
	margin:7.0em auto 7.0em auto !important;
}
	#Casual .itembox > .img {
		width:100%;
	}
	#Casual .itembox > .txt {
		width:100%;
		display:block;
		text-align:center;
		margin-top:1.5em;
	}
	#Casual .itembox.type_r > .txt { order:2; }
	#Casual .itembox.type_r > .img { order:1; }
#Casual > p {
	font-size:3.0vw !important;
	width:95% !important;
	max-width:630px;
	line-height:180%;
}
	#Casual section > p {
		width:90% !important;
		font-size:2.7vw;
		letter-spacing:0;
		text-align:left !important;
	}
	#Casual section a {
		width:auto;
		display:inline-block;
		text-decoration:none;
		position:relative;
	}
	#Casual section a > span {
		display:block !important;
		font-size:3.5vw !important;
		margin:0em auto 0 auto !important;
		text-align:center;
		box-sizing:border-box;
		background:#000;
		color:#fff;
		padding:0.7em 3.5em 0.7em 2.5em;
		position:relative;
	}
#Casual #info > div h1 {
	font-size:3.5vw !important;
	font-weight:bold;
}
#Casual a.all_list {
	display:block;
	width:50%;
	max-wdith:350px;
	text-align:center;
	font-size:4.0vw !important;
	margin:5.0em auto 5% auto;
	background:#000;
	color:#fff;
	box-sizing:border-box;
	padding:0.6em 0;
}
}



/* ------------------------------------------- */

#Casual .slider .slick-slide {
	width:100%;
	height:auto;
/*	overflow: hidden; */
}
#Casual .slider .slick-slide img {
	max-width:100% !important;
	height:auto;
}
#Casual .slider .slick-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  top: 50%;
	-webkit-transform: translate(0%, -50%) !important;
	-ms-transform: translate(0%, -50%) !important;
	transform:translate(0%, -50%) !important;
  z-index: 1;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
#Casual .slider .slick-arrow::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-width: 3px 3px 0 0;
  position: absolute;
  top: 12px;
  transform: rotate(45deg);
}
#Casual .slider .slick-next {
  right: 0;
}
#Casual .slider .slick-prev {
  left: 0;
}
#Casual .slider .slick-next::before {
  left: 10px;
}
#Casual .slider .slick-prev::before {
  border-width: 0 0 3px 3px;
  right: 10px;
}
#Casual .dots_area .slick-dots {
  text-align: center;
}
#Casual .dots_area .slick-dots li {
  display: inline-block;
}
#Casual .dots_area .slick-dots button {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #bcbcbc;
  border-radius: 50%;
}
#Casual .dots_area .slick-dots .slick-active button {
  background: #0a467d;
}

@media screen and (max-width:767px) {

#Casual .slider {
	width:100%;
}
#Casual .slider .slick-arrow {
  width: 6.0vw;
  height: 6.0vw;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  top: 50%;
	-webkit-transform: translate(0%, -50%) !important;
	-ms-transform: translate(0%, -50%) !important;
	transform:translate(0%, -50%) !important;
  z-index: 1;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
#Casual .slider .slick-arrow::before {
  content: '';
  display: block;
  width: 1.5vw;
  height: 1.5vw;
  border: 1px solid #fff;
  border-width: 3px 3px 0 0;
  position: absolute;
  top: 50%;
	-webkit-transform: rotate(45deg) translate(0%, -50%) !important;
	-ms-transform: rotate(45deg) translate(0%, -50%) !important;
	transform: rotate(45deg) translate(0%, -50%) !important;
}
#Casual .slider .slick-next::before {
  left: 18%;
}
#Casual .slider .slick-prev::before {
  border-width: 0 0 3px 3px;
  left: 25% !important;
}
}