@charset "utf-8";
p.lead { max-width: 1200px; margin: 3em auto;}

section > .flex_center { grid-gap: 1em clamp( 1.5em, 4vw, 4em );}
section > .flex_center .txt_area { width: 50%;}
section > .flex_center .img_area { width: calc( 50% - clamp( 1.5em, 4vw, 4em ) ); max-width: 500px;}

th, td { font-size: inherit; border: #ccc 1px solid;}
tbody th { background: #514842;}

.entry { background: #fff; max-width: 800px; margin-inline: auto; padding: clamp( 1em, 3vw, 4em );}
.recruit_contact li:not(:last-of-type) { padding-bottom: 1.5em; border-bottom: solid 1px #ccc; margin-bottom: 1.5em;}
.recruit_contact dl { display: flex; flex-wrap: wrap; grid-gap: .3em clamp( 1.5em, 4vw, 4em );}
.recruit_contact dt { width: 3em;}
.recruit_contact dd { width: calc( 100% - 3em - clamp( 1.5em, 4vw, 4em ) );}
.recruit_contact img { max-width: 150px;}

@media(max-width: 899px) {
  #sec_01 section:first-of-type .flex_row { display: block;}
  #sec_01 section:first-of-type .flex_row .img_area { float: right; margin: 0 0 1em clamp( 1.5em, 4vw, 4em );}
  #sec_01 section:first-of-type .flex_row .txt_area { width: 100%;}
}

@media(max-width: 699px) {
  section > .flex_center, #sec_01 section:first-of-type .flex_row { display: flex;}
  section > .flex_center .txt_area, #sec_01 section:first-of-type .flex_row .txt_area { width: auto; order: 1; margin-bottom: 1em;}
  section > .flex_center .txt_area h2.left { text-align: center;}
  section > .flex_center .img_area, #sec_01 section:first-of-type .flex_row .img_area { float: none; width: 80%; margin: 0 auto; order: 2;}
}