@charset "UTF-8";

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WP Maruso Group Theme
	ver.2023.08.16.Custom-
	固定ページ「採用情報」　スタイルシート
────────────────────────────────────────
FileName:		/marusogroupTheme/assets/css/style-page-recruit.css
Editor:			TRUSTEC
Description:	固定ページ「採用情報」　スタイルシート。
────────────────────────────────────────
2023/07/25:		公開。
2022/12/01:		開発開始。
2022/11/01:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* ::::: [COMMON] ::::: */

/* Custom Properties
--------- --------- --------- ------- */
:root {
}





/* ::::: [COMMON-PARTS] ::::: */






/* ::::: [SECTION-RECRUIT-MOVIE] ::::: */

/* Setting
--------- --------- --------- ------- */
#recruit-movie {
	padding-bottom: 3vw;
    position: relative;
	/*background-color: rgba(0, 255, 180, 0.1);*/
}
#recruit-movie::before {
	width: 80%;
	height: 85%;
	top: 15%;
	left: 0;
}


/* Over Write: Pattern Block Llandscape
--------- --------- --------- ------- */
#recruit-movie .pattern-block-landscape {
}

#recruit-movie .picture-wrapper {
	/*background-color: rgba(0, 180, 255, 0.1);*/
}
#recruit-movie .picture-wrapper::before {
}

#recruit-movie .pattern-block-landscape-max-width {
	width: 83%;
	/*background-color: rgba(0, 180, 255, 0.1);*/
}


/* Over Write: Pattern Title Marker
--------- --------- --------- ------- */
#recruit-movie .picture-wrapper .pattern-title-marker {
	top: 0;
	left: 0;
}


/* Over Write: Pattern Title Handwriting
--------- --------- --------- ------- */
#recruit-movie .picture-wrapper .pattern-title-handwriting {
	bottom: 0.5em;
	right: -1em;
}


/* Movie Player
--------- --------- --------- ------- */
.pattern-block-landscape .movie-player {
	max-width: 82%;
	/*aspect-ratio: 4 / 3;*/
	aspect-ratio: 16 / 11;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	z-index: 10;
	/*background-color: rgba(255, 0, 0, 0.2);*/
}

.pattern-block-landscape .movie-player-wrapper {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	/*background-color: rgba(255, 0, 0, 0.2);*/
}

.pattern-block-landscape .movie-player-wrapper figure {
	width: 100%;
	margin: 0;
	padding: 0;
	/*background-color: rgba(255, 255, 0, 0.1);*/
}

figure video {
	background-color: #000000;
	vertical-align: bottom;
	width: 100%;
	/*aspect-ratio: 4 / 3;*/
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Setting
	--------- --------- --------- ------- */
	#recruit-movie {
	}
	#recruit-movie::before {
		width: calc(100vw - calc(var(--magazin-layout-space-width) * 2));
		height: 100%;
		top: 0;
	}

	#recruit-movie.ml-my {
		margin-top: 7rem;
		margin-bottom: 10rem;
	}

	/* Over Write: Pattern Title Marker
	--------- --------- --------- ------- */
	#recruit-movie .picture-wrapper .pattern-title-marker {
		/*position: relative;*/
		top: auto;
		left: auto;
		bottom: -3rem;
		right: 0;
	}
	#recruit-movie .picture-wrapper .pattern-title-marker .title {
		text-align: right;
	}


	#recruit-movie .pattern-block-landscape-max-width {
		width: 100%;
	}

	/* Over Write: Pattern Title Handwriting
	--------- --------- --------- ------- */
	#recruit-movie .picture-wrapper .pattern-title-handwriting {
		right: auto;
		left: var(--magazin-layout-space-width);
		top: -1rem;
		bottom: auto;
	}

	/* Movie Player
	--------- --------- --------- ------- */
	.pattern-block-landscape .movie-player {
		width: calc(100vw - calc(var(--magazin-layout-space-width) * 2));
		max-width: none;
	}
}



/* ::::: [SECTION-TOP-MESSAGE] ::::: */

/* Setting
--------- --------- --------- ------- */
#top-message {
    position: relative;
/*	padding-bottom: 3vw;
	background-color: rgba(180, 255, 0, 0.1);*/
}
#top-message::before {
	content: "";
	width: 89%;
	height: 88%;
	top: 12%;
}


/* Over Write: Pattern Block Llandscape
--------- --------- --------- ------- */
#top-message .pattern-block-landscape {
}

#top-message .picture-wrapper {
}
#top-message .picture-wrapper::before {
}

#top-message .pattern-block-landscape-max-width {
	width: 83%;
	/*background-color: rgba(180, 255, 0, 0.1);*/
}

#top-message .pattern-block-landscape .landscapes {
}

#top-message .message-wrapper {
}
#top-message .message-wrapper .message-wrapper-center {
}


/* Over Write: Pattern Title Marker
--------- --------- --------- ------- */
#top-message .picture-wrapper .pattern-title-marker {
	right: 0;
}


/* Over Write: Pattern Title Handwriting
--------- --------- --------- ------- */
#top-message .picture-wrapper .pattern-title-handwriting {
	left: 0;
}


/* Pictures
--------- --------- --------- ------- */
/*	横長	*/
#top-message .landscapes {
}
#top-message .landscapes-wrapper {
	/*background-color: rgba(255, 0, 0, 0.2);*/
}

/*	縦長	*/
#top-message .portraits {
	aspect-ratio: 9 / 20;
	/*background-color: rgba(255, 0, 0, 0.2);*/
}

#top-message .portraits .portraits-wrapper .picture img {
	background-color: #000000;
	aspect-ratio: 9 / 16;
}


#top-message .message-text-wrapper .picture-sm {
}
#top-message .message-text-wrapper .picture-sm img {
}


/* Over Write: Message
--------- --------- --------- ------- */
/*	Message	*/
#top-message .message {
}

/*	Signature	*/
#top-message .signature {
}
#top-message .signature-post {
}
#top-message .signature-name {
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {

	/* Pictures
	--------- --------- --------- ------- */
	/*	縦長	*/
	#top-message .portraits {
		width: 80%;
		aspect-ratio: auto;
/*		margin-top: 1em;*/
		margin: 1em auto;
	}

	#top-message .portraits .portraits-wrapper {
		/*aspect-ratio: auto;*/
		position: initial;
		transform: none;
	}

	#top-message .portraits .portraits-wrapper .picture {
		/*aspect-ratio: auto;*/
	}

	#top-message .portraits .portraits-wrapper .picture img {
		width: 100%;
/*		aspect-ratio: 4 / 3;*/
		aspect-ratio: 3 / 4;
		object-fit: cover;
		object-position: center;
	}
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Setting
	--------- --------- --------- ------- */
	#top-message {
	}
	#top-message::before {
		width: 100%;
		height: 97%;
		top: 5%;
	}

	#top-message.ml-my {
		margin-top: 10rem;
		margin-bottom: 7rem;
	}

	/* Over Write: Pattern Title Marker
	--------- --------- --------- ------- */
	#top-message .picture-wrapper .pattern-title-marker {
		top: auto;
		right: auto;
		left: 0;
		bottom: 0;
	}
	#top-message .picture-wrapper .pattern-title-marker .title {
	}

	/* Over Write: Pattern Title Handwriting
	--------- --------- --------- ------- */
	#top-message .picture-wrapper .pattern-title-handwriting {
		left: auto;
		bottom: auto;
		right: var(--magazin-layout-space-width);
		top: -1rem;
		transform: rotate(8deg);
	}

	/* Over Write: Pattern Block Llandscape
	--------- --------- --------- ------- */
	#top-message .pattern-block-landscape .landscapes {
		max-width: none;
		width: calc(100vw - calc(var(--magazin-layout-space-width) * 2));
	}

	#top-message .landscapes-wrapper {
		top: 0;
		left: 0;
		transform: translate(0, 0);
	}

	#top-message .pattern-block-landscape-max-width {
		width: 100%;
	}


	#top-message .message-wrapper {
		padding-left: var(--magazin-layout-space-width);
		padding-right: var(--magazin-layout-space-width);
	}
	#top-message .message-wrapper.ml-mt-half {
		margin-top: 2rem;
	}
	#top-message .message-wrapper .message-text {
	}
	#top-message .message-wrapper .message-text .message-wrapper-center {
		max-width: none;
		width: 100%;
/*		padding-left: var(--magazin-layout-space-width);
		padding-right: var(--magazin-layout-space-width);*/
		padding-left: 0;
		padding-right: 0;
	}

	#top-message .message-wrapper .ps-5 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}


	/* Over Writes: Message
	--------- --------- --------- ------- */
	/*	Message	*/
	#top-message .message {
		padding-left: var(--magazin-layout-space-width);
		padding-right: var(--magazin-layout-space-width);
	}

	/*	Signature	*/
	#top-message .signature-name {
		font-size: 1.3em;
	}
}