@charset "utf-8";

@media (min-width:641px) {}
@media (max-width:640px) {}

/* --------------- header --------------- */


/* --------------- footer --------------- */
footer {margin-top: 18em;}


/* --------------- nav --------------- */


/* --------------- common --------------- */
section {margin: 0 auto;}
section + section {}

h2 {}
h2 span {}


/* --- midashi → mds --- */
.mds_maru {
	position: relative;
	padding-left: 1.875em;}
.mds_maru::before,
.mds_maru::after {
	position: absolute;
	content: '';
	display: block;
	border-radius: 50%;}

/* --- guide --- */
.guide {
	margin-top: 2.067em;}
.guide p {
	text-align: center;
	font-size: 1.2em;
	line-height: 2;
	color: #fff;}
.guide p a {
	padding: 0 0.5em;
	color: currentColor;
	border-bottom: 1px solid currentColor;}
.guide p a:hover {
	opacity: 0.5;}

.guide p + .btn_wk {margin-top: 3.4em;}
.guide .set01 a {
	width: 31.25%;
	max-width: 300px;
	margin-left: 3.125%;}
.guide .set01 a:first-of-type {margin-left: 0;}


.guide h3 {
	font-size: 1.6em;
	letter-spacing: 0.1em;
	color: #fff;}

/* --- guide mds --- */
.guide h3::before {
	top: calc(50% - 0.625em); left: 0;
	width: 1.25em; height: 1.25em;
	background-color: #f7ce5e;}
.guide h3::after {
	top: calc(50% - 0.5em); left: 0.25em;
	width: 1em; height: 1em;
	background-color: #f9eed1;}

@media (min-width:641px) {}
@media (max-width:640px) {
	.guide {width: 90.625%;}
/*
	.guide p br {display: none;}
*/
}

/* --- mds-line --- */
.mds-line {
	position: relative;
	z-index: 5;}

	.mds-line::before,
	.mds-line::after {
		position: absolute;
		left: 0;
		z-index: -5;
		content: '';
		display: block;
		width: 100%;
		background-color: #5a248a;}

	.mds-line::before {
		top: calc(50% - 0.14993em);
		height: 0.09995em;}
	.mds-line::after {
		top: calc(50% + 0.14993em);
		height: 0.04998em;}

.mds-line span {
	display: inline-block;
	padding-right: 1em;}

/* --- mds_maru_little--- */
.mds_maru_little li {
	position: relative;
	padding-left: 1em;}
.mds_maru_little li + li {margin-top: 0.5em;}
.mds_maru_little li::before {
	position: absolute;
	top: 0.4165em; left: 0;
	content: '';
	display: block;
	width: 0.667em; height: 0.667em;
	background: #e56b55;
	border-radius: 50%;}
.mds_maru_little li span {display: block;}

@media (min-width:641px) {}
@media (max-width:640px) {}


/* --- pager --- */
.pager {
	display: flex; flex-wrap: wrap; justify-content: center;
	align-items: flex-start;}

.pager > a {
	position: relative;
	display: block;
	width: 4.498rem; height: 4.498rem;
	font-size: 1.334rem;
	text-align: center;
	margin: 0 1.042%;
	color: #fff;
	border-radius: 50%;}

.pager > a span {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	display: block;}

.pager .koko {color: #5a248a;}
.pager .koko::before {
	position: absolute;
	top: 0; left: 0;
	content: '';
	display: block;
	width: 100%; height: 100%;
	background-color: #f0edfa;
	border-radius: 50%;}


/* --------- pagetitle → pgtitle --------- */
.pgtitle {
	position: relative;
	height: 300px;
	margin-top: 126px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	background-image: url("../img/page/pagetitle01.jpg");
	overflow: hidden;}
.pgtitle::before {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	content: '';
	display: block;
	width: 75%; height: 166.667%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	background-image: url("../img/share/back_deco01_purple.png");}

.pgtitle h2 {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	font-size: 1rem;
	width: 2.267em;}
.pgtitle h2 img {width: 100%;}


@media (min-width:641px) {
	.pgtitle {
		height: 360px;
		margin-top: 120px;}
	.pgtitle::before {max-width: 600px;}
}
@media (max-width:640px) {}

/* --------------- container：itemlist --------------- */

.guide + .ctg_wk {margin-top: 3.4em;}
.ctg_wk + .sec_wk {padding-top: 9.4em;}


/* --- section：ctg_wk --- */
.ctg_wk {
	width: 87.5%;
	margin: 0 auto;
	padding: 2.9999em 5% 2em 5%;
	background-color: #fff;
	border-radius: 8px;}

.ctg_wk h3 {
	font-size: 1.334em;
	color: #5a248a;}
.ctg_wk .mds-line span {background-color: #fff;}

.ctg_wk label small {
	display: inline-block;
	font-size: 0.723em;
	margin-left: 0.385em;}

.ctg_wk [class$="_wk"] + h3 {margin-top: 1.75em;}
.ctg_wk [class$="_wk"] + button {
	display: block;
	max-width: 300px;
	font-size: 1.067em;
	letter-spacing: 0.12496em;
	margin: 3.1241em auto 0;
	padding: 0.344em 0;
	color: #fff;
	background-color: #5a248a;}

/* --- section：sec_wk --- */
.sec_wk {
	position: relative;
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: flex-start;
	overflow: hidden;
	width: 90.625%;}

	.sec_wk::before {
		position: absolute;
		top: -130px; left: calc(50% - 33.334%);
		z-index: -1;
		content: '';
		display: block;
		width: 75%; height: 800px;
		max-width: 800px;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		background-image: url("../img/share/back_deco01_white.png");}

.sec_wk h2 {
	width: 100%;
	font-size: 2.4rem;
	letter-spacing: 0.167em;
	color: #fff;
	text-align: center;}
.sec_wk h3,
.sec_wk li a {color: #fff;}

.sec_wk .postscript {
	width: 100%;
	margin-top: 0.75em;
	color: #fff;
	font-size: 1.2em;
	text-align: center;}

.sec_wk .mds-line span {background-color: #413f64;}
.sec_wk .mds-line::before,
.sec_wk .mds-line::after {background-color: #fff;}

.sec_wk h2 ~ [class^="sec0"] {margin-top: 2.067em;}

.sec_wk .pager {
	width: 100%;
	max-width: 960px;
	margin-left: auto;}

.sec_wk .sec02 + .pager {margin-top: 6em;}

/* --- sec01 ＆ sec02 --- */
.sec_wk .sec01 {width: 16em;}
.sec_wk .sec01 h3 {font-size: 1.2em;}
.sec_wk .sec01 ul + h3 {
	margin: 50px 0 0;}

.sec_wk .sec01 li {margin-top: 1.43325em;}
.sec_wk .sec01 li + li {margin-top: 1.4665em;}
.sec_wk .sec01 li a {
	position: relative;
	font-size: 1.067em;
	padding-left: 1.24971em;}
.sec_wk .sec01 li a::before {
	position: absolute;
	top: 0.3752em; left: 0;
	content: '';
	display: block;	
	width: 0.7498em; height: 0.7498em;
	background-color: #e9e3fa;}


.sec_wk .sec02 {width: 100%;}
.sec_wk .sec02 h3 {font-size: 1.5rem;}

.sec_wk .sec02 {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items: flex-start;}

.sec_wk .sec02 li {width: 47.414%;}
.sec_wk .sec02 li:nth-of-type(n+3) {margin-top: 4em;}

	.sec_wk .sec02 li > a {
		display: block;
		border-radius: 0.534em;}
	.sec_wk .sec02 li > a:hover .atsz {
		opacity: 0.5;}
	.sec_wk .sec02 .atsz {
		overflow: hidden;
		padding: 37.5% 0;
		background: #e9e3fa;
		border-radius: 0.534em;
		transition: 0.3s;}
	.sec_wk .sec02 .atsz .ctg {
		position: absolute;
		bottom: 1em; left: 0;
		font-size: 0.8572em;
		padding: 0.24999em 0.834em 0.24999em 0.556em;
		color: #fff;
		background-color: #5a248a;
		border-top-right-radius: 3em;
		border-bottom-right-radius: 3em;}

.sec_wk .sec02 .text_wk {
	margin-top: 0.959em;
	padding: 0 0.4762em;}

	.sec_wk .sec02 .text_wk a:hover {
		opacity: 0.5;}
	.sec_wk .sec02 .price,
	.sec_wk .sec02 form {
		display: flex; flex-wrap: wrap; justify-content: flex-start;}

	.sec_wk .sec02 .price {
		justify-content: flex-end;
		padding: 0.292em 0 1em 0;
		color: #fff;
		background-repeat: repeat-x;
		background-position: bottom center;
		background-size: auto 4px;
		background-image: url("../img/share/line-dot.png");}

			.sec_wk .price small {font-size: 0.934em;}
			.sec_wk .price span {
				font-size: 1.067em;
				text-align: right;}

				.sec_wk .price span > * {
					display: inline-block;
					margin-left: 3px;}

				.sec_wk .price span b {
					font-size: 1.7495em;
					font-weight: 500;}
				.sec_wk .price span small {font-size: 0.813em;}

.sec_wk .sec02 .text_wk + form {
	align-items: flex-end;
	margin-top: 1.334em;
	padding: 0 1.334em;}

.sec_wk .sec02 form > * {font-size: 1.067em;}

	.sec_wk .sec02 input {
		width: 50%;
		text-align: center;
		padding: 0.375em 1.819%;
		border: solid 2px #ece8fc;}
	.sec_wk .sec02 small {color: #fff;}
	.sec_wk .sec02 button {
		width: 100%;
		padding: 0.375em 0;
		color: #fff;
		background-color: #d4173d;
		border: solid 2px #ea8b9e;}

.sec_wk .sec02 input + small {margin-left: 2.5%;} 
.sec_wk .sec02 small + button,
.sec_wk .sec02 input + button {margin-left: auto;}


/* --- guide riyo --- */
.riyo {
	width: 100%;
	max-width: 960px;
	margin-top: 5.2em;
	margin-left: auto;}

.ctg-item + .riyo {
	width: 87.5%;
	max-width: 1200px;}

.riyo_list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
	margin-top: 0.867em;}
.riyo_list li {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;}
.riyo_list h4 {
	width: 100%;
	padding: 0.1667em 0 0.2778em 0.8333em;
	border-radius: 2px;
	background: #d9d8df;
	font-size: 1.2em;
	line-height: 1.25;}
.riyo_list p {
	width: 100%;
	margin-top: 0.9061em;
	padding: 0 0.9371em;
	font-size: 1.0667em;
	text-align: justify;
	line-height: 1.6875;}
.riyo_list p + p {
	margin-top: 0.25em;}
.riyo_list p.indent {
	padding-left: 0.625em;
	text-indent: -0.625em;}
.riyo_list a {
	margin: 0.563em 0.9371em 0 auto;
	border-bottom: solid 1px currentColor;
	color: #fff;
	font-size: 1.0667em;
	text-align: left;
	line-height: 1.6875;}


@media (max-width:1200px) and (min-width:641px) {
	.itemlist .guide .sp {display: block;}
}
@media (min-width:641px) {
	
	/* --- sec01 ＆ sec02 --- */
	.sec_wk .sec02 {width: calc(100% - 16em);}
	.sec_wk .sec02 li {
		width: 45.834%;
		margin-left: 4.166%;}
	
	.sec_wk .sec02 .atsz .ctg {padding:  0.3921em 1.428em;}
	.sec_wk .sec02 .text_wk {padding: 0 1.334em;}
	
		.sec_wk .sec02 .price > * {
			line-height: 1;}
	
		.sec_wk .sec02 input {width: 22.5%;}
		.sec_wk .sec02 button {width: 60%;}
	
	/* --- guide riyo --- */
	.riyo_list li {width: calc((100% - 40px) / 2);}
}
@media (max-width:640px) {
	
	/* --- sec01 ＆ sec02 --- */
	.sec_wk .sec02 li:nth-of-type(2n) {margin-left: 5.172%;}
	
		.sec_wk .sec02 input {margin-left: auto;}
		.sec_wk .sec02 button {margin-top: 15px;}
}

	
/* --------------- container：itemdetail --------------- */
/* --- section：item --- */
.item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	width: 87.5%;
	max-width: 960px;
	margin: 5.09992em auto 0;
	padding-top: 5.6rem;
	color: #fff;}
.item::before,
.item::after {
	position: absolute;
	content: '';
	display: block;
	border-radius: 50%;
	transform: translateX(-50%);}
.item::before {
	top: 0; left: 50%;
	width: 4em; height: 4em;
	background-color: #f7ce5e;}
.item::after {
	top: 0.667em; left: 50%;
	width: 3.333em; height: 3.333em;
	background-color: #f9eed1;}

.item .slide_wk {
	position: relative;
	width: 53.75%;}
		.item .slide_wk .ctg {
		position: absolute;
		top: 1em; left: 0;
		z-index: 99;
		font-size: 0.934em;
		padding:  0.3921em 1.428em;
		color: #fff;
		background-color: #5a248a;
		border-top-right-radius: 3em;
		border-bottom-right-radius: 3em;}
.item .slide {}
.item .slide_detail {
	overflow: hidden;
	position: relative;
	background: #e9e3fa;
	border-radius: 8px;}
.item .slide_detail::before {
	display: block;
	padding-top: 75%;
	content: '';}
	.item .slide_detail img {
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: 100%;
		max-height: 100%;
		transform: translate(-50%, -50%);}

.item .slide .slick-dots {
	bottom: -33px;}
.item .slide .slick-dots li button::before,
.item .slide .slick-dots li button::before {
	color: #fff;
	font-size: 14px;
	opacity: 1;}
.item .slide .slick-dots li button:hover::before,
.item .slide .slick-dots li button:focus::before,
.item .slide .slick-dots li.slick-active button::before {
	color: #d4173d;}

.item .text_main {
	width: 41.5625%;}

	.item h3 {
		font-size: 2.4em;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: 0.05em;}

	.item .price {
		padding: 1.034em 0 2em 0;
		color: #fff;
		background-repeat: repeat-x;
		background-position: bottom center;
		background-size: auto 4px;
		background-image: url("../img/share/line-dot.png");}

		.item .price > * {
			display: block;
			line-height: 1;}
			.item .price span {
				font-size: 1.6em;
				text-align: right;}

				.item .price span > * {
					display: inline-block;
					margin-left: 3px;}

				.item .price span b {
					font-size: 1.75em;
					font-weight: 500;}
				.item .price span small {font-size: 0.8em;}

.item .text_wk + form {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-end;
	margin-top: 1.6em;}

.item form > * {font-size: 1.067em;}

	.item input {
		width: 22.5%;
		padding: 0.375em 1.819%;
		border: solid 2px #ece8fc;}
	.item small {color: #fff;}
	.item button {
		width: 60%;
		margin-left: auto;
		padding: 0.375em 0;
		color: #fff;
		background-color: #d4173d;
		border: solid 2px #ea8b9e;}

.item input + small {margin-left: 2.5%;} 
.item small + button {margin-left: auto;}

.item .link_area {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	grid: 1em;
	margin-top: 1.333em;}
.item .link_area a {
	padding-bottom: 0.2667em;
	border-bottom: solid 1px currentColor;
	color: #fff;}

.link_area + .naiyou {
	font-size: 1.067em;
	line-height: 1.6875;
	margin-top: 1.531em;}


.text_main + .text_sub {margin-top: 1.634em;}

.item .comment {
	margin-top: 2.733em;
	font-size: 1.2em;
	line-height: 1.5;}

.item .text_sub {width: 100%;}
.text_sub .comment + h4 {padding-top: 2.724em;}
.item .text_sub h4 {
	font-size: 1.334em;
	letter-spacing: 0.125em;}
.item .text_sub h4::before {
	bottom: 0.126em; left: 0;
	width: 1.25em; height: 1.25em;
	background-color: #f7ce5e;}
.item .text_sub h4::after {
	bottom: 0.251em; left: 0.25em;
	width: 1em; height: 1em;
	background-color: #f9eed1;}
.item .text_sub div {
	margin-top: 0.8125em;
	font-size: 1.0667em;
	line-height: 1.6875;}


/* --- section：ctg-item --- */
.ctg-item {}

#ossm {
	padding-top: 8em;}
#ossm::before {
	top: 0; }

.ossm_wk h3 {
	font-size: 1.6rem;}

.item_list h4 + p {
	font-size: 1.6rem;}
.item_list h4 + p small {
	font-size: 0.667em;}

.arrow_box {
	display: none;}


/* --- section：ctg-link --- */
.ctg-link {
	width: 87.5%;
	max-width: 960px;
	margin-top: 7.667em;}

.ctg-link h3 {
	padding-left: 0;
	color: #fff;
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;}
.ctg-link h3::before {
	bottom: 0.1667em; left: 50%;
	z-index: 1;
	width: 0.58333em; height: 0.58333em;
	background-color: #f9eed1;
	transform: translateX(-50%);}
.ctg-link h3::after {
	position: relative;
	width: 0.75em; height: 0.75em;
	margin: 0.25em auto 0;
	background-color: #f7ce5e;}

.ctg-link ul {
	display: flex;
	flex-wrap: wrap;}
.ctg-link li {
	display: flex;
	width: calc(50% - 15px);}
.ctg-link li a {
	padding: 0.85em 1em 0.7em;
	background: #fff;
	border: solid 3px #ece8fc;
	color: #5a248a;
	font-size: 1.333em;
	line-height: 1.25;
	text-align: center;}
.ctg-link li a:hover {
	color: #6611f0;
	background-color: #f7f6e6;
	border-color: #fff;}

.link-yut li a {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;}

.link-kngk li {width: calc((100% - 90px) / 4);}
.link-kngk li a {
	display: block;
	width: 100%;
	text-align: center;}

.ctg-link h3 + ul {
	margin-top: 1.4em;}
.ctg-link ul + h3 {
	margin-top: 2.2083em;}


@media (min-width:641px) {
	.ctg-link ul {gap: 30px;}
}
@media (max-width:640px) {
	.item {
		padding-top: 7.5rem;}

	.item .slide_wk,
	.item .text_main {
		width: 100%;}

	.item .text_main {
		margin-top: 2em;}

	.item .text_sub {
		margin-top: 2em;}

	.ctg-item .item_list {
		width: 78%;
		margin: 0 auto;}

	.arrow_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 95%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, 50%);}
	.arrow_box .prev-arrow,
	.arrow_box .next-arrow {
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		transition: all .3s ease;
		cursor: pointer;
		position:relative;}
	.arrow_box .prev-arrow {
		transform: rotate(180deg);
		margin-right: 20px;}
	.arrow_box .prev-arrow::before,
	.arrow_box .next-arrow::before {
		position:absolute;
		content: '';
		width: 20px;
		height: 20px;
		border-right: 5px solid #fff;
		border-top: 5px solid #fff;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		transform: rotate(45deg);}
	.ctg-link li {width: 100%;}
	.ctg-link li {margin-bottom: 40px;}
	.link-kngk li {width: calc((100% - 40px) / 2);}
	.link-kngk li:nth-of-type(2n) {margin-left: 40px;}
}


/* --------- contents：●●● --------- */
/* --- section：●●● --- */
/* --- ●●● --- */

@media (min-width:1371px) {
	.ctg_wk,
	.sec_wk {max-width: 1200px;}
}
@media (min-width:641px) {}
@media (max-width:640px) {}

	
/* --------------- container：●●● --------------- */
/* --------- contents：●●● --------- */
/* --- section：●●● --- */
/* --- ●●● --- */

@media (min-width:641px) {}
@media (max-width:640px) {}


/* --------------- container：●●● --------------- */
/* --------- contents：●●● --------- */
/* --- section：●●● --- */
/* --- ●●● --- */

@media (min-width:641px) {}
@media (max-width:640px) {}