@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap');

/*=================================================================
base
=================================================================*/

html.menu-open {
	overflow: clip;
	width: 100%;
	height: 100%;
}

:root {
	--yellow: #ffce00;
	--blue: #85d4d6;
	--pink: #f2567c;
}

.bg-yellow {
	background-color: var(--yellow);
}

.bg-blue {
	background-color: var(--blue);
}

.objectfit-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.objectfit-contain {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.main {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.7;
	overflow: clip;
}

.main *,
.main *::before,
.main *::after {
	box-sizing: border-box;

}

.main .forTAB {
	display: none;
}

.main .forSP {
	display: none;
}

.main .forPC {
	display: block;
}

@media screen and (max-width : 767.9px) {
	.main .forPC {
		display: none;
	}

	.main .forSP {
		display: none;
	}

	.main .forTAB {
		display: block;
	}

	@media screen and (max-width : 430px) {
		.main .forPC {
			display: none;
		}

		.main .forTAB {
			display: none;
		}

		.main .forSP {
			display: block;
		}
	}
}

.iblock {
	display: inline-block;
}

.main figure {
	margin: 0;
	padding: 0;
}


/*=================================================================
nav
=================================================================*/
.page-nav {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	pointer-events: none;
}

.page-nav.show-sp {
	pointer-events: auto;
}

.page-nav .menu-btn {
	--menu_btn-size: min(7vw, 30px);
	--menu_btn-color: #333;
	--menu_btn-borderwidth: 3px;
	width: var(--menu_btn-size);
	height: var(--menu_btn-size);
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
	align-self: center;
	display: none;
	pointer-events: auto;
}

@media screen and (max-width:767.9px) {
	.page-nav .menu-btn {
		display: block;
		z-index: 2;
	}

	.page-nav .menu-btn span {
		width: 100%;
		height: var(--menu_btn-borderwidth);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: var(--menu_btn-color);
		transition: all 0.2s;
	}

	.page-nav .menu-btn::before,
	.page-nav .menu-btn::after {
		content: '';
		display: block;
		width: 100%;
		height: var(--menu_btn-borderwidth);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		transform-origin: center center;
		background-color: var(--menu_btn-color);
		transition: all 0.2s;
	}

	.page-nav .menu-btn::before {
		top: 7%;
	}

	.page-nav .menu-btn::after {
		bottom: 7%;
	}

	.page-nav.show-sp .menu-btn span {
		transform: translate(10%, -50%);
		background: transparent;
	}

	.page-nav.show-sp .menu-btn::before {
		transform: rotate(-45deg) translate(-65%, -60%);
	}

	.page-nav.show-sp .menu-btn::after {
		transform: rotate(45deg) translate(-60%, 130%);
	}
}

@media screen and (min-width:768px) {
	.page-nav-list {
		width: fit-content;
		margin: 0 auto;
		padding: 1em 3em;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0 1em;
		background-color: var(--yellow);
		border-radius: 0 0 10px 10px;
		filter: drop-shadow(1px 1px 2px rgba(30, 30, 30, .3));
		transform: translateY(-110%);
		transition: transform .3s ease;
		pointer-events: auto;
	}

	@media screen and (max-width:840px) {
		.page-nav-list {
			padding: 1em 1.5em;
			gap: 0 .5em;
		}
	}

	.page-nav.show-pc .page-nav-list {
		transform: translateY(0);
	}
}

@media screen and (max-width:767.9px) {
	.page-nav-list {
		width: 100%;
		padding: 2.5em 1em 2em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1em;
		background-color: var(--yellow);
		border-radius: 0 0 10px 10px;
		filter: drop-shadow(1px 1px 2px rgba(30, 30, 30, .3));
		transform: translateY(-110%);
		transition: transform .3s ease;
		z-index: 1;
		pointer-events: auto;
	}

	.page-nav.show-sp .page-nav-list {
		transform: translateY(0);
	}
}

.page-nav-list li {
	cursor: pointer;
	font-size: 1em;
	font-weight: bold;
}

@media screen and (max-width:767.9px) {
	.page-nav-list li {
		font-size: min(1em, 4.5vw);
	}

	.page-nav-list li:nth-child(3),
	.page-nav-list li:nth-child(4) {
		width: 13em;
	}
}

.page-nav-list li a {
	padding: .5em .75em;
	transition: all .3s ease;
}

@media screen and (max-width:767.9px) {
	.page-nav-list li a {}
}

.page-nav-list li a:hover,
.page-nav-list li.current a {
	color: #fff;
}


/*=================================================================
hd title
=================================================================*/
.main .header {}

.main .header .header-title {
	width: min(860px, 90%);
	margin: 0 auto;
	padding: min(120px, 12vw) 0 min(60px, 10vw);
	text-align: center;

}

.main .header .header-title [class*="title"] {
	display: block;
	line-height: 1;
	font-size: 0;

}

.main .header .header-title .title1 {
	width: 42%;
	margin: 0 auto;
}

.main .header .header-title .title-icon {
	width: 18%;
	margin: -2% auto;
}

@media screen and (max-width:767px) {
	.main .header .header-title .title-icon {
		width: 25%;
	}
}

.main .header .header-title span.title2 {
	width: 100%;
	margin: 30px auto 20px;
	display: flex;
	flex-wrap: nowrap;
}

@media screen and (max-width:767px) {
	.main .header .header-title span.title2 {
		margin: 15px auto;
	}
}


.main .header .header-title .title2 img {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.main .header .header-title .title2-1 {
	width: 29.5%;
}

.main .header .header-title .title2-2 {
	width: 31%;
}

.main .header .header-title .title2-3 {
	width: 39.5%;
}

.main .header .header-title .title3 {
	width: 42%;
	min-width: 200px;
	margin: 0 auto;

}

.main .header .main-img {
	width: 100%;
	height: min(600px, 50vw);
	display: flex;
	/* justify-content: center; */
}

.main .header .main-img img {
	width: calc(100% / 3);
	height: 100%;
	flex-grow: 1;
	object-fit: cover;
}

.main .header .main-img img:last-child {
	margin-left: -1px;
}

/* fukidashi */
.main .fukidashi {
	display: block;
	width: max-content;
	margin: 0 auto;
	padding: 0 1.1em;
	letter-spacing: .05em;
	position: relative;
}

.main .fukidashi::before,
.main .fukidashi::after {
	content: '';
	display: block;
	width: 0;
	height: 95%;
	border-left: solid 2px;
	position: absolute;
	bottom: -.2em;
}

.main .fukidashi::before {
	right: 100%;
	transform: rotate(-25deg);
}

.main .fukidashi::after {
	left: 100%;
	transform: rotate(25deg);
}

/* fukidashi-dot */
.main .fukidashi-dot {
	position: relative;
}

.main .fukidashi-dot::before,
.main .fukidashi-dot::after {
	content: '';
	display: block;
	width: .5em;
	height: 3.5em;
	background-image: radial-gradient(var(--period-color) 35%, transparent 35%);
	background-size: .5em .5em;
	position: absolute;
	bottom: 50%;
}

.main .fukidashi-dot::before {
	right: 100%;
	transform: translateY(60%) rotate(-30deg);
}

.main .fukidashi-dot::after {
	left: 100%;
	transform: translateY(60%) rotate(30deg);
}

/*=================================================================
concept
=================================================================*/
.concept-wrp .lead-wrp {
	padding: min(60px, 10vw) 0 min(120px, 15vw);
	text-align: center;

}

.concept-wrp .lead-wrp .topic-award2024 {
	width: fit-content;
	margin: 0 auto;
	padding: 0 1em;
	font-size: min(1.5em, 4.6vw);
	font-weight: bold;
	position: relative;
}

.concept-wrp .lead-wrp .topic-award2024::before,
.concept-wrp .lead-wrp .topic-award2024::after {
	content: '';
	display: block;
	width: .5em;
	height: 3em;
	background-image: radial-gradient(var(--pink) 35%, transparent 35%);
	background-size: .5em .5em;
	position: absolute;
	bottom: 0;

}

.concept-wrp .lead-wrp .topic-award2024::before {
	right: 100%;
	transform: rotate(-30deg);
}

.concept-wrp .lead-wrp .topic-award2024::after {
	left: 100%;
	transform: rotate(30deg);
}

.concept-wrp .lead-wrp .topic-award2024 .kidsdesign-icon {
	width: min(240px, 60vw);
	margin: 0 auto 1em;
}

.concept-wrp .lead-wrp .lead {
	margin-top: 2.5em;
	font-size: min(1.125em, 3.8vw);
	line-height: 2;
}

.concept-wrp .concept {
	padding: min(80px, 15vw) 0 min(120px, 25vw);
	background-color: var(--blue);
	text-align: center;
}

.concept-wrp .concept .concept-title-wrp {
	position: relative;
}

.concept-wrp .concept .concept-title-wrp .concept-title_illust {
	width: min(240px, 42%);
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-45%);
}

.concept-wrp .concept .concept-title-wrp .concept-title {
	padding-top: 1em;
	font-size: min(2.1em, 6.2vw);
	margin-bottom: 1em;
}

.concept-wrp .concept .concept-title-wrp .sub-title {
	font-size: min(1.2em, 4.4vw);
}

.concept-wrp .concept .concept-title-wrp .concept-title span {
	display: block;
	font-size: .7em;
	margin: 1em auto 0;
}

/* kids design */
.concept-wrp .kidsdesign-wrp {
	width: min(860px, 94vw);
	margin: min(60px, 10vw) auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width:767.9px) {
	.concept-wrp .kidsdesign-wrp {
		flex-direction: column;
		gap: 2.5em 0;
	}
}

.concept-wrp .kidsdesign-wrp .kidsdesign-img {
	width: min(340px, 40%);
}

@media screen and (max-width:767.9px) {
	.concept-wrp .kidsdesign-wrp .kidsdesign-img {
		width: min(340px, 75%);
	}
}

.concept-wrp .kidsdesign-wrp .kidsdesign-box {
	width: min(480px, 58%);
	text-align: center;
}

@media screen and (max-width:767.9px) {
	.concept-wrp .kidsdesign-wrp .kidsdesign-box {
		width: 100%;
	}
}

.concept-wrp .kidsdesign-wrp .kidsdesign-box .popup {
	width: fit-content;
	margin: 0 auto 1.5em;
	padding: .75em 1.5em;
	font-size: min(1.25em, 4.2vw);
	text-align: center;
	font-weight: bold;
	background-color: #fff;
	border: solid 2px;
	border-radius: 15px;
	position: relative;
}

.concept-wrp .kidsdesign-wrp .kidsdesign-box .popup::after {
	content: '';
	display: block;
	width: 1.4em;
	height: 1em;
	background: linear-gradient(120deg, #fff calc(50% - 2px), #000 calc(50% - 2px), #000 50%, transparent 50%) no-repeat right top / 50% 100%,
		linear-gradient(-120deg, #fff calc(50% - 2px), #000 calc(50% - 2px), #000 50%, transparent 50%) no-repeat left top / 50% 100%;
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50%;
}

.concept-wrp .kidsdesign-wrp .kidsdesign-box .popup .em {
	/* color: #ffce00; */
	/* background: linear-gradient(180deg, transparent 80%, var(--yellow) 80%); */
	position: relative;
}

.concept-wrp .kidsdesign-wrp .kidsdesign-box .popup::before {
	content: "";
	background: url(../img/focus-icon.svg) no-repeat center / contain;
	position: absolute;
	width: 1.75em;
	height: 1.75em;
	left: calc(100% - .5em);
	bottom: calc(100% - .5em);
	rotate: 45deg;
}

.concept-wrp .kidsdesign-wrp .kidsdesign-box .btn {
	width: fit-content;
	min-width: unset;
	font-size: min(1.04em, 4vw);
	line-height: 1.6;
	background-color: #000;
	color: #fff;
}

@media screen and (max-width:600px) {
	.concept-wrp .kidsdesign-wrp .kidsdesign-box .btn {
		width: 20em;
	}
}


/* kids design 2024 */
.kidsdesign2024-wrp {
	width: min(900px, 90vw);
	margin: min(100px, 20vw) auto 0;
	padding: 3em .5em;
	display: flex;
	flex-wrap: wrap;
	/*     align-items: center; */
	justify-content: center;
	background-color: #fff;
	border-radius: min(30px, 5vw);
	gap: 2em 3em;
}

@media screen and (max-width:767.9px) {
	.kidsdesign2024-wrp {
		padding: min(3em, 7vw) 1em min(4em, 10vw);
	}

	@media screen and (max-width:640px) {
		.kidsdesign2024-wrp {
			gap: 2em 7vw;
		}
	}
}

/* title */
.kidsdesign2024-wrp .kidsdesign2024-title {
	width: 100%;
	text-align: center;
	font-size: min(1.15em, 4.2vw);
}

.kidsdesign2024-wrp .kidsdesign2024-title .item {
	font-size: 1.3em;
}

.kidsdesign2024-wrp .kidsdesign2024-title .item .pink {
	color: var(--pink);
}

.kidsdesign2024-wrp .kidsdesign2024-title .em {
	font-weight: bold;
	font-size: 1.15em;
}

/* logo */
.kidsdesign2024-wrp .kidsdesign2024-logo {
	width: 200px;
}

@media screen and (max-width:640px) {
	.kidsdesign2024-wrp .kidsdesign2024-logo {
		width: min(240px, 62%);
		margin: 0 auto;
	}
}

/* point */
.kidsdesign2024-wrp .award-point {
	width: 24em;
}

@media screen and (max-width:767.9px) {
	.kidsdesign2024-wrp .award-point {
		width: fit-content;
	}

	@media screen and (max-width:640px) {
		.kidsdesign2024-wrp .award-point {
			display: none
		}
	}
}

.kidsdesign2024-wrp .award-point .award-point-title {
	display: block;
	width: max-content;
	margin-bottom: 1em;
	padding: .5em .75em;
	line-height: 1;
	color: #fff;
	background-color: var(--pink);
	font-size: min(.95em, 3.6vw);
	border-radius: 4px;
}

.kidsdesign2024-wrp .award-point ul {
	counter-reset: point;
	display: flex;
	flex-wrap: wrap;
	gap: .5em min(2.5em, 3vw);
	text-align: left;
}

@media screen and (max-width:767.9px) {
	.kidsdesign2024-wrp .award-point ul {
		flex-direction: column;
	}
}

.kidsdesign2024-wrp .award-point ul li {
	font-size: min(1em, 3.4vw);
}

.kidsdesign2024-wrp .award-point ul li::before {
	counter-increment: point;
	content: counter(point)'.';
	padding-right: .2em;
	font-size: 1.1em;
	color: var(--pink);
}

/* pet btn */
.main .btn.pet-btn {
	display: block;
	width: min(640px, 80vw);
	margin: min(100px, 15vw) auto 0;
	padding: 1.1em 2.5em;
	font-size: min(1.3em, 4.2vw);
	font-weight: bold;
	background-color: var(--yellow);
}

.btn.pet-btn .cat {
	width: min(84px, 15vw);
	position: absolute;
	left: 0.45em;
	top: 50%;
	transform: translateY(-55%);
}

@media screen and (max-width:767.9px) {
	.main .btn.pet-btn .cat {
		left: .7em;
		transform: translateY(-65%);
	}
}

.btn.pet-btn .dog {
	width: min(94px, 16vw);
	position: absolute;
	left: 1.5em;
	top: 50%;
	transform: translateY(-65%);
}

/* supervision */
.supervision-wrp {
	width: 100%;
	margin: 100px auto 0;
	position: relative;
}

@media screen and (max-width:767.9px) {
	.supervision-wrp {
		margin: min(120px, 25vw) auto 0;
	}
}

.supervision-wrp .supervision-wrp-inner {
	width: max-content;
	margin: 0 auto;
	padding: 60px min(120px, 10vw);
	display: grid;
	grid-template-areas: 'supervision title' 'supervision copy';
	grid-template-columns: auto auto;
	align-items: center;
	gap: 0 50px;
	transform: translateX(-80px);
	position: relative;
	z-index: 1;
}

@media screen and (max-width:980px) {
	.supervision-wrp .supervision-wrp-inner {
		transform: translateX(0);
	}
}

@media screen and (max-width:767.9px) {
	.supervision-wrp .supervision-wrp-inner {
		display: block;
		width: 92vw;
		margin: 0 auto;
		padding: min(60px, 7vw) min(60px, 5vw) min(60px, 5vw);
		border-radius: 30px;
		transform: unset !important;
	}
}

.supervision-wrp .supervision-wrp-inner::before {
	content: '';
}

@media screen and (min-width:768px) {
	.supervision-wrp .supervision-wrp-inner::before {
		content: '';
		display: block;
		width: 200%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: var(--period-color, var(--yellow));
		border-radius: 500px;
		box-shadow: 1px 1px 3px 0 rgba(30, 30, 30, .2);
		z-index: -1;
	}
}

.supervision-wrp .supervision {
	grid-area: supervision;
	width: fit-content;
	position: relative;
}

.supervision-wrp .supervision .portrait {
	width: min(140px, 25vw);
	margin: 0 auto;
	position: relative;
}

.supervision-wrp .supervision .portrait img {
	width: 100%;
	border: solid min(5px, 1vw) #fff;
	border-radius: 50%;
	overflow: clip;
}

.supervision-wrp .supervision .name-hd,
.supervision-wrp .supervision .name {
	font-size: min(.875em, 2.8vw);
	text-align: center;

}

.supervision-wrp .supervision .name-hd {
	width: fit-content;
	margin: 1em auto .5em;
	padding: 0 .5em;
	border: solid 1px;
}

@media screen and (max-width:767.9px) {
	.supervision-wrp .supervision .name {
		width: 110%;
		margin-left: -5%;
	}
}

.supervision-wrp .supervision .name .em {
	padding: 0 .2em;
	font-size: 1.3em;
}

.supervision-wrp .comment {
	grid-area: copy;
	padding: 0;
}

.supervision-wrp .comment .br {
	display: none;
}

@media screen and (max-width:980px) {
	.supervision-wrp .comment .br {
		display: block;
	}
}

.supervision-wrp .comment .comment-copy {
	font-weight: bold;
	font-size: min(1.125em, 4vw);
	text-align: left;
	line-height: 1.8;
}

.supervision-wrp .comment p:not(.comment-copy) {
	width: 55vw;
	max-width: 470px;
	margin-top: 1em;
	font-size: min(.875em, 3.4vw);
	line-height: 1.8;
	text-align: justify;
}

@media screen and (max-width:767.9px) {
	.supervision-wrp .comment p:not(.comment-copy) {
		width: 100%;
		max-width: 100%;
	}
}

.supervision-wrp .comment p.note {
	font-size: min(.75em, 3.2vw) !important;
	color: #555;
}

.supervision-wrp .illust {
	position: absolute;
}

.supervision-wrp .open-btn {
	grid-area: openbtn;
	display: none;
}

@media screen and (max-width:767.9px) {
	.supervision-wrp .open-btn {
		display: block;
		cursor: pointer;
		visibility: visible;
		opacity: 1;
		transition: opacity .3s ease .35s;
	}

	.supervision-wrp.show .open-btn {
		visibility: none;
		opacity: 0;
		transition: opacity .2s ease 0s;
	}
}

/* concept-wrp supervision-wrp */
.merit-intro .supervision-wrp {
	margin-top: min(80px, 20vw);
}

@media screen and (max-width:767.9px) {
	.merit-intro .supervision-wrp .supervision-wrp-inner {
		/* padding-left: min(60px, 3vw); */
		display: grid;
		grid-template-areas: 'supervision title' 'supervision openbtn' 'copy copy';
		grid-template-columns: auto 1fr;
		background-color: var(--yellow);
		gap: 0 1em;
	}
}

.merit-intro .supervision-wrp .comment-title {
	grid-area: title;
	margin-bottom: 1em;
	font-size: min(1.375em, 3.8vw);
	text-align: left;
}

@media screen and (max-width:767.9px) {
	.merit-intro .supervision-wrp .comment-title {
		margin: 2em 0 0;
		font-size: min(1.375em, 4.6vw);
		text-align: center;
	}
}

.merit-intro .supervision-wrp .open-btn .btn {
	display: block;
	width: fit-content;
	padding: .75em 1.5em;
	margin-inline: auto;
	background-color: #fff;
	border-radius: 3em;
	text-align: center;
	align-self: center;
}

.merit-intro .supervision-wrp .open-btn img {
	display: inline-block;
	width: 7em;
	font-size: min(1em, 3.2vw);
}

@media screen and (max-width:767.9px) {
	.merit-intro .supervision-wrp .supervision-wrp-inner .comment-inner {
		padding: 0;
		background-color: var(--period-color, var(--yellow));
	}

	.merit-intro .supervision-wrp .comment .comment-copy {
		margin-top: 2em;
	}
}

.merit-intro .supervision-wrp .illust {
	width: min(27vw, 340px);
	left: 90%;
	bottom: -3%;
}

@media screen and (max-width:980px) {
	.merit-intro .supervision-wrp .illust {
		left: auto;
		right: 2%;
		bottom: auto;
		top: 0;
		transform: translateY(-20%);
	}
}

@media screen and (max-width:767.9px) {
	.merit-intro .supervision-wrp .illust {
		width: min(35vw, 230px);
		left: auto;
		right: 4%;
		bottom: auto;
		top: 0;
		transform: translateY(-50%);
	}
}

/* btn */
.main .btn {
	display: inline-block;
	min-width: min(300px, 100%);
	padding: .75em 3em;
	line-height: 1;
	text-align: center;
	border-radius: 100vmax;
	cursor: pointer;
	position: relative;

}

.main .btn .arrow {
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	width: 1.5em;
}

.main .btn .arrow::before,
.main .btn .arrow::after {
	content: '';
	display: block;
	height: 0;
	border-bottom: 2px solid;
	position: absolute;
	top: 50%;
	right: 0;
}

.main .btn .arrow::before {
	width: 100%;
}

.main .btn .arrow::after {
	width: .75em;
	transform: rotate(30deg);
	transform-origin: bottom right;
}

/*=================================================================
merit
=================================================================*/
/* intro --------------------------------*/
.merit-intro {
	padding: min(60px, 10vw) 0 min(120px, 12vw);
	text-align: center;
	background-color: #f4f4f4;
}

.merit-intro .merit-title-wrp {
	position: relative;
}

.merit-intro .merit-title-wrp .merit-title_illust {
	width: min(220px, 42%);
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-40%);
}

.merit-intro .merit-title-wrp .merit-title {
	padding-top: 1em;
	font-size: min(2.1em, 6.2vw);
}

.merit-intro .merit-title-wrp .merit-title span {
	display: block;
	font-size: .7em;
	margin: 0 auto;
}

.merit-intro .merit-main_img {
	width: min(990px, 90vw);
	margin: min(72px, 7vw) auto;
	border-radius: min(30px, 3vw);
	overflow: clip;
}

.merit-intro .merit-copy {
	margin-top: min(80px, 10vw);
	font-weight: bold;
	font-size: min(1.5em, 4.4vw);

}

.merit-intro .merit-subcopy {
	margin-top: 5em;
	font-size: min(1.135em, 4vw);
	line-height: 2;
}

/* period navi */
.merit-intro .period-navi {
	width: min(980px, 94vw);
	margin: min(80px, 5vw) auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.merit-intro .period-box {
	width: min(460px, 48%);
	height: min(460px, 48%);
	padding-bottom: .5em;
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: solid min(9px, 2vw) var(--period-color);
	background-color: #fff;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}

@media screen and (max-width:640px) {
	.merit-intro .period-box {
		width: min(400px, 100%);
		margin: 1em auto 0;
	}
}

.period-box01 {
	--period-color: var(--yellow);
}

.period-box02 {
	--period-color: var(--blue);
}

.period-title-wrp {
	width: 100%;
	position: relative;
}

.merit-intro .period-box .period-title-wrp .period-num {
	position: absolute;
	right: 88%;
	bottom: 88%;
	transform: translate(50%, 50%);
}

@media screen and (max-width:940px) and (min-width:639.1px) {
	.merit-intro .period-box .period-title-wrp .period-num {
		right: 85%;
		bottom: 95%;
	}
}

.period-title-wrp .period-num {
	width: 2.5em;
	height: 2.5em;
	display: grid;
	place-items: center;
	background-color: var(--period-color);
	border-radius: 50%;
	font-size: 2em;
	font-size: min(2em, 3.6vw);
}

@media screen and (max-width:640px) {
	.period-title-wrp .period-num {
		font-size: min(2em, 8vw);
	}
}

.period-title-wrp .period-num img {
	display: inline-block;
	width: 1em;
	height: auto;
	font-size: 1em;
	line-height: 1;
}

.period-title-wrp .period-subtitle {
	width: fit-content;
	margin: 1em auto .5em;
	padding: 0 .75em;
	font-size: min(1em, 3.2vw);
	font-weight: bold;
	position: relative;
}

.period-title-wrp .period-subtitle::before {
	transform: translateY(55%) rotate(-20deg);
}

.period-title-wrp .period-subtitle::after {
	transform: translateY(55%) rotate(20deg);
}

.merit-intro .period-box .period-title-wrp .period-subtitle {
	margin: -.5em auto .5em;
}

.merit-intro .period-box .period-title-wrp .period-title {
	font-size: min(1.375em, 2.6vw);
	font-weight: bold;
}

@media screen and (max-width:640px) {
	.merit-intro .period-box .period-title-wrp .period-title {
		font-size: min(1.375em, 4.4vw);
	}
}

.merit-intro .period-box .period-copy {
	margin-top: .5em;
	font-size: min(1em, 1.75vw);
}

@media screen and (max-width:640px) {
	.merit-intro .period-box .period-copy {
		font-size: min(1em, 3.6vw);
	}
}

.merit-intro .period-box .illust {
	width: min(230px, 55%);
	margin: 5px 0;
}

.merit-intro .period-box .btn {
	width: min(250px, 55%);
	min-width: 0;
	margin-top: .75em;
	padding: .75em 1em;
	background-color: var(--period-color);
	font-size: min(1em, 1.5vw);
}

@media screen and (max-width:640px) {
	.merit-intro .period-box .btn {
		margin-top: .5em;
		font-size: min(1em, 3.6vw);
	}
}

.merit-intro .period-box .btn::after {
	content: '';
	display: block;
	width: 2em;
	aspect-ratio: 1/1;
	background-image: url(../img/arrow.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	position: absolute;
	left: 50%;
	top: calc(100% + 1em);
	transform: translateX(-50%) rotate(90deg);
}

@media screen and (max-width:640px) {
	.merit-intro .period-box .btn::after {
		width: 5vw;
		top: calc(100% + 3vw);
	}
}

/* period wrp --------------------------------*/
.period-wrp {
	padding: min(120px, 20vw) 0 0;
}

.period-wrp .period-subtitle {
	text-align: center;
	font-size: min(1.5em, 4.8vw);
}

.period-wrp .period-title {
	text-align: center;
	font-size: min(2.25em, 6.2vw);
}

.period-wrp .period-title-wrp .period-num {
	margin: 0 auto .5em;
}

.period-wrp .period-intro {
	width: min(940px, 90vw);
	margin: min(60px, 10vw) auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2em 0;
}

.period-wrp .period-intro .text-box {
	width: 44%;
}

@media screen and (max-width:767.9px) {
	.period-wrp .period-intro .text-box {
		width: 100%;
		order: 2;
	}
}

.period-wrp .period-intro .text-box .period-copy {
	font-size: min(1.6em, 5vw);
	font-weight: bold;
}

.period-wrp .period-intro .text-box p:not(.period-copy) {
	margin-top: 1em;
	font-size: min(1em, 3.6vw);
	line-height: 2;
	text-align: justify;
}

.period-wrp .period-intro figure {
	width: 50%;
	border-radius: 15px;
	overflow: clip;
	background-color: #ccc;
}

@media screen and (max-width:767.9px) {
	.period-wrp .period-intro figure {
		width: 100%;
		order: 1;
	}
}


/* advice */
@media screen and (max-width:767.9px) {
	.period-wrp .supervision-wrp.advice .supervision-wrp-inner {
		padding: 0 0 min(60px, 7vw) !important;
		background-color: transparent !important;
	}

	.period-wrp .supervision-wrp.advice .supervision {
		border-radius: 50%;
		position: absolute;
		left: 3%;
		top: 0;
		transform: translateY(-50%);
	}
}

.period-wrp .supervision-wrp.advice .supervision .portrait::before {
	content: '';
	display: block;
	width: 130%;
	padding-top: 40%;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -65%);
	background-color: #fff;
	mask-image: url(../img/advice-title.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 100%;
}

@media screen and (max-width:767.9px) {
	.period-wrp .supervision-wrp.advice .supervision .portrait::before {
		width: 110%;
		transform: translate(-50%, -60%);
		background-color: var(--period-color, #fff);
	}
}

@media screen and (max-width:767.9px) {
	.period-wrp .supervision-wrp.advice .supervision .portrait img {
		border: solid min(10px, 1.5vw) var(--period-color, #fff);
	}
}

.period-wrp .supervision-wrp.advice .open-btn {
	width: min(6em, 22vw);
	padding-top: 70%;
	position: absolute;
	left: 115%;
	top: -5%;
	background-color: var(--period-color, #fff);
	mask-image: url(../img/read-advice-btn.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 100%;
}

.supervision-wrp .supervision-wrp-inner .comment .close-btn {
	display: none;
}

@media screen and (max-width:767.9px) {
	.supervision-wrp .supervision-wrp-inner .comment {
		display: none;
		overflow: clip;
	}

	.supervision-wrp .supervision-wrp-inner .comment-inner {
		padding: min(100px, 13vw) min(60px, 7vw) min(60px, 4vw);
		border-radius: 30px;
		background-color: var(--period-color, var(--yellow));
	}

	.supervision-wrp .supervision-wrp-inner .comment .close-btn {
		display: block;
		width: 6.5em;
		margin-left: auto;
		padding: .5em;
		cursor: pointer;
	}
}

/* advice.period01 */
.period-wrp.period01 .supervision-wrp.advice .supervision-wrp-inner {
	padding: 60px min(300px, 20vw) 60px 60px;
	transform: translateX(-30px);

}

@media screen and (min-width:768px) {
	.period-wrp.period01 .supervision-wrp.advice .supervision-wrp-inner::before {
		left: auto;
		right: 0;
	}
}

.period-wrp.period01 .supervision-wrp.advice .illust {
	width: min(25vw, 290px);
	right: -4%;
	bottom: -5%;
	transform: translate(3%, 7%);
}

@media screen and (max-width:980px) {
	.period-wrp.period01 .supervision-wrp.advice .illust {
		left: auto;
		right: 12%;
		bottom: auto;
		top: 0;
		transform: translateY(-35%);
		transform: translate(0, -40%);
	}
}

@media screen and (max-width:767.9px) {
	.period-wrp.period01 .supervision-wrp.advice .illust {
		width: min(30vw, 380px);
		right: 5%;
		transform: translateY(-55%);
	}
}

/* advice.period02 */
.period-wrp.period02 .supervision-wrp.advice .illust {
	width: min(30vw, 380px);
	left: 85%;
	bottom: -3%;
}

@media screen and (max-width:980px) {
	.period-wrp.period02 .supervision-wrp.advice .illust {
		left: auto;
		right: 2%;
		bottom: auto;
		top: 0;
		transform: translateY(-35%);
	}
}

@media screen and (max-width:767.9px) {
	.period-wrp.period02 .supervision-wrp.advice .illust {
		width: min(35vw, 380px);
		right: 3%;
		/* top: 3%; */
		transform: translateY(-60%);

	}
}

/* pickup wrp */
.period-wrp .pickup-wrp {
	margin-top: min(120px, 12vw);
	padding: min(80px, 12vw) 0;
	background-color: var(--period-color);
}

.period-wrp .pickup-wrp .pickup-title {
	text-align: center;
	font-size: min(1.625em, 5.6vw);

}

.period-wrp .pickup-wrp .pickup-title .pickup-icon {
	display: block;
	width: 120px;
	margin: 0 auto .5em;

}

.period-wrp .pickup-wrp .pickup-title .fukidashi {
	display: block;
	margin: .25em auto 0;
}

.period-wrp .pickup-wrp .pickup-title .em {
	padding: 0 .1em;
	letter-spacing: .1em;
	font-size: 1.35em;
	font-weight: bold;
	/* 	text-emphasis: filled dot #fff; */
	position: relative;
}

.period-wrp .pickup-wrp .pickup-title .em::before {
	content: '';
	display: block;
	width: 100%;
	height: .5em;
	background-image: radial-gradient(#fff .15em, transparent .15em);
	background-size: 46% 1em;
	background-position: left center;
	position: absolute;
	bottom: 80%;
}

.period-wrp .pickup-wrp .pickup-box {
	width: min(1000px, 90vw);
	margin: min(100px, 20vw) auto 0;
	position: relative;
}

.period-wrp .pickup-wrp .pickup-title+.pickup-box {
	margin-top: min(100px, 17vw);
}

.period-wrp .pickup-wrp .pickup-box-inner {
	width: 100%;
	min-height: 320px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	background-color: #fff;
	border-radius: 15px;
	overflow: clip;
}

@media screen and (max-width:767.9px) {
	.period-wrp .pickup-wrp .pickup-box-inner {
		min-height: auto;
	}
}

.period-wrp .pickup-wrp .pickup-box .pickup-img {
	width: 50%;
	background-color: #ccc;
	position: relative;
}

@media screen and (min-width:768px) {
	.period-wrp .pickup-wrp .pickup-box:nth-child(even) .pickup-img {
		order: 2;
	}
}

@media screen and (max-width:767.9px) {
	.period-wrp .pickup-wrp .pickup-box .pickup-img {
		width: 100%;
		height: 62vw;
	}
}

.period-wrp .pickup-wrp .pickup-box .pickup-img.atari::before {
	content: 'アタリ';
	display: inline-block;
	background-color: #e95a0c;
	color: #fff;
	position: absolute;
	bottom: 1em;
	left: 1em;
	padding: .5em;
	font-size: .8em;
	z-index: 2;
}

.period-wrp .pickup-wrp .pickup-box figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.period-wrp .pickup-wrp .pickup-box .pickup-hd {
	padding: .75em 1.5em;
	position: absolute;
	right: 1em;
	top: -1.8em;
	font-size: min(1.135em, 3.8vw);
	font-weight: bold;
	background-color: #fff;
	border: solid 2px;
	border-radius: 3em;
	z-index: 3;
}

.period-wrp .pickup-wrp .pickup-box:nth-child(odd) .pickup-hd {
	left: 1em;
	right: auto;
}

.period-wrp .pickup-wrp .pickup-box .pickup-hd::before {
	content: '';
	width: 10em;
	aspect-ratio: 1/.17;
	position: absolute;
	bottom: 105%;
	left: 50%;
	background: url(../img/pickup-osusume.svg) no-repeat center / contain;
	transform: translateX(-50%);
}

.period-wrp .pickup-wrp .pickup-box .pickup-hd::after {
	content: '';
	display: block;
	width: 1.2em;
	height: 1.2em;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background: linear-gradient(-45deg, #000 calc(50% + 3px), #fff calc(50% + 3px));
	border-left: solid 2px;
	position: absolute;
	top: 99%;
	right: 2.5em;
}

.period-wrp .pickup-wrp .pickup-box:nth-child(odd) .pickup-hd::after {
	left: 2.5em;
	right: auto;
	transform: rotateY(180deg);
}

.period-wrp .pickup-wrp .pickup-box .text-box {
	width: 50%;
	padding: min(2.5em, 5vw);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media screen and (min-width:768px) {
	.period-wrp .pickup-wrp .pickup-box:nth-child(even) .text-box {
		order: 1;
	}
}

@media screen and (max-width:767.9px) {
	.period-wrp .pickup-wrp .pickup-box .text-box {
		width: 100%;
		padding: min(1.5em, 5vw) min(2em, 7vw);
	}
}

.period-wrp .pickup-wrp .pickup-box .text-box .pickup-copy {
	font-size: min(1.25em, 3.8vw);
	line-height: 2;
}

.period-wrp .pickup-wrp .pickup-box .text-box .pickup-copy .em {
	display: inline-block;
	padding: 0 .1em;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1;
}

.period-wrp .pickup-wrp .pickup-box .text-box .pickup-text {
	margin-top: min(1.5em, 2vw);
	font-size: min(.875em, 3.2vw);
	line-height: 1.8;
	text-align: justify;
}

.period-wrp .pickup-wrp .pickup-box .text-box .item-box {
	margin-top: min(2em, 7vw);
	padding-top: min(1.5em, 5vw);
	border-top: dotted 2px var(--period-color);
	display: grid;
	grid-template-areas: 'name img' 'text img';
	grid-template-columns: 1fr 36%;
	gap: .75em 1.5em;

}

.period-wrp .pickup-wrp .pickup-box .text-box .item-box .item-img {
	grid-area: img;
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 1.5em;
	position: relative;
}

.period-wrp .pickup-wrp .pickup-box .pickup-img.credit::after,
.period-wrp .pickup-wrp .pickup-box .text-box .item-box .item-img.credit::after {
	content: '株式会社LIXIL';
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: min(.7em, 2.5vw);
	line-height: 1;
	padding: .25em .3em .25em .7em;
	background-color: rgba(255, 255, 255, .9);
}

.period-wrp .pickup-wrp .pickup-box .pickup-img.credit::after {
	padding: .35em .3em .35em .75em;
}

.period-wrp .pickup-wrp .pickup-box .text-box .item-box .item-name {
	grid-area: name;
	font-size: min(1em, 4vw);
}

.period-wrp .pickup-wrp .pickup-box .text-box .item-box .item-name .sml {
	font-size: .8em;
}

.period-wrp .pickup-wrp .pickup-box .text-box .item-box .item-name .item-cat {
	display: block;
	width: max-content;
	margin-bottom: .75em;
	padding: .25em .5em;
	line-height: 1;
	border: solid 1px var(--period-color);
	background-color: var(--period-color);
	font-size: .8em;
	border-radius: 4px;
}

.period-wrp .pickup-wrp .pickup-box .text-box .item-box .item-text {
	grid-area: text;
	font-size: min(.875em, 3.2vw);
}

.main .ruby {
	padding-top: .5em;
	position: relative;
	line-height: 1;
}

.main .ruby::after {
	content: attr(data-ruby);
	width: max-content;
	font-weight: normal;
	font-size: .4em;
	position: absolute;
	bottom: 65%;
	left: 50%;
	transform: translateX(-50%);
}

/* period01 --------------------------------*/
.period-wrp.period01 {
	--period-color: var(--yellow);
}

/* period02 --------------------------------*/
.period-wrp.period02 {
	--period-color: var(--blue);
}

/* planning wrp --------------------------------*/
.planning-wrp {
	padding: min(100px, 12vw) 0;
	background-color: #faf7ed;
}

.planning-wrp .planning-title {
	width: max-content;
	margin: min(60px, 10vw) auto 0;
	padding: 0 1.5em;
	text-align: center;
	font-size: min(1.375em, 4.2vw);
	position: relative;
}

@media screen and (max-width:640px) {
	.planning-wrp .planning-title {
		font-size: min(1.375em, 3.6vw);
	}
}

.planning-wrp .planning-title .planning-icon {
	display: block;
	width: min(230px, 50vw);
	/* 	margin: 0 auto .25em; */
	position: absolute;
	left: 50%;
	bottom: 105%;
	transform: translateX(-50%);
}

@media screen and (max-width:640px) {
	.planning-wrp .planning-title .planning-icon {
		width: min(180px, 40vw);
		margin: 0 auto -.25em;
	}
}

.planning-wrp .planning-info {
	margin-top: min(60px, 7vw);
}

.planning-wrp .planning-info .info-title {
	padding: 0 1em;
	font-size: min(1.875em, 5vw);
	text-align: center;
	font-weight: normal;
}

.planning-wrp .planning-info .size {
	width: max-content;
	margin: 1em auto 0;
	padding: .25em 2em;
	border: solid 2px;
	font-weight: bold;
	font-size: min(1.3em, 4.2vw);
}

/* planning-box */
.planning-wrp .planning-box {
	width: min(1000px, 90vw);
	margin: min(60px, 7vw) auto 0;
	display: grid;
	grid-template-areas: 'fig copy' 'fig txt' 'fig btn';
	grid-template-columns: 50% 1fr;
	grid-template-rows: 1fr auto 1fr;
	gap: 1.5em 8%;

}

@media screen and (max-width:767.9px) {
	.planning-wrp .planning-box {
		display: grid;
		grid-template-areas: 'fig fig' 'copy copy' 'txt txt' 'btn btn';
		grid-template-columns: auto;
		grid-template-rows: 1fr auto auto;
		gap: 1.5em 5%;
	}
}

.planning-wrp .planning-box figure {
	grid-area: fig;
	position: relative;
}

@media screen and (max-width:767.9px) {
	.planning-wrp .planning-box figure {
		max-width: 500px;
		margin: 0 auto;
	}
}

.planning-wrp .planning-box figure .line {
	position: absolute;
	z-index: 1;
}

@media screen and (max-width:767.9px) {
	.planning-wrp .planning-box figure .line {
		display: none;
	}
}

.planning-wrp .planning-box .planning-copy {
	grid-area: copy;
	font-size: min(1.25em, 4vw);
	font-weight: bold;
	align-self: flex-end;
}

@media screen and (max-width:767.9px) {
	.planning-wrp .planning-box .planning-copy {
		align-self: center;
	}
}

.planning-wrp .planning-box .planning-text {
	grid-area: txt;
	font-size: min(.875em, 3.4vw);
	line-height: 1.8;
	text-align: justify;
}

.planning-wrp .planning-box .btn-wrp {
	grid-area: btn;
	margin-top: 1.5em;
}

.planning-wrp .planning-box .btn {
	background-color: var(--period-color);
	font-weight: bold;
}

@media screen and (max-width:767.9px) {
	.planning-wrp .planning-box .btn {
		display: block;
		width: max-content;
		margin: 0 auto;
	}
}

/* period01 */
.period-wrp.period01 .planning-wrp .planning-box figure .line {
	width: 77%;
	right: -12%;
	top: 23%;
}

/* period02 */
.period-wrp.period02 .planning-wrp .planning-box figure .line {
	width: 66%;
	right: -10%;
	top: 22%;
}

/* event cv wrp --------------------------------*/
.event-cv-wrp {
	padding: min(100px, 15vw) 0;
	background-color: #f4f4f4;
}

.event-cv-wrp .event-cv {
	width: min(1000px, 90vw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #fff;
	border: solid 5px var(--period-color);
	border-radius: 10px;
	overflow: clip;
}

.event-cv-wrp .event-cv figure {
	width: 50%;
	background-color: #ccc;
}

.event-cv-wrp .event-cv figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.event-cv-wrp .event-cv .text-box {
	width: 50%;
	padding: 3em 1em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width:767.9px) {
	.event-cv-wrp .event-cv figure {
		width: 100%;
		order: 1;
	}

	.event-cv-wrp .event-cv .text-box {
		width: 100%;
		padding: 2em 1em;
		order: 2;
	}
}

.event-cv-wrp .event-cv .text-box p {
	text-align: center;
	font-size: min(1.25em, 4.2vw);
	font-weight: bold;
}

.event-cv-wrp .event-cv .text-box .btn {
	margin-top: 3em;
	background-color: var(--period-color);
	font-weight: bold;
}

@media screen and (max-width:767.9px) {
	.event-cv-wrp .event-cv .text-box .btn {
		margin-top: 1em;
		line-height: 1.3;
	}
}

/*=================================================================
cv
=================================================================*/
.cv-wrp {
	padding: min(100px, 15vw) 0;
}

.cv-wrp .cv-title-wrp .cv-title {
	text-align: center;
	font-size: min(1.875em, 5vw);
	font-weight: normal;
}

.cv-wrp .cv-title-wrp .cv-title .fukidashi {
	margin-bottom: .5em;
	font-size: .8em;
}

.cv-wrp .cv-hash-wrp {
	width: min(1000px, 90vw);
	margin: min(100px, 20vw) auto 0;
	padding: min(5em, 14vw) 0 min(35vw, 370px);
	position: relative;
	z-index: auto;
}

.cv-wrp .cv-img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	border-radius: min(30px, 5vw);
	overflow: clip;
}

.cv-wrp .cv-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom center;
}

.cv-wrp .cv-hash-wrp .cv-subtitle {
	width: max-content;
	padding: .5em 2.5em;
	font-size: min(1.45em, 4.2vw);
	text-align: center;
	line-height: 1.4;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border: solid min(6px, 1.5vw) var(--yellow);
	border-radius: 3em;
	z-index: 2;
}

@media screen and (max-width:767.9px) {
	.cv-wrp .cv-hash-wrp .cv-subtitle {
		padding: .5em 1.5em;
	}
}

.cv-wrp .cv-hash-wrp .cv-subtitle .br {
	display: none;
}

@media screen and (max-width:980px) {
	.cv-wrp .cv-hash-wrp .cv-subtitle .br {
		display: block;
	}
}

.cv-wrp .cv-hash-wrp .hash-list {
	width: 100%;
	padding: 0 1em;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: min(1.5em, 3vw);
	position: relative;
	z-index: 2;
}

.cv-wrp .cv-hash-wrp .hash-list li {
	padding: .75em 1.25em;
	line-height: 1;
	border-radius: 2em;
	font-weight: bold;
	font-size: min(1em, 3.6vw);
	background-color: #fff;
}

.cv-wrp .cv-hash-wrp .hash-list li::before {
	content: '#';
}

.cv-wrp .cv-hash-wrp .cat {
	width: min(130px, 13vw);
	position: absolute;
	right: min(40px, 1vw);
	top: 0;
	transform: translateY(-70%);
	z-index: 3;
}

@media screen and (max-width:767.9px) {
	.cv-wrp .cv-hash-wrp .cat {
		width: min(100px, 17vw);
		transform: translateY(-67%);
	}
}

.cv-wrp .cv-btn-box {
	width: min(660px, 90vw);
	margin: min(60px, 10vw) auto 0;
	padding: 24px;
	border: solid 1px #eee;
	border-radius: 10px;
}

.cv-wrp .cv-btn-box .btn {
	width: min(500px, 100%);
	display: block;
	margin: 1.5em auto;
	padding: 1em 2em;
	font-size: min(1.3em, 4vw);
	font-weight: bold;
	background-color: var(--yellow);
}

.cv-wrp .cv-btn-box .note {
	width: fit-content;
	margin-inline: auto;
	font-size: .82em;
}

.cv-wrp .cv-btn-box .note li {
	margin-bottom: .1em;
	padding-left: 1em;
	position: relative;
}

.cv-wrp .cv-btn-box .note li::before {
	content: '';
	display: block;
	width: .8em;
	height: .8em;
	border-radius: 50%;
	background-color: currentColor;
	position: absolute;
	top: .5em;
	left: 0;
}

/*=================================================================
step
=================================================================*/
.step-wrp {
	padding: min(100px, 15vw) 0;
	text-align: center;
	background-color: #faf7ed;
}

.step-wrp .step-title {
	font-size: min(1.5em, 4.8vw);
}

.step-wrp .step-title .fukidashi {
	font-size: 1.25em;
}

.step-wrp .step {
	width: min(990px, 90vw);
	margin: min(60px, 12vw) auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5em 0;
}

.step-wrp .step li {
	width: min(260px, 31%);
	text-align: center;
	position: relative;
}

@media screen and (max-width:767.9px) {
	.step-wrp .step li {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0 5%;
	}
}

.step-wrp .step li:not(:last-child)::after {
	content: '';
	display: block;
	width: 1.2em;
	height: 1.2em;
	border-top: solid 3px #e67832;
	border-right: solid 3px #e67832;
	position: absolute;
	top: 3em;
	left: calc(100% + min(50px, 2.5vw));
	transform: translateX(-50%) rotate(45deg);
}

@media screen and (max-width:767.9px) {
	.step-wrp .step li:not(:last-child)::after {
		top: calc(100% + 2.5em);
		left: 50%;
		transform: translateY(-50%) rotate(135deg);
	}
}

.step-wrp .step li .step-hd-wrp {
	text-align: center;
}

@media screen and (max-width:767.9px) {
	.step-wrp .step li .step-hd-wrp {
		width: 50%;
		min-width: fit-content;
	}
}

.step-wrp .step li .step-hd {
	font-size: min(1.125em, 3.6vw);
	line-height: 1.5;
}

.step-wrp .step li .step-hd .step-num {
	display: block;
	width: min(120px, 100%);
	margin: 0 auto 1em;
}

.step-wrp .step li .step-hd .em {
	padding: 0 .1em;
	font-size: 1.25em;
	color: #e67832;
}

.step-wrp .step li p {
	margin: 1em auto 2em;
	font-size: min(1em, 3.6vw);
}

@media screen and (max-width:767.9px) {
	.step-wrp .step li p {
		margin: 1em auto 0;
	}
}

.step-wrp .step li p .sml {
	font-size: .8em;
}

.step-wrp .step li figure {
	width: min(256px, 90%);
}

@media screen and (max-width:767.9px) {
	.step-wrp .step li figure {
		width: min(256px, 45%);
		transform: translateY(-12%);
	}

	.step-wrp .step li:nth-child(2) figure {
		order: 1;
	}

	.step-wrp .step li:nth-child(2) .step-hd-wrp {
		order: 2;
	}
}


/* pickup --------------------------------*/
.main .pickup {
	background-color: #feecbb;
}

.main .pickup .inner {
	padding: min(100px, 15vw) 30px;
}

.main .pickup .pickup-title {
	width: fit-content;
	margin: 0 auto;
	padding-bottom: .75em;
	text-align: center;
	font-size: min(1.75em, 5.4vw);
	color: var(--main-color);
	line-height: 1.4;
	border-bottom: solid 2px;
}

.main .pickup .pickup-title br {
	display: none;
}

@media screen and (max-width:640px) {
	.main .pickup .pickup-title br {
		display: block;
	}
}

.main .pickup .pickup-title .en {
	display: block;
	margin: 0 auto 1.2em;
	color: #e95a0c;
	font-size: .9em;
}

.main .pickup .pickup-banner {
	width: min(1000px, 100%);
	margin: min(80px, 12vw) auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5em 0;
}

.main .pickup .pickup-banner .btn-box {
	width: min(470px, 48%);
	background-color: #fff;
	box-shadow: 0 0 3px 0 rgba(30, 30, 30, .35);
}

.main .pickup .pickup-banner .btn-box a {
	display: block;
	padding: min(40px, 5vw) min(30px, 5vw) min(40px, 10vw);
	text-align: center;
}

.main .pickup .pickup-banner .btn-box .copy {
	margin: 1.75rem auto 0;
	font-size: min(1.2em, 4vw);
	font-weight: bold;
	color: var(--main-color);
}

.main .pickup .pickup-banner .btn-box .logo {
	height: min(5em, 15vw);
	margin: .75rem auto 2rem;
}

.main .pickup .pickup-banner .btn-box .logo img {
	width: auto;
	height: 100%;
}

.main .pickup .pickup-banner .btn-box .btn {
	display: inline-block;
	background-color: #e95a0c;
	color: #fff;
	border-radius: 3em;
	padding: .75em 3.5em;
	font-weight: bold;
	font-size: min(1.1em, 4.5vw);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width:768px) {
	.main .pickup .pickup-banner .btn-box {
		width: 100%;
	}
}


/* cv */
.main .cv {
	padding: 60px 20px;
}

.main .cvbg_gray {
	background: #F5F6F7;
}

.main .cv_btn_box {
	display: flex;
	width: 1000px;
	margin: 0 auto;
	justify-content: center;
}

.main .cv_btn_box a {
	width: 330px;
	height: 80px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 40px 0;
	align-items: center;
	position: relative;
	margin-right: 5px;
	box-sizing: content-box;
}

.main .cv_btn_box a:last-child {
	margin-right: 0px;
}

.main .cv_btn_box a::after {
	content: "";
	background-image: url(../img/icon_cv_arrow.svg);
	position: absolute;
	width: 7px;
	height: 13px;
	right: 15px;
	top: calc(50% - 6px);
}

.main .cv_btn_a_icon_kengaku {
	background: #245773;
}

.main .cv_btn_a_icon_line {
	background: #06C755;
}

.main .cv_btn_box a .cv_btn_a_icon {
	height: 40px;
	margin-bottom: 20px;
	width: 40px;
	align-items: center;
	display: flex;
}

.main .cv_btn_box a .cv_btn_a_icon img {
	object-fit: contain;
	height: 100%;
}

.main .cv_btn_a_p {
	color: #fff;
	font-weight: 700;
}

@media screen and (max-width : 768px) {
	.main .cv {
		padding-bottom: 50px;
	}

	.main .cvbg_gray {
		background: #F5F6F7;
	}

	.main .cv_btn_box {
		display: flex;
		width: calc(100% - 40px);
		flex-direction: column;
		margin: 0 auto;
		justify-content: center;
	}

	.main .cv_btn_box a {
		width: calc(100% - 40px);
		flex-direction: row;
		padding: 20px;
		align-items: center;
		justify-content: center;
		height: auto;
		margin-bottom: 10px;
	}

	.main .cv_btn_box a:last-child {
		margin-bottom: 0px;
	}

	.main .cv_btn_box a .cv_btn_a_icon {
		height: 20px;
		width: 20px;
		margin-bottom: 0px;
		margin-right: 10px;
	}
}

.footer-btn-wrp {
	position: fixed;
	bottom: 1em;
	width: 100%;
	text-align: center;
	z-index: 10;
}

.footer-btn-wrp .btn {
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width:767.9px) {
	.main .footer-btn-wrp .btn.pet-btn {
		padding: 1em 1.5em 1em 2.5em;
		line-height: 1.4;
		translate: -5vw;
	}
}