@charset "UTF-8";

section#item > .inner {
	overflow : hidden;
	margin : 0 auto;
	padding : 0 20px 40px;
}
section#item > .inner > .content {
	margin-bottom : 60px;
}
#item > .inner > header {
	margin-bottom : 24px;
	padding-bottom : 24px;
	border-bottom : 1px dotted #000000;
}
#item h1 {
	font-size : 1.8em;
	font-weight : bold;
	line-height : 1.45;
}
#item h1 span {
	display : block;
	font-size : 0.725em;
	font-weight : normal;
	margin-top : 0.25em;
	color : #777777;
}

#item h3 {
	font-size : 1.275em;
	font-weight : bold;
	margin-bottom : 1em;
	padding : 0.75em 0;
	border-bottom : 1px dotted #000000;
}
#item h3 span {
	font-family : "Century Gothic", "arial Black", sans-serif;
	font-size : small;
	font-weight : bold;
	font-style : normal;
	padding-left : 10px;
	color : #999999;
}

#main {
	display : grid;
	grid-template-columns : 30% 1fr;
	grid-gap : 40px;
}
#main #mainImg {
	height : 400px;
}
#main #mainImg img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#main #subImg {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
	grid-gap : 20px;
}
#main #subImg > li {
	border : 2px solid #dddddd;
}

#main #subImg > li {
	border : 2px solid #dddddd;
}
#main #subImg > li img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}

#orderTotal {
	display : flex;
	position : fixed;
	bottom : 0;
	left : 0;
	font-size : 1.275em;
	justify-content : center;
	align-items : center;
	width : 100%;
	padding : 24px 0;
	color : #ffffff;
	background-color : #468daf;
}
#orderTotal > div {
	margin : 0 12px;
}
#orderTotal > .input {
	display : none;
}
#orderTotal .total_num {
	margin : 0 0.5em;
}
#orderTotal .subtotal {
	font-size : 0.725em;
}
#orderTotal .tax {
	font-size : 0.725em;
}
#orderTotal input[type="text"] {
	pointer-events : none;
	border : none;
	background-color : transparent;
}
#orderTotal button {
	font-size : 0.75em;
	font-weight : bold;
	padding : 0.5em 1em;
	color : #ffffff;
	border-radius : 3px;
	background : #333333;
}

@media screen and (max-width: 767px) {
	#main {
		grid-template-columns : 1fr;
	}
	#main #mainImg {
		margin-bottom : 20px;
	}
	#main #subImg {
		display : grid;
		grid-template-columns : 1fr 1fr 1fr 1fr;
		grid-gap : clamp(8px, 3vw, 20px);
	}
	#orderTotal {
		display : block;
		padding : 12px 0;
		text-align : center;
	}
	#orderTotal > div {
		margin : 0 ;
	}
	#orderTotal > div.total {
		margin-bottom : 4px;
	}
	#orderTotal > div.subtotal {
		display : inline-block;
		font-size : 0.5em;
		margin-right : 4px;
		margin-bottom : 8px ;
	}
	#orderTotal > div.tax {
		display : inline-block;
		font-size : 0.5em;
		margin-bottom : 8px;
	}
	#orderTotal > div.button button {
		display : block;
		width : 70%;
		min-width : 8em;
		margin : 0 auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (min-width: 1025px) and (max-width: 1439px) {
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
}
@media screen and (min-width: 1920px) {
}