@charset "utf-8";
/*------------------------------*/
body {
	font-size:13px;
}

/* 固定ヘッダー */
.header_fixed {
	position:fixed;
	width:100%;
	z-index:2;
	background-color: rgba(255,255,255,1);
	transition: 1s;

	-webkit-filter:drop-shadow(1px 0px 5px rgba(0, 0, 0, 0.2));
	-moz-filter:drop-shadow(1px 0px 5px rgba(0, 0, 0, 0.2));
	-ms-filter:drop-shadow(1px 0px 5px rgba(0, 0, 0, 0.2));
	filter:drop-shadow(1px 0px 5px rgba(0, 0, 0, 0.2));
}

/* アニメーション要素の見切れ対策 */
#main_contents {
	overflow: hidden;
}

/*------------------------------*/
/* メインロゴ */
.main_logo {
	max-width:100%;
	height:50px;
	opacity:1;
}
/* スマホ */
@media only screen and (max-width:550px) {
	.main_logo {
		height:35px;
	}
}

/* コンタクトボタン */
.contact_button {
	display:block;
	border:1px solid #004093;
	color:#004093;
	border-radius:50px;
	text-align:center;
	padding:10px 0px;
	transition:0.3s;
	font-weight:bold;
}
.contact_button:hover, .contact_button_on {
	background-color:rgba(0,64,147,0.1);
}
/* スマホ */
@media only screen and (max-width:550px) {
	.contact_button {
		padding:5px 0px;
	}
}

/*------------------------------*/
/* フッター */
#footer {
	background-color:#004093;
	color:#ffffff;
}
/* メールボタン */
.mail_button {
	border:1px solid #ffffff;
	border-radius:5px;
	text-align:center;
	padding:10px;
	font-size: 16px;
	display:block;
	color:#ffffff;
	transition:0.3s;
}
.mail_button:hover {
	background-color:#ffffff;
	color:#000000;
}

/* フッターロゴ */
.footer_logo {
	width:100%;
	max-width:120px;
}

/* フッターリンクボタン */
.footer_link_button {
	color:#ffffff;
	display:block;
	padding:5px 10px;
}
.footer_link_button:hover {
	text-decoration:underline;
}

/*------------------------------*/
/* サブロゴ */
.sub_logo {
	width:100;
	max-width:100px;
}

/*------------------------------*/
/* 線 */
.hr_ffffff {
	border:none;
	border-top:1px solid #ffffff;
}
.hr_000000 {
	border:none;
	border-top:1px dotted #000000;
}
.hr_004093 {
	border:none;
	border-top:1px solid #004093;
}
.hr_cccccc {
	border:none;
	border-top:1px solid #cccccc;
}

/*------------------------------*/
/* 文字色 */
.color_004093 {
	color:#004093;
}
/* 文字色 */
.color_a11f24 {
	color:#a11f24;
}
.color_e0e0e0 {
	color:#e0e0e0;
}

/*------------------------------*/

/* 背景色 */
.background_color_004093 {
	background-color:#004093;
}

/*------------------------------*/
/*トップへ戻るボタン*/
/*------------------------------*/
.js_scroll_top_button {
	width:50px;
	height:50px;
	position: fixed;
	z-index: 102;
	bottom: 150px;
	right:10px;
	background-color: rgba(255,255,255,0.8);
	color: #004093;
	border:1px solid #004093;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome or Safari */
	-webkit-touch-callout: none; /* Android and iOS*/
	-moz-user-select: none; /* FireFox */
	-ms-user-select: none; /* IE */
	-o-user-select: none; /* Opera */
	user-select: none;
	padding:5px;
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* スマホハイライトカラー */
	display: none;
	transition:0.3s;
}

/*------------------------------*/
/* ハンバーガーボタン */
/*------------------------------*/
.js_menu_switch {
	width:50px; /* 外幅 */
	height:50px; /* 外高 */
	bottom: 80px;
	right:10px;
	position: fixed;
	z-index: 102;
	background-color: rgba(255,255,255,0.8);
	color: #004093;
	border:1px solid #004093;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome or Safari */
	-webkit-touch-callout: none; /* Android and iOS*/
	-moz-user-select: none; /* FireFox */
	-ms-user-select: none; /* IE */
	-o-user-select: none; /* Opera */
	user-select: none;
	padding:11px 7px;  /* [外高 - (三本線の高さ / 2)] [左右スペース] */
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* スマホハイライトカラー */
	transition:0.3s;
}

/*-----*/
/* 外枠の半分の高さ + 棒の太さ = 偶数で安定 */
.js_menu_trigger {
	position: relative;
	box-sizing: border-box;
	height: 28px; /* 三本線の高さ */
}
.js_menu_trigger div {
	transition:0.5s;
	position:absolute;
	width:100%;
	height:2px; /* 棒の太さ */
}
.js_menu_trigger div:nth-of-type(1) {
	background-color:#004093;
	top:0px;
}
.js_menu_trigger div:nth-of-type(2) {
	background-color:#004093;
	top:50%;
	transform:translateY(-50%);
}
.js_menu_trigger div:nth-of-type(3) {
	background-color:#004093;
	bottom:0px;
}

/*------------------------------*/
/* モバイルメニュー枠 */
/*------------------------------*/
.js_mobile_nav {
	background-color:#ffffff;
	position:fixed;
	box-sizing:border-box;
	top:0px;
	width:100%;
	max-width:300px;
	z-index:101;
	overflow:auto;
	height:100%;
	left:-100%; /* 左 */
	/* right:-100%; /* 右 */
	border-right:1px solid #cccccc;
	padding:10px;
	transition:0.3s;
}

/*------------------------------*/
/* モバイルメニューリンクボタン */
.mobile_menu_button {
	display:block;
	font-size:14px;
	padding:10px 5px 10px 20px;
	transition:0.3s;
}
.mobile_menu_button:hover {
	color: #ff0000;
}

/*------------------------------*/
/* Hx */
.news_hx_title {
	font-size:20px;
	font-weight:bold;
	border-left:15px solid #000000;
	padding:5px 5px 5px 10px;
	border-bottom:1px solid #000000;
}

/*------------------------------*/
/* アニメーション文字 (layout.js) */
/*------------------------------*/
/* 変化前のスタイル */
.animation_css_01 {
	position: relative;
	opacity: 0;

	/* アニメーション設定 */
	--property: top, opacity; /* アニメーションに使用するプロパティ */
	--duration: 70ms;/* アニメーションタイム時間(AT) */
	--delay: -40ms;/* 遅延時間(DT) AT-DT=SP*/

	transition-property: var(--property);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration);
	transition-delay: calc((var(--duration) + var(--delay)) * var(--index,0) + var(--delay));
}
/* 変化後のスタイル [.挙動前のクラス名_after] [.変化前のスタイル] */
.animation_css_01_after .animation_css_01 {
	opacity: 1;
	will-change: var(--property); /* 処理軽減 */
}

/*------------------------------*/
/* 変化前のスタイル */
.animation_css_02 {
	position: relative;
	opacity: 0;
	top:20px;

	/* アニメーション設定 */
	--property: top, opacity; /* アニメーションに使用するプロパティ */
	--duration: 150ms;/* アニメーションタイム時間(AT) */
	--delay: -75ms;/* 遅延時間(DT) AT-DT=SP */

	transition-property: var(--property);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration);
	transition-delay: calc((var(--duration) + var(--delay)) * var(--index,0) + var(--delay));
}
/* 変化後のスタイル [.挙動前のクラス名_after] [.変化前のスタイル] */
.animation_css_02_after .animation_css_02 {
	opacity: 1;
	top:0px;
	will-change: var(--property); /* 処理軽減 */
}

/*------------------------------*/
/* ホバー後のスタイル */
.pop_text_css_01_after {
	border-bottom:1px solid #ff0000;
}