@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Base Layout CSS
	
	Update Description :
	[2024/03/01] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2.  [Visual] Setting
	3. header [G Navi] Setting
	4.  [First Veiw] Setting
	*. Clear Fix
	
====================================== */



/*===== ■1. Individual Redefinition =====*/
body {
	background-color: #EFEFF0;
}

.toppage article, #article {
    display: block;
    position: relative;
    padding: 30px 0px;
}

.toppage #main_menu_what {
	position: relative;
	margin: 0 auto;
    width: 100%;
    min-width: 1392px;
    padding: 80px calc((100% - 1296px) / 2) 0;
}
.toppage #main_menu_what h2 {
	margin-bottom: 50px;
}
.toppage #top_slider_photo > .box_polygon_white {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 1;
}

.toppage #main_menu_works,
.toppage #main_menu_works_style {
	position: relative;
	margin: 0 auto;
    width: 100%;
    min-width: 1392px;
    padding: 80px calc((100% - 1104px) / 2) 0 calc(((100% - 1104px) / 2) + 80px);
}
.toppage #main_menu_works .img_woeks {
	width: 70%;
}

.toppage #main_menu_voice {
	position: relative;
	margin: 0 auto;
    width: 100%;
	min-width: 1392px;
	padding: 160px calc((100% - 1104px) / 2) 0;
}
.toppage #main_menu_works_style .img_woeks_style {
	width: 50%;
}

@media only screen and (max-width: 1392px){
	.toppage #main_menu_works,
	.toppage #main_menu_works_style {
		min-width: auto;
		max-width: none;
		padding: 80px calc((100% - 1104px) / 2) 0 calc(((100% - 1104px) / 2) + 80px);
	}
	.toppage #main_menu_voice {
		min-width: auto;
		max-width: none;
		padding: 160px calc((100% - 1104px) / 2) 0;
	}
}

@media only screen and (max-width: 1296px){
	.toppage #main_menu_what {
		min-width: auto;
		max-width: none;
		padding: 80px 0 0;
	}
	.toppage #main_menu_what .flex2_5050  {
		padding: 0 25px;
	}
}

@media only screen and (max-width: 1154px){
	.toppage #main_menu_works,
	.toppage #main_menu_works_style {
		padding: 80px 25px 0 105px;
	}
	.toppage #main_menu_voice {
		padding: 160px 25px 0;
	}
}

@media only screen and (max-width: 750px){
	.toppage #main_menu_what {
		padding: 32px 0px 0px;
	}
	.toppage #main_menu_what h2 {
		margin-bottom: 10px;
	}
	.toppage #main_menu_works,
	.toppage #main_menu_works_style {
		padding: 80px 25px 0px 25px;
	}
	.toppage #main_menu_voice {
		padding: 170px 0px 0px;
	}
	.toppage #main_menu_works .img_woeks {
		width: 100%;
	}
}



/*===== ■2.  [Visual] Setting =====*/
#visual {
	overflow: hidden;
	position: relative;
	height: 100vh;
	/* min-height: 550px;*/
	margin: 0;
	background: #fff;
}
#visual.top_menu {
    height: 100vh;
    /* min-height: auto;*/
	padding: 0;
    /* background: none;*/
    border-bottom: none;
}

#visual > #visual-comment h1 {
	position: absolute;
	padding: 0 0 0 98.74px;
	top: 50%;
	left: 0;
	display: block;
}
#visual #visual-comment h1 p.catch_copy_img  {
	display: flex;
	align-items: center;
	padding: 40px 0 0 15%;
	width: 100%;
}
#visual #visual-comment h1 p.catch_copy_img img  {
	width: 100%;
}
 
#visual > #video-container_pc a {
    display: inline-block;
    position: absolute;
    bottom: 19px;
    right: 24px;
    /*width: 20.7%;
    min-width: 288px;*/
	width: 288px;
}

#visual #video-container_pc img.img_video {
	position: relative;
    width: 100%;
    border: 2px solid #f0f0f0;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

#visual #video-container_pc img.img_play {
    position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#visual #video-container_pc a span {
    position: absolute;
    left: 0;
    bottom: 20px;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
}

@media only screen and (max-width: 1024px){
	#visual > #visual-comment h1 {
		width: 48%;
	}
	#visual #visual-comment h1 p:first-child img.pc {
		width: 100%;
	}
}
@media only screen and (max-width: 750px){
	#visual {
		background: #240700;
	}
	#visual.top_menu {
		/* height: 620px; */
		/* min-height: 100px; */
		border-bottom: 1px solid #442a23;
		padding-bottom: 50px;
	}
	#visual > #visual-comment h1 {
		width: 100%;
		margin: 0;
		padding: 0 25px;
		top: 75%;
		-webkit-transform: translate(0, -95%);
		transform: translate(0, -95%);
	}
	#visual #visual-comment h1 p:first-child img.sp {
		width: 50%;
	}
	#visual #visual-comment h1 p.catch_copy_img  {
		margin: 0;
		padding: 40px 0 0 0;
		width: 50%;
	}
	#visual > #video-container_sp {
		position: absolute;
		top: 75%;
		/* left: 0; */
		justify-content: center;
		align-items: center;
		width: 100%;
		/* height: 18%; */
		padding: 16px 42px 16px 57px;
		border-bottom: 1px solid #442a23;
	}
	#visual > #video-container_sp a {
	    display: inline-block;
		display: flex;
		position: relative;
		align-items: center;
	}
	#visual #video-container_sp p:first-child {
	    text-align: left;
	    font-size: 2.0rem;
	    font-weight: 700;
	    color: #fff;
	    line-height: 1.3;
	}
	#visual #video-container_sp p span {
	    font-size: 1.5rem;
	    margin-right: 10px;
	    font-weight: 700;
	    color: #fff;
	    text-decoration: underline;
	    border-bottom: 1px solid #707070;
	}
	#visual #video-container_sp p span::after {
		position: absolute;
		left: 9.0rem;
	    content: url('/img/recruit/img_video_play_sp.png');
	    display: inline-block;
	    vertical-align: middle;
		-webkit-transform: scale(1);
	    transform: scale(1);
	}
	#visual #video-container_sp div {
		width: 50%;
	}
	#visual #video-container_sp div.img_video {
		width: 45%;
		min-width: 144px;
		min-height: 42px;
	}
	#visual #video-container_sp div.img_video img {
		position: relative;
		width: 100%;
		/* height: 50%; */
		min-width: 144px;
		border-radius: 10px;
		border: none;
	}

}



/*===== ■3. header  [G Navi] Setting =====*/
body > header {
	position: absolute;
}
body > header.change-color {
	position: fixed;
}
body > header.change-position {
	z-index: 1;
}

body > header .header_left {
	border: 1px solid rgba(0,0,0,.75);
	background: rgba(0,0,0,.75);
	box-shadow: -1px -1px 2px rgba(0,0,0,.75);
}
body > header.change-color .header_left {
	border: 1px solid #f0f0f0;
	background: #fff;
	box-shadow: -1px -1px 2px #f6f6f6;
}
body > header .com_logo img:first-child + span {
	color: #fff;
	border: 1px solid #ffff;
}

body > header #g_navi > ul > li a {
    color: #fff;
}
body > header.change-color #g_navi > ul > li a {
    color: #240700;
}
body > header #utility-navi li.recruit a {
	color: #fff;
	border: 1px solid rgba(0,0,0,.75);
	background: rgba(0,0,0,.75);
	box-shadow: -1px -1px 2px rgba(246,246,246,.75);
}
body > header.change-color #utility-navi li.recruit a {
	color: #240700;
	background: #fff;
	border: 1px solid #f0f0f0;
	box-shadow: -1px -1px 2px #f6f6f6;
}
body > header #utility-navi li.entry a {
	color: #240700;
	font-weight: bold;
	background: #fff;
	border: 1px solid #f0f0f0;
	box-shadow: -1px -1px 2px #f6f6f6;
}
body > header.change-color #utility-navi li.entry a {
	color: #fff;
	background: #636262;
	border: 1px solid #636262;
	box-shadow: -1px -1px 2px #f6f6f6;
}

@media only screen and (max-width: 1279px){
	body > header {
		position: fixed;
	}
	body > header .header_left {
	    border: none;
    	background: #fff;
		border-bottom: 1px solid #e5e5e5;
	    box-shadow: none;
	}
	body > header #g_navi > ul > li a {
	    color: #240700;
	}

	body > header #utility-navi li.recruit a ,
	body > header.change-color #utility-navi li.recruit a {
		color: #fff;
		border: 1px solid #fff;
		background: #000;
		box-shadow: none;
	}
}



/*===== ■4.  [First Veiw] Setting =====*/
#first_view {
    display: block;
	position: relative;
	margin: 0 auto;
    width: 100%;
	min-width: 1392px;
	padding: 150px calc((100% - 1104px) / 2) 50px;
	background: #fff;
}
#first_view .more_page_img img {
	width: 100%;
    min-width: 320px;
    min-height: 180px;
	object-fit: cover;
	aspect-ratio: 2 / 1;
}
#first_view .imag_you {
	position: relative;
	margin-left: 12%;
}
#first_view .imag_you > span {
    position: absolute;
    left: 5%;
    bottom: -10px;
}
#first_view .top_message img {
	width: 50%;
	max-width: 655px;
}
#first_view .block2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#first_view .block2 > * { width: 50%;}

#first_view .top_message p {
	position: relative;
	font-size: 3.0rem;
	font-weight: 600;
	line-height: 2;
}
#first_view .block2 div.texts {
	text-align: center;
}
#first_view .block2 div.texts div {
	display: inline-block;
	text-align: left;
	padding: 0 20px;
}
#first_view .block2 div.texts p {
	font-size: 1.8rem;
	font-weight: 400;
}
#first_view .block2 div.texts p.texts {
    text-align: center;
    display: inline-block;
}
#first_view .block2 div.texts p.texts span {
	text-align: left;
	display: block;
}
#first_view .block2 p.more_page_img {
	text-align: center;
}
#first_view .block2 a.more_page_img {
	position: relative;
	width: 100%;
	display: inline-block;
	padding: 10% 0 5% 2.0rem;
}

#first_view .block2 a.more_page_img .item1 {
	order: 1;
}
#first_view .block2 a.more_page_img .item2 {
	order: 2;
}
#first_view .block2 a.more_page_img .item3 {
	order: 3;
}

#first_view .block2 a.more_page_img span {
	padding: 0;
}
#first_view .block2 a.more_page_img > span.more_page_text {
    position: absolute;
    left: 0;
    top: 0;
    text-align: left;
    font-size: 3.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: #240700;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}
#first_view .block2 a.more_page_img > span.arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    padding: 10px 50px 10px 20px;
    border: 1px solid #fff;
    border-radius: 50px;
    background: #240700;
    -webkit-transform: translate(0,-5%);
    transform: translate(0,-5%);
}
.arrow::before {
    right: 44px;
    width: 12px;
    height: 2px;
    background:#fff;
}
.arrow::after {
    right: 45px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow::before, 
.arrow::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	vertical-align: middle;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	content: "";
}

@media only screen and (max-width: 1392px){
	#first_view {
		min-width: auto;
		max-width: none;
		padding: 150px calc((100% - 1104px) / 2) 50px;
	}
}
@media only screen and (max-width: 1279px){
	#first_view {
		padding: 50px 25px;
	}
	#first_view .top_message p {
		font-size: 2.5rem;
	}
	#first_view .top_message p .top_message_text {
		font-size: 2.0rem;
	}
	#first_view .block2 div.texts p {
		font-size: 1.5rem;
		font-weight: 400;
	}
}

@media only screen and (max-width: 829px){
	#first_view .more_page_img img {
		width: 100%;
		min-width: auto;
		min-height: auto;
	}
	#first_view .top_message p {
		font-size: 2.0rem;
	}
	#first_view .top_message p .top_message_text {
		font-size: 1.8rem;
	}
}

@media only screen and (max-width: 750px){
	#first_view {
		display: block;
		position: relative;
		padding: 50px 25px;
		background: #fff;
	}
	#first_view .imag_you,
	#first_view .imag_no1 {
		text-align: center;
	}
	#first_view .imag_you > span {
		left: 11%;
		-webkit-transform: translate(0,0);
		transform: translate(50%,0);
	}
	#first_view .top_message {
		padding-left: 0;
	}
	#first_view .top_message p {
		font-size: 2.0rem;
	}
	#first_view img {
		width: 100%;
	}
	#first_view .block2 > * { width: 100%; margin-bottom: 50px;}
	#first_view .block2 { display: block; }	
	#first_view .block2 div.texts {
		text-align: center;
		margin-bottom: 0;
	}
	#first_view .block2 div.texts div {
		text-align: center;
		padding: 0;
		display: block;
	}
	#first_view .block2 div.texts p {
		font-size: 1.5rem;
		font-weight: bold;
	}
	#first_view .block2 p.more_page_img {
		text-align: left;
	}
	#first_view .block2 a.more_page_img {
		width: 100%;
		margin: 0 5% 0 0;
		padding: 0;
	}

	#first_view .block2 a.more_page_img .item1 {
		order: 2;
	}
	#first_view .block2 a.more_page_img .item2 {
		order: 1;
	}
	#first_view .block2 a.more_page_img .item3 {
		order: 3;
	}
	
	#first_view .block2 p.more_page_img img {
		width: 50%;
		min-width: 160px;
		min-height: 120px;
		object-fit: cover;
		aspect-ratio: 4 / 3;
	}
	#first_view .block2 a.more_page_img span.more_page_text {
		left: calc(50% + 20px);
		top: 5%;
		font-size: 2.5rem;
		color: #240700;
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	#first_view .block2 a.more_page_img span.arrow {
		left: calc(50% + 20px);
		bottom: 0;
		font-size: 1.5rem;
		font-weight: 600;
		color: #240700;
		padding: 10px 0px;
		border: none;
		border-radius: 0;
		background: transparent;
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	#first_view .block2 a.more_page_img > span.arrow {
	    position: absolute;
	    right: 0;
	    padding: 3% 0;
	}
	.arrow::before {
		background:#240700;
	}
	.arrow::after {
		border-top: 2px solid #240700;
		border-right: 2px solid #240700;
	}
	.arrow::before, 
	.arrow::after {
		left: 70%;
	}
}