@charset "utf-8";

/* ==========================================
01
========================================== */

.mens01 {
	position: relative;
}

.mens01-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.mens01-img-box {
    max-width: 68rem;
    width: 47.89%;
}

.mens01-text-block {
    max-width: 64rem;
    width: 45.07%;
}

.mens01-text-box {
	margin: 8rem auto 0;
}

.mens01-text-box.text01 span {
	font-weight: 500;
}

.mens01-recommend {
	position: relative;
	margin: 13rem auto 0;
	padding: 9rem 1.5rem;
}

.mens01-recommend:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40%;
	margin: auto;
	width: 30%;
	height: 80%;
    background: url(../../../../uploads/decoration_hairRemoval01.svg) no-repeat;
    background-size: contain;
	z-index: 1;
}


.mens01-recommend-inner {
	max-width: 110rem;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mens01-recommend-text-box {
    position: relative;
    padding: 0 0 0 9rem;
}

.mens01-recommend-text-box .text01 {
    position: relative;
    padding: 0 0 0 2rem;
}

.mens01-recommend-text-box .text01::before {
    content: "";
    position: absolute;
    top: 50%;
    left: .3rem;
    width: .3rem;
    height: .3rem;
    background: var(--base-font-color);
    border-radius: 50%;
    z-index: 1;
}

/* ==========================================
02
========================================== */

.mens02 {
	position: relative;
}

.mens02-row {
	margin: 10rem auto 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mens02-row:nth-of-type(2n) {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}

.mens-img-block {
	max-width: 51rem;
	width: 38.64%;
}

.mens02-number {
	font-family: var(--font-family03);
	font-size: 12rem;
	font-weight: 500;
	letter-spacing: 0;
    position: absolute;
	top: -6rem;
    left: 0;
    line-height: 1em;
	z-index: 1;
}

.mens02-row:nth-of-type(2n) .mens02-number {
	right: 0;
    left: auto;
}

.mens02-img-box.img-control {
	width: 100%;
    position: relative;
    aspect-ratio: 46 / 46;
    overflow: hidden;
	width: 90.2%;
    /* height: 100%; */
    margin: 0 0 0 auto;
    padding: 0;
}

.mens02-text-block {
	margin: 3rem 0 0;
	max-width: 71rem;
	width: 53.79%;
}

.mens02-title br {
	display: none;
}

.mens02-text-box {
	margin: 2.5rem 0 0;
}

.mens02-text-box .text01 {
    line-height: 2.03em;
}

.mens02-text-box .text01 span {
    font-weight: 500;
}

/* ==========================================
03
========================================== */

.mens03 {
	position: relative;
}

.jp-title02 .number {
	font-size: 6rem;
}

.mens03-grid {
	margin: 4rem auto;
}

.mens03-item {
	padding: 0 0 0 5rem;
	position: relative;
}

.mens03-item:after {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 80%;
    background: #A4BDC8;
    z-index: -1;
}

.mens03-item-fukidashi {
	max-width: 45.5rem;
	width: 100%;
	margin: 0 auto;
    position: relative;
    padding: .5rem 1.5rem;
    border-radius: 100vmax;
    text-align: center;
}

.mens03-item-fukidashi::after,.mens03-item-fukidashi::before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}

.mens03-item-fukidashi::after{
    border-color: rgba(0, 0, 255, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:15px;
    border-right-width:15px;
    margin-left: -15px;
    border-top-color:var(--fifth);
}

.mens03-number-box {
    position: absolute;
	top: 6rem;
	left: 0;
	z-index: 1;
}

.mens03-number-text {
    font-size: 2.5rem;
    letter-spacing: 0.03em;
    text-align: center;
	padding: 0 0 0 3.5rem;
}

.mens03-number {
	font-family: var(--font-family03);
	font-size: 12rem;
	font-weight: 500;
	letter-spacing: 0;
    line-height: .65em;
}

.mens03-img-box {
    margin: 9rem auto 0;
}

.mens03-img-box.img-control {
    position: relative;
    aspect-ratio: 455 / 340;
    overflow: hidden;
    /* height: 100%; */
    margin: 0;
    padding: 0;
}

.mens03-item:first-child::after, .mens03-item:nth-child(4)::after {
	content:none;
}

.mens03-text-block {
	margin: 3rem 0 0;
}

.mens03-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.mens03-title {
	font-family: var(--font-family01);
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
}

.mens03-text-box {
	margin: 2.5rem 0 0;
}

.mens03-text-box .text01 {
    line-height: 2.03em;
}

.mens03-text-box .text01 span {
    font-weight: 500;
}

/* ==========================================
04
========================================== */

.mens04 {
	position: relative;
}

.mens04-px {
	padding: 5rem 1.5rem;
}

.mens04-row {
    max-width: 132rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
}

.mens04-left {
	max-width: 66rem;
	width: 50%;
}

.mens04-img-box {
	max-width: 62rem;
	width: 46.97%;
}

.mens04-text-box {
	margin: 6rem 0 0;
}

/* ==========================================
05
========================================== */

.mens05 {
	position: relative;
}

.mens05-grid {
	margin: 4rem auto 0;
	gap: 3rem;
}

.mens05-item {
	position: relative;
    max-width: 33rem;
    width: 100%;
    margin: 0 auto;
}

/* .mens05-number-box {
	width: 100%;
	position: relative;
} */

.mens05-number {
    font-family: var(--font-family03);
    font-size: 4.2rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.9em;
    text-align: left;
    width: 8rem;
    padding: 0 1rem 0 1.1rem;
    margin: 0 auto;
	border-radius: 50%;
}

.mens05-number:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 110%;
    height: 1px;
    background: var(--fifth);
    z-index: -1;
}

.mens05-item:first-child .mens05-number::after {
	width: 50%;
}

.mens05-item:last-child .mens05-number::after {
    width: 60%;
    right: auto;
    left: -3.5rem;
}

.mens05-img-box.img-control {
    position: relative;
    aspect-ratio: 333 / 250;
    overflow: hidden;
    /* height: 100%; */
    margin: 1.5rem 0 0;
    padding: 0;
}

.mens05-text-block {
	margin: 3rem 0 0;
}

.mens05-title {
	font-family: var(--font-family01);
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
}

.mens05-text-box {
	margin: 2.5rem 0 0;
}

.mens05-text-box .text01 {
    line-height: 2.03em;
}

.mens05-text-box .text01 span {
    font-weight: 500;
}

.mens05-btn-grid {
	position: relative;
	margin: 3rem 0 0;
	gap: 1rem
}

.beginner-fukidashi-text {
    font-size: 1rem;
    position: absolute;
    top: -2rem;
}

/* ==========================================
06
========================================== */

.mens06-contents {
    margin: 6rem 0 0 0;
}

.mens06-item {
	margin: 3rem 0 0;
}

.mens06-item:first-child {
	margin: 0;
}

.guide-title-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 2.2rem 3rem;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.guide-title {
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.guide-text-box {
	margin: 1rem 0 0;
	padding: 2.5rem 3rem;
}

.guide-text-box .text01 {
	line-height: 1.56em;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {

	/* ==========================================
	reason
	========================================== */

	.mens02-title {
		font-size: 2.5rem;
	}

	.mens02-number {
		font-size: 9rem;
	}


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

	.mens01-text-box {
		margin: 6rem auto 0;
	}

	.mens01-recommend:before {
    	left: 32%;
	}

	.mens02-text-block {
		width: 58%;
	}

	.mens03-grid.grid-3 {
		gap: 4rem 2rem;
	}

	.mens03-item-row {
		font-size: 2.2rem;
	}

	.mens03-item {
		padding: 0 0 0 2rem;
		position: relative;
	}

	.mens03-item-fukidashi {
		padding: .5rem 1rem;
	}

 	.mens03-item-fukidashi .text01 {
		font-size: 1.58rem;
	}

	.mens03-img-box {
		margin: 6rem auto 0;
	}

	.mens03-number-box {
		top: 5rem;
	}

	.mens03-number-text {
		padding: 0 0 0 2.5rem;
	}

	.mens03-number {
		font-size: 8rem;
	}

	.mens04-left .jp-title02 {
		font-size: 3.2rem;
	}

	.mens04-text-box {
		margin: 4rem 0 0;
	}

	.mens05-grid.grid-4 {
	    max-width: 80rem;
		grid-template-columns: repeat(2, 1fr);
		gap: 6rem 3rem;
	}

	.mens05-item {
		max-width: 43rem;
	}

	.mens05-number:after {
		content: none;
	}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

	/* ==========================================
	01
	========================================== */

	.mens01 {
		padding: 10rem 0;
	}

	.mens01-row {
		position: relative;
		width: 100%;
		flex-direction: column-reverse;
	    align-items: center;
	}

	.mens01-img-box, .mens01-text-block {
		width: 100%;
	}

	.mens01-img-box {
		margin: 3rem auto 0;
	}

	.mens01-text-box {
		margin: 3rem auto 0;
		text-align: left;
	}

	.mens01-text-box p br {
		display: none;
	}

	.mens01-recommend {
		margin: 6rem auto 0;
		padding: 4rem 1.5rem;
	}

	.mens01-recommend-inner {
		flex-direction: column;
	}

	.mens01-recommend-text-box {
		margin: 3rem auto 0;
		padding: 0;
	}

	.mens01-recommend:before {
		content: none;
    }

    .mens01-recommend:before {
		top: 3rem;
		bottom: auto;
        right: 0;
		left: 0;
		margin: auto;
    	width: 8rem;
    	height: 20rem;
        transform: rotate(90deg);
    }

	/* ==========================================
	02
	========================================== */

	.mens02-row {
		flex-direction: column;
	}

	.mens02-row:nth-of-type(2n) {
		flex-direction: column;
	}

	.mens02-item {
		padding: 6rem 0 0 2.5rem;
		position: relative;
	}

	.mens02-img-box.img-control {
		width: 100%;
		margin: 0 auto;
	}

    .mens02-text-block, .mens-img-block {
        width: 100%;
    }

    .mens02-number {
        font-size: 11rem;
        top: -6rem;
        left: 0;
		right: 0;
		margin: auto;
	    text-align: center;
    }

	.mens02-row:nth-of-type(2n) .mens02-number {
        left: 0;
		right: 0;
		margin: auto;
	}

    .mens02-title {
        font-size: 2rem;
    }

	.mens02-title br {
		display: block;
	}

	/* ==========================================
	03
	========================================== */

	.mens03-grid.grid-3 {
		grid-template-columns: repeat(1, 1fr);
	}

    .mens03-item {
        padding: 0;
    }

	.mens03-item:after {
		content: none;
	}

    .mens03-item-fukidashi .text01 {
        font-size: 1.8rem;
    }

	.mens03-number-box {
		position: absolute;
	    top: 7rem;
		right: 0;
		left: 0;
		margin: auto;
		z-index: 1;
	}

	.mens03-number-text {
		padding: 0;
	}

	.mens03-number {
		font-size: 10rem;
		text-align: center;
	    padding: 0 2.5rem 0 0;
	}

	.mens03-img-box {
        width: 100%;
		margin: 10rem auto 0;
		text-align: center;
    }

    .mens03-text-block {
		max-width: 68rem;
		width: 100%;
		margin: 3rem auto 0;
    }

	/* ==========================================
	04
	========================================== */

	.mens04-row {
		flex-direction: column-reverse;
	    align-items: center;
	}

	.mens04-left {
		margin: 3rem 0 0;
		width: 100%;
	}

	.mens04-img-box {
		width: 100%;
	}

	.mens04-text-box {
		padding: 0 0 0;
	}

	.mens04-left .deco-text03 {
		text-align: center;
	}


	/* ==========================================
	04
	========================================== */

	.mens05-number:after {
		content: none;
	}

	.mens05-btn-grid.grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

	.incover figure > img {
        object-position: 70% 7rem !important;
    }

	/* ==========================================
	01
	========================================== */

	.mens01-title-box .jp-title01{
	    font-size: 2rem;
	}

	.mens01-text-box {
		margin: 3rem auto 0;
	}

	/* ==========================================
	02
	========================================== */

	.mens02-row {
		margin: 3rem auto 0;
	}

	.mens02-item {
		padding: 6rem 0 0 0;
	}

	.mens02-item:first-child {
		padding: 0 0 0;
	}

	.mens02-item:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--quaternary);
		z-index: -1;
	}

	.mens02-item:first-child::after {
		content: none;
	}

	.mens02-item:nth-child(3)::after, .mens02-item:nth-child(5)::after {
		content:"";
	}

	.mens02-number {
		position: relative;
		text-align: center;
        font-size: 6.5rem;
        top: 3rem;
        left: 0;
        right: 0;
	}

	.mens02-img-box {
		margin: -4rem 0 0;
	}

	/* ==========================================
	03
	========================================== */

	.jp-title02 .number {
		font-size: 4rem;
	}

    .mens03-number-box {
        top: 10rem;
	}

	.mens03-number-text {
		font-size: 1.8rem;
	}

	.mens03-number {
        font-size: 6.5rem;
        text-align: center;
    }


	/* ==========================================
	04
	========================================== */

	.mens04 .jp-title02 {
        font-size: 2rem;
    }

	.mens04-text-box {
		margin: 4rem 0 0;
	}

	/* ==========================================
	04
	========================================== */

	.mens05-grid.grid-4 {
		grid-template-columns: repeat(1, 1fr);
		gap: 4rem 4rem;
	}

	.mens05-number {
		font-size: 3rem;
		width: 6rem;
	}

	.mens05-title {
		font-size: 2.2rem;
	}

	.mens05-btn-grid.grid-4 {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}


	/* ==========================================
	05
	========================================== */

	.mens06-contents {
		margin: 4rem 0 0 0;
	}

	.guide-title-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 2.2rem 1.5rem;
	}

	.guide-title {
		font-size: 1.7rem;
	}

	.guide-text-box {
		padding: 2.2rem 1.5rem;
	}


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */