@charset "utf-8";

/* メンズルシアとは？ */
#main_content:has(.about) {
	background-color: var(--green-4);

	& .pannkuzu li {
		color: var(--white);
	}
	& .page_commit {
		padding-bottom: 120rem;
	}
}
.about_wrap {
	background: url(/images/about/about1.png) no-repeat center top 130rem / 100% auto;
	margin-top: 40rem;
	padding-top: 60rem;
	padding-inline: 32rem;
	position: relative;
}
.about_en {
	font-size: 64rem;
	line-height: 1.5;
	padding-right: 24rem;
	position: absolute;
	inset: 0 0 auto;
	opacity: .2;
}
.about_ttl {
	font-size: 14rem;
	font-weight: 700;
	list-style: 1.5;
	padding-left: 14rem;
	position: relative;

	&::before {
		content: '';
		width: 8rem;
		height: 1px;
		background-color: var(--white);
		margin-block: auto;
		position: absolute;
		inset: 0;
	}
}
.about_copy {
	font-size: 32rem;
	font-weight: 700;
	list-style: 1.8;
	margin-top: 16rem;
}
.about_txt {
	margin-top: 300rem;

	& p {
		font-size: 12rem;
		line-height: 2;

		& + p {
			margin-top: 1.5em;
		}
	}
}
.about .movie_wrap {
	margin-top: 40rem;
}
.concept_wrap {
	margin-top: 72rem;
	position: relative;
	overflow: hidden;

	& p {
		font-size: 24rem;
		font-weight: 700;
		line-height: 1.5;
		position: absolute;
		inset: auto 0 95rem;
	}
}
.concept_img {
	position: relative;

	&.concept1 {
		width: 196rem;
	}
	&.concept2 {
		width: 142rem;
		margin-top: -86rem;
		margin-inline: auto 32rem;
	}
	&.concept3 {
		width: 160rem;
		margin-top: -12rem;
		margin-left: 56rem;
		z-index: 1;
	}
	&.concept4 {
		margin-top: -43rem;

		&::before,
		&::after {
			content: '';
			height: 103rem;
			background: linear-gradient(0deg, transparent, var(--green-4));
			position: absolute;
		}
		&::before {
			inset: 0;
		}
		&::after {
			inset: auto 0 0;
			rotate: 180deg;
		}
	}
}

/* 初めての方へ */
.beg_nav {
	margin-top: 56rem;

	& .page_nav {
		margin-top: 40rem;
	}
}

/* POINT */
.point_cont {
	margin-top: 120rem;
}
.point_ttl {
	background-image: url(/images/about/point_bg.svg);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 160rem auto;
	line-height: 1.5;
	padding-block: 32rem;
	position: relative;

	& .en {
		font-size: 64rem;
		margin-inline: auto;
		position: absolute;
		inset: -72rem 0 auto;
	}
	& .ttl {
		font-size: 32rem;
		font-weight: 700;
	}
	& .ttl_copy {
		font-size: 20rem;
		margin-top: 10rem;

		& .bg_wht {
			line-height: 38rem;
			margin-inline: 12rem;
			padding-inline: 16rem;
			display: inline-block;
		}
	}
}
.comp_tab td {
	span {
		margin-top: 4rem;
	}
	&:nth-of-type(2) span {
		color: var(--green-4);
	}
	& .icon img {
		max-width: 32rem;
		margin-inline: auto;
	}
}
.point_txt {
	line-height: 2;
	padding-inline: 32rem;

	& .copy {
		font-weight: 700;
	}
	& .txt {
		font-size: 14rem;
	}
}
.point_end_txt {
	font-weight: 700;
	line-height: 1.5;
	margin-top: 24rem;

	& .slash {
		font-size: 18rem;
		padding-inline: 15rem;

		&::before,
		&::after {
			width: 2rem;
			height: 23rem;
			background-color: var(--green-4);
		}
	}
	& em {
		font-size: 32rem;
		display: block;
	}
}
.point1 {
	& .point_txt {
		margin-top: 40rem;

		& .copy {
			font-size: 16rem;
		}
		& .txt {
			margin-top: 24rem;
		}
	}
	& .comp_tab {
		margin-top: 40rem;

		& td {
			text-align: center;
			padding-bottom: 24rem;

			& .icon {
				height: 56rem;
				padding-top: 24rem;
			}
		}
	}
}
.point2 {
	& .point_txt {
		margin-top: 40rem;

		& .copy {
			font-size: 24rem;
			text-align: center;
		}
		& .txt {
			margin-top: 32rem;
		}
	}
	& .icon_list {
		margin-top: 32rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rem;

		& li {
			border: var(--border-green-2);
			padding-block: 24rem 20rem;
		}
		& figure img {
			width: auto;
			height: 67rem;
			margin-inline: auto;
		}
		& span {
			font-size: 12rem;
			line-height: 1.5;
			margin-top: 10rem;
		}
	}
	& .comp_tab {
		margin-top: 64rem;

		& td {
			padding: 16rem 14rem;

			& .img + span {
				margin-top: 16rem;
			}
			&:has(.icon) {
				text-align: center;
			}
			& .icon {
				height: 32rem;
			}
		}
	}
}
.point3 {
	& .gentle {
		padding-block: 48rem 24rem;
		position: relative;

		& .loop_wrap {
			position: absolute;
			inset: 110rem 0 auto;

			& img {
				width: 820rem;
			}
		}
		& .gentle_img {
			width: 134rem;
			margin-inline: auto;
			position: relative;
		}
	}
	& .point_txt .txt {
		margin-top: 24rem;
	}
	& .laser_img,
	& .laser_list {
		padding-inline: 32rem;
	}
	& .laser_img {
		margin-top: 20rem;
	}
	& .laser_list li {
		margin-top: 40rem;

		& .laser_ttl {
			font-size: 18rem;
			font-weight: 700;
			line-height: 1.5;
			padding-block: 8rem;
		}
		& .laser_txt {
			padding: 24rem;

			& .copy {
				font-size: 16rem;
				font-weight: 700;
				line-height: 1.5;
			}
			& .txt {
				font-size: 12rem;
				line-height: 2;
				margin-top: 8rem;
			}
		}
		&:nth-child(1) {
			border: 2rem #f78996 solid;

			& .laser_ttl {
				background-color: #f78996;
			}
		}
		&:nth-child(2) {
			border: 2rem var(--brown-2) solid;

			& .laser_ttl {
				background-color: var(--brown-2);
			}
		}
	}
}

/* メリット */
.merit {
	margin-top: 88rem;
	padding: 48rem 32rem 56rem;

	& .cont_ttl small {
		font-size: 12rem;
		font-weight: 700;
		line-height: 24rem;
		margin-top: 8rem;
		padding-inline: 6rem;
		display: inline-block;
	}
}
.merit_list {
	margin-top: 56rem;
	display: grid;
	gap: 72rem;

	& > li {
		position: relative;

		&:nth-child(odd) .num {
			right: 16rem;
		}
		&:nth-child(even) .num {
			left: 16rem;
		}
	}
	& .num {
		line-height: 1.5;
		position: absolute;
		top: 16rem;
		z-index: 2;

		& span {
			font-size: 12rem;
			border-bottom: var(--border-white);
			display: block;
		}
		& b {
			font-size: 32rem;
			margin-top: -2rem;
			display: block;
		}
	}
}
.merit_img {
	position: relative;

	&::after {
		content: '';
		background-color: var(--green-4);
		position: absolute;
		inset: 0;
		opacity: .5;
	}
}
.merit_ttl {
	font-size: 24rem;
	font-weight: 700;
	line-height: 1.5;
	position: absolute;
	top: 234rem;
	left: 24rem;
}
.merit_cont {
	padding: 24rem;

	& p {
		font-size: 16rem;

		&.ttl_border {
			line-height: 1.5;
			border-color: var(--green-2);
			padding-bottom: 10rem;
		}
		&.add_txt {
			font-weight: 700;
			line-height: 1.8;
		}
	}
	& .slash {
		font-size: 18rem;
		line-height: 1.5;
		margin-top: 16rem;
		padding-inline: 11rem;

		&::before,
		&::after {
			width: 1px;
			height: 23rem;
			background-color: var(--green-4);
		}
	}
	& .bold {
		font-size: 20rem;
		font-weight: 700;
		line-height: 1.5;
		display: block;

		& b {
			font-size: 175%;
		}
		& .round {
			font-size: 80%;
			line-height: 27rem;
			vertical-align: 4rem;
			border: var(--border-green-4);
			margin-left: 8rem;
			padding-inline: 12rem;
			display: inline-block;
		}

		& + .add_txt {
			font-size: 14rem;
			font-weight: 400;
		}
	}
	& .balloon {
		font-size: 18rem;
		font-weight: 700;
		line-height: 40rem;
		margin-top: 20rem;
		padding-inline: 10rem;
		display: inline-block;
		position: relative;

		&::after {
			content: '';
			width: 12rem;
			height: 10rem;
			background-color: var(--green-1);
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			margin-inline: auto;
			position: absolute;
			inset: auto 0 -9rem;
		}
	}
	& .fc_ora {
		background: linear-gradient(0deg, transparent 10rem, var(--yellow) 10rem, var(--yellow) 24rem, transparent 24rem);
		font-size: 48rem;
		font-weight: 700;
		line-height: 1.5;
		display: inline-block;

		& b {
			font-size: 167%;
		}
	}
	& .fc_ora_und {
		font-size: 30rem;
		font-weight: 700;
		margin-top: -4rem;
		display: block;
	}
	& .notice {
		margin-top: 16rem;
		line-height: 1.5;
	}
	& .btn_wrap {
		margin-top: 24rem;
	}
	& .icon_list {
		margin-top: 32rem;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12rem;

		& li {
			padding-bottom: 14rem;

			&:nth-child(1) img {
				width: 23rem;
			}
			&:nth-child(2) img {
				width: 48rem;
			}
			&:nth-child(3) img {
				width: 44rem;
			}
		}
		& figure {
			height: 84rem;
			display: grid;
			place-content: center;
		}
		& span {
			font-size: 12rem;
			line-height: 1.5;
			display: block;
		}
	}
}
/* メリットリスト個別CSS */
.merit_list > li:nth-child(1) {
	& .bold + .add_txt {
		position: relative;

		&::after {
			content: '';
			width: 17rem;
			height: 14rem;
			background-color: var(--green-2);
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			margin-inline: auto;
			position: absolute;
			inset: auto 0 -24rem;
		}
	}
	& .fc_ora {
		margin-top: -12rem;
	}
}
.merit_list > li:nth-child(2) {
	& .fc_ora {
		margin-top: -7rem;
	}
}

/* 選ばれる理由 */
.reason {
	padding-block: 64rem 72rem;
}
.reason_ttl {
	font-weight: 700;

	& .slash {
		font-size: 20rem;
		line-height: 2;
		padding-inline: 14rem;

		&::before,
		&::after {
			width: 1px;
			height: 18rem;
			background: var(--white);
		}
	}
	& h2 {
		font-size: 40rem;
		line-height: 1;
		margin-top: 8rem;

		& em {
			font-size: 140%;
		}
	}
}
.reason_list {
	margin-top: 48rem;
	display: grid;
	gap: 72rem;

	& li {
		position: relative;
	}
	& .num {
		font-size: 80rem;
		line-height: 1.5;
		margin-inline: auto;
		position: absolute;
		inset: 287rem 0 auto;
	}
	& .ttl {
		font-size: 32rem;
		font-weight: 700;
		line-height: 1.5;

		& > span,
		& > em {
			display: block;
		}
	}
	& li:nth-child(1) .ttl {
		margin-top: 72rem;

		& .bg_wht {
			line-height: 55rem;
			padding-inline: 12rem;
			display: inline-block;

			& em {
				font-size: 150%;
			}
		}
		& .txt {
			margin-top: 20rem;
		}
		& > em {
			font-size: 200%;
			margin-block: -20rem -10rem;
		}
		& .txt2 {
			font-size: 125%;
		}
	}
	& li:nth-child(n+2) .ttl {
		margin-top: 72rem;

		& em {
			font-size: 175%;
			margin-top: -10rem;
		}
	}
	& li > .txt {
		font-size: 12rem;
		line-height: 2;
		margin-top: 16rem;
	}
}

/* 流れ（簡易版） */
.flow_list_simplified {
	margin-top: 72rem;
	padding-inline: 32rem;

	& .flow_ttl {
		font-size: 14rem;
		font-weight: 700;
		line-height: 36rem;
	}
	& .cont_ttl + .flow_ttl {
		margin-top: 32rem;
	}
	& .list + .flow_ttl {
		margin-top: 40rem;
	}
	& .list {
		margin-top: 32rem;
		display: grid;
		gap: 80rem;

		& li {
			display: flex;
			align-items: center;
			gap: 10rem;
			position: relative;

			&:nth-last-child(n+2)::before,
			&:nth-last-child(n+2)::after {
				content: '';
				background-color: var(--green-2);
				position: absolute;
				inset: auto 0;
			}
			&:nth-last-child(n+2)::before {
				height: 1px;
				bottom: -36rem;
			}
			&:nth-last-child(n+2)::after {
				width: 12rem;
				height: 10rem;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				margin-inline: auto;
				bottom: -46rem;
			}
		}
		& .num {
			width: 64rem;
			flex-shrink: 0;

			& > * {
				line-height: 1.5;
				display: block;
			}
			& i {
				font-size: 14rem;
			}
			& b {
				font-size: 32rem;
				margin-top: -10rem;
			}
		}
		& .ttl {
			font-size: 18rem;
			font-weight: 700;
			line-height: 1.5;
		}
		& .txt {
			font-size: 14rem;
			line-height: 2;
			margin-top: 4rem;

			& small {
				font-size: 12rem;
				margin-top: 16rem;
				display: flex;

				&::before {
					content: '※';
					margin-right: 4rem;
				}
			}
		}
	}
}

/* 流れ */
.flow_page {
	margin-top: 88rem;
	padding-inline: 32rem;

	& .tab_content {
		margin-top: 72rem;
		padding-inline: 24rem;
	}
}
.flow_tab {
	margin-top: 40rem;

	& .tab_wrap:has(input[type="radio"]:checked) {
		color: var(--green-4);
		border-bottom: 1px var(--green-4) solid;
	}
	& .tab_wrap:not(:has(input[type="radio"]:checked)) {
		color: var(--green-2);
		border-bottom: 1px var(--green-2) solid;
	}
}
.flow_cont {
	display: grid;
	gap: 80rem;

	& > li {
		position: relative;

		&:nth-last-child(n+2)::after {
			content: '';
			width: 17rem;
			height: 14rem;
			background-color: var(--green-2);
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			margin-inline: auto;
			position: absolute;
			inset: auto 0 -48rem;
		}
		& .num {
			font-size: 56rem;
			line-height: 1.5;
			position: absolute;
			top: -44rem;
			left: -20rem;
		}
	}
}
.flow_cont_in {
	padding: 24rem 24rem 32rem;

	& .ttl {
		font-size: 20rem;
		font-weight: 700;
		line-height: 1.5;
	}
	& .txt {
		font-size: 14rem;
		line-height: 2;
		margin-top: 12rem;

		& p + p {
			margin-top: 16rem;
		}
		& small {
			font-size: 12rem;
			display: block;
		}
	}
	& hr {
		height: 1px;
		background-color: var(--white);
		margin-top: 24rem;

		& + * {
			margin-top: 24rem;
		}
	}
	& > .ttl_icon {
		background-size: 18rem auto;
		font-size: 14rem;
		line-height: 2;
		padding-left: 24rem;
	}
	& .circle_list {
		& li {
			font-size: 12rem;
			line-height: 2;
			padding-left: 14rem;

			&::before {
				background-color: var(--orange);
				top: 8rem;
			}
		}
		& + .ttl_icon {
			margin-top: 16rem;
		}
	}
	& .notice {
		line-height: 2;
	}
	& div.bg_wht {
		margin-top: 32rem;
		padding: 24rem 24rem 32rem;

		& .fc_gre1 {
			border-bottom: var(--border-green-2);
			padding-bottom: 10rem;
		}
		& span {
			background-size: 27rem auto;
			font-size: 18rem;
			line-height: 1.5;
			padding-left: 34rem;
		}
		& p + p {
			font-size: 12rem;
			line-height: 2;
			margin-top: 16rem;
		}
	}
	& ul.bg_wht {
		margin-top: 32rem;
		padding: 20rem 12rem;
	}
	& .link_wrap {
		font-size: 12rem;
		line-height: 1.8;
		margin-top: 8rem;

		& a {
			padding-right: 18rem;
			display: inline-block;
			position: relative;

			&::after {
				content: '';
				width: 5rem;
				height: 5rem;
				border-top: 1px var(--orange) solid;
				border-right: 1px var(--orange) solid;
				margin-block: auto;
				position: absolute;
				inset: 0 auto;
				right: 4rem;
				translate: 0 1rem;
				rotate: 45deg;
			}
		}
	}
	& .add_txt {
		font-size: 12rem;
		line-height: 2;
		margin-top: 4rem;

		& + .ttl_icon {
			margin-top: 24rem;
		}
	}
}
section[data-tabcont="tab2"] .flow_cont > li:last-child .notice {
	border-top: 1px var(--gray) dotted;
	margin-top: 32rem;
	padding-top: 24rem;
}
.cs_time {
	margin-top: 32rem;

	& h3 {
		font-size: 14rem;
		font-weight: 700;
		line-height: 1.5;
		padding-left: 24rem;
		position: relative;

		&::before {
			content: '';
			width: 19rem;
			height: 19rem;
			background-color: var(--green-1);
			mask: url(/images/reserve/form_clock.svg) no-repeat center / 100% auto;
			margin-block: auto;
			position: absolute;
			inset: 0;
		}
	}
	& p {
		font-size: 12rem;
		line-height: 1.8;
		margin-top: 12rem;
	}
}

/* 未成年の方へ */
.minors {
	margin-top: 77rem;
	padding: 48rem 32rem 136rem;
}
.minors_txt {
	line-height: 2;
	margin-top: 48rem;

	& .copy {
		font-size: 16rem;
		font-weight: 700;

		& em {
			border-bottom: var(--border-white);
		}
	}
	& .txt {
		font-size: 12rem;
		margin-top: 24rem;
	}
}
.on_notice {
	border: 2rem var(--white) solid;
	margin-top: 56rem;
	padding: 24rem;

	& li {
		font-size: 14rem;
		line-height: 2;
		padding-left: 14rem;

		&::before {
			background-color: var(--white);
			top: 10rem;
		}
	}
	& .btn_wrap {
		margin-top: 32rem;

		& a {
			height: 72rem;
			display: grid;
			place-content: center;
			position: relative;

			&::after {
				content: '';
				width: 13rem;
				height: 11rem;
				background-color: var(--white);
				mask: url(/images/common/download.svg) no-repeat center / 100% auto;
				margin-block: auto;
				position: absolute;
				inset: 0 auto;
				right: 40rem;
			}
			& span {
				font-size: 14rem;
				font-weight: 700;
			}
		}
	}
}
.aten {
	margin-top: 56rem;
}
.aten_ttl {
	border-bottom: var(--border-white);
	padding-left: 40rem;
	padding-bottom: 24rem;
	position: relative;

	&::before {
		content: '';
		width: 27rem;
		height: 27rem;
		background-color: var(--white);
		mask: url(/images/common/caution.svg) no-repeat center / 100% auto;
		position: absolute;
		inset: 0;
	}
	& span {
		font-size: 20rem;
		line-height: 1.5;
	}
}
.aten_list {
	line-height: 2;
	margin-top: 32rem;

	& dt {
		font-size: 16rem;
		padding-left: 32rem;
	}
	& dd {
		font-size: 12rem;
		margin-top: 8rem;

		& + dt {
			margin-top: 24rem;
		}
	}
}
.not_print {
	margin-top: 40rem;
	padding: 48rem 24rem 32rem;

	& .copy {
		font-size: 14rem;
		line-height: 2;
		margin-top: 24rem;
	}
}
.print_ttl {
	line-height: 1.8;

	& .en {
		font-size: 16rem;
	}
	& .ttl {
		font-size: 24rem;
		font-weight: 700;
		margin-top: 8rem;
	}
}
.sample {
	margin-top: 40rem;
	padding-bottom: 32rem;

	& .list_ttl {
		font-size: 16rem;
		font-weight: 700;
		line-height: 1.8;
		border-bottom: var(--border-green-2);
		margin-top: 32rem;
		margin-inline: 24rem;
		padding-bottom: 16rem;
	}
}
.sample_ttl {
	font-size: 20rem;
	font-weight: 700;
	line-height: 1.5;
	padding-block: 16rem;
}
.sample_txt {
	font-size: 12rem;
	line-height: 2;
	margin-top: 24rem;
	padding-inline: 24rem;
}
.sample_list {
	margin-top: 16rem;
	padding-inline: 24rem;

	& li {
		font-size: 12rem;
		line-height: 2;
		display: flex;

		&::before {
			content: '・';
		}
	}
}