@charset "UTF-8";

/*------------------------------------------------------
	トップページ
------------------------------------------------------*/

/* --------------------------------------
PC
-------------------------------------- */

/* -----メインラッパー----- */
.main_contents_wrapper {
	max-width: 1194px;
	margin-bottom: 7.5rem;
	font-weight: 500;
}



/* -----ファーストビュー----- */
.firstview_toppage {
	width: 100%;
	max-width: 135rem;
	aspect-ratio: 135 / 52;
	margin: 0 auto;
	margin-top: 5rem;
	background: url(../img/firstview.png) no-repeat center / contain;
	position: relative;
	font-weight: 500;
}

.firstview_toppage_text {
	position: absolute;
	top: 31.3%;
	left: 51.4%;

	& p {
		font-size: 2rem;
		letter-spacing: 0.03rem;
		line-height: 2.1;
	}

	.highlight {
		margin-top: 1.4rem;
		color: #FE6986;
		font-size: 2.7rem;
		letter-spacing: 0.07rem;
		line-height: 1.8;
	}
}



/* -----メディア・口コミセクション----- */
.media_reviews_wrapper {
	display: flex;
	align-items: flex-start;
	padding: 5.5rem 0 8.3rem;

	&>* {
		flex: 50%;
	}

	& h2 {
		margin-bottom: 3.8rem;
		text-align: center;
		font-size: 2.55rem;
		font-weight: 800;
		text-indent: -3rem;
	}

	& p {
		padding-right: 1.4rem;
		font-size: 1.86rem;
		letter-spacing: -0.03rem;
		line-height: 1.89;
	}
}

/* -----メディア----- */
.media h2::before {
	content: "";
	display: inline-block;
	margin-right: 1rem;
	width: 1.8rem;
	aspect-ratio: 1 / 1;
	background: url(../img/media_icon.png) no-repeat center / contain;
}

.audio_controller {
	margin: 5.2rem auto;
	display: flex;
	justify-content: center;

	& div {
		width: 15.68rem;
		height: 6.2rem;
	}

	& audio {
		display: none
	}
}

.audio_play_btn,
.audio_stop_btn {
	border-radius: 1.4rem;
	background-color: #CCC;

	& img:active {
		opacity: 0.5;
		cursor: pointer;
	}
}

@media (hover: hover) {

	.audio_play_btn,
	.audio_stop_btn {
		& img:hover {
			opacity: 0.5;
			cursor: pointer;
		}
	}
}

.audio_play_btn {
	margin-right: 2.5rem;
}

.volume_warning {
	font-size: 1.8rem;
}


/* -----クチコミ----- */
.google_reviews {
	& h2 {
		text-indent: 1.5rem;
	}

	h2::before {
		content: "";
		display: inline-block;
		margin-right: 1rem;
		width: 1.8rem;
		aspect-ratio: 1 / 1;
		background: url(../img/google_icon.png) no-repeat center / contain;
	}
}

/* GoogleMapクチコミ埋込↓ */
.google_reviews_container {
	height: 31rem;
	margin-left: 1rem;
	overflow: auto;
	line-height: 1.8;
	letter-spacing: 0.1em;
	font-feature-settings: "palt";

	.review_container {
		padding: 2.8rem 0;
		border-top: 0.1rem solid #ecedef;
		font-size: 1.3rem;
	}

	div.review_container:first-of-type {
		padding-top: 1rem;
	}


	.review_info,
	.review_rate {
		display: flex;
		align-items: center;
	}

	.review_info {
		margin-bottom: 0.5rem;
	}

	.review_info_icon_wrapper {
		flex: 11%;
		padding-right: 0.5rem;
	}

	.reviewer_icon {
		width: 4rem;
		aspect-ratio: 1 / 1;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}


	.review_info_text_wrapper {
		flex: 89%;
		line-height: 1.5;
	}

	.reviewer_name {
		font-weight: bold;
	}

	.review_rate {
		width: 100%;
		height: auto;
	}

	.review_stars {
		width: 10rem;
		height: 2.4rem;
		position: relative;
		font-size: 1.6rem;

		/* 星：OFF */
		&::before {
			position: absolute;
			content: "★★★★★";
			color: #DADCE0;
		}

		/* 星：ON */
		&::after {
			position: absolute;
			z-index: 3;
			color: #FDD663;
		}
	}

	/* 評価ごとの星の数設定↓ */
	.review_stars[data-rating="1"]::after {
		content: "★";
	}

	.review_stars[data-rating="2"]::after {
		content: "★★";
	}

	.review_stars[data-rating="3"]::after {
		content: "★★★";
	}

	.review_stars[data-rating="4"]::after {
		content: "★★★★";
	}

	.review_stars[data-rating="5"]::after {
		content: "★★★★★";
	}

	/* 評価ごとの星の数設定↑ */

	.review_date {
		color: #70757a;
	}


	.review_text {
		margin-left: max(11%, 4.5rem);
		font-size: 1.3rem;
		letter-spacing: 0.2rem;
		white-space: pre-wrap;
	}


	.more_reviews {
		display: block;
		width: fit-content;
		margin: 0.8rem auto 0;
		padding: 0.8rem 1.6rem;
		border: 0.1rem solid #ccc;
		border-radius: 100vw;
		text-align: center;
		font-size: 1.4rem;

		&:hover {
			opacity: 0.7;
		}
	}
}

/* GoogleMapクチコミ埋込↑ */




/* -----石田さんメッセージ----- */
.owner_message {
	padding-bottom: 7.5rem;
}

.owner_message_wrapper {
	margin-bottom: 4.5rem;
	display: flex;
	align-items: flex-start;

	& h2 {
		font-size: 3.2rem;
		line-height: 1.75;
		padding-right: 2rem;
	}

	& p {
		line-height: 1.95;
		letter-spacing: -0.04rem;
		margin-bottom: 3rem;
	}
}

div.owner_message_container:nth-of-type(1) {
	padding-top: 6.3rem;
	flex: 45.3%;

	& figure {
		margin-top: 6.3rem;
		padding-right: 5rem;
		text-align: center;
		font-size: 1.7rem;
	}

	.owner_photo {
		width: 23rem;
		aspect-ratio: 65 / 71;
		margin: auto;
	}
}

div.owner_message_container:nth-of-type(2) {
	padding-top: 6.9rem;
	flex: 55.7%;
}

/* 改行せず1行で収めるための設定 */
.one_line {
	letter-spacing: -0.124rem;
}

.proverb {
	width: 119.4rem;
	max-width: 100%;
	margin: auto;
	padding: 4.5rem 9rem 4rem;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	text-align: start;
	writing-mode: vertical-rl;
	background-color: #636CB1;
	border-radius: 5rem;
	color: #FFF;
	font-size: 3.5rem;
	font-weight: 300;
	line-height: 1.8;

	.accent {
		font-weight: 600;
	}

	/* ↓育児格言のインデント設定↓ */
	.proverb_1_2,
	.proverb_2_3,
	.proverb_3_3,
	.proverb_4_2 {
		display: inline-block;
		text-indent: 7rem;
	}

	.proverb_2_2,
	.proverb_3_2 {
		display: inline-block;
		text-indent: 3.5rem;
	}

	.proverb_5_2 {
		display: inline-block;
		text-indent: 10.5rem
	}

	/* ↑育児格言のインデント設定↑ */
}



/* -----お母さんの声----- */
.customer_message {
	padding-top: 7.8rem;

	h2,
	.short_comment {
		text-align: center;
	}

	h2 {
		margin-bottom: 4.6rem;
		font-size: 2.5rem;
		font-weight: 800;

		&::before {
			content: "";
			background: url(../img/koe_icon.png) no-repeat center / contain;
			display: inline-block;
			width: 2.3rem;
			aspect-ratio: 1 / 1;
			margin-right: 1.6rem;
			transform: translateY(0.3rem);
		}
	}

	.short_comment {
		margin-bottom: 6rem;
		font-size: 3.15rem;
	}

	.customer_message_container {
		width: 84.5%;
		margin: 5rem auto;
		padding: 6.5rem;
		padding-right: 6.3rem;
		border-radius: 5rem;
		display: flex;
		flex-direction: row-reverse;
	}

	div.customer_message_container:nth-of-type(3n+1) {
		background-color: #FFF2F2;
	}

	div.customer_message_container:nth-of-type(3n+2) {
		background-color: #ECFAFD;
	}

	div.customer_message_container:nth-of-type(3n+3) {
		background-color: #FDF9DC;
	}

	.letter_text_area {
		& h3 {
			font-size: 2.2rem;
		}

		& p {
			margin-top: 3.1rem;
			font-size: 1.5rem;
			line-height: 2.2;
		}
	}

	.letter_image_area {
		margin-right: 4rem;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		.letter_image {
			width: 24rem;
		}
	}
}



/* ----------PCレスポンシブ---------- */
@media screen and (min-width: 1921px) {
	.main_contents_wrapper {
		max-width: 1780px;
	}
}



@media screen and (max-width: 1350px) {
	.firstview_toppage_text {
		& p {
			font-size: 1.5vw;
		}

		.highlight {
			font-size: 2vw;
		}
	}

	.audio_play_btn {
		margin-right: 1.9vw;
	}

}



@media screen and (max-width: 1194px) {

	.proverb {
		padding: 4.5rem 0 3vw;
		font-size: 2.9vw;
		transition-property: padding;
		transition-duration: 0.5s;
	}

	/* ↓育児格言のインデント設定↓ */
	.proverb_1_2,
	.proverb_2_3,
	.proverb_3_3,
	.proverb_4_2 {
		display: inline-block;
		text-indent: 5.9vw;
	}

	.proverb_2_2,
	.proverb_3_2 {
		display: inline-block;
		text-indent: 2.9vw;
	}

	.proverb_5_2 {
		display: inline-block;
		text-indent: 8.9vw;
	}

	/* ↑育児格言のインデント設定↑ */
}



@media screen and (max-width: 1100px) {
	.customer_message {
		.customer_message_container {
			display: block;
		}

		.letter_image_area {
			margin: 4rem auto 0;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 1rem;
		}
	}
}



/* --------------------------------------
モバイル
-------------------------------------- */
@media screen and (max-width: 768px) {

	/* メインラッパー・ページ全体設定 */
	.main_contents_wrapper {
		width: 92.5%;
		margin-bottom: 19.5vw;
	}

	.media_reviews_wrapper,
	.owner_message_wrapper,
	.customer_message_container,
	.letter_image_area {
		display: block;
	}



	/* ファーストビュー */
	.firstview_toppage {
		aspect-ratio: 320 / 281;
		margin-top: 2.8vw;
		background-image: url(../img/firstview_sp.png);
	}

	.firstview_toppage_text {
		top: auto;
		bottom: 6vw;
		left: 4.5vw;

		& p {
			font-size: 3.6vw;
			letter-spacing: 0.23vw;
			line-height: 1.9;
		}

		.highlight {
			margin-top: 1.1vw;
			font-size: 4.43vw;
			letter-spacing: 0.14vw;
		}
	}



	/* -----メディア・口コミセクション----- */
	.media_reviews_wrapper {
		padding: 4vw 0 19.5vw;

		& h2 {
			margin-bottom: 4.5vw;
			font-size: 5.6vw;
			text-indent: -2vw;
		}

		& p {
			padding-right: 0;
			font-size: 4vw;
			text-align: justify;
			line-height: 1.74;
		}
	}


	/* -----メディア----- */
	.media {
		margin-bottom: 16vw;

		h2::before {
			width: 4.4vw;
			aspect-ratio: 1 / 1;
			margin-right: 2.6vw;
			transform: translateY(0.3vw);
		}
	}

	.audio_controller {
		height: fit-content;
		margin: 9vw auto;

		& div {
			width: 37vw;
			height: 100%;
			aspect-ratio: 285 / 113;
		}
	}

	.audio_play_btn,
	.audio_stop_btn {
		border-radius: 3.9vw;
	}

	.audio_play_btn {
		margin-right: 4.9vw;
	}

	.volume_warning {
		font-size: 3.9vw;
	}


	/* -----クチコミ----- */
	.google_reviews {
		& h2 {
			&::before {
				width: 6vw;
				aspect-ratio: 1 / 1;
				transform: translateY(0.7vw);
			}
		}
	}

	/* GoogleMapクチコミ埋込↓ */
	.google_reviews_container {
		height: 96.5vw;
		margin-left: 0;

		.review_container {
			padding: 6vw 0;
			font-size: 3vw;
		}

		& div.review_container:first-of-type {
			padding-top: 2.5vw;
		}


		.review_info {
			margin-bottom: 2vw;
		}

		.review_info_icon_wrapper {
			flex: 12%;
			padding-right: 2vw;
		}

		.reviewer_icon {
			width: 9vw;
			margin-right: auto;
		}


		.review_info_text_wrapper {
			flex: 88%;
		}

		.review_stars {
			width: 20vw;
			height: 5vw;
			font-size: inherit;

			&::before,
			&::after {
				top: 50%;
				transform: translateY(-50%);
			}
		}


		.review_text {
			margin-left: max(11.5%, calc(9vw + 2vw));
			padding: 0 2vw 0 0;
			font-size: inherit;
			letter-spacing: 0.4vw;
			line-height: 1.8;
		}


		.more_reviews {
			margin-top: 2vw;
			padding: 2vw 4vw;
			font-size: 3vw;
		}
	}

	/* GoogleMapクチコミ埋込↑ */



	/* -----石田さんメッセージ----- */
	.owner_message {
		padding-bottom: 13.5vw;
	}

	.owner_message_wrapper {
		& h2 {
			font-size: 5.55vw;
			padding: 0 0 0 1vw;
			letter-spacing: 0.1vw;
		}

		& p {
			margin-bottom: 7.2vw;
			text-align: justify;
			font-size: 4.02vw;
			line-height: 1.745;
			letter-spacing: 0;
		}
	}

	div.owner_message_container:nth-of-type(1) {
		padding-top: 7.6vw;

		& figure {
			margin-top: 8vw;
			padding-right: 0;
			font-size: 3.9vw;
		}

		.owner_photo {
			width: 54.3vw;
		}
	}

	div.owner_message_container:nth-of-type(2) {
		margin-bottom: 9vw;
		padding-top: 7.2vw;
	}

	.proverb {
		padding: 7.2vw 1.6vw 7vw;
		border-radius: 8vw;
		font-size: 4.5vw;
		line-height: 1.2;

		/* ↓育児格言のインデント設定↓ */
		.proverb_1_2,
		.proverb_2_3,
		.proverb_3_3,
		.proverb_4_2 {
			display: inline-block;
			text-indent: 9vw;
		}

		.proverb_2_2,
		.proverb_3_2 {
			display: inline-block;
			text-indent: 4.5vw;
		}

		.proverb_5_2 {
			display: inline-block;
			text-indent: 13.5vw;
		}

		/* ↑育児格言のインデント設定↑ */
	}



	/* -----お母さんの声----- */
	.customer_message {
		padding-top: 17.8vw;

		& h2 {
			margin-bottom: 7vw;
			font-size: 5.55vw;
			text-indent: -3vw;

			&::before {
				width: 5vw;
				margin-right: 2.5vw;
				transform: translateY(0.5vw);
			}
		}

		.short_comment {
			margin-bottom: 8vw;
			font-size: 5.7vw;
			line-height: 1.7;
		}

		.customer_message_container {
			width: 100%;
			margin-bottom: 10.4vw;
			padding: 9vw 5.3vw;
		}

		.letter_text_area {
			& h3 {
				margin-bottom: 7.6vw;
				font-size: 4.75vw;
			}

			& p {
				margin-top: 6.4vw;
				font-size: 3.4vw;
				line-height: 2.05;
			}
		}

		.letter_image_area {
			margin-top: 9vw;
			padding: 0 1.3vw;
			gap: 4vw;

			.letter_image {
				width: 37.5vw;
			}
		}
	}
}