@charset "utf-8";
/* CSS Document */
/*====================
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
====================*/


/*---page-------------------------------------------------------*/

/*****固定ページ共通*****/
.page_section{
	margin-bottom: 12rem;
}
@media screen and (max-width:799px) {
	.page section{
		margin: 12rem 0 0 0;
	}
}

/*** ページ見出し ***/
/* h1 */
.page_header{
	position: relative;
	padding: 10rem 0 2rem;
}
.page_header::before{
	content: '';
	position: absolute;
	width: 50rem;
	height: 36rem;
	top: -4rem;
	left: 0;
	background-image: url('../img/dotted.svg');
	z-index: -1;
}
.page_header .img_wrap{
	width: 100%;
}
.page_header .img_wrap img{
	width: 100%;
	object-fit: cover;
}
#company .page_header .img_wrap img{
	object-position: 70% 50%;
}
.page_header h1{
	position: relative;
	width: 100%;
}
.page_header.noimg_header{
	max-width: 1200px;
}
.page_header.noimg_header h1{
	margin-top: 8vw;
}
@media screen and (min-width:1025px) { 
	.page_header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rem 0 2rem;
		max-width: 1536px;
		width: 90%;
		margin: 0 auto;
	}
	.page_header::before{
		left: -10%;
	}
	.page_header h1{
		max-width: 560px;
	}
	.page_header .img_wrap img{
		border-radius: 1000px;
	}
}
@media screen and (max-width:1024px){
	.page_header h1{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 4rem;
	}
	.page_header .img_wrap img{
		height: 60vh;
		border-radius: 0;
	}
}

/* dl */
#outline dl, #recruit_guideline dl {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	margin: 1rem auto;
}
#outline dt, #outline dd, #recruit_guideline dt, #recruit_guideline dd {
	padding: 20px 0;
	border-bottom: 1px solid #00A145;
}
#outline dt, #recruit_guideline dt {
	flex-basis: 28%;
	font-weight: 500;
}
#outline dd, #recruit_guideline dd {
	flex-basis: 72%;
	margin: 0;
}
@media screen and (min-width: 900px) {
	#outline dl dt:first-of-type,#outline dl dd:first-of-type{
		padding-top: 0;
	}
}
@media screen and (max-width: 899px) {
	#outline dl dd{
		padding-top: 0;
	}
}
@media screen and (max-width: 599px) {
	#outline dl, #recruit_guideline dl {
	  flex-flow: column;
	}
	#outline dt, #recruit_guideline dt {
	  border-bottom: none;
	  font-weight: bold;
	  padding-bottom: 0;
	}
}

/*** activities ***/
#activities_intro{
	color: #fefefe;
	padding: 8rem 0;
	margin-top: 28rem;
}
#activities_intro::after{
	content: '';
    position: absolute;
    width: 100%;
    right: 0;
    height: 100%;
    background-color: #00A145;
    margin-left: auto;
	top: 0;
	z-index: -1;
}
#activities_intro .wrap{
	max-width: 1200px;
}
#activities_intro h2{
	margin-bottom: 4rem;
}
#activities_intro img{
	max-width: 300px;
	width: 100%;
	height: auto;
	object-fit: cover;
}
#activities_intro .img_left{
	position: absolute;
	top: -20rem;
	left: -6rem;
	z-index: -1;
}
#activities_intro .img_right{
	position: relative;
	left: 14rem;
}
#activities_list h2{
	margin-bottom: 4rem;
}
#activities_list h2 .en{
	line-height: 1;
}
#activities_list .text_img_list{
	border-radius: 6rem;
	margin-bottom: 8rem;
	position: relative;
}
#activities_philosophy .bg_cr{
	padding: 4rem 4.8rem;
	border-radius: 4rem;
}
.essential{
	margin-bottom: 10rem;
}
.essential .grid_area{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-template-rows: 1fr;
	grid-column-gap: 40px;
	grid-row-gap:40px;
}
.brighten .grid_area{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	grid-template-rows: 1fr;
	grid-column-gap: 40px;
	grid-row-gap:40px;
}
.brighten .area_top{
	margin-bottom: 4rem;
}
@media screen and (min-width: 1025px) {
	#activities_intro::after{
		content: '';
		position: absolute;
		width: 95%;
		right: 5%;
		height: 100%;
		background-color: #00A145;
		border-radius: 0 80px 80px 0;
		margin-left: auto;
		top: 0;
		z-index: -1;
	}
	#activities_intro .text_area{
		max-width: 400px;
	}
	#activities_list .text_img_list{
		background-color: #FFFFEC;
		padding: 6rem 8rem;
	}
}
@media screen and (max-width: 1024px) {
	#activities_intro h2{
		margin-top: 4rem;
		margin-bottom: 2.8rem;
	}
	#activities_list h2{
		margin-bottom: 2rem;
	}
}
@media screen and (max-width: 1024px) and (min-width: 600px){
	#activities_intro .text_area{
		margin-left: 28vw;
	}
}

/*** about ***/
#greeting .flex_box .title_area{
	width: 100%;
}
#greeting .text_head{
	font-size: clamp(1.8rem,2.2vw,2.8rem);
}
#greeting .right{
	margin-top: 2rem;
}
#values h2 .jp{
	margin-bottom: 2rem;
	font-size: clamp(1.8rem,2.2vw,2rem);
}
#values .item_right  img{
	border-radius: 0;
}
#outline h3{
	font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}
#outline_egao{
	margin-bottom: 4rem;
}
#access .text_box{
	margin-top: .8rem;
	margin-bottom: 2rem;
}
#access .wrap{
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}
.map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75%; /* 比率を4:3に固定 */
	margin-bottom: 2rem;
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1025px) {
	#values .item_right{
		margin-left: 4rem;
	}
}
@media screen and (max-width:1024px) {
	#greeting .text_head{
		margin-bottom: 2.8rem;
	}
	#values .item_right{
		margin-top: 4rem;
	}
}

/***** contact *****/
.contact_intro{
	max-width: 1200px;
	background-color: #FFFFEC;
	padding: 4rem 1.6rem;
	margin-bottom: 4rem;
	text-align: center;
}
.container .contact_intro a{
	color: #00A145;;
	text-decoration: none;
}
.tel_number{
	font-size: 3.6rem;
	margin-left: 0.4rem;
}
.wpcf7-turnstile{
	text-align: center;
}

/*** Contact Form7 ***/
.contact7 {
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 6rem;
}
.contact7 p{
	margin-bottom: 0;
}
.contact7 dl{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: row wrap;
    width: 100%;
	border-top: 1px solid #ddd;
}
.contact7 dl.last{
	border-bottom: 1px solid #ddd;
}
.contact7 dl dt {
    display: flex;
    justify-content: space-between;
	flex-basis: 40%;
	padding: 20px;
	font-weight: 500;
}
.contact7 dl dd {
	width: 630px;
	flex-basis: 60%;
	margin: 0;
    padding: 20px;
}
.contact7 dl dd select,.contact7 dl dd textarea,.contact7 dl dd input{
	width: 100%;
	height: 100%;
	padding: 2rem 1.6rem;
	background: #fefefe;
	border: 1px solid #eee;
}
 /* 必須マーク */
.contact7 .must {
	background: #F1686D;
}
 /* 任意マーク */
.contact7 .optional {
	background: #999;
}
.contact7 .must,.contact7 .optional {
	color: #FFF;
	font-size: 10px;
	margin-left: 10px;
	padding: 5px 10px;
	letter-spacing: 2px;
}
.check{
	display: block;
	margin: 6rem auto 4rem;
}
.btn_contact7 input {
	transition: all .3s;
	width: 100%;
	max-width: 600px;
	display: block;
	margin: 0 auto;
	padding: 2rem 0;
	background:#00A145;
	color: #FFF;
	font-size: 1.1em;
	text-align: center;
}
.btn_contact7 input:hover{
	background-color: #80E64B;
}
.contractor_form .contact7 dl dd select,.contractor_form .contact7 dl dd textarea,.contractor_form .contact7 dl dd input{
	background: #fefefe;
	border: 2px solid #E1E1E1;
}
/* CF7 特定のチェックボックスとラジオボタンを縦並びに */
.checkbox span.wpcf7-list-item {
	display: block;
	width: fit-content;
}
span.wpcf7-list-item {
  position: relative;
	margin-left: .4rem;
}
.wpcf7-list-item-label {
  cursor: pointer; /*labelにhoverした時にカーソルを表示させる*/
}
label input[type="checkbox"] {
  opacity: 0; /*デフォルトのチェックボックスを見えなくする*/
  position: absolute;
	cursor: pointer;
}
.wpcf7-list-item-label::before {
  /*チェックボックスのデザイン*/
  border: 1px solid #bbb;
  content: "";
  display: inline-block;
  height: 15px;
  margin-right: 10px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 15px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  /*チェックアイコン*/
  background: url('../img/ok.svg') no-repeat center;
  background-size: contain;
  background-color: #00A145;;
  content: "";
  display: block;
  height: 15px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 15px;
}

@media screen and (max-width: 979px) {
	.contact7 dl{
		display: block;
	}
.contact7 dl dt {
	justify-content: flex-start;
	flex-basis: auto;
	padding-bottom: 0;
	}
.contact7 dl dd {
	flex-basis: auto;
	width: 100%;
	padding-left:0; 
	padding-right:0; 
	} 
.btn_contact7 input {
	width: 100%;
	color: #FFF;
	font-size: 1.1em;
}
.btn_contact7 input:hover {
	color: #FFF;
	}
}

/*** privacy-policy ***/
#privacy-policy_content p a{
	color: #00A145;
	text-decoration: underline;
}
#privacy-policy_content p a:hover{
	text-decoration: none;
}

/*** NotFound ***/
.notfound section{
	margin-top: 4rem;
}