@charset "utf-8";
/* CSS Document */
/*=====================
header
====================================================*/
#header{
	position: fixed;
	width: 100%;
	background: #fff;
	z-index: 200;
}

.headtop{
	width: 98%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	height: 70px;
	align-items: center;
}
.hlogo{
	height: 60px;
	margin: auto 0;
}
.hlogo img{
	height: 100%;
	object-fit: contain;
}
.h-top-right{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.h-tel{
	position: relative;
	color: #00a99d;
	padding: 0 20px;
	padding-left: 30px;
	font-size: 2rem;
	pointer-events: none;
}
.h-tel::before{
	position: absolute;
	content: '';
	width: 23px;
	height: 45px;
	background: url("../img/tel_icon.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: 6px;
	left: 0;
}
.h-mail{
	padding: .3rem 1.2rem;
	padding-left: 3rem;
	border-radius: 5px;
	margin-left: 20px;
}
.h-mail::before{
	position: absolute;
	content: '';
	width: 23px;
	height: 40px;
	background: url("../img/mail_icon.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	left: 15px;
	
}

.pcnav{
	width: 98%;
	max-width: 1200px;
	margin: 0 auto;
}
.pcnav ul{
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 10px;
}
.pcnav li{
	flex-grow: 1;
	border-left: 1px solid #3B3B3B;
}
.pcnav li:last-child{
	border-right: 1px solid #3b3b3b;
}
.pcnav li a{
	display: block;
	text-align: center;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .2rem;
}
.pcnav li a span{
	display: block;
	font-size: 14px;
	font-family: "DM Serif Display", serif;
	color: #00a99d;
	letter-spacing: .1rem;
}
.pcnav li a:hover,
.pcnav li a:hover span{
	color: #00a99d;
}

@media(max-width:660px){
	.h-tel{
		pointer-events: auto;
	}
}

@media(max-width:760px){
	#header{
		box-shadow: 0 0 3px #aaa;
	}
	.headtop{
		height: 60px;
	}
	.hlogo{
		height: 50px;
	}	
	.h-top-right,
	.pcnav{
		display: none;
	}
}

/*=====================
	mobailnav
====================================================*/
.openbtn{
	position: relative;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color:#00a99d;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

@media(min-width:761px){
	.openbtn{
		display: none;
	}
}

/*navigation*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 99;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -200%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(101, 211, 108, 1));
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーション*/
#g-nav ul {
	margin: 100px auto 15px;
	width: 96%;
	max-width: 500px
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
	border-bottom: 1px dotted #00a99d;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	padding-left: 30px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
	position: relative;
}
#g-nav li a span{
	font-size: 60%;
	margin-left: 10px;
	color: #8A8A8A;
}
#g-nav li a::before{
	position: absolute;
	content: '\f0da';
	font-family: "Font Awesome 6 Free";
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: #00a99d;
}

.mobile-info{
	text-align: center;
}
.mobile-info .btn01{
	width: 90%; 
	max-width: 450px;
	margin-bottom: 10px;
	font-size: 1.2rem;
}
.mobile-info .tel span,
.mobile-info .mail span{
	position: relative;
	padding-left: 2rem;
}
.mobile-info .tel span::before,
.mobile-info .mail span::before{
	position: absolute;
	content: '';
	width: 25px;
	height: 25px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	
}
.mobile-info .tel span::before{
	background: url("../img/tel_icon.svg");
	filter: brightness(0) invert(1);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;	
}
.mobile-info .mail span::before{
	background: url("../img/mail_icon.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;	
}


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

====================================================*/
footer{
	margin-top: 30px;
	padding: clamp(25px, 5vh, 50px);
	border-top: 8px solid #00a99d;
	text-align: center;
	font-size: 16px;
}
.flogo{
	width: 70%;
	max-width: 300px;
	margin:0 auto;
	margin-bottom: 20px;
}
.flogo img{
	width: 100%;
	object-fit: contain;
}

.copy{
	background: #00a99d;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	font-size: 14px;
}


/*pagetop*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#72ae2d;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
	position: relative;
}
#page-top a::before{
	font-family: 'Font Awesome 6 Free';
	font-weight: 600;
	content: '\f106';
	font-size: 40px;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;	
}

#page-top a:hover{
	transform: translateY(-10px);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

@media(max-width:760px){
	#page-top a{
		width: 40px;
		height: 40px;
	}	
	#page-top a::before{
		font-size: 25px;
	}	
}




/*=====================
TOP-slide
====================================================*/
.top-slide{
	position: relative;
}
.topslider {
  position:relative;
  z-index: 1;
  width: 100vw;
  aspect-ratio: 4 / 3;
  max-height: 100vh;
  	
}
/*　背景画像設定　*/

.slider-item01 {
    background:url(../img/slide01.jpg);
}

.slider-item02 {
    background:url(../img/slide02.jpg);
}

.slider-item03 {
    background:url(../img/slide03.jpg);
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  aspect-ratio: 4 / 3;
    max-height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.top-mask{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	top: 0;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
}
.top-mask img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}



/*=====================
	index
====================================================*/
.top-about::before{
	position: absolute;
	content: '';
	width: 50%;
	height: 100%;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
	background: url(../img/about_bg.jpg);
	background-size: cover;
	background-position: left center;
	top: 0;
	right: 0;	
	z-index: -1;
}

.about-txt{
	max-width: 680px;
	padding: .5vw 2vw;
	text-shadow: 1px 1px 0 #fff;
}

@media(max-width:700px){
	.top-about{
		padding-bottom: 18vh;
	}
.top-about::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	clip-path: polygon(0 77%, 100% 77%, 100% 100%, 0 100%);
	background: url(../img/about_bg.jpg);
	background-size: cover;
	background-position: left center;
	top: 0;
	right: 0;	
	z-index: -1;
}	
}

/*pointo*/
.point{
	width: calc(100% / 3 - 5px);
}
.point figure{
	width: 100%;
	aspect-ratio: 16 / 9;
}
.point figure img{
	width: 100%;
	object-fit: cover;
}
.p-txt{
	position: relative;
	padding: 1.3rem 2rem; 
	padding-left: 4rem;
}
.p-txt h3{
	margin-bottom: 10px;
	font-size: clamp(1.375rem, 1.271rem + 0.44vw, 1.6rem);
}

.p-txt::before{
	position: absolute;
	content: '';
	width: 20px;
	height: 95%;
	top: 2.5%;
	left: 2rem;
	background: url("../img/line.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 768px){
.point{
	width: 98%;
}	
}


.btitle{
	font-size: 1.8rem;
	border-bottom: 1px solid #00a99d;
}

/*recruit*/
.bg.recbg{
   background-image: url(../img/t_recruit_bg.jpg);
   background-size: cover;
   background-position: center;	
	z-index: -3;
}
.w-box{
	background: rgba(255,255,255,.7);
	padding: 5vh 2vw;
	z-index: -2;
}

/*=====================
	下層共通
====================================================*/
.kfv{
	background: url("../img/slide03.jpg");
	background-position: center 20%;
	padding-top: 200px;
	z-index: -1;
}
.pagetitle{
	text-align: center;
	color: #fff;
	text-shadow: 0 0 3px #333;
	position: relative;
}

.pagetitle span{
	position: absolute;
	font-size: clamp(65px,6vw,150px);
	color: rgba(214,255,216,.4);
	bottom: -2vh;
	left: 0;
	line-height: 1;
	text-align: center;
	display: block;
	text-shadow: none;
	width: 100%;
    letter-spacing: .4rem;
	z-index: -1;
}

@media (max-width: 760px){
	.kfv{
		padding-top: 100px;
		padding-bottom: 50px;

	}
}











/*=====================
	RECRUIT
====================================================*/
.inbox {
  max-width: 1080px;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .inbox {
    max-width: auto;
    padding: 0 5%;
  }
}
@media(min-width: 768px) {
.recruit_sec {
  padding: 40px;
  position: relative;
  z-index: 1;
  background: url("../img/recruit02.jpg") no-repeat center/cover;
  min-height: 540px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.recruit_sec + .recruit_sec {
  margin-top: 80px;
}

.recruit_sec:nth-child(2) {
  background: url("../img/recruit01.jpg") no-repeat right/cover;
}

.recruit_sec:nth-child(2n) {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.recruit_sec:nth-child(2n) .recruit_sec_text {
  margin: 0 0 0 -80px;
}

.recruit_sec_text {
  margin-right: -80px;
  background: #FFF;
  padding: 32px;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 640px;
}

.recruit_sec .title01 {
  font-size: 28px;
	color: #00a99d;
}
}
@media(max-width: 767px) {
	.recruit_sec {
	  padding: 30vmin 5% 5%;
	  position: relative;
	  z-index: 1;
	  background: url("../img/recruit02_sp.jpg") no-repeat center top/contain;
	}

	.recruit_sec + .recruit_sec {
	  margin-top: 80px;
	}

	.recruit_sec:nth-child(2) {
	  background-image: url("../img/recruit01_sp.jpg");
	}

	.recruit_sec:nth-child(2n) {
	  -webkit-box-pack: start;
	  -webkit-justify-content: flex-start;
	  -ms-flex-pack: start;
	  justify-content: flex-start;
	}

	.recruit_sec_text {
	  background: #FFF;
	  padding: 32px;
	  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.recruit_sec .title01 {
	  font-size:clamp(1.3rem, 0.809rem + 2.07vw, 1.8rem);
	  color: #00a99d;
	}	
}



.bg-light .infotable tr:nth-child(odd) {
    background-color:  #fff;    /* 背景色指定 */
}

.bg-light .infotable th{
	width: 230px;
}





/*=====================
	COMPANY
====================================================*/
.infotable{
	max-width: 1080px;
	margin: 50px auto ;
}
.infotable tr:nth-child(odd) {
    background-color:  #ddd;    /* 背景色指定 */
}
.infotable th{
	text-align: end;
	font-weight: 400;
	width:130px;
}
.infotable th,.infotable td {
    padding: .7rem 1rem ;          /* 余白指定 */
}
.map {
	width: 100%;
	height: 45vh;
	border: 3px solid #00a99d;
	border-radius: 10px;
}

.map iframe{
	object-fit: cover;
	border-radius: 10px;
}

@media(max-width:499px){

	.infotable th,.infotable td {
		display: block;
		width: 100%;
	}	
	.infotable th{
		padding-bottom: 0;
		text-align: left;
		font-weight: 600;
	}	
	.infotable td {
		padding-top: .3rem;
		padding-left: 2rem;
	}
}









/*=====================
	CONTACT
====================================================*/

/*メールフォーム*/
.mailform{
	margin: 0 auto;
	max-width: 960px;
}
.mailform .row{
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
}
.mailform .row:not(.last){
	border-bottom: 1px dotted #005b97;
}
.mailform .row div:nth-child(1){
	width: 28%;
	letter-spacing: 0.08em;
	font-size: 0.9rem;
}
.mailform .row div:nth-child(2){
	width: 70%;
	line-height: 1.5;
}
.mailform .row span{
	padding: 5px;
	margin-right: 5px;
	font-size: 11px;
	border-radius: 2px;
	vertical-align: middle;
}
.mailform .row span.hissu{
	color: #fff;
	background: #00a99d;
}
.mailform .row span.ninni{
	background: #f9f5f4;
}
.mailform .row small{
	display: block;
	margin-top: 3px;
}
.mailform .box, .mailform textarea{
	border: 1px solid #ddd;
  	padding: 5px;
  	width: 100% !important;
  	border-radius: 0;
	-webkit-appearance: none;
	margin-bottom: 5px;
	background: #fff;
}
.mailform .box.mini{
	width: 120px !important;
}
.mailform .postal_btn{
	padding: 2px 10px;
	background: #f4f4f4;
	border-radius: 2px;
	margin-left: 5px;
	border: 1px solid #ccc;
}
.mailform .postal_btn:hover{
	opacity: 0.7;
}
.mailform button{
	position: relative;
	display: inline-block;
	padding: .5rem 1rem;
	background: #00a99d;
	color: #fff;
	transition: all 0.4s;
	text-align: center;
	vertical-align: middle;	
	letter-spacing: 0.1em;
	box-shadow: 2px 2px 0 #006837;
	border-radius: 5px;
	width: 90%;
	max-width: 300px;
}
.mailform button:hover{
	transform: translate(2px,2px);
	box-shadow: 0px 0px 0 #006837;
}
.mailform button::before{
	font-family: "Font Awesome 6 Free";
	content: "\f0e0";
	font-weight: 700;
	margin-right: 10px;
}

@media (max-width: 750px){
	.mailform .row{
		padding: 20px 0;
		flex-direction: column;
	}
	.mailform .row div:nth-child(1){
		width: 100%;
		margin-bottom: 20px;
	}
	.mailform .row div:nth-child(2){
		width: 100%;
	}
}

/*チェックボックス*/
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label{
    display: block;
	padding-left: 20px;
	position: relative;
	margin-bottom: 15px;
	cursor: pointer;
	width: -moz-fit-content;
	width: fit-content;
}
input[type=checkbox] + label::before{
    background: #fff;
    border: 1px solid #999;
    content: '';
    display: block;
	position: absolute;
	top: 55%;
	transform: translate(0,-50%);
  	left: 0;
    width: 15px;
  	height: 15px;
	border-radius: 3px;
}
input[type=checkbox] + label::after{
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    content: '';
    display: block;
    height: 15px;
    left: 8px;
    opacity: 0;
    position: absolute;
    top: 55%;
	margin-top: -10px;
    width: 5px;
	transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
	transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
input[type=checkbox]:checked + label::after{
    opacity: 1;
	transform: rotate(45deg) scale3d(1,1,1);
}
@media (max-width: 750px){
	input[type=checkbox] + label{
		display: block;
	}
}

/*ラジオボタン*/
input[type=radio]{
	display: none;
}
input[type=radio] + label{
    display: inline-block;
	padding-left: 20px;
	position:relative;
	margin-right: 20px;
	margin-bottom: 10px;
	cursor: pointer;
}
input[type=radio] + label::before {
	content: "";
	display: block;
	position: absolute;
	top: 55%;
	transform: translate(0,-50%);
  	left: 0;
    width: 15px;
  	height: 15px;
	background: #f4f4f4;
	border-radius: 100%;
	border: 1px solid #b4b4b4;
	cursor: pointer;
	text-align: center;
	transition: all 250ms ease;
}
input[type=radio]:checked + label::before {
	background-color: #000;
	box-shadow: inset 0 0 0 2px #f4f4f4;
}
input[type=radio]:focus + label::before{
	outline: none;
	border-color: #000;
}
input[type=radio]:disabled + label::before {
	box-shadow: inset 0 0 0 2px #f4f4f4;
	border-color: #b4b4b4;
	background: #b4b4b4;
}
input[type=radio] + label:empty::before{
	margin-right: 0;
}
@media (max-width: 750px){
	input[type=radio] + label{
		display: block;
	}
}


.contact_info ul li{
	margin-bottom: 5px;
	text-align: center;
	font-size: 0.9rem;
}

/*プライバシーポリシー*/
.privacy{
}
.privacy li{
}
.privacy li .privacy_wrap{
	
}
.privacy li .privacy_wrap .privacy_subject{
	text-align: center;
	cursor: pointer;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 auto;
	text-decoration: underline;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.privacy li .privacy_wrap .privacy_subject:hover{
	text-decoration: none;
}
.privacy li .privacy_wrap .privacy_subject.area_close{
}

/*アコーディオンで現れるエリア*/
.privacy li .privacy_wrap .privacy_box{
	position: relative;
	display: none;/*はじめは非表示*/
	padding: 20px;
	background-color: #fff;
	margin-top: 5px;
}

.privacy_flame{
	height: 250px;
	overflow-y: scroll;
}
.privacy_flame p{
	padding: 10px;
	font-size: 0.8rem;
}
.privacy_flame p span{
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
}
.privacy_flame p span::before{
	content: "■";
	display: inline-block;
	font-size: 0.6rem;
	margin-right: 0.5em;
	transform: translateY(-2.5px);
}
.privacy_flame ul li{
	font-size: 0.8rem;
}

/*スクロールバー*/
.privacy_flame::-webkit-scrollbar{
    overflow: hidden;
    width: 1px;
    background: #fafafa;
}
.privacy_flame::-webkit-scrollbar-button {
    display: none;
}
.privacy_flame::-webkit-scrollbar-thumb, .privacy_flame::-webkit-scrollbar-corner {
    background: #433c2e;
}