@charset "utf-8";
:root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }

/* ==================================
  Common to all pages
================================== */
.c-pageTitle__main
{
    font-size: 2.1rem;
    line-height: 1.2;
}
@media only screen and (min-width: 768px)
{
	.c-pageTitle__main
	{
		font-size: 2.6rem;
	}
}


.p-topArea {
    min-height: 34vh;
}





/* ==================================
  Journey
================================== */
.journey
{
	& .l-content
	{
		background-color: #e4f4f7;
	}
	& .p-topArea
	{
		min-height: 51vh;
		
		& .-pagetitle
		{
			font-family: var(--font-mincho);
			font-size: 2.4rem;
			font-style: italic;
			font-weight: 400;
		}
		& .-pagetitle_en
		{
			color: var(--subcolor);
			font-family: "futura-pt", sans-serif;
			font-weight: 300;
			font-style: italic;
			font-size: 1.3rem;
			margin-top: 5px;
			margin-bottom: 35px;
			line-height: 1;
		}
		& .-read
		{
			font-size: 0.9rem;
			line-height: 2;
		}
	}
	
	& .-course
	{
		list-style: none;
		margin-bottom: 60px;
		padding: 0;
		text-align: center;
		font-weight: 700;
		font-size: 1.3rem;
		color: #ffffff;
		
		& li
		{
			background: linear-gradient(to bottom, #66c7c0, #00a199);
			margin-bottom: 15px;
			padding: 15px 15px 25px;
			clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px));
		}
	}
	
	& .-location_wrap
	{
		background-image: url("../img/journey/line_sp.svg");
		background-position: center 286px;
		background-repeat: no-repeat;
		background-size: 130px auto;
	}
	
	& .-location
	{
		background-color: #ffffff;
		border: 1px solid #eaeaea;
		padding: 15px;
		border-radius: 14px;
		width: 400px;
		max-width: 78%;
		position: relative;
		margin-top: 140px;
		
		& .-ribbon
		{
			background-color: var(--keycolor);
			display: block;
			line-height: 1;
			color: var(--subcolor);
            position: absolute;
            left: -15px;
            top: -13px;
            font-size: 1.1rem;
            padding: 8px 10px;
            font-weight: 700;
            transform: rotate(344deg);
		}
		
		& .-title
		{
			color: #00a199;
			font-size: 1.2rem;
            text-align: center;
            margin-bottom: 0.8em;
		}
		
		& .-comment
		{
			margin-bottom: 10px;
			line-height: 1.6;
		}
		
		& .splide
		{
			margin: 0 -15px;
		}
		
		& img
		{
			border-radius: 14px;
		}
	}
	
	& .-location_slide
	{
		width: 600px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 40px;
	}
	& .-line
	{
		display: none;
	}
	
	& .-location_02
	{
        margin-left: auto;
        margin-right: 0;
	}

	& .-location_03
	{
	}
	& .-location_04
	{
        margin-left: auto;
        margin-right: auto;
	}
	& .-location_05
	{
        margin-left: auto;
        margin-right: 0;
	}
	& .-location_06
	{
	}
	& .-location_07
	{
	}
	& .-location_08
	{
        margin-left: auto;
        margin-right: 0;
	}
	& .-location_09
	{
	}
	& .-location_10
	{
	}

	
	@media only screen and (min-width: 768px)
	{
		& .p-topArea
		{
			min-height: 40vh;
			text-align: left;

			& .-pagetitle
			{
				font-size: 3rem;
			}
			& .-pagetitle_en
			{
				font-size: 1.7rem;
				margin-top: 0;
				margin-bottom: 1.2em;
			}
			& .-read
			{
				font-size: 1rem;
			}
		}
		
		& .-course
		{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			font-size: 1.3rem;
			margin-bottom: 90px;

			& li
			{
				background: linear-gradient(to right, #66c7c0, #00a199);
				margin-bottom: 0;
				padding: 15px;
				clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
			}
		}
		
		& .-location_wrap
		{
			background: none;
		}

		& .-location
		{
			margin-top: auto;
			padding: 25px;
		
			& .-ribbon
			{
				left: -20px;
				top: -13px;
				font-size: 1.5rem;
				padding: 10px 20px;
			}

			& .-title
			{
				font-size: 1.3rem;
			}
		
			& .splide
			{
				margin: 0 -25px;
			}
		}
		
		& .-location_slide
		{
			padding-bottom: 65px;
		}

		& .-location_02
		{
			margin: 100px 0 0 calc(100% - 400px);
		}

		& .-location_03
		{
			margin: -220px 0 0 40px;
		}
		& .-location_04
		{
			margin: -50px 0 0 calc(50% + 30px);
		}
		& .-location_05
		{
			margin-top: -124px;
			margin-left: 0;
		}
		& .-location_06
		{
			margin: -100px 0 0 calc(100% - 400px);
		}
		& .-location_07
		{
			margin-top: 66px;
		}
		& .-location_08
		{
			margin-top: 218px;
			margin-left: 0;
		}
		& .-location_09
		{
			margin: -140px 0 0 calc(100% - 400px);
		}
		& .-location_10
		{
			margin-top: 90px;
		}

		& .-line
		{
			display: inherit;
			position: relative;
			width: 100%;

			& img
			{
				position: absolute;
				top: 0;
				z-index: -1;
			}
		}

		& .-line01
		{
			& img
			{
				width: 124px;
				left: calc(50% - 18px);
			}
		}
		& .-line02
		{
			& img
			{
				width: 290px;
				left: calc(50% - 145px);
				top: -140px;
			}
		}
		& .-line03
		{
			& img
			{
				width: 298px;
				top: -180px;
				left: calc(50% - 80px);
			}
		}
		& .-line04
		{
			& img
			{
				width: 364px;
				top: -320px;
				left: 18%;
			}
		}
		& .-line05
		{
			& img
			{
				width: 450px;
				top: -280px;
				left: 36%;
			}
		}
		& .-line06
		{
			& img
			{
				width: 126px;
				top: -240px;
				left: calc(50% - 7px);
			}
		}
		& .-line07
		{
			& img
			{
				width: 350px;
				top: 0;
				left: 18%;
			}
		}
		& .-line08
		{
			& img
			{
				width: 448px;
				top: -330px;
				left: 38%;
			}
		}
		& .-line09
		{
			& img
			{
				width: 130px;
				top: -200px;
				left: calc(50% - 10px);
			}
		}
	
	}
	
	
}


/* ==================================
  Company
================================== */
.company
{
	
	& .l-content__body
	{
		margin-top: 0;
		margin-bottom: 100px;
	}
	
	.sec-greeting
	{
		background-color: #fafff0;
        padding-top: 3rem;
        padding-bottom: 90px;
		

		& .-catch
		{
			font-family: var(--font-mincho);
			font-size: 1.9rem;
			font-style: italic;
			font-weight: 400;
			text-align: center;
		}

		& .-catch_en
		{
			color: var(--keycolor);
			font-family: "futura-pt", sans-serif;
			font-weight: 400;
			font-style: italic;
			font-size: 1.3rem;
			text-align: center;
			margin-top: 1rem;
			margin-bottom: 35px;
		}
		
		& .-img
		{
			margin-bottom: 20px;
			
			& img
			{
				border-radius: 14px;
			}
		}
		& .-comment
		{
			
			& .-president
			{
				margin-top: 1.5em;
				text-align: right;
			}
		}
	}
	
	
	& .sec-history
	{
		background-color: #e4f4f7;
		
		& .-title
		{
            letter-spacing: 0.8em;
		}
		& .-history
		{
			margin-bottom: 40px;
			
			& dl
			{
				display: grid;
				grid-template-columns: 8em 1fr;
				gap: 10px;
				
				& dt
				{
					
				}
				& dd
				{
					
				}
			}
		}
		
		& .-gallery
		{
			margin-left:  calc(-1 * var(--ark-padding--container));
			margin-right: calc(-1 * var(--ark-padding--container));
			
			& img
			{
				border-radius: 14px;
			}
		}
	}
	
	& .sec-data
	{
		padding-top: 30px;
        padding-bottom: 90px;

		& .-title
		{
		}
		& .-data
		{
			display: grid;
			grid-template-columns: 8em 1fr;
			gap: 10px;
			margin-bottom: 30px;
			
			& dt
			{
				font-weight: 600;
			}
		}
		& .-img
		{
			& img
			{
				border-radius: 14px;
			}
		}
	}
	
	& .sec-base
	{
		background-color: #e4f4f7;
		
		& .-title
		{
		}
		& .-catch
		{
			font-size: 1.3rem;
			font-weight: 700;
			text-align: center;
			margin-bottom: 1em;
		}
		& .-img
		{
			margin-bottom: 30px;
		}
		
		& .-explane
		{
			margin-bottom: 35px;
		}
		& .-data
		{
			display: grid;
			grid-template-columns: 7em 1fr;
			gap: 10px;
			
			& dt
			{
				font-weight: 600;
			}
		}
	}
	
	& .sec-associated
	{
		padding-top: 60px;

		& .-title
		{
		}
		& .-company_name
		{
            font-size: 1.4rem;
            margin-bottom: 1.6em;
            text-align: center;
		}
		& .-data
		{
			display: grid;
			grid-template-columns: 6em 1fr;
			gap: 10px;
			
			& dt
			{
				font-weight: 600;
			}
		}
	}
	
	@media only screen and (min-width: 768px)
	{
		& .l-content__body
		{
			margin-bottom: 150px;
		}
		
		.sec-greeting
		{
			padding-bottom: 150px;
			
			& .-catch
			{
				font-size: 3rem;
			}

			& .-catch_en
			{
				font-size: 1.9rem;
				margin-top: 1rem;
				margin-bottom: 70px;
			}

			& .-img
			{
				margin-bottom: 0px;
			}
		}
		
		& .sec-history
		{
			& .-title
			{
			}
			& .-history
			{
				margin-bottom: 60px;
			}

			& .-gallery
			{
				margin-left:  0;
				margin-right: 0;
			}
		}
		
		& .sec-data
		{
			padding-top: 40px;
			padding-bottom: 150px;

			& .-title
			{
			}
			& .-wrap2col
			{
				align-items: flex-start;
				
				& .-data
				{
					margin-bottom: 0;
				}
			}
		}
		
		& .sec-base
		{
			& .-wrap2col
			{
				align-items: flex-start;
				
				& .-img
				{

					width: 38%;
					margin-bottom: 0;
				}
				& .-data
				{
					width: 58%;
				}
			}
			& .-title
			{
			}
			& .-catch
			{
				font-size: 1.8rem;
                margin-bottom: 1em;
			}
			& .-explane
			{
				margin-bottom: 70px;
			}

		}
		& .sec-associated
		{
			& .-title
			{
			}
			& .-company_name
			{
				font-size: 1.6rem;
				margin-bottom: 1.6em;
				text-align: center;
			}
		}
	}
}


/* ==================================
  Service
================================== */
.service
{
		
	.sec-intro
	{
        padding-bottom: 90px;
		

		& .-catch
		{
			font-size: 1.8rem;
			font-weight: 700;
			text-align: center;
			margin-bottom: 1em;
		}

		& .-read
		{
			margin-bottom: 3em;
		}
		
		& .-gallery
		{
			margin-left:  calc(-1 * var(--ark-padding--container));
			margin-right: calc(-1 * var(--ark-padding--container));

			& img
			{
				border-radius: 14px;
			}
		}
	}
	
	& .sec-services
	{
		background-color: #e4f4f7;
		
		& .-title
		{
		}

		& .-list
		{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
			list-style: none;
			padding: 0;
			
			& li
			{
				background-color: var(--subcolor);
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
				align-items:center;
				padding: 7px;
				margin: 0;
				
				& img
				{
					border-radius: 50%;
					width: 28%;
				}
				
				& p
				{
					font-weight: 700;
					width: 67%;
                    line-height: 1.3;
                    font-size: 0.9rem;
				}
			}
		}
	}
	
	& .sec-equipment
	{
		padding-top: 30px;
        padding-bottom: 90px;

		& .-title
		{
            letter-spacing: 0.8em;
		}

		& .-gallery
		{
			margin-left:  calc(-1 * var(--ark-padding--container));
			margin-right: calc(-1 * var(--ark-padding--container));

				
			& .splide__list
			{
				& li
				{
					& p:first-of-type
					{
						font-size: 1.1rem;
						font-weight: 700;
						margin-bottom: 10px;
						margin-top: 5px;
						text-align: center;
					}

					& img
					{
						border-radius: 14px;
					}
				}
			}
		}
	}
	
	
	& .sec-vehicles
	{
		background-color: #e4f4f7;

		& .-title
		{
		}

		& .-gallery
		{
			margin-left:  calc(-1 * var(--ark-padding--container));
			margin-right: calc(-1 * var(--ark-padding--container));

				
			& .splide__list
			{
				& li
				{
					background-color: #fff;
					border-radius: 14px;
					text-align: center;
					padding: 10px;
					
					& p:first-of-type
					{
						font-size: 1.1rem;
						font-weight: 700;
						margin-bottom: 0;
						margin-top: 5px;
						text-align: center;
					}

					& img
					{
						border-radius: 8px;
						aspect-ratio: 4/3;
						object-fit: cover;
					}
				}
			}
		}
	}

	
	@media only screen and (min-width: 768px)
	{
		.sec-intro
		{
			padding-bottom: 160px;
			& .-catch
			{
				font-size: 2rem;
				margin-bottom: 1.6em;
			}
			& .-read
			{
				margin-bottom: 4em;
			}
			& .-gallery
			{
				margin-left:  0;
				margin-right: 0;
			}
		}
		
		& .sec-services
		{
			& .-title
			{
			}
			& .-list
			{
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
				
				& li
				{
					padding: 12px;
				
					& img
					{
						width: 20%;
					}

					& p
					{
						font-size: 1rem;
						width: 75%;
						line-height: 1.7;
					}
				}
			}
		}
		& .sec-equipment
		{
			padding-top: 50px;
			padding-bottom: 160px;

			& .-title
			{
			}
			& .-gallery
			{
				margin-left:  0;
				margin-right: 0;
				
				& .splide__list
				{
					display: grid !important;
					grid-template-columns: repeat(3, 1fr);
					gap: 30px;

					& li
					{
						& p:first-of-type
						{
							font-size: 1.3rem;
							margin-bottom: 10px;
							margin-top: 10px;
						}
					}
				}
			}
		}
		
		& .sec-vehicles
		{
			& .-title
			{
			}
			& .-gallery
			{
				margin-left:  0;
				margin-right: 0;
				
				& .splide__list
				{
					display: grid !important;
					grid-template-columns: repeat(4, 1fr);
					gap: 30px;

					& li
					{
						padding: 15px;
						
						& p:first-of-type
						{
							font-size: 1.1rem;
							margin-top: 10px;
						}
					}
				}
			}
		}
	}
}



/* ==================================
  Recruit
================================== */
.recruit
{
	& .-Pres_Narita
	{
		padding-bottom: calc(100vw * 1);
		background-image: url("../img/img_narita.webp");
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: 90% auto;
		
		& .-message_title
		{
			text-align: center;
			
			& .-title
			{
				font-size: 1.8rem;
				font-weight: 700;
				margin-bottom: 10px;
			}
		}
		
		& .-wrap
		{
			display: none;
		}
	}
	
	& .sec-feature
	{
		background-color: #e4f4f7;
        padding-bottom: 90px;
		
		& .-wrap
		{
			display: block;
			
			& .-catch
			{
				margin-bottom: 30px;
			}
			& .-message
			{
				& p
				{
					margin-bottom: 1.5em;
					
					&:last-of-type
					{
						margin-bottom: 0;
					}
				}
			}
		}

		& .-movie
		{
			position: relative;
			padding-top: 56.25%;
			height: 0;
			margin: 0 0 50px;
		}

		& .-movie iframe
		{
			border-radius: 14px;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		
		& .-training, .-vacation, .-benefit
		{
			background-color: #ffffff;
			border-radius: 14px;
			padding: 25px 15px;
			margin-bottom: 30px;
			
			& .-icon
			{
				width: 20%;
				max-width: 100px;
				margin: 0 auto 10px;
				
				& img
				{
					vertical-align: middle;
				}
			}
			
			& .-title
			{
				font-size: 1.5rem;
				font-weight: 600;
				text-align: center;
				margin-bottom: 30px;
			}
		}
		& .-benefit
		{
			margin-bottom: 0;
		}
	}
	
	& .sec-interview
	{
		padding-top: 30px;
		padding-bottom: 90px;

		& .-title
		{
		}

		& .-gallery
		{
			margin-left:  calc(-1 * var(--ark-padding--container));
			margin-right: calc(-1 * var(--ark-padding--container));

				
			& .splide__list
			{
				& li
				{
					background-color: var(--subcolor);
					border-radius: 14px;
					padding: 10px;
					line-height: 1.5;
					
					& a
					{
						display: block;
						text-decoration: none;
						color: #333;
						
						& p:first-of-type
						{
							font-size: 1rem;
							font-weight: 700;
							margin-bottom: 1em;
							margin-top: 10px;
						}

						& .-img
						{
							border-radius: 8px;
							aspect-ratio: 4/3;
							overflow: hidden;
							
							& img
							{
								width: 100%;
								height: 100%;
								object-fit: cover;
								transition-duration: .3s;
							}
						}
						
						&:hover img
						{
							transform: scale(110%);
						}
					}
				}
			}
		}
	}

	& .sec-requirements
	{
		background-color: #e4f4f7;

		& .-title
		{
		}
		
		& .-area_name
		{
			font-size: 1.1rem;
			font-weight: 600;
			margin-bottom: 5px;
		}
		& .-area_info
		{
			
		}
		
		
		& .-requirements_list
		{
			list-style: none;
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			font-weight: 600;
			font-size: 1.1rem;
			padding: 0;
			margin: 15px 0 40px;
			
			&:last-of-type
			{
				margin-bottom: 0;
			}
			
			& li
			{
				margin: 0 0 10px;
				
				& button
				{
					background-color: #ffffff;
					border-radius: 5px;
					padding: 10px 15px;
					position: relative;
					transition: 0.3s ease-in-out;
					display: block;
					text-decoration: none;
					width: 100%;
					
					&:hover
					{
						background-color: var(--keycolor);
						color: #ffffff;
					}

					&::after
					{
						content: '';
						width: 0.7rem;
						height: 0.7rem;
						border-top: 3px solid #333;
						border-right: 3px solid #333;
						transform: rotate(45deg) translateY(-50%);
						position: absolute;
						top: 50%;
						right: 20px;
						border-radius: 1px;
						transition: 0.3s ease-in-out;
					}

					&:hover::after
					{
						border-color: #FFF;
					}
				}
			}
		}
	}
	
	& .sec-faq
	{
        padding-top: 30px;
        padding-bottom: 90px;
		
		& .accordion_faq
		{
			border: 1px solid #ccc;
			border-radius: 8px;
			margin-bottom: 1em;
			overflow: hidden;
			background-color: #fff;
			transition: box-shadow 0.3s ease;
			
			
			& summary
			{
				display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                padding: 15px 15px 15px 53px;
                font-weight: 700;
                background: var(--subcolor);
                font-size: 1rem;
                list-style: none;
                position: relative;
                line-height: 1.5;
				
				&::-webkit-details-marker
				{
					display: none;
				}
				
				&::before
				{
					content: "Q";
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: #fff;
                    color: var(--keycolor);
                    font-weight: 700;
                    border-radius: 50%;
                    width: 1.4em;
                    height: 1.4em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.2rem;
				}
				
				/* アイコン */
				& .icon
				{
					position: relative;
					width: 16px;
					height: 16px;
					flex-shrink: 0;
					margin-left: 8px;
					
					&::before,
					&::after
					{
						content: '';
						position: absolute;
						background-color: #333333;
						width: 2px;
						height: 16px;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						transition: transform 0.3s ease;
					}

					&::before
					{
						transform: translate(-50%, -50%) rotate(0deg);
					}

					&::after
					{
						transform: translate(-50%, -50%) rotate(90deg);
					}
				}
			}

			& .content
			{
				padding: 17px 20px;
                background: #f9f9f9;
                border-top: 1px solid #ddd;
                animation: faq_fadeIn 0.4s ease;
                line-height: 1.6;
			}
				
			&::details-content {
				transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
				height: 0;
				opacity: 0;
				overflow: clip;
			}
			&[open]::details-content {
				opacity: 1;
				height: auto;
			}
		}

		& .accordion_faq[open]
		{
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

			& .icon::before
			{
				transform: translate(-50%, -50%) rotate(90deg);
			}
		}
	}	
	
	@media only screen and (min-width: 768px)
	{
		& .-Pres_Narita
		{
			background-size: 60% auto;
			padding-bottom: 100px;
			
			& .-message_title
			{
				margin-bottom: 50px;
			}
			
			& .-wrap
			{
				width: 60%;
				display: block;
				
				& .-catch
				{
					font-size: 1.4rem;
					margin-bottom: 1em;
				}
				
				& .-message
				{
					background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.75) 85%, rgba(255, 255, 255, 0));
					font-size: 0.9em;
					text-align: justify;
					padding-right: 30px;
					
					& p
					{
						margin-bottom: 1.1em;

						&:last-of-type
						{
							margin-bottom: 0;
						}
					}

				}
			}
		}
		
		& .sec-message
		{
			padding-bottom: 160px;
		}
		
		& .sec-feature
		{
			padding-bottom: 150px;
			
			& .-wrap
			{
				display: none;
			}
			& .-training, .-vacation, .-benefit
			{
				padding: 45px 45px;
				margin-bottom: 34px;
			}
			& .-benefit
			{
				margin-bottom: 0;
			}
			
			& .-movie
			{
				margin: 0 0 80px;
			}
		}

		
		& .sec-interview
		{
			padding-top: 40px;
			padding-bottom: 150px;

			& .-title
			{
			}
			& .-gallery
			{
				margin-left:  0;
				margin-right: 0;
				
				& .splide__list
				{
					display: grid !important;
					grid-template-columns: repeat(3, 1fr);
					gap: 36px;

					& li
					{
						padding: 15px;
						
						& p:first-of-type
						{
							margin: 10px 0 1em;
						}
					}
				}
			}
		}
		
		
		& .sec-requirements
		{
			& .-title
			{
			}
			
			& .-requirements_list
			{
				grid-template-columns: repeat(3, 1fr);
				gap: 30px;
				margin: 20px 0 60px;
				
				& li
				{
					& button
					{
						margin: 0;
						padding: 15px 25px;
					}
				}
			}
		}
		
		& .sec-faq
		{
			padding-top: 40px;
            padding-bottom: 150px;
			
			& .accordion_faq
			{
				
				& summary
				{
					line-height: 1.6;
				
					&::before
					{
						width: 1.5em;
						height: 1.5em;
						font-size: 1.3em;
					}
					
					& .icon
					{
						width: 20px;
						height: 20px;

						&::before,
						&::after
						{
							height: 20px;
						}
					}
				}
				& .content
				{
					padding: 21px 30px 16px;
					line-height: 1.7;
				}
			}
		}
	}
}


/* アニメーション */
@keyframes faq_fadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


#requirementsModal
{
	background: rgba(0,0,0,0.8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	
	& .requirements-modal-content
	{
		background: #fff;
		padding: 15px;
		max-width: 600px;
		width: 90%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		overflow-y: auto;
        max-height: 90vh;
		
		& h3
		{
			font-size: 1.5em;
			margin-bottom: 20px;
			
			& span
			{
				font-size: 1.2rem;
			}
		}

		& dl
		{
			display: grid;
			grid-template-columns: 6.5em 1fr;
			gap: 10px;
			& dt
			{
				font-weight: 600;
			}
			& dd
			{

			}
		}
		& .close
		{
			font-size: 2rem;
			position: absolute;
			top: 5px;
			right: 15px;
			cursor: pointer;
		}
		
		& .-btn
		{
			text-align: center;
			margin: 50px 0 10px;
		}
	}


	@media only screen and (min-width: 768px)
	{
		& .requirements-modal-content
		{
			padding: 25px;
			max-width: 600px;
			width: 90%;
			& h3
			{
				margin-bottom: 30px;
			}
			
			& .close
			{
				font-size: 2.2rem;
				top: 5px;
				right: 25px;
			}
		}
	}
}





/* ==================================
  Interview
================================== */
.interview1,
.interview2,
.interview3
{
	.l-content__body
	{
		margin: 0 auto 3rem;
	}
	
	& .bg_diagonal
	{
		clip-path: polygon(0 0, 100% 0px, 100% 100%, 0 calc(100% - 30px));
		padding: 30px 0 70px;
	}
	
	& .-header
	{
		background-color: #e4f4f7;
		
		& .-name
		{
			margin-bottom: 20px;
			font-size: 1.6rem;

			& span
			{
				font-size: 0.7em;
			}
		}
		& .-img
		{
			
		}
	}
	& .-interviewer
	{
		color: #666666;

		& p
		{
			margin: 1em 0;
			
			&:first-of-type
			{
				&::before
				{
					content: "──";
					margin-right: 10px;
				}
			}
		}
	}

	@media only screen and (min-width: 768px)
	{
		& .bg_diagonal
		{
			clip-path: polygon(0 0, 100% 0px, 100% 100%, 0 calc(100% - 80px));
			padding: 50px 0 120px;
		}
	
		& .-header
		{
			& .-wrap
			{
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				& .-name
				{
					margin-bottom: 0;
					width: 40%;
					font-size: 1.8rem;
					
					& span
					{
						font-size: 0.8em;
					}
				}
				& .-img
				{
					width: 57%;
				}
			}
		}
	}
}



.splide__pagination
{
	bottom: -30px;

	& .splide__pagination__page.is-active
	{
		background: #333;
	}
}
@media only screen and (min-width: 768px)
{
	& .splide__pagination
	{
		bottom: -40px;
	}
}












