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

body {
/* ----------------------------------------------------- */
/* 背景 */
/* ----------------------------------------------------- */
/* 背景色 */
	background-color: #E6F1F8;

/* url(1つ目背景画像), url(2つ目背景画像), ... */
 	background-image: url(../images/Niccs_rogo_2.svg),
 					  url(../images/logo_bk_bule.svg);
 					  
	background-repeat: no-repeat;	/* 画像を繰り返さない */

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

}


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


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

/* ----------------------------------------------------- */
/* メニューバー */
/* ----------------------------------------------------- */
.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 #000000;*/	/* 輪郭 */
    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;
}


/* ----------------------------------------------------- */
/* 階層表示部 (パンくずリスト) */
/* ----------------------------------------------------- */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
/* ひとつ前まで ">" を付ける */
.breadcrumb li:not(:last-of-type)::after {
	content: ">";
	margin: 0 .6em; /* 記号の左右の余白 */
	color: #777; /* 記号の色 */
}


/* ----------------------------------------------------- */
/* ログイン画面部 */
/* ----------------------------------------------------- */
/* img.で指定するとクラス外で有効となる */
img.icon_logintitle {
	width: 23px;
}
/* p.で指定するとクラス外で有効となる */
p.textsize_logintitle {
	font-size: x-large;			/* タイトル文字サイズ */
	font-weight: bold;			/* 太文字 */
}
/* ログイン画面の中身 */
.loginwindow {
	background-color: #FFFFFF;	/* 背景：白 */
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); /* 影付き */
	padding-top: 50px;			/* 中身余白：Top */
	padding-bottom: 50px;		/* 中身余白：bottom */
	width: 650px;				/* 入力枠の幅 */
	margin-right:auto;			/* ログイン画面枠中央寄せ*/
	margin-left:auto;			/* ログイン画面枠中央寄せ*/
}
/* input枠の書式指定 */
.loginwindow input {
	width: 350px;				/* 入力枠の幅 */
	height: 25px;				/* 枠の高さ */
	border: 1px solid #DDDDDD;	/* 輪郭 */
    border-radius: 5px;			/* ちょっとだけ角丸 */
}
/* 上記inputの子要素指定「ログイン」ボタンの設定 */
.loginwindow input.send {
	background-color: #0071BC;	/* 背景色 */
	border: 2px solid #0071BC;	/* 輪郭 */
    border-radius: 8px;			/* ちょっとだけ角丸 */
	color: #FFF;				/* 文字色 */
	width: 355px;				/* ボタン枠の幅 */
	height: 30px;				/* 枠の高さ */
}
/* メール・PW 忘れ 対応 */

.loginwindow li.forgotten {
	display: inline;			/* Inline要素化 */
	color: #0071BC;				/* 文字色 */
	font-size: 12px;			/* タイトル文字サイズ */
	margin: 13px;				/* 要素間隔 */
}


/* ----------------------------------------------------- */
/* フッター部 */
/* ----------------------------------------------------- */
/* フッター部 */
.footer_area {
    margin-top: 50px;	/* 上要素からのマージン */
    padding-top: 20px; 	/* 内部要素の余白指定：上部 */

    background-color: #F5F5F5;	/* 背景色指定 */
    height: 260px;              /* 高さ指定 */
    
	/* 幅いっぱい */
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
}
/* メニュー|フッター */
.footer_menu {
	color: #0071BC;		/* ブルー(※キーカラー) */
	font-size: 11px;	/* フォントサイズ */
	font-weight: bold;	/* 太文字 */
	
	display: flex;				/* div 横並び */
	justify-content: center;	/* div 中央寄せ */
}
/* インフォメーション|フッター */
.footer_info {
	background: #0071BC;	/* ブルー(※キーカラー) */
	border: 2px solid #FFF; /* 輪郭 */
    border-radius: 80px;	/* ちょっとだけ角丸 */
	color: #FFF;
	text-align: center;
	width: 930px;
	height: 45px;
	
	margin-right:auto;		/* 中央寄せ*/
	margin-left:auto;		/* 中央寄せ*/
	
	display:flex;
	align-items: center;
	justify-content: center;
}

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

}