@charset "utf-8";


*, *::before, *::after {
  box-sizing: border-box;
}

/*cssのリセット*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
}
html{
	margin-top: 0!important;
}
 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
     display: block;
}
 
ul,ol {
    list-style: none;
}
 
blockquote,
q {
    quotes: none;
}
 
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
 
a{
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    transition: all .5s;
}

ins {
    text-decoration: none;
    color: #000;
    background-color: #ff9;
}
 
mark {
    font-weight: bold;
    font-style: italic;
    color: #000;
    background-color: #ff9;
}
 

abbr[title],
dfn[title] {
    cursor: help;
    border-bottom: 1px dotted;
}
 
table {
    border-spacing: 0;
    border-collapse: collapse;
}
 
hr {
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #ccc;
}
input[type="submit"],input[type="text"],input[type="email"],input[type="tel"],input[type="button"], input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
  }
  button{
    outline: none;
    padding: 0;
    appearance: none;
    background-color: transparent;
    border: none;

  }
html {
    font-size: 62.5%;
}
 
body {
   font-family: "Noto Sans JP", sans-serif;
   margin: 0;
   padding: 0;
   font-size:1.6rem;/* 16px*/
   color: #444444;
   line-height: 1.5;
}

img{
    width: 100%;
    image-rendering: -webkit-optimize-contrast;
    vertical-align: bottom;
}

.inner{
    width: 90%;
    max-width: 1120px;
    margin: 0 auto;
}
article{
/*     overflow: hidden; */
}
@media screen and (max-width: 768px) {

	.inner{
	    width: 90%;
	}
}

/*-----------------------
         header
-------------------------*/
header {
    width: 100%;
    height: 116px;
    position: fixed;
    top: 0;
    z-index: 999999;
}
header.change-color {
    background-color: rgba(255,255,255,.85);
    transition: all .3s;
}
header.change-color .header_nav  ul > li a{
    color: #474747;
}
.header_inner{
	display: flex;
	justify-content: space-between;
	align-items:center;
	max-width: 1216px;
	margin: 0 auto;
	width: 95%;
	height: 100%;
}
.header_logo{
	display: flex;
	align-items:center;
	column-gap: 25px;
	width: 36%;
}
.header_logo h1{
	display: block;
	width: 100%;
	max-width: 211px;
	line-height: 1;
}
.header_logo a{
	display: block;
}

.r_cta{
	width: 30%;
	text-align: center;
	max-width: 130px;
	line-height: 36px;
	height: 36px;
	background: linear-gradient(180deg,rgba(41, 188, 41, 1) 0%, rgba(76, 153, 76, 1) 100%);
	font-size: clamp(15px, 1.39vw, 20px);
	font-weight: 400;
	letter-spacing: .04em;
	color: #fff;
	border-radius: 2px;
}

.header_nav {
    width: 60%;
    max-width: 565px;
}

.header_nav > ul{
	display: flex;
	column-gap: 15px;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}
.header_nav  ul > li a{
	/* font-family: "M PLUS 1", sans-serif; */
	display: block;
	font-weight: 500;
	font-size: clamp(14px, 1.11111vw, 16px);
	color: #474747;
	text-align: center;
	letter-spacing: .06em;
	position: relative;
}
 .page_header .header_nav  ul > li a{
	 color: #fff;
 }
 
.sp_menu,.r_cta_sp{
	display: none;
}

@media screen and (max-width: 800px) {
    
	
	.header_logo {
	    width: 69%;
	    z-index: 999;
	    column-gap: 5px;
	}
	
    header{
		height: 50px;
	}
    .header_logo h1 {
	    display: block;
	    width: 100%;
	    max-width: 145px;
	    line-height: 1;
	}
    .header_nav {
    	display: none;
    }
    .r_cta_pc{
		display: none !important;
	}
    .sp_menu,.r_cta_sp{
        display: block;
    }
	.r_cta{
		width: 100%;
		text-align: center;
		max-width: 250px;
		line-height: 44px;
		height: 46px;
		margin: 50px auto 0;
		background: linear-gradient(180deg,rgba(41, 188, 41, 1) 0%, rgba(76, 153, 76, 1) 100%);
		font-size: clamp(16px, 2.072vw, 18px);
		font-weight: 400;
		letter-spacing: .04em;
		color: #fff;
		border-radius: 2px;
	}
    .nav-menu {
        position: fixed;
        overflow-y: scroll;
        z-index: 99;
        width: 100%;
        top: 0;
        height: 110vh;
        display: none;
        background-color: #fff;
    }

	.g-menu{
		width: 80%;
		margin: 0 auto;
		margin-top: 110px;
	}
 
    .g-menu .g-menu_nav li > a{
        display: block;
        font-size: clamp(16px, 2.072vw, 18px);
        font-weight: 600;
        color: #474747;
        margin-bottom: 20px;
        position: relative;
        border-bottom: 1px solid #C9C9C9;
        padding-bottom: 15px;
    }
	
	.g-menu .g-menu_nav > li:nth-of-type(3){
		font-size: clamp(16px, 2.072vw, 18px);
        font-weight: bold;
        color: #4B544A;
	}
	.g-menu .g-menu_nav > li:nth-of-type(2) ul{
		margin: 10px 0 25px;
	}
	.g-menu .g-menu_nav > li:nth-of-type(2) ul li a{
		font-size: 14px;
		margin-bottom: 0;
		padding-bottom: 10px;
		padding-right: 0;
	}
	.g-menu .drop-menu-item {
	    padding: 8px 0 10px 10px;
	}
	.g-menu .h_cta {
	    background-color: #AFC75C;
	    border-radius: 10px;
	    padding: 20px 10px 25px 10px;
	    text-align: center;
	    width: 100%;
	    max-width: 300px;
	    margin: 60px auto 0;
	}
	.g-menu .h_cta a{
		color: #fff;
		font-size: clamp(18px, 1.67vw, 24px);
		font-weight: bold;
		display:block;
	}
}



@media screen and (max-width: 800px) {
/* hamburger */
    .toggle {
        position: fixed;
        right: 15px;
        top: 10px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        z-index: 999;
        display: block;
    }

   
        
    .toggle span {
        display: block;
        position: absolute;
        width: 30px;
        border-bottom: solid 2px  #000000;
        -webkit-transition: .35s ease-in-out;
        -o-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 50%;
        transform: translateX(-50%);
    }

    .toggle span:nth-child(1) {
        top: 9.3px;
    }
    .toggle span:nth-child(2) {
        top: 16px;
    }
    .toggle span:nth-child(3) {
        top: 23px;
    }
   
    .toggle.active span:nth-child(1) {
        top: 10%;
        left: 45%;
        -webkit-transform: rotate(-45deg) translate(-50%,-50%);
        -ms-transform: rotate(-45deg) translate(-50%,-50%);
        transform: rotate(-45deg) translate(-50%,-50%);
        border-bottom: solid 2px  #000000;
    }
    .toggle.active span:nth-child(2),
    .toggle.active span:nth-child(3) {
        top: 72%;
        left: 41%;
        -webkit-transform: rotate(45deg) translate(-50%,-50%);
        -ms-transform: rotate(45deg) translate(-50%,-50%);
        transform: rotate(45deg) translate(-50%,-50%);
        border-bottom: solid 2px  #000000;
    }
}

.sec_ttl h2 {
    font-size: clamp(18px, 1.39vw, 20px);
    font-weight: 500;
    color: #000000;
    margin-top: 16px;
    letter-spacing: .1em;
}
.sec_ttl p{
	font-family: "Noto Serif JP", serif;
	font-size: clamp(40px, 5.56vw, 80px);
	color: rgba(143, 143, 143, .4);
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1;
	margin-left: -7px;
}

@media screen and (max-width: 768px) {

	
}

.sp_br,.sp_img{
    display: none;
}

@media screen and (max-width: 768px) {

    .sp_br,.sp_img{
        display: block;
    }
    .pc_br,.pc_img{
        display: none;
    }
}
.btn{
	display: block;
	width: 90%;
	max-width: 200px;
	margin: 0 auto;
	border-radius: 100vw;
	text-align: center;
	color: #fff;
	background-color: #E07739;
	font-size:16px;
	font-weight: 500;
	padding: 18px 0;
	cursor: pointer;
	position: relative;
}
.btn::before{
    content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    right: 15px;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 6px solid transparent;
    border-left: 9px solid #fff;   /* 好みで色を変えてください */  
}
@media screen and (max-width: 768px) {
	
	.btn{
		width: 90%;
		max-width: 230px;
		font-size:16px;
		font-weight: 500;
		padding: 10px 0;
	}
	.btn img{
		width: 16%;
		max-width: 25px;
	}
}

/*-----------------------
         top
-------------------------*/

.fv_txtbox{
	position: relative;
}


.fv_txt{
	position: absolute;
	letter-spacing: .05em;
	top: 27%;
	left: 51.1%;
	width: 85%;
	max-width: 1216px;
	transform: translate(-50%, -50%);
}

.fv_txt p{
	font-family: "Noto Serif JP", serif;
	font-size: clamp(26px, 2.22222vw, 32px);
	line-height: 2.06;
	font-weight: 600;
	letter-spacing: .1em;
	color: #364B34;
	text-shadow: 0 0 9px rgba(255,255,255,.85);
	display: inline-block;
	background-image: url(../img/bg_03.png);
	background-size: cover;
	background-position: left;
	position: relative;
}
.fv_txt p:before{
  content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(35px);
  position: absolute;
  top: -5px;
  left: -31px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}
.fv_txt h1{
	font-size: clamp(38px, 4.45vw, 64px);
	font-weight: bold;
	color: #81562A;
	text-shadow: 0 4px 4px rgba(0,0,0,.25);
}





@media screen and (max-width: 768px) {

	
	.fv_txt{
		position: absolute;
		letter-spacing: .05em;
		top: 40%;
		left: 48.1%;
		width: 85%;
		max-width: 1216px;
		transform: translate(-50%, -50%);
	}
	.fv_txt p {
	    font-size: clamp(17px, 2.22222vw, 26px);
		background-position: top;
	    line-height: 1.7;
	}
}


/*-----------------------
         jobs
-------------------------*/

#jobs{
	background-color: #F0F5EF;
	padding: 72px 0 94px;
	position: relative;
}
#jobs .inner{
	max-width: 1232px;
}
#jobs .sec_ttl{
	max-width: 1120px;
	margin: 0 auto;
}
.jobs_col > p{
	max-width: 1120px;
	margin: 0 auto;
	color: #4C994C;
	font-size: clamp(15px, 1.666666vw, 24px);
	margin-top: 30px;
	line-height: 1.6;
	font-weight: bold;
    font-family: "Noto Serif JP", serif;
	letter-spacing: .06em;
}

.jobs_col_area{
	margin-top:48px; 
	display: flex;
	justify-content: center;
	column-gap: 24px;
}
.jobs_col_area ul{
	width: 88%;
	max-width:1120px;
	display: flex;
	justify-content: space-between;
}
.jobs_col_area ul li{
	width: 32%;
	max-width: 344px;
}
.jobs_col_area ul li h3{
	font-weight: 600;
	color: #4C994C;
	letter-spacing: .08em;
	margin-top: 33px;
	font-size: clamp(16px, 1.39vw, 20px);
}
.jobs_col_area ul li p{
	font-weight: 400;
	letter-spacing: .1em;
	margin-top: 18px;
	font-size: 14px;
	line-height: 2;
}
.tate_txt{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	letter-spacing: .1em;
	font-weight: 600;
	position: relative;
	z-index: 0;
}
.tate_txt p{
	background-color: #F0F5EF;
	display: inline-block;
	width: fit-content;
	padding-bottom: 20px;
}
.tate_txt:after{
	content: '';
	display: inline-block;
	width: 1px;
	height: 90%;
	background-color: #BABABA;
	position: absolute;
	top: 0;
	left: 43%;
	transform:translateX(-50%);
	z-index: -1;
}
.before_txt p{
	color: rgba(153, 153, 153, .4);
	font-size: clamp(16px, 1.39vw, 20px);
   
}
.after_txt p{
	color: rgba(180, 218, 180, .5);
	font-size: clamp(16px, 3.4vw, 48px);
}
@media screen and (max-width: 768px) {

	.jobs_col_area {
	    margin-top: 48px;
	    column-gap: 10px;
	}
	
	.jobs_col_area ul{
		width: 100%;
		max-width:1120px;
		flex-direction: column;
		align-items: center;
		row-gap: 40px;
	}
	.jobs_col_area ul li {
	    width: 100%;
	    max-width: 344px;
	}
	.jobs_col_area ul li h3 {
	    margin-top: 15px;
	}
	.jobs_col_area ul li p {
	    margin-top: 10px;
	    line-height: 1.8;
	}
	.after_txt{
		/* height: 100%; */
		display: flex;
		justify-content: flex-end;
	}
	.after_txt p{
		padding-bottom: 0;
		padding-top: 20px;
		z-index: 1;
	}
	.after_txt:after {
	    content: '';
	    display: inline-block;
	    width: 1px;
	    height: 100%;
	    background-color: #BABABA;
	    position: absolute;
	    bottom: 0;
	    left: 43%;
	    transform: translateX(-50%);
	    z-index: 0;
	}
}

/*-----------------------
         works
-------------------------*/
#works{
	padding: 80px 0 53px;
}

.works_col > p{
	margin-top: 32px;
	font-size: clamp(15px, 1.666666vw, 24px);
	line-height: 1.6;
	font-weight: bold;
    font-family: "Noto Serif JP", serif;
	letter-spacing: .06em;
	color: #4C994C;
}
.works_col ul{
	margin: 0 auto;
	margin-top: 40px;
	max-width: 1120px;
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
}
.works_col ul li{
	width: 49%;
	max-width: 540px;
}
.works_col ul li h3{
	font-weight: 600;
	color: #4C994C;
	letter-spacing: .08em;
	margin-top: 40px;
	font-size: clamp(18px, 1.666666vw, 24px);
}
.works_col ul li p{
	font-weight: 500;
	letter-spacing: .06em;
	margin-top: 24px;
	font-size: clamp(14px, 1.67vw, 18px);
	line-height: 1.77;
}
.works_col2{
	background-color: #F0F5EF; 
	border-radius: 8px;
	margin-top: 64px;
	padding-top: 73px;
	padding-bottom: 66px;
	text-align: center;
}
.works_col2 img{
	width: 90%;
	max-width: 822px;
	margin: 0 auto;
	margin-top: 40px;
}
.works_col2 p{
	font-size: clamp(14px, 1.39vw, 20px);
	line-height: 2;
	width: 90%;
	max-width: 785px;
	margin: 0 auto;
	text-align:left;
}

@media screen and (max-width: 768px) {

	.works_col ul {
	    margin: 0 auto;
	    margin-top: 40px;
	    max-width: 1120px;
	    flex-direction: column;
		align-items: center;
		row-gap: 60px;
	}
	.works_col ul li{
		width: 95%;
		max-width: 450px;
	}
	.works_col ul li h3 {
	    margin-top: 20px;
	}
	.works_col ul li p {
	    margin-top: 10px;
	}
	.works_col2 p span{
		display:none;
	}
	.works_col2 {
	    margin-top: 30px;
	    padding-top: 30px;
	    padding-bottom: 30px;
	}
	.works_col2 img {
	    width: 90%;
	    max-width: 550px;
	    margin: 0 auto;
	    margin-top: 30px;
	}
}
/*-----------------------
         message
-------------------------*/
#message {
	padding: 74px 0 76px;
	background-color: #F7F7F7;
}
#message .inner{
	max-width: 1117px;
}
.message_col{
	max-width: 1052px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 20px;
	position: relative;
}
.message_col .sec_ttl p{
	position: absolute;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	font-size: clamp(40px, 4.999999vw, 72px);
	font-weight: bold;
	top: 22px;
}
.message_img{
	width: 37%;
	max-width: 400px;
}
.message_txt{
	width: 55%;
	max-width: 560px;
}
.message_txt h2{
    margin-bottom: 32px;
    font-size: clamp(19px, 1.666666vw, 24px);
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: .06em;
    color: #4C994C;
}
.message_txt p {
    font-weight: 500;
    letter-spacing: .06em;
    margin-bottom: 35px;
    font-size: clamp(14px, 1.11111vw, 16px);
    line-height: 2;
}
.message_txt a{
	display: block;
	background-color: #4C994C;
	color: #fff;
	margin: 80px 0 0 auto;
	padding: 16px 0;
	width: 90%;
	max-width: 340px;
	text-align: center;
	font-size: clamp(14px, 1.11111vw, 16px);
	font-weight: 600;
	padding-right: 20px;
	letter-spacing: .04em;
	border-radius: 40px;
	position: relative;
}
.message_txt a:after{
	content: '';
	display: inline-block;
	width: 20%;
	height: 1px;
	background-color: #fff;
	position: absolute;
	right: 0;
	top: 50%;
}
#message .sp_ttl{
	display: none;
}
@media screen and (max-width: 768px) {

	#message {
	    padding: 50px 0 ;
	}
	#message .sp_ttl{
		display: block;
		width: 100%;
	}
	#message .pc_ttl{
		display: none;
	}
	.message_col {
	    max-width: 550px;
	    margin: 0 auto;
	    flex-direction: column;
	    row-gap: 30px;
	}
	.message_col .sec_ttl p {
	    position: static;
	    writing-mode: rl-tb;
	    font-size: clamp(40px, 4.999999vw, 72px);
	    font-weight: bold;
	    margin-bottom: 20px;
	}
	.message_img {
	    width: 80%;
	    max-width: 350px;
	}
	.message_txt {
	    width: 100%;
	    max-width: 550px;
	}
	.message_txt p {
	    letter-spacing: .05em;
	    margin-bottom: 15px;
	}
	.message_txt a {
	    margin: 50px auto 0 auto;
	    padding: 10px 0;
	    width: 90%;
	    max-width: 250px;
	}
}


/*-----------------------
         interview
-------------------------*/
#interview{
	padding: 64px 0 75px;
	background-color: #F0F5EF;
}
#interview .inner{
	max-width: 1136px;
}
.interview_col > p {
	text-align: center;
	margin-top: 24px;
	font-size: clamp(19px, 1.666666vw, 24px);
	line-height: 1.9;
	font-weight: bold;
    font-family: "Noto Serif JP", serif;
	letter-spacing: .06em;
	color: #4C994C;
}
.interview_col ul{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 50px;
}
.interview_col ul li{
	height: 450px;
	width: 24%;
	max-width: 265px;
	background-color: #fff;
	padding-top: 8px;
	padding-bottom: 15px;
	position: relative;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(58, 58, 58, .25);
	display: flex;
	flex-direction: column;
}
.interview_img{
	margin: 0 auto;
	width: 93.6%;
	border-radius: 4px;
}
.interview_img img{
	border-radius: 4px;
	height: auto;
}
.num{
	box-shadow: 0 2px 12px rgba(58, 58, 58, .25);
	width: 50%;
	max-width: 87px;
	background-color: #4C994C;
	color: #fff;
	position: absolute;
	text-align: center;
	border: 6px solid #fff;
	border-radius: 50%;
	top: -5%;
	left: -5%;
}
.num_height{
	position: relative;
	padding-top: 100%;
	height: 0;
}
.num p{
	position: absolute;
	top: 44%;
	left: 0;
	right: 0;
	margin: 0;
	transform: translateY(-50%);
	font-size: clamp(16px, 1.39vw, 20px);
	font-weight: 600;
}
.num span{
	display: block;
	font-size: clamp(26px, 2.22222vw, 32px);
	line-height: .8;
}

.interview_txt{
	margin: 15px auto 0;
	width: 87.6%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.interview_txt p{
	font-size: 14px;
	line-height: 1.7;
	color: #444444;
	letter-spacing: .06em;
}
.interview_data{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 0 auto ;
	margin-top: auto;
	width: 87.6%;
}
.interview_data p,.interview_data a{
	font-size: clamp(10px, 0.83333vw, 12px);
	line-height: 1.7;
	color: #808080;
}

.interview_data a{
	font-size: 12px;
	color:#4C994C; 
}

@media screen and (max-width: 1000px) {

	.interview_data{
		flex-direction: column;
		align-items: flex-start;
		row-gap: 10px;
	}
	.interview_col ul li{
		height: 430px;
	}
}

@media screen and (max-width: 768px) {

	#interview {
	    padding: 50px 0;
	}
	.interview_col > p {
	    text-align: left;
	    margin-top: 24px;
	    font-size: clamp(15px, 1.666666vw, 24px);
	}
	.interview_col ul {
	   flex-wrap: wrap;
	   align-items: center;
	   justify-content: center;
	   margin-top: 50px;
	   column-gap: 10px;
	   row-gap: 50px;
	}
	.interview_col ul li{
		/* height: 370px; */
		width: 48%;
		max-width: 240px;
		padding-bottom: 15px;
	}
	.num {
	    max-width: 60px;
	    border: 3px solid #fff;
	    border-radius: 50%;
	    top: -5%;
	    left: -6%;
	}
	.num p{
		top: 44%;
		font-size: 14px;
	}
	.num span{
		font-size: clamp(22px, 2.22222vw, 32px);
	}
	.interview_txt p {
	    font-size: 12px;
	}
	.interview_data {
        /* margin-top: 15px; */
    }
	.interview_data p{
		 font-size: 10px;
	}
	
}

@media screen and (max-width: 460px) {

	.interview_col ul li{
		height: 370px;
		width: 48%;
		max-width: 240px;
		padding-bottom: 15px;
	}
}

/*-----------------------
         data
-------------------------*/
#recruit{
	background-color: #F7F7F7;
	padding-bottom: 123px;
}
#recruit .inner{
	width: 84%;
	max-width: 1098px;
}
#recruit .sec_ttl{
	position: relative;
}
#recruit .sec_ttl h2 {
    padding-top: 100px;
    font-size: clamp(16px, 1.666666vw, 24px);
    line-height: 2.3;
    font-weight: 500;
    letter-spacing: .06em;
    color: #4C994C;
}
#recruit p.midashi{
	font-weight: 500;
	font-size: clamp(14px, 1.11111vw, 16px);
	letter-spacing: .06em;
	line-height: 2.1;
	margin-top: 40px;
}
#recruit .sec_ttl p {
    position: absolute;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    font-size: clamp(40px, 4.999999vw, 72px);
    font-weight: bold;
	letter-spacing: .08em;
    top: 0;
    left: -8%;
}

.recruit_col ul{
	display: flex;
	justify-content: space-between;
	column-gap: 15px;
	margin-top: 40px;
}
.recruit_col ul li{
	position:relative;
	background-color: #fff;
	width: 25%;
	max-width: 264px;
	border-radius: 6px;
	box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.recruit_ttl{
	background-color: #4C994C;
	color: #fff;
	padding: 16px 10px 16px 20px;
	border-radius: 6px 6px 0 0 ;
	position: relative;
}
.recruit_ttl:after{
	content: '';
	display: inline-block;
	width: 15%;
	max-width: 30px;
	height: 30px;
	background-size: contain;
	background-image: url(../img/icon.png);
	background-repeat: no-repeat;
	position: absolute;
	right: 10px;
	bottom: 10px;
}
.recruit_ttl p{
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}
.recruit_ttl h3{
	font-size: clamp(16px, 1.67vw, 18px);
	font-weight: 500;
	margin-top: 13px;
	line-height: 1.1;
}
.recruit_txt p{
	padding: 20px;
	font-size: 14px;
	line-height: 2.1;
	letter-spacing: .07em;
}

.recruit_col ul li .right{
	position: absolute;
	top: 100%;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 15px;
}
@media screen and (max-width: 768px) {

	#recruit .inner {
	    width: 90%;
	}

	#recruit .sec_ttl h2 {
	    padding-top: 0;
	}
	#recruit .sec_ttl p {
	    position: static;
	    writing-mode: rl-tb;
	    font-size: clamp(40px, 4.999999vw, 72px);
	    margin-top: 50px;
	}
	.recruit_col ul {
	    flex-direction: column;
	    align-items: center;
	    column-gap: 15px;
	    row-gap: 30px;
	    margin-top: 50px;
	}
	.recruit_col ul li{
		width: 95%;
		max-width: 264px;
	}
	.recruit_ttl {
	    padding: 15px 10px;
	}
	.recruit_txt p {
	    padding: 20px 10px;
	}
	.recruit_col ul li .right {
	    font-size: 12px;
	    margin-top: 5px;
	}
}


/*-----------------------
         training
-------------------------*/

#training{
	padding: 64px 0 0;
	background-color: #F0F5EF;
}
.training_col p{
	text-align: center;
	font-size: clamp(16px, 1.666666vw, 24px);
	line-height: 2.3;
	font-weight: bold;
    font-family: "Noto Serif JP", serif;
	letter-spacing: .06em;
	color: #4C994C;
	margin-top: 48px;
}
.youtube {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 25px auto 78px;
    padding-top: 40.25%; /* 16:9のアスペクト比 */
    height: 0;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.training_col2{
	background-color: #fff;
	text-align: center;
	padding: 80px 7% 112px;
}
.training_col2 p{
	font-family: "Noto Serif JP", serif;
	font-size: clamp(16px, 1.666666vw, 24px);
	line-height: 2.08;
	font-weight: 600;
	letter-spacing: .1em;
}
.training_col2 p:nth-of-type(2){
	margin-top: 50px;
}
.training_col2 a{
	display: block;
	background-color: #4C994C;
	color: #fff;
	margin: 20px auto 0;
	padding: 20px 50px;
	width: fit-content;
	font-size: clamp(16px, 1.666666vw, 24px);
	font-weight: 600;
	letter-spacing: .1em;
}
@media screen and (max-width: 768px) {

	.training_col2 {
	    background-color: #fff;
	    text-align: center;
	    padding: 70px 4% 80px;
	}
		.youtube {
	    position: relative;
	    width: 100%;
	    max-width: 800px;
	    margin: 25px auto 78px;
	    padding-top: 61.25%;
	    height: 0;
	}
}




/*-----------------------
         footer
-------------------------*/
footer .inner{
	max-width: 1296px;
}
.footer_fx{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	border-top: 2px solid #C9C9C9;
	padding-top: 42px;
	column-gap: 50px;
}

.footer_L{
	width: 39%;
	max-width: 267px;
	display: block;
}
.sns_icon{
	display: flex;
	align-items: center;
	column-gap: 20px;
	margin-top: 50px;
}
.sns_icon li{
	width: 40px;
}
.footer_R{
	width: 70%;
	max-width: 590px;
}

.footer_nav{
	display: flex;
	justify-content: space-between;
	column-gap: 10px;
}

.footer_nav li a{
    display: block;
    font-size: clamp(14px, 1.11111vw, 16px);
    color: #444444;
    position: relative;
}


small{
	display: block;
	text-align:center;
	font-size: 14px;
	letter-spacing: .04em;
	background-color: #4C994C;
	color: #fff;
	margin-top: 54px;
	padding: 10px 0;
}
@media screen and (max-width: 768px) {

	.footer_L{
		width: 100%;
	}
	.footer_R {
	    width: 83%;
	    text-align: center;
	    max-width: 590px;
	}
	.footer_fx {
	   flex-direction: column;
	   row-gap: 50px;
	   padding-top: 42px;
	}
	.footer_nav {
	    flex-wrap: wrap;
	    row-gap: 25px;
	    width: 93%;
	    justify-content: center;
	    margin: 0 auto;
	}
	.footer_nav li {
	    width: 48%;
	}
	.sns_icon {
		justify-content: center;
	}

}


.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}
.fadeup {
  animation: fadeup 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
	display: block;
}
 
@keyframes fadeup {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/*-----------------------
         basic
-------------------------*/

#basic_page{
	position: relative;
	height: 350px;
}
#basic_page img{
		height: 100%;
		object-fit: cover;
	}
.page_fvbox{
	position: absolute;
	top: 50%;
	left: 21%;
	transform: translate(-50%,-50%);
	width: max-content;
	color: #fff;
}
.page_fvbox h2{
	font-size: clamp(14px, 1.39vw, 20px);
	font-weight: 500;
	line-height: 1;
}
.page_fvbox p{
	    font-family: "Noto Serif JP", serif;
	    font-size: clamp(25px, 5.56vw, 56px);
	    font-weight: bold;
	    letter-spacing: .08em;
	    line-height: 1.42;
	    margin-bottom: 8px;
}

@media screen and (max-width: 768px) {

	#basic_page{
		height: 200px;
	}
	
	.page_fvbox{
		position: absolute;
		top: 50%;
		left: 25%;
	}
	
}



/*-----------------------
	 interview_contents
-------------------------*/
.interview_contents{
	padding-top: 130px;
	padding-bottom: 200px;
}
.interview_contents .inner{
	max-width: 900px; 
}
.post_ttl h3{
	background-color: rgba(76, 153, 76, .8);
	font-weight: 400;
	color: #fff;
	line-height: .75;
	letter-spacing: .06em;
	padding: 2.112% 3.334%;
	display: inline-block;
	font-size: clamp(15px, 1.666666vw, 24px);
}
.edit-area{
	margin-top: 64px;
}
.edit-area dl dt{
	font-weight: 600;
	color: #4C994C;
	letter-spacing: .06em;
	position: relative;
    font-size: clamp(16px, 1.666666vw, 24px);
	margin-bottom: 20px;
}
.edit-area dl dt:before{
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: #4C994C;
	margin-right: 20px;
	vertical-align: middle;
}
.edit-area dl dd{
	margin-bottom: 64px;
	    font-weight: 500;
    font-size: clamp(14px, 1.11111vw, 16px);
	letter-spacing: .06em;
	line-height: 2;
}
.edit-area dl dd:last-child{
	margin-bottom: 0;
}
@media screen and (max-width: 768px) {

	.interview_contents{
		padding-top: 70px;
		padding-bottom: 100px;
	}
	.edit-area dl dt{
		margin-bottom: 15px;
	}
	.edit-area dl dt:before{
		margin-right: 10px;
	}
	.edit-area dl dd{
		margin-bottom: 30px;
	}
}



/*-----------------------
	message_contents
-------------------------*/
.message_contents_fx{
	display: flex;
	justify-content: space-between;
	column-gap: 25px;
	padding: 120px 0 64px;
}
.message_contents_fx .message_img {
    width: 36%;
    max-width: 400px;
}
.message_contents_fx .message_txt {
    width: 60%;
    max-width: 640px;
}
.message_contents_fx .message_txt p {
    font-weight: 500;
    letter-spacing: .06em;
    margin-bottom: 35px;
    font-size: clamp(14px, 1.11111vw, 16px);
    line-height: 2;
}
.message_contents_fx .message_txt h3 {
    margin-bottom: 35px;
    font-size: clamp(19px, 1.666666vw, 24px);
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .06em;
    color: #4C994C;
}

@media screen and (max-width: 768px) {

	.message_contents_fx{
		flex-direction: column;
		align-items: center;
		row-gap: 50px;
		padding: 80px 0 64px;
	}
	.message_contents_fx .message_img {
	    width: 100%;
	    max-width: 280px;
	}
	.message_contents_fx .message_txt {
	    width: 100%;
	    max-width: 640px;
	}
	
}