@charset "utf-8";

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

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


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


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


/* --------------- common --------------- */
section {}
section + section {margin-top: 12em;}

h2 {}
h2 span {}


/* --------- mainimg --------- */
.slide_wk {
	position: relative;
	z-index: 10;
	overflow: hidden;
	margin-top: 126px;}
.slide_wk::before {
	position: absolute;
	z-index: 100;
	top: -5%; left: -29.6875%;
	content: '';
	display: block;
	width: 100%; height: 71.112%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	background-image: url("../img/share/back_deco01_purple.png");}

.slide_wk h2 {
	position: absolute;
	z-index: 200;
	top: 15.556%; left: 16.512%;
	width: 3.067em; height: 30%;
	font-size: 1em;}
.slide_wk h2 img {width: auto; height: 100%;}


/*  slider  */
.slider .imgBox {
	display: block;
	padding: 70.3125% 0;}

@media (min-width:641px) {
	.slide_wk {
		margin-top: 120px;}
	.slide_wk::before {
		top: -16.667%; left: -3.125%;
		width: 41.667%; height: 88.889%;}
	
	.slider .imgBox {padding: 23.4375% 0;}
	.slider .imgBox img + img {display: none;}
}
@media (max-width:640px) {
	.slider .imgBox img {display: none;}
	.slider .imgBox img + img {display: block;}
}

/* --------- contents --------- */


/* --- guide --- */
.guide {margin-top: 2.067em;}
.guide p {
	text-align: center;
	font-size: 1.2em;
	line-height: 2;
	color: #fff;}

.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;}


/* --- intro --- */
.intro h3,
.intro h3 + p {
	text-align: center;
	color: #fff;}
.intro h3 {
	font-size: 1.6em;
	letter-spacing: 0.084em;}
.intro h3 + p {
	font-size: 1.2em;
	line-height: 2;
	margin-top: 1.389em;}

.intro p + .img_wk {margin-top: 3.4em;} 
.intro .img_wk {
	display: flex; flex-wrap: wrap; justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;}

.intro [class^="point"] {
	overflow: hidden;
	position: relative;
	z-index: 0;
	display: block;
	width: 75%; padding: 37.5% 0;
	border: solid 3px;
	border-radius: 50%;}

.intro [class^="point"]:nth-of-type(3n) {margin-right: 0;}

	.intro [class^="point"] img {
		position: absolute;
		z-index: 10;
		top: 0; left: 50%;
		transform: translateX(-50%);
		width: auto; height: 100%;}

	.intro [class^="point"] p {
		position: absolute;
		z-index: 20;
		bottom: 0; left: 0;
		width: 100%;
		font-size: 1.2em;
		text-align: center;
		padding: 0.862em 0 1.584em 0;
		color: #fff;}

.intro .point01 {border-color: #f7ce5e;}
.intro .point01 p {background-color: #f7ce5e;}
.intro .point02 {border-color: #f09456;}
.intro .point02 p {background-color: #f09456;}
.intro .point03 {border-color: #e66b55;}
.intro .point03 p {background-color: #e66b55;}


.intro .img_wk + .btn_wk {margin-top: 4em;}
.intro .set01 {
	gap: 30px;}
.intro .set01 a {
	width: 75%;
	max-width: 540px;}

/* --- ctg_wk --- */
section + .ctg_wk,
.ctg_wk > [class$="_list"] + div {margin-top: 3em;}

.ctg_wk > div {padding-top: 9rem;}

.ctg_ptr [class$="_wk"] {
	padding: 2.934em 0 2.967em 0;
	background-color: #f7f6e6;}

	.ctg_ptr h3 {
		font-size: 1.6em;
		letter-spacing: 0.125em;
		text-align: center;
		color: #5a248a;}
	.ctg_ptr h3 + p {
		font-size: 1.067em;
		line-height: 1.68698;
		text-align: center;
		margin-top: 0.5311em;}


.ctg_ptr + [class$="_list"] {
	display: flex; flex-wrap: wrap; justify-content: center;
	align-items: flex-start;
	width: 90.625%;
	margin: 4em auto 0;}

	.ctg_ptr + [class$="_list"] li {
		width: 47.414%;
		margin-right: 5.173%;
		border: solid 5px #ece8fc;
		border-radius: 4px;
		overflow: hidden;}

	.ctg_ptr + [class$="_list"] a {
		position: relative;
		z-index: 10;
		display: block;
		width: 100%;
		padding: 50% 0;}
	.ctg_ptr + [class$="_list"] a::before {
		position: absolute;
		z-index: 0;
		content: '';
		display: block;
		width: 137.0371%; height: 110px;
		background-color: #4d4b6b;
		opacity: 0.8;
		transition: all 0.3s 0s ease-out;}

	.ctg_ptr + [class$="_list"] a img {
		position: absolute;
		z-index: -5;
		top: 50%; left: 50%;
		transform: translate(-50%,-50%) scale(1.0);
		width: auto; height: 100%;
		opacity: 1.0;
		transition: all 0.3s 0s ease-out;}
	.ctg_ptr + [class$="_list"] img + p {
		position: absolute;
		width: 92.593%;
		color: #fff;}

	/* --- yut_list --- */
	.yut_list a::before {
		top: calc(100% - 70px); left: -30px;
		transform: rotate(-16.5deg);}
	.yut_list img + p {
		bottom: 5.741%; right: 7.408%;
		font-size: 1em;
		letter-spacing: 0.167em;
		text-align: right;}

	/* --- prc_list --- */
	.prc_list a::before {
		top: calc(100% - 50px); left: -30px;
		transform: rotate(16.5deg);}
	.prc_list img + p {
		bottom: 2.963%; left: 7.408%;
		font-size: 3.2rem;
		letter-spacing: 0em;
		text-align: left;}
	.prc_list img + p small {
		display: inline-block;
		font-size: 0.5em;
		letter-spacing: 0.167em;
		margin-left: 5px;}


	.ctg_ptr + [class$="_list"] a:hover::before {
		opacity: 1.0;
		transform: rotate(0);}
	.ctg_ptr + [class$="_list"] a:hover img {
		transform: translate(-50%,-50%) scale(1.05);
		opacity: 0.7;}

@media (min-width:1345px) {
	.ctg_ptr + [class$="_list"] {max-width: 1200px;}
}
@media (min-width:1081px) {
	.guide p .pc {display: none;}
}
@media (min-width:641px) {
	.intro [class^="point"] {
		width: 30.834%;
		padding: 15.417% 0;
		margin-right: 3.75%;}
	
	.ctg_ptr + [class$="_list"] li {
		width: 23.334%;
		margin-right: 2.2084%;}
	.ctg_ptr + [class$="_list"] li:nth-of-type(4n),
	.ctg_ptr + [class$="_list"] li:nth-of-type(3n):last-of-type,
	.ctg_ptr + [class$="_list"] li:nth-of-type(4n+1):last-of-type {margin-right: 0;}
	.ctg_ptr + [class$="_list"] li:nth-of-type(n+5) {margin-top: 2.2084%;}
	
		.yut_list img + p {font-size: 1.2em;}
		.ctg_ptr + .yut_list li {
			width: 25%;}
		.ctg_ptr + .yut_list li:nth-of-type(3n) {margin-right: 0;}
		.ctg_ptr + .yut_list li:nth-of-type(4) {margin-right: 2.2084%;}
		.ctg_ptr + .yut_list li:nth-of-type(n+4) {margin-top: 2.2084%;}
}
@media (max-width:640px) {
	.guide p,
	.intro h3 + p {padding: 0 4.6875%;}
	
	.guide p br {display: none;}
	
	.intro [class^="point"] + [class^="point"] {margin-top: 60px;}
	
	.ctg_ptr + [class$="_list"] li:nth-of-type(2n),
	.ctg_ptr + [class$="_list"] li:nth-of-type(2n+1):last-of-type {margin-right: 0;}
	.ctg_ptr + [class$="_list"] li:nth-of-type(n+3) {margin-top: 30px;}
}
	
/* --------------- ●●● --------------- */
/* --- ●●● --- */

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

/* --------------- ●●● --------------- */
/* --- ●●● --- */

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

/* --------------- ●●● --------------- */
/* --- ●●● --- */

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