@charset "utf-8";
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
img{
  margin: 0px;
  padding: 0px;
  vertical-align:top;
}
.indent{
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
}
table {
  border-spacing: 0px; /*セルの余白をなくす */
  border-collapse:collapse; /*線の重なりをなくす */
  } 
ul{list-style: none;}
a {text-decoration: none;
   color: black;}

.sp{
  display: none;
}

body{ font-family: "中ゴシックBBB"; }

#container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	max-width: 1100px;
	padding: 0px;
}

.wrapper1100{
  max-width: 1050px;
  margin: 0 auto;
}
.wrapper1000{
  max-width: 1000px;
  margin: 0 auto;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(113, 162, 141);
  height: 40px;
  padding: 7px 1.5em;
  margin-left: -500px;
  margin-right: -500px;
  padding-left: 525px;
  padding-right: 525px;
}
.font01{
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.header p {
  font-size:clamp(0.7em, 2.1vw, 1.1em);
  color: white;
}

.header li a{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 2em;
  text-align: center;
}

.logo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 1.5rem;
  background-color: #F6F6F6;
  margin: 0 auto;
  padding: 7px 1.5em;
  margin-left: -500px;
  margin-right: -500px;
  padding-left: 510px;
  padding-right: 510px;
}
.logo img{
  width: clamp(150px, 25vw, 250px);
  margin-left: 10px;
}
#menu_contents {
  font-size:clamp(0.9em, 2.1vw, 1em);
  color: white;
  padding: 8px auto;
}
#check {display: none;}

#menu_contents ul{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
}

.underline{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


#menu_contents li a{
  color: white;
  font-size:clamp(0.9em, 2.1vw, 0.8em);
  align-items: center;
}

#menu_contents li a:hover{
  color: bisque;
}

.menu img{
  height:clamp(0.9em, 2.1vw, 1em);
  margin-top: 2.5px;
}

.side_r{
  width: 35%;
  text-align: right;
  height: auto;
  margin-left: auto;
}


.side_r img{
  width: 100%;
}
.title{
  margin-left: 5%;
  margin-top: clamp(0px, 2vw, 24px);
  position: absolute;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;  /* 各項目を横に並べる */
}
.menu li {
    display: flex;
    align-items: center;  /* 縦中央揃え */
}
.menu a {
    display: flex;
    align-items: center;  /* 縦中央揃え */
    text-decoration: none;  /* リンクの下線を削除 */
    color: #000;  /* テキストの色を設定 */
    font-size: 1em;
    padding: 10px;  /* パディングを追加 */
}
.menu img {
    margin-right: 2px;  /* 画像とテキストの間に余白を追加 */
}

.tops{
  z-index: -1;
  position: relative;
}

.background-layer {
  /* background-color: #F6F6F6; */
  background: linear-gradient(to bottom, #F6F6F6, #F6F6F6, #F6F6F6, #F6F6F6, #F6F6F6, #fff);
  z-index: -2;
}
.top {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-image: url('./proserve/img/head_back1.png');/* CSSファイルからの相対パス */
  background-position: top center; /* 画像を中央に配置 */
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 1100px;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 11 / 5.5;/* 縦横比を指定 (1100px : 550px) */
  z-index: -1;
}

h1{
  color: #406928;
  margin-bottom: 0.1em;
  margin-top: 0.3em;
  text-shadow:/* 横、縦、ぼかし、色 */
  5px 0px 3px #FFFF,/* 右 */
  5px -5px 3px #FFFF,/* 右上 */
  5px 5px 3px #FFFF,/* 右下 */
  -5px 0px 3px #FFFF,/* 左 */
  -5px 5px 3px #FFFF,/* 左下 */
  -5px -5px 3px #FFFF,/* 左上 */
  5px 0px 6px #FFFF, /* 強調 */
  -5px 0px 6px #FFFF; /* 強調 */
  font-size:clamp(1.1em, 4vw, 2.25em);
  line-height: 1.5em;

}
.title p{
  text-shadow:/* 横、縦、ぼかし、色 */
  5px 0px 3px #FFFF,/* 右 */
  5px -5px 3px #FFFF,/* 右上 */
  5px 5px 3px #FFFF,/* 右下 */
  -5px 0px 3px #FFFF,/* 左 */
  -5px 5px 3px #FFFF,/* 左下 */
  -5px -5px 3px #FFFF,/* 左上 */
  5px 0px 3px #FFFF,/* 2回繰り返す */
  5px 0px 6px #FFFF, /* 強調 */
  -5px 0px 6px #FFFF; /* 強調 */;
  font-size:clamp(0.6em, 2vw, 1.15em);
  line-height: 1.5em;

}

h2{
  color: #ffff;
  text-shadow:/* 横、縦、ぼかし、色 */
  5px 0px 3px #406928,/* 右 */
  5px -5px 3px #406928,/* 右上 */
  5px 5px 3px #406928,/* 右下 */
  -5px 0px 3px #406928,/* 左 */
  -5px 5px 3px #406928,/* 左下 */
  -5px -5px 3px #406928,/* 左上 */
  5px 0px 6px #406928,/* 協調 */
  -5px 0px 6px #406928;/* 協調 */
  font-size:clamp(1em, 3.5vw, 1.8em);
  text-align: center;
}





/* 問い合わせ */
/* ページ読み込み時アニメーション */
@keyframes moveBeforeOnLoad {
  from {
    transform: skewX(-45deg) translateX(0);
  }
  to {
    transform: skewX(-45deg) translateX(18em);
  }
}

/* ホバー時アニメーション */
@keyframes moveBeforeOnHover {
  from {
    transform: skewX(-45deg) translateX(-4.5em);
  }
  to {
    transform: skewX(-45deg) translateX(18em);
  }
}

.inquiry {
  display: inline-block;
  padding: 7px 50px;
  font-size: clamp(0.6em, 2.2vw, 1.15em);
  color: black;
  letter-spacing: -0.1em;
  background-color: orange;
  border-radius: 30px;
  text-shadow: none;
  position: relative;
  overflow: hidden;
  margin-left: 3%;
  margin-bottom: clamp(10px, 5vw, 40px);
}

.inquiry::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.7);
  height: 100%;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: -4.5em; /* 初期位置 */
  transform: skewX(-45deg) translateX(0); /* 初期状態 */
  animation: moveBeforeOnLoad 0.5s ease-in-out 1; /* ページ読み込み時に1回だけ再生 */
}

.inquiry:hover::before {
  animation: moveBeforeOnHover 0.5s ease-in-out; /* ホバー時に発動 */
}





/* --------------- 検索窓 -------------------------- */
.search_container {
  box-sizing: border-box;
  position: relative;
  border: 1px solid #999;
  padding: 0px 10px;
  border-radius: 6px;
  width: 250px;
  background-color: #ffff;
  overflow: hidden;
}
.search_container input[type="text"] {
  border: none;
  height: 1em;
}
.search_container input[type="text"]:focus {
  outline: 0;
  background-color: #ffff; /* ここで背景色を白に設定 */
}

.search_container input[type="submit"] {
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: clamp(2em, 2vw, 3.5em);
  padding: 0px 5px;
  height: 3em;
  right: 0px;
  top:-0.6em;
  outline: none;
}
#no-results, #results-found {
  display: none;
  margin-top: 0px;
}
.highlight {
  background-color: yellow /* 透過黄色 */
}


/* .content{
    margin-top: calc(-85px - ((270px * ((100vw - 320px) / 780))));
  } */
    /* margin-top: -85px; */ /* 初期値をしっかりと設定 -355*/
    /* margin-top: calc(-355px + (225px * 2)); */
    /* 横幅の変動に応じて過度な空きが出ないように調整 */




.content {
    margin-top: -355px;
  }
@media (max-width: 1100px) {
  .content {
    margin-top: calc(-75px - (270 * ((100vw - 320px) / (1100 - 320))));
  }
}
  



  
  
    

  
  

.content ul{
  display: flex;
}
ul.look_for{
display: flex;
justify-content: center;
width: 80%;
}

ul.look_for li{
  width: 33%;
}

ul.look_for li a{
  text-align: center;
  display: block;
  padding: 10px 0px;
  border-radius: 10px 10px 0 0;
  background-color: #006863;
  color: #FFFF;
  margin: 0 5%;
  font-size:clamp(0.7em, 2.1vw, 1.3em);
  text-shadow:
  4px 0px 3px #33362C,/* 横、縦、ぼかし、色 */
  4px 4px 3px #33362C;
  transition: background-color 0.3s, color 0.3s;
}
ul.look_for li a:hover{
  background-color:rgb(136, 220, 120);
  color: #5A3F09;
  text-shadow:none;
}

ul.look_for li.active a{
  background-color: #FEEE00;
  color: #5A3F09;
  text-shadow:none;
}

/* ul.look_for li:nth-child(1) a{
  background-color: #FEEE00;
  color: #5A3F09;
  text-shadow:none;
} */
.category{
  width: 100%;
  background: linear-gradient(90deg, rgb(136, 164, 91), rgb(83, 130, 131));
  border-radius: 5px;
  padding-top: 15px;
  padding-bottom: 3px;
}

.group{
  margin: 5px 0;
  padding-left: 3%;
  padding-right: 1%;/* jobのmargin-right: 2%;と合わせて計3%でpadding-left: 3%;にあわせる */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}



.job {
  position: relative;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  justify-content: center; /* 縦に並べた時はこれが縦方向中央揃い */
  align-items: center; /* 縦に並べた時はこれが横方向中央揃い */
  flex: 1 0 160px;
  max-width: 31%;
  height: auto;
  background-color: #FFFF;
  border-radius: 7px;
  margin-right: 2%;
  margin-bottom: clamp(8px, 2vw, 12px);
  margin-top: 0.5%;
}

/* 追加要素 */
.dummy-job {
  content: '';
  display: block;
  flex: 1 0 160px;
  max-width: 31%;
  height: 0px;
  padding: 0px;
  margin-right: 2%;
  margin-bottom: clamp(8px, 2vw, 12px);
  margin-top: 0%;
  background-color: yellow;
}

.job_detail, .job_detail01, .job_detail02, .job_detail03 {
  display: flex;
  align-items: center; /* .job_detail内の縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  text-align: center;
  font-size:clamp(0.9em, 4vw, 1.55em);
  line-height: 1.1em;
  width: 100%;
  aspect-ratio: 120 / 50;
  color: #4B383A;
  /* background-color: yellow; */
  margin-top: clamp(5px, 1vw, 10px);
}
/* 4文字まで */
.job_detail01{
  font-size:clamp(1em, 4.5vw, 1.7em);
}
/* 6文字まで */
.job_detail03{
  font-size:clamp(0.8em, 4.5vw, 1.5em);
}
/* 2行 */
.job_detail02{
  font-size:clamp(0.8em, 4vw, 1.5em);
  line-height: 1.15em;
  padding-bottom: 1px;
}




ul.detail {
  display: block;
  width: 85%;
  margin-bottom: clamp(7px, 1vw, 10px);
  position: relative;
}

ul.detail li a {
  display: block;
  padding: 2px 0;
  background-color: #D27A00;
  text-align: center;
  color: #FFFF;
  font-size: clamp(8px, 3vw, 0.8em);
  position: relative;
}

.drop-menu a {
  text-align: center;
}

.detail li {
  list-style: none;
  position: relative;
}

.detail .dropdown__lists {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.detail .drop-menu:hover .dropdown__lists {
  display: block;
  animation: fadeIn 0.5s forwards; /* アニメーションを追加 */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.detail .dropdown__list {
  width: 100%; /* 子要素の幅を親に合わせる */
}

.detail .dropdown__list a {
  display: block;
  padding: 7px 0; /* 縦の余白を追加して高さを広げる */
  background-color: orange;
  text-align: center;
  color: #FFFF;
  font-size: clamp(8px, 3vw, 0.8em);
}

.detail .dropdown__list a:hover {
  background-color: burlywood;
}










h3{
  font-size:clamp(1.15em, 3.5vw, 2.2em);
  text-align: center;
}
.shared_all{
  margin: 0 auto;
  padding-bottom: 50px;
  padding-top: 50px;
}
.shared{
  width: 82.5%;
  display: flex;
  justify-content: space-between;
  text-align: left;
  margin-top: 60px;
}
.shared dl{
  border-left: gray 1px solid;
  padding: 10px 28px;
  text-align: center;
}
.shared dl:last-child{
  border-right: gray 1px solid;
}

.shared dt{
  font-size:clamp(1em, 2.5vw, 1.8em);
  text-align: center;
  margin-bottom: 10px;
}

.shared dt img{
  height: clamp(1.2em, 2.5vw, 1.15em);
}

.shared dd{
  text-align: justify;
  font-size:clamp(0.7em, 2vw, 1em);
}

.t_page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.to_top {
  position: fixed;
  right: calc((100vw - 1100px) / 2 + 10px); /* 画面幅が1100px以上の場合 */
  bottom: calc(50px + (150 * ((100vw - 320px) / (1100 - 320))));
  z-index: 1;
  line-height: 1.3em;
  background-color: #FEEE00;
  display: none; /* 初期状態で非表示 */
  padding: 19px 15px;
  border-radius: 50%;
}

@media (max-width: 1100px) {
  .to_top {
    right: 10px; /* 画面幅が1100px以下の場合は右端から10px内側に配置 */
  }
}








footer{
  background-color: #522f38;
}
.foot {
  text-align: center;
  padding: 20px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;  /* 横並びが収まらない場合、次の行に回り込む */
  justify-content: center;  /* 中央揃え */
}

footer .foot a {
  display: flex;
  align-items: center;  /* 縦中央揃え */
  color: #fff;
  font-size: clamp(0.7em, 2.5vw, 1.1em);
  margin: 0.4em 2em 0.4em 0;
}

footer .foot img {
  margin-right: 2px;  /* 余白を無くして調整 */
  margin-top: 1px;
  height: 1em;
}


footer .foot a:nth-child(1){
  margin-left: 2em;
}

.copyright{
  text-align: center;
  background-color: #FFFF;
  padding: 10px;
  font-size:clamp(0.7em, 2vw, 1em);
}

.go2 {font-size:clamp(2.5em, 9vw, 6em);}
.go3 {font-size:clamp(3.5em, 5vw, 8em);}
.go4 {font-size:clamp(1em, 4vw, 2em);}
.go5 {font-size:clamp(0.8em, 4vw, 1.7em);}
.go6 {font-size:clamp(0.7em, 4vw, 1.5em);}

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1s ease-out;
 }

 @font-face {
  font-family: "g";
  src: url("F/g.eot?")  format('eot'),
       url("F/g.woff2") format('woff2'),
       url("F/g.woff")  format('woff');
}
.g{font-family: "g";}

@font-face {
  font-family: "shiB";
  src: url("F/ShipporiMinchoB1-Bold.eot?")  format('eot'),
       url("F/ShipporiMinchoB1-Bold.woff2") format('woff2'),
       url("F/ShipporiMinchoB1-Bold.woff")  format('woff');
}
.shiB {font-family: "shiB";}


@font-face {
  font-family: "shiM";
  src: url("F/ShipporiMinchoB1-Medium.eot?")  format('eot'),
       url("F/ShipporiMinchoB1-Medium.woff2") format('woff2'),
       url("F/ShipporiMinchoB1-Medium.woff")  format('woff');
}
.shiM {font-family: "shiM";}

@font-face {
  font-family: "shiR";
  src: url("F/ShipporiMinchoB1-Regular.eot?")  format('eot'),
       url("F/ShipporiMinchoB1-Regular.woff2") format('woff2'),
       url("F/ShipporiMinchoB1-Regular.woff")  format('woff');
}
.shiR {font-family: "shiR";}

@font-face {
  font-family: "nasu";
  src: url("F/nasu.eot?")  format('eot'),
       url("F/nasu.woff2") format('woff2'),
       url("F/nasu.woff")  format('woff');
}
.nasu {
  font-family: "nasu";
}




@font-face {
  font-family: "YuGothB";
  src: url("F/YuGothB.eot?")  format('eot'),
       url("F/YuGothB.woff2") format('woff2'),
       url("F/YuGothB.woff")  format('woff');
}
.YB {
  font-family: "YuGothB";
}

@font-face {
  font-family: "YuGothM";
  src: url("F/YuGothM.eot?")  format('eot'),
       url("F/YuGothM.woff2") format('woff2'),
       url("F/YuGothM.woff")  format('woff');
}
.YM {
  font-family: "YuGothM";
}

@font-face {
  font-family: "maruH";
  src: url("F/GenJyuuGothic-Heavy.eot?")  format('eot'),
       url("F/GenJyuuGothic-Heavy.woff2") format('woff2'),
       url("F/GenJyuuGothic-Heavy.woff")  format('woff');
}
.maruH {
  font-family: "maruH";
}

@font-face {
  font-family: "maruB";
  src: url("F/GenJyuuGothic-Bold.eot?")  format('eot'),
       url("F/GenJyuuGothic-Bold.woff2") format('woff2'),
       url("F/GenJyuuGothic-Bold.woff")  format('woff');
}
.maruB {
  font-family: "maruB";
}

@font-face {
  font-family: "maruM";
  src: url("F/GenJyuuGothic-Medium.eot?")  format('eot'),
       url("F/GenJyuuGothic-Medium.woff2") format('woff2'),
       url("F/GenJyuuGothic-Medium.woff")  format('woff');
}
.maruM {
  font-family: "maruM";
}

@media (max-width: 800px) {

.shared_all{
  padding-bottom: 30px;
  padding-top: 40px;
}
.shared {
  display: block;
  margin-top: 10px;
}


.shared dl {
  max-width: 600px;
  border-left: none;
  border-bottom: #000 solid 1px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(245, 245, 255);
  }

.shared dl:last-child{
  border-right: none;
}
.shared dl dt img{
  margin-bottom: 7px;
  margin-top: 7px;
}
.shared dt{
  margin-bottom: 5px;
}

.shared dd{
  justify-content: flex-start;
  margin-bottom: 5px;
}

}


@media (max-width: 900px) {

.pc {
  display: none;
}
ul.look_for{
width: 100%;
}

label {
  width: 34px;
  height: 32px;
  position: absolute;
  right: 12px;
  top: 0px;
  z-index: 3;
}
span {
  width: 24px;
  height: 1.8px;
  background-color: #ffff;
  position: absolute;
  right: 17px;
  transition: .3s;
  z-index: 2;
}
.span1 {top: 12px;}
.span2 {top: 19px;}
.span3 {top: 26px;}
#check:checked ~ .span2 {display: none;}
#check:checked ~ .span1 {
  width: 25px;
  transform: rotate(315deg);
  top: 20px;
  right: 15px;
}
#check:checked ~ .span3 {
  width: 25px;
  transform: rotate(-315deg);
  top: 20px;
  right: 15px;
}
#check:checked ~ .menu
{top:0; left: 0;  opacity: 1;}
/*----------  普通のメニュー---------- */
.menu {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  margin: 0;
  padding-top: 100px;/*----  ロゴの分下げる---------- */
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  list-style: none;
  top: 0;
  left: 0;
  transition: 0.5s;
  z-index: 1;
  opacity: 0;
}
#menu_contents ul {
  display: block;
  width: 100%;
  display: block;
}
#menu_contents li {
  width: 100%;
  display: block;
  background-color: rgba(10, 70, 70, 0.8);
  font-size: 1.4em;
  padding: 5px 0;
}
#menu_contents li img{
  height: 0.9em;
  margin-top: 0.3em;

}
#menu_contents a { 
  padding: 20px 0;
  display: block;/* 必ず必要 */
  width: 100%;
  color: rgb(65, 53, 53);
  margin-left: 0;
  /* background: transparent; *//* 背景色クリアー */
}
#menu_contents a:hover{
  background-color: rgba(10, 70, 70, 0.8);
  width: 100%;
  color: #ffff;
  left: 0;
  margin-left: 0;
}
 
}
@media (max-width: 400px) {
  body, html {
    overflow-x: hidden;
    max-width: 100%;
}

  .sp{
    display: inline-block;
  }
  .shared_all{
    margin-bottom: -30px;
    margin-top: -20px;
  }

}