@charset "utf-8";

/*ナビゲーションの線を固定 ここから*/
.nav01c li {
  position: relative;
}
  /*bodyにid追加してもらう*/
@media (min-width: 959px){  
#about #active_page::after,
#sample #active_page::after,
#sample_next #active_page::after,
#staff #active_page::after,
#recruit #active_page::after,
#new-news #active_page::after,
#news-detail #active_page::after,
#inquiry #active_page::after,
#inquiry-end #active_page::after {
  content: '';
  display: block;
  width: 50%;
  height: 1px;
  background: #eee;
  position: absolute;
  bottom: 16px;
  left: 25%;
}
}
/*ナビゲーションの線を固定 ここまで*/


/*header h2ロゴ　サイズと位置 ここから*/
#header h2{
  font-size: 1.8rem;
  padding: 2.4% 0 0 2%;
  line-height: 1;
  text-align: left;
}

/*header h2ロゴ　サイズと位置　ここまで*/

/*各サブページのh1設定 ここから*/
#form-area h1,
#privacypolicy h1,
#about-area h1,
#news-area h1,
#detailArea h1,
#sample h1,
#sample_next h1,
#staff h1,
#recruit h1 {
  text-align: center;
  padding: 80px 0;
}
#main-area {
  margin-top: 70px;
}

@media screen and (max-width:960px){
	  #form-area h1 ,
    #privacypolicy h1 ,
    #about-area h1,
    #new-news h1,
    #detailArea h1,
    #sample h1,
    #sample_next h1,
    #staff h1,
    #recruit h1 {
    	padding:40px 0;
      text-align: center;
	  }

}

    /*スマホ用にサイズと余白変更ここから*/
    @media (max-width: 414px) {
      #form-area h1,
      #form-end h1,
      #about-area h1,
      #new-news h1,
      #detailArea h1,
      #sample h1,
      #sample_next h1,
      #staff h1,
      #recruit h1 {
        font-size: 26px;
      }

      #detailArea h1 {
        padding-bottom: 0;
      }

      #privacypolicy h1 {
        font-size: 24px;
      }
  
      #form-area,
      #form-end,
      #privacypolicy,
      #about-area,
      #new-news,
      #detailArea,
      #main_sample,
      #main_staff {
        padding: 0;
      }      
    }
    /*スマホ用にサイズと余白変更ここまで*/
/*各サブページのh1設定　ここまで*/


/*お問い合わせフォームのCSS(お問い合わせ関連ページ共通の設定も)　ここから*/

#form-area p {
  text-align: center;
}

#form-area #form-table,
#form-area #form-table2 {
  margin: 50px auto 0;
  padding: 50px 10px 0;
}

#form-area #form-table th,
#form-area #form-table2 th {
  text-align: left;
  padding: 15px 60px 15px 50px;
}

#form-area #form-table td,
#form-area #form-table2 td {
  padding: 15px 60px 15px 50px;
  text-align: left;
}

#form-area span.required {
  padding: 0 5px;
  margin-right: 5px;
  background: #00c73a;
  font-size: small;
  font-weight: normal;
  border-radius: 2px;
}

#form-area #form-table td,
#form-area #form-table2 td {
  padding: 5px 0 0;
}

#form-area #form-table td input,
#form-area #form-table td textarea {
  background:#fff;
  color: #000;
}

#form-area #text-top {
  display: block;
  padding-top: 0;
}

#form-area textarea {
  margin: 15px 0 5px;
  line-height: 1.5;
}

#form-area a {
  font-weight: normal;
  font-size: small;
  display: block;
  padding: 10px 0 0;
}

#form-area a:hover {
  color: #aaa;
}

input[name=btn_confirm] {
  margin: 90px auto;
  text-align: center;
  background: #00c73a;
  display: block;
  min-width: 280px;
  min-height: 45px;
}

input[name=btn_confirm]:hover {
  background: #000;
}

@media screen and (max-width:960px) {
  #form-area #text-left {
    padding: 0 30px;
  }
  #form-area #form-table,
  #form-area #form-table2 {
    margin:31px 0 15px;
	margin-left: auto;
	margin-right: auto;
    padding:0 30px;
  }
  #form-area #form-table th,
  #form-area #form-table td,
  #form-area #form-table2 th,
  #form-area #form-table2 td {
    display:block;
    padding-bottom:0;
  }
  #form-area #form-table th,
  #form-area #form-table2 th {
    padding-left:0;
  }
  #form-area #form-table td input,
  #form-area #form-table td textarea,
  #form-area #form-table2 td input,
  #form-area #form-table2 td textarea {
    width: 100%;
    display: inline-block;
    padding-bottom:0;
  }

  /* radio縦並び */
  #form-area #form-table #radio-inquiry label,
  #form-area #form-table2 #radio-inquiry label {
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
  }
  #form-area #form-table #radio-inquiry input,
  #form-area #form-table #radio-inquiry input {
    display: flex;
    width: 10%;
    transform:scale(0.5);
  }

  #form-area a {
    font-weight: normal;
    font-size: small;
    display: flex;
    padding-left: 0;
    width: 100%;
  }  

}
/*お問い合わせフォームのCSS(お問い合わせ関連ページ共通の設定も) ここまで*/

/*お問い合わせ確認画面　ここから*/
#form-table2 #memo_w p {
  display: block;
  width: 250px;
  word-wrap: break-word;
  text-align: left;
} 

#form-table2 td p {
  display: flex;
  padding-left: 70px;
}

input[name=btn_submit] {
  margin: 90px auto 10px;
  text-align: center;
  background: #00c73a;
  display: block;
  min-width: 280px;
  min-height: 45px;
}

input[name=btn_submit]:hover {
  background: #000;
}

#form-area input[name=btn_back] {
  margin: 0px auto 90px;
  background: #919191;
  display: block;
  text-align: center;
  width: auto;
  min-width: 280px;
  min-height: 45px;
}

#form-area input[name=btn_back]:hover {
	background: #000;
}

@media screen and (max-width:960px) {
  #form-table2 td p {
    display: flex;
    padding-left: 0;
}
}
/*お問い合わせ確認画面　ここまで*/

/*お問い合わせ完了画面ここから*/
#form-end hr:first-child {
	margin: 150px 90px 80px;
}

#form-end hr:last-child{
	margin:0 90px 150px;
}

#form-end h1 {
	text-align: center;
	margin-bottom: 40px;
	font-size:24px;
}

#form-end #text-left {
	text-align: center;
	font-weight: normal;
	line-height: 3;
}

#form-end #top-a a {
	display: block;
	width: 100%;
  text-align: center;
	margin: 80px auto 150px;
	font-weight: normal;
	font-size: small;
}

#form-end #text-left #sp {
	display: none;
}

#form-end #top-a a:hover {
	color: #00a73c;
}

@media screen and (max-width:960px) {
  #form-end {
    margin-left: 30px;
    margin-right: 30px;
  }

  #form-end hr {
    display: block;
  }

 #form-end #text-left #sp {
	display: block !important;
 }
}

/*お問い合わせ完了画面　ここまで*/


/*プライバシーポリシー　ここから*/
#privacypolicy {
  margin-left: 90px;
  margin-right: 90px;
  margin-bottom: 80px;
  padding: 0 180px;
  line-height: 2;
}

#privacypolicy dt {
  padding-top: 50px;
  font-weight: bold;
}

#privacypolicy ul {
  display: block;
  margin-top: 0;
  list-style-type: disc;
  padding-left: 2em;
}

#privacypolicy #policy-inquiry ul {
  list-style: none;
  padding: 1rem 0 0;
}

@media (max-width: 960px) {
  #privacypolicy {
    margin-left: 30px;
    margin-right: 30px;
    padding: 0 30px;
  }
}

/*プライバシーポリシー　ここまで*/


/*会社概要*/
#about-area {
  margin-left: 90px;
  margin-right: 90px;
  margin-bottom: 80px;
  line-height: 2;
}

#about-area #company_motto,
#about-area #logo {
  padding: 0 90px;
}

#about-area #company_motto #motto-title,
#about-area #company_motto h3,
#about-area #Philosophy #Philosophy_title,
#about-area #Philosophy p,
#about-area #logo h3,
#about-area #logo p,
#about-area #about_company dt,
#about-area #about_company dd {
  letter-spacing: 0.1rem;
}

#about-area #p-message {
  margin: 0 90px 80px;
}

#about-area #p-message h3 {
  font-size: 26px;
  text-align: center;
  padding: 0 50px;
  letter-spacing: 0.3rem;
}

#about-area #p-message hr {
  border: 1px solid #00c73a;
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 40px;
}

#about-area #p-message img {
  width: 40%;
  height: 40%;
  padding: 0 50px 0 0;
}

#about-area #message-text {
  width: 60%;
  float: right;
  margin-bottom: 40px;
}

#about-area .message_name {
  width: 100%;
  text-align: right;
  margin-top: 1rem;
  margin-bottom: 40px;
}

#about-area #company_motto #motto-title {
  font-family: 'Hurricane', cursive;
  color: #00c73a;
  font-size: 38px;
  text-align: center;
  margin-bottom: -20px;
  clear:both;
}

#about-area #company_motto h3 {
  text-align: center;
  font-size: 40px;
  font-weight: normal;
  margin-bottom: 20px;
}

#about-area #company_motto ul {
  display: block;
  margin: 0 90px;
  padding: 0 90px;
  text-align: center;
}

#about-area #Philosophy {
  margin: 80px 0;
  padding: 0px 15vw;
  display: flex;
}

#about-area #Philosophy #sp-Philosophy-h3 {
  display: none;
}

#about-area #Philosophy #pc-Philosophy-h3 {
  writing-mode: vertical-rl;
  font-weight: normal;
  margin-right: 25px;
  background: #00c73a;
  padding: 50px 0;
}

#about-area #Philosophy_title {
  font-size: 22px;
  color: #00c73a;
  margin-top: -5px;
  font-weight:bolder;
}

#about-area #logo {
  display: flex;
  background: #fff;
  padding: 70px 70px 0px;
  border-radius: 20px;
  width: 850px;
  height: 480px;
  margin-right: auto;
  margin-left: auto;
}

#about-area .left {
  width: 60%;
}

#about-area #p-logo {
  color: #00c73a;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

#about-area #logo h3 {
  font-size: 26px;
  color: #000;
  margin-bottom: 20px;
}

#about-area #logo #black {
  color: #000;
}

#about-area #logo .right {
  width: 30%;  
  margin-left: 50px;
}

#about-area #logo img {
  padding-top: 130px;
}

#about-area #about_company ,#about-area #about_company2{
  margin: 80px auto 0;
  text-align: center;
}


#about-area #about_company h3,#about-area #about_company2 h3 {
  margin-bottom: 60px;
  font-size: 26px;
  letter-spacing: 0.3rem;
}

#about-area #about_company ul{
  display: grid;
  grid-template-columns: 35vw 35vw;
  column-gap: 5vw;
  margin-left: auto;
  margin-right: auto;
  width: 75vw;
}

#about-area #about_company2 ul {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 55vw;
  
}

#about-area #about_company #sp-about,#about-area #about_company2 #sp-about2 {
  display:none;
}

#about-area #about_company li {
  text-align: left;
  border-bottom: 1px solid #00c73a;
  padding: 15px 10px;
  display: flex;
  letter-spacing: 0.1rem;
  width: 35vw;
}

#about-area #about_company2 li {
  text-align: left;
  border-bottom: 1px solid #00c73a;
  padding: 15px 10px;
  display: block;
  letter-spacing: 0.1rem;
  width: 55vw;
}


#about-area .about-list-tit {
  width: 100px;
  font-weight: bold;
}

@media (max-width: 960px) {
  #about-area #p-message {
    padding: 0 30px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }

  #about-area #p-message img {
    width: 100%;
    padding: 0;
    padding-bottom: 20px;
  }

  #about-area #message-text {
    margin: 0 0 10px;
    width: 100%;
  }

  #about-area .message_name {
    text-align: center;
  }

  #about-area #company_motto,
  #about-area #Philosophy {
    padding: 0 30px;
  }
  #about-area #company_motto h3 {
    font-size: 26px;
    margin-bottom: 10px;
  }
  #about-area #company_motto ul {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  #about-area #Philosophy h3{
    text-align: center;
  }
  #about-area #logo {
    width: 95%;
    height: auto;
    display: block;
    text-align: center;
    padding: 40px 30px 0;
  }
  #about-area #logo .left,
  #about-area #logo .right {
    width: 100%;
  }
  #about-area #logo #p-logo {
    margin-bottom: 0;
    text-align: center;
  }
  #about-area #logo h3 {
    margin-bottom: 10px;
    font-size: 22px;
  }
  #about-area #logo #black {
    text-align: left;
  }
  #about-area #logo .right {
    margin: 0;
    text-align: center;
  }
  #about-area #logo img {
    padding: 0;
    margin: 40px 0;
    text-align: center;
    width: 300px;
  }
  #about-area #about_company,  #about-area #about_company2 {
    margin:40px 80px 0;
  }
  #about-area #about_company h3,  #about-area #about_company2 h3 {
    margin-bottom: 40px;
  }
  #about-area #about_company #pc-about,  #about-area #about_company2 #pc-about2 {
    display: none;
  }
  #about-area #about_company #sp-about,  #about-area #about_company2 #sp-about2 {
    display: block;
    width: fit-content;
  }
  #about-area #about_company #sp-about li,  #about-area #about_company2 #sp-about2 li {
    width: 70vw;
    margin-left: -80px;
    margin-right: -80px;
  }
}

@media (max-width: 414px) {
  #about-area {
    margin-left: 30px;
    margin-right: 30px;
  }
  #about-area #p-message {
    padding-left: 0;
    padding-right: 0;
  }
  #about-area #p-message h3 {
    font-size: 18px;
    padding-bottom: 0.5rem;
  }
  #about-area #p-message hr {
    margin-bottom: 20px;
  }
  #about-area .message_name {
    font-size: 14px;
  }
  #about-area #company_motto #motto-title {
    font-size: 20px;
    margin-top: -10px;
  }
  #about-area #company_motto h3 {
    font-size: 20px;
  }
  #about-area #company_motto li {
    font-size: 13px;
  }
  #about-area #Philosophy {
    margin: 40px 0;
    padding: 0;
    position: relative;
  }
  #about-area #Philosophy #pc-Philosophy-h3 {
    display: none;
  }
  #about-area #Philosophy #sp-Philosophy-h3{
    display:block;
    font-weight: normal;
    background: #00c73a;  
    position: absolute;
    width: 100%;
    margin: 0 0 20px;
    font-size: 15px;
  }
  #about-area #Philosophy #Philosophy_title {
    text-align: center;
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 12px;
  }
  #about-area #Philosophy p {
    font-size: 14px;
  }
  #about-area #logo {
    margin-top: 80px;
  }
  #about-area #about_company,  #about-area #about_company2 {
    margin: 40px 0 0;
  }
  #about-area #about_company h3,  #about-area #about_company2 h3 {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
  }
  #about-area #about_company #sp-about,  #about-area #about_company2 #sp-about2 {
    font-size: 14px;
  }
  #about-area #about_company #sp-about li,  #about-area #about_company2 #sp-about2 li {
    padding: 8px 10px;
    width: 360px;
  }
  #about-area #about_company #sp-about .about-list-tit {
    width: 70px;
    margin-right: 15px;
  }
}
/*会社概要　ここまで*/


/*お知らせメイン(重複も)　ここから　*/
#news-area {
  margin-bottom: 160px;
}


#news-area li,
#news-area p {
  display: block;
  letter-spacing: 0.1rem;
}

#news-area .info-main {
  margin: 0 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#news-area .infolist {
  display: block;
}

#news-area .infolist li {
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
  margin: 0 auto -1px;
  width: 50vw;
  padding: 20px 10px;
}

#news-area button, html [type="button"] {
  display: block;
  text-align: left;
  width: 100%;
}

#news-area .infolist li a {
  padding: 30px 20px;
  display: block;
  width: 100%;
}

#news-area a:hover,
#news-area button:hover,
#news-detail-area a:hover {
  color: #00a73c;
}

#news-area .infolist li .infolist-tit {
  font-size: 18px;
  margin: 5px 0 0;
  font-weight: bold;
}

#news-area .info-main {
  position: absolute;
  top: 290px;
  left: 55vw;
  margin-left: 10vw;
}


#new-news #wrap {
  margin-bottom: 100px;
}

@media (max-width: 960px) {
  #news-area .infolist li {
    margin: 0 15vw -1px;
    width: 70vw;
    padding: 15px 8px;
  }
}

@media (max-width: 414px) {
  #news-area .info-area {
    display: block;
    transform: scale(0.8);
    width: 100vw;
    position: relative;
    left: -15vw;
  }

  #news-area .info-list {
    display: block;
    padding-left: 20px;
    position: relative;
    top: -50px;
    margin-top: 40px;
  }

  #news-area .infolist li {
    width: 100vw;
    display: flex;
    flex-direction: column-reverse;
  }

  #news-area #infolist li a {
    padding: 21px 10px;
    display: block;
    width: 100%;
  }  

  #news-area .info-main {
    position: static;
  }
}

/*ページネーション用　ここから*/
nav.pagination-container {
  position: relative;
  left: -2vw; 
}
nav.pagination-container ul {
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  transition: 0.3s;
  border-radius: 0px;
  overflow: hidden;
  position: absolute;
  left: 38vw;
}

@media (max-width: 960px) {
  nav.pagination-container ul {
    left: 33vw;
  }
}
@media (max-width: 414px) {
  nav.pagination-container ul {
    left: 13vw;
    width: 100vw;
  }
}
.pagination li {
  margin: 0 1px 0 1px;
}
nav.pagination-container ul li a {
  border:none;
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 25px;
  line-height: 1;
  text-align: center;
  display: flex;
}
li.first {
  border-radius: 5px 0 0 5px;
}
li.last {
  border-radius: 0 5px 5px 0;
}
li.page.navi-active a {
  color: #00c73a;
  text-align: center;
}
li.page.navi-active a:hover {
  color: #aaa;
}
.infolist ul {
  border-bottom: solid 1px #ddd;
}
 /*ページネーション用　ここまで*/

/*お知らせメイン　ここまで*/

/*お知らせ詳細　ここから*/

#detailArea #detail-tit-text {
  margin: 0 20vw 180px;
  width: 60vw;
}

#detailArea #detail-tit {
  padding: 25px 0 35px;
  border-top: 1px solid #00c73a;
  border-bottom: 1px solid #00c73a;
  margin: 0 0 35px; 
}

#detailArea .detail-time {
  font-size: 14px;
}

#detailArea h3 {
  font-size: 26px;
}

#news-detail-area .info-main {
  display: block;
  width: 50vw;
  position: absolute;
  top: 290px;
  left: 65vw;
}

#news-detail #backlink {
  display: block;
  text-align: center;
  margin: 160px 0;
}

#news-detail #backlink a:hover {
  color: #00c73a;
}

@media (max-width:960px) {

  #detailArea #detail-tit-text {
    transform: scale(0.7);
    width: 100vw;
  }
  #detailArea #detail-tit-text {
    margin: 0;
    width: auto;
  }
  #detailArea h3 {
    font-size: 24px;
    font-weight: normal;
  }
  #news-detail #backlink {
    font-size: 12px;
  }
}

@media (max-width: 414px) {

  #news-detail-area #detail-tit-text {
    width: 100%;
  }

  #detailArea #detail-tit {
    width: 105vw;
  }

  #detailArea #new-detile-text p {
    font-size: 18px;
  }
  #news-detail #backlink {
    text-align: center;
    width: 100vw;
    margin:80px 0;
  }

  #news-detail #contact {
    margin-top: 300px;
  }

}
/*お知らせ詳細　ここまで*/


/*採用情報　ここから*/
#main_recruit{
  max-width: 900px;
  margin: auto;
  position: relative;
}
#main_recruit br{
display:none;
}
#main_recruit br.br_pc{
display: block;
}
#main_recruit .gdborder_box{
background:linear-gradient(to right , #00a73c , #00c0ff);
margin: auto;
margin-bottom:10px;
width: 350px;
height:4px;
}
#main_recruit .gdborder_box2{
background:linear-gradient(to right , #00a73c , #00c0ff);
margin: auto;
margin-bottom:20px;
width: 680px;
height:4px;
}
#main_recruit h3.title{
font-size: 25px;
text-align: center;
}
#main_recruit h3.title2{
font-size: 25px;
display:flex;
justify-content: center;
}
#main_recruit h4{
padding: 10px 30px;
}
#main_recruit h4.title_left{
background-color: #7d7d7d;
font-size: 20px;
text-align: left;
margin-bottom: 10px;
}
#main_recruit h4.title_right{
background-color: #7d7d7d;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
}
.recruit_img{
width: 400px;
margin: 10px 0;	
}
.recruit_gaiyo{
display: flex;
}
.recruit_text_left{
margin: auto;
display: inline-block;
width: 450px;
vertical-align: top;
}
.recruit_text_right{
margin: auto;
display: inline-block;
width: 450px;
vertical-align: top;
}
 /*募集要項ここから*/
.bosyu_box{
background-color: #7d7d7d;
padding: 20px 50px 50px;
margin:50px 0 60px;
}
table.bosyu{
margin-top: 20px;
border-collapse: collapse;
}
table.bosyu th,table.bosyu td{
border: solid 2px #fff;
border-inline-style: hidden;
padding: 10px 0;
}
table.bosyu th{
width:200px;
padding-left: 70px;
text-align: left;
vertical-align: top;
}
table.bosyu td{
width:800px;
}
 /*募集要項ここまで*/
/*タブレット用採用情報ここから*/
@media screen and (max-width:960px){
#main_recruit .gdborder_box{
width: 350px;
height:4px;
}
#main_recruit .gdborder_box2{
width: 400px;
height:4px;
}
#main_recruit h3.title{
font-size: 20px;
text-align: center;
}
#main_recruit h3.title2{
font-size: 20px;
display:flex;
justify-content: center;
}
#main_recruit .gdborder_box{
margin:auto;
margin-bottom:10px;
width: 85%;
}
#main_recruit .gdborder_box2{
margin: auto;
margin-bottom:20px;
width: 80%;
}
#main_recruit h4.title_left{
text-align: center;
}
#main_recruit h4.title_right{
text-align: center;
}
#main_recruit br.br_pc{
display: block;
}
.recruit_gaiyo{
flex-direction: column;
}
.recruit_img{
width: 400px;
margin: auto;	
}
.recruit_text_left{
margin: auto;
padding: 0 0 20px;
display: inline-block;
width: 400px;
}
.recruit_text_right{
margin: auto;
padding: 0 0 20px;
display: inline-block;
width: 400px;
}
.order1 {
order: 1;
}
.order2 {
order: 2;
}
.order3 {
order: 3;
}
.order4 {
order: 4;
}
 /*タブレット用募集要項ここから*/
.bosyu_box{
margin: 0 40px 60px;
padding: 10px 20px 30px;
}
.recruit_gaiyo{
display: flex;
flex-direction: column;
}

table.bosyu {
margin-top: 10px; 
}
table.bosyu th{
 width:300px;
}
table.bosyu th,table.bosyu td{
padding: 10px 10px;
}
}

@media screen and (max-width:670px){
  #main_recruit br{
  display: block;
  }
  #main_recruit h3.title2{
  text-align: center;
  }
}
/*タブレット用募集要項ここまで*/
/*スマホ用採用情報ここから*/
 @media screen and (max-width:420px){
  #main_recruit .gdborder_box{
  margin:auto;
  margin-bottom:10px;
  width: 85%;
  }
  #main_recruit .gdborder_box2{
  margin: auto;
  margin-bottom:20px;
  width: 80%;
  }
  #main_recruit h3.title{
  font-size: 18px;
  text-align: center;
  }
  #main_recruit h3.title2{
  font-size: 18px;
  text-align: center;
  }
  #main_recruit h4.title_left{
  text-align: center;
  }
  #main_recruit h4.title_right{
  text-align: center;
  }
  .recruit_gaiyo{
  flex-direction: column;
  }
  .recruit_img{
  width: 60%;
  margin: auto;	
  }
  .recruit_text_left{
  margin: auto;
  padding: 0 0 20px;
  display: inline-block;
  width: 310px;
  }
  .recruit_text_right{
  margin: auto;
  padding: 0 0 20px;
  display: inline-block;
  width: 310px;
  }
  .order1 {
  order: 1;
  }
  .order2 {
  order: 2;
  }
  .order3 {
  order: 3;
  }
  .order4 {
  order: 4;
  }
   /*スマホ用募集要項ここから*/
  .bosyu_box{
  margin: 0 40px 60px;
  padding: 10px 10px 30px;
  }
  .recruit_gaiyo{
  display: flex;
  flex-direction: column;
  }
  table.bosyu {
  margin-top: 10px; 
  }
  table.bosyu th{
   width:300px;
  }
  table.bosyu th,table.bosyu td{
  padding: 5px 5px;
  font-size: 30%;
  }
  }
   /*スマホ用募集要項ここまで*/
/*採用情報　ここまで*/


/*施工内容・施工事例 ここから*/
#main_sample{
  margin: auto;
  position: relative;
}
#main_sample h2{
font-size: 25px;
text-align: center;
margin: 10px;
}
#main_sample h3{
font-size: 20px;
justify-content: center;
}
#main_sample .sample_border{
margin: auto;
border-top: 2px solid #00a73c;
border-bottom: 2px solid #00a73c;
width: 70%;
}
#main_sample .sample_border2{
margin: auto;
border: 0.5px dashed #fff;
width: 60%;
}
#main_sample .ceiling_about{
display: flex;
margin: auto;
padding: 30px 0;
max-width: 700px;
}


#main_sample .sample_text{
margin: 0 30px 0 0;
width: 500px;
}
.ceiling_about .ceiling_img{
margin: 5px auto 0 30px;
width: 130px;
}

.ceiling_about .ceiling_imge{
margin: 0 0 10px 10px;
padding:0 0 10px 10px;
width: 230px;
float: right;
}

 /*施工事例の表示ここから*/

#main_sample .example{
  margin: 50px 10vw 180px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,auto);
  column-gap: 60px;
  row-gap: 50px;
  text-align: center;
}

#main_sample .guest{
  padding-bottom: 20px;
}
#main_sample .guest img{
 width:300px;
 height:200px;
 object-fit:cover;
}

/*施工事例ページネーションここから*/
#main_sample nav.pagination-container {
  margin-bottom: 100px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

@media (max-width: 414px) {
  #main_sample nav.pagination-container {
    left: -13vw;
  }
}
/*施工事例ページネーションここまで*/

 /*施工事例顧客詳細[sample_next]*/
#example_detail{
max-width: 1100px;
margin: auto;
padding-bottom: 50px;
position: relative;
}
.customer_deta{
margin: 0 60px 20px;
text-align: right;
}
.customer_text{
font-size: 20px;
text-align: center;
}

.customer_border{
margin: auto;
border: 1px solid #fff;
}
.customer_img {
  margin: 25px 10px 0;
  display: grid;
  text-align: center;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,auto);
  column-gap: 2vw;
}

.customer_img img {
  width: 60vw;
}

.customer_comment{
margin: 40px 300px 0;
padding-bottom: 100px;
text-align: center;
}

.customer_img .ba_pc_text {
  display: block;
  margin-bottom: 10px;
}
.customer_img .ba_sp_text {
  display: none;
}

 /*スマホ用施工事例ここから*/
@media screen and (max-width:960px){
#main_sample .sample_border{
margin: auto;
border-top: 2px solid #00a73c;
border-bottom: 2px solid #00a73c;
width: 80%;
}
#main_sample .sample_border2{
margin: auto;
border: 0.5px dashed #fff;
width: 80%;
}
#main_sample .ceiling_about{
flex-direction: column;
margin: auto;
}
#main_sample .sample_text{
margin: auto;
padding-bottom: 20px;
width: 80%;
}
.ceiling_about .ceiling_img{
margin: auto;
width: 130px;
}

 /*スマホ施工事例顧客詳細[sample_next]*/
.customer_comment{
margin: 20px 60px 0;
padding-bottom: 100px;
}
.customer_img {
  margin-left: 30px;
  margin-right: 30px;
}
}

@media (max-width: 414px) {
  #main_sample .example{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(1,auto );
    grid-template-rows: repeat(1,auto);
    column-gap: 0;
    row-gap: 20px;
    text-align: center;
  }
  .customer_img .ba_pc_text {
    display: none;
  }
  .customer_img .ba_sp_text {
    display: block;
  }
  .customer_img {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  .customer_img img {
    width: 100vw;
  }
}
/*施工内容・施工事例 　ここまで*/

/*スタッフ紹介*/
.president{
  padding-bottom: 50px;
}

#Q-fast p,
#Q-second p,
#Q-third p {
  font-size: 0.85em;
}

#post,
#hobby {
  display:flex;
}

.president .staff_img{
  text-align: center;
}
.president .staff_img img{
  width: 250px;
  height: 300px;
  object-fit: cover;
}
.president h4.name{
  background-image:url(../img/staff/name_plate.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px 0;
  text-align: center;
  font-size:25px;
}
.under {
  border-bottom: dotted 1px #00c0ff;
  font-weight:  bold;
}
 /*PC用 職人紹介*/
#main_staff .artisan h3{
  text-align: center;
  font-size: 25px;
}
#main_staff .gdborder_box{
  background:linear-gradient(to right , #00a73c , #00c0ff);
  margin: auto;
  margin-bottom: 60px;
  width: 300px;
  height:4px;
}
.artisan_staff{
  margin: 50px;
  display: flex;
}
.artisan_staff .staff_img{
  padding: 0 100px 0 0;
  text-align: center;
}
.artisan_staff .staff_img img{
  width: 250px;
  height: 300px;
  object-fit: cover;
}
.artisan_staff h4.name{
  background-image:url(../img/staff/name_plate.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  text-align: center;
  font-size:25px;
}
.s-message{
  margin: 0;
  padding: 0;
  width: 700px;
}
.s-message ul.dot_none li{
  padding:0;
  list-style: none;
}
.s-message ul.move_left li{
  margin-left: 1.5em;
  list-style: disc;
}
.inline{
  width: 1100px;
  margin:  30px auto;
}

 /*タブレット用 スタッフ紹介*/
@media screen and (max-width:960px){
 #main_staff .president{
  margin: auto;
 }
 .president .staff_img{
  text-align: center;
 }
 .president .staff_img img{
  width: 200px;
 }
 .president h4.name{
  background-size: 200px;
  margin:auto;
  padding: 20px 40px;
  text-align: center;
  font-size:22px;
 }

 #main_staff .gdborder_box{
    background:linear-gradient(to right , #00a73c , #00c0ff);
    margin: auto;
  margin-bottom: 20px;
    width: 280px;
    height:4px;
 }
 
 .artisan_staff{
  margin: 30px 70px 30px 80px;
  flex-direction: column;
 }
 .artisan_staff .staff_img{
  margin: auto;
  padding: 0;
}
.artisan_staff .staff_img img{
  width: 200px;
}
.artisan_staff h4.name{
  margin:auto;
  padding: 20px 40px;
  text-align: center;
  font-size:22px;
}
.s-message{
  margin: auto;
  padding: 0;
  width: 100%;
  font-size:15px;
 }
 .inline{
  margin: auto;
  width:auto;
 }
}
 /*スマホ用 スタッフ紹介*/
@media screen and (max-width:400px){
  .artisan_staff{
    margin: 30px 0;
    flex-direction: column;
   }
   .artisan_staff .staff_img{
    margin: auto;
    padding: 0;
  }
  .artisan_staff .staff_img img{
    width: 200px;
  }
  .artisan_staff h4.name{
    margin:auto;
    padding: 20px 40px;
    text-align: center;
    font-size:22px;
  }
  .s-message{
    margin: auto;
    padding: 0;
    width: 250px;
    font-size:13px;
   }
   .inline{
    width: 250px;
    margin: auto;
   }
}

/*スタッフ紹介　ここまで*/