/* ============================
// White Room
// CSS properties
// ============================ */
:root {
	--wr-color-orange: #ff9e00;
	--wr-color-skyblue: #87ceeb;
	--wr-color-turquoise: #00adba;
	--wr-color-yellow: #e6e404;

	--wr-color-gray: #999999;
	--wr-color-gray-dark: #666666;
	--wr-color-gray-ligth: #cccccc;

	--wr-color-accent: var(--wr-color-turquoise);
	--wr-color-list-odd: #fff700;
	--wr-color-list-even: #12e297;

	--wr-color-required-srt: #FF9C00;
	--wr-color-required-any: #3dcc12;
	--wr-color-input-background: #eeeeee;
	--wr-color-input-border: #dbdbdb;
}

/* ============================
// White Room
// front-page.php
// ============================ */
.white-room-front-page {
	padding-bottom: 80px;

	.notice-link {
		display: block;
		padding-block: 1em;
		padding-inline: 40px;
		background-color: var(--wr-color-orange);
		text-decoration-line: underline;
		transition: background-color .64s var(--ease);

		&:hover {
			/* background-color: color-mix(in srgb, var(--wr-color-orange) 85%, transparent); */
			background-color: var(--wr-color-accent);
		}
	}

	>section:not(.hero-content) {
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
		padding-inline: var(--container-padding);

		@media (min-width: 960px) {
			width: 85%;
			max-width: 1200px;
		}
	}

	/* .hero-content */
	.splide {
		width: 100%;

		.splide__arrow {
			background-color: transparent;
			opacity: 1;

			svg {
				fill: var(--color-white);
			}
		}

		.splide__slide {
			.slide__image {
				width: 100%;
				height: auto;
				aspect-ratio: 16 / 9;
				object-fit: cover;
			}
		}
	}

	.section-event-news {
		.event-news-title {
			font-size: 24px;
			font-weight: var(--font-weight--Bold);
			text-align: center;
			width: fit-content;
			margin-block: 1em;
			margin-inline: auto;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				left: 0.25em;
				top: calc(100% + 0.25em);
				width: calc(100% - 0.5em);
				height: 6px;
				background-image: repeating-linear-gradient(-45deg, var(--wr-color-skyblue), var(--wr-color-skyblue) 2px, transparent 2px, transparent 4px);
			}
		}

		.event-news-content {
			display: grid;
			gap: 40px;
			margin-block: 40px;

			@media (min-width: 960px) {
				grid-template-columns: repeat(2, 1fr);
			}

			.content-column {
				container-type: inline-size;
				container-name: content-column;

				&.news {}

				&.event {}
			}

			.recent_posts {
				.recent_posts-item {
					display: grid;
					gap: 0.25em 1em;
					padding-block: 0.75em;
					padding-inline: 1.5em;
					border-bottom: 1px dashed var(--wr-color-gray);
					font-size: 14px;
					line-height: 1.8;
					position: relative;

					&::before {
						content: "\3E";
						position: absolute;
						top: 0.75em;
						left: 0.25em;
					}

					@container content-column (min-width: 480px) {
						grid-template-columns: auto 1fr;
					}
				}

				.recent_post-time {}

				.recent_post-link {
					&:hover {
						text-decoration: underline;
					}
				}
			}

			.facebook_banners {
				display: grid;
				gap: 20px;

				.facebook_banners-item {}

				.facebook_banner-link {
					display: block;
					width: 100%;
					height: auto;
					transition: opacity .64s var(--ease);

					&:hover {
						opacity: 0.7;
					}
				}

				.facebook_banner-image {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	.section-site_banners {
		.site_banners-header {
			font-size: 14px;

			.header-label {}

			.header-catchphrase {
				font-size: 24px;
				font-weight: var(--font-weight--Bold);
				margin-block: 1em;
			}

			.header-caption {}
		}

		.site_banners {
			display: grid;
			gap: 14px;
			margin-block: 40px;

			.site_banners-item {}

			.site-link {
				display: block;
				width: 100%;
				height: auto;
				transition: opacity .64s var(--ease);

				&:hover {
					opacity: 0.7;
				}
			}

			.site-picture {}
		}
	}

	.section-site_links {
		.site_links {
			--columns: 1;
			display: grid;
			grid-template-columns: repeat(var(--columns), 1fr);
			gap: 20px;

			@media (min-width: 480px) {
				--columns: 2;
			}

			@media (min-width: 960px) {
				--columns: 3;
			}

			.site_links-item {}

			.site-link {
				display: block;
				width: 100%;
				height: auto;
				transition: opacity .64s var(--ease);

				&:hover {
					opacity: 0.7;
				}
			}

			.site-image {}
		}
	}

}


/* ============================
// White Room
// page.php
// ============================ */
.white-room-page {

	.page-title {
		align-content: center;
		width: 100%;
		max-width: 100%;
		height: 72px;
		padding-inline: 1em;
		background-color: var(--wr-color-gray-dark);
		font-size: 22px;
		font-weight: var(--font-weight--SemiBold);
		color: var(--color-white);
		line-height: 1.5;
		text-align: center;
	}

	.page-container {
		width: 100%;
		max-width: 420px;
		margin-inline: auto;
		padding-inline: var(--container-padding);

		@media (min-width: 480px) {
			width: max(420px, 85%);
			max-width: 1200px;
		}
	}

	.page-breadcrumbs {
		align-content: center;
		height: 64px;
		font-size: 14px;
		color: var(--wr-color-gray);

		.breadcrumb-link:hover {
			text-decoration: underline;
		}
	}

	.page-content {

		h2,
		h3 {
			text-align: center;
			font-weight: var(--font-weight--Bold);
		}

		h3 {
			margin-block: 1em;
			padding-block: 0.5em;
			border-top: 1px solid currentcolor;
			border-bottom: 1px solid currentcolor;
		}

		small {
			font-size: smaller;
		}

		img {
			width: 100%;
			max-width: 100%;
			height: auto;

			/* 白背景を背景色に同化させる */
			mix-blend-mode: multiply;
			filter: contrast(1.05) brightness(1.05);
		}

		section {
			margin-block: 6em;
		}

		.area_gmap iframe {
			width: 100%;
			height: auto;
			aspect-ratio: 600 / 450;
			max-height: 450px;
		}

		.detail a {
			display: block;
			width: 100%;
			max-width: 600px;
			min-height: 3em;
			margin-inline: auto;
			padding: 0.25em;
			border-radius: 2px;
			align-content: center;
			background-color: var(--wr-color-accent);
			font-size: 14px;
			font-weight: var(--font-weight--SemiBold);
			color: var(--color-white);
			text-align: center;
			transition: background-color .32s var(--ease);

			&:hover {
				background-color: color-mix(in srgb, var(--wr-color-accent) 75%, transparent);
			}
		}

		.br-sp {
			@media (min-width: 480px) {
				display: none;
			}
		}
	}

	/* ============================
	// 高齢者福祉
	// ============================ */
	.elderlywelfare {
		h2.main-catch {
			margin-block: 1.5em;
			padding-block: 1.5em;
			border-image: linear-gradient(var(--wr-color-accent)) fill 0 //  0 100vw;
				font-size: 22px;
			color: var(--wr-color-yellow);
			position: relative;

			&::after {
				content: "";
				display: block;
				width: 1em;
				height: 1em;
				background-color: var(--wr-color-accent);
				position: absolute;
				z-index: -1;
				top: 100%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(45deg);
			}

			&:first-child {
				margin-top: 0;
			}
		}

		h3 {
			font-size: 26px;
		}

		aside {
			font-size: 14px;
		}

		section {
			margin-bottom: 6em;
		}

		.txt {
			margin-block: 1.5em;
			font-size: 18px;
			font-weight: var(--font-weight--SemiBold);
			color: var(--wr-color-accent);
			text-align: center;

			&:is(aside + *) {
				margin-top: 0.25em;
			}
		}

		.mt-30 {
			margin-block: 1em;
		}

		:is(.vi, .s_phone) {
			&.vi {
				--pc-width: 80%;
			}

			&.s_phone {
				--pc-width: 50%;
			}

			width: 100%;
			max-width: 420px;
			margin-inline: auto;

			@media (min-width: 480px) {
				width: max(420px, var(--pc-width));
				max-width: 100%;
			}
		}

		:is(.s_phone, .sl_phone) {
			margin-block: 1em;
		}
	}

	/* ============================
	// 子育て支援
	// ============================ */
	.childcaresupport {
		h3 {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 0.5em;
			font-size: 20px;

			small {
				color: var(--wr-color-gray-dark);
			}
		}

		p {
			margin-block: 1em;
			line-height: 1.5;

			&.animated {
				text-align: center;
			}
		}

		ul {
			list-style-type: disc;
			margin-left: 1.5em;
		}
	}

	/* ============================
	// 障がい者福祉
	// ============================ */
	.disabilitywelfare {
		h3 {
			font-size: 20px;
		}

		p {
			margin-block: 1em;
			line-height: 1.5;
		}

		ul {
			li {
				padding-block: 0.25em;
				padding-left: 1.5em;
				border-bottom: 1px solid var(--wr-color-gray-ligth);

				:is(.odd, .even) {
					margin-left: -1.5em;
				}

				.odd {
					color: var(--wr-color-list-odd);
				}

				.even {
					color: var(--wr-color-list-even);
				}
			}
		}

		.txt-center {
			text-align: center;
		}

		.title-picture {}

		.mt-30 {
			margin-block: 2.5em;
		}

		.w-40 {
			width: 100%;
			max-width: 320px;
			margin-inline: auto;

			@media (min-width: 375px) {
				width: max(320px, 40%);
				max-width: 100%;
			}
		}

		.wait {
			margin-block: 1em;
			font-size: 22px;

			&:has(strong) {
				line-height: 2.25em;
			}

			strong {
				text-emphasis-style: circle;
				text-emphasis-color: var(--wr-color-yellow);
			}

			+.txt {
				margin-top: 0;
				text-align: center;
			}
		}

		.wait_foot {
			font-size: 26px;

			+p {
				text-align: center;
			}
		}

		.want {
			width: 100%;
			max-width: 600px;
			margin-inline: auto;

			@media (min-width: 600px) {
				width: max(600px, 60%);
				max-width: 100%;
			}
		}

		.career-assistance {
			display: grid;
			gap: 1.5em;
			max-width: 860px;
			margin-inline: auto;

			@media (min-width: 1024px) {
				grid-template-columns: 1fr 220px;
			}

			.career-assistance-list {
				grid-row: 2 / 3;

				@media (min-width: 1024px) {
					grid-row: 1 / 2;
				}
			}

			.career-assistance-image {
				grid-row: 1 / 2;

				img {
					display: block;
					max-width: 220px;
					height: auto;
					margin-inline: auto;
					border-radius: 2em;
				}
			}
		}

		.info {
			margin-top: -1.5em;
			text-align: center;
		}

		.information-content {
			display: grid;
			gap: 1.5em;
			max-width: 860px;
			margin-inline: auto;
			border-bottom: 1px solid currentcolor;

			@media (min-width: 768px) {
				grid-template-columns: 1fr 1fr;
			}

			p {
				color: var(--wr-color-gray-dark);
			}

			.col-12 {
				grid-column: 1 / -1;
			}
		}

		.map {
			max-width: 350px;
			margin-inline: auto;
		}

	}

	/* ============================
	// 採用情報
	// ============================ */
	.recruitment {
		h3 {
			margin-block: 0;
			font-size: 20px;
		}

		p {
			margin-block: 1em;
		}

		.txt {
			text-align: center;

			b {
				font-size: 34px;
				font-weight: var(--font-weight--SemiBold);
			}
		}

		.pt {
			color: var(--wr-color-accent);
		}

		.full-back {
			display: grid;
			gap: 4em;
			padding-block: 2.5em;
			border-top: 2px solid var(--wr-color-gray-ligth);
			border-bottom: 2px solid var(--wr-color-gray-ligth);

			@media (min-width: 960px) {
				gap: 2em;
			}
		}

		.row {
			display: grid;
			gap: 1.5em;
			margin-inline: auto;

			@media (min-width: 960px) {
				grid-template-columns: minmax(220px, 3fr) 9fr;
			}

			.col-3 {
				img {
					display: block;
					max-width: 600px;
					margin-inline: auto;
				}
			}

			.col-9 {}
		}

		.section-entry {
			margin-top: 8em;

			h3 {
				border-style: dashed none dashed none;
				max-width: 480px;
				margin-inline: auto;
			}

			p {
				max-width: 420px;
				margin-inline: auto;
			}
		}
	}

	/* ============================
	// 施設見学
	// ============================ */
	.facilitytours {
		.facilitytours-title {
			h2 {
				font-size: 26px;
			}

			p {
				margin-block: 1em;
				text-align: center;
			}
		}

		.facilitytours-content {
			display: grid;
			gap: 2.5em;
			margin-block: 6em;

			@media (min-width: 960px) {
				grid-template-columns: 1fr 1fr;
				row-gap: 4em;
			}

			.col-6 {
				@media (min-width: 960px) {
					display: grid;
					grid-template-rows: subgrid;
					grid-row: span 3;
					row-gap: 0.5em;
				}

				h3 {
					font-size: 20px;

					@media (min-width: 960px) {
						margin-block: 0;
					}
				}
			}
		}
	}

	/* ============================
	// 企業案内
	// ============================ */
	.companyguide {
		.hidden-xs {
			display: none;

			@media (min-width: 768px) {
				display: unset;
			}
		}

		.visible-xs {
			@media (min-width: 768px) {
				display: none;
			}
		}

		.text-center {
			margin-block: 2em;
			font-size: 22px;
			font-weight: var(--font-weight--SemiBold);
			text-align: center;
		}


		section.full-back.mt-30 {
			.row {
				display: grid;
				gap: 2em 4em;

				@media (min-width: 860px) {
					grid-template-columns: auto auto;
					justify-content: center;
				}

				.details {
					display: grid;
					place-content: center;
					place-self: center;
					gap: 1em;
					font-size: 14px;

					b {
						font-weight: var(--font-weight--Bold);
					}

					.company {
						display: grid;
						row-gap: 1em;

						@media (min-width: 420px) {
							grid-template-columns: auto 1fr;
							gap: 0.25em 0.5em;
						}

						li {
							display: grid;

							@media (min-width: 420px) {
								grid-template-columns: subgrid;
								grid-column: span 2;
							}
						}

						a {
							color: var(--wr-color-accent);

							&:hover {
								text-decoration: underline;
							}
						}

						.url {
							/* 折返し指定 */
							overflow-wrap: anywhere;
						}
					}

					.director {
						display: grid;
						grid-template-columns: minmax(0, max-content) 120px;
						column-gap: 2em;

						.director-details {
							>* {
								display: inline-block;
							}
						}

						.director-image {
							display: block;
							max-width: 320px;
							margin-inline: auto;
						}
					}

					.col-6 {
						max-width: 420px;
						margin-inline: auto;

						a:hover {
							opacity: 0.7;
						}
					}
				}

				.offset-1 {
					max-width: 320px;
					margin-inline: auto;
				}
			}
		}

		section.full-back.mt5 {
			.office {
				border-style: none;
				background-color: var(--wr-color-gray-dark);
				color: var(--color-white);
				font-size: 18px;
				font-weight: var(--font-weight--Bold);
			}

			.row {
				display: grid;
				gap: 1em 2em;

				@media (min-width: 860px) {
					grid-template-columns: 28% 1fr;
				}

				.col-4 {
					max-width: 420px;
					margin-inline: auto;
				}

				.col-8 {
					p {
						margin-block: 1em;
					}

					ul {
						padding-left: 1.25em;

						li::first-letter {
							margin-left: -1em;
							margin-right: 0.25em;
						}
					}
				}
			}
		}
	}

	/* ============================
	// インターンシップ【エントリーフォーム】
	// ============================ */
	.entry {
		>p {
			margin-block: 1em;

			&.text-center {
				margin-top: 6em;
				margin-bottom: 2em;
				font-size: 20px;
				font-weight: var(--font-weight--Bold);
				text-align: center;
				color: var(--wr-color-accent);
			}
		}
	}

	/* ============================
	// エントリー入力内容確認
	// ============================ */
	.entry-check {
		>p.text-center {
			margin-block: 2em;
			font-size: 20px;
			font-weight: var(--font-weight--Bold);
			text-align: center;
			color: var(--wr-color-accent);
		}
	}

	/* ============================
	// エントリー送信完了
	// ============================ */
	.entry_cmp {
		width: fit-content;
		margin-bottom: 4em;

		p {
			margin-block: 1em;
		}

		>p.text-center {
			margin-block: 2em;
			font-size: 18px;
			font-weight: var(--font-weight--Bold);
			text-align: center;
			color: var(--wr-color-accent);
		}

		hr {
			margin-block: 1.5em;
			border: 1px inset;
		}

		a {
			/* 折返し指定 */
			overflow-wrap: anywhere;
			color: var(--wr-color-accent);

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

/* ============================
// White Room
// Plugin: MW WP Form
// ============================ */
.cform {
	width: 100%;
	border: 1px solid var(--wr-color-gray-ligth);

	tr {
		&:not(:last-child) {
			border-bottom: 1px solid var(--wr-color-gray-ligth);
		}

		@media (min-width: 768px) {
			display: grid;
			grid-template-columns: 16em 1fr;
		}
	}

	th {
		display: flex;
		justify-content: center;
		place-items: center;
		gap: 0.5em;
		width: 100%;
		padding-block: 0.75em;
		padding-inline: 1em;
		background-color: var(-wr-color-gray-ligth);
		font-size: 14px;
		font-weight: var(--font-weight--SemiBold);

		@media (min-width: 768px) {
			justify-content: end;
		}

		span {
			display: inline-block;
			padding: 5px;
			border-radius: 3px;
			font-size: 12px;
			color: var(--color-white);

			&.required-srt {
				background: var(--wr-color-required-srt);
			}

			&.required-any {
				background: var(--wr-color-required-any);
			}
		}
	}

	td {
		display: block;
		padding-block: 0.75em;
		padding-inline: 1em;
		font-size: 14px;
		line-height: 1.5;
	}

	:where(option, textarea, input[type=text], input[type=email], input[type=search], input[type=url]) {
		width: 100%;
	}

	:is(.input_area, .input_area_h, .input_area_phone) {
		padding: 0 10px;
		background-color: var(--wr-color-input-background);
		font-size: 14px;
		font-weight: bold;
		border-radius: 10px;
		border: 2px solid var(--wr-color-input-border);
	}

	.input_area {
		width: 100%;
		height: 50px;
	}

	.input_area_h {
		width: 100%;
		height: 150px;
		padding-block: 10px;
	}

	.mwform-tel-field {
		display: flex;
		align-items: center;
		gap: 0.5em;
		width: 100%;

		.input_area_phone {
			flex-shrink: 1;
			min-width: 0px !important;
			width: 100%;
			max-width: 120px;
			height: 50px;
			text-align: center;
		}
	}

	*:has(> .mwform-checkbox-field.horizontal-item) {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25em 1em;
	}

	.mwform-checkbox-field.horizontal-item {
		margin: 0;

		label {
			display: flex;
			gap: 0.5em;
			align-items: center;

			input[type="checkbox"] {
				appearance: auto;
				-webkit-appearance: checkbox;
				-moz-appearance: checkbox;
				width: 1em;
				height: 1em;
				margin: 0;
			}
		}
	}
}

.white-room-page .page-content[class*="entry"] {
	input[type="submit"] {
		display: block;
		width: 100%;
		max-width: 480px;
		margin: 30px auto;
		padding: 15px;
		background-color: var(--color-text);
		border: 1px var(--color-text) solid;
		text-align: center;
		color: var(--color-white);
		transition: all 0.4s ease;

		@media (min-width: 600px) {
			min-width: 480px;
			width: 60%;
		}

		&:hover {
			background-color: var(--color-white);
			color: var(--color-text);
			cursor: pointer;
		}

		&[name="submitBack"] {
			background-color: var(--wr-color-gray);
			border: 1px var(--wr-color-gray) solid;

			&:hover {
				background-color: var(--wr-color-gray-ligth);
				color: var(--color-text);
			}
		}
	}
}