@charset "utf-8";




@import url("style-footer.css");
/*header（ロゴが入った最上段のブロック）tp_professionals1/heaader-boxも移動した場所調えること
---------------------------------------------------------------------------*/
header {
	position: fixed;	/*画面の一定箇所で固定表示*/
	z-index: 100;
	width: 100%;
	background: #ffffff;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: #000000;	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;	/*headerの直接の子要素同士に空けるスペース。２文字分。*/
	line-height: 1.5;	/*行間を少し狭く*/
	height: 70px;;	/*ヘッダーの高さ。css冒頭のheaderHを読み込みます。*/
	transition: transform 0.5s ease, opacity 0.5s ease;	/*スクロールでheaderがフェードする際にかける時間。*/
	padding: 0 70px 0 2rem;	/*上(0)、右(css冒頭のheaderHのサイズ)、下(0)、左(2文字分)へのヘッダー内の余白。*/
}

/*隠す際のスタイル*/
.site-header.is-hide {
	opacity: 0;
	transform: translateY(-100%); /*真上に隠す*/
	pointer-events: none; /*消えている間はクリックを無効化*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	header {
		position: fixed;	/*スクロールとともに動かす為、絶対配置*/
	}

	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.5rem;	/*右に空ける余白*/
	}

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


/*ロゴ画像*/
#logo {margin: 0;flex-shrink: 0;}
#logo img {
	display: block;z-index: 101;
	height: 24px;	/*ロゴの高さ。headerの高さを固定しているので、ロゴも高さで指定して下さい。*/
}


/*header内のメニュー（※開閉メニューとはブロックが異なります）
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
header nav {
	flex: 1;
}
header nav ul {
	display: flex;
	gap: 1rem;	/*メニュー同士の間に空けるスペース*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	header nav ul {
		display: none;	/*非表示に*/
	}

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

/*メニュー１個あたりの設定*/
header nav ul a {
	display: block;
	text-decoration: none;
	text-align: center;
}


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


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;z-index: 100;
	margin-left: 1rem;
	border: 1px solid #05273f;	/*枠線の幅、線種、varは色の指定で冒頭のprimary-colorを読み込みます。*/
}

/*最後のメニュー以外に、下の線を入れる*/
header nav ul ul li:not(:last-child) {
	border-bottom: 1px solid #05273f;	/*枠線の幅、線種、varは色の指定で冒頭のprimary-colorを読み込みます。*/
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	padding: 0.3em 1em;	/*上下、左右へのメニュー内の余白*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#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: bootstrap-icons;	/*Bootstrap Iconsを使う指示*/
	content: "\F229";		/*使いたいアイコン名（Bootstrap Icons）をここで指定*/
	margin-right: 0.4em;	/*アイコンとテキストとの間に空けるスペース*/
	display: inline-block;
	transform: scale(0.8) translateY(0.1em);	/*アイコンを80%にし、0.1文字分下に移動*/
	opacity: 0.7;	/*色を70%だけ出す*/
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	inset: 0;
	padding: 100px  8.33vw 50px;		/*ブロック内の余白*/
	background: #fff;		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color:  #9d8950;	/*文字色。css冒頭のprimary-inverse-colorを読み込み。*/
	line-height: 1.5;	/*行間を少し狭く*/
	font-size: 1.2rem;	/*文字サイズ120%*/
}

.small-screen #menubar {display: none;}

/*メニュー１個あたり*/
.small-screen #menubar a {
	display: block;text-decoration: none;
	background:  #fff;	/*背景色。css冒頭のprimary-inverse-colorを読み込み。*/
	color: #9d8950;	/*文字色*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける。メニュー同士の間隔です。*/
	padding: 1rem 2rem;		/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
}


/*子メニュー*/
.small-screen #menubar ul ul a {
	background:  #fff;		/*背景色。冒頭のbg-colorを読み込みます。*/
	color:  #9d8950;	/*文字色。冒頭のbg-inverse-colorを読み込みます。*/
	border: 1px solid  #dce7c6;	/*枠線の幅、線種、varは色の指定で冒頭のbg-inverse-colorを読み込みます。*/
	margin-left: 2rem;	/*左に空けるスペース*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: none; /* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	cursor: pointer;
	width: 70px; 	/*幅。css冒頭のheaderHを読み込みます。*/
	height: 70px; 	/*高さ。css冒頭のheaderHを読み込みます。*/
	position: fixed;z-index: 101;
	right: 0px;
	top: 0px;
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: #fff4ee;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	position: absolute;
	left: 18px;
	transition: 0.3s;
	width: 35px;
	height: 2px;		/*線の高さ*/
	background: #fff;	/*線の色*/
	box-shadow: 1px 1px rgba(0,0,0,0.3);	/*背景色によってはアイコンが見えなくなるので薄く影を入れる*/
}

#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}


/*header-box（ヘッダー右側にあるボタン）
---------------------------------------------------------------------------*/
/*ボックス全体*/
#header-box * {margin: 0;padding: 0;}

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

	#header-box {
		margin-right: 30px;	/*ハンバーガーアイコンと重ならないように適当な余白*/
	}

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


/*ボタンが入ったボックス*/
#header-box .btn {
	list-style: none;
	display: flex;
	gap: 1rem;	/*ボタン同士の間に空けるスペース。１文字分。*/
}

/*メニュー１個あたり（ここにない設定は、下の方にある「btn共通設定」にあります。）*/
#header-box .btn a {
	display: block;text-decoration: none;
	padding: 0.5rem 0.2rem;	/*上下、左右へのボタン内の余白*/
	border-radius: 3px;		/*角を少し丸くする*/
}

/*ボタンに使用しているアイコン*/
#header-box .btn i {
	margin-right: 0.1rem;		/*アイコンの右側に１文字分のスペースを空ける*/
	transform: scale(1.2);	/*アイコンサイズを140%に。*/
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	/*ボタンが入ったボックス*/
	#header-box .btn {
		display: inline-block;
	}
	
	/*ボタン１個あたり*/
	#header-box .btn li {
		margin-bottom: 0.5rem;
	}

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