@import url(sanitize.css);

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&display=swap');

body{
	background:#fff;
	margin:0 auto;
	width: 100%;
	height:100%;
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	//font-family: 'Noto Serif JP', serif;
	min-width: 405px;/*右にできた謎の余白を消す*/
}

/*imgサイズ*/
.img{
	width:100%;
	-webkit-backface-visibility: hidden;
}

/*リストにできるpadding40pxの余白無効タグ*/
ul {
	padding: 0;
	margin: 0;
}

/*リストスタイル＆デコレーション無効タグ*/
li {
	list-style-type: none;
}

a {
	text-decoration: none;
}

.sp_ban {
	display:inline;
}
.tb_ban {
	display:none;
}
.pc_ban {
	display:none;
}

/*********************************************
	ここからSP版ヘッダー&ハンバーガーの設定
*********************************************/

/* header（デモの参考値） */
.header{
	display: flex;
	justify-content:left;
	position: relative;
	align-items: center;
	//height: 64px;
	//padding: 1em;
}

/* 全体調整CSS */
.hamburger-menubox *{
	font-size: 16px;
}
.hamburger-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* inputを非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
	cursor: pointer;
	position: absolute;
	right: 3%;
	top: 0; /* ハンバーガーアイコンの位置（上から） */
	z-index: 9999;
	width: 2em; /* アイコン（クリック可能領域）の幅 */
	height: 4em; /* アイコン（クリック可能領域の）高さ */
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
	width: 25px;
	height: 3px;
	background: gray; /* ハンバーガーアイコンの色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s;
	content: "";
}
.hamburger-switch-line1{
		transform: translate(-50%, -50%);
}
.hamburger-switch-line1:before{
	transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after{
	transform: translate(-50%, 200%);
}
/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
	width: 0;
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before{
	transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after{
	transform: rotate(-45deg) translate(-40%, -325%);
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #000; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合もあり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #fff; /* メニューリストの文字色 */
	display: block;
	padding: .5em 0;
}

/*.hamburger-demo-menulist li + li {
    border-top:1px solid gray;
}*/
/* メニューエリア･アニメーション */
	/* 右から */
#hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
	left: 50%;/* メニューエリアの幅 */
}
	/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}

/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
	.hamburger{
		display: none;
	}
}

/* sp版 ヘッダー↓↓ */
.logo01 {
	padding: 10px 5px 10px 10px;
	display: inline-block;
	font-size: 1.3rem;
	font-weight: bold;
}

.logo02 {
	padding-right:10px;
	font-size: 0.8rem;
}

a.logo01:link {
	color: #fff;
}

a.logo01:visited {
	color: #fff;
} 

a.logo01:hover {
	color: #fff;
}

nav {
	margin-left: auto; /*先頭から分離して右に寄せる*/
	//margin: 0 auto; /*メニューを中央揃えにする*/
}
nav ul {
	display: flex;
}
nav ul li a {
	padding: 0 20px;
}

.con_btn {
	margin: 15px 0 15px 5px;
	padding: 5px 10px;
	display: inline-block;
	color: #fff;
	font-size: 0.9rem;
	font-weight: bold;
	text-align: center;
	background: #333;
	transition: .4s;

	/*--水平方向 垂直方向 色--*/
	box-shadow: 5px 5px gray;
}

.con_btn:hover {
	background: #000;
	/*--水平方向 垂直方向 色--*/
	box-shadow: 0px 0px gray;
}

/**********************************************
	ここまでSP版ヘッダー&ハンバーガーの設定
**********************************************/

/**********************************************
	ここからSP版メニューの設定
**********************************************/

.yohaku01 {
	padding-top:550px;
	background-color: #cde4f0;
}

.yohaku02 {
	padding-top:550px;
	background-color: #cde4f0;
}

.menu_container01 {
	display: flex; 
	position: relative;
	z-index: 0;
}

.menu_img01 {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.menu_img01 img{
	flex-grow: 1;
	width: 100%;
	//padding: 3%;
	align-items: flex-start;
	position: absolute;
	top: 0%;
	right: 0%;
	object-fit: cover;
}

.menu_item_waku01 {
	width: 80%;
	height: 200px;
	flex-grow: 2;
	background: #fff;
	margin: 60% 5% 5% 5%;
	padding: 12% 5% 5% 5%;
	z-index: 2;
	position: absolute;
	top: 2%;
	left: 0%;
}

.menu_item_text01{
	font-size: 6rem;
	//font-weight: bold;
	color: #d08a8a;
	position: absolute;
	top: -30%;
	left: -5%;
}

.menu_item_text02{
	font-size: 1.2rem;
	color: #d08a8a;
}

.menu_item_text03{
	font-size: 1.8rem;
}

.menu_item_text04{
	font-size: 1rem;
}

.menu_img02 {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.menu_img02 img{
	flex-grow: 1;
	width: 50%;
	padding:3% 0% 3% 3%;
	align-items: flex-start;
	position: absolute;
	top: 0%;
	left: 0%;
	//object-fit: cover;
}

.more_btn {
	display: inline-block;
	margin: 10px;
	padding: 10px 40px;
	background: #fff;
	color: #4169e1;
	border:1px solid #4169e1;
	transition: .4s;
	position: absolute;
	bottom: 6%;
	right: 5%;
}

.more_btn:hover {
	background: #4169e1;
	color: #fff;
}

/**********************************************
	ここまでSP版メニューの設定
**********************************************/

/**********************************************
	ここからtb版ヘッダー&ハンバーガーの設定
**********************************************/	

@media (min-width: 600px){
	.sp_ban {
		display:none;
	}
	.tb_ban {
		display:inline;
	}
	.pc_ban {
		display:none;
	}

	/* header（デモの参考値） */
	.header{
		display: flex;
		justify-content:left;
		position: relative;
		align-items: center;
		//height: 64px;
		//padding: 1em;
	}
	
	/* 全体調整CSS */
	.hamburger-menubox *{
		font-size: 16px;
	}
	.hamburger-menubox li{
		font-size: 14px;
	}
	/* hamburgerここから */
		/* inputを非表示 */
	.input-hidden{
		display: none;
	}
		/* label */
	.hamburger-demo-switch{
		cursor: pointer;
		position: absolute;
		right: 3%;
		top: 0; /* ハンバーガーアイコンの位置（上から） */
		z-index: 9999;
		width: 2em; /* アイコン（クリック可能領域）の幅 */
		height: 4em; /* アイコン（クリック可能領域の）高さ */
	}
	/* メニュー展開時にハンバーガーアイコンを固定 */
	#hamburger-demo1:checked ~ .hamburger-demo-switch{
		position: fixed;
	}
	/* ハンバーガーアイコン */
	.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
		width: 25px;
		height: 3px;
		background: gray; /* ハンバーガーアイコンの色 */
		position: absolute;
		top: 50%;
		left: 50%;
		transition: .3s;
		content: "";
	}
	.hamburger-switch-line1{
			transform: translate(-50%, -50%);
	}
	.hamburger-switch-line1:before{
		transform: translate(-50%, -300%);
	}
	.hamburger-switch-line1:after{
		transform: translate(-50%, 200%);
	}
	/* ハンバーガーアイコン･アニメーション */
	#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
		width: 0;
	}
	#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before{
		transform: rotate(45deg) translate(-40%, 325%);
	}
	#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after{
		transform: rotate(-45deg) translate(-40%, -325%);
	}
	/* メニューエリア */
	.hamburger-demo-menuwrap{
		position: fixed;
		height: 100%;
		background: #000; /* メニューエリアの背景色 */
		padding: 5em 3% 2em;
		z-index: 9998;
		transition: .3s;
		overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
		top: 0;
		left: 100%;
		width: 70%;
	}
	/* メニューリスト */
	.hamburger-demo-menulist{
		margin-right: 3%;
		padding-left: 5% !important; /* !important不要な場合もあり */
		list-style: none;
	}
	.hamburger-demo-menulist li a{
		text-decoration: none;
		color: #fff; /* メニューリストの文字色 */
		display: block;
		padding: .5em 0;
	}
	
	/*.hamburger-demo-menulist li + li {
	    border-top:1px solid gray;
	}*/
	/* メニューエリア･アニメーション */
		/* 右から */
	#hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
		left: 50%;/* メニューエリアの幅 */
	}
		/* コンテンツカバー */
	#hamburger-demo1:checked ~ .hamburger-demo-cover{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9997;
		background: rgba(3,3,3,.5);
		display: block;
	}
	
	/* tb版 ヘッダー↓↓ */
	.logo01 {
		padding: 10px 5px 10px 10px;
		display: inline-block;
		font-size: 1.3rem;
		font-weight: bold;
	}
	
	.logo02 {
		padding-right:10px;
		font-size: 0.8rem;
	}
	
	a.logo01:link {
		color: #fff;
	}
	
	a.logo01:visited {
		color: #fff;
	} 
	
	a.logo01:hover {
		color: #fff;
	}
	
	nav {
		margin-left: auto; /*先頭から分離して右に寄せる*/
		//margin: 0 auto; /*メニューを中央揃えにする*/
	}
	nav ul {
		display: flex;
	}
	nav ul li a {
		padding: 0 20px;
	}
	
	.con_btn {
		margin: 15px 0 15px 5px;
		padding: 5px 10px;
		display: inline-block;
		color: #fff;
		font-size: 0.9rem;
		font-weight: bold;
		text-align: center;
		background: #333;
		transition: .4s;
	
		/*--水平方向 垂直方向 色--*/
		box-shadow: 5px 5px gray;
	}
	
	.con_btn:hover {
		background: #000;
		/*--水平方向 垂直方向 色--*/
		box-shadow: 0px 0px gray;
	}

}

/**********************************************
	ここまでtb版ヘッダー&ハンバーガーの設定
**********************************************/

/**********************************************
	ここからpc版ヘッダー&ハンバーガーの設定
**********************************************/

@media (min-width: 1024px){
	.sp_ban {
		display:none;
	}
	.tb_ban {
		display:none;
	}
	.pc_ban {
		display:inline;
	}

	/*PC版ヘッダーメニュー↓↓*/
	header {
		display: flex;
		align-items: center;
	}
	
	.logo01 {
		padding: 10px 20px; display: inline-block;
		font-size: 2rem; font-weight: bold;
	}
	
	.logo02 {
		padding: 10px;
		font-size: 1rem;
	}
	
	a.logo01:link {
		color: #fff;
	}
	
	a.logo01:visited {
		color: #fff;
	} 
	
	a.logo01:hover {
		color: #fff;
	}
	
	nav {
		margin-left: auto; /*先頭から分離して右に寄せる*/
		// margin: 0 auto; /*メニューを中央揃えにする*/
	}
	nav ul {
		display: flex;
	}
	nav ul li a {
		padding: 0 20px;
	}
	
	.con_btn {
		margin: 20px 30px;
		padding: 10px 20px;
		display: inline-block;
		color: #fff;
		font-weight: bold;
		text-align: center;
		background: #333;
		transition: .4s;
		/*--水平方向 垂直方向 色--*/
		box-shadow: 10px 10px gray;
	}
	
	.con_btn:hover {
		background: #000;
		/*--水平方向 垂直方向 色--*/
		box-shadow: 0px 0px gray;
	}
	
	/*PC版ヘッダーメニュー↑↑*/
	
	/* PC版メニュー↓↓ */
	.gnav {
	    display: flex;
	    height: 2rem;
	    margin: 0 auto;
	    width: 100%;
		//padding : 0;
		//margin: 0;
	}
	.gnav > li {/*親階層のみ幅を25%にする*/
	    width: 25%;
	}
	/*全てのリスト・リンク共通*/
	.gnav li {
	    //list-style-type: none;
	    position: relative;
	}
	.gnav li a {
	    background: #000; //#001b34;
	    border-right: 1px solid #eee;
	    color: #fff;
	    display: block;
	    height: 2rem;
	    line-height: 2rem;
	    text-align: center;
	    //text-decoration: none;
	    width: 100%;
	}
	.gnav li a:hover {
	   background: gray;
	}
	/* PC版ヘッダーメニュー↑↑ */
	
}

/**********************************************
	ここまでpc版ヘッダー&ハンバーガーの設定
**********************************************/

/**********************************************
	ここからsp版 共通メディアクエリ
**********************************************/

/*sp版 indexトピックス↓↓ */
.news_container {
	display: flex; /* フレックス宣言 */
	flex-wrap: wrap; /* フレックス折り返し指定 */
	background: #fff;
	padding: 3%;
	position: relative;
}
 
.news_item {
	flex-grow: 1; /*主軸方向の寸法*/
}
 
.news_item:last-child { /*最後のボックスだけ折り返してwidth100%に*/
	width: 100%;
}

.news01 {
	position:absolute;
	top:12%;
	right:3%;
	font-size: 0.9rem;
}

.news01 img {
	width:20%;
}

.news02 {
	margin:3%;
	padding: 10px;
	border-bottom:1px solid #000;
	font-family: 'Noto Serif JP', serif;
}

.news_span01 {
	font-size: 2rem;
	color: #5172c5;
	margin-left:4%;
}

.news_span02 {
	font-size: 1.5rem;
}

.news_span03 {
	font-size: 0.8rem;
	color: gray;
	margin-left: 5px;
}

.news_span04 {
	font-size: 0.9rem;
	padding: 10px;
}

.list_btn {
	//display: inline-block;
	margin-top: 55px;
	padding: 5px 10px;
	background: #fff;
	color: #000;
	border:1px solid #000;
	transition: .4s;
	font-weight: bold;
}

.list_btn:hover {
	background: #e9e9e9;
	color: #000;
}

.news_btn: {
        color: #000;
}

.news_btn:link {
        color: #000;
}

.news_btn:visited {
        color: #000;
}

.news_btn:hover {
        color: #5172c5;
}

/* sp版 indexトピックス↑↑ */

/* sp版 index recruit↓↓*/

.recruit01 {
  position: relative;
  }

.recruit01 p {
	position: absolute;
	top: 22%;/*真ん中に配置*/
	left: 50%;/*真ん中に配置*/
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	color: white;/*文字を白に*/
	font-size: 4rem;
	line-height: 1;/*行高は1に*/
}

.recruit02 {
	position: absolute;
	top: 50%;/*真ん中に配置*/
	left: 50%;/*真ん中に配置*/
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	color: white;/*文字を白に*/
	font-size:1.3rem;
	line-height: 1;/*行高は1に*/
	white-space: nowrap;/*自動改行を防ぐ*/
}

.recruit01 img {
	width: 100%;
	vertical-align: bottom;
}

.btn03 a {
	position: absolute;
	top: 74%;/*真ん中に配置*/
	left: 50%;/*真ん中に配置*/
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	display: flex;
	justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
	align-items: center;
	margin: 0 auto;
	padding: 8px;
	width: 260px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	border: 1px solid #fff;
	transition: .4s;
}

.btn03 a::before {
	content: '';
	width: 10px;/* >の幅 */
	height: 10px;/* >の高さ */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	transform: rotate(45deg);
}

.btn03 a:hover {
	color: #fff;
	background-color: #a0c4d3;
}

.btn03 a:hover::before { /* beforeにすると < が前 afterにすると後 */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
}

/* sp版 index recruit↑↑*/

/* sp版 footer↓↓*/

footer {
  position: relative;
}

footer img {
	width: 100%;
	vertical-align: bottom;
}

.foot_container {
	display: flex; /* フレックス宣言 */
	flex-wrap: wrap; /* フレックス折り返し指定 */
	padding: 5%;
	position: absolute;
	top: 0%;/*真ん中に配置*/
	left: 0%;/*真ん中に配置*/
}

.foot_add01 {
	flex-grow: 1; /*子要素1の横幅を変更する*/
}

.foot_add02 {
	flex-grow: 2;/*子要素2の横幅を変更する*/
	font-size: 0.9rem;
	width: 60%;
}

.foot_add03 {
	width: 100%;/*子要素3の横幅をいっぱいに*/
	font-size: 0.8rem;
	margin-top:20px;
}

.foot01 {
	font-size: 0.8rem;
	font-weight: 700;
}

.foot02 {
	padding: 10px 15px 0 0;
	font-size: 1.2rem;
}

.foot03 {
	padding: 10px;
	font-size: 2rem;
}

.foot04 {
	font-size: 0.9rem;
}

a.logo02:link {
	color: #000;
}

a.logo02:visited {
	color: #000;
} 

a.logo02:hover {
	color: #fff;
	transition: .4s;
}
/* sp版 footer↑↑*/

/**********************************************
	ここまでsp版 共通メディアクエリ
**********************************************/

/**********************************************
	ここからtb版 共通メディアクエリ
**********************************************/

@media (min-width: 768px){

/* tb版 index トピックス↓↓ */
	.news_container {
		padding: 5% 15%;
	}
	
	.news01 {
		top:25%;
		right:16%;
	}
	
	.news02 {
		margin:4%;
	}
	
	.news_span01 {
		font-size: 4rem;
	}
	
	.news_span02 {
		font-size: 2rem;
	}
	
	.news_span03 {
		font-size: 1rem;
		margin-left: 20px;
	}
	
	.news_span04 {
		font-size: 1.2rem;
	}
	
	.list_btn {
		padding: 10px 20px;
	}
/* tb版 index トピックス↑↑ */

/* tb版 index メニュー↓↓ */

	.yohaku01 {
		padding-top:850px;
	}
	
	.menu_item_waku01 {
		padding: 10% 5% 5% 5%;
	}
	
	.menu_item_text01{
		top: -20%;
		left: -2%;
	}
	
	.menu_item_text04{
		padding-top: 2%; 
	}

/* tb版 index メニュー↑↑ */

}

/**********************************************
	ここまでtb版 共通メディアクエリ
**********************************************/

/**********************************************
	ここからpc版 共通メディアクエリ
**********************************************/

@media (min-width: 1024px){

/* pc版 index トピックス↓↓ */
	.news_container {
		padding: 5% 15%;
	}
	
	.news01 {
		position:absolute;
		top:29%;
		right:17%;
	}
	
	.news02 {
		margin:4%;
	}
	
	.news_span01 {
		font-size: 5rem;
	}
	
	.news_span02 {
		font-size: 3rem;
	}
	
	.news_span03 {
		font-size: 1.5rem;
		margin-left: 20px;
	}
	
	.news_span04 {
		font-size: 1.2rem;
	}
	
	.list_btn {
		padding: 10px 20px;
	}
/* pc版 index トピックス↑↑ */

/* pc版 index リクルート↓↓*/

	.recruit01 p {
		font-size: 8rem;
	}
	
	.recruit02 {
		font-size:3rem;
	}

	.btn03 a {
		padding: 20px;
		width: 400px;/* ボタンの幅 */
		font-size: 2rem;
	}
	
	.btn03 a::before {
		width: 20px;/* >の幅 */
		height: 20px;/* >の高さ */
	}
	
/* pc版 index リクルート↑↑*/

/* pc版 footer↓↓*/
	
	.foot_add02 {
		font-size: 1.5rem;
	}
	
	.foot_add03 {
		font-size: 1.2rem;
	}
	
	.foot01 {
		font-size: 1.1rem;
	}
	
	.foot02 {
		font-size: 1.7rem;
	}
	
	.foot03 {
		font-size: 2.9rem;
	}
	
	.foot04 {
		font-size: 1.2rem;
	}
	/*pc版 footer↑↑*/

}

/**********************************************
	ここまでpc版 共通メディアクエリ
**********************************************/

/**********************************************
	ここからpc版index メニューの設定
**********************************************/

@media (min-width: 1024px){
	.sp_ban {
		display:none;
	}
	.tb_ban {
		display:none;
	}
	.pc_ban {
		display:inline;
	}

	.yohaku01 {
		padding-top:500px;
	}
	
	.menu_container01 {
		display: flex; 
		position: relative;
		z-index: 0;
	}
	
	.menu_img01 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	
	.menu_img01 img{
		flex-grow: 1;
		width: 50%;
		padding:3% 0 3% 0;
		align-items: flex-start;
		position: absolute;
		top: 0%;
		right: 0%;
		object-fit: cover;
	}
	
	.menu_item_waku01 {
		width:500px;
		flex-grow: 2;
		background: #fff;
		margin: 6% 0 0 4%;
		padding: 5% 5% 8% 10%;
		z-index: 2;
		position: absolute;
		top: 2%;
		left: 0%;
	}
	
	.menu_item_text01{
		font-size: 7rem;
		//font-weight: bold;
		color: #d08a8a;
		position: absolute;
		top: -20%;
		left: -5%;
	}
	
	.menu_item_text02{
		font-size: 1.2rem;
		color: #d08a8a;
	}
	
	.menu_item_text03{
		font-size: 2.3rem;
	}
	
	.menu_item_text04{
		font-size: 1.2rem;
	}
	
	.menu_img02 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	
	.menu_img02 img{
		flex-grow: 1;
		width: 50%;
		padding:3% 0% 3% 0;
		align-items: flex-start;
		position: absolute;
		top: 0%;
		left: 0%;
		object-fit: cover;
	}
	
	.menu_item_waku02 {
		width:500px;
		flex-grow: 2;
		background: #fff;
		margin: 6% 4% 0 0;
		padding: 5% 5% 2% 10%;
		z-index: 2;
		position: absolute;
		top: 2%;
		right: 0%;
	}
	
	.menu_item_text01{
		font-size: 7rem;
		//font-weight: bold;
		color: #d08a8a;
		position: absolute;
		top: -20%;
		left: -5%;
	}
	
	.menu_item_text02{
		font-size: 1.2rem;
		color: #d08a8a;
	}
	
	.menu_item_text03{
		font-size: 2.3rem;
	}
	
	.menu_item_text04{
		font-size: 1.2rem;
	}
	
	.more_btn {
		display: inline-block;
		margin: 50px;
		padding: 10px 35px;
		background: #fff;
		color: #4169e1;
		border:1px solid #4169e1;
		transition: .4s;
		position: absolute;
		bottom: 0%;
		left: 65%;
	}
	
	.more_btn:hover {
		background: #4169e1;
		color: #fff;
	}
}

/**********************************************
	ここまでpc版indexメニューの設定
**********************************************/

/**********************************************
	ここからスライダーの設定
**********************************************/
.slider {
    width: 100%;
    margin: 0 auto;
}

/*-----------height調整----------*/
.slick-slide{
	height:auto!important;
}
/*------------------------------*/


/*-----------矢印表示----------*/
.slick-next{
    right:0!important;
}
.slick-prev{
    left:0!important;
}
.slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slick-arrow:before{
    font-size: 25px!important;
}
/*------------------------------*/

/**********************************************
	ここまでスライダーの設定
**********************************************/

/**********************************************
	ここから共通アイキャッチの設定
**********************************************/

/* アイキャッチ↓↓ */
.eye_job01{
	background: url("../image/job_img01.jpg") no-repeat center center / cover;
	height: 300px;
	color: #FFF;
	text-shadow:1px 1px 3px #000;
	font-size: 3rem;
	letter-spacing: 0.1em;
	font-weight: 300;
	font-family: 'Noto Serif JP', serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eye_job02{
	margin-top:4%;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	font-family: 'Noto Serif JP', serif;
}

.eye_job03{

	text-align: center;
	font-size: 0.7rem;
	font-weight: bold;
	font-family: 'Noto Serif JP', serif;
}

.eye_job04{
	background: url("../image/job_img02.jpg") no-repeat center center / cover;
	height: 300px;
	color: #FFF;
	text-shadow:1px 1px 3px #000;
	font-size: 3rem;
	letter-spacing: 0.1em;
	font-weight: 300;
	font-family: 'Noto Serif JP', serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eye_job05{
	background: url("../image/job_img03.jpg") no-repeat center center / cover;
	height: 300px;
	color: #FFF;
	text-shadow:1px 1px 3px #000;
	font-size: 3rem;
	letter-spacing: 0.1em;
	font-weight: 300;
	font-family: 'Noto Serif JP', serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eye_job06{
	background: url("../image/job_img04.jpg") no-repeat center center / cover;
	height: 300px;
	color: #FFF;
	text-shadow:1px 1px 3px #000;
	font-size: 3rem;
	letter-spacing: 0.1em;
	font-weight: 300;
	font-family: 'Noto Serif JP', serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eye_job07{
	background: url("../image/job_img05.jpg") no-repeat center center / cover;
	height: 300px;
	color: #FFF;
	text-shadow:1px 1px 3px #000;
	font-size: 3rem;
	letter-spacing: 0.1em;
	font-weight: 300;
	font-family: 'Noto Serif JP', serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eye_job08{
	background: url("../image/job_img13.jpg") no-repeat center center / cover;
	height: 300px;
	color: #FFF;
	text-shadow:1px 1px 3px #000;
	font-size: 3rem;
	letter-spacing: 0.1em;
	font-weight: 300;
	font-family: 'Noto Serif JP', serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */
	.eye_job01{
		font-size: 2.3rem;
	}
}
/* アイキャッチ↑↑ */

/**********************************************
	ここまで共通アイキャッチの設定
**********************************************/

/**********************************************
	ここからjob&flow&recruit 共通部分
**********************************************/

/* 施工実績↓↓ */
.eye_works01{
	background: url("../image/works_img02.jpg") no-repeat center center / cover;
	height: 400px;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
}

.btn04 a {
	position: absolute;
	top: 50%;/*真ん中に配置*/
	left: 50%;/*真ん中に配置*/
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	display: flex;
	justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
	align-items: center;
	margin: 0 auto;
	padding: 8px;
	width: 260px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	border: 1px solid #fff;
	transition: .4s;
}

.btn04 a::before {
	content: '';
	width: 10px;/* >の幅 */
	height: 10px;/* >の高さ */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	transform: rotate(45deg);
}

.btn04 a:hover {
	color: #fff;
	background-color: #a0c4d3;
}

.btn04 a:hover::before { /* beforeにすると < が前 afterにすると後 */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
}

@media screen and (min-width:768px){/* 767px以上の幅の場合に適応される */
	.btn04 a {
		padding: 20px;
		width: 400px;/* ボタンの幅 */
		font-size: 2rem;
	}
	
	.btn04 a::before {
		width: 20px;/* >の幅 */
		height: 20px;/* >の高さ */
	}

}
/* 施工実績↑↑ */

/* 会社案内 採用情報↓↓ */
.job_contents04 {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

 .job_contents04 img {
	width: 100%;
	vertical-align: bottom; /* 下の隙間をなくす */
}

 .job_link01 {
	width: 50%;
	margin: 0 auto;
	margin: 5%;
}

 .job_link02 {
	width: 50%;
	margin: 0 auto;
	margin: 5%;
}

.btn05 a {
	position: absolute;
	top: 50%;/*真ん中に配置*/
	left: 25%;/*真ん中に配置*/
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	display: flex;
	justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
	align-items: center;
	margin: 0 auto;
	padding: 15px;
	width: 300px;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	border: 1px solid #fff;
	transition: .4s;
}

.btn05 a::before {
	content: '';
	width: 15px;/* >の幅 */
	height: 15px;/* >の高さ */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	transform: rotate(45deg);
}

.btn05 a:hover {
	color: #fff;
	background-color: #a0c4d3;
}

.btn05 a:hover::before { /* beforeにすると < が前 afterにすると後 */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
}

.btn06 a {
	position: absolute;
	top: 50%;/*真ん中に配置*/
	left: 75%;/*真ん中に配置*/
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	display: flex;
	justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
	align-items: center;
	margin: 0 auto;
	padding: 15px;
	width: 300px;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	border: 1px solid #fff;
	transition: .4s;
}

.btn06 a::before {
	content: '';
	width: 15px;/* >の幅 */
	height: 15px;/* >の高さ */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	transform: rotate(45deg);
}

.btn06 a:hover {
	color: #fff;
	background-color: #a0c4d3;
}

.btn06 a:hover::before { /* beforeにすると < が前 afterにすると後 */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */
	.flexbox {
		display: block;
		margin: 4% 7%;
	}
	.flexbox .job_link01 {
	    width: 100%;
	    margin: 10% auto;
	}
	.flexbox .job_link02 {
	    width: 100%;
	    margin: 10% auto;
	}

	.flexbox .btn05 a {
		position: absolute;
		top: 25%;/*真ん中に配置*/
		left: 50%;/*真ん中に配置*/
		-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
		-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
		transform: translate(-50%,-50%);/*文字分のズレを補正*/
		margin:0;/*余計な隙間を除く*/
		padding:0;/*余計な隙間を除く*/
		display: flex;
		justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
		align-items: center;
		margin: 0 auto;
		padding: 8px;
		width: 260px;
		color: #fff;
		font-size: 1.4rem;
		font-weight: bold;
		border: 1px solid #fff;
		transition: .4s;
	}
	
	.flexbox .btn05 a::before {
		content: '';
		width: 10px;/* >の幅 */
		height: 10px;/* >の高さ */
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
		transform: rotate(45deg);
	}
	
	.flexbox .btn05 a:hover {
		color: #fff;
		background-color: #a0c4d3;
	}
	
	.flexbox .btn05 a:hover::before { /* beforeにすると < が前 afterにすると後 */
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
	}
	
	.flexbox .btn06 a {
		position: absolute;
		top: 75%;/*真ん中に配置*/
		left: 50%;/*真ん中に配置*/
		-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
		-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
		transform: translate(-50%,-50%);/*文字分のズレを補正*/
		margin:0;/*余計な隙間を除く*/
		padding:0;/*余計な隙間を除く*/
		display: flex;
		justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
		align-items: center;
		margin: 0 auto;
		padding: 8px;
		width: 260px;
		color: #fff;
		font-size: 1.4rem;
		font-weight: bold;
		border: 1px solid #fff;
		transition: .4s;
	}
	
	.flexbox .btn06 a::before {
		content: '';
		width: 10px;/* >の幅 */
		height: 10px;/* >の高さ */
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
		transform: rotate(45deg);
	}
	
	.flexbox .btn06 a:hover {
		color: #fff;
		background-color: #a0c4d3;
	}
	
	.flexbox .btn06 a:hover::before { /* beforeにすると < が前 afterにすると後 */
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
	}
}
/* 会社案内 採用情報↑↑ */

/* お問い合わせ↓↓ */
.eye_contact01 {
	background: url("../image/recruit_img04.jpg") no-repeat center center / cover;
	height: 400px;
	position: relative;
	width: 100%;
	margin: 0 auto;
}

 .eye_contact01 img {
	width: 100%;
	vertical-align: bottom; /* 下の隙間をなくす */
}

 .eye_con01 {
	width: 100%;
	margin: 0 auto;
	padding-top: 3%;
	text-align: center;
	color: #fff;
	font-size: 2.8rem;
	font-family: 'Noto Serif JP', serif;
}

 .eye_con02 {
	width: 50%;
	margin: 0 auto;
	padding: 8% 0 0 4%;
	text-align: center;
	color: #fff;
	font-size: 2.5rem;
	font-family: 'Noto Serif JP', serif;
	flex-grow: 1;
	position: absolute;
	top: 12%;/*真ん中に配置*/
	left: 0%;/*真ん中に配置*/
}

 .eye_con03 {
	flex-grow: 2;
	width: 50%;
	margin: 0 auto;
	margin: 5%;
}

 .tel01 {
	text-align: center;
	color: #fff;
	font-size: 3.3rem;
	font-family: 'Noto Sans JP', sans-serif;
}

 .tel01 a {
	color: #fff;
	text-decoration:none;
}

.flexbox_con{
	flex-wrap: wrap; /* フレックス折り返し指定 */
}
.btn07 a {
	position: absolute;
	top: 57%;/*真ん中に配置*/
	left: 75%;/*真ん中に配置*/
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	display: flex;
	justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
	align-items: center;
	margin: 0 auto;
	padding: 15px;
	width: 300px;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	border: 1px solid #fff;
	transition: .4s;
}

.btn07 a::before {
	content: '';
	width: 15px;/* >の幅 */
	height: 15px;/* >の高さ */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	transform: rotate(45deg);
}

.btn07 a:hover {
	color: #fff;
	background-color: #a0c4d3;
}

.btn07 a:hover::before { /* beforeにすると < が前 afterにすると後 */
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
}

@media screen and (max-width: 1024px) { /* 1024pxまでの幅の場合に適応される(タブレット) */
	 .eye_con02 {
		padding-top: 14%;
		font-size: 1.7rem;
	}

.btn07 a {
	top: 55%;/*真ん中に配置*/
	}
}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */
	.flexbox_con {
		display: block;
		margin: 4% 7%;
	}
	.flexbox_con .eye_con01 {
	    width: 100%;
	    margin: 10% auto;
		position: absolute;
		top: 0%;/*真ん中に配置*/
		left: 0%;/*真ん中に配置*/
		font-size: 1.4rem;
	}
	.flexbox_con .eye_con02 {
	    width: 100%;
	    margin: 10% auto;
		font-size: 1.7rem;
		padding: 8% 0 0 0;

	}
	.flexbox_con .eye_con03 {
	    width: 100%;
	    margin: 10% auto;
	}
	
	.flexbox_con .btn07 a {
		position: absolute;
		top: 75%;/*真ん中に配置*/
		left: 50%;/*真ん中に配置*/
		-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
		-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
		transform: translate(-50%,-50%);/*文字分のズレを補正*/
		margin:0;/*余計な隙間を除く*/
		padding:0;/*余計な隙間を除く*/
		display: flex;
		justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
		align-items: center;
		margin: 0 auto;
		padding: 8px;
		width: 260px;
		color: #fff;
		font-size: 1.4rem;
		font-weight: bold;
		border: 1px solid #fff;
		transition: .4s;
	}
	
	.flexbox .btn07 a::before {
		content: '';
		width: 10px;/* >の幅 */
		height: 10px;/* >の高さ */
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
		transform: rotate(45deg);
	}
	
	.flexbox .btn07 a:hover {
		color: #fff;
		background-color: #a0c4d3;
	}
	
	.flexbox .btn07 a:hover::before { /* beforeにすると < が前 afterにすると後 */
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
	}
}
/* お問い合わせ↑↑ */

/**********************************************
	ここまでjob&flow&recruit 共通部分
**********************************************/

/**********************************************
	ここからjobの設定
**********************************************/

/* job コンテンツ↓↓ */
.job_contents01 {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 4% 0;
}
 .job_contents01 img {
	width: 100%;
	vertical-align: bottom; /* 下の隙間をなくす */
}

 .job_text01 {
	position: absolute;
	left: 3%;
	top: 11%;
	color: #FFF;
	font-size: 1.5rem;
	font-weight: 500;
	font-family: 'Noto Serif JP', serif;
}

 .job_text02 {
	padding: 30px 30px 0 30px;
	text-align: center;
	color: #FFF;
	font-size: 2rem;
	font-weight: 500;
	font-family: 'Noto Serif JP', serif;
}

 .job_text03 {
	padding: 45px;
	color: #FFF;
	line-height: 1.7;/*行高は1に*/
}

 .flexbox {
	display: flex;
}
 .box1 {
	width: 50%;
	margin: 0 auto;
}
 .box2 {
	width: 50%;
	margin: 0 auto ;
	background: #002e73;
}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */
	.flexbox {
		display: block;
		margin: 4% 7%;
	}
	.flexbox .box1 {
	    width: 100%;
	    margin: 0 auto;
	}
	.flexbox .box2 {
	    width: 100%;
	    margin: 0 auto;
	}
	.job_text01 {
		position: absolute;
		left: 12%;
		top: 4%;
	}
}
/* job コンテンツ↑↑ */

/* job なんでもおまかせ↓↓ */

.job_contents02{
	color: #ea5353;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	font-family: 'Noto Serif JP', serif;
	border-bottom: 1px solid #ea5353; 
	margin: 0 5%;
	padding-bottom:10px;
}

.job_contents03{
	width: 100%;
	margin: 10px auto;
	position: relative;
}	/*スマホ画面用のCSS*/

.job_contents03 li{
	display: block;
	padding: 20px;
	margin: 0 auto;
	text-align: center;
	width: 85%;
	color: #002e73;
	font-size: 1.4rem;
	font-weight: 600;
	font-family: 'Noto Serif JP', serif;

}

@media screen and (min-width:768px){/* 767px以上の幅の場合に適応される */
	.job_contents03{
		display: flex;
		justify-content: space-evenly;
		width: 90%;
	}/*PC画面用のCSS*/

	.job_contents03 li{
		color: #002e73;
		font-size: 1.4rem;
		font-weight: 600;
		font-family: 'Noto Serif JP', serif;
	}

.job_contents02{
	font-size: 2.5rem;
}

}
/* job なんでもおまかせ↑↑ */

/**********************************************
	ここまでjobの設定
**********************************************/

/**********************************************
	ここからflowの設定
**********************************************/

/* flow コンテンツ↓↓ */
.flow_contents01 {
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 5%;
	background: #d5e2eb;
	border-bottom:2px dashed #fff;
}
 .flow_contents01 img {
	width: 100%;
	vertical-align: bottom; /* 下の隙間をなくす */
}

.flow_text01 {
	font-size: 6rem;
	color: #d0b288;
	position: absolute;
	top: -10%;
	left: 0%;
}

/* .flow_text01 {
	font-size: 6rem;
	color: #d0b288;
	position: absolute;
	top: 6%;
	left: 10%;
}*/

 .flow_text02 {
	padding: 20px 20px 20px 160px;
	color: #3a6ba2;
	font-size: 2rem;
	font-weight: 600;
}

 .flow_text03 {
	padding: 40px;
	color: #000;
	font-size: 1.5rem;
	line-height: 1.5;/*行高は1に*/
}

 .flexbox {
	display: flex;
}

 .flow_box01 {
	width: 50%;
	margin: 0 auto;
}

 .flow_box02 {
	width: 45%;
	margin: 0 auto ;
}

@media screen and (max-width: 768px) { /* 768pxまでの幅の場合に適応される tbまで */

	.flexbox {
		display: block;
	}
	.flexbox .flow_box01 {
	    width: 100%;
	    margin:0 auto;
	}
	.flexbox .flow_box02 {
	    width: 100%;
	    margin: 0 auto;
	}
	/*.flow_text01 {
		font-size: 5rem;
		position: absolute;
		left: 5%;
		top: -1%;
	}*/
	 .flow_text02 {
		padding: 5px 20px 20px 100px;
	}
	 .flow_text03 {
		padding: 20px;
		color: #000;
		font-size: 1rem;
		line-height: 1.5;/*行高は1に*/
	}
}
/* flow コンテンツ↑↑ */

/**********************************************
	ここまでflowの設定
**********************************************/

/**********************************************
	ここからcompanyの設定
**********************************************/

/* company 社長挨拶↓↓ */
.comp_greeting01 {
	position: relative;
	width: 100%;
	//max-width: 1000px;
	margin: 0 auto;
	padding: 7% 0;
	background: #e9e9e9;
}
 .comp_greeting01 img {
	position: absolute;
	width: 100%;
	max-width: 500px;
	right: 5%;
	top: -8%;

	vertical-align: bottom; /* 下の隙間をなくす */
}

 .greeting_text01 {
	padding: 0 5% 0 10%;
	color: #000;
	font-size: 1.4rem;
}

 .greeting_text02 {
	position: absolute;
	right: 3%;
	bottom: 3%;
	color: #000;
	font-size: 1.5rem;
	font-weight: 500;
	font-family: 'Noto Serif JP', serif;
}

 .flexbox {
	display: flex;
}
 .gree_box1 {
	width: 50%;
	margin: 0 auto;
}
 .gree_box2 {
	width: 50%;
	margin: 0 auto ;
}

@media screen and (max-width: 1024px) { /* 1024pxまでの幅の場合に適応される(タブレット) */

	.flexbox {
		display: block;
	}

	.flexbox .gree_box1 {
	    width: 100%;
	    margin: 0 auto;
		padding-top: 75%;
	}

	.flexbox .gree_box2 {
	    width: 100%;
	    margin: 0 auto;
	}
	.greeting_text01 {
		padding: 0 5% 5% 5%;
		font-size: 1.2rem;
	}

	.greeting_text02 {
		position: absolute;
		right: 5%;
		bottom: 0%;
	}

	 .comp_greeting01 img {
		position: absolute;
		max-width: 100%;
		right: 0%;
		top: 0%;
		}

}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */

	.flexbox .gree_box1 {
		padding-top: 80%;
	}

 .comp_greeting01 img {
		right: 0%;
		top: 0%;
	}

	.greeting_text01 {
		padding: 2%;
		font-size: 1rem;
	}

	.greeting_text02 {
		position: absolute;
		right: 3%;
		bottom: -2%;
	}
}
/* company 社長挨拶↑↑ */

.greeting01{
	background: #e9e9e9;
	margin:5%;
	padding:8%;
}

 .greeting02 {
	text-align: right;
	color: #000;
	font-size: 1.3rem;
	font-weight: 500;
	font-family: 'Noto Serif JP', serif;
}

/* company 会社概要↓↓ */
.com_img01 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
	background: url("../image/gaikan02.jpg") no-repeat center center / cover;
	height: 1185px;
	letter-spacing: 0.1em;
	justify-content: center;
	align-items: center;
}

 .flexbox_com {
	display: flex;
	margin: 0 auto ;
	width: 80%;
	padding: 5%;
	background: #fff;
}

 .com_text01 {
	padding-bottom:10px;
	font-size: 1.3rem;
	font-weight: 500;
	text-align: center;
}

 .com_text02 {
	padding: 0 0 10px 30px;
	font-size: 1.3rem;
	font-weight: 500;
}

 .com_box1 {
	width: 20%;
	margin: 0 auto;
	border-bottom: solid 2px #5472cd;
}

 .com_box2 {
	width: 80%;
	margin: 0 auto;
	border-bottom: solid 2px #cce4ff;
}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */
	.flexbox_com {
		display: block;
		padding: 5%;
	}
	.flexbox_com .com_box1 {
	    width: 60%;
		font-size: 0.9rem;
	    margin: 0 auto;
		padding-top: 20px;
	}
	.flexbox_com .com_box2 {
	    width: 90%;
		font-size: 0.9rem;
	    margin: 0 auto;
		text-align: center;
		padding-top: 10px;
	}
	 .com_text01 {
		font-size: 1rem;
	}
	 .com_text02 {
		font-size: 1rem;
		padding: 0 0 10px 0;
	}
}
/* company 会社概要↑↑ */

/* company スタッフ紹介↓↓ */
.staff_contents01 {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 5%;
}

 .staff_contents01 img {
	width: 100%;
	vertical-align: bottom; /* 下の隙間をなくす */
}

 .staff_text01 {
	margin: 0 10px 10px 50px; 
	padding: 10px;
	border-left: 10px solid #76a7cf;
}

 .staff_text02 {
	font-size: 2rem;
	font-weight: bold;
}

 .staff_text03 {
	padding-left: 20px;
	font-size: 1.5rem;
	font-weight: 500;
}

 .staff_text04 {
	padding: 20px 0 0 50px;
	font-size: 1.5rem;
}

 .staff_text05 {
	padding: 20px 50px;
	font-size: 1rem;
}

/* .staff_text02 {
	padding: 45px;
	color: #FFF;
	line-height: 1.7;/*行高は1に*/
/*}*/

 .staff_box1 {
	width: 50%;
	margin: 0 auto;
}
 .staff_box2 {
	width: 50%;
	margin: 0 auto ;
}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */
	.flexbox {
		display: block;
		//margin: 4% 7%;
	}
	.flexbox .staff_box1 {
	    width: 100%;
	    margin: 0 auto;
	}
	.flexbox .staff_box2 {
	    width: 100%;
	    margin: 0 auto;
		padding-top: 20px;
	}
	 .staff_text01 {
		margin-left: 0px;
	}

}
/* company スタッフ紹介↑↑ */

/**********************************************
	ここまでcompanyの設定
**********************************************/

/**********************************************
	ここからrecruitの設定
**********************************************/

/* recruit メッセージ↓↓ */

.message_text01{
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	padding-bottom: 4%;
}

.message_contents01 {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 4%;
}

 .message_contents01 img {
	width: 100%;
	vertical-align: bottom; /* 下の隙間をなくす */
}

 .message_text02 {
	padding: 20px 0 20px 50px;
	font-size: 1rem;
}

 .message_box1 {
	width: 50%;
	margin: 0 auto;
}

 .message_box2 {
	width: 50%;
	margin: 0 auto ;
}

.btn08 a {
	position: absolute;
	top: 90%;
	left: 50%;
	display: flex;
	-ms-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	-webkit-transform: translate(-50%,-50%);/*文字分のズレを補正*/
	transform: translate(-50%,-50%);/*文字分のズレを補正*/
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	justify-content: space-evenly;/* 中身のアイテムの間隔を指定 */
	align-items: center;
	margin: 0 auto;
	padding: 8px;
	width: 250px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 500;
	background: #3a6ba2;
	transition: .4s;
}

.btn08 a::before {
	content: '';
	width: 10px;/* >の幅 */
	height: 10px;/* >の高さ */
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.btn08 a:hover {
	color: #fff;
	background-color: #a0c4d3;
}

.btn08 a:hover::before { /* beforeにすると < が前 afterにすると後 */
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
}

@media screen and (min-width:768px){/* 767px以上の幅の場合に適応される */
	.btn08 a {
		position: absolute;
		top: 90%;
		left: 73%;
		padding: 10px;
	}
	
	.btn08 a::before {
		width: 10px;/* >の幅 */
		height: 10px;/* >の高さ */
	}
}

@media screen and (max-width: 1024px) { /* 1024pxまでの幅の場合に適応される(タブレット) */
	.btn08 a {
		position: absolute;
		top: 90%;
		right: 0%;
		padding: 10px;
	}

	 .message_text02 {
		padding: 20px 20px 120px 20px;
	}
}

@media screen and (max-width: 767px) { /* 767pxまでの幅の場合に適応される */
	.flexbox {
		display: block;
	}
	.flexbox .message_box1 {
	    width: 100%;
	    margin: 0 auto;
	}
	.flexbox .message_box2 {
	    width: 100%;
	    margin: 0 auto;
	}
	 .message_text02 {
		padding: 20px 20px 100px 20px;
	}
}
/* recruit メッセージ↑↑ */

/* recruit 先輩の声↓↓ */

.background01{
	background: #d5e2eb;
	padding: 5%;
}

.voice_contents01 {
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 5%;
	background: #fff;
}

 .voice_contents01 img {
	width: 100%;
	vertical-align: bottom; /* 下の隙間をなくす */
}

 .voice_text01 {
	padding: 0 10px 10px 30px;
	font-size: 1.5rem;
	text-align: right;
}

 .voice_text02 {
	padding: 0 0 10px 10px;
	font-size: 2.2rem;
	font-weight: bold;
}

 .voice_text03 {
	font-size: 1rem;
}

 .voice_text04 {
	padding: 20px;
	color: #3a6ba2;
	font-size: 1.6rem;
	font-weight: 600;
}

 .voice_text05 {
	padding: 20px;
	font-size: 1rem;
	line-height: 1.5;/*行高は1に*/
}

 .flexbox {
	display: flex;
}

 .voice_box01 {
	width: 50%;
	margin: 0 auto;
}

 .voice_box02 {
	width: 45%;
	margin: 0 auto ;
}

@media screen and (max-width: 1024px) { /* 1024pxまでの幅の場合に適応される(タブレット) */
	 .voice_text02 {
		font-size: 2rem;
	}
}

@media screen and (max-width: 768px) { /* 768pxまでの幅の場合に適応される tbまで */

	.flexbox {
		display: block;
	}
	.flexbox .voice_box01 {
	    width: 100%;
	    margin:0 auto;
	}
	.flexbox .voice_box02 {
	    width: 100%;
	    margin: 0 auto;
	}
	.voice_text01 {
		padding: 10px;
		font-size: 1.2rem;
		text-align: center;
	}
	 .voice_text02 {
		font-size: 1.5rem;
	}
	 .voice_text04 {
		padding: 10px 0;
		font-size: 1.3rem;
	}
	 .voice_text05 {
		padding: 0;
		font-size: 1rem;
	}
}
/* recruit 先輩の声↑↑ */

/* recruit 募集要項↓↓ */
.background02{
	background: #fff;
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 5%;
}

p {
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	//margin: 60px auto 40px;
}
table {
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing: 0;
}
.tbl-r01 th {
	background: #fff2dd;
	border: solid 1px #ccc;
	padding: 10px;
}
.tbl-r01 td {
	background: #fff;
	border: solid 1px #ccc;
	padding: 10px;
}
 
@media screen and (max-width: 768px) {
	.background01{
		padding-bottom: 10%;
	}
	.last01 td:last-child {
		border-bottom: solid 1px #ccc;
		max-width: 100%;
	}
	.tbl-r01 {
		width: 100%;
	}
	.tbl-r01 th,
	.tbl-r01 td {
		border-bottom: none;
		display: block;
		max-width: 100%;/* 表を真ん中寄せ */
	}
}
/* recruit 募集要項↑↑ */

/**********************************************
	ここまでrecruitの設定
**********************************************/

/**********************************************
	ここからworksの設定
**********************************************/

/* works01 施工実績一覧↓↓*/
.background03{
	width: 80%;
	margin:0 auto;
}
.works_text01{
	margin:4% 15px;
	padding: 10px;
	text-align: left;
	font-size: 1.3rem;
	font-weight: bold;
	font-family: 'Noto Serif JP', serif;
	border-bottom: solid 1px #3a6ba2;
}
.grid {
	display: grid;/*グリッドレイアウト宣言*/
	gap: 10px;/*グリッド間の余白*/
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));/*1fr単位を使うと横幅いっぱいで余白ができずに配置可能*/
}
.item {
	//border-radius: 10px;
	background: #fff;
	padding: 15px;
	text-align: center;
}
img {
	max-width: 100%;
	height: auto;
}
p {
	text-align: center;
	font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
	.background03{
		width: 100%;
		margin:0 auto;
	}
}
/* works01 施工実績一覧↑↑ */

/* works02 施工実績↓↓ */
.background04{
	width: 80%;
	margin: 0 auto;
}

.works_text02{
	margin: 2% 15px;
	text-align: left;
	font-size: 1.5rem;
	font-weight: bold;
}

.works_text03{
	margin: 4% 0;
	padding: 10px 10px 10px 20px;
	text-align: left;
	font-size: 1.3rem;
	font-weight: bold;
	background: #002e73;
	color: #fff;
}

table {
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
	margin-bottom:4%;
}
.tbl-r02 th {
	background: #d5e1eb;
	border: solid 1px #ccc;
	padding: 10px;
}
.tbl-r02 td {
	background: #fff;
	border: solid 1px #ccc;
	padding: 10px;
}
 
@media screen and (max-width: 768px) {
	.background04{
		width: 90%;
		margin: 0 auto;
		padding-bottom: 4%;
	}

	.last td:last-child {
		border-bottom: solid 1px #ccc;
		max-width: 100%;
	}
	.tbl-r02 {
		width: 100%;
	}
	.tbl-r02 th,
	.tbl-r02 td {
		border-bottom: none;
		display: block;
		max-width: 100%;/* 表を真ん中寄せ */
	}
}

/* works02 施工実績↑↑ */

/**********************************************
	ここまでworksの設定
**********************************************/

/**********************************************
	ここからcontactの設定
**********************************************/
.background05{
	width: 70%;
	margin:0 auto;
}

/* contact メールフォーム↓↓*/
.con_text01{
	width:100%;
	max-width: 800px;
	text-align: center;
	margin: 0 auto;
	font-size: 1.2rem;
	line-height: 1.5;/*行高は1に*/
	padding-bottom: 20px;
}

table {
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
	margin-bottom:4%;
}
.con_tbl01 th {
	background: #d5e1eb;
	border: solid 1px #ccc;
	padding: 20px;
	width: 30%;
	text-align: left;
}
.con_tbl01 td {
	background: #fff;
	border: solid 1px #ccc;
	padding: 20px;
}

.con_form01{
	width: 70%;
	height: 40px;
	border:2px solid #bbbbbb;
	border-radius:5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing:border-box;/*フォームを枠からはみ出ないようにする*/
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Chrome, Safari */
	background-color: #fff;
	transition: 0.5s;/* じわりと色変更時間 */
	outline: none;/*枠線の色を消す*/
}

.con_form01:focus{/*フォーカスさせたいときに入れるcss*/
	background-color: #eee;/* 背景色変更 */
	border-color: #3a6ba2;/* 枠線の色変更 */
}

.con_form02{
	width: 100%;
	height: 100px;
	border: 2px solid #bbbbbb;
	border-radius:5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing:border-box;/*フォームを枠からはみ出ないようにする*/
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Chrome, Safari */
	background-color: #fff;
	transition: 0.5s;/* じわりと色変更時間 */
	outline: none;/*枠線の色を消す*/
}

.con_form02:focus{/*フォーカスさせたいときに入れるcss*/
	background-color: #eee;/* 背景色変更 */
	border-color: #3a6ba2;/* 枠線の色変更 */
}

/* contact アイコン・ボタン↓↓*/

.icon01{
	width:100px;
	margin:10px 0 10px 20px;
	padding: 3px 15px;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 600;
	background: #3a6ba2;
	color: #fff;
}

.btn_form01{
	padding: 20px;
	margin: 0 0 8% 0;
	font-weight: bold;
	display: inline-block;
	text-decoration: none !important;
	font-size: 1.2rem;
	border-radius: 5px;
	border:none; outline:none;
	width: 250px;
	height: 65px;
	transition: 0.5s;
	background-color: #3a6ba2;
	color: #fff !important;
}

.btn_form01:hover {
	background-color: #d5e1eb;
}
/* contact アイコン・ボタン↑↑*/

@media screen and (max-width: 1024px) { /* 1024pxまでの幅の場合に適応される(タブレット) */
	.con_tbl01 th {
		width: 35%;
	}
}

@media screen and (max-width: 768px) { /* 768pxまでの幅の場合に適応される(スマホ) */
	.background05{
		width: 90%;
		margin: 0 auto;
		padding-bottom: 4%;
	}
	.last td:last-child {
		border-bottom: solid 1px #ccc;
		max-width: 100%;
	}
	.con_tbl01 {
		width: 100%;
	}
	.con_tbl01 th,
	.con_tbl01 td {
		margin: 0 auto;
		border-bottom: none;
		display: block;
		width: 90%;
		//max-width: 100%;/* 表を真ん中寄せ */
	}
	.con_text01{
		width:80%;
		max-width: 800px;
		text-align: center;
		margin: 0 auto;
		font-size: 1.3rem;
		padding-bottom: 0;
	}
	.con_form01{
		width: 100%;
	}
	/*.icon01{
		margin-left: 100px;
	}*/
}
/* contact メールフォーム↑↑*/

/**********************************************
	ここまでcontactの設定
**********************************************/

/**********************************************
	ここからtopicsの設定
**********************************************/

.topics_text01{
	margin: 4% 0;
	padding: 10px 10px 10px 20px;
	text-align: left;
	font-size: 1.1rem;
	font-weight: 400;
	background: #002e73;
	color: #fff;
}

/**********************************************
	ここまでtopicsの設定
**********************************************/

/**********************************************
	ここからprivacyの設定
**********************************************/

.pry_text01{
	padding: 20px;
	color: #3a6ba2;
	font-size: 1.6rem;
	font-weight: 600;
}
.pry_text02{
	padding:10px 20px 40px 20px;
	font-size: 1rem;
	line-height: 1.5;/*行高は1に*/
}

/**********************************************
	ここまでprivacyの設定
**********************************************/

/**********************************************
	ここからscrollanimeの設定
**********************************************/

/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    //animation-duration: 5s;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}

/* アニメーション指定ここまで↑↑ */

@media screen and (max-width: 768px) { /* 768pxまでの幅の場合に適応される(スマホ) */
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(0px);}
.slide-left {transform: translateX(-0px);}
}

/**********************************************
	ここまでscrollanimeの設定
**********************************************/

/**********************************************
	ここからkanriの設定
**********************************************/

/* hmenu00.phpここから↓↓ */

.k_waku01{
	margin: 5%;
}

p.k_text01 {
	width:300px;
	margin: 0 auto;
	letter-spacing: 0.1em;
	font-size: 1.3rem;
	font-weight: bold;
	font-family: 'Noto Serif JP', serif;
}
 
    p.k_text01 a {
        padding:5%;
        display:block;
        position:relative;
        background-color:#fff;
        text-align:center;
    }
 
    p.k_text01 a:before {
        content:"";
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        width:0;
        height:2px;
        background-color:#3a6ba2;
        -webkit-transition:width 0.4s ease;
        -moz-transition:width 0.4s ease;
        -o-transition:width 0.4s ease;
        transition:width 0.4s ease;
    }
 
    p.k_text01 a:hover:before {
        width:100%;
    }

a.k_link01:link {
	color: #000;
}

a.k_link01:visited {
	color: #696969;
} 

a.k_link01:hover {
	color: #696969;
	transition: .4s;
}

.k_text02{
	color: #696969;
	text-align: center;
	margin:3%;
}

p.k_text05 {
	width:200px;
	margin: 2% auto;
	letter-spacing: 0.1em;
	font-size: 1rem;
	font-weight: bold;
}
 
    p.k_text05 a {
        padding:5%;
        display:block;
        position:relative;
        background-color:#fff;
        text-align:center;
    }
 
    p.k_text05 a:before {
        content:"";
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        width:0;
        height:2px;
        background-color:#3a6ba2;
        -webkit-transition:width 0.4s ease;
        -moz-transition:width 0.4s ease;
        -o-transition:width 0.4s ease;
        transition:width 0.4s ease;
    }
 
    p.k_text05 a:hover:before {
        width:100%;
    }
/* hmenu00.phpここまで↑↑ */

/* iksmi010.phpここから↓↓ */

.table01 {
	width:850px;
	border-collapse: collapse;
	text-align: center;
	margin:0 auto;
	font-family: 'Noto Sans JP', sans-serif;
}

.table01 th {
	color: #3a6ba2;/*文字色*/
	border: solid 1px #c0c0c0;/*線色*/
	background: #d5e1eb;/*背景色*/
	padding:5px;
}

.table01 td {
	color: #000;/*文字色*/
	border: solid 1px #c0c0c0;/*線色*/
	background: #fff;/*背景色*/
	text-align: center;
	padding:10px;
}

.kanri_btn {
	padding: 2px 8px;
	background: #fff;
	color: #4169e1;
	font-weight: bold;
	border:1px solid #4169e1;
	transition: .4s;
	font-family: 'Noto Sans JP', sans-serif;
}

.kanri_btn:hover {
	background: #4169e1;
	color: #fff;
}

.kanri_btn02{
	padding: 8px 20px;
	font-size: 1.1rem;
}
 
@media screen and (max-width: 640px) {
  .scroll {
    overflow-x: auto;
  }
}

/* iksmi010.phpここまで↑↑ */

/* iksmi014.phpここから↓↓ */
table {
	font-family: 'Noto Sans JP', sans-serif;
}

.tab01 th{
	width:200px;
	color: #3a6ba2;
	border: solid 1px #c0c0c0;/*線色*/
	background: #d5e1eb;/*背景色*/
	padding:5px;
	text-align: center;
}

.tab01 td{
	width:300px;
	color: #696969;
	border: solid 1px #c0c0c0;/*線色*/
	background: #fff;/*背景色*/
	padding:5px 10px;
}
/* フォーム装飾 input */
.cp_iptxt {
	position: relative;
	width: 100%;
	margin:3% 0;
}
.cp_iptxt input[type=text] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	/*margin: 8px 0;*/
	/*padding: 0.3em;*/
	transition: 0.3s;
	border: 1px solid #542200;
	border-radius: 4px;
	outline: none;
}
.cp_iptxt input[type=text]:focus {
	border-color: #4169e1;/* 色変更 */
}
.cp_iptxt input[type=text] {
	padding-left: 10px;
}

/* フォーム装飾 textarea */
.cp_iptxt02 {
	position: relative;
	width: 100%;
	height:150px;
	margin:3% 0 0 0;
}
.cp_iptxt02 textarea[type=text] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	/*height:150px;*/
	/*margin: 8px 0;*/
	/*padding: 0.3em;*/
	transition: 0.3s;
	border: 1px solid #542200;
	border-radius: 4px;
	outline: none;
}

.cp_iptxt02 textarea[type=text]:focus {
	border-color: #4169e1;/* 色変更 */
}

.cp_iptxt02 textarea[type=text] {
	padding-left: 10px;
}
/* iksmi014.phpここまで↑↑ */

/* iksmi014.phpここから↓↓ */

.grid {
	display: grid;/*グリッドレイアウト宣言*/
	gap: 10px;/*グリッド間の余白*/
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));/*1fr単位を使うと横幅いっぱいで余白ができずに配置可能*/
}
.item {
	//border-radius: 10px;
	background: #fff;
	padding: 15px;
	text-align: center;
}
img {
	max-width: 100%;
	height: auto;
}
p.ttl01 {
	text-align: center;
	font-size: 1.2rem;
	margin: 2% 0;
	padding: 1%;
	font-weight: bold;
	background: #002e73;
	color: #fff;
}

h1{
	margin:2%;
}

.kanri_btn03 {
	padding: 2% 30%;
	background: #fff;
	color: #4169e1;
	font-size: 1rem;
	font-weight: bold;
	border:1px solid #4169e1;
	transition: .4s;
}

.kanri_btn03:hover {
	background: #4169e1;
	color: #fff;
}

.k_text03{
	color: #696969;
}

.k_text04{
	color: #696969;
	margin-bottom: 10%;
	text-align: center;
}
/* iksmi020.phpここまで↑↑ */

/**********************************************
	ここまでkanriの設定
**********************************************/