@charset "utf-8";


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


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');





/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--base-color: #000;					/*テンプレートの土台となる色（主に背景カラー）*/
	--base-inverse-color: #fff;		/*上のbase-colorの対となる色（主にテキストカラー）*/

	--primary-color: #eee;			/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #fff;	/*上のprimary-colorの対となる色*/

	--space-large: 8vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
}




/*全体の設定
---------------------------------------------------------------------------*/
body * {}





/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: fixed;z-index: 1;
	left: 0px;
	top: 0px;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;	/*ヘッダーの高さ*/
	background-color: #fff;
}

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

	header {
		height: 60px;	/*ヘッダーの高さ*/
		width: 640px;
		margin: 0 auto;
		position: relative;
	}
		#menubar_hdr {
			right: 20px;
		}

	}/*追加指定ここまで*/

/*ロゴ画像*/
#logo img {
	display: block;
	width: 110px;	/*ロゴの幅*/
}
#logo {
	margin: 0;padding: 0;
	padding-left: 2vw;	/*ロゴの左側に空ける余白*/
}
.header_bar {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	margin-right: 55px;
	width: 100%;
}
.header_nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	font-size: 18px;
	text-align: center;
}

.header_nav span {
	font-size: 9px;
	display: flex;
	line-height: 1;
	margin-top: 2px;
}
.header_bar .header_nav a {
  color: #0a2f60;
}
	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ロゴ画像*/
		#logo {
			padding-left: 1vw;
		}
	#logo img {
		width: 120px;	/*ロゴの幅*/
	}

	}/*追加指定ここまで*/


/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
/*header nav ul {display: none;}*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:700px) {
		
	/*メニューブロック全体の設定*/
	header > nav > ul {
		margin-right: 100px;	/*ハンバーガーアイコンに重ならないように余白*/
		display: flex;			/*横並びにする*/
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;text-decoration: none;
		font-size: 0.9rem;		/*文字サイズ90%*/
		padding: 0.5rem 1rem;	/*メニュー内の余白。上下、左右へ。*/
	}
	
	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.5rem;	/*右に空ける余白*/
	}
		#main_content {
			padding-top: 0;
		}

	}/*追加設定ここまで*/


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: fadeIn 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;z-index: 100;
	margin-left: 1rem;
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	padding: 0.3em 1em;					/*上下、左右へのメニュー内の余白*/
	margin-top: 4px;					/*上に空けるスペース。ドロップダウン同士の隙間。*/
	background: var(--base-color);		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color);	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 3px;					/*角を少し丸くする指定*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;position: relative;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f358";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}

/*メニューブロック内のロゴ画像の幅*/
#menubar .logo {
	width: 200px;
}
#menubar .header_nav {
	justify-content:;
	align-items: center;
	font-size: 18px;
	text-align: center;
}
#menubar .header_nav a {
	justify-content: flex-end;
	align-items: center;
	font-size: 18px;
	text-align: center;
}

/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	height: 100%;
	padding: 50px 5vw;				/*ブロック内の余白。上、左右、下への順番。*/
	background: #0a2f60;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
	box-sizing: border-box;
	width: 70%;
}
.small-screen #menubar.member-login-menu.display-block {
	padding: 15px 5vw 50px;				/*ブロック内の余白。上、左右、下への順番。*/
}
@media screen and (min-width:700px) {
	.small-screen #menubar.display-block {
		width: 40%;
	}
}
/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	margin: 0.5rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
}
.small-screen #menubar li span.txt_kana {
	font-size: 12px;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
}
.small-screen #menubar a {
	border-radius: 5px;		/*角を丸くする指定*/
	padding: 0.5rem 1rem;		/*メニュー内の余白。上下、左右へ。*/
	background: var(--base-inverse-color);		/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);					/*背景色。冒頭のbase-colorを読み込みます。*/
}
.small-screen #menubar a.new_entry {
	background: #ffd800;
	font-weight: bold;
	text-align: center;
}
.small-screen #menubar a.faq-member-cta {
	display: flex;
	min-height: 46px;
	padding: 0.65rem 1rem;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	border: 1px solid #e2b900;
	border-radius: 8px;
	background: #ffd800;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
	color: #092c61;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
.small-screen #menubar a.faq-member-cta i {
	flex: 0 0 auto;
	font-size: 1.05rem;
}
.small-screen #menubar a.faq-member-cta:hover {
	background: #ffe23d;
}
/*子メニュー*/
.small-screen #menubar ul ul a {
	background: #fcf8e3;		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: #000;	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	/*border: 2px solid #ffd800;*/	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	margin-left: 2rem;	/*左に空けるスペース*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: fadeIn 0s 0.2s both;
	position: absolute;z-index: 101;
	cursor: pointer;
	right: 0px;				/*右からの配置場所指定*/
	top: 0px;				/*上からの配置場所指定*/
	padding: 21px 15px;		/*上下、左右への余白*/
	width: 22px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 19px;			/*高さ*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform-origin: right top;
	border-radius: 0px 0px 0px 10px;		/*角を丸くする指定。左上、右上、右下、左下への順番。*/
}

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

	#menubar_hdr {
		transform: scale(1.5);	/*1.5倍のサイズに。お好みで。*/
	}

	}/*追加指定ここまで*/


/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid var(--base-color);	/*線の幅、線種、varは色のことで冒頭のbase-colorを読み込みます。*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham span {
	border-top: 1.5px solid #fff;
}

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

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

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

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



/*特定募集情報等提供事業者
---------------------------------------------------------------------------*/
.registration-info p {
	color: #fff;
}