@charset "UTF-8";
/* CSS Document */
/*---------------------------
		COMMON
---------------------------*/
body {
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
	color: #122037;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.5;
	letter-spacing: 0.05em;
	animation: loading 3s;
}
@keyframes loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

a {
	text-decoration: none;
	box-sizing: border-box;
}

.fadein {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.5s ease-in-out, transform 0.75s ease-in-out;
}
.fadein.js-scrollin {
	opacity: 1;
	transform: translateY(0);
}
.fs55 {
	font-size: 55px;
}
.fs50 {
	font-size: 50px;
}
.fs43 {
	font-size: 43px;
}
.fs40 {
	font-size: 40px;
}
.fs38 {
	font-size: 38px;
}
.fs32 {
	font-size: 32px;
}
.fs30 {
	font-size: 30px;
}
.fs28 {
	font-size: 28px;
}
.fs26 {
	font-size: 26px;
}
.fs24 {
	font-size: clamp(1.188rem, 0.625rem + 2vw, 1.5rem);
}
.fs23 {
	font-size: 23px;
}
.fs18 {
	font-size: 18px;
}
.fs17 {
	font-size: 17px;
}
.fs16 {
	font-size: 16px;
}
.fs12 {
	font-size: 12px;
}
.fs10 {
	font-size: 10px;
}
.red {
	color: #C03335;
}
.medium {
	font-weight: 500;
}
.bold {
	font-weight: 600;
}
.rec {
	font-size: 30px;
	font-weight: 600;
}
.mplus1p {
	font-family: "M PLUS 1", sans-serif;
}
.lato {
	font-family: "Lato", sans-serif;
}
.w700 {
	display: none;
}
.w600 {
	display: none;
}
.w540 {
	display: none;
}
@media screen and (max-width: 700px) {
	.w700 {
		display: block;
	}
}
@media screen and (max-width: 600px) {
	.w600 {
		display: block;
	}
}
@media screen and (max-width: 540px) {
	.w540 {
		display: block;
	}
}
/*---------------------------
		TOP
---------------------------*/
.Top {
	background-image: url("../img/bg_top.jpg");
	background-position: 70%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 650px;
	position: relative;
}
.pr {
	position: absolute;
	top: 2%;
	right: 2%;
	letter-spacing: 0;
}
.top-h1 {
	max-width: 620px;
	width: 85%;
	padding: 5px 0 15px;
	position: absolute;
	bottom: 4.5%;
	left: 50%;
	transform: translateX(-50%);
	color: #D66D51;
	text-align: center;
	line-height: 1.2;
	z-index: 1;
}
.top-h1::before, .top-h1::after {
	content: "";
	max-width: 667px;
	width: 99%;
	height: 100%;
	transform: skew(-20deg);
	position: absolute;
}
.top-h1::before {
	background-color: rgba(255, 255, 255, 0.8);
	top: -4px;
	left: 0;
	z-index: -1;
}
.top-h1::after {
	background-color: rgba(106, 106, 106, 0.8);
	bottom: -4px;
	right: 0;
	z-index: -2;
}
.top-h2 {
	position: absolute;
	top: 7%;
	left: 15%;
	color: #fff;
	writing-mode: vertical-rl;
}
.top-h2-span2 {
	margin-top: 66px;
}
.top-h2-span span {
	background-color: #000;
	width: 60px;
	height: 60px;
	line-height: 60px;
	margin: 3px 5px;
	text-align: center;
}


@media screen and (max-width: 540px) {
	.top-h1 {
	max-width: 380px;
	bottom: 2%;
}
	.top-h1::before, .top-h1::after {
	transform: skew(-15deg);
}
	.top-h2 {
	top: 2%;
	left: 10%;
}
}
@media screen and (max-width: 450px) {
	.top-h2 {
	left: 5%;
}
}
/*---------------------------
		SEARCH
---------------------------*/
.Search {
	background-color: #EFF8FB;
	max-width: 650px;
	width: 93%;
	margin: 40px auto;
}
.search-title {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 20px;
	width: 100%;
	background-color: #687C9D;
	padding: 0.75em 0;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
.click span {
	background-color: #fff;
	width: 17px;
	height: 25px;
	clip-path: polygon(100% 50%, 0 100%, 0 0);
	transition: all .3s;
}
.click.js-btn span {
	transform: rotate(90deg);
}
.search-wrap {
	max-width: 412px;
	width: 93%;
	margin: 0 auto;
	padding-bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	grid-row-gap: 15px;
	text-align: center;
	max-height: 0;
	overflow: hidden;
	transition: all .5s;
}
.search-wrap.js-open {
	max-height: 1500px;
	opacity: 1;
	pointer-events: auto;
	padding-bottom: 7%;
	margin: 5% auto 0;
}
.search-wrap h3 {
	width: 100%;
	border-radius: 10px;
	padding: 1.2em 0;
	margin-top: 10px;
	background-color: #687C9D;
	color: #fff;
	font-weight: 500;
}
.search-radio {
	width: 48%;
}
.search-check {
	width: 100%;
}
.search-wrap label {
	display: block;
	width: 100%;
	border-radius: 10px;
	border: 1px solid #122037;
	padding: 1.2em 0;
	background-color: #fff;
}
input[type="checkbox"], input[type="radio"] {
	display: none;
}
.search-wrap input:checked + label {
	background-color: #CECECE;
}
.search-btn {
	width: 100%;
	margin-top: 40px;
}
#search-btn {
	border: none;
	width: 100%;
	background-color: #687C9D;
	padding: 1.2em 0;
	border-radius: 10px;
	color: #fff;
	line-height: 1;
}
#clear-btn {
	width: 35%;
	border: 1px solid #122037;
	background-color: #fff;
	padding: 1.1em 0;
	border-radius: 10px;
	margin-top: 15px;
	line-height: 1;
}
@media screen and (max-width: 540px) {
	.search-title {
	font-size: clamp(1.25rem, -0.05rem + 5.33vw, 1.75rem);
}
	.click span {
	width: 12px;
	height: 17px;
}
}

/*---------------------------
		SEARCH RESULT
---------------------------*/
.Search-results {
	max-width: 600px;
	width: 93%;
	margin: 0 auto;
	padding: min(10vw, 50px) 0;
}
.search-results-title {
	color: #687C9D;
	text-align: center;
}
.search-sort {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 5%;
	margin: 30px 0;
}
.sort-btn {
	background-color: #D66D51;
	border-radius: 5px;
	padding: 0.5em 1em;
	color: #fff;
	cursor: pointer;
}
.results-wrap {
	display: flex;
	flex-direction: column;
	grid-row-gap: 20px;
	max-width: 500px;
	width: 93%;
	margin: 0 auto;
}
.results-wrap li {
	padding: 2em min(5vw, 50px);
	border: 1px solid #122037;
	box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.results-wrap h3 {
	color: #D66D51;
	margin-bottom: 0.5em;
	text-align: center;
	font-size: 24px;
}
.results-wrap p {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #122037;
	padding: 0.75em;
}
.results-wrap a {
	background-color: #687C9D;
	border-radius: 10px;
	padding: 1em;
	color: #fff;
	text-align: center;
	max-width: 400px;
	width: 90%;
	text-decoration: none;
	align-self: center;
	margin-top: 1em;
}
/*---------------------------
		COMPARE
---------------------------*/
.Compare {
	background-color: #C1E7F5;
	padding: 40px 0;
	overflow: hidden;
	position: relative;
}
.compare-title-wrap {
	max-width: 600px;
	width: 93%;
	padding: 20px 0 0;
	margin: 0 auto 35px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	position: relative;
	z-index: 0;
}
.compare-title-wrap::after {
	content: "";
	position: absolute;
	right: 3%;
	top: 5%;
	max-width: 100.25px;
	max-height: 166px;
	width: 23vw;
	height: calc(23vw * 1.65586);
	background-image: url("../img/illust_compare.svg");
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}
.compare-h2 {
	color: #FFDE3B;
}
.compare-h2 span {
	position: relative;
	z-index: 1;
}
.compare-h2 span::after {
	-webkit-text-stroke: 4px #000;
	text-stroke: 4px #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.compare-h2-span1::after {
	content: "AGA";
	font-size: 40px;
}
.compare-h2-span2::after {
	content: "クリニック";
	font-size: 30px;
}
.compare-h2-span3::after {
	content: "比較";
	font-size: 40px;
}
.scroll {
	display: none;
	align-items: baseline;
	column-gap: 15px;
	max-width: 631px;
	width: 93%;
	margin: 0 auto;
	position: absolute;
	top: 16.5%;
	left: 10%;
}
.scroll::after {
	content: "";
	width: 10%;
	height: 7px;
	border-bottom: 1px solid #3E3A39;
	border-right: 1px solid #3E3A39;
	transform: skew(45deg);
	animation: arrow 2s ease-in-out infinite;
}
@keyframes arrow {
	0% {
		width: 0;
		height: 0;
		opacity: 0;
	}
	2% {
		opacity: 1;
	}
	5% {
		height: 7px;
		opacity: 1;
	}
	50% {
		width: 10%;
		height: 7px;
		opacity: 1;
	}
	95% {
		width: 0;
		height: 7px;
		opacity: 1;
	}
	98% {
		width: 0;
		height: 0;
	}
	100% {
		opacity: 0;
	}
}
.table-wrap {
	max-width: 631px;
	width: 93%;
	margin: 0 auto;
	overflow: scroll;
	position: relative;
	z-index: 1;
}
.compare-table {
	min-width: 631px;
	background-color: #fff;
	text-align: center;
}
.compare-table th {
	vertical-align: middle;
	padding: 10px 0;
}
.compare-table td {
	vertical-align: top;
	padding: 10px 0 15px;
	border-right: 1px dashed #5972A7;
	border-bottom: 1px dashed #5972A7;
}
.colum1 {
	background-color: #518AB4;
	width: 121px;
	color: #fff;
	font-weight: 500;
	border-bottom: 1px dashed #EFF8FB;
}
thead .colum1 {
	border-bottom: 1px solid #EFF8FB;
}
.row1 {
	background-color: #EFF8FB;
	width: 170px;
	border-bottom: 1px solid #5972A7;
}
.clifor {
	border-right: 1px dashed #5972A7;
}
.dammy {
	border-right: 1px dashed #5972A7;
}
.dammy:last-of-type {
	border-right: none;
}
.compare-table tr td:last-of-type {
	border-right: none;
}
.compare-table tr:last-of-type td {
	border-bottom: none;
}
tbody tr:last-of-type .colum1 {
	border-bottom: none;
}
.clifor img {
	max-width: 122.88px;
}
.dammy img {
	max-width: 80px;
	padding: 6px 15px;
	background-color: #fff;
}
tbody tr:last-of-type td {
	padding: 25px 0;
}
.compare-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 20px;
	width: 90%;
	background-image: linear-gradient(45deg, rgba(149, 208, 228, 1), rgba(201, 236, 247, 1));
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 10px 0;
	margin: 0 auto;
	color: #122037;
	font-weight: 500;
}
.compare-btn::after {
	content: "";
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #122037;
	border-right: 2px solid #122037;
	transform: rotate(-45deg);
}
.compare-note {
	max-width: 600px;
	width: 93%;
	margin: 10px auto 0;
}
@media screen and (max-width: 675px) {
	.scroll {
		display: flex;
	}
}
@media screen and (max-width: 480px) {
	.compare-title-wrap::after {
	width: 16vw;
	height: calc(16vw * 1.65586);
		    right: 1%;
    top: unset;
    bottom: -42%;
}
}
@media screen and (max-width: 415px) {
	.compare-title-wrap {
		text-align: center;
	}
	.compare-title-wrap::after {
	display: none;
}
}
/*---------------------------
		BENEFIT
---------------------------*/
.Benefit {
	padding: 20px 0 50px;
}
.benefit-title-wrap {
	display: grid;
	grid-template-columns: auto 168px;
	grid-template-rows: auto auto;
	max-width: 633px;
	width: 93%;
	margin: 0 auto;
}
.benefit-p {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	align-self: flex-end;
}
.benefit-h2 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	align-self: flex-start;
	color: #D66D51;
}
.benefit-img {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	max-width: 168px;
	align-self: center;
}
.benefit-list {
	max-width: 633px;
	width: 93%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	justify-content: center;
	align-items: center;
	column-gap: 20px;
	grid-row-gap: 20px;
}
.benefit-list-item {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 90px 30px calc(100% - 90px - 30px - 30px);
	grid-row-gap: 15px;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 40px 20px 30px;
	background-color: #F7FCFF;
	box-shadow: 2px 2px 4px 0 rgba(94, 105, 124, 0.7);
	position: relative;
	z-index: 0;
}
.benefit-list-item::before {
	content: "";
	width: 40px;
	height: 40px;
	background-color: #fff;
	clip-path: polygon(100% 0, 0% 100%, 0 0);
	position: absolute;
	top: -5px;
	left: -5px;
	z-index: -1;
}
.benefit-list-item::after {
	content: "";
	width: 30px;
	height: 30px;
	background-color: #D9D9D9;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: -1;
}
.benefit-list-item img {
	width: 86px;
}
.benefit-list-item p {
	align-self: flex-start;
}

@media screen and (max-width: 550px) {
	.benefit-title-wrap {
	grid-template-columns: auto 130px;
		margin: 0 auto 30px;
	}
	.benefit-img {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
	.benefit-h2 {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}
}

@media screen and (max-width: 450px) {
	.benefit-title-wrap {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
		place-items: center;
		margin: 30px auto 0;
}
	.benefit-p {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
		place-self: flex-start;
	align-self: center;
}
.benefit-h2 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	place-self: flex-start;
	align-self: center;
	color: #D66D51;
}
.benefit-img {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	align-self: center;
}
	.benefit-list {
	display: flex;
		flex-direction: column;
}
	.benefit-list-item {
    padding: 30px;
}
}
/*---------------------------
		CLINIC
---------------------------*/
.Clinic {
	background-color: #E4E6EB;
	padding-bottom: 20px;
}
.clinic-title-wrap {
	padding-top: 60px;
	margin: 0 auto 40px;
	text-align: center;
}
.clinic-p {
	max-width: 485px;
	width: 93%;
	margin: 0 auto 30px;
	background-color: #5E697C;
	padding: 15px 0;
	color: #fff;
	position: relative;
	z-index: 1;
}
.clinic-p::before {
	content: "髪の悩みをしっかり支えてくれる";
	-webkit-text-stroke: 3px #122037;
	text-stroke: 3px #122037;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.clinic-p::after {
	content: "";
	background-color: #5E697C;
	width: min(10vw, 55px);
	height: min(6vw, 33px);
	clip-path: polygon(100% 0, 50% 100%, 0 0);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: max(-4vw, -23px);
}
.clinic-h2 {
	display: inline;
	width: fit-content;
	background: linear-gradient(transparent 70%, #FFDE3B 70%);
	line-height: 1;
}
.clinic-item {
	max-width: 630px;
	width: 93%;
	padding-bottom: 50px;
	margin: 0 auto 50px;
	background-color: #fff;
}
.clinic-name {
	padding: 1.25rem;
	background-color: #122037;
	color: #fff;
	text-align: center;
}
.clinic-logo {
	display: block;
	margin: 50px auto;
}
.clinicfor-logo {
	max-width: 164px;
	width: 53%;
}
.dammy-logo {
	max-width: 136px;
	width: 50%;
}
.clinic-point {
	max-width: 455px;
	width: 93%;
	margin: 20px auto;
	padding: 15px 0 20px;
	background-color: #F2F8FF;
}
.clinic-point-h4 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}
.clinic-point-h4::before, .clinic-point-h4::after {
	content: "";
	background-image: url("../img/illust_clinic_point.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 53px;
	height: 54px;
}
.clinic-point-h4::after {
	transform: scale(-1, 1);
}
.clinic-point-h4 span {
	background: linear-gradient(transparent 70%, #FFDE3B 70%);
}
.clinic-point-list {
	max-width: 408px;
	width: 93%;
	margin: 0 auto;
	padding: 20px 0;
	border-radius: 10px;
	background-color: #fff;
	border: 2px solid #E4E6EB;
}
.clinic-point-list li {
	max-width: 273px;
	margin: 0 auto 7px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	column-gap: 10px;
}
.clinic-point-list li:last-child {
	margin-bottom: 0;
}
.clinic-point-list p {
	width: calc(100% - 34px);
}
.clinic-point-list li::before {
	content: "";
	background-image: url("../img/icon_point_check.svg");
	background-repeat: no-repeat;
	background-size: 24px;
	width: 24px;
	height: 24px;
}
.clinic-detail-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 455px;
	width: 93%;
	margin: 0 auto 10px;
	color: #fff;
	font-weight: 400;
}
.clinic-detail-title span {
	width: 115px;
	background-color: #5C8EBE;
	padding: 5px;
	text-align: center;
}
.clinic-detail-title::after {
	content: "";
	width: calc(97% - 115px);
	height: 1px;
	background-color: #5C8EBE;
}
.clinic-detail {
	display: grid;
	grid-template-columns: 26% 74%;
	grid-template-rows: repeat(5, 1fr);
	align-items: center;
	max-width: 455px;
	width: 93%;
	height: 100%;
	margin: 0 auto;
}
.clinic-detail dt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px;
	height: 100%;
	background-color: #5C8EBE;
	color: #fff;
	text-align: center;
	position: relative;
}
.clinic-detail dd {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 15px;
	background-color: #F2F8FF;
	line-height: 1.2;
	position: relative;
}
.clinic-detail dt::after, .clinic-detail dd::after {
	content: "";
	position: absolute;
	bottom: 0;
	background-color: #E4E6EB;
	height: 1px;
}
.clinic-detail dt::after {
	width: 93%;
	right: 0;
}
.clinic-detail dd::after {
	width: 98%;
	left: 0;
}
.clinic-note {
	max-width: 455px;
	width: 93%;
	margin: 5px auto 40px;
}
.clinic-btn {
	display: block;
	max-width: 455px;
	width: 93%;
	margin: 0 auto;
	padding: 15px;
	background-color: #FFDE3B;
	border: 1px solid #fff;
	box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
	text-align: center;
	color: #122037;
	line-height: 1.3;
}

@media screen and (max-width: 465px) {
	.clinic-item {
		margin-bottom: 30px;
	}
	.clinic-detail {
	grid-template-columns: 35% 65%;
}
}
/*---------------------------
		AGA
---------------------------*/
.AGA {
	background-color: #0B1E40;
	padding: 20px 0;
	position: relative;
	z-index: 1;
}
.aga-wrap {
	background-color: #fff;
	padding: 50px 0 20px;
	overflow: hidden;
}
.aga-wrap::after {
	content: "";
	background-image: url("../img/illust_treatment.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 155px;
	height: 200px;
	position: absolute;
	right: 7%;
	bottom: 0;
	z-index: 0;
}
.aga-h2 {
	max-width: 493px;
	min-width: 347px;
	width: 80%;
	padding: 15px 0;
	background-color: #D66D51;
	text-align: center;
	color: #fff;
	position: absolute;
	left: 0;
	top: -10%;
}
.aga-p {
	max-width: 425px;
	width: 70%;
	margin-left: min(9vw, 85px);
	position: relative;
	z-index: 1;
}
.aga-p::after {
	content: "AGA（男性型脱毛症）は、自然には治らない進行性の脱毛症です。放置すると少しずつ毛が弱り、生えにくくなっていきます。\A進行を止め、改善を目指せるのは医療の治療だけ。早く始めるほど、守れる髪は多くなります。";
	white-space: pre-wrap;
	width: 100%;
	height: 100%;
	-webkit-text-stroke: 4px #fff;
	text-stroke: 4px #fff;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
@media screen and (max-width: 570px) {
	.aga-wrap::after {
		right: 3%;
		bottom: 0;
	}
}

@media screen and (max-width: 500px) {
	
	.aga-wrap::after {
		right: unset;
		bottom: unset;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.aga-h2 {
	font-size: 30px;
}
	.aga-p {
	max-width: 425px;
	width: 90%;
	margin-left: 0;
		margin: 20% auto 0;
		font-size: 16px;
}
}
/*---------------------------
		POINT
---------------------------*/
.Point {
	padding: 50px 0 30px;
}
.point-title-wrap {
	max-width: 620px;
	width: 93%;
	margin: 0 auto;
	padding: min(5vw, 36px) 0;
	text-align: right;
	position: relative;
	z-index: 1;
}
.point-title-wrap::before {
	content: "";
	background-image: url("../img/illust_point1.svg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 133px;
	max-height: 180px;
	width: 20vw;
	height: calc(20vw * 1.3533);
	min-width: 110px;
	min-height: 149px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.point-h2 {
	color: #D66D51;
}
.point-list {
	max-width: 630px;
	width: 93%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.point-item {
	padding: 5% 6%;
	background-color: #E4E6EB;
	display: grid;
	grid-template-columns: 23% 77%;
	grid-template-rows: 1fr 3fr;
	grid-row-gap: 10px;
	margin-bottom: 30px;
}
.point-item-h4 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	align-self: center;
	line-height: 1;
	font-weight: 600;
}
.point-item-h3 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	align-self: center;
	color: #D66D51;
	line-height: 1;
	font-weight: 600;
}
.point-item-img {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	max-width: 100px;
	align-self: center;
}
.point-item-p {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	align-self: center;
}
@media screen and (max-width: 600px) {
	.point-title-wrap {
		max-width: 495px;
	}
	.point-title-wrap::before {
		width: 25vw;
		height: calc(25vw * 1.3533);
		top: unset;
		left: 0;
		bottom: 0;
	}
	.point-item {
	padding: 5% 4%;
	grid-template-columns: 23% calc(77% - 10px);
	grid-column-gap: 10px;
}
}
@media screen and (max-width: 450px) {
	.point-title-wrap::before {
	top: unset;
	left: 0;
		bottom: -32%;
		
}
	.point-item {
	padding: 5% 3%;
	grid-template-columns: 30% calc(70% - 10px);
	grid-template-rows: 1fr 5fr;
		margin-bottom: 20px;
}
	
}
/*---------------------------
		RECOMMEND
---------------------------*/
.Recommend {
	background-color: #C1E7F5;
	padding: 40px 0;
}
.recommend-wrap {
	max-width: 610px;
	width: 93%;
	background-image: url("../img/bg_recommend.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding: 20px 0;
	margin: 0 auto;
	position: relative;
}
.recommend-wrap::after {
	content: "";
	background-image: url("../img/illust_recommend.svg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 127px;
	max-height: 165px;
	min-width: 100px;
	min-height: 130px;
	width: 20vw;
	height: calc(20vw * 1.2992);
	position: absolute;
	bottom: -30px;
	right: 10%;
}
.recommend-p {
	width: fit-content;
	margin: 20px auto 0;
}
.recommend-h2 {
	width: fit-content;
	margin: 0 auto;
	background-image: url("../img/underline.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	color: #D66D51;
	line-height: 1.25;
}
.recommend-list {
	max-width: 341px;
	width: 85%;
	margin: 20px auto 30px;
}
.recommend-list li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: 5px;
	margin-bottom: 7px;
	letter-spacing: 0;
}
.recommend-list li::before {
	content: "";
	background-image: url("../img/icon_check.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 29px;
	height: 27px;
}
.recommend-note {
	max-width: 580px;
	width: 93%;
	margin: 0 auto 20px;
}
.recommend-note li {
	max-width: 411px;
	width: 80%;
}
.recommend-btn {
	max-width: 598px;
	width: 85%;
}
@media screen and (max-width: 615px) {
	.recommend-wrap {
		background-image: url("../img/bg_recommend-sp1.svg");
		padding: 20px 0;
	}
	.recommend-wrap::after {
		right: 5%;
	}
	
	.recommend-list {
		margin-bottom: 0;
		padding-bottom: 15px;
	}
	.recommend-note {
		max-width: 480px;
	}
	.recommend-note li {
		width: 75%;
	}
}

@media screen and (max-width: 480px) {
	.recommend-wrap {
		background-image: url("../img/bg_recommend-sp2.svg");
	}
	.recommend-wrap::after {
		right: 2%;
		bottom: -40px;
	}
	.recommend-note {
		max-width: 400px;
	}
	.recommend-note li {
		width: 70%;
	}
}

@media screen and (max-width: 425px) {
	.recommend-wrap {
		background-image: url("../img/bg_recommend-sp3.svg");
		padding: 25px 0;
	}
	.recommend-wrap::after {
	width: 15vw;
	height: calc(15vw * 1.2992);
		bottom: -60px;
}
	.recommend-list {
		max-width: 262px;
	}
	.recommend-list li p {
	width: calc(100% - 30px);
}
	.recommend-note {
		max-width: 320px;
	}
	.recommend-note li {
		width: 75%;
	}
} 
/*-----------------------------
Footer
------------------------------*/
footer {
	background-color: #D9D9D9;
	padding: 10px;
	text-align: center;
}
footer a {
	text-decoration: none;
	color: #122037;
}