@charset "Shift_JIS";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');

/* =============================================================================
   LP-scoped reset
   All selectors are limited to #om_sm so the common header/footer are untouched.
============================================================================= */
#om_sm,
#om_sm div, #om_sm span, #om_sm applet, #om_sm object, #om_sm iframe,
#om_sm h1, #om_sm h2, #om_sm h3, #om_sm h4, #om_sm h5, #om_sm h6,
#om_sm p, #om_sm blockquote, #om_sm pre, #om_sm a, #om_sm abbr,
#om_sm acronym, #om_sm address, #om_sm big, #om_sm cite, #om_sm code,
#om_sm del, #om_sm dfn, #om_sm em, #om_sm img, #om_sm ins, #om_sm kbd,
#om_sm q, #om_sm s, #om_sm samp, #om_sm small, #om_sm strike,
#om_sm strong, #om_sm sub, #om_sm sup, #om_sm tt, #om_sm var,
#om_sm b, #om_sm u, #om_sm i, #om_sm center, #om_sm dl, #om_sm dt,
#om_sm dd, #om_sm ol, #om_sm ul, #om_sm li, #om_sm fieldset,
#om_sm form, #om_sm label, #om_sm legend, #om_sm table, #om_sm caption,
#om_sm tbody, #om_sm tfoot, #om_sm thead, #om_sm tr, #om_sm th,
#om_sm td, #om_sm article, #om_sm aside, #om_sm canvas, #om_sm details,
#om_sm embed, #om_sm figure, #om_sm figcaption, #om_sm footer,
#om_sm header, #om_sm hgroup, #om_sm menu, #om_sm nav, #om_sm output,
#om_sm ruby, #om_sm section, #om_sm summary, #om_sm time, #om_sm mark,
#om_sm audio, #om_sm video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

#om_sm article, #om_sm aside, #om_sm details, #om_sm figcaption,
#om_sm figure, #om_sm footer, #om_sm header, #om_sm hgroup,
#om_sm menu, #om_sm nav, #om_sm section {
	display: block;
}

#om_sm ol, #om_sm ul {
	list-style: none;
}

#om_sm blockquote, #om_sm q {
	quotes: none;
}

#om_sm blockquote::before, #om_sm blockquote::after,
#om_sm q::before, #om_sm q::after {
	content: none;
}

#om_sm table {
	border-collapse: collapse;
	border-spacing: 0;
}

#om_sm button {
	border: none;
}

/* =============================================================================
   Body setting
============================================================================= */
#om_sm {
	font-family: "Zen Old Mincho", serif, "Yu Gothic", Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "MS PGothic";
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	line-height: 1.5;
	color: #000;
	word-break: auto-phrase;
	line-break: strict;
}

@media screen and (max-width: 767px) {
	#om_sm,
	#om_sm a, #om_sm abbr, #om_sm acronym, #om_sm address,
	#om_sm applet, #om_sm article, #om_sm aside, #om_sm audio,
	#om_sm b, #om_sm big, #om_sm blockquote, #om_sm canvas,
	#om_sm caption, #om_sm center, #om_sm cite, #om_sm code,
	#om_sm dd, #om_sm del, #om_sm details, #om_sm dfn,
	#om_sm dialog, #om_sm div, #om_sm dl, #om_sm dt,
	#om_sm em, #om_sm embed, #om_sm fieldset, #om_sm figcaption,
	#om_sm figure, #om_sm footer, #om_sm form, #om_sm h1,
	#om_sm h2, #om_sm h3, #om_sm h4, #om_sm h5,
	#om_sm h6, #om_sm header, #om_sm hgroup, #om_sm i,
	#om_sm iframe, #om_sm img, #om_sm ins, #om_sm kbd,
	#om_sm label, #om_sm legend, #om_sm li, #om_sm main,
	#om_sm mark, #om_sm menu, #om_sm nav, #om_sm object,
	#om_sm ol, #om_sm output, #om_sm p, #om_sm pre,
	#om_sm q, #om_sm ruby, #om_sm s, #om_sm samp,
	#om_sm section, #om_sm small, #om_sm span, #om_sm strike,
	#om_sm strong, #om_sm sub, #om_sm summary, #om_sm sup,
	#om_sm table, #om_sm tbody, #om_sm td, #om_sm textarea,
	#om_sm tfoot, #om_sm th, #om_sm thead, #om_sm time,
	#om_sm tr, #om_sm tt, #om_sm u, #om_sm ul,
	#om_sm var, #om_sm video {
		text-align: unset;
	}
}

#om_sm a {
	color: inherit;
	text-decoration: none;
	outline: none;
}

#om_sm img {
	vertical-align: top;
	max-width: 100%;
	width: 100%;
}

@media screen and (min-width: 561px) {
	#om_sm .spOnly {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	#om_sm .pcOnly {
		display: none !important;
	}
}

#om_sm .fadeIn {
	transform: translate3d(0, 50px, 0);
	transition: 1s;
	opacity: 0;
}

#om_sm .fadeIn.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

#om_sm .contentsArea {
	margin: 0 auto;
	line-break: strict;
}

#om_sm .contentsArea .inner {
	max-width: 1000px;
	margin: 3em auto 5rem;
	padding: 0 20px;
}

#om_sm #intro {
	text-align: center;
}

#om_sm #intro h1 {
	font-size: clamp(24px, 4vw, 2.75rem);
}

#om_sm #intro p {
	margin-top: 2em;
}

#om_sm .product {
	text-align: center;
}

#om_sm .product img {
	max-width: calc(100% / 3);
}

#om_sm .product p.price span {
	font-size: 160%;
}

#om_sm .product a.btn {
	background-image: linear-gradient(0deg, #1f1f1f, #535353);
	color: #fff;
	display: block;
	padding: 1em;
	max-width: calc(100% / 3);
	margin: 1em auto 0;
	transition: all 0.3s ease;
}

#om_sm .product a.btn:hover {
	opacity: 0.8;
}

#om_sm .inner .col2 {
	display: flex;
	gap: 2.5em;
	align-items: center;
	justify-content: space-between;
}

#om_sm .inner .col2.rev {
	flex-direction: row-reverse;
}

#om_sm .inner .col2 .col2_img {
	flex: 1;
}

#om_sm .inner .col2 .col2_img img {
	width: 100%;
	height: auto;
	display: block;
}

#om_sm .inner .col2 .col2_text {
	flex: 2;
}

#om_sm .bg_gray {
	background-color: #f5f5f5;
	padding: 5rem 0;
}

#om_sm .bg_gray .inner {
	margin: 0 auto;
}

#om_sm .inner h2 {
	font-size: clamp(20px, 4vw, 2rem);
	margin-bottom: 0.75rem;
}

@media screen and (max-width: 767px) {
	#om_sm .inner {
		max-width: 429px;
		margin: 0 auto;
		padding-left: 20px;
		padding-right: 20px;
	}

	#om_sm .inner .col2,
	#om_sm .inner .col2.rev {
		flex-direction: column;
	}

	#om_sm .product img {
		max-width: 100%;
	}

	#om_sm .product a.btn {
		max-width: 50%;
	}
}