img[src$="/onsen_image1.jpg"] {width: 20.04em}
img[src$="/onsen_image2.jpg"] {width: 20.04em}
img[src$="/onsen_name1.png"] {width: 8.71em}
img[src$="/onsen_name2.png"] {width: 8.71em}
img[src$="/top_copy.svg"] {width: 19.55em}
img[src$="/top_image_pc.jpg"] {width: 86.04em}
img[src$="/top_image_sp.jpg"] {width: 25.04em}
img[src$="/usage_back_pc.jpg"] {width: 68.3em}
img[src$="/usage_back_sp.jpg"] {width: 25em}
img[src$="/usage_case1.svg"] {width: 15.7em}
img[src$="/usage_case2.svg"] {width: 15.7em}
img[src$="/usage_case3.svg"] {width: 15.7em}
img[src$="/usage_case4.svg"] {width: 15.7em}
img[src$="/usage_case5.svg"] {width: 15.7em}
img[src$="/usage_title_pc.png"] {width: 40em}
img[src$="/usage_title_sp.png"] {width: 24.17em}
img[src$="/voice_title_pc.svg"] {width: 34.5em}
img[src$="/voice_title_sp.svg"] {width: 17.25em}


.Onsen img {
	font-size: 20px;
	max-width: 100%;
}

@media (max-width: 640px) {
	.Onsen img {
		font-size: 4vw;
	}
}

@media (min-width: 641px) {
	.Onsen img {
		font-size: 2vw;
	}
}
@media (min-width: 1001px) {
	.Onsen img {
		font-size: 20px;
	}
}


.Onsen .onsen {
	background: #f9f5ee;
}

.Onsen .onsen h2 {
	margin: 0;
}

.Onsen .onsen .body h3 {
	font-weight: normal;
}
.Onsen .onsen .onsen1 h3 {
	color: #d49a00;
}
.Onsen .onsen .onsen2 h3 {
	color: #d14205;
}

.Onsen .onsen .body h3 small {
	display: block;
}

.Onsen .onsen .body p {
	font-size: 80%;
	text-align: left;
}

.Onsen .onsen .body figure {
	margin: 0;
}

@media (max-width: 640px) {
	.Onsen .onsen {
		padding: 1px 1rem;
	}
	.Onsen .onsen .body > div {
		padding: 1.5rem 0;
	}
	.Onsen .onsen .onsen2 {
		border-top: 1px solid rgba(191, 156, 86, 0.4);
	}
	.Onsen .onsen .body figure img {
		width: 100%;
	}
	.Onsen .onsen > p {
		margin: 0 0 1.5rem;
	}
	.Onsen .onsen > p span {
		display: inline-block;
	}
}

@media (min-width: 641px) {
	.Onsen .onsen {
		padding: 2rem 0;
	}
	.Onsen .onsen .body {
		display: flex;
		justify-content: center;
	}
	.Onsen .onsen .body > div {
		box-sizing: border-box;
		width: 25rem;
		padding: 0 2.5rem;
	}
	.Onsen .onsen .onsen2 {
		border-left: 1px solid rgba(191, 156, 86, 0.4);
	}
}


.Onsen .top h1 {
	margin: 0;
}

@media (max-width: 640px) {
	.Onsen .top .copy h2,
	.Onsen .top .copy p {
		margin: 2rem 0;
	}
	.Onsen .top .copy {
		margin: 0 1rem;
	}
	.Onsen .top .copy p {
		text-align: left;
	}
	.Onsen .top .copy p br {
		display: none;
	}
}
@media (min-width: 641px) {
	.Onsen .top h1 {
		overflow: hidden;
		position: relative;
		height: 20rem;
		text-align: left;
	}
	.Onsen .top h1 img {
		display: block;
		position: relative;
		max-width: none;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.Onsen .top .copy h2,
	.Onsen .top .copy p {
		margin: 2.5rem 0;
	}
}

@media (min-width: 1721px) {
	.Onsen .top h1 img {
		width: 100%;
	}
}


.Onsen .usage {
	background: no-repeat center center;
	background-size: cover;
}

.Onsen .usage ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}

@media (max-width: 640px) {
	.Onsen .usage {
		padding: 1px 1rem;
		background-image: url(/src/images/onsen/usage_back_sp.jpg);
	}
	.Onsen .usage h2,
	.Onsen .usage ul {
		margin: 2rem auto;
	}
	.Onsen .usage li {
		width: 11.25rem;
	}
	.Onsen .usage li:nth-of-type(2),
	.Onsen .usage li:nth-of-type(5) {
		margin-left: 0.5rem;
	}
	.Onsen .usage li:nth-of-type(3) {
		margin: -1.5rem 5rem;
	}
}

@media (min-width: 641px) {
	.Onsen .usage {
		padding: 1px 0;
		background-image: url(/src/images/onsen/usage_back_pc.jpg);
	}
	.Onsen .usage h2,
	.Onsen .usage ul {
		margin: 2rem auto;
	}
	.Onsen .usage ul {
		width: 50rem;
	}
	.Onsen .usage li:not(:nth-of-type(3n+1)) {
		margin-left: 0.5rem;
	}
	.Onsen .usage li:nth-of-type(n+4) {
		margin-top: -2rem;
	}
}


.Onsen .voice {
}

.Onsen .voice h3 {
	color: #e68505;
	font-weight: normal;
	line-height: 1.3;
}
.Onsen .voice p {
	text-align: left;
}

@media (max-width: 640px) {
	.Onsen .voice {
		padding: 1px 1rem;
	}
	.Onsen .voice h2,
	.Onsen .voice .body {
		margin: 2rem auto;
	}
	.Onsen .voice .body > div {
		border-top: 1px solid rgba(191, 156, 86, 0.4);
	}
	.Onsen .voice .body h3 span {
		display: inline-block;
	}
	.Onsen .voice .body h3 small {
		display: block;
	}
}

@media (min-width: 641px) {
	.Onsen .voice h2,
	.Onsen .voice .body {
		margin: 2.5rem auto;
	}

	.Onsen .voice .body {
		display: flex;
		width: 50rem;
	}
	.Onsen .voice .body > div {
		padding: 0 1rem;
	}
	.Onsen .voice .body > div:nth-of-type(n+2) {
		border-left: 1px solid rgba(191, 156, 86, 0.4);
	}
	.Onsen .voice .body h3 span {
		display: block;
	}
}