@charset "utf-8";

/*simple style*/

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap);

:root {
	--color-green01: rgb(144, 193, 162);
	--color-green01_40: rgba(130, 193, 159, 0.4);
	--color-pink01: rgb(215, 132, 149);
	--color-light_pink02_55: rgba(244, 218, 221, 0.55);
}


body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	color: #000;
}

html {
	overflow-x: hidden;
}

@media screen and (max-width: 767px) {
	html {
		font-size: clamp(50%, 2.5vw, 130%);
	}

	body {
		height: auto;
		padding-bottom: 8.2rem;
	}
}

.color01 {
	color: var(--color-green01);
}

.color02 {
	color: #f85a74;
}

.bg01 {
	background: #fff;
}

.bg02 {
	background: var(--color-light_pink02_55);
}

.bg03 {
	background: #dbead7;
}

a {
	color: var(--color-green01);
}

.headline {
	position: relative;
	background: url("../images/theme/bg_headline_pink.png") no-repeat center bottom;
	color: #000;
	padding-bottom: 40px;
}

.bg02 .headline,
.feature .headline {
	background: url("../images/theme/bg_headline_green.png") no-repeat center bottom;
}

@media screen and (max-width: 767px) {
	.headline {
		background-size: auto 3px;
		padding-bottom: 2.2rem;
		margin-bottom: 3.2rem;
	}
}

.btn01 {
	width: fit-content;
	display: block;
	margin: 9.2rem auto 1rem;
	text-align: center;
	transition: 0s;
}

.btn01:hover {
	opacity: 1;
	filter: brightness(1.1);
}

@media screen and (max-width: 767px) {
	.btn01 {
		display: none;
	}
}

/*==========　固定フッター　===========*/
.fixed_footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	background: #fff;
	box-shadow: 0px -1px 5px #00000011;
	z-index: 99;
}
.fixed_footer_inner {
	display: block;
	width: 100%;
		max-width: 550px;
	height: auto;
	margin: 0 auto;
	padding: 1em 2.2em;
	font-size: clamp(5px,2.2vw,11px);
}
.fixed_footer_inner .btnlink {
	margin: 0;
	font-size: 1em;
}
.fixed_footer_inner .btnlink li {
	font-size: 1em;
}
@media screen and (min-width: 767px) {
	.fixed_footer {
		display: none;
	}
}

/*==========　ヘッダ　===========*/
#header {
	background: #fff;
}

#header .contact a {}

@media screen and (min-width: 767px) {
	#header .contact {
		padding: 0;
	}
	#header .contact a {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rem;
		padding: 7px 2px 10px;
		height: auto;
		border: 2px solid rgba(136, 177, 155, 1);
		background: linear-gradient(0deg, rgba(156, 191, 173, 1) 0%, rgba(158, 192, 174, 1) 51.69%, rgba(165, 196, 177, 1) 70.31%, rgba(176, 203, 183, 1) 83.59%, rgba(193, 213, 192, 1) 94.24%, rgba(206, 221, 198, 1) 100%);
		color: #fff;
		transition: 0s;
	}
	#header .contact a:hover {
		opacity: 1;
		filter: brightness(1.1);
	}
}

@media screen and (max-width: 767px) {
	.toggle {
		background: #fff;
	}

	.toggle span {
		background: var(--color-green01);
	}

	.btnlink li {
		font-size: 1rem;
	}
	.btnlink li a {
		--border_w: 4px;
		position: relative;
		color: #fff;
		border-radius: 100rem;
		padding: 0.92em 0.62em;
		line-height: 1.2;
		z-index: 10;
		text-decoration: none;
		font-size: 1.6em;
	}

	.btnlink li a::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: calc(100% - var(--border_w) * 2);
		height: calc(100% - var(--border_w) * 2);
		border-radius: 100rem;
		background: #fff;
		z-index: -1;
	}

	.btnlink li:nth-child(1) a {
		background: linear-gradient(180deg, rgba(136, 177, 155, 1) 0%, rgba(193, 218, 196, 1) 100%);
	}

	.btnlink li:nth-child(1) a::before {
		background: linear-gradient(180deg, rgba(206, 221, 198, 1) 0%, rgba(128, 167, 150, 1) 41.55%, rgba(130, 168, 151, 1) 69.18%, rgba(137, 173, 155, 1) 79.14%, rgba(148, 181, 163, 1) 86.23%, rgba(165, 193, 173, 1) 91.96%, rgba(187, 208, 186, 1) 96.82%, rgba(206, 221, 198, 1) 100%);
	}

	.btnlink li:nth-child(2) a {
		background: linear-gradient(180deg, rgba(226, 47, 130, 1) 0%, rgba(225, 193, 199, 1) 100%);

	}

	.btnlink li:nth-child(2) a::before {
		background: linear-gradient(0deg, rgba(244, 164, 195, 1) 0%, rgba(226, 47, 130, 1) 51.32%, rgba(245, 170, 199, 1) 100%);
	}
}

/*==========　ビフォーアフター　===========*/
.before_after {
	padding: 92px 0 96px;
	background: url(../images/theme/bg_design01.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.before_after .ttl {
	color: #000;
	margin-bottom: 44px;
}

.before_after .slide li .box {
	border-radius: 20px;
	padding: 32px 5px 25px;
}

.before_after .slide li .box .head {
	margin: 0 35px;
	border-radius: 50px;
	color: #fff;
	margin-bottom: 5px;
}

.before_after .slide li .box p {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.0em;
	margin-bottom: 4px;
	font-size: 1.8rem;
}

.before_after .slide li .box p.num span {}

.before_after .slide li .box .illust {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 125px;
}

.before_after .slide li .box .illust img {
	max-height: 100%;
	object-fit: contain;
}

.before_after .slide li .box_before .head {
	background: var(--color-pink01);

}

.before_after .slide li .box_after {
	background: var(--color-green01);
}

.before_after .slide li .box_after .head {
	background: #fff;
	color: var(--color-green01);
}

.before_after .slide li .box_after p {}

body .slick-arrow {
	border-color: #2a2a2a!important;
	border-width: 4px 0 0 4px!important;
}

body .slick-dots li {
	background: #dfdfdf;
}

body .slick-dots li.slick-active {
	background: #a9a9a9;
}

@media screen and (max-width: 767px) {
	.before_after {
		padding: 5.0rem 0 5.6rem;
	}
	.before_after .ttl {
		margin-bottom: 1rem;
	}

	.before_after .slide li .box {
		padding: 2.5rem 2rem 2.8rem;
	}

	.before_after .slide li .box .illust {
		height: 5.9rem;
	}

	.before_after .slide li .box .head {
		padding: 1.7rem 0.1rem;
		margin: 0 1rem 1.1rem;
		font-size: 1.6rem;
	}

	.before_after .slide li .box p {
		min-height: 1px;
		font-size: 1.4rem;
	}

	.before_after .slide li .box_block--sp_flex {
		display: flex;
		column-gap: 1rem;
		padding: 0 1.0rem;
	}

	.before_after .slide li .box_block--sp_flex p {
		flex: 1;
		text-align: center;
		font-size: 1.4rem;
	}

	.before_after .slide li .box_block--sp_flex .illust {
		width: auto;
		height: 8.2rem;
		margin-right: 0.2rem;
	}

	.before_after .slide li .box_block--sp_flex .illust img {
		height: 100%;
		width: auto;
	}
}


/*==========　動画　===========*/
.movie {
	padding: 110px 0 118px;
}

.movie_box {
	width: 100%;
	height: auto;
	aspect-ratio: 1600/900;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	line-height: 1;
}

.movie_box div,
.movie_box main,
.movie_box video,
.movie_box iframe {
	width: 100%;
	height: 100%;
	border: none;
	background: #ccc;
}

@media screen and (max-width: 767px) {
	.movie {
		padding: 5.9rem 0 7.0rem;
	}
}


/*==========　concept　===========*/
.concept {
	padding: 92px 0 96px;
	background: url(../images/theme/bg_design02.png);
	background-repeat: no-repeat;
	background-size: cover;
}

@media screen and (max-width: 767px) {
	.concept {
		padding-top: 5.9rem;
		padding-bottom: 6.9rem;
	}

	.concept p {
		font-size: 1.44rem;
	}
}

/*==========　キャッチ　===========*/
.catch img {
	width: 100%;
}

/*==========　こんな方におすすめ　===========*/
.target {
	padding-bottom: 132px;
}

.target li {
	border-radius: 100px;
	color: #2a2a2a;
	font-weight: 400;
}

.target li:nth-child(odd) {
	background: #fff;
}

.target li:before {
	background: url("../images/theme/check_mark01.png") no-repeat;
	background-size: contain;
}

@media screen and (max-width: 767px) {
	.target {
		padding-bottom: 5.4rem;
	}

	.target li {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 1.55rem;
		min-height: 3.0em;
		line-height: 1.25;
	}
}

/*==========　こんな方におすすめ　===========*/
.comparison .ttl {
	background: var(--color-green01);
	border-radius: 20px 20px 0 0;
}

.comparison .box {
	background: #fff;
	border-radius: 20px;
}

.comparison_tbl th, .comparison_tbl td {
	background: #dbead7;
	border: 5px solid #fff;
}

.comparison_tbl .point {
	background: var(--color-green01);
	color: #fff;
}

@media screen and (max-width: 767px) {
	.comparison_tbl th, .comparison_tbl td {
		border: 3px solid #fff;
	}
}


/*==========　サービスの特徴　===========*/
.feature {
	padding: 106px 0 110px;
	background: url(../images/theme/bg_design03.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.feature .flex {
	margin-top: 120px;
}

.feature .flex .ico {
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0 0 -1rem;
	text-align: left;
	color: #fff;
	z-index: 0;
}

.feature .flex .ico span {
	font-size: 3.4rem;
}

.feature .flex .txt {
	padding: 0;
}

.feature .flex .txt .ttl {
	color: #2a2a2a;
	font-size: 2.4rem;
}

.feature .flex.fdr .txt {
	width: 410px;
}

.feature .flex .img {
	flex: 1;
	text-align: right;
}

.feature .flex.fdr .img {
	text-align: left;
}

@media screen and (min-width: 767px) {
	.feature .flex.fdr .img {
		margin-top: 32px;
	}
}

@media screen and (max-width: 767px) {
	.feature {
		padding: 60px 0;
	}

	.feature .flex .ico:after {
		height: 99px;
		width: 99px;
	}

	.feature .flex .ico {
		right: 10%;
	}

	.feature .flex.fdr .txt {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.feature .flex {
		margin-bottom: 0;
		margin-top: 6.2rem;
	}

	.feature .flex .ico {
		position: absolute;
		top: -1.5rem;
		left: auto;
		right: 0;
		max-width: 8.7rem;
	}

	.feature .flex.fdr .ico {
		left: 0;
		right: auto;
	}

	.feature .flex .txt .ttl {
		font-size: 2rem;
		line-height: 1.4;
		margin-top: 1.5rem;
		margin-bottom: 1.3rem;
	}
}

/*==========　専門家から推奨の声　===========*/
.thought {
	padding: 102px 0 110px;
}

.thought .inner {
	position: relative;
	z-index: 10;
}

.thought .block {
	z-index: 10;
}

.thought .block .img {
	position: absolute;
	bottom: 2.2rem;
	right: 0;
	transform: translateX(82%);
	z-index: -1;
}

.thought .txt .ttl {
	margin: 0 0 0.76em;
	color: var(--color-pink01);
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.62;
}

.thought .txt p {
	max-width: 444px;
	font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
	.thought .block .img {
		bottom: 0;
		width: 17rem;
		transform: translateY(1.4%) translateX(2%);
	}

	.thought {
		padding: 0;
	}

	.thought .txt .ttl {
		font-size: 1.9rem;
	}

	.thought .txt p {
		font-size: 1.4rem;
	}

	.thought .inner {
		padding-top: 6.2rem;
		padding-bottom: 20rem;
	}
}

/*==========　お客様の声　===========*/
.voice .unit {
	border-radius: 20px;
}

.voice .unit .detail p {
	font-size: 1.5rem;
}

.voice .unit .head .txt .ttl {
	min-height: 3.0em;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

@media screen and (min-width: 767px) {
	.voice .slick-dots {
		display: none!important;
	}
}
@media screen and (max-width: 767px) {
		.voice .unit .head .txt .ttl {
		min-height: 2.0em;
	}
}


/*==========　サービスの流れ　===========*/
.flow {
	padding-bottom: 125px;
}

.flow .unit {
	padding-top: 22px;
	padding-bottom: 25px;
	min-height: 10rem;
	background: rgba(208, 153, 164, 0.3);
	border-radius: 20px;
}

.flow .unit .ico {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
}

.flow .strong_text {
	display: inline-block;
	padding-top: 0.32em;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.02;
}

@media screen and (max-width: 767px) {
	.flow {
		padding-bottom: 7.6rem;
	}

	.flow .unit {
		padding-top: 1.3rem;
		padding-bottom: 1.76rem;
		padding: 1.3rem 1rem 1.76rem 9.2rem;
	}

	.flow .unit .ico {
		top: 0;
		transform: translateY(-2%);
		width: 8.7rem;
		max-width: 130px;
	}

	.flow .unit p {
		line-height: 1.6;
	}

	.flow .unit p .strong_text {
		margin-bottom: 0.22em;
		font-size: 2.0rem;
		line-height: 1.34;
	}
}

/*==========　料金について　===========*/
.price .img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 1000px;
	max-width: 10000px;
}

.price .img img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.price .img {
		width: 110%;
	}
}

/*==========　よくあるご質問　===========*/
.faq dt {
	position: relative;
	background: var(--color-green01_40);
	border-radius: 100px;
	color: #000;
}

.faq dt {
	background: #dbead7 url("../images/theme/ico_faq01.png") no-repeat left 10px center;
	border-radius: 100px;
	color: #000;
}

.faq dd {
	background: url("../images/theme/ico_faq02.png") no-repeat left 10px top 10px;
}

.faq dt:before {
	border-top: 1px solid #000;
}

.faq dt:after {
	border-top: 1px solid #000;
}

@media screen and (max-width: 767px) {
	.faq dt, .faq dd {
		padding-left: 5.4rem;
		background-size: 3.2rem;
	}

	.faq dd {
		padding-top: 1.3rem;
		padding-bottom: 1rem;
	}
}

/*==========　会社案内・アクセス ===========*/
.about .about_tbl th, .about .about_tbl td {
	color: #000;
}

.about .about_tbl td a {
	color: #000;
}

.about .flex {
	justify-content: center;
}

.about .txt {
	width: 100%;
	max-width: 760px;
}

.about .img img {
	border-radius: 20px;
}

@media screen and (max-width: 767px) {
	.about .img img {
		border-radius: 10px;
	}

}

/*==========　お問い合わせ・オファー ===========*/
.contact .headline {
	color: #000;
}

.contact .offer .unit {
	background: var(--color-green01);
	border-radius: 20px;
}

.contact .offer .unit .ttl {
	color: #fff;
	background: var(--color-green01);
	border-radius: 20px 20px 0 0;
}

.contact .form .ttl {
	color: #fff;
	background: var(--color-green01);
	border-radius: 20px 20px 0 0;
}

.form .formwrap {
	border-radius: 0 0 20px 20px;
}

.contact .form_tbl td .check_wrap {
	background: #f2f2f2;
}

.form .check_wrap label input[type="checkbox"]:checked+span:after {
	border-left: 3px solid var(--color-green01);
	border-bottom: 3px solid var(--color-green01);
}

.form .btnwrap .btn {
	border: 2px solid var(--color-green01);
	background: linear-gradient(0deg, rgb(130, 193, 159) 0%, rgb(144, 204, 154) 51.69%, rgba(147, 196, 155, 1) 70.31%, rgba(147, 203, 162, 1) 83.59%, rgba(156, 213, 176, 1) 94.24%, rgb(162, 228, 182) 100%);
	border-radius: 100px;
	color: #fff;
	font-size: 2.2rem;
}


/*確認画面・完了画面*/
.contact.confirm .headline, .contact.finish .headline {
	color: #000;
}

.contact.finish p {
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.6rem;
}

.form .btnwrap .btn.back {
	background: #000;
	border: none;
}