/* ---------------------------------------------------------------------------------------------------------------------------- */
@import url('../../common.css');
@import url('../../modules/button.css');
@import url('../../modules/contents-card.css');
@import url('../../modules/modal-online.css');
/* ---------------------------------------------------------------------------------------------------------------------------- */

.panasonicbeauty {
	font-feature-settings: inherit;
	-webkit-font-feature-settings: inherit;
	main {
		section {
			position: relative;
			max-width: 1920px;
			margin-inline: auto;
			width: 100%;
			h1,
			h2 {
				line-height: 1.8;
				letter-spacing: 0.3rem;
				font-weight: 500;
			}
			p {
				font-size: clamp(1rem, 0.9rem + 1vw, 1.8rem);
				line-height: 2;
				letter-spacing: 0.15rem;
				text-align: justify;
				word-break: break-all;
			}
			.caption {
				small {
					font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
					margin-right: 1.5em;
				}
			}
			.pc_only {
				display: none !important;
			}
			.sp_only {
				display: flex !important;
			}
		}
		.inner {
			width: 90%;
			max-width: 110rem;
			margin-inline: auto;
		}
		.mv {
			margin: 3em auto 0;
		}
		.intro {
			margin: 3em auto;
			h1 {
				font-size: clamp(1.375rem, 0.8375rem + 2.6875vw, 4.0625rem);
				color: #885259;
				text-align: center;
				margin: 0 auto 1em;
			}
			p {
				text-align: center;
				color: #8b8078;
				font-size: clamp(1rem, 0.9rem + 1vw, 1.9rem);
			}
		}
		.cont01,
		.cont02,
		.cont03,
		.cont04 {
			overflow: hidden;
			.inner {
				position: relative;
			}
			.flex {
				justify-content: space-between;
				position: relative;
				display: flex;
				flex-direction: column;
				gap: 2em;
			}
			.text {
				h2 {
					margin: 0 0 1em;
					font-size: clamp(1.5rem, 1.2375rem + 1.3125vw, 2.8125rem);
				}
			}
			.img01 {
				margin-left: calc(48% - 50vw);
				margin-right: auto;
			}
		}
		.cont01 .img02,
		.cont02 .img04,
		.cont03 .img07,
		.cont04 .img08 {
			img {
				height: fit-content;
				height: -moz-fit-content;
				height: min-intrinsic;
			}
		}
		.cont01 {
			margin-bottom: 5em;
			.img_flex {
				margin-top: 3em;
				display: flex;
				gap: 1em;
				align-items: center;
				.img02 {
					flex: 0.5;
				}
				.img03 {
					flex: 1;
				}
			}
		}
		.cont02 {
			.text {
				h2 {
					margin: 0 0 1.5em;
				}
			}
			.img05 {
				padding-left: 5%;
				img {
					margin-top: 1em;
					margin-left: auto;
				}
			}
		}
		.cont03 {
			margin-top: 5em;
			margin-bottom: 5em;
			.img06 {
				margin-left: calc(48% - 50vw);
				margin-right: auto;
			}
			.img07 {
				display: flex;
				gap: 1em;
				flex-direction: row;
				margin-top: 3em;
			}
		}
		.cont04 {
			margin-top: 5em;
			margin-bottom: 5em;
			.img09 {
				margin-top: 3em;
				display: flex;
				flex-direction: row;
				gap: 1.5em;
				margin-right: calc(50% - 50vw);
				margin-left: auto;
				img {
				}
			}
		}
		/*参加者の皆さまからの声*/
		.voice {
			position: relative;
			width: 90%;
			max-width: 140rem;
			margin: 5em auto;
			.voice_title {
				display: flex;
				gap: 2em;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin: 2em auto;
				h2 {
					text-align: center;
					line-height: 1.4;
					font-weight: 400;
					letter-spacing: 0.2rem;
					font-size: clamp(1.375rem, 1rem + 3vw, 3.75rem);
				}
				p {
					line-height: 1.5;
					text-align: center;
					font-size: clamp(1rem, 0.85rem + 1vw, 1.6rem);
				}
			}
			.voice_comment {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				gap: 3em;
				justify-content: center;
				li {
					img {
						display: block;
					}
					&.com01 {
						img {
							margin-right: auto;
							max-width: 85%;
						}
					}
					&.com02 {
						img {
							margin-left: auto;
							max-width: 80%;
						}
					}
					&.com03 {
						img {
							margin-right: auto;
							max-width: 70%;
						}
					}
					&.com04 {
						img {
							margin-left: auto;
							max-width: 70%;
						}
					}
				}
			}
		}
		/*OMOTESANDO*/
		.omotesando {
			overflow: hidden;
			background: #f1efe9;
			position: relative;
			.omotesando_info {
				display: flex;
				flex-direction: row;
				.omotesando_info-bar {
					color: var(--white);
					margin-left: calc(15% - 50vw);
					margin-right: auto;
					flex: 1;
					position: relative;
					&::before {
						position: absolute;
						content: '';
						left: 0;
						top: 0;
						width: 100%;
						height: 500vh;
						background: var(--black);
						z-index: 0;
					}
					p {
						z-index: 1;
						writing-mode: vertical-rl;
						-webkit-writing-mode: vertical-rl;
						-ms-writing-mode: tb-rl;
						margin-left: auto;
						position: relative;
						font-weight: 300;
						line-height: 1;
						margin-right: 1.2em;
						padding-top: 8em;
						span {
							background: var(--black);
							z-index: 1;
							position: relative;
							padding-top: 1em;
							letter-spacing: 0.2rem;
						}
						&::before {
							position: absolute;
							content: '';
							width: 0.75px;
							height: 100%;
							background: var(--white);
							top: 0;
							left: 0;
							right: 0.3em;
							margin: 0 auto;
							z-index: 0;
						}
					}
				}
				.omotesando_info-text {
					z-index: 1;
					height: fit-content;
					flex: 1.5;
					padding: 3em 0 3em 3em;
					h2 {
						margin: 0 0 1.5em;
						font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2.7rem);
					}
				}
			}
			.omotesando_img {
				position: relative;
				z-index: 1;
				width: 100%;
				max-width: 1920px;
				margin-inline: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 1em;
				margin-bottom: 3em;
				.omotesando_imgs {
					width: 65%;
					display: flex;
					gap: 1em;
					flex-direction: column;
					.img01 {
					}
					.img02 {
						width: 65%;
						margin-left: auto;
					}
				}
				.img03 {
					width: 35%;
					img {
						margin-left: auto;
						display: block;
					}
				}
			}
		}
		/*バナー*/
		.section-banner {
			&.inner {
				max-width: 80rem;
			}
			ul {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				gap: 3em;
				justify-content: center;
				li {
					&.moist-wash figure picture {
						top: 0.9em;
						right: 2em;
					}
					&.jelly-aquarysta figure picture {
						top: 2.2em;
						right: 1em;
						img {
							width: 82%;
							height: 82%;
						}
					}
					&.moist-lotion figure picture {
						top: 0.7em;
						right: 2em;
					}
					&.moist-emulsion figure picture {
						top: 0.8em;
						right: 1.9em;
					}
					a {
						margin: auto;
						overflow: hidden;
						width: 100%;
						max-width: 40rem;
						padding: 1em;
						box-shadow: rgba(0 0 0 / 0.4) 3px 3px 5px;
						transition: box-shadow 0.3s ease;
						-webkit-transition: box-shadow 0.3s ease;
						display: flex;
						align-items: center;
						flex-direction: row;
						position: relative;
						&:hover {
							box-shadow: rgba(0 0 0 / 0.5) 3px 3px 5px;
							.item-button {
								color: var(--white);
								background: var(--sciencered);
							}
						}
					}
					figure {
						width: 100%;
						padding: 0.5em 1.5em 1em;
						border: 1px solid var(--sciencered);
						picture {
							z-index: 1;
							position: absolute;
							height: 100%;
							width: 30%;
							img {
								width: 100%;
								height: 103%;
								object-fit: contain;
								display: block;
							}
						}
						figcaption {
							z-index: 2;
							position: relative;
							flex: 1;
							.item-name {
								font-size: clamp(1rem, 0.7rem + 1vw, 1.25rem);
								font-weight: 300;
								line-height: 1.3;
								letter-spacing: 0.2rem;
								margin-bottom: 1.5em;
								&::before {
									display: block;
									content: attr(data-text) '';
									font-family: var(--oswald);
									font-size: 1.8em;
									font-weight: 200;
									line-height: 1.5;
									letter-spacing: 0.3rem;
								}
							}
							.item-button {
								color: var(--sciencered);
								background: none;
								border: 0.1rem solid var(--sciencered);
								max-width: 10rem;
								margin: 0;
								font-size: clamp(1rem, 0.9rem + 1vw, 1.6rem);
								width: 100%;
								height: auto;
								padding: 0.2em 0.3em 0.3em;
								line-height: 1;
								transition: 0.3s;
								-moz-transition: 0.3s;
								-webkit-transition: 0.3s;
								-o-transition: 0.3s;
								font-weight: 500;
								text-align: center;
							}
						}
					}
				}
			}
		}
		@media (min-width: 897px) {
			section {
				h1,
				h2 {
					letter-spacing: 0.6rem;
				}
				p {
					line-height: 2.2;
				}
				.pc_only {
					display: flex !important;
				}
				.sp_only {
					display: none !important;
				}
			}
			.mv {
				margin: 6em auto 0;
			}
			.intro {
				margin: 6em auto 10em;
			}
			.voice {
				margin: 5em auto 8em;
				.voice_title {
					margin: -14em auto 3em;
				}
				.voice_comment {
					gap: 7em;
					grid-template-columns: repeat(2, 1fr);
					li {
						&.com01 {
							margin-top: -2em;
							img {
								margin-right: auto;
								margin-left: 0;
							}
						}
						&.com02 {
							margin-top: 3em;
							img {
								margin-left: auto;
								margin-right: 0;
							}
						}
						&.com03 {
							img {
								margin-left: auto;
								margin-right: 0;
							}
						}
						&.com04 {
							img {
								margin-right: auto;
								margin-left: 0;
							}
						}
					}
				}
			}
			.omotesando {
				.omotesando_info {
					.omotesando_info-bar {
						p {
							margin-right: 2em;
						}
					}
					.omotesando_info-text {
						padding: 6em 0 6em 4em;
					}
				}
				.omotesando_img {
					margin-bottom: 5em;
					gap: 5em;
					.omotesando_imgs {
						width: 70%;
						gap: 5em;
						.img02 {
							width: 55%;
						}
					}
					.img03 {
						width: 30%;
					}
				}
			}
			.cont01,
			.cont02,
			.cont03,
			.cont04 {
				.text {
					h2 {
						margin: 0 0 1.5em;
					}
				}
			}
			.cont01 .img02,
			.cont02 .img04,
			.cont03 .img07,
			.cont04 .img08 {
				img {
					max-width: 25rem;
				}
			}
			.cont01 {
				.flex {
					flex-direction: row;
					gap: 0;
				}
				.text {
					margin-left: auto;
					width: 65%;
					h2 {
						margin: 2em 0 1.5em;
					}
					.half {
						width: 80%;
						margin-left: auto;
					}
				}
				.img01 {
					img {
						position: absolute;
						width: 45vw;
						z-index: -1;
					}
				}
				.img02 {
					position: absolute;
					left: 0;
					img {
					}
				}
				.img03 {
					margin-top: 5em;
					width: 55%;
					margin-left: auto;
					display: flex;
				}
			}
			.cont02 {
				.flex {
					flex-direction: row-reverse;
				}
				.text {
					width: 65%;
					.half {
						width: 50%;
					}
				}
				.img04 {
					margin-top: 3em;
				}
				.img05 {
					padding-left: 0;
					width: 55%;
					display: flex;
					margin-left: auto;
					margin-top: -30%;
					img {
						margin-top: 0;
					}
				}
			}
			.cont03 {
				margin-top: 8em;
				margin-bottom: 6em;
				.flex {
					flex-direction: row;
					gap: 0;
				}
				.text {
					margin-left: auto;
					width: 65%;
					h2 {
						margin: 3em 0 1.5em;
					}
					.half {
						width: 80%;
						margin-left: auto;
					}
				}
				.img06 {
					img {
						position: absolute;
						width: 45vw;
						z-index: -1;
					}
				}
				.img07 {
					gap: 3em;
					position: absolute;
					bottom: 2em;
					margin-top: 0;
					flex-direction: column;
				}
			}
			.cont04 {
				margin-top: 10em;
				margin-bottom: 10em;
				.flex {
					flex-direction: row-reverse;
				}
				.text {
					width: 66%;
				}
				.img08 {
					margin-top: 6em;
				}
				.img09 {
					margin-top: 8em;
				}
			}
			.section-banner {
				ul {
					grid-template-columns: repeat(2, 1fr);
					gap: 3em 4em;
				}
			}
		}
		@media (min-width: 1025px) {
			.voice {
				margin: 2em auto 8em;
			}
			.omotesando {
				.omotesando_info {
					.omotesando_info-bar {
						margin-left: calc(30% - 50vw);
					}
					.omotesando_info-text {
						padding: 8em 0 6em 6em;
					}
				}
			}
			.cont01 {
				.text {
					width: 65%;
					.half {
						width: 70%;
					}
				}
			}
			.cont02 {
				margin-bottom: 0;
				.text {
					width: 65%;
					.half {
						width: 50%;
					}
				}
				.img05 {
					width: 50%;
					margin-top: -20%;
				}
			}
			.cont03 {
				.text {
					width: 65%;
					.half {
						width: 70%;
					}
				}
			}
		}
		@media (min-width: 1500px) {
			.voice {
				margin: 0 auto 8em;
			}
			.cont01 {
				.text {
					h2 {
						margin: 5em 0 1.5em;
					}
				}
				.img01 {
					/*margin-left: calc(40% - 50vw);*/
				}
				.img03 {
					width: 50%;
				}
			}
			.cont02 {
				.img05 {
					width: 50%;
					margin-top: -15%;
				}
			}
			.cont03 {
				.text {
					h2 {
						margin: 6em 0 1.5em;
					}
				}
				.img06 {
					/*margin-left: calc(40% - 50vw);*/
				}
			}
		}
		@media (max-width: 898px) {
			.text_flex {
				display: flex;
				margin-bottom: 2em;
				gap: 2em;
				align-items: center;
				flex-direction: row-reverse;
				picture {
					flex: 0.5;
				}
				h2 {
					flex: 1;
					font-size: clamp(1.125rem, 0.85rem + 1.375vw, 2.5rem) !important;
					margin: 0 !important;
				}
			}
		}
	}
	footer {
		margin-top: 0;
	}
}