@charset "UTF-8";
/* btn */
.hmk-btn {
	display: block;
	font-weight: bold;
	line-height: 2.8;
	color: #212121;
	text-align: center;
	text-decoration: none;
	letter-spacing: .1em;
	background: #fff;
	border: 2px solid;
	transition: all .4s ease;
}
.hmk-btn:hover {
	text-decoration: none;
}
@media (any-hover: hover) {
	.hmk-btn:hover {
		color: #fff;
		background: #212121;
		border-color: #212121;
	}
}
.hmk-btn--round {
	border-radius: 2.5em;
}
.hmk-btn--corner {
	border-radius: .24em;
}
.hmk-btn--arrow-fix {
	position: relative;
}
.hmk-btn--arrow-fix-b {
}
.hmk-btn--arrow-fix-b::after {
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	height: .5em;
	aspect-ratio: 1/cos(30deg);
	margin: auto;
	clip-path: polygon(50% 100%,100% 0,0 0);
	content: "";
	background: currentColor;
}
.hmk-btn--arrow-fix-r {
}
.hmk-btn--arrow-fix-r::after {
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	height: .5em;
	aspect-ratio: cos(30deg);
	margin: auto;
	clip-path: polygon(0 0,100% 50%,0 100%);
	content: "";
	background: currentColor;
}
.hmk-btn--arrow-relative {
	display: flex;
	column-gap: .25em;
	align-items: center;
	justify-content: center;
}
.hmk-btn--arrow-relative-b {
}
.hmk-btn--arrow-relative-b::after {
	width: .5em;
	aspect-ratio: 1/cos(30deg);
	clip-path: polygon(50% 100%,100% 0,0 0);
	content: "";
	background: currentColor;
}
.hmk-btn--arrow-relative-r {
}
.hmk-btn--arrow-relative-r::after {
	height: .5em;
	aspect-ratio: cos(30deg);
	clip-path: polygon(0 0,100% 50%,0 100%);
	content: "";
	background: currentColor;
}
.hmk-btn--cart::before {
	width: 2em;
	height: 2em;
	content: "";
	background: currentColor;
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/cart.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/cart.svg") no-repeat center center / contain;
}
.hmk-btn--view::before {
	width: 2em;
	height: 2em;
	content: "";
	background: currentColor;
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/view.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/view.svg") no-repeat center center / contain;
}
.hmk-btn--red {
	color: #fff;
	background: #a52020;
	border-color: #a52020;
}
@media (any-hover: hover) {
	.hmk-btn--red:hover {
		color: #a52020;
		background: #fff;
		border-color: #a52020;
	}
}
.hmk-btn--gold {
	color: #fff;
	background: #9b7950;
	border-color: #9b7950;
}
@media (any-hover: hover) {
	.hmk-btn--gold:hover {
		color: #9b7950;
		background: #fff;
		border-color: #9b7950;
	}
}
.hmk-btn--light-orange {
	color: #fff;
	background: #ed7d31;
	border-color: #ed7d31;
}
@media (any-hover: hover) {
	.hmk-btn--light-orange:hover {
		color: #ed7d31;
		background: #fff;
		border-color: #ed7d31;
	}
}
.hmk-btn--orange {
	color: #fff;
	background: #d2461e;
	border-color: #d2461e;
}
@media (any-hover: hover) {
	.hmk-btn--orange:hover {
		color: #d2461e;
		background: #fff;
		border-color: #d2461e;
	}
}
.hmk-btn--bordeaux {
	color: #fff;
	background: #720a0b;
	border-color: #720a0b;
}
@media (any-hover: hover) {
	.hmk-btn--bordeaux:hover {
		color: #720a0b;
		background: #fff;
		border-color: #720a0b;
	}
}
.hmk-btn--billiard {
	color: #fff;
	background: #01aa9d;
	border-color: #01aa9d;
}
@media (any-hover: hover) {
	.hmk-btn--billiard:hover {
		color: #01aa9d;
		background: #fff;
		border-color: #01aa9d;
	}
}
.hmk-btn--green {
	color: #fff;
	background: #2f750e;
	border-color: #2f750e;
}
@media (any-hover: hover) {
	.hmk-btn--green:hover {
		color: #2f750e;
		background: #fff;
		border-color: #2f750e;
	}
}
.hmk-btn--blue {
	color: #fff;
	background: #1c3b8b;
	border-color: #1c3b8b;
}
@media (any-hover: hover) {
	.hmk-btn--blue:hover {
		color: #1c3b8b;
		background: #fff;
		border-color: #1c3b8b;
	}
}
.hmk-btn--black {
	color: #fff;
	background: #212121;
	border-color: #212121;
}
@media (any-hover: hover) {
	.hmk-btn--black:hover {
		color: #212121;
		background: #fff;
		border-color: #212121;
	}
}

/* catalog-variation */
.hmk-catalog-variation {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}
.hmk-catalog-variation__ttl {
	display: flex;
	place-content: center;
	place-items: center;
	font-weight: bold;
}
.hmk-catalog-variation__ttl-txt {
}
.hmk-catalog-variation__ttl-txt--gourmet {
	color: #a52020;
}
.hmk-catalog-variation-list {
	display: flex;
}
.hmk-catalog-variation-list__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	place-items: center;
	text-align: center;
}
.hmk-catalog-variation-list__img {
	display: block;
}
.hmk-catalog-variation-list__txt {
	text-align: center;
}
.hmk-catalog-variation-list__btn {
	display: grid !important;
	grid-template-rows: auto;
	grid-template-columns: auto 1rem;
	grid-column-gap: .5em;
	place-content: center;
	place-items: center;
}
.hmk-catalog-variation-list__btn::before {
	grid-area: 1 / 2 / 2 / 3;
	width: 1em;
	height: 1em;
	content: "";
	background: #fff;
	border-radius: 50%;
	transition: inherit;
}
.hmk-catalog-variation-list__btn.hmk-btn--red::before {
	border: 2px solid #a52020;
}
.hmk-catalog-variation-list__btn::after {
	grid-area: 1 / 2 / 2 / 3;
	height: .25em;
	aspect-ratio: 2;
	clip-path: polygon(50% 100%, 100% 0, 0 0);
	content: "";
	transition: inherit;
}
.hmk-catalog-variation-list__btn.hmk-btn--red::after {
	background: #a52020;
}
@media screen and (max-width: 767px) {
	.hmk-catalog-variation {
	}
	.hmk-catalog-variation-list {
		flex-direction: column;
		row-gap: 1rem;
		align-items: center;
	}
	.hmk-catalog-variation-list__item {
		flex-direction: row;
		column-gap: 1rem;
		padding: 0 1rem;
	}
	.hmk-catalog-variation-list__img {
		width: 40%;
	}
	.hmk-catalog-variation-list__txt {
		display: flex;
		flex: 1;
		flex-direction: column;
		row-gap: .5rem;
		place-items: center;
	}
	.hmk-catalog-variation-list__btn {
		padding: 0 1em;
	}
}
@media screen and (min-width: 768px) {
	.hmk-catalog-variation {
		padding: 4rem 2.5rem;
	}
	.hmk-catalog-variation__ttl-txt {
		font-size: 1.75rem;
	}
	.hmk-catalog-variation-list {
		gap: 2rem;
	}
	.hmk-catalog-variation-list__item {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		align-items: center;
	}
	.hmk-catalog-variation-list__txt {
		display: contents;
	}
	.hmk-catalog-variation-list__img {
		width: auto;
		height: 240px !important;
	}
	.hmk-catalog-variation-list__btn {
		padding: 0 2em;
		font-size: 1.25rem;
	}
}

/* hmk-other-variation */
.hmk-other-variation {
	display: flex;
	flex-direction: column;
	border-style: solid;
}
.hmk-other-variation--take {
	border-color: #ecf1f7;
}
.hmk-other-variation--gourmet {
	border-color: #e1b5b9;
}
.hmk-other-variation--lamarie {
	border-color: #ffeae9;
}
.hmk-other-variation--beams-ebook {
	border-color: #b1c4c8;
}
.hmk-other-variation--beams {
	border-color: #1c3b8b;
}
.hmk-other-variation--yasamira {
	border-color: #e9f4f5;
}
.hmk-other-variation__ttl {
	width: fit-content;
	margin: auto;
	line-height: 2;
	text-align: center;
}
.hmk-other-variation__ttl--mincho {
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.hmk-other-variation__ttl--take {
	color: #677c9b;
}
.hmk-other-variation__ttl--gourmet {
	color: #a52020;
}
.hmk-other-variation__ttl--lamarie::after {
	display: block;
	width: 100%;
	height: 10px;
	content: "";
	background: linear-gradient(135deg, #ff6666 0%, #ff6666 5%, #fff 5%, #fff 5%, #fff 50%, #fff 50%, #fff 50%, #fff 50%, #ff6666 50%, #ff6666 50%, #ff6666 55%, #fff 55%, #fff 55%);
	background-size: .5rem .5rem;
}
.hmk-other-variation__ttl--beams {
	color: #1c3b8b;
}
.hmk-other-variation__ttl--beams::after {
	display: block;
	width: 100%;
	height: 10px;
	content: "";
	background: linear-gradient(135deg, #1c3b8b 0%, #1c3b8b 5%, #fff 5%, #fff 5%, #fff 50%, #fff 50%, #fff 50%, #fff 50%, #1c3b8b 50%, #1c3b8b 50%, #1c3b8b 55%, #fff 55%, #fff 55%);
	background-size: .5rem .5rem;
}
.hmk-other-variation__ttl--yasamira {
	color: #2f750e;
}
.hmk-other-variation__ttl--yasamira::after {
	display: block;
	width: 100%;
	height: 10px;
	content: "";
	background: linear-gradient(135deg, #2f750e 0%, #2f750e 5%, #fff 5%, #fff 5%, #fff 50%, #fff 50%, #fff 50%, #fff 50%, #2f750e 50%, #2f750e 50%, #2f750e 55%, #fff 55%, #fff 55%);
	background-size: .5rem .5rem;
}
.hmk-other-variation-content {
	display: flex;
}
.hmk-other-variation-content__img {
	height: auto;
}
.hmk-other-variation-content__img--shadow {
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);
}
.hmk-other-variation-content__img--layer01 {
	z-index: -1;
	transform: rotate(350deg);
	transform-origin: top right;
}
.hmk-other-variation-content__img--layer02 {
	z-index: -1;
	transform: rotate(10deg);
	transform-origin: top left;
}
.hmk-other-variation-content__img--layer03 {
	position: absolute;
	left: 5%;
	height: auto;
}
.hmk-other-variation-content__img--layer04 {
	position: absolute;
	bottom: 7%;
	left: 4%;
	height: auto;
}
.hmk-other-variation-content__txt-wrap {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
}
.hmk-other-variation-content__txt--mincho {
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.hmk-other-variation-content__txt--border {
	padding: 0 .5em;
	line-height: 2;
	border: 1px solid;
}
.hmk-other-variation-content__txt--l {
	font-size: 1.5rem;
}
.hmk-other-variation-content__btn {
	width: 80%;
}
.hmk-other-variation-content__btn--gourmet {
	color: #fff;
	background: #a52020;
	border-color: #a52020;
}
@media (any-hover: hover) {
	.hmk-other-variation-content__btn--gourmet:hover {
		color: #a52020;
		background: #fff;
	}
}
.hmk-other-variation-course-list {
	display: grid;
	row-gap: 2rem;
}
.hmk-other-variation-course-list__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	row-gap: .5rem;
}
.hmk-other-variation-course-list__txt {
	font-size: 1rem;
}
.hmk-other-variation-course-list__txt--red {
	color: #c00;
}
.hmk-other-variation-course-list__txt--s {
	font-size: .8rem;
}
.hmk-other-variation-course-list__btn {
	width: 100%;
	color: #212121;
	border-color: currentColor;
}
.hmk-other-variation-course-list__btn::after {
	background: currentColor;
}
.hmk-other-variation-course-list__btn--gourmet {
	color: #fff;
	background: #a52020;
	border-color: #a52020;
}
@media (any-hover: hover) {
	.hmk-other-variation-course-list__btn:hover {
		color: #fff;
		background: #212121;
		border-color: #212121;
	}
	.hmk-other-variation-course-list__btn--gourmet:hover {
		color: #a52020;
		background: #fff;
		border-color: #a52020;
	}
}
@media screen and (max-width: 767px) {
	.hmk-other-variation {
		row-gap: 2rem;
		padding: 2rem 1rem;
		border-width: 10px;
	}
	.hmk-other-variation__ttl {
		font-size: 1.25rem;
	}
	.hmk-other-variation-content {
		flex-direction: column;
		row-gap: 1rem;
	}
	.hmk-other-variation-content__img--layer03 {
		bottom: 25%;
	}
	.hmk-other-variation-content__txt-wrap {
		place-items: center;
		text-align: center;
	}
	.hmk-other-variation-course-list__item {
		place-items: center;
	}
}
@media screen and (min-width: 768px) {
	.hmk-other-variation {
		row-gap: 2rem;
		width: 960px;
		padding: 2rem;
		border-width: 20px;
	}
	.hmk-other-variation-content {
		column-gap: 2rem;
		justify-content: center;
	}
	.hmk-other-variation-content__img--layer03 {
		bottom: 15%;
	}
	.hmk-other-variation-content__txt-wrap {
		align-items: flex-start;
		justify-content: center;
	}
	.hmk-other-variation-course-list {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 2rem;
	}
}

/* hmk-catalog-item */
.hmk-catalog-list {
	display: grid;
}
.hmk-catalog-item {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}
.hmk-catalog-item--column {
	flex-direction: column;
	flex-wrap: nowrap;
	row-gap: 1rem;
	align-items: stretch;
	text-align: center;
}
.hmk-catalog-item--gray {
	background: #f5f5f5;
}
.hmk-catalog-item__img-wrap {
	flex-basis: 40%;
	transition: all .4s ease;
}
@media (any-hover: hover) {
	a.hmk-catalog-item__img-wrap:hover {
		opacity: .6;
	}
}
.hmk-catalog-item__img {
	width: 100%;
	height: auto;
}
.hmk-catalog-item__wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	row-gap: .5rem;
}
.hmk-catalog-item__txt {
	display: contents;
}
.hmk-catalog-item__txt--s {
}
.hmk-catalog-item__txt--l {
	font-weight: bold;
}
.hmk-catalog-item__txt--xl {
	font-weight: bold;
}
@media (any-hover: hover) {
	a.hmk-catalog-item__txt:hover {
		text-decoration: underline;
	}
}
.hmk-catalog-item__btn {
}
.hmk-catalog-item__btn--l {
}
.hmk-catalog-item__btn--red {
	color: #fff;
	background: #a52020;
	border: 2px solid #a52020;
}
@media (any-hover: hover) {
	.hmk-catalog-item__btn--red:hover {
		color: #a52020;
		background: #fff;
		border-color: currentColor;
	}
}
.hmk-catalog-item__btn--black {
	color: #000;
	background: #fff;
	border: 2px solid #000;
}
@media (any-hover: hover) {
	.hmk-catalog-item__btn--black:hover {
		color: #fff;
		background: #000;
	}
}
.hmk-catalog-item__btn--transparent {
	color: #fff;
	background: rgba(255,255,255,0);
	border: 2px solid #fff;
}
@media (any-hover: hover) {
	.hmk-catalog-item__btn--transparent:hover {
		color: #a52020;
		background: #fff;
	}
}
@media screen and (max-width: 767px) {
	.sp\:hmk-catalog-item--column {
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 1rem;
		align-items: stretch;
		text-align: center;
	}
	.sp\:hmk-catalog-item--gray {
		background: #f5f5f5;
	}
	.hmk-catalog-item__txt--s {
	}
	.hmk-catalog-item__txt--l {
		font-size: 1.5rem;
	}
	.hmk-catalog-item__txt--xl {
		font-size: 1.8rem;
	}
	.hmk-catalog-item__btn {
		flex-grow: 1;
	}
	.hmk-catalog-item__btn--l {
		font-size: 1.25rem;
	}
}
@media screen and (min-width: 768px) {
	.hmk-catalog-list {
		gap: 1rem;
	}
	.hmk-catalog-list--3column {
		grid-template-columns: repeat(3, 1fr);
	}
	.hmk-catalog-list--4column {
		grid-template-columns: repeat(4, 1fr);
	}
	.hmk-catalog-item {
		column-gap: 4rem;
	}
	.pc\:hmk-catalog-item--column {
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 1rem;
		align-items: stretch;
		text-align: center;
	}
	.pc\:hmk-catalog-item--gray {
		background: #f5f5f5;
	}
	.hmk-catalog-item__wrap {
		text-align: left;
	}
	.hmk-catalog-item__txt {
		font-size: 1.25rem;
	}
	.hmk-catalog-item__txt--s {
		font-size: 1rem;
	}
	.hmk-catalog-item__txt--l {
		font-size: 1.75rem;
	}
	.hmk-catalog-item__txt--xl {
		font-size: 2rem;
	}
	.hmk-catalog-item__btn--l {
		font-size: 1.5rem;
	}
}

/* hmk-cource-list */
.hmk-cource-list {
	display: flex;
	flex-direction: column;
}
.hmk-course-list-item {
}
.hmk-course-list-item--grid {
	display: grid;
}
.hmk-course-list-item--gray {
	background: #f3f4f8;
}
.hmk-course-list-item--pink {
	background: #fff2ef;
}
.hmk-course-thumb-list {
	display: flex;
	column-gap: .5rem;
}
.hmk-course-thumb-list__figure {
}
.hmk-course-thumb-list__img {
}
.hmk-course-thumb-list__caption {
	text-align: center;
	background: #eee;
	line-height: 2.5;
	font-size: .75rem;
	font-weight: bold;
}
.hmk-course-list-item__btn-wrap {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
}
.hmk-course-list-item__btn--cart::before {
	width: 2em;
	height: 2em;
	content: "";
	background: currentColor;
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/cart.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/cart.svg") no-repeat center center / contain;
}
.hmk-course-list-item__btn--view::before {
	width: 2em;
	height: 2em;
	content: "";
	background: currentColor;
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/view.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/view.svg") no-repeat center center / contain;
}
@media (any-hover: hover) {
	.hmk-course-list-item__img-wrap:hover {
		opacity: .6;
	}
}
@media screen and (max-width: 767px) {
	.hmk-course-list-item {
		gap: 1rem .5rem;
		align-items: center;
		padding: 1rem;
	}
	.hmk-course-list-item--grid {
		grid-template-rows: repeat(3, auto);
		grid-template-columns: 1fr 2fr;
	}
	.sp\:hmk-course-list-item--flex {
		display: flex;
		column-gap: 1rem;
	}
	.hmk-course-list-item__img-wrap {
		grid-area: 1 / 1 / 3 / 2;
	}
	.hmk-course-list-item__txt {
		grid-area: 1 / 2 / 2 / 3;
	}
	.hmk-course-thumb-list {
		grid-area: 2 / 2 / 3 / 3;
	}
	.hmk-course-list-item__btn-wrap {
		grid-area: 3 / 1 / 4 / 3;
	}
}
@media screen and (min-width: 768px) {
	.hmk-course-list--grid {
		display: grid;
		grid-template-columns: repeat(4, auto);
	}
	.hmk-course-list--grid-3 {
		grid-template-columns: repeat(3, auto);
	}
	.hmk-course-list-item {
		gap: .5rem 1.5rem;
		align-items: center;
		padding: 1.5rem 0;
	}
	.hmk-course-list-item--grid {
		grid-template-rows: repeat(2, auto);
		grid-template-columns: 1fr 1.75fr 3fr;
	}
	.hmk-course-list-item--column {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		align-items: stretch;
	}
	.hmk-course-list-item__img-wrap {
		grid-area: 1 / 1 / 3 / 2;
	}
	.hmk-course-list-item__txt {
		grid-area: 1 / 2 / 2 / 3;
	}
	.hmk-course-list-item__btn-wrap {
		grid-area: 2 / 2 / 3 / 3;
	}
	.hmk-course-thumb-list {
		grid-area: 1 / 3 / 3 / 4;
	}
}

/* hmk-price-list */
.hmk-price-list {
	display: grid;
}
.hmk-price-list__item {
}
.hmk-price-list__inner {
	position: relative;
    display: block;
    text-align: center;
	padding: 1rem;
	line-height: 1.25;
}
.hmk-price-list__inner--pink {
	background: #ffe6df;
	border: 1px solid #e5d7d8;
}
.hmk-price-list__inner--indigo {
	background: #fff;
	border: 1px solid #282841;
	color: #282841;
}
@media (any-hover: hover) {
	.hmk-price-list__inner--indigo:hover {
		background: #282841;
		color: #fff;
	}
}
.hmk-price-list__inner::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: .5rem;
	aspect-ratio: cos(30deg);
	clip-path: polygon(0 0,100% 50%,0 100%);
	background: currentColor;
	height: .75rem;
	margin: auto;
	content: "";
}
@media screen and (max-width: 767px) {
	.hmk-price-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}
@media screen and (min-width: 768px) {
	.hmk-price-list {
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
	}
}

/* hmk-free-service */
.hmk-free-service {
	display: flex;
	flex-direction: column;
}
.hmk-free-service__ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	color: #9b7950;
}
.hmk-free-service__ttl::before,
.hmk-free-service__ttl::after {
	width: 0;
	content: "";
	border-left: dotted #9b7950;
}
.hmk-free-service__ttl::before {
	transform: rotate(-30deg);
}
.hmk-free-service__ttl::after {
	transform: rotate(30deg);
}
.hmk-free-service-list {
	display: grid;
	background: #f8f9f9;
}
.hmk-free-service-list__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: .5rem;
	place-content: center;
	place-items: center;
}
.hmk-free-service-list__ttl {
	color: #9b7950;
	text-align: center;
}
.hmk-free-service-list__txt {
	text-align: center;
}
@media screen and (max-width: 767px) {
	.hmk-free-service {
		row-gap: 1rem;
		padding: 1rem;
	}
	.hmk-free-service__ttl {
		column-gap: 1rem;
		font-size: 1.125rem;
	}
	.hmk-free-service__ttl::before,
	.hmk-free-service__ttl::after {
		height: 1em;
		border-left-width: 3px;
	}
	.hmk-free-service-list {
		grid-template-columns: repeat(2, 1fr);
		border-top: 1px solid #9b7950;
		border-left: 1px solid #9b7950;
	}
	.hmk-free-service-list__ttl {
		font-size: 1.125rem;
	}
	.hmk-free-service-list__item {
		padding: .5rem;
		border-right: 1px solid #9b7950;
		border-bottom: 1px solid #9b7950;
	}
	.hmk-free-service-list__item--fill {
		width: 200%;
	}
	.hmk-free-service-list__item--link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.hmk-free-service-list__link {
		display: grid;
		grid-template-rows: repeat(2, 1fr);
		grid-template-columns: 1fr;
		row-gap: .5rem;
		place-content: center;
		place-items: center;
		width: 100%;
	}
	.hmk-free-service-list__link::before {
		grid-area: 2 / 1 / 3 / 2;
		width: 5rem;
		height: 5rem;
		content: "";
		background: #9b7950;
		border-radius: 50%;
	}
	.hmk-free-service-list__link::after {
		grid-area: 2 / 1 / 3 / 2;
		height: 2rem;
		aspect-ratio: cos(30deg);
		margin: auto;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		content: "";
		background: #fff;
	}
}
@media screen and (min-width: 768px) {
	.hmk-free-service {
		row-gap: 2rem;
	}
	.hmk-free-service__ttl {
		column-gap: 2rem;
		font-size: 1.625rem;
	}
	.hmk-free-service__ttl::before,
	.hmk-free-service__ttl::after {
		height: 2em;
		border-left-width: 6px;
	}
	.hmk-free-service-list {
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		padding: 1rem 0;
		border: 2px solid #9b7950;
	}
	.hmk-free-service-list__item:not(:first-child) {
		border-left: 1px solid #9b7950;
	}
}

/* hmk-recommend-purpose */
.hmk-recommend-purpose {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}
.hmk-recommend-purpose__ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #5d534a;
	text-align: center;
}
.hmk-recommend-purpose__ttl::before,
.hmk-recommend-purpose__ttl::after {
	width: 4rem;
	height: 1px;
	content: "";
	background: #5d534a;
}
.hmk-recommend-purpose-list {
	display: grid;
	gap: 1rem;
}
.hmk-recommend-purpose-list__link {
	display: flex;
	column-gap: .5rem;
	align-items: center;
	color: #8c5e31;
}
.hmk-recommend-purpose-list__link--icon {
	position: relative;
}
.hmk-recommend-purpose-list__link--icon::before {
	content: "";
	background: #f2f0ed;
	border-radius: 50%;
}
.hmk-recommend-purpose-list__link--icon::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	background: #5d534a;
	transform: scale(.75);
}
.hmk-recommend-purpose-list__link--icon-1::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_01.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_01.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-2::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_02.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_02.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-3::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_03.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_03.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-4::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_04.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_04.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-5::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_05.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_05.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-6::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_06.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_06.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-7::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_07.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_07.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-8::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_08.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_08.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__link--icon-9::after {
	-webkit-mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_09.svg") no-repeat center center / contain;
			mask: url("/client_info/HARMONICK/view/userweb/images/icon/purpose/icon_09.svg") no-repeat center center / contain;
}
.hmk-recommend-purpose-list__txt {
	display: flex;
	column-gap: .5rem;
	align-items: center;
	color: #8c5e31;
}
.hmk-recommend-purpose-list__txt::before {
	height: .5em;
	aspect-ratio: cos(30deg);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
	background: #e03710;
}
@media screen and (max-width: 767px) {
	.hmk-recommend-purpose__ttl {
		column-gap: 2rem;
	}
	.hmk-recommend-purpose__ttl::before,
	.hmk-recommend-purpose__ttl::after {
		content: none;
	}
	.hmk-recommend-purpose-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.hmk-recommend-purpose-list__link--icon::before,
	.hmk-recommend-purpose-list__link--icon::after {
		width: 2.5rem;
		height: 2.5rem;
	}
	.hmk-recommend-purpose-list__txt {
		font-size: .75rem;
	}
}
@media screen and (min-width: 768px) {
	.hmk-recommend-purpose__ttl {
		column-gap: 4rem;
	}
	.hmk-recommend-purpose-list {
		grid-template-columns: repeat(4, 1fr);
	}
	.hmk-recommend-purpose-list__link--icon::before,
	.hmk-recommend-purpose-list__link--icon::after {
		width: 3rem;
		height: 3rem;
	}
}

/* hmk-recommend */
.hmk-recommend {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}
.hmk-recommend__ttl {
	padding: 2rem 0;
	font-size: 1.625rem;
	color: #fff;
	text-align: center;
	background: #951b25;
}
.hmk-recommend-list {
	display: flex;
	flex-wrap: wrap;
}
.hmk-recommend-list__item {
}
.hmk-recommend-sample-list {
	display: flex;
	column-gap: 1rem;
}
.hmk-recommend-list__img {
	grid-area: 1 / 1 / 2 / 2;
}
.hmk-recommend-list__txt {
	grid-area: 1 / 2 / 2 / 3;
}
.hmk-recommend-sample-list {
	grid-area: 2 / 1 / 3 / 3;
}
.hmk-recommend-list__btn {
	grid-area: 3 / 1 / 4 / 3;
}
.hmk-recommend-list__btn {
	font-size: 1.25rem;
	color: #fff;
	background: linear-gradient(180deg, hsl(357, 72%, 49%) 10%, hsl(355, 64%, 31%) 50%);
	border: none;
}
@media (any-hover: hover) {
	.hmk-recommend-list__btn:hover {
		color: #fff;
		background: linear-gradient(180deg, hsl(357, 72%, 49%) 10%, hsl(355, 64%, 31%) 50%);
		border: none;
		opacity: .6;
	}
}
@media screen and (max-width: 767px) {
	.hmk-recommend__ttl {
		margin: 0;
	}
	.hmk-recommend-list {
		row-gap: 2rem;
	}
	.hmk-recommend-list__wrap {
		position: relative;
		display: grid;
		padding: 1rem;
		grid-template-columns: 1fr 2fr;
		align-items: center;
		grid-template-rows: repeat(2, auto);
		gap: .5rem 1rem;
	}
	.hmk-recommend-list__wrap::after {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 1rem;
		width: 1.5rem;
		height: 1.5rem;
		margin: auto;
		border-top: 3px solid #9e9e9e;
		border-right: 3px solid #9e9e9e;
		transform: rotate(45deg);
		content: "";
	}
	.hmk-recommend-list__item {
		background: #f6f6f6;
	}
}
@media screen and (min-width: 768px) {
	.hmk-recommend__ttl {
		position: relative;
		margin-bottom: 2rem;
	}
	.hmk-recommend__ttl::after {
		position: absolute;
		right: 0;
		bottom: -2rem;
		left: 0;
		height: 2rem;
		aspect-ratio: 1 / cos(30deg);
		margin: auto;
		clip-path: polygon(50% 100%, 100% 0, 0 0);
		content: "";
		background-color: #951b25;
	}
	.hmk-recommend-list {
		row-gap: 4rem;
	}
	.hmk-recommend-list__item {
		display: grid;
		grid-template-columns: 1fr 2fr;
		align-items: center;
		grid-template-rows: repeat(3, auto);
		gap: 1rem 2rem;
		width: 50%;
		padding: 0 5rem;
	}
	.hmk-recommend-list__item:nth-child(even) {
		border-left: 1px solid;
	}
	.hmk-recommend-list__wrap {
		display: contents;
	}
}

/* hmk-top-banner */
.hmk-top-banner {
	display: flex;
	align-items: center;
	column-gap: 2rem;
}
.hmk-top-banner__item {
	display: block;
}
.hmk-top-banner__img {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 767px) {
	.hmk-top-banner {
		padding: .5rem;
		column-gap: .5rem;
	}
}
@media screen and (min-width: 768px) {
	.hmk-top-banner {
		width: 960px;
		padding: 2rem 0;
		margin: auto;
		column-gap: 2rem;
	}
}

.hmk-catalog-info {
}
.hmk-catalog-info--thumb {
	display: flex;
	align-items: center;
}
.hmk-catalog-info__thumb-wrap {
	display: grid;
	gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    flex: 1;
}
.hmk-catalog-info__thumb {
    width: 100%;
}
@media screen and (max-width: 767px) {
	.hmk-catalog-info--thumb {
		flex-wrap: wrap;
		gap: 1rem;
	}
}
@media screen and (min-width: 768px) {
	.hmk-catalog-info--thumb {
		column-gap: 2rem;
	}
}

/* hmk-catalog-recommend */
.hmk-catalog-recommend--gray {
	--hmk-catalog-recommend-color: #726860;
}
.hmk-catalog-recommend__ttl {
	padding: .5em;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background: var(--hmk-catalog-recommend-color);
}
.hmk-catalog-recommend-list__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: 1rem;
}
.hmk-catalog-recommend-list__inner::after {
	width: 1.25rem;
	height: 1.25rem;
	content: "";
	border-top: 4px solid var(--hmk-catalog-recommend-color);
	border-right: 4px solid var(--hmk-catalog-recommend-color);
	transform: rotate(45deg);
}
.hmk-catalog-recommend-list__ttl {
	margin-bottom: 0;
	width: 100%;
	font-size: 1.125rem;
	color: var(--hmk-catalog-recommend-color);
	border-bottom: 1px solid;
}
.hmk-catalog-recommend-list__img {
	width: 60%;
}
.hmk-catalog-recommend-list__img--layer {
	position: absolute;
	top: 10%;
	right: 0;
}
.hmk-catalog-recommend-list__txt {
	color: var(--hmk-catalog-recommend-color);
}
.hmk-catalog-recommend-list__txt--bg {
	padding: 0 .5rem;
	line-height: 2;
	color: #fff;
	background: var(--hmk-catalog-recommend-color);
}

.specialized-site-banner {
	height: auto;
	vertical-align: bottom;
}

.specialized-site-banner--social {
	border: 0.5px solid #e49352;
}

.specialized-site-banner--koden {
	border: 0.5px solid #5b5281;
}

.specialized-site-banner--official {
	border: 0.5px solid #af3737;
}

.specialized-site-banner--oisogi {
	border: 0.5px solid #24457d;
}

/* hk-style拡張 */
.eds-u-wMax1280px {
	max-width: 1280px !important;
}
.eds-u-hMax60vh {
	max-height: 60vh !important;
}
.eds-u-overflow-y-auto {
	overflow-y: auto !important;
}
.eds-u-position-top-100 {
	top: 100% !important;
}
.eds-u-z-10 {
	z-index: 10 !important;
}