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

body {
/* ----------------------------------------------------- */
/* 背景 */
/* ----------------------------------------------------- */
/* url(1つ目背景画像), url(2つ目背景画像), ... */
 	background-image: url(../images/Niccs_rogo_2.svg),
 					  url(../images/logo_bk_gray.svg),
					  url(../images/top_illust.png),
					  url(../images/top_haikei.png),
					  url(../images/top_haikei_2.png);
	background-repeat: no-repeat;

 /* 1つ目背景画像の位置, 2つ目背景画像の位置, ... */
 	background-position: left 33px top 0px,
 						 left 0px top 0px,
						 left 595px top 340px,
						 left 0px top 0px,
						 left 0px top 1220px;
						 
/* 1つ目背景画像のサイズ, 2つ目背景画像のサイズ, ... */
	background-size: 110px 94px,
					 180px 93px,
					 560px 425px,
					 1160px 1160px,
					 cover;
					 
/* ----------------------------------------------------- */
	
/* ----------------------------------------------------- */
/* サイト全体のフォント指定 */	
/* ----------------------------------------------------- */
	font-family: 'Noto Sans JP', sans-serif;
/* ----------------------------------------------------- */

}


/* ----------------------------------------------------- */
/* メニュー部 */
/* ----------------------------------------------------- */

/* ----------------------------------------------------- */
/* メニューバー */
/* ----------------------------------------------------- */
.gnavi__wrap {
    width: 1150px;				/* */
    margin: 0 auto;
    margin-top: 30px;
}
.gnavi__lists {
    display: flex;
    justify-content: center;	/* div 中央寄せ */
}
.gnavi__list {
    width: 20%;
    height: 50px;
    background-color: #0071BC;	/* ブルー(※キーカラー) */
    position: relative;
    transition: all .3s;
}
.gnavi__lists ul {
	padding-left:0;		/* リスト「・」無し */
}
.gnavi__lists li {
	list-style:none;	/* リスト「・」無し */
}
.gnavi__list:hover {
    background-color: #003152;
}
.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnavi__list:hover::before {
    background-color: #0071BB;
}
.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
/*    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all .3s;
*/
}
.gnavi__list:hover a {
    color: #fff;
}

/* ドロップダウンメニュー部分の実装 */
.dropdown__lists {
    transform: scaleY(0);/*デフォルトでは非表示の状態にしておく*/
    transform-origin: center top;/*変形を適応する基準をtopとする*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists {
    transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
    background-color: #005F9E;
    height: 50px;
    transition: all .3s;
    position: relative;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #3492d1;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #003558;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}
/* ----------------------------------------------------- */


/* ----------------------------------------------------- */
/* マイページ部 */
/* ----------------------------------------------------- */
.menu_area_mypage {
	background: #000000;	/* 黒 */
/*	border: 2px solid #FFF;*/ /* 輪郭 */
    border-radius: 10px;	/* ちょっとだけ角丸 */
	color: #FFF;
	width: 160px;			/* メニュー枠の幅 */
/*	height: 38px; */			/* メニュー枠の高さ */
	height: 50px;			/* メニュー枠の高さ */
	
	margin-left: auto;
	position: relative;	/* 左隣りからの位置を指定する */
	top: -67px;			/* 上 */
	right: 20px;		/* 右 */
	
	text-align: center;		/* text横中央寄せ */
	display:flex;			/* div 横並び */
	align-items: center;	/* 中身を中央寄せ */
	justify-content: center;

}
.menu_area_mypage:hover {
    background-color: #636363;	/* マウスが重なった時の色 */
}


/* ----------------------------------------------------- */
/* 要素マージン指定 */
/* ----------------------------------------------------- */
.mglft-10{
  margin-left: 10px;
}
.mgtop-30{
  margin-top: 30px;
}


/* ----------------------------------------------------- */
/* タイトル部 */
/* ----------------------------------------------------- */

/* Niccs タイトルロゴ */
.niccs_title_logo {
	margin-top: 80px;
/*	margin-top: -43px;*/
    padding-left: 165px;
	width: 490px;
}

/* 本サイトの説明 */
.site_explain {
	margin-top: 110px;
	margin-left: 165px;
}


/* ----------------------------------------------------- */
/* 本体 機能 リンク
/* ----------------------------------------------------- */


/* ----------------------------------------------------- */
/* ★アイテム配置 横幅80% ブロック要素中央★ */
/* ----------------------------------------------------- */
.item_narabi_oya {
	width: 80%;
	text-align: center;
	margin: 0 auto;
}


/* ----------------------------------------------------- */
/* 企業検索 / 受注・発注依頼 部 */
/* ----------------------------------------------------- */
/* 企業検索枠 */
.company_search {
	margin-top: 80px;
	margin-bottom: 30px;
}
/*
.company_search ul {
	display: flex;
	justify-content: center;
}
.company_search li {
	list-style: none;
}
*/

.search_container{
  margin: auto; /* 中央寄せ formもブロック要素の為 */
  position: relative;
  box-sizing: border-box;
}
.search_container input[type="text"]{
  border: none;
  height: 1.8em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container{
  border: 2px solid #3879D9;
  padding: 3px 5px;
  border-radius: 20px;
  height: 2.2em;
/*
  width: 265px;
*/
  width: 800px;
  overflow: hidden;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -5px;
  outline : none;
}
.search_container ::-webkit-input-placeholder {
  color: #3879D9;
}


/* ----------------------------------------------------- */
/* 受注・発注依頼 */
/* ----------------------------------------------------- */
.ordering_request {
	/*コレ*/
/*	text-align: center; */
	text-align: left;
	margin: 0px 0px 0px 135px;
/*	border: 1px solid #999; */
	padding: 10px;
/*	background: #f2f2f2; */
}


/* ----------------------------------------------------- */
/* バナー集 */
/* ----------------------------------------------------- */

/* ----------------------------------------------------- */
/* 説明 */
/* ----------------------------------------------------- */
.link_shien-explain {
	margin-top: 120px;	/* 上マージン */
}


/* ----------------------------------------------------- */
/* リンク集 */
/* ----------------------------------------------------- */
/* 左｜右を含む大枠 */
.flexbox_sienlinkarea {
	display: flex;
	text-align: center;
}
/* 左側エリア */
.flexbox_sienlinkarea .box-a {
	flex-grow: 1;
	position: relative;
	width: 50%;		/* 幅を左と右で50%(半々) */
	margin-right: 2em;	/* 右の隙間 */
}
/* 中央縦線 */
.flexbox_sienlinkarea .box-a::after {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 1rem;
	content: "";
	width: 1px;
	height: 100%;
	background-color: #0071BC;
}
/* 右側エリア */
.flexbox_sienlinkarea .box-b {
	flex-grow: 1;
	width: 50%;		/* 幅を左と右で50%(半々) */
}
/* リンクバナー画像の設定 */
.flexbox_sienlinkarea img {
	height: auto;				/* バナーの高さ */
	width: 330px;				/* バナーの幅 */
	border: 1px solid #00B0F0;	/* 輪郭 */
}
/* ガイド文字 ----------------------- */
/* カテゴリ(ガイド文字)要素<p>の設定 */
.flexbox_sienlinkarea p {
	margin: 0 auto 20px;
}
/* カテゴリ(ガイド文字)の枠の設定 */
.link_shien-guide {
	background: #0071BC;	/* ブルー(※キーカラー) */
/*	border: 2px solid #FFF;*/ /* 輪郭 */
    border-radius: 80px; 	/* ちょっとだけ角丸 */
	color: #FFF;
	text-align: center;
	width: 350px;
	height: 72px;
	
	display:flex;
	align-items: center;
	justify-content: center;
}
/* 中央にガイド文字を置きたい場合はこのブロックで包む */
.link_shien-guide-center {
    display: flex;				/* div 横並び */
    justify-content: center;	/* div 中央寄せ */
}

/* インデックス｜各種相談カテゴリ */
.flexbox_category {
	margin-bottom: 30px;
	width: 50%;
	
	/* 縦並び */
	display: flex;
	flex-flow: column;
}

/* 支援リンクのバナーと説明を含めた要素設定 */
.flexbox_unity {
	display: inline-block;
}


/* ----------------------------------------------------- */
/* Charworkエリア */
/* ----------------------------------------------------- */
.chatwork_info {
    padding: 40px;				/* 余白指定 */
    background-color: #FFFFFF;	/* 背景色指定 */
    height: 120px;              /* 高さ指定 */
    margin-top: 70px;			/* 上要素からのマージン */
    margin-bottom: 10px;		/* 下要素とのマージン */
    
	/* 幅いっぱい ★これをいれるとchromeで横バーがでてしまう */
/*	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
*/	
    display: flex;				/* div 横並び */
    justify-content: center;	/* div 中央寄せ */
}
.chatwork_info img {
	width: auto;
	height: 110px;
}
.chatwork_info_comm {
	position: relative;	/* 左隣りからの位置を指定する */
/*	top: 0px; */		/* 上 */
	left: 30px;			/* 左 */
}
.chatwork_info_icon {
	position: relative;	/* 左隣りからの位置を指定する */
	top: -51px;			/* 上 */
	left: 36px;			/* 左 */

/*	position: absolute; */          /* 位置指定 */
/*	top: 50%; */                    /* 親要素の半分下にずらす */
/*	left: 50%; */                  /* 親要素の半分右にずらす */
/*	transform: translateY(-50%) translateX(-50%); */    /* 要素自体の半分、上と左にずらす */
/*	padding: 20px; */              /* 余白指定 */
	
}
.chatwork_info_icon img {
	height: 93px;
	width: 130px;
}


/* フッター部 */
.footer_area {
    display: flex;				/* div 横並び */
    justify-content: center;	/* div 中央寄せ */
}
/* メニュー|フッター */
.footer_menu {
	margin-top: 15px;	/* 上マージン */
	color: #0071BC;		/* ブルー(※キーカラー) */
	font-size: 11px;	/* フォントサイズ */
	font-weight: bold;	/* 太文字 */
}
/* インフォメーション|フッター */
.footer_info {
	background: #0071BC;	/* ブルー(※キーカラー) */
	border: 2px solid #FFF; /* 輪郭 */
    border-radius: 80px;	/* ちょっとだけ角丸 */
	color: #FFF;
	text-align: center;
	width: 930px;
	height: 45px;
	
	display:flex;
	align-items: center;
	justify-content: center;
}

/* 長崎市北部商工会 連絡先|フッター */
.footer_NHS_addr {
	text-align: center;
/*	margin-top: 0px; */	/* 上マージン */

}


/* 長崎県版SDGsロゴ */
.nagasaki-sdgs-logo {
	position: absolute;				/* */
	top: auto;						/* 相対位置指定：高さ */
	left: 50%;						/* 親要素を左から50%ずらす（左右中央寄せ） */
	transform: translate(-50%, 0);	/* */
	margin-top: -20px;				/* 親要素の高さ位置指定（padding-topでは親要素を越えられないため） */
/*	padding-top: -20px;*/			/* 中央からの高さ位置を指定（余白指定） */
	padding-left: 600px;			/* 中央からの左位置を指定（余白指定） */
}
.nagasaki-sdgs-logo img {
	width: 100px;
}