@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

html {
	scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
}

/**** common上書き設定 ****/
body {
   font-family: 'Zen Kaku Gothic New', sans-serif;
   font-weight: 500;
   width: 100%;
   font-feature-settings: "palt";
}
header {
   height: 60px;
   padding-top: 0;
}
.logo{ max-height:60px; width: auto;}
a{ text-decoration: none; }
i{ margin-right: 0.3em; }
main{ 
   background-image: url("../images/wall.png");
   background-size: 700px;
}
img { width: 100%; }

.contents{
   background-color: #fff;
}

#dl_02 a{
   color:#1e81b3;
   text-decoration-line: underline;
   text-decoration-color: #38b48b;
   text-decoration-style: dotted;
}
#dl_02 a:hover{
   color:#59b9c6;
}

/****** 改行 ******/
.pc { display: block; }
.pc_tb { display: block; }
.tb { display: none; }
.tb_sp { display: none; }
.sp { display: none; }
.pc_sp { display: block; }

/****** idリンク位置調整 ******/
.anchor{
   display: block;
   padding-top: 5em;
   margin-top: -5em;
}

/**** トップメニュー ****/
/*================================================
 *  ヘッダー
================================================*/
header {
	max-width:1200px;
	max-height:75px;
	background-color: #fff;
	padding-bottom:20px;
	margin:0 auto;
	display: flex;
	background-color: rgba(255, 255, 255,0.8);
}

header > p{
	font-size: 13px;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	margin-top:5px;
}
.head_menu{
   width: 100%;
   height: 60px;
   text-align: right;
   display: flex;
   justify-content: flex-end;
   vertical-align: middle;
   align-items: center;
}
.common_menu{
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items:center;
   height: 25px;
}
.common_menu li{
   margin-left: 1.5em;
}
.common_menu li a:hover{
   color:#FF914D;
}
.top_caption{
   font-weight: 400;
   font-size: 13px;
}

.top_tel{
   margin-left: 1.5em;
   margin-right: 0.5em;
}
.top_tel_number a{
   display: block;
   font-weight: 600;
   font-size: 22px;
   color: #87D4A9;
}
.top_tel_caption{
   font-size: 13px;
   color: #95949a;
}

/*********** #main + #sub = contents ************/
.contents{
	overflow: hidden;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/*********** main ************/
#main{
	float: left;
	width: 80%;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom:2em;
}
/*********** サブ（PC：右、SP：下） ************/
#sub{
	width: 20%;
	padding: 5px 10px 5px 5px;
	float: right;
	margin-top: 3em;
	margin-bottom:2em;
}
#sub img{
	width: 100%;
}
#sub p{
	padding: 5px;
}
#sub li{
	margin-bottom: 5px;
}
#sub li a{
	display: block;
	text-decoration: none;
}
.sub_title{
   font-size: 18px;
   font-weight: 600;
   margin: 1.5em 0 0 0;
}
.indeed_bnr{ margin-bottom: 0.5em; }

h2{
   margin: 2em 1em 0 0;
   display: inline-block;
   font-size: 22px;
}
h3{
   font-weight: 600;
   font-size: 18px;
   background-color: #165e83;
   color: #fffff2;
   padding: 0.2em 0.5em;
}
h4{
   font-weight: 600;
   font-size: 18px;
   border-bottom: 1px solid #59b9c6;
   margin-top: 5em;
}
h5{
   margin-top: 1em;
   color:#165e83;
   font-weight: 600;
}

/*********** 飾りつけ ***********/
.line{ background:linear-gradient(transparent 60%, #f2f2b0 60%); }

/*********** 左右２カラム → スマホ：縦並び ***********/
.column_2{
   display: flex;
   justify-content: space-around;
   max-width: 980px;
   width: 100%;
   margin: 0 auto;
}
.column_2 img{
   max-width: 350px;
   height: auto;
   object-fit: contain;
   margin: 0;
}
.column_2 p{
   padding-left: 1em;
}

/*********** トップバナー ***********/
.top_bnr img{
   width: 100%;
}

/*********** セクションバナー ***********/
.section_bnr{
   margin-top: 1em;
   padding-left: 2em;
}


/*********** ul ***********/
section ul{
   padding-left: 1em;
   margin-top: 1em;
   margin-bottom: 0.5em;
}
section ul li::before{
   content: "■";
   color:#c1d8ac;
   margin-right: 0.5em;
}
#title ul li::before{
   content: "";
}


/*********** section：dl ***********/
section > dl{
   padding-left: 2em;
   margin-top: 1em;
   margin-bottom: 2em;
}
section > dl dt{
   background-color:#93ca76;
   color:#333;
   padding: 0.2em 1em;
   font-size: ;
}
section > dl dd{
   padding-left: 1em;
   margin-top: 0.5em;
   margin-bottom: 1em;
}

/****** 募集：見出し ******/
#title{
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
}
#title ul{
   display: flex;
   margin-top: 1.5em;
   justify-content:flex-end;
   margin-bottom: 0;
}
#title li{
   background-color: #008899;
   font-weight: 500;
   padding-right: 0.3em;
}
#title li::after{
   content: "｜";
   color:#fffff2;
}
#title li:first-child{
   padding-left: 0.3em;
}
#title li:last-child::after{
   content:"";
}
#title a{
   color:#fffff2;
   
}
#title a:hover{
   color:#f6e5cc;
   font-weight: bold;
}


/****** ボタン ******/
main .btn{
   width: 100%;
   text-align: center;
   padding-top: 1em;
   margin-bottom: 5em;
   margin-top: 2em;
}
main .btn{
   background-color: transparent;
   box-shadow: none; /* cmn.cssで指定されている影をリセット */ 
}
main .btn:hover {	transform: none; /* cmn.cssで指定されているtransformをリセット */ }
a.btn_list {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 80%;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background-image: linear-gradient(to right, #90c132 0%, #38b48b 100%);
	border-radius: 100vh;
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
   letter-spacing: 0.3rem;
}
a.btn_list:hover {
	color: #fff;
	background-image: linear-gradient(to left, #90c132 0%, #38b48b 100%);
}

/*********** #03：リンク装飾 ************/
#dl_03 a{
   text-decoration-line: underline;
   text-decoration-color: #90c132;
   text-decoration-style: dotted;
}
#dl_03 a:hover{
   color:#59b9c6;
}

/****** 画像リンクマウスオーバー ******/
.image_link{
   display:block;
}
.image_link img{
   transition:0.2s;
   display:block;
   width:100%;
}
.image_link:hover img{
   opacity:0.7;
}


/*================================================
 *  タブレット向けデザイン
================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {

   h5{ padding-left:0.5em; }

   /** common上書き **/
   body{ font-size: 14px; }
   .footmenu li{ font-size: 14px; }
   main{ font-size: 14px; }
   dt{ font-size: 12px; }

	/****** 改行 ******/
	.pc { display: none; }
	.pc_tb { display: block; }
	.tb { display: block; }
	.tb_sp { display: block; }
	.sp { display: none; }
	.pc_sp { display: none; }

   #title ul{
      font-size: 14px;
      width: 100%;
   }
   .number{ margin: 0 ;}
   .job_img{ max-width: 250px; }

   h2{ font-size: 18px; }
   #title { display: block; }
   #title ul{ margin-top: 0; }

   
   /**** トップメニュー ****/
   .common_menu{
      font-size: 14px;
   }

   /**** メールフォーム ****/
   #contact_us{
      padding-right: 1em;
      padding-left: 1em;
   }

   /*********** 左右２カラム → スマホ：縦並び ***********/
   .column_2 img{ max-width: 230px; }


   /*********** サブメニュー ***********/
   .sub_title{ font-size: 11px; }


}

/*================================================
 *  スマートフォン向けデザイン
================================================*/
@media screen and (max-width:767px) {

   h3{
      margin-top: 0.5em;
      text-align: center;
   }
   
   /**** トップメニュー ****/
   .logo{
      height:60px;
      width: auto;
   }
   .head_menu{
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      width: auto;
      padding-left:1em;
   }
   .menu-content ul{
      background-color: #F4BA92;
      box-shadow:none;
      text-align: left;
      display: flex;
      flex-direction: column;
   }
   .top_tel{
      margin: 0;
   }

   /****** 改行 ******/
	.pc { display: none; }
	.pc_tb { display: none; }
	.tb { display: none; }
	.tb_sp { display: block; }
	.sp { display: block; }
	.pc_sp { display: block; }


   /************ メイン ************
    ******************************/
   #main{
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 3em;
		padding: 0;
	}
   .contents{ padding: 0 0.5em; }
   .top_bnr{ width: 100%;}
   

   /****** 募集：見出し ******/
   #title{
      display: block;
      text-align: center;
      width: 100%;
   }
   #title ul{
      margin: 0;
      width: 100%;
      font-size: 13px;
      justify-content: center;
      padding:0;
   }
   #title ul li{
      font-size: 12px;
      padding-right: 0.3em;
      background-color: #fff;
   }
   #title li:first-child{
      padding-left: 0.3em;
   }
   #title ul li a{
      color:#008899;
   }
   #title li::after{
      color:#333;
   }
   #title ul li a:hover{
      color:#93ca76;
   }


   /************ サブ ************
    ******************************/
   #sub{
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	#sub ul{
		max-width: 100%;
		column-count: 2;
	}
	#sub li{
		padding: 0;
	}
   .sub_title{ font-size: 16px; text-align: center;}

   /* =================
   ハンバーガーボタンの実装
   ================= */
   .menu-btn {
      position: fixed;
      top: 5px;
      right: 5px;
      display: flex;
      height: 50px;
      width: 50px;
      justify-content: center;
      align-items: center;
      z-index: 99;
      background-color: #F4BA92;
   }
   .menu-btn:hover {
      cursor: pointer;
   }
   /* 三本線の実装 */
   .menu-btn span,
   .menu-btn span:before,
   .menu-btn span:after {
   content: "";
   display: block;
   height: 3px;
   width: 25px;
   border-radius: 3px;
   background-color: #ffffff;
   position: absolute;
   }
   .menu-btn span:before {
      bottom: 8px;
   }
   .menu-btn span:after {
      top: 8px;
   }
   /* チェックボックスを非表示にする */
   #menu-btn-check {
      display: none;
   }
   
   #menu-btn-check:checked ~ .menu-btn span {
   background-color: rgba(
      255,
      255,
      255,
      0
   ); /*メニューオープン時は真ん中の線を透明にする*/
   }
   
   /* メニューを開いている時はハンバーガーボタンが×になる */
   #menu-btn-check:checked ~ .menu-btn span::before {
      bottom: 0;
      transform: rotate(45deg);
   }
   #menu-btn-check:checked ~ .menu-btn span::after {
      top: 0;
      transform: rotate(-45deg);
   }
   
   /* =================
   メニュー部分の実装
   ================= */
   
   .menu-content {
      width: 80%;
      height: 100vh;
      position: fixed;
      top: 0;
       /* メニューを外に出しておく */
      left: 100%;
      z-index: 80;
      background-color: #F4BA92;
      transition: all 0.5s; /*アニメーションを滑らかにする*/
   }
   .menu-content ul {
      padding: 70px 10px 0;
   }
   .menu-content ul li {
      border-bottom: solid 1px #ffffff;
      list-style: none;
   }
   .menu-content ul li a {
      display: block;
      width: 100%;
      font-size: 15px;
      box-sizing: border-box;
      color: #ffffff;
      text-decoration: none;
      padding: 9px 15px 10px 0;
      position: relative;
   }
   .menu-content ul li a:hover{
      font-weight: bold;
   }
   
   #menu-btn-check:checked ~ .menu-content {
      left: 30%; /*メニューを画面内へ動かす*/
   }

   /*********** 左右２カラム → スマホ：縦並び ***********/
   .column_2{
      display: block;
   }
   .column_2 img{
      max-width: 100%;
      width: 100%;
      max-height: 400px;
   }
   .column_2 p{
      padding-left:0;
   }

   /*********** section：dl ***********/
   section > dl{
      padding-left: 0;
   }
   section > dl dt{
      font-size: 16px;
   }
   section > dl dd{
      padding-left: 0;
      margin-bottom: 1.8em;
   }

   /*********** dl > dl ***********/
   .dl_in_dl{
      padding-left: 0;
      display: block;
   }
   .dl_in_dl dt{
      width: 100%;
      text-align: left;
   }
   .dl_in_dl dd{
      width: 100%;
      margin-bottom: 1em;
   }

   section dl ul{
      margin-top: 0;
   }

   /*********** セクションバナー ***********/
   .section_bnr{
      padding-left: 0;
   }


}