@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/*
Theme Name: 株式会社新幸建設
Theme URI: https://sinkou-const.jp
Author: CHANT WORKS
Author URI: https://chant-works.com/
Description: 株式会社新幸建設様Webサイト専用テーマ
Version: 1.0
*/

:root {
	--color_white: #ffffff;
	--color_black: #404040;
	--color_red: #c8281e;
	--color_grey: #f0f0f0;
	--color_blue: #a7bdd4;
	--color_navy: #506478;
}

::selection {
	color: #ffffff;
	background-color: #78BEF0;
}

html {
	font-size: 0.20834vw;
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

body {
	color: var(--color_black);
	font-size: 13rem;
	font-family: 'Oswald', 'Zen Kaku Gothic New', sans-serif;
	line-height: 1.75;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background-color: #778594;
}

body.active {
	height: 100%;
	overflow: hidden;
}

header,
main,
footer {
	width: 100%;
	overflow: hidden;
}

a {
	color: var(--color_black);
	text-decoration: none;
	transition: opacity 0.4s ease;
}

a:hover {
	opacity: 0.5;
}

figure {
	margin: 0;
}

img,video {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

p {
	margin-bottom: 2em;
}

p:last-child {
	margin-bottom: 0;
}

h1,h2,h3,h4,h5{
	font-weight:bold;
}

.wrapper {
	max-width: 1440rem;
	margin-right: auto;
	margin-left: auto;
	background-color: #ffffff;
	box-shadow: 0 0 20rem rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

/*--汎用--*/

.pc,
.tb {
	display: none;
}

.sp {
	display: block;
}

.inner {
	max-width: 1160rem;
	padding-right: 30rem;
	padding-left: 30rem;
	margin-right: auto;
	margin-left: auto;
}

.common_padding {
	padding-right: 30rem;
	padding-left: 30rem;
}

.common_section {
	padding-top: 80rem;
	padding-bottom: 80rem;
	position: relative;
	z-index: 0;
}

.common_section::before {
	content: "";
	background-color: #F3F4F4;
	width: 33.33333%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.grey_section {
	background-color: #E5E8EB;
	position: relative;
	z-index: 0;
}

.grey_section::before {
	content: "";
	background-color: #DADEE1;
	width: 33.33333%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.section_ttl {}

.section_ttl {
	display: inline-block;
	color: #506478;
	font-weight: bold;
	margin-bottom: 60rem;
}

.section_ttl span {
	display: block;
	min-width: 160rem;
	color: #141E28;
	font-size: 4em;
	line-height: 1.2;
	position: relative;
	padding-bottom: 28rem;
	margin-top: 15rem;
}

.section_ttl span::before {
	content: "";
	width: 100%;
	height: 7rem;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #7C8B9A;
}

.section_ttl span::after {
	content: "";
	width: 33.33333%;
	height: 7rem;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #141E28;
}

.section_subttl {
	color: #506478;
	font-size: 1.75em;
	font-weight: bold;
	margin-bottom: 20rem;
}

.button {
	display: inline-block;
	clip-path: polygon(0 0, calc(100% - 20rem) 0, 100% 20rem, 100% 100%, 0 100%);
}

.button>a,
.button>span {
	display: block;
	color: #ffffff;
	background-color: #96AFC8;
	padding: 15rem 40rem;
}

.clip {
	clip-path: polygon(0 0, calc(100% - 40rem) 0, 100% 40rem, 100% 100%, 0 100%);
}

.table{
	display: grid;
	grid-template-columns: auto 1fr;
	border-top: 1rem solid #000000;
	margin-bottom: 30rem;
}

.table > *{
	border-bottom: 1rem solid #000000;
	padding:10rem 20rem;
}

.table dt{
	font-weight: bold;
}

.disc_list{
	list-style: disc;
}

.disc_list li{
	margin-left: 1em;
}

.column_2{
	display: inline-grid;
	grid-template-columns: auto auto;
	gap:10rem 20rem;
}

.mt_15{
	margin-top:1.5em;
}

.mt_30{
	margin-top:3em;
}

/*--特定--*/

.header {
	position: fixed;
	z-index: 10;
	overflow: visible;
	max-width: 1440rem;
	margin-right: auto;
	margin-left: auto;
}

.header_bar {
	display: flex;
	align-items: center;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 0 0 20rem rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 2;
	transition: background 0.5s ease;
}

.header_bar:hover {
	background-color: rgba(255,255,255,1);
}

.header_name {
	font-size: 0.75em;
	font-weight: bold;
	margin-right: auto;
}

.header_name,
.header_name a {
	display: flex;
	align-items: flex-end;
	gap: 20rem;
}

.header_name_logo {
	width: 250rem;
	height: auto;
}

.header_btn {
	font-size: 0.75em;
	line-height: 20rem;
}

.header_btn a {
	display: block;
	text-align: center;
	padding: 10rem 20rem;
}

.header_recruit_btn a,
.header_contact_btn a {
	color: #ffffff;
}

.header_btn figure img {
	width: 40rem;
	height: 40rem;
}

.header_recruit_btn {
	background-color: #96AFC8;
}

.header_contact_btn {
	background-color: #141E28;
}

.header_menu_btn {
	background-color: #FFFFFF;
	cursor: pointer;
}

.header_menu_btn div {
	width: 40rem;
	height: 40rem;
	position: relative;
}

.header_menu_btn div span {
	background-color: #000000;
	width: 30rem;
	height: 4rem;
	position: absolute;
	left: 5rem;
}

.header_menu_btn div span:first-child {
	top: 8rem;
	transition: top 0.3s 0.3s ease, transform 0.3s ease;
}

.header_menu_btn div span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.3s ease
}

.header_menu_btn div span:last-child {
	bottom: 8rem;
	transition: bottom 0.3s 0.3s ease, transform 0.3s ease;
}

.header_menu_btn.active div span:first-child {
	top: 18rem;
	transform: rotate(35deg);
	transition: top 0.3s ease, transform 0.3s 0.3s ease;
}

.header_menu_btn.active div span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
}

.header_menu_btn.active div span:last-child {
	bottom: 18rem;
	transform: rotate(-35deg);
	transition: bottom 0.3s ease, transform 0.3s 0.3s ease;
}

.header_menu {
	display: none;
	width: 100%;
	padding-top: 30rem;
	padding-bottom: 60rem;
	box-sizing: border-box;
	background-color: rgba(115, 132, 147, 0.85);
	box-shadow: 0 0 20rem rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	height:calc(100dvh - 80rem);
	box-sizing: border-box;
	overflow: auto;
}

.header_nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 60rem;
}

.header_nav_items{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20rem;
}

.header_nav_item a {
	color: #ffffff;
}

.header_nav_item {
	display: flex;
	align-items: center;
	gap: 30rem;
}

.header_nav_item_ttl>a {
	display: block;
	font-size: 20rem;
	font-weight: bold;
	position: relative;
	width: 100%;
	padding-bottom: 14rem;
  margin-bottom: 20rem;
}

.header_nav_item_ttl>a::after {
	content: "";
	width: 100%;
	height: 4rem;
	background-color: #ffffff;
	position: absolute;
	left: 0;
	bottom: 0;
}

.header_nav_item_img {
	width: 160rem;
	height: 160rem;
	object-fit: cover;
	overflow: hidden;
	flex: 0 0 auto;
	clip-path: polygon(0 0, calc(100% - 20rem) 0, 100% 20rem, 100% 100%, 0 100%);
	position: relative;
}

.header_nav_item_img::after{
	content: "";
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44rem;
  height: 44rem;
  background: url(./images/arrow_white_right.png) #506478 no-repeat right 5rem bottom 5rem / 12rem 12rem;
	background-image: url("./images/arrow_white_right.png");
  background-image: image-set(url(./images/arrow_white_right.png) 1x, url(./images/arrow_white_right@2x.png) 2x);
}


.header_nav_item_cont {
	flex: 1 1 auto;
}

.header_nav_subitems {
	display: flex;
	text-align: right;
	gap: 5rem 30rem;
	flex-wrap: wrap;
	justify-content: right;
}

.header_nav_subitems li {
	min-width: 33%;
}

.header_nav_subitems li a{
	position: relative;
	padding-left: 16rem;
}

.header_nav_subitems li a::before{
	content:'';
	width:6rem;
	height:6rem;
	background-color: #ffffff;
	position: absolute;
	top:50%;
	left:0;
  transform: translateY(-50%);
	border-radius: 50%;
}

main{
	padding-top: 80rem;
}

#front-page main{
	padding-top: 0;
}

.footer {
	display: grid;
	grid-template-columns: 1fr 30rem;
	background-color: #7C8B9A;
}


.footer_summary {
	color: #ffffff;
	background-color: #506478;
	padding-top: 60rem;
	padding-bottom: 90rem;
	clip-path: polygon(0 0, calc(100% - 60rem) 0, 100% 60rem, 100% 100%, 0 100%);
	position: relative;
}

.footer_summary a {
	color: #ffffff;
}

.footer_name {
	margin-bottom: 30rem;
}

.footer_name span {
	display: block;
	font-size: 1.25em;
	margin-top: 10rem;
}

.footer_address {
	margin-bottom: 5rem;
}

.footer_tel {
	margin-bottom: 5rem;
}

.footer_copyright {
	
	position: absolute;
	bottom: 40rem;
	left: 30rem;
}


/*-トップページ--*/

.hero {
	color: #ffffff;
	position: relative;
	background-color: #808080;
	padding-bottom: 120rem;
	box-sizing: border-box;
}

.hero::before {
	content: "";
	width: 100%;
	height: 120rem;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index:2;
	background-color: #7C8B9A;
}

.hero::after {
	content: "";
	width: 33.33333%;
	height: 120rem;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index:2;
	transform: translateX(-50%);
	background-color: #778594;
}

.hero_movie{
	position: relative;
	overflow: hidden;
}

.hero_movie::before{
	content: "";
	position: absolute;
	width:100%;
	height: 100%;
	top:0;
	left:0;
	z-index:1;
	background: url(./images/movie_overlay.png) repeat left top;
	opacity: 0.25;
}

.hero_movie video{
  width:100%;
	height: 100vw;
	object-fit: cover;
}

.hero_slogan {
	font-size: 5em;
	font-weight: bold;
	line-height: 1;
	text-align: right;
	position: absolute;
	z-index: 3;
	right: 30rem;
	bottom: 10rem;
	text-shadow: 0 0 20rem rgba(0,0,0,0.5);
}

.hero_slogan span{
	display: block;
	margin-bottom:20rem;
}

.hero_slogan .small {
	display: block;
	font-size: 33.33333%;
}

.hero_sub_slogan {
	font-size: 2em;
	font-weight: bold;
	line-height: 2;
	position: absolute;
	left: 30rem;
	top: 120rem;
	z-index:3;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-shadow: 0 0 20rem rgba(0,0,0,0.5);
}

.hero_sub_slogan span {
	display: block;
	border-left: 6rem solid #ffffff;
}

.hero_sub_slogan span:last-child {
	border-left: none;
}

.top_news {}

	.top_news_conts {
		display: grid;
		grid-template-columns: 1fr;		
		gap: 60rem;
	}

.top_news_ttl{
	margin-bottom:0;
}



.top_news_button {
	display: inline-block;
}

.top_news_item {
	margin-bottom: 20rem;
}

.top_news_item:last-child {
	margin-bottom: 0;
}

.top_news_item a {
  display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 10rem 20rem;
}

.top_news_item_ttl{
	grid-column: span 3;
}

.top_news_item_date,
.top_news_item_ttl{
	font-size: 1.25em;
}

.top_news_item_category {
	color: #ffffff;
	font-size: 0.75em;
	background-color: #506478;
	padding: 10rem 20rem;
}

.top_company_info_conts{
	display: grid;
  gap: 60rem;
  grid-template-columns: 1fr;
	align-items: center;
	text-align: left;
}

.top_company_info_img picture{
	display: block;
  width: 100%;
  aspect-ratio: 1/1;
}

.top_company_info_img picture img{
	width:100%;
	height: 100%;
	object-fit: cover;
}

.top_business_inner{
	text-align:center;
	padding-top: 80rem;
	padding-bottom: 80rem;
}

.top_business_head{
	
}

.top_business_ttl{
	text-align: center;
	margin-bottom: 0;
}

.top_business_img,
.top_business_summary {
	flex: 1;
}

.top_business_img picture {
	display: block;
	width: 100%;
	aspect-ratio: 1/1;
	background-color: #808080;
}

.top_business_items {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap:2rem;
	position: relative;
}

.top_business_items:before{
	content:"";
	width:100%;
	height:100%;
	position: absolute;
	z-index:-1;
	background-color: #ffffff;
}

.top_business_item{
	grid-column: span 2;
}

.top_business_item:nth-child(1),
.top_business_item:nth-child(2),
.top_business_item:nth-child(3),
.top_business_item:nth-child(4){
	grid-column: span 3;
}

.top_business_item a{
	display: block;
	height: 100%;
	background-color: #E5E8EB;
}

.top_business_item:nth-child(2) a,
.top_business_item:nth-child(3) a,
.top_business_item:nth-child(5) a,
.top_business_item:nth-child(7) a{
	background-color: #CED0D3;
}


.top_business_item picture {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
}

.top_business_item picture img{
	with:100%;
	height: 100%;
	object-fit: cover;
}

.top_business_item picture::after {
	content: "";
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	position: absolute;
	right: 0;
	bottom: 0;
	width: 80rem;
	height: 80rem;
	background: url(./images/arrow_white_right.png) #506478 no-repeat right 10rem bottom 12.5rem / 24rem 24rem;
	background-image: image-set(url(./images/arrow_white_right.png) 1x, url(./images/arrow_white_right@2x.png) 2x);
}

.top_business_item_summary {
	text-align: center;
	padding: 20rem;
}

.top_business_item_ttl {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 10rem;
}

.top_recruit {}

.top_recruit_inner {
  text-align: center;
}

.top_recruit_conts {
	display: grid;
  gap: 60rem;
  grid-template-columns: 1fr;
	align-items: center;
	text-align: left;
}

.top_recruit_img picture {
	display: block;
	width: 100%;
	aspect-ratio: 1/1;
}

.top_recruit_img picture img {
	width:100%;
	height: 100%;
	object-fit: cover;
}

.top_banner_items {
	text-align: center;
}

.top_banner_item {
	background-color: #808080;
	width:360rem;
	margin-right: auto;
	margin-bottom: 30rem;
	margin-left: auto;
	border: 5rem solid #ffffff; 
	border-radius: 10rem;
	overflow: hidden;
	position: relative;
}

.top_banner_item::before{
	content: "";
	position: absolute;
	top:0;
	left:0;
	z-index: 999;
	width:100%;
	height: 100%;
	box-shadow: inset 0 0 10rem rgba(0,0,0,0.25);
	pointer-events: none;
}

.top_banner_item:last-child{
	margin-bottom: 0;
}

/*--固定ページ--*/

.breadcrumb{
	font-size: 0.9em;
  padding-top: 20rem;
	padding-bottom: 20rem;
}

.breadcrumb_inner{
	max-width: none;
}

.breadcrumb span {
	margin-right: 0.5em;
	margin-left: 0.5em;
}

.breadcrumb span:first-child {
	margin-left: 0;
}

.breadcrumb span:last-child {
	margin-right: 0;
}

.page_head {
	display: flex;
	align-items: center;
	position: relative;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background-color: #ffffff;
}

.page_head_img {
	width: 50%;
	aspect-ratio: 1/1;
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 60rem) 0, 100% 60rem, 100% 100%, 0 100%);
}

.page_head_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.page_head_ttl {
	color:var(--color_black);
	font-size: 28rem;
	font-weight: bold;
	text-align: right;
	padding-bottom: 60rem
}

.page_head_ttl span{
	display: block;
}

.page_head_ttl .page_head_ttl_en {
	display: block;
	color: var(--color_blue);
	font-size: 58rem;
	line-height: 1.11em;
	white-space: nowrap;
	opacity: 0.75;
	position: absolute;
	right: 30rem;
	bottom: 15rem;
}

.page_head_img,
.page_head_summary{
	flex:1;
}


.page_head_extra_img{
	position: relative;
}

.page_head_extra_img .inner{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:50%;
	transform: translateX(-50%);
	z-index: 3;
	box-sizing: border-box;
	pointer-events: none;
}

.page_head_extra_ttl{
	position: absolute;
	left:30rem;
	bottom:-0.2em;
	color: #ffffff;
	font-size: 1.9em;
  font-weight: bold;
}
.page_head_extra_ttl span{
	display: block;
  font-size: 4em;
	line-height: 1;
}

.page_head_extra_conts{
	padding-top: 60rem;
	padding-bottom: 60rem;
}

.page_head_extra_subttl{
	color: #506478;
  font-size: 1.75em;
  font-weight: bold;
}

.page_head_extra_conts .inner{
	display: grid;
	grid-template-columns: 1fr;
	gap:60rem;
	align-items: center;
}

.page_head_extra_subttl,
.page_head_extra_summary{
	flex:1;
}

/*--スライド--*/

.arrow {
	width: 30rem;
	height: 30rem;
	border-top: solid 4rem var(--color_white);
	border-right: solid 4rem var(--color_white);
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	transform: translatey(-50%);
	z-index: 100;
	transition: opacity 1s ease;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.5s ease;
}

.arrow:hover {
	opacity: 1;
}

.arrow.prev {
	left: 30rem;
	transform: translatey(-50%) rotate(-135deg);
}

.arrow.next {
	right: 30rem;
	transform: translatey(-50%) rotate(45deg);
}

.page_slide_images.slick-dotted.slick-slider {
	margin-bottom: 0;
}

.page_slide_images .slick-dots {
	bottom: 10rem;
}

.dots {
	position: absolute;
	right: 20rem;
	top: 20rem;
}



.dots li {
	display: inline-block;
	margin-right: 10px;
	line-height: 16px;
}

.dots li button {
	color: transparent;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background-color: transparent;
	position: relative;
	line-height: 10px;
}

.dots li button::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: var(--color_white);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.4;
	transform: scale(0.75);
	transition: transform 0.5s ease;
}

.dots li.slick-active button::before {
	opacity: 1;
	transform: none;
}

/*----*/

.single_ttl{
	display: inline-block;
	color: #506478;
	font-weight: bold;
	margin-bottom: 40rem;
}

.single_date{
	font-size:1.25em;
}

.single_ttl span{
	display: block;
  color: #141E28;
  font-size: 2.5em;
  position: relative;
  padding-bottom: 28rem;
}

.single_ttl span::before{
	content: "";
  width: 100%;
  height: 7rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #7C8B9A;
}

.single_ttl span::after{
	content: "";
  width: 33.33333%;
  height: 7rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #141E28;
}

/*----*/

.work_summary {
	display: grid;
	grid-template-columns: auto 1fr;
	max-width: 880rem;
	margin-right: auto;
	margin-bottom: 60rem;
	margin-left: auto;
	border-top: 1px solid var(--color_black);
	border-right: 1px solid var(--color_black);
}

.work_summary:lsat-child {
	margin-bottom: 0;
}

.work_summary dt,
.work_summary dd {
	padding: 20rem;
	border-bottom: 1px solid var(--color_black);
	border-left: 1px solid var(--color_black);
}

.work_summary dt {
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	min-width: 100rem;
	background-color: var(--color_grey);
}

.work_summary dd {
	background-color: #ffffff;
}

.work_gallery {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 30rem;
}

.work_gallery_img {
	aspect-ratio: 1/1;
}

.work_gallery_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--子ページ一覧--*/

.page_children {}


.page_child {
	background-color: #ffffff;
	margin-bottom: 80rem;
	clip-path: polygon(0 0, calc(100% - 60rem) 0, 100% 60rem, 100% 100%, 0 100%);
}

.page_child:last-child {
	margin-bottom: 0;
}

.page_child_summary {
	padding: 30rem;
}

.page_child_text {
	font-size: 1.5em;
	margin-bottom: 20rem;
}

.page_child_button{
	margin-top:15rem;
}

.page_child_img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.page_child_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--会社概要・沿革--*/

.outline_conts{
	padding-right: 25%;
}

.outline_note_txt{
	font-size: 0.9em;
	text-align: right;
}

.sdgs_title{
	padding-left: 180rem;
	position: relative;
}

.sdgs_title::before{
	content: "";
	position: absolute;
	left:0;
	top:50%;
	transform: translateY(-50%);
	width:180rem;
	height: 180rem;
	background: url(./images/sdgs_icon.png) no-repeat center center / cover;
}

.sdgs_items{
	margin-top: 60rem;
}

.sdgs_items .sdgs_item{
	background: #ffffff;
}

.sdgs_item h4{
	color:#ffffff;
	font-size: 20rem;
	line-height: 30rem;
	background: #96AFC8;
	padding:15rem 30rem;
	margin-bottom: 20rem;
}

.sdgs_items .sdgs_sumary{
	padding: 15rem 30rem;
}

.sdgs_item .sdgs_icons{
	display: flex;
	gap:10rem;
	margin-bottom:20rem;
}

.sdgs_conts .sdgs_icons li{
	flex: 1 1 auto;
}


.company_map iframe{
	display:block;
	width:100%;
	height:480rem;
	border:none;
}

/*--採用情報--*/

.recruit_conts{
	padding-bottom: 0; 
}

.recruit_conts_summary{
	padding-right: 30rem;
	padding-bottom: 80rem;
	padding-left: 30rem;
}

.recruit_point_header_summary{
	text-align: center;
	padding: 60rem 30rem;
}

.recruit_point_header_summary img{
	margin-bottom: 30rem;
}

.recruit_point_header_summary h3{
	color:#506478;
	font-size:28rem;
	margin-bottom: 30rem;
}

.recruit_point_header_summary p{
	text-align: left;
	max-width: 720rem;
	margin-left: auto;
	margin-right: auto;
}

.recruit_point_items{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-flow: dense;
}

.recruit_point_items .recruit_point_item{
	overflow: hidden;
}

.recruit_point_items .recruit_point_item img{
	width:100%;
	height: 100%;
	object-fit: cover;
}

.recruit_point_items .item_txt{
	background-color: #ffffff;
	position: relative;
	display: grid;
	align-items: center;
}

.recruit_point_items .item_cont{
	padding: 30rem;
}

.recruit_point_items .item_cont h4{
	text-align: center;
	color:#506478;
	font-size:18rem;
	margin-bottom: 20rem;
}

.recruit_point_items .item_cont p{
	font-size: 12rem;
}

.recruit_point_items .item_txt::after {
	content: "";
	clip-path: polygon(0 0,100% 0, 100% 100%);
	position: absolute;
	right: 0;
	top: 0;
	width: 40rem;
	height: 40rem;
	background-color: #506478;
}

.recruit_point_items .item_txt01{
	grid-column: 2 / span 2;
	grid-row: 3 / span 2;
}

.recruit_point_items .item_txt02{
	grid-column: 2 / span 2;
	grid-row: 7 / span 2;
}

.recruit_point_items .item_txt03{
	grid-column: 2 / span 2;
	grid-row: 11 / span 2;
}

.recruit_point_items .item_wide{
	grid-column: span 2;
}

.recruit_point_items .item_tall{
	grid-row: span 2;
}


.recruit_conts .txt_large{
	font-size: 1.25em;
}

.recruit_conts .txt_strong{
	font-weight: bold;
}

.recruit_about_item_ttl{
	font-size:1.1em;
	margin-bottom: 10rem;
}

.recruit_conts_img{
	grid-row: span 2;
}

.recruit_conts_point{
	background-color: #ffffff;
	padding:40rem;
}

.recruit_jobs_selector{
	display: flex;
	border-bottom: 12px solid #506478;
}



.recruit_jobs_genre{
	flex:0 0 50%;
	font-size:1.5em;
	font-weight: bold;
	text-align: center;
	background:#DADEE1;
	padding:10rem 30rem 10rem 10rem;
	transition: all 0.5s ease;
	box-sizing: border-box;
}

.recruit_jobs_genre.current{
	color:#ffffff;
	background:#506478;
}

.recruit_jobs_conts{
	background-color: #ffffff;
}

.recruit_jobs_cont{
	display: none;
	padding:20rem;
	background-color: #ffffff;
}


.recruit_jobs_cont.active{
	display: block;
	border-right: 10rem solid #DADEE1;
	border-bottom: 10rem solid #DADEE1;
	border-left: 10rem solid #DADEE1;
}

.recruit_jobs_cont dl{
	display: grid;
	grid-template-columns: 1fr;
}

.recruit_jobs_cont dl dt,
.recruit_jobs_cont dl dd{
	border-bottom:2px dotted #000000;
	padding:10rem 20rem;
}
.recruit_jobs_cont dl dt:last-of-type,
.recruit_jobs_cont dl dd:last-of-type{
	border-bottom: none;
}

.recruit_jobs_cont dl dt{
	font-weight: bold;
}

.form{
	max-width: 880rem;
	display: grid;
	grid-template-columns: 1fr;
	gap:20rem 40rem;
	margin:60rem auto;
}

.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form input[type=number],
.form textarea{
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size:15px;
	padding:5rem 10rem;
	box-sizing: border-box;
}

.form input{
	
}

.form .size_s{
	width:50%;
}

.form .size_m{
	width:75%;
}

.form .size_l{
	width:100%;
}

.form dt{
	font-weight: bold;
}

.form .wpcf7-list-item.first{
	margin-left: 0;
}

.form .submit-button{
}

.form .submit-button input{
	width:100%;
	color:#ffffff;
	font-size: 2em;
	font-weight: bold;
	background-color: #506478;
	border:none;
	padding:10rem 20rem;
	box-sizing: border-box;
}

.form .wpcf7-response-output{
	text-align: center;
	max-width: 880rem;
	margin-right: auto !important;;
	margin-left: auto !important;;
}


/*--汎用--*/
.common_ttl{
	color:#506478;
	font-size: 32rem;
	margin-bottom: 40rem;
}

.common_subttl{
	color:#506478;
	font-size: 24rem;
	margin-bottom: 20rem;
}

/*--効果--*/

.effect_section{}

.effect_section .effect_cont{
	transition: opacity ease 1s, transform ease 1s;
}

.effect > *{
	opacity:0;
	transform: translate(0, 30rem);
	transition: opacity ease 1s, transform ease 1s;
}

.effect.active > *{
	opacity:1;
	transform: translate(0);
}

.b2t{
	opacity:0;
	transform: translate(0, 30rem);
	transition: opacity ease 1s, transform ease 1s;
}

.active .b2t{
	opacity:1;
	transform: translate(0);
}

.l2r{
	opacity:0;
	transform: translate(-40rem, 0) ;
	transition: opacity ease 1s, transform ease 1s;
}

.active .l2r{
	opacity:1;
	transform: translate(0);
}
.slide_b2t{
	transform:translate(0, 120%);
	transition:transform ease 1s;
}

.active .slide_b2t{
	transform:translate(0);
}

.float{
	opacity:0;
	transform: translate(0, 0) ;
	transition: opacity ease 1s, transform ease 1s, box-shadow ease 1s;
	box-shadow: 0 0 0 #3d464f;
}

.active .float{
	opacity:1;
	transform: translate(-15rem, -15rem);
	box-shadow: 15rem 15rem 0 #3d464f;
}

.effect.active{}

.effect_section.active .slide_l2r,
.effect.active.slide_l2r{
	display: inline-block;
	position: relative;
	overflow: hidden;
}
.effect_section .slide_l2r > *,
.effect.slide_l2r > *{
	opacity: 0;
	transform: translate(0) !important;
}

.effect_section.active .slide_l2r > *,
.effect.active.slide_l2r > *{
	animation: slide_l2r 0.8s ease forwards;
}

@keyframes slide_l2r {
  0%,49% {
    opacity: 0;
  }
	50%,100%{
		opacity: 1;
	}
}

.effect_section.active .slide_l2r::before,
.effect.active.slide_l2r::before{
	content: "";
	position: absolute;
	z-index: 9999;
	height:100%;
	background: #506478;
	animation: slide_l2r_panel 0.8s ease forwards;
}
 
@keyframes slide_l2r_panel {
  0% {
    width:0;
  }
  30%,70%{
    width:100%;
  }
	100%{
		width:0;
		left:auto;
		right:0;
	}
}

.delay_500{
	transition-delay:0.5s !important;
}

.delay_1000{
	transition-delay:1s !important;
}

.delay_1500{
	transition-delay:1.5s !important;
}

.delay_2000{
	transition-delay:2s !important;
}

.delay_2500{
	transition-delay:2.5s !important;
}

.delay_3000{
	transition-delay:3s !important;
}

.delay_3500{
	transition-delay:3.5s !important;
}

.delay_4000{
	transition-delay:4s !important;
}



@media print,
screen and (min-width:481px) {
	html {
		font-size: 0.11364vw;
	}

	.sp,
	.pc {
		display: none;
	}

	.tb {
		display: block;
	}

	.inner {
		padding-right: 60rem;
		padding-left: 60rem;
	}

	.common_padding {
		padding-right: 60rem;
		padding-left: 60rem;
	}
	
	.page_head_img {
	aspect-ratio: 3/2;
}
	
	.page_head_ttl{
		font-size: 48rem;
	}

.page_head_ttl .page_head_ttl_en {
	font-size: 144rem;
	right: 60rem;
	bottom: 20rem;
}
	

	
	.hero_movie video{
		height: auto;
	}
	
	.hero_slogan {
	font-size: 6em;
	right: 60rem;
	bottom: 60rem;
}

.hero_sub_slogan {
	font-size: 40rem;
	top:auto;
	bottom:60rem;
	left: 60rem;
}

.top_news_item a {
	display: flex;
	gap: 40rem;
}
	
	.top_company_info_conts{
  grid-template-columns: 1fr 1fr;
}
	
	.top_company_info_conts .top_company_info_img{
		order:-1;
	}
	
		.top_business_inner {
		grid-template-columns: 1fr 1fr;
	}
	
	.top_recruit_conts {
	grid-template-columns: 1fr 1fr;
}
	
	.top_banner_items{
		display: flex;
		gap: 40rem;
	}
	
	.top_banner_item{
		flex:0 0 auto;
		margin-bottom: 0;
	}
	
	.top_work_items{
  gap: 30rem;
}
	
	.footer_copyright {
	left: 60rem;
}
	
	.page_head_ttl {
}
	
	.section_ttl span {
	font-size: 3em;
}
	
	.sdgs_items{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20rem;
	margin-top: 60rem;
}
	
	.page_head_extra_conts .inner{
	grid-template-columns: 1fr 1fr;
}
	
	.page_child{
	display: flex;
}

.page_child:nth-child(2n) {
	flex-direction: row-reverse;
}

.page_child_summary {
	flex: 0 0 66.667%;
	box-sizing: border-box;
}


.page_child_img {
	flex: 0 0 33.333%;
}

.recruit_jobs_cont dl{
	grid-template-columns: auto 1fr;
}

.recruit_jobs_cont{
	padding:60rem;
}
	
	.form{
	grid-template-columns: auto 1fr;
}
	
	.form .size_s{
	width:25%;
}

.form .size_m{
	width:50%;
}

.form .size_l{
	width:75%;
}

.form .submit-button input{
	width:75%;
}
.dots {
	top:auto;
	right: 30rem;
	bottom: 30rem;
}

.dots li button {
	width: 20px;
	height: 20px;
}
	
	/*--採用情報--*/
	
	.recruit_conts_summary{
	text-align: center;
}
	
	.recruit_point_items{
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.recruit_point_items .item_txt01{
	grid-column: 2 / span 2;
	grid-row: 2 / span 2;
}

.recruit_point_items .item_txt02{
	grid-column: 5 / span 2;
	grid-row: 4 / span 2;
}

.recruit_point_items .item_txt03{
	grid-column: 2 / span 2;
	grid-row: 6 / span 2;
}
	
}

@media print,
screen and (min-width:881px) {
	html {
		font-size: 0.078125vw;
	}
	
	body{
		font-size: 16rem;
	}
	
	body.active {
	height: auto;
}
	

	.sp,
	.tb {
		display: none;
	}

	.pc {
		display: block;
	}
	
		.header_menu {
	height:auto;
		padding-top: 60rem;
		padding-bottom: 120rem;
}
	
	.header_nav_items {
	grid-template-columns: 1fr 1fr 1fr;
		gap: 60rem;
}
	
.hero_slogan {
	font-size: 8em;
}
	
.hero_slogan span {
	margin-bottom: 30rem;
}
	
	.top_news_conts {
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 60rem 120rem;
	}
	
	.top_news_conts .top_news_items{
		grid-row: span 2;
}

	.top_news_summary{
	display: block;
	}


	.top_business_inner {
		grid-template-columns: 1fr 2fr;
	}

	.top_business_items {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	
	.top_business_item{
		grid-column: span 3;
	}
	
	.top_business_item:nth-child(1),
	.top_business_item:nth-child(2),
	.top_business_item:nth-child(3){
		grid-column: span 4;
	}
	
	.top_business_item:nth-child(2n) a{
		background-color: #CED0D3;
	}
	
	.top_business_item:nth-child(2n-1) a{
		background-color: #E5E8EB;
}
	
	.top_business_item_summary{
		padding: 30rem;
	}

	.top_recruit_inner {
		grid-template-columns: 2fr 1fr;
	}
	
		.top_banner_items{
		display: flex;
		gap: 60rem;
	}
	.footer {
	grid-template-columns: 1fr 1fr;
}
	
.footer_nav {
	font-size: 14rem;
	padding-top: 60rem;
	padding-bottom: 60rem;
	gap: 40rem;
}

	.footer_nav_items{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap:20rem 60rem;
	}
	
.footer_nav a {
	color: #ffffff;
}

.footer_nav_item>a {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	position: relative;
	padding-bottom: 10rem;
}

.footer_nav_item>a::after {
	content: "";
	width: 100%;
	height: 4rem;
	background-color: #ffffff;
	position: absolute;
	left: 0;
	bottom: 0;
}
	
.page_head_extra_ttl{
	left:0;
}
	
.work_items {
	grid-template-columns: 1fr 1fr 1fr 1fr ;
}
	
	.recruit_point_items .item_cont h4{
	font-size:28rem;
}

.recruit_point_items .item_cont p{
	font-size: 16rem;
}

	
}

@media print,
screen and (min-width:1281px) {
	html {
		font-size: 6.25%;
	}
}