@charset "utf-8";
:root{
	--wide: 1275px;
	/*Primary*/
	--Red1:#fa000f;
	--Red2:#cc0000;
	--White:#ffffff;
	--Gray1:#f4f4f4;
	--Gray2:#d9d9d9;
	--Gray3:#b3b3b3;
	--Gray4:#737373;
	--Gray5:#4d4d4d;
	--Gray6:#222222;
	--Black:#0c0c0c;
	/*Secondary*/
	--Orange1: #fdc796;
	--Orange2: #fa6900;
	--Orange3: #c85400;
	--Yellow1: #fdec96;
	--Yellow2: #fad200;
	--Yellow3: #967e00;
	--Pink1: #fd96d4;
	--Pink2: #fa00a5;
	--Pink3: #96005a;
	--Purple1: #d096fd;
	--Purple2: #9b00fa;
	--Purple3: #540096;
	--Blue1: #96c5fd;
	--Blue2: #0064fa;
	--Blue3: #004596;
	--Teal1: #96f0fd;
	--Teal2: #00dcfa;
	--Teal3: #008496;
	--Green1: #96fdcc;
	--Green2: #00fa82;
	--Green3: #00964e;
	--Red1_20_Tint: #ffcbce;
	--Red1_40_Tint: #ff979d;
	--Red1_60_Tint: #ff636c;
	--Red1_20_Dark: #bb000b;
	--Red1_40_Dark: #7d0008;
	--Red_Grad: linear-gradient(145deg, #FA000F, #CC0000);
	--WhiteOp: #ffffffe6;
	--BlackOp: rgba(0, 0, 0, 0.08);
	/*Layout*/
	--Col2: calc((100% / 2) - 1em);
	--Col3: calc((100% / 3) - 1em);
	--Col4: calc((100% / 4) - 1em);
}
html {
	scroll-behavior: smooth;
}
#Contents * {
	word-break: auto-phrase;
}
#Contents,.GridSet,.Grid4 {
	width: 100%;
}

.Grid4 {
	width: 100%;
	clip-path: inset(0);
	position: relative;
	z-index: auto;
}
.Grid4 > * {
	position: relative;
	z-index: 1;
}
.Grid4::before {
	content: ""; 
	position: absolute;
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	 inset: 0;
	  background: url(/-/media/company/compass/image/bg_pattern.png) bottom center / cover; 
	  animation: bgAnimation 20s ease-in-out infinite alternate; 
	  z-index: 0; 
}
.Section>.Inner {
	padding: 4em 0;
	width: var(--wide) ;
	margin: auto ;
	word-break: break-word ;
}
.Bold {
	font-weight: bold;
}
.toTop {
	position: fixed;
	bottom: 2em;
	right: 2em;
	z-index: 5;
}
#TopicPath {
	background: var(--White);
	position: relative;
	z-index: 1;
}
#Contents .Section {
	overflow-x: hidden;
	&#Sec00 {
		background: url(/-/media/company/compass/image/bg_main_vusual.png) no-repeat top center / auto 100%;
		min-height: 100vh;
		.Inner {
			display: flex;
			flex-direction: column;
			gap: 1em;
			align-items: self-start;
			justify-content: center;
			height: stretch;
			min-height: 100vh;
			h2 {
				font-weight: bold;
				font-size: 2.8em;
			}
			h3 {
				font-size: 1.6em;
			}
		}
	}
	&#Sec01 {
		.Inner {
			h2 {
				cursor: pointer;
				position: relative;
				display: flex;
				justify-content: center;
				width: 100%;
				font-size: 1.8em;
				font-weight: bold;
				text-align: center;
				padding: 1em;
				background: transparent linear-gradient(166deg, #D9D9D9 0%, #DCC5C7 24%, #EC6E75 83%, #FF000F 100%) 0% 0% no-repeat padding-box;
				border-radius: 8px;
				&.is-open::after {
					transform: rotate(180deg);
				}
				&:after {
					position: absolute;
					right: 1em;
					content: "";
					display: flex;
					width: 48px;
					height: 48px;
					border-radius: 50%;
					background: var(--White) url(/-/media/company/compass/image/icon_toggle.svg) no-repeat center;
					transform: rotate(90deg);
					transition: transform .3s;
				}
				&::before {
					position: absolute;
					right: 1em;
					content: "";
					display: flex;
					width: 48px;
					height: 48px;
					background: transparent url(/-/media/company/compass/image/icon_toggle.svg) no-repeat center;
					transition: transform .3s;
					z-index: 1;
				}
			}
			p {
				font-size: 1.4em;
				font-weight: bold;
				text-align: center;
				margin: 1em 0;
			}
			.InnerSec {
				display: none;
			}
			&.is-open {
				display: block;
			}
		}
	}
	&#Sec02 {
		background: var(--Red1) url(/-/media/company/compass/image/bg_circle.png) no-repeat center / cover;
		.Inner {
			h2 {
				color: var(--White);
				text-align: center;
				font-weight: normal;
				font-size: 2.2em;
				background: none;
				span {
					display: inline;
					background: transparent;
					font-weight: bold;
					color: var(--White);
				}
			}
			p {
				color:  var(--White);
				text-align: center;
			}
			.Sub {
				color: var(--White);
				text-align: center;
				margin: auto auto 1em;
			}
			.Flex {
				width: 100%;
				justify-content: center;
				gap: 6em;
				.Column {
					position: relative;
					flex: 1;
					h3 {
						padding: .5em;
						color: var(--White);
						border-top: 1px solid;
						border-bottom: 1px solid;
						text-align: center;
						font-size: 1.4em;
					}
					a.TxtLink:link,a.TxtLink:visited {
						color: var(--White);
						display: flex;
						align-items: center;
						gap: .5em;
						&::after {
							content: "";
							background: url(/-/media/company/image/wide/icon_link_arrow_wh.svg) no-repeat center;
							display: block;
							width: 6px;
							height: 12px;
						}
					}
						.Flex {
							gap: 1em;
							a:link, a:visited {
								margin: 1em auto;
								display: flex;
								gap: 1em;
								align-items: center;
								text-decoration: none;
								color: var(--White);
								&::after {
									content: "";
									display: block;
									width: 46px;
									min-width: 46px;
									height: 46px;
									background: url(/-/media/company/compass/image/icon_download.svg) no-repeat center;
								}
							}
							.Cover {
								position: relative;
								z-index: 1;
							}
							.Page {
								position: absolute;
								max-width: 400px;
								bottom: 0;
								right: 1em;
								z-index: 0;
							}
						}
				}
				&.Center {
					align-items: center;
					justify-content: center;
					gap: 1em;
					a.ButtonLink:link,a.ButtonLink:visited {
						background: transparent;
						border: 1px solid var(--White);
						color: var(--White);
						padding: .5em 1em;
						display: flex;
						align-items: center;
						&::after {
							content: "";
							background: url(/-/media/company/image/wide/icon_link_arrow_wh.svg) no-repeat center;
							display: block;
							width: 6px;
							height: 12px;
						}
					}
				}
			}
		}
	}
	&#Sec03 {
		.Plate {
			display: flex;
			flex-wrap: wrap;
			gap: 1.5em;
			li {
				border-radius: 20px;
				width: calc((100% / 2) - 1em);
				height: 380px;
				max-height: 380px;
				overflow: hidden;
				position: relative;
				.Tag {
					position: absolute;
					top: 1em;
					left: 1em;
					padding: .5em 1em;
					font-weight: bold;
					line-height: 1;
					background: var(--White);
					z-index: 1;
				}
				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					z-index: 0;
				}
				p {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					display: flex;
					align-items: center;
					background: #23a5d594 url(/-/media/company/compass/image/icon_arrow_circle.svg) no-repeat 96% 50% / 45px;
					backdrop-filter: brightness(0.5);
					a {
						cursor: pointer;
						font-size: 1.2em;
						line-height: 1.2;
						color: var(--White);
						width: 100%;
						padding: 1em;
						&::after {
							content: "";
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							display: block;
							z-index: 0;
						}
						span {
							color: var(--White);
							font-weight: bold;
							display: block;
							font-size: 1.4em;
						}
					}
				}
			}
		}
		.modal {
			.modal-main {
				width: 100%;
				max-width: 933px;
				display: flex;
				justify-content: space-between;
				gap: 1em;
				padding: 2em 0;
				min-height: 462px;
				.Txt {
					padding: 3em 0 3em 3em;
					min-width: 50%;
					h3 {
						position: relative;
						display: flex;
						line-height: 1.6;
						margin: 0 0 3em;
						strong {
							display: block;
							font-size: 1.8em;
						}
						&::before {
							position: absolute;
							left: -3em;
							content: "";
							display: block;
							width: 21px;
							height: 107px;
							background: url(/-/media/company/compass/image/icon_color01.svg) repeat-x top left;
						}
					}
					h4 {
						font-weight: normal;
						font-size: 1.15em;
						width: max-content;
						margin: 0 0 1em;
					}
					h5 {
						font-size: 1em;
						padding: 0;
						background: transparent;
					}
				}
				.Img {
					display: flex;
					align-items: center;
					min-width: 380px;
				}
			}
			&#modal1 {/*Color Setting*/
				.modal-main {
					background: var(--White) url(/-/media/company/compass/image/img_modal01.png) no-repeat 110% 50%;
					h3::before {
						background: url(/-/media/company/compass/image/icon_color01.svg) repeat-x top left;
					}
					h4 {
						border-bottom: 2px solid var(--Blue2);
					}
				}
			}

			&#modal2 {
				.modal-main {
					background: var(--White) url(/-/media/company/compass/image/img_modal02.png) no-repeat 110% 50%;
					h3::before {
						background: url(/-/media/company/compass/image/icon_color02.svg) repeat-x top left;
					}
					h4 {
						border-bottom: 2px solid var(--Orange2);
					}
				}
			}

			&#modal3 {
				.modal-main {
					background: var(--White) url(/-/media/company/compass/image/img_modal03.png) no-repeat 110% 50%;
					h3::before {
						background: url(/-/media/company/compass/image/icon_color03.svg) repeat-x top left;
					}
					h4 {
						border-bottom: 2px solid var(--Yellow2);
					}
				}
			}

			&#modal4 {
				.modal-main {
					background: var(--White) url(/-/media/company/compass/image/img_modal04.png) no-repeat 110% 50%;
					h3::before {
						background: url(/-/media/company/compass/image/icon_color04.svg) repeat-x top left;
					}
					h4 {
						border-bottom: 2px solid var(--Green2);
					}
				}
			}

		}
	}
	&#Sec04 {
		.Plate {
			background: url(/-/media/company/compass/image/bg_steps.png) no-repeat center;
			max-width: 945px;
			margin: auto;
			padding: 3em 0;
			display: flex;
			flex-wrap: wrap;
			gap: 8em;
			justify-content: space-around;
			li {
				position: relative;
				width: calc((100% / 2) - 6em);
				height: 315px;
				border-top: 1px solid var(--Black);
				overflow: hidden;
				background: var(--Gray2) ;
				.Steps {
					position: absolute;
					top: 0;
					left: 0;
					background: var(--Black);
					color: var(--White);
					padding: .25em 1.5em;
					width: max-content;
					font-size: 1.4em;
				}
				img {
					cursor: pointer;
					height: auto;
					width: 100%;
					object-fit: cover;
					z-index: 0;
				}
				p {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					display: flex;
					align-items: center;
					background: var(--Gray2) url(/-/media/company/compass/image/icon_arrow_circle.svg) no-repeat 96% 50% / 45px;
					a {
						cursor: pointer;
						font-size: 1.2em;
						line-height: 1.2;
						color: var(--Black);
						width: 100%;
						padding: 1em;
						&::after {
							content: "";
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							display: block;
							z-index: 0;
						}
					}
				}
			}
		}
		.modal {
			.modal-main {
				width: 100%;
				max-width: 980px;
				display: flex;
				justify-content: space-between;
				gap: 1em;
				padding: 0;
				min-height: 462px;
				.Txt {
					padding: 2em 0 2em 3em;
					max-width: 56%;
					h3 {
						width: 100%;
						background: var(--Black);
						color: var(--White);
						padding: 1em 0 1em 1.7em;
						margin: 0 4em 1em -1.7em;
						font-size: 1.8em;
						border-left: 11px solid var(--Red1);
					}
					p {
						max-width: 60%;
						font-size: .9em;
					}
				}
				.Img {
					display: flex;
					align-items: center;
					margin: 0 0 0 -64%;
					min-width: 380px;
				}
			}
		}
	}
	&#Sec05 {
		.Sub {
			text-align: center;
			font-weight: bold;
			font-size: 1.6em;
			display: flex;
			gap: 1em;
			&::before,&::after {
				content: "";
				background: url(/-/media/company/compass/image/bg_line.svg) repeat-x center;
				display: block;
				width: 100%;
				min-width: 5em;
				flex: max-content;
				height: 1px;
				margin: auto;
			}
		}
		.Plate {
			display: flex;
			flex-wrap: wrap;
			margin: 3em auto;
			gap: 1em;
			li {
				width: calc((100% / 3) - 1em);
				border-radius: 18px;
				overflow: hidden;
				position: relative;
				img {
					cursor: pointer;
					width: 100%;
					}
				h3 {
						position: absolute;
						bottom: 0;
						margin: 0;
						padding: 0;
						width: 100%;
						background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
					a {
						display: flex;
						padding: 1em;
						line-height: 1.4;
						font-size: 1.5em;
						color: var(--White);
						background: url(/-/media/company/compass/image/icon_arrow_circle.svg) no-repeat 95% 50% / 45px;
						transition: .1s ease;
						&::after {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							display: block;
							cursor: pointer;
						}
						&:hover,&:active {
							content: "";
							background: url(/-/media/company/compass/image/icon_arrow_circle.svg) no-repeat 96% 50% / 45px;
						}
					}
				}
			}
		}
		.modal {
			.modal-main {
				width: 90vw;
				padding: 0;
				position: relative;
				h3 {
					background: var(--Red1);
					color: var(--White);
					padding: 1em 4em;
					span {
						color: var(--White);
						margin: 0 1em 0 0;
					}
				}
				.container {
					padding: 1em 4em;
					position: relative;
					.header {
						width: 100%;
						display: flex;
						li {
							width: 50%;
						}
						.Txt {
							background: var(--Gray1);
							dt {
								line-height: 1;
								padding: 0em .25em;
								display: flex;
								align-items: center;
								font-size: 5em;
								gap: .2em;
								span {
									font-size: .2em;
									line-height: 1.2;
									padding: .15em .5em;
									border: 1px solid;
									background: var(--White);
								}
							}
							dd {
								h4 {
									background: var(--Black);
									color: var(--White);
									padding: .5em;
									font-size: 1.2em;
								}
								p {
									padding: 1em;
									font-size: .9em;
								}
							}
						}
						.Img {
							position: relative;
							overflow: hidden;
							img {
								position: absolute;
								height: 100%;
								object-fit: cover;
								z-index: 0;
							}
							p {
								position: absolute;
								line-height: 1.2;
								bottom: 1em;
								left: 20%;
								width: max-content;
								z-index: 1;
								&::before {
									position: absolute;
									z-index: -1;
									margin: -8px 0 0 -8px;
									content: "";
									display: block;
									width: 12px;
									height: 12px;
									background: var(--Blue2);
								}
								span {
									padding: .15em .25em;
									margin: 0 0 .15em;
									width: max-content;
									background: var(--White);
									display: block;
									font-size: .8em;
									&.Name {
									font-size: 1.2em;
									}
								}
							}
						}
					}
					.Chapter {
						dt {
							padding: .5em 0;
							font-weight: bold;
							span {
								color: var(--Red1);
								margin: 0 0 0 1em;
							}
						}
						dd p {
							font-size: .8em;
						}
					}
				}
				#item02.carousel-item {
					.Img {
						p:nth-of-type(1) { left: 5%;}
					}
				}
				#item03.carousel-item {
					.Img {
						p:nth-of-type(1) {
							left: 50%;
							&::before {
								background: var(--Green2);
							}
						}
					}
				}
				#item04.carousel-item {
					.Img {
						p:nth-of-type(1) {
							left: 5%;
							&::before {
								background: var(--Yellow2);
							}
						}
						p:nth-of-type(2) {
							left: 50%;
							&::before {
								background: var(--Blue2);
							}
						}
					}
				}
				#item05.carousel-item {
					.Img {
						p:nth-of-type(1) {
							left: 5%;
							&::before {
								background: var(--Green2);
							}
						}
						p:nth-of-type(2) {
							left: 40%;
							bottom: 2em;
							&::before {
								background: var(--Yellow2);
							}
						}
						p:nth-of-type(3) {
							left: 75%;
							bottom: 2em;
							&::before {
								background: var(--Blue2);
							}
						}
					}
				}

			}
		}
	}
	&#Sec06 {
		background: linear-gradient(45deg, #F9F5D8, #99D5DB );
		.Inner {
			justify-content: space-between;
			.Column {
				margin: auto;
				width: max-content;
				h2 {
					font-size: 1.8em;
				}
				p {
					line-height: 1.8;
				}
				a:link, a:visited {
					font-size: .8em;
					padding: .5em;
					margin: 1em auto;
					text-decoration: none;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 25px;
					border: 1px solid var(--Red1);
					color: var(--Red1);
					background: var(--White);
					position: relative;
					&::after {
						content: "";
						display: block;
						width: 16px;
						height: 16px;
						background: url(/-/media/company/compass/image/icon_link.svg) no-repeat center;
						position: absolute;
						right: 1em;
					}
				}
			}
		}
	}
	&#Sec07 {
		h2 {
			font-weight: bold;
			font-size: 2em;
			text-align: center;
			padding: 0;
			margin: 0;
			background: none;
		}
		.Sub {
			color: var(--Red1);
			font-weight: bold;
			font-size: 1em;
			text-align: center;
		}
	}
	&#Sec02, &#Sec03, &#Sec04, &#Sec05 {
		.Inner {
			padding: 6em 0;
		}
	}
	&#Sec03, &#Sec04, &#Sec05 {
		h2 {
			background: none;
			font-weight: bold;
			font-size: 2.1em;
			text-align: center;
			span {
				background: transparent;
				color: var(--Red1);
				font-size: .9em;
			}
		}
	}
}
.PageTitleStyle3 {
	width: 100%;
	margin: 0;
	img {
		width: 100%;
	}
}
#Contents .InnerLinks {
	position: sticky;
	top: 0;
	background: var(--Gray3);border: 1px solid var(--White);
	min-height: inherit;
	padding: 0;
	z-index: 2;
	.Inner {
		max-width: var(--wide);
		margin: 0 auto;
		padding: 0;
		ul {
			margin: 0 auto;
			padding: 0;
			gap: 0;
			display: flex;
			align-items: center;
			li {
				width: calc(100% / 7);
				height: stretch;
				border: 1px solid var(--White);
				a:link, a:visited {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 1em .5em;
					height: stretch;
					text-decoration: none;
					line-height: 1;
					text-align: center;
					font-weight: bold;
					font-size: .85em;
					color: var(--White);
					background: transparent;
					transition: .3s ease-in-out;
					&:hover, &:active, &:focus {
						background: var(--Red1);
					}
					&.is-active {
							background: var(--Red1);
							color: var(--White);
					}
				}
			}
		}
	}
}
.PlateList {
	display: flex;
	gap: 1.5em;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 4em auto;
	li {
		position: relative;
		width: calc((100% / 4) - 1.5em);
		height: stretch;
		border: 1px solid var(--Gray4);
		background: var(--White);
		transition: .1s ease-in;
		opacity: 1;
		&:hover {
			opacity: .8;
		}
		img {
			border-bottom: 1px solid var(--Gray4);
			width: stretch;
			max-height: 157px;
			object-fit: cover;
		}
		.Wrapper {
			padding: 1em;
			p{
				font-size: .8em;
			}
			a:link, a:visited {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 1em;
				width: 100%;
				text-decoration: none;
				color: var(--Gray6);
				font-weight: bold;
				&::after {
					content: "";
					flex: 1;
					width: 16px;
					height: 16px;
					min-width: 16px;
					display: block;
					background: url(/-/media/company/human-it/image/icon_new_link_bk.svg) no-repeat right center / 16px;
				}
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
			}
		}
	}
}


@keyframes bgAnimation {
	0% { opacity: 0.4; /*transform: scale(1);*/ background-size: 100%;}
	100% { opacity: 1; /*transform: scale(1.1);*/ background-size: 140%;}
}
@media screen and (min-width: 1275px) {	
}
@media screen and (min-width: 995px) and (max-width: 1304px) {
	.OptionWideRWD .GridSet {
		margin: 0;
	}
	.OptionWideRWD .Grid4 {
		padding: 0;
	}
	.OptionWideRWD .Section .Inner {
		padding: 1em;
		width: auto;
		box-sizing: border-box;
	}
	.OptionWideRWD .Section>.Inner {
		padding: 1em;
		width: auto;
	}
	.OptionWideRWD #Contents .Section {
		&#Sec02 {
			.Inner {
				padding: 6em 1em;
				.Flex	{
					li {
						flex: 1;
						.Flex {
							.Page {
								max-width: 300px;
							}
						}
					}
				}
				&.Center {
					align-items: center;
				}
			}
		}
		&#Sec03,&#Sec04,&#Sec05,&#Sec06,&#Sec07 {
			.Inner {
				padding: 6em 1em;
			}
		}
	}
	.OptionWideRWD .Section.InnerLinks .Inner {
		padding: 0;
	}
	.OptionWideRWD .SP #FloatingContacts form {
		width: auto;
	}
	.OptionWideRWD #FloatingContacts .Inner {
		width: auto;
		max-width: 965px;
	}
}
@media screen and (max-width: 994px) {
	.JS .Section .Inner {
		width: 100%;
		padding: 3em 1em;
	}
	.JS .Section.InnerLinks>.Inner {
		padding: 0;
		li {
			display: flex;
			line-height: 1;
			height: stretch;
			align-items: center;
			a {
				height: stretch;
			}
		}
	}
	.JS #Contents .Section {
		&#Sec00 {
			background: url(/-/media/company/compass/image/bg_main_vusual.png) no-repeat bottom right / auto 60%;
			.Inner {
				justify-content: start;
			}
		}
	}
	.JS #Contents .Section {
		&#Sec02 {
			& .Inner {
				padding: 3em 1em;
				.Column {
					& .Flex {
						width: max-content;
						margin: 1em auto;
						& li {
							display: flex;
							gap: 1em;
							.Page {
								position: relative;
								margin: auto;
							}
						}
					}
				}
				.Flex {
					flex-direction: column;
					gap: 3em;
					li {
						width: 100%;
						.Cover {
							max-width: 300px;
						}
						.Page {
							position: relative;
							margin: auto;
						}
					a:link, a:visited {
						margin: auto 0 auto auto;
						text-align: right;
						width: max-content;
					}
				}
			}
		}
		}
		&#Sec02, &#Sec03, &#Sec04, &#Sec05, &#Sec06, &#Sec07 {
				.Inner {
					padding: 6em 1em;
				}
		}
		&#Sec03 {
			& .Plate {
				li {
					width: calc((100% / 2) - 1em);
					height: 300px;
					img {
						height: 100%;
						width: auto;
					}
					a {
						font-size: .8em;
					}
				}
			}
			& .modal {
				.modal-main {
					max-width: 90vw;
					min-height: 462px;
				}
			}
		}
	&#Sec05 {
		& .Plate {
			& li {
				& h3 {
					a {
						font-size: 1.2em;
					}
				}
			}
		}
		& .modal {
			& .modal-main {
				& .container {
					.header {
						flex-direction: column;
						li {
							width: 100%;
						}
						.Img {
							width: 100%;
							min-height: 300px;
							img {
								width: 100%;
								object-position: top;
							}
						}
					}
				}
			}
		}
	}
	.JS .PlateList {
		gap: 1em;
	li {
			width: calc((100% / 2) - .5em);
			height: stretch;
			img {
				width: 100%;
				height: auto;
				max-height: inherit;
			}
			a {
				line-height: normal;
			}
		}
	}
	}
	.JS .PlateList {
		gap: 1em;
	li {
			width: calc((100% / 2) - .5em);
			height: stretch;
			img {
				width: 100%;
				height: auto;
				max-height: inherit;
			}
			a {
				line-height: normal;
			}
		}
	}
}
@media screen and (max-width: 767px) {
	.JS br.PC {
		display: none;
	}
	.JS br.RWD {
		display: block;
	}
.JS #Contents .Section.InnerLinks > .Inner {
	ul {
		flex-wrap: wrap;
		& li {
			width: calc(100% / 4);
			a {
				font-size: 2vw;
				padding: .5em 1em;
				}
			}
		}
	}
	.JS #Contents .Section {
		&#Sec02 {
			& .Inner {
				& .Flex {
					li {
						.Flex  {
							gap: 1em;
							li {
								width: auto;
								display: flex;
								gap: 1em;
								.Cover,.Page {
									max-width: calc((100% / 2) - 1em);
									width: auto;
								}
							}
						}
					}
				}
			}
		}
		&#Sec03 {
			& .modal {
				&#modal1,&#modal2,&#modal3,&#modal4 {
					& .modal-main {
						min-height: 80vh;
						width: 96vw;
						flex-direction: column;
						background-position: 100% 98%;
						background-size: 90%;
						.Img {
							min-width: inherit;
							min-height: 200px;
						}
						.Txt {
							padding: 0 1em 3em 3em;
							min-width: inherit;
							h3 {
								margin: 0 0 1em;
							}
						}
					}
				}
			}
		}
		&#Sec04 {
			& .Plate {
				li {
					height: stretch;
					min-height: 200px;
					& p {
						a {
							font-size: 1em;
						}
					}
				}
			}
			& .modal {
				.modal-main {
					flex-direction: column;
					.Txt {
						max-width: inherit;
						padding: 2em 1em 2em 3em;
						h3 {
							margin: 0 0 1em -1.7em;
						}
						p {
							max-width: inherit;
						}
					}
					.Img {
						margin: 0;
						background: var(--Gray1);
					}
				}
			}
		}
		&#Sec05 {
			& .Plate {
				& li {
					width: calc((100% / 2) - 1em);
				}
			}

		}
	}
	.JS h2, .JS .LV1LinkSet {
		margin: 0;
	}
}
@media screen and (max-width: 579px) {
	.JS #Contents #Sec00 .Inner h2 {
		font-size: 6vw;
	}
	.JS #Contents #Sec02 .Inner h2 span {
		display: block;
	}
	.JS #Contents .Section {
		&#Sec03 {
			& .Plate {
				li {
					width: 100%;
					img {
						width: 100%;
						object-fit: cover;
					}
				}
			}
		}
		&#Sec04 {
			& .Plate {
				gap: 4em;
				li {
					width: calc((100% / 2) - 3em);
					img {
						height: 100%;
					}
				}
			}
		}
		&#Sec05 {
			& .Plate {
				& li {
					width: 100%;
				}
			}
			& .Sub {
				&::before, &::after {
					min-width: 3em;
				}
			}
			.modal {
				.modal-content {
					margin: 0;
					max-width: inherit;
					flex-direction: column-reverse;
					.modal-main {
						.container {
							padding: 1em 2em;
							.carousel-nav {
								padding: 0 .5em;
							}
						}
					}
				}
			}
		}
	}
}

/* モーダルコンテナ */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* モーダルオーバーレイ（背景） */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* モーダルコンテンツ */
.modal-content {
  position: relative;
	display: flex;
	justify-content: center;
	margin: 0 -51px 0 0;/*closeボタン分ネガティブマージン*/
}
.modal-main {
  background-color: white;
  border-radius: 8px;
  max-width: 1275px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* クローズボタン */
.modal-close {
	cursor: pointer;
	background: transparent url(/-/media/company/compass/image/icon_close.svg) no-repeat center;
	border: none;
	width: 51px;
	height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.modal-close:hover {
	opacity: .8;
}

/* カルーセル */
.modal-carousel {
  position: relative;
  min-height: 300px;
  margin-bottom: 20px;
}

.carousel-item {
  display: none;
  animation: fadeIn 0.4s ease-in;
}

.carousel-item.is-active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* カルーセルナビゲーション */
.carousel-nav {
	position: absolute;
	top: 50%;
	width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
	padding: 0 1em;
	z-index: 1;
}

.carousel-prev,
.carousel-next {
  background-color: transparent;
  border: none;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-prev:hover,
.carousel-next:hover {
  background-color: #e0e0e0;
}

.carousel-prev:active,
.carousel-next:active {
  background-color: #d0d0d0;
}

.carousel-count {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .modal-content {
    max-width: 95%;
    padding: 20px;
  }
  .modal-carousel {
    min-height: 200px;
  }
}