@charset "UTF-8";
.functions{
	.fv .box{
		display: flex;
		align-items: top;
		justify-content: space-between;
		gap: 32px;
	}
	.fv .box .text{
		width: 50%;
	}
	.fv .box .image{
		width: 50%;
	}
	.fv h1{
		color: #FF4B36;
		margin-bottom: 16px;
		line-height: 1.0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.fv h1 img{
		width: 80px;
		height: auto;
	}
	p.lead{
		font-size: 20px;
		color: #29486D;
		line-height: 160%;
		font-weight: 700;
		margin-bottom: 16px;
	}
	.functions-content{
		background-color: #EDEFF3;
		margin-top: 32px;
		padding-top: 48px;
		padding-bottom: 48px;
	}
		.functions-content .onayami{
			width: 540px;
			margin: 0px auto;
		}
			.functions-content .onayami h2{
				color: #6B5744;
				text-align: center;
			}
			.functions-content .onayami > .box {
				margin-top: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 16px;
			}
			.functions-content .onayami .box .image{
				width: 180px;
			}
				.functions-content .onayami ul li{
					color: #4C4C4C;
					font-weight: 700;
					font-size: 20px;
					line-height: 200%;
				}
		.functions-content .merit-anchors{
			margin-top: 16px;
			display: flex;
			align-items: stretch;
			justify-content: center;
			gap: 16px;	
			}
			.functions-content .merit-anchors a{
				display: block;
				width: 50%;
				border-radius: 32px;
				filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
				padding: 24px 24px;
				background-color: #FFF;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
				.functions-content .merit-anchors a:hover{
					filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2));
				}
				.functions-content .merit-anchors .box .icon{
					width: 40px;
					margin: 0px	auto;
				}
				.functions-content .merit-anchors .box h3{
					color: #FF4B36;
					margin-top: 6px;
				}
				.functions-content .merit-anchors .box p{
					margin-top: 8px;
					font-weight: 700;
					flex-grow: 1; 
					display: flex;
					align-items: center; 
					justify-content: center;
				}
				.functions-content .merit-anchors .box span{
					color: #4C4C4C;
					font-size: 32px;
				}
		.functions-content .merit-content{
			background-color: #FFF;
			margin-top: 16px;
			width: 100%;
			border-radius: 32px;
			padding: 32px 48px;
		}
			.functions-content .merit-content h3{
				text-align: center;
				color: #FF4B36;
				font-size: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
			}
			.functions-content .merit-content h3 img{
				width: 24px;
			}
			.functions-content .merit-content .content{
				margin-top: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 48px;
			}
			.functions-content .merit-content .content .text{
				max-width: 548px;
				width: 60%
			}
				.functions-content .merit-content .content .text h4{
					font-size: 28px;
					color: #29486D;
				}
				.functions-content .merit-content .content .text p{
					font-size: 18px;
					margin-top: 16px;
				}
			.functions-content .merit-content .content .image{
				max-width: 380px;
				width: 40%;
			}
				.functions-content .merit-content .sub-merit{
					margin-top: 24px;
				}
					.sub-merit{
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-wrap: wrap;
					}
					.sub-merit div{
						width: 32%;
						background-color: #f5f5f5;
						text-align: center;
						border-radius: 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 4px;
						padding: 12px 8px;
						text-align: left;
					}
					.sub-merit div p{
						font-size: 16px;
						color: #4C4C4C;
						font-weight: 700;
					}
					.sub-merit div img{
						width: 28px;
					}
	.functions-content .cta-contents{
		text-align: center;
		margin-top: 48px;
	}
	.salon-voice{
		margin-top: 48px;
	}
		.salon-voice h2{
			text-align: center;
			font-size: 24px;
		}
		.salon-voice .box{
			margin-top: 8px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 16px;
		}
		.salon-voice .box .inner-box{
			background-color: #FFF;
			width: 50%;
			border-radius: 16px;
			padding: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 8px;
		}
			.salon-voice .box .inner-box .image{
				width: 80px;
			}
			.salon-voice .box .inner-box .text{
				width: calc(100% - 80px);
			}
			.salon-voice .box .inner-box .text .excerpt{
				font-size: 16px;
				line-height: 160%;
				color: #4C4C4C;
			}
			.salon-voice .box .inner-box .text .salon-name{
				color: #4C4C4C;
				font-weight: 700;
				font-size: 14px;
			}
	}

@media screen and (max-width:980px) {
.functions{
	.fv .cta-btn-wrap a.cta-btn.size-m{
		padding: 16px 24px;
	}
		.fv .box .text h1 {
			font-size: 28px;
		}
		.fv .box .text p {
			font-size: 18px;
		}
		.fv .box .text p br{
			display: none;
		}
			.functions-content .merit-content h3 img{
				width: 28px;
			}
			.functions-content .merit-content .content{
				gap: 24px;
			}
			.functions-content .merit-content .content .text{
			}
				.functions-content .merit-content .content .text h4{
					font-size: 24px;
				}
				.functions-content .merit-content .content .text p{
					font-size: 16px;
				}
			.functions-content .merit-content .content .image{
			}
				.functions-content .merit-content .sub-merit{
					margin-top: 24px;
				}
					.sub-merit{
					}
					.sub-merit div{
					}
					.sub-merit div p{
						font-weight: 700;
						font-size: 16px;
					}
					.sub-merit div img{
						width: 20px;
						margin-right: 2px;
					}

	}

}
@media screen and (max-width:768px) {
	.functions{
		.fv .box{
			display: block;
		}
		.fv .box .text{
			width: 100%;
		}
		.fv .box .image{
			width: 100%;
			margin: 0px auto 16px;
		}
			.fv h1{
				font-size: 24px;
			}
			.fv h1 img{
				width: 80px;
				height: auto;
			}
			p.lead{
				font-size: 20px;
				color: #29486D;
				line-height: 160%;
				font-weight: 700;
				margin-bottom: 16px;
			}
		.functions-content{
			padding-top: 32px;
			padding-bottom: 32px;
		}
			.functions-content .onayami{
				width: 100%;
			}
			.functions-content .onayami h2{
				font-size: 20px;
			}
			.functions-content .onayami .box{
				display: block;
			}
				.functions-content .onayami .box .image{
					margin: 0px auto;
				}
				.functions-content .onayami .box .text ul li {
					text-align: center;
					line-height: 1.8;
				}
			.functions-content .merit-anchors a{
				border-radius: 24px;
				padding: 16px;
			}
				.functions-content .merit-anchors .box .icon{
					width: 32px;
				}
				.functions-content .merit-anchors .box h3{
					font-size: 16px;
				}
				.functions-content .merit-anchors .box p{
					font-size: 14px;
				}
				.functions-content .merit-anchors .box span{
					color: #4C4C4C;
					font-size: 32px;
				}

		.functions-content .merit-content {
			padding: 24px;
		}
			.functions-content .merit-content h3{
				font-size: 18px;
			}
			.functions-content .merit-content h3 img{
				width: 20px;
			}
			.functions-content .merit-content .content{
				display: block;
				margin-top: 16px;
			}
			.functions-content .merit-content .content .text{
				width: 100%;
				max-width: 100%;
			}
				.functions-content .merit-content .content .text h4{
					font-size: 20px;
				}
				.functions-content .merit-content .content .image{
					width: 100%;
					max-width: 100%;
					margin-top: 8px;
				}
				.functions-content .merit-content .content .text p{
					font-size: 18px;
					margin-top: 8px;
				}
		.functions-content .merit-content .sub-merit{
		}
			.sub-merit{
				display: block;
			}
			.sub-merit div{
				width: 100%;
				margin-top: 6px;
			}
			.sub-merit div p{
				font-size: 16px;
				color: #4C4C4C;
				font-weight: 700;
			}
			.sub-merit div img{
				width: 28px;
			}
	.functions-content .cta-contents{
		width: 90%;
		margin: 16px auto;
		}


	.salon-voice{
	}
		.salon-voice h2{
			font-size: 20px;
		}
		.salon-voice .box{
			display: block;
		}
		.salon-voice .box .inner-box{
			width: 100%;
			border-radius: 16px;
			padding: 16px;
			margin-top: 6px;
		}
			.salon-voice .box .box .image{
				width: 10%;
			}
			.salon-voice .box .inner-box .text{
				width: 90%;
			}
			.salon-voice .box .inner-box .text p.excerpt{
				line-height: 1.4;
			}


	}
}