@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");
@import url("inview.css");
@import url("slide.css");




/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	font-size: 13px;	
	overflow-x: hidden;
}

body {
	font-family: "Noto Sans JP",sans-serif;
	-webkit-text-size-adjust: none;
	letter-spacing: 0.05em;
	background: #fff;	
	color: #555;		
	line-height: 2;		
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*ul,olタグ*/
ul, ol {list-style: none;
padding: 0;}

.inner{max-width: 1200px;}
/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #57524b;	
	transition: 0.3s;
}
/*news 2カラム
---------------------------------------------------------------------------*/
/*main-contentsブロック*/

.newseria {
  display: flex;
      max-width: 1200px;
    margin: 50px auto;
}


.main-contents {
	margin-bottom: 2vw;	/*ボックスの下に空けるスペース*/
}

	/*画面幅901px以上の追加指定*/
	@media screen and (min-width:901px) {

	/*カラムで使う為の指定*/
	main.column {
		display: flex;					/*横並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		gap: 3vw;						/*main-contentsとsub-contentsの間のマージン的な隙間*/
	}
	
	/*main-contentsブロック*/
	.main-contents {
		margin-bottom: 0;
		order: 2;		
		flex: 1;
	}
	
	/*sub-contentsブロック共通*/
	.sub-contents {
		width: 210px;	
		margin-top: 50px;
	}
	
	/*1つ目のsub-contents*/
	.sub-contents:nth-child(2) {
		order: 1;
	}
	
	
	
	}/*追加指定ここまで*/


/*サブコンテンツ内のh3*/
.sub-contents h3 {
	margin: 0;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.sub-contents h3::first-letter {
	border-left: 3px solid var(--primary-color);	
	padding-left: 10px;
}

.submenu {
    padding: 0px;
    margin: 0px 0px 1rem;
    border-top: 1px solid rgb(204, 204, 204);
}
.submenu > li {
    border-width: 1px 1px 1px;
    border-style: none solid solid;
    border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204);
    border-image: initial;
    border-top: none;
}
.submenu a {
    display: block;
    text-decoration: none;
    padding: 0.2rem 1rem;
   }
   
.submenu a:hover{
opacity: 0.7;
    background: #f0faff;
}
ul.news li{
      list-style: disc;
}
ul.news li a{
text-decoration:none;}

ul.news li a:hover{
opacity: 0.7;
}

/*sectionタグと、詳細ページの共通設定
---------------------------------------------------------------------------*/
section,
main > article {
	margin: 0 auto;
	padding:2%;		/*ボックス内の余白*/
}


.submain{
  top: 60px;
  position: sticky;
 
}

.subtitle{
  top: 5px;
  position: absolute;
  left: 0;
  color: #fff;
  font-size: 2em;
  font-weight: 600;
  background: #008de1;
 padding: 3% 5%;
  
}

.ttl-01{
position: absolute;
  top: 10%;
  left: 10%;
  right: 0;
  margin: auto;
  text-stroke: .5px rgb(18 179 101 / 50%);
  font-size: 15em;
  line-height: 1;
  font-weight: 900;
  color: #84B9FD59;
  
  }
  
  .ttl-02{
position: absolute;
  top:44%;
  left: 70%;
  right: 0;
  margin: auto;
  text-stroke: .5px rgb(18 179 101 / 50%);
  font-size: 15em;
  line-height: 1;
  font-weight: 900;
  color: #84B9FD59;
  
  }
    .ttl-03{
position: absolute;
  top:53%;
  left: 10%;
  right: 0;
  margin: auto;
  text-stroke: .5px rgb(18 179 101 / 50%);
  font-size: 15em;
  line-height: 1;
  font-weight: 900;
  color: #84B9FD59;
  
  }
  
    .ttl-04{
position: absolute;
  top:88%;
  left: 70%;
  right: 0;
  margin: auto;
  text-stroke: .5px rgb(18 179 101 / 50%);
  font-size: 15em;
  line-height: 1;
  font-weight: 900;
  color: #84B9FD59;
  
  }
@media (max-width: 1300px){
 /* 画面サイズが768px未満の場合の設定 */
 
 .ttl-01{
position: absolute;
  top: 8%;

  }
}
@media (max-width:900px){
 /* 画面サイズが900px以下の場合の設定 */
  .ttl-01{
  top:18%;
  
  }
   .ttl-02{
  top:41%;
  
  } 
    .ttl-03{
  top: 65.5%;
  
  }
  

 .ttl-01,.ttl-02,.ttl-03,.ttl-04{
left: auto;
    font-size: 8em;
  }
}

.slant-bg {
    width: 100%;
    margin: 0;
    padding: 80px 0;
    position: relative;
 
}

.slant-bg p {
    width: 100%;
    margin: 0 auto;
}

.slant-bg::before {
    content: '';
    position: absolute;
  top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #F4FBFF;
    transform: skewY(-2deg);
    z-index: -1;
}

.slant2-bg {
    width: 100%;
    margin: 0;
    padding: 80px 0;
    position: relative;
    top: 0;
}

.slant2-bg p {
    width: 65%;
    margin: 0 auto;
}

.slant2-bg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	  background-color: #f7f7f7;
   background-image:url("../images/bg1.png");
       z-index: -1;
	background-size: 100% auto;
}
/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;					
	justify-content: space-between;	
	align-items: center;			
	width: 100%;
	padding: 0 3%;					
	height: 50px;					
	background: #fffffff0;
}


header a {
	color: #333;
}


header #logo img {display: block;}
header #logo {
	margin: 0;
	width: 250px;	
}
/*contact
---------------------------------------------------------------------------*/
.telNum {
    font-size: 3em;
    font-weight: 900;
    color: #002776;
}
.telNum::before {
    font-family: "Font Awesome 5 Free";
    content: "\f3cd";
    color: #002776;
    padding-right: 0.5em;
    font-weight: 900;
}
/*トップページのメイン画像
---------------------------------------------------------------------------*/

#mainimg {
	width: 100%;
	height: 0;
	padding: 0;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
	color: #fff;	
}


.inner {
  max-width: 1200px;
 margin: 0 auto;
}



/*menubarブロック初期設定
---------------------------------------------------------------------------*/
#menubar ul {list-style: none;margin: 0;padding: 0;}

/*メニューを非表示にしておく*/
#menubar {display: none;}

/*開閉用のスタイル*/
#menubar.db {display: block;}
#menubar.dn {display: none;}

/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
	text-align: center;		/*テキストを中央に*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする指定*/
}


/*小さな端末時にアイコン類だけ横並びにする
---------------------------------------------------------------------------*/
.s #menubar.db li.inline,
.s #menubar.db li.inline a {
	display: inline-block;
}


/*小さな端末用の開閉ブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.s #menubar.db {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 70px 0;	/*上下、左右へのブロック内の余白*/
	background: #fff;	/*背景色。0,0,0は黒の事で0.9は色が90%出た状態の事。*/
	color: #fff;						/*文字色*/
	animation: animation1 0.2s both;	/*animation.cssの、animation1を実行する。0.2sは0.2秒の事。*/
	text-align: center;
}

/*メニュー１個あたりの設定*/
.s #menubar.db a {
	color: #000;/*文字色*/
	padding: 20px;	/*メニュー内の余白*/
}


/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンを非表示にしておく*/
#menubar .ddmenu_parent ul {
	display: none;
}

/*ドロップダウンメニューを持つ親に矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f103";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}

/*ドロップダウンを持つ親のマウスオン時にリンク用のカーソルでなくデフォルトの矢印を出す*/
a.ddmenu {
	cursor: default;
}

/*ドロップダウンメニュー１個あたりの設定*/
.ddmenu_parent ul a {
	background: rgba(255, 255, 255, 0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態の事。*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*開閉用のスタイル*/
#menubar_hdr.db {display: flex;}
#menubar_hdr.dn {display: none;}

/*３本バーを囲むブロック*/
#menubar_hdr {
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 3%;			/*左からの配置場所指定*/
	top: 0px;			/*上からの配置場所指定*/
	padding: 16px 14px;	/*上下、左右への余白*/
	width: 45px;		/*幅（３本バーが出ている場合の幅になります）*/
	height: 45px;		/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	order: 0;						/*表示させる順番。「#menubar_hdr」「#logo」「#header-icon」それぞれに指定しており、数字の「小さな順」に左から並びます。*/
	background: rgba(0,0,0,0.5);	/*背景色*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 2px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 26px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(0px, 6px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(1px, -8px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロック*/
main {
	padding-top: 50px;
}

/*mainブロック内のh2タグ*/
main h2 {
	margin: 0 0 1em;		
	line-height: 1.5;		
	font-size: 3em;			
	text-align: center;		
	letter-spacing: 0.05em;	
	color: #002776;			
	font-family: 'Lato';	
	font-weight: 400;		
}


main h2 span {
	display: block;
	font-weight: normal;
	color: #777;		
	font-size: 13px;	
}



main h3 {
	margin:0;		
	color: #002776;	
			
}

main h4 {		
	font-size: 1.3em;			
	text-align: center;		
	letter-spacing: 0.05em;	
	color: #002776;			
	font-family: 'Lato';	
	font-weight: 400;	
	margin-top: 5px;	
}
/*求人
---------------------------------------------------------------------------*/

.recac{
	padding: 0 5px;	
	max-width: 1000px;
  margin: 0 auto 50px;
}


.recac dt {
	border-radius: 3px;		
	margin-bottom: 20px;	
	background: #fff;
	text-indent: -2em;				
	padding: 10px 1em 10px 3em;		
	border: 1px solid #dbf3ff;
}

/*アイコン（Font Awesome）*/
.recac dt::before {
	font-family: "Font Awesome 5 Free";	
	content: "\f4df";		
	color: #002776;			
	padding-right: 1em;		
	font-weight: 900;
}


.recac dd {
	padding: 5px 1em 30px 3em;		
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	
}

.recac dt span {text-indent: 0;}

.list-9 {
    list-style-type: disc;
    list-style-position: inside;
	padding-left: 3px;
}

.list-9 li {
    padding: .5em;
	list-style: none;
}

.list-9 li:not(:last-child) {
    border-bottom: 1px dashed #2589d0;
}

.list-9 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}
.list-9 span{
  font-weight: 900;
  color: #2478d0;
  font-size: 1.5em;
  margin-right: 10px;
}

/* --------------------------------------------------------
	csr_compliance.html
-------------------------------------------------------- */
.c2 {
  display: flex;
  flex-direction: column;
}
.list-8 li{
    list-style: disc!important;
}
.c2 h3{ 
  font-size: 1.5em; 
 
}
/* --------------------------------------------------------
	サブページ
-------------------------------------------------------- */
.grybox{
    border: 1px solid #dadce5;
    padding: 1%;
    width: 900px;
    margin: 30px auto;
    background: #f6f7f7;
}
@media screen and ( max-width: 980px ) {
.grybox{
    width:100%;
  
}	
	
	}
	
	
.box3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 32px 0;
}


.box3 h4 {font-size: 1.7em;}

.box3 span{
  display:block;
}

@media screen and ( min-width: 980px ) {
  .box3 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 32px 3.125vw;
	max-width: 1200px;
    margin: 0 auto 100px;

  }

  .main_copy {
    grid-column:1 / 9;
    grid-row: 1;
    align-self: center;
    z-index: 2;
	background: #e9f7ffeb;
	padding: 6%;
  }

  .main_img {
   grid-column: 20 / 5;
    grid-row: 1;
    z-index: 1;
  }
}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	font-size: 0.7rem;		
	text-align: center;		
	padding: 20px;			
	background:linear-gradient(90deg, rgb(6, 113, 208), rgb(42, 201, 254) 46%, rgb(45, 171, 247));		
	color: #fff;	
	clear: both;	
}

/*リンクテキスト*/
footer a {text-decoration: none;color: #fff;}

/*著作部分*/
footer .pr {display: block;}


/*フッターメニュー設定
---------------------------------------------------------------------------*/

#footer-contents {
  background:#092e68;
padding: 5% 0;
  color: #fff;
  text-align: center;
  clear: both;
}
.footer-logo {
  width: 200px;
  margin: 50px auto;
  padding: 0.5%;
}

/*ボックス全体の設定*/
#footermenu {
	background:#eaeaea;	
	font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;	
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	}

/*リンクテキストのマウスオン時*/
#footermenu a:hover {
	}

/*ulタグ（メニューの列単位）*/
#footermenu ul {
	margin: 0;
  list-style: none;
  padding: 0 0.3em;
 
}
#footermenu li {
	padding-right: 30px;
}
#footermenu .title {
  font-weight: bold;
  padding-bottom: 5px;
}
/*index.htmlグラデーションボタン
---------------------------------------------------------------------------*/
.gradient1{
    /*ボタンの形状*/
    display: inline-block;
    color:#fff;
    padding: 18px 60px;
    
    border-radius:30px;
    text-decoration: none;
    outline: none;
    /*背景の色と形状*/
    background:linear-gradient(90deg, rgb(8, 127, 234), rgb(42, 201, 254) 46%, rgb(14, 244, 255));
    background-position: 1% 50%;
    background-size: 200% auto;
    /*アニメーションの指定*/
    transition: all 0.3s ease-out;
	margin: 50px auto;
}

/*hoverした際の、背景の場所とテキスト色の変更*/
.gradient1:hover {
    color: #fff;
    background-position: 99% 50%;
}


/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
#new {
	margin: 0;
	display: flex;		
	flex-wrap: wrap;	
	padding: 0 20px;	
	max-width: 1200px;
  margin: 0 auto;
}

/*日付(dt)、記事(dd)共通設定*/
#new dt,
#new dd {
	padding: 5px 0;		
	border-bottom: dotted 1px #e1e1e1;
}

/*日付(dt)設定*/
#new dt {
	width: 8em;	
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: none;	
}

/*記事(dd)設定*/
#new dd {
	width: calc(100% - 8em);	
}

ul.tallent {
  display: grid;
  width: fit-content;
  column-gap: 2em;
  grid-template-columns: repeat(2, auto);
  margin: 0 auto;
}

ul.tallent li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
  background-color:#eff9ff;
  margin-bottom: 10px;
  width: 450px;
}

ul.tallent li:before {
content: "✓";
  font-size: 2em;
  color:#df1045;
  vertical-align: sub;
  padding-left: 10px;
}
/*listブロック index.html
---------------------------------------------------------------------------*/
.list-container .list {
	margin-bottom: 30px;	
	padding: 5px;			
	background: #fff;		
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	
	position: relative;
}

/*ボックス内のh4タグ*/
.list-container .list h3 {
	margin: 0;
	text-align: center;
  font-size: 18px;
  font-weight: 600;
      color: #002776;
}


/*ボックス内のpタグ*/
.list-container .list p {
	margin: 0;
	font-size: 0.8em;	
}


.list-container .list .text {
       padding: 2%;
  }
  
  .list-container .list p btn{
	  
	   }

/*グループ会社
---------------------------------------------------------------------------*/
/*list2ボックス。１個あたりのボックスの指定*/
.list2 {
	display: flex;
	border-bottom: 1px solid #f2f2f2;
	padding: 25px 0;	
}

.list2 div {
	flex: 1;
}

/*１つ目のボックスにのみ上に線を入れる*/
.list2:nth-of-type(1) {
	border-top: 1px solid #f2f2f2;	
}

/*ボックス内のfigure画像*/
.list2 figure {
	width: 20%;			
	margin-right: 20px;	
}

/*ボックス内のh4タグ*/
.list2 h4 {
	margin: 0;				
	margin-bottom: 10px;	
	color: #002776;			
	font-size: 1.2em;
	text-align: left;
}

.list2 h4 a {
	color: #002776;			
}

.list2 h4 a:hover {
	color: #333;			
}

/*ボックス内のpタグ*/
.list2 p {
	margin: 0;
	font-size: 0.9em;		
}




.list3{
	margin: 5px 10px;
    border: 1px solid #cecece;
	background: #247ad5;}
	
.list3 h4{  padding: 1% 5%;
color: #fff;
    font-size: 1em;}






/*テーブル
---------------------------------------------------------------------------*/
.ta1 {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.ta1 th, .ta1 td {
  padding: 1em;
}
.ta1 th {
  color: #002776;
  font-weight: bold;
  text-align: left;
  width: 20%;
  min-width: 4em;
  position: relative;
}
.ta1 th::after {
  content: '';
  background-color: #c1c7c6;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
}

.ta2 {
  border-collapse: collapse;
  width: 100%;
  max-width: 850px;
  margin: 30px auto;
}
.ta2 th, .ta2 td {
  border: 2px solid #fff;
  background-color:#f3f6f7;
  padding: 1em;
}
.ta2 th {
  background-color:#2e93ec;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 20%;
 }
 
 
.ta3{
  border-collapse: collapse;
  border-spacing: 0;
  margin: 10px auto;
      width: 800px;
	  table-layout: fixed;
}


.ta3 th,.ta3 td{
  padding: 10px 0;
  text-align: center;
 }

.ta3 tr:nth-child(odd){
  background-color: #ebeded;
}

.ta3 a{
    background: #cccbcf;
    padding: 1% 3%;
    border: 1px solid #525158;
	text-decoration: none;
}
.ta3 a:hover {
    background: #e8f5ff;
 }
.ta4{
  border-collapse: collapse;
  border-spacing: 0;
  margin: 10px auto;
      width: 100%;
	  table-layout: fixed;
}

.ta4 td{
  width: 10%;
      text-align: center;
}

.ta4 th,.ta3 td{
  padding: 10px 0;
  text-align: center;
 }

.ta4 tr:nth-child(odd){
  background-color: #ebeded;
}
.blue{background: #5acde9;}
.green{background: #81e9a1;}
.or{background: #ffcd6e;}
.pup{background: #e4acff;}
.lblu{background: #dbfdff;}
.lblu2{ background: #aedfef;}

/*安全safety.html
---------------------------------------------------------------------------*/
.list-half .image {
  width: 60vw;
  margin: 0 auto;
  padding: 5vw 0;
}

.list-half h5{font-size: 1em;}

.list-half h3{
  margin: 0 0 1em;
  color: #fff;
  background: #2fa7ee;
  padding: 2% 3%;
}
@media screen and (min-width: 600px) {
  .list-half {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5vw;
    position: relative;
  }
  .list-half .text {
    flex: 1;
  }
  .list-half .image {
    padding: 0;
    width: 40vw;
  }
  
  }





/*top求人
---------------------------------------------------------------------------*/
.rec{
  color: #fff;
  line-height: 1.7;
}
/*business.html
---------------------------------------------------------------------------*/
.box1 {
  overflow: hidden;
  background: #fff;
  margin: 30px auto;
  padding: 2%;
}
.step img.fr, figure.fr {
  float: right;
  margin: 10px;
  text-align: right;
}
.fl {
  float: left;
}

.box1 h4 {
 color: #002776;
  font-size: 24px;
  border-bottom: 2px dotted #c2bebb;
  margin-bottom: 10px;
}
.box1 p {
  padding: 0 !important;
  line-height: 2;
  letter-spacing: 2px;
}

.w30p {
  width: 30%;
}
.w65p {
  width: 65%;
}

.w40p {
  width: 43%;
}
.w45p {
  width: 45%;
}
.w54p {
  width: 54%;
}
.w20p{
    width: 20%;
}

ul.irai, ol {
  background:#f5feff;
  border-radius:10px;/*角の丸み*/
  padding: 0.5em 0.5em 0.5em 2em;
  width: 800px;
  margin: 0 auto;
}
ul.irai li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.box2 {
 background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-position: 0 0, 10px 10px; /* チェックの位置をずらして重ねる */
  padding: 3%;
  margin: 50px auto;
  max-width: 900px;
}

.box2 p{
margin: 10px auto 20px;
}
.box2 h4{
  font-size: 1.5em;
  color: #fff;
  background: #203871;
  padding: 1% 0;
  margin-top: 0;
}
.box2 h4 span{
  font-size: 0.7em;
}
.box5{
    border: 5px solid #a8d4f5;
    padding: 3%;
    width: 800px;
    margin: 0 auto;
}

.box5 h3 {
    margin: 0 0 1em;
    color: #002776;
    text-align: center;
    font-size: 24px;
}
/*プライバシーポリシー
---------------------------------------------------------------------------*/
.pp h5{
  background:#5d8bf7;
  padding: 0.5em 2%;
  color: #fff;
  font-size: 1em;
  margin: 20px auto;
}
/*背景色パターン
---------------------------------------------------------------------------*/
.bg1 {
	background: #eee;
}
.bg2{background:url('../images/bg2.jpg') no-repeat center center / cover;
padding: 10% 15%;
  border-radius: 50px;
}

.bg3 {
    width: 100%;
    margin: 0;
    padding: 200px 0 100px;
    position: sticky;
    top: 200px;
    overflow: hidden;
}

.bg3 p {
    width: 65%;
    margin: 0 auto;
}

.bg3::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
     background-color: #f4fcff;
    transform: skewY(-7deg) translateY(90px);
    z-index: -1;
}
.bg4 {
background-color: #f4fcff;
}
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5em;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}

/*スタッフ求人
---------------------------------------------------------------------------*/
#voice h3 {
    background: #e0f2ff;
    padding: 1.5%;
    text-align: center;
	    clear: both;
		    margin-bottom: 10px;
}

#voice h5 {
    font-size: 1.3em;
    text-align: left;
	    margin-top: 5px;
		    margin-bottom: 5px;
   }
.comment_title{
    background: #ebeaea;
    padding: 1% 2%;
}

/*SDGS
---------------------------------------------------------------------------*/
ul.sdgslist{
    list-style: none;
	 display: flex;
	 justify-content: center;
  }
  
  
  li.sdgslist:nth-child(2) {
    margin: 0 10px;
  }
  
/*健康経営
---------------------------------------------------------------------------*/
.box4{
  margin: 50px auto;
  border: 5px solid #d0ead8;
  padding: 3%;
  font-size: 21px;
  width: 600px;
}

/*moreボタン
---------------------------------------------------------------------------*/
.more_btn {
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height:50px;
  outline: none;
  color: #1B85FB;
  background-color: #fff;
  position: relative;
  border: 1px solid #1B85FB;
  transition: color 0.5s ease;
  margin-top: 20px;
}
.more_btn:hover {
  color: #fff;
}
.more_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.more_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #1B85FB;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #002776 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.mb10 {margin-bottom: 10px !important;}
.mt30 {margin-top: 30px !important;}
.mt100 {margin-top: 100px !important;}
.mt50{margin-top: 50px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee; border: 1px solid #ccc; border-radius: 3px;margin: 2px 0; word-break: break-all;}
.small {font-size: 0.6em; letter-spacing: normal !important;}
.large {font-size: 1.8em !important;}
.block {display: block !important;}
.sh {display: block;}
.pc {display: none;}
.hidden {position: absolute; top: -9999px; left: -9999px;}
.fs2r{ font-size: 2rem;}
.b{font-weight: 900;}
.fs18{ font-size: 18px;}
.mb100{margin-bottom:100px;}
.fs24 {font-size: 24px;}
.r{text-align: right;}
.w30{width: 30%;}
.ofh{overflow: hidden;}
.w50p {width: 50%;}
.pl10{padding-left: 10px;}
.ofh{ overflow: hidden;}
.fr{float: right;}
.pl250{ padding-left: 250px;}
.bkwh{ background: #fff;}
/*---------------------------------------------------------------------------
ここから下は画面幅450px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:450px) {

	.mb100 {
    margin-bottom: 50px;
}
	.w20p {
    width: 50%;
}
	ul, ol {
    padding-left: 10px;
}
	.telNum {
    font-size: 2em;
   }
	main h2 {
     font-size: 2.5em;
     letter-spacing: 0.1em;
  }
.box4{
width: 100%;
}

	.c2 {
  margin-bottom: 20px;
}
.list3 {
  margin: 50px auto;
 }
#mainimg {
  width: 100%;
  height: 100VW;
  padding-top:100%;
}
main {
padding: 10px;
}
/*btnの設定
---------------------------------------------------------------------------*/
a.btn1, a.btn2 {
	padding: 0px 15px;
}
a.btn1 i, a.btn2 i {
	margin-left: 10px;
}
.c2 h3{
   font-size: 1.3em; 
  letter-spacing: 0.1em;
 
}
.slant-bg p {
   margin-bottom: 20px;
}
.bg2 {
  padding: 5%;
}
.fs2r {
  font-size: 1.7rem;
}
.list-container .list p {
   font-size: 1.1em;
}

.slant2-bg p {
  width: 90%;
  letter-spacing: 0.15em;
 line-height: 2.3em;
}
.fs24 {
    font-size: 18px;
}
}
/*---------------------------------------------------------------------------
ここから下は画面幅900px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:900px) {
	.newseria {
 display: block;
  width: 100%;
  padding: 0 10px;
}
	.pl250 {
    padding-left: 20px;
 }
	.w40p {
    width: 100%;
}
.w54p {
    width: 100%;
}
.w30 {
  width: 100%;
}	
	.w50p {
  width: 100%;
}
.recac dd {
padding: 0 1%;
}
.subtitle {
  top: -20px;
  position: absolute;
  left: 20px;
  font-size: 1.5em;
 }
 
ul.tallent {
  display: inline;
 }
ul.tallent li {
  width: 100%;
}
main h4 {
margin-top:5px;
  font-size: 2em;
 }
#footermenu {
display: none;
}
.box1 {
   max-width: 100%;
  margin: 20px 5px;
  padding: 2% 3%;
}
.w30p {
  width: 100%;
}
.w65p {
  width: 100%;
}
.fl {
  float: none;
  margin-right: 0;
  margin-bottom: 20px;
}
.step img.fr, figure.fr {
  float: none;
  margin: 10px auto 0;
  text-align: center;
}

.ta3 th, .ta3 td {
    display: inline-block;
    width: 100%;
    float: left;
}
.ta3 {
    width:100%;
}


}




/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
header {
	display: flex;					
	justify-content: space-between;	
	align-items: start;			
	position: fixed; z-index: 1111;	
	width: 100%;
	padding: 0 3%;					
	height: 50px;					
	background: #fffffff0;
}
	header #logo {
		display: flex;
		align-items: center;
		height: 100%;
	}


/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 15px;	
}


/*index　Features
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.c2 {
	flex-direction: row;			
	justify-content: space-between;	
	align-items: center;			
	
	margin-left: -6%;
	margin-right: -6%;
	max-width: 1500px;
    margin: 100px auto;

}
/*画像ブロック*/
.c2 .image {
	width: 60%;
}

/*テキストブロック*/
.c2 .text {
	width: 40%;
	padding: 0 3%;
}

/*最初(左)に配置*/
.c2 .l {
	order: -1;
}

/*画像を右側に配置する場合の設定*/
.c2 .image.r {
	overflow: hidden;
	box-shadow: 0 10px 10px 10px rgba(215, 237, 249, 0.27);
}

/*画像を左側に配置する場合の設定*/
.c2 .image.l {
	overflow: hidden;
	box-shadow: 0 10px 10px 10px rgba(215, 237, 249, 0.27);
}


/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*テキストブロック*/
#mainimg #text {
	width: 50%;		
}


/*menubarブロック設定
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar {
	font-size: 0.85em;	
}
#menubar ul {
	display: flex;	
}

/*メニュー１個あたりの設定*/
#menubar a {
	padding: 10px 15px;	
	
}
	#menubar > ul > li > a {
		line-height: 16px;
		padding-top: 17px;
		padding-bottom: 17px;
	}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*ハンバーガーメニューを非表示にする*/
#menubar_hdr {display: none;}


/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*日付(dt)設定*/
#new dt {
	width: 14em;	
	display: flex;	
	justify-content: space-between;
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: inline-block;	
	width: 6em;				
	background: #999;		
	color: #fff;			
	font-size: 0.8em;		
	text-align: center;		
	margin-right: 1em;		
	align-self: flex-start;	
	line-height: 1.8;		
	position: relative;top: 0.4em;	
}


#new dt span.icon-bg1 {
	background: #002776;	
}

/*記事(dd)設定*/
#new dd {
	width: calc(100% - 14em);	
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	font-size: 0.8em;
	padding: 20px 50px;	
	clear: both;
    overflow: hidden;
}


/*listブロック
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-container {
	display: flex;		
	flex-wrap: wrap;	
}

/*１個あたりのボックス設定*/
.list-container .list {
	display: flex;					
	justify-content: space-between;	
	flex-direction: column;			
	width: 32%;						
	margin-right: 2%;
}

.list-container .list:nth-of-type(3n) {
	margin-right: 0;
}

/*ボックス内のtextブロック*/
.list-container .list .text {
	flex: 1;
}


.list-container {
	display: flex;		
	flex-wrap: wrap;
 margin-bottom: 30px;	
}

/*１個あたりのボックス設定*/
.list-container .list {
	display: flex;					
	justify-content: space-between;	
	flex-direction: column;			
	width: 32%;						
	margin:0 0.7%;
}

.list-container .list:nth-of-type(3n) {
	margin-right: 0;
}

/*ボックス内のtextブロック*/
.list-container .list .text {
	flex: 1;
}



.list2 {
	padding-left: 10px;	
}



.list2 dl.line dd {
	width: calc(50% - 8em - 10px);	
	margin-right: 10px;				
}

.list2 dl.line {border-top: none;}

.list2 dl.line dt:nth-of-type(1), .list2 dl.line dd:nth-of-type(1),
.list2 dl.line dt:nth-of-type(2), .list2 dl.line dd:nth-of-type(2) {
	border-top: 1px solid #ccc;
}


.list3{
	margin:30px 10px;
    width:31%;
}



/*テーブル
---------------------------------------------------------------------------*/

.ta1 caption {
	padding: 5px 15px;		
}


.ta1 th, .ta1 td {
	
}


.ta1 th {
	width: 20%;		
}



/*その他
---------------------------------------------------------------------------*/
.ws {width: 48%;display: inline;}
.sh {display: none;}
.pc {display: inline-block;}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}

/*---br管理--*/
/*---スマホ時改行--*/
@media screen and (max-width: 1020px) {
.br-pc{display:none;}
.br-sp{display:block;}
}

/*---PC時改行--*/
@media screen and (min-width:1021px){
.br-pc{display:block;}
.br-sp{display:none;}
}