@charset "utf-8";

/* スニペット */


/*
***********************************************************************************************
インラインブロック要素
***********************************************************************************************
*/

.inline-block {
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}

	.inline-block > * {
		display: inline-block;
		letter-spacing: normal; /* 文字間を通常に戻す */
		vertical-align: top;
	}


/*
***********************************************************************************************
simplebar.jsのスクロールバー
***********************************************************************************************
*/

.simplebar-scrollbar::before {
	background-color: #000;
	border-radius: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.simplebar-scrollbar.simplebar-visible::before {
	opacity: 1;
}

.simplebar-track {
	background-color: rgba(0,0,0,0.1);
}

	.simplebar-track.simplebar-vertical {
		width: 5px;
	}


/*
***********************************************************************************************
ローディング画面（未使用
***********************************************************************************************
*/

/*
#loader-bg {
	background-color: #fff;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 999;
}

	/＊ ローディングスピナー ＊/
	#loading {
		/＊
		background-image: url(../img/loading.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		＊/
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -25px;
		margin-top: -25px;
		height: 50px;
		width: 50px;

		transform: scale( 1 );
	}

		.viewmode-mobile #loading {
			transform: scale( 0.6 );
		}
*/


/*
***********************************************************************************************
ローディング画面（CSS版）（未使用）
***********************************************************************************************
*/

/*
body::before {
	background-color: #fff;
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 999;
}

	/＊ ローディングスピナー ＊/
	body::after {
		content: url(../img/loading.gif);
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -122.5px;
		margin-top: -98px;
		height: 195px;
		width: 245px;
		z-index: 999;
	}

		.viewmode-mobile body::after {
			transform: scale( 0.5 );
		}
*/

/*
***********************************************************************************************
float関連
***********************************************************************************************
*/

/* new clearfix */
.clearfix::after {
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}


/*
***********************************************************************************************
アイコン（FontAwesome版）
***********************************************************************************************
*/

/* 外部リンク */
.icon-external {
	color: #999;
	margin-left: .4em;
	position: relative;
	top: -.1em;
	vertical-align: middle;
}

/* PDF */
.icon-pdf {
	color: #be0909;
	font-size: 150%;
	margin-right: .3em;
	vertical-align: middle;
}

/* Word */
.icon-word {
	color: #1755b3;
	font-size: 150%;
	margin-right: .3em;
	vertical-align: middle;
}

/* Excel */
.icon-excel {
	color: #1c6b41;
	font-size: 150%;
	margin-right: .3em;
	vertical-align: middle;
}


/*
***********************************************************************************************
本フォームを通じてご登録いただいた個人情報は…
***********************************************************************************************
*/

.note-privacy {
	background-color: #eff1f3;
	font-size: 95%;
	margin: 30px 0 30px 0;
	padding: 15px;
	text-align: center;
}

	.viewmode-mobile .note-privacy {
		margin-top: 30px;
		padding: 10px;
		text-align: left;
	}

	/*
	@media (min-width: 768px) {
		.note-privacy {
			font-size: 14px;
			margin-top: 50px;
		}
	}

	@media (min-width: 992px) {
		.note-privacy {
			margin-top: 70px;
		}
	}
	*/

.note-privacy ul {
	list-style-type: none;
	padding:0;
}

.note-privacy li + li {
	margin-top: 0.5em;
}


/*
***********************************************************************************************
メールフォーム
***********************************************************************************************
*/

form .table_form {
	background-color: #fff;
	box-sizing: border-box;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	width: 100%;
}

	form .table_form th,
	form .table_form td {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		display: block;
		color: #333;

		text-align: left;
		width: 100%;
		vertical-align: middle;
	}

	form .table_form th {
		background-color: #eff1f3;
		padding: 0.3em 0.5em;
	}

		@media (min-width: 768px) {
			form .table_form th {
				display: table-cell;
				/*
				font-size: 0.9em;
				*/
				padding: 0.5em 0.5em 0.5em 1em;
				width: 230px;
			}
		}

	form .table_form td {
		background-color: #fff;
		padding: 0.5em 0.5em;
	}

		@media (min-width: 768px) {
			form .table_form td {
				display: table-cell;
				padding: 0.6em 0.8em;
				width: auto;
			}
		}

		@media (min-width: 992px) {
			form .table_form td {
				background-color: transparent;
			}
		}

		form .table_form td input[type=text],
		form .table_form td input[type=email],
		form .table_form td select,
		form .table_form td textarea {
			background-color: #fff;
			border: 1px solid #ccc;
			color: inherit;
			/*
			font-family: inherit !important;
			*/
			font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS P Gothic","Osaka",Verdana,Arial, Helvetica, sans-serif !important;
			font-size: inherit;
			padding: .5em .5em;
			width: 100%;

			border-radius: 3px;
			-webkit-appearance: none;
		}

		form .table_form td select {
			width: auto;
			-webkit-appearance: auto;
		}

		form .table_form td textarea {
			display: block;
			line-height: 1.8;
		}

		form .table_form td input[type=file] {
			font-size: 90% ;
		}

				/* フォーカス時 */
				form .table_form td input[type=text]:focus,
				form .table_form td input[type=email]:focus,
				form .table_form td select:focus,
				form .table_form td textarea:focus {
					border-color: rgba(53,138,189, 0.8);
					box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(53,138,189, 0.6);
					outline: 0 none;
				}

/* 必須項目&任意項目 */
form .required,
form .optional {
	color: #fff;
	background-color: #c11c29;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-size: 70%;
	font-weight: normal;
	float: right;
	line-height: 1.2;
	/*
	width:32px;
	height: 20px;
	*/
	margin: 0px 0 0 0px;
	overflow: hidden;
	padding: 5px 6px;
	position: relative;
	top: 6px;
	white-space: nowrap;
}

	.viewmode-mobile form .required,
	.viewmode-mobile form .optional {
	}

/* 任意項目 */
form .optional {
	background-color: #999;
}

/* 記入例 */
form .watermark {
	color: #666;
	font-size: 13px;
	line-height: 1.5;
	margin: 5px 0 0 0px;
}

	.viewmode-mobile form .watermark {
		font-size: 11px;
	}

	form .watermark::before {
		content: "※";
		color: #666;
		font-size: 12px;
		margin: 0 0 0 0px;
	}

	form .watermark.red {
		color: #e00;
	}

	form .watermark.red::before {
		content: "※";
		color: #e00 !important;
		font-size: 12px;
		margin: 0 0 0 0px;
	}

	/* 確認画面＆送信中画面 */
	form.form-confirm .watermark,
	form.form-send .watermark {
		display: none;
	}

/* 複数項目 */
form .column {
	margin: 0;
}

	form .column dt,
	form .column dd {
		margin: 0 0 0 0;
	}

	form .column dt {
		clear: both;
		float: left;
		font-size: 15px;
		padding-top: .3em;
		position: absolute;
		min-width: 7em;
	}

		.viewmode-mobile form .column dt {
			font-size: 13px;
		}

		/* 確認画面＆送信中画面 */
		form.form-confirm .column dt,
		form.form-send .column dt {
			line-height: 1.6;
		}

	form .column dd {
		padding-left: 6.5em;
	}

		form .column dt + dd {
			margin-bottom: .75em;
		}

		form .column dt + dd:last-child {
			margin-bottom: 0;
		}


/* 郵便番号 */
form input#zip,
form input#zip2 {
	ime-mode: disabled;
	width: auto;
}

/* メールアドレス */
form input#email {
	ime-mode: disabled;
}

/* 都道府県 */
form select#prefecture,
form select#prefecture2 {
	width: auto;
}

/* 電話番号 */
form input#tel {
	ime-mode: disabled;
}

/* FAX */
form input#fax {
	ime-mode: disabled;
}

/* お問い合わせ内容 */
form textarea#message {
	height: 10em;
}


/* 送信ボタン */
form input[type=submit] {
	background-color: #00a3d8;
	border: 0px solid #fff;
	color: #fff;
	display: block;
	font-size: 110%;
	font-weight: bold;
	margin: 15px auto 0 auto;
	padding: 5px 15px;

	border-radius: 5px;
}


/*
***********************************************************************************************
jquery.validationEngine.jsのスタイルを上書き
***********************************************************************************************
*/

.formError {
	z-index: 1;
}

	.formError.inline {
		display: block;
	}

.formError .formErrorContent {
	background-color: transparent;
	color: #ee0000;
	font-size: 14px;
	padding-left: 0px;
	padding-right: 0px;
}

.formErrorContent br {
	display: none;
}


/*
***********************************************************************************************
jquery.validationEngine.nonreload.jsのスタイルを上書き
***********************************************************************************************
*/

/* 「送信内容の確認」ボタン  */
#MyMailForm_button {
	margin-top: 15px;
	padding: 10px 0px !important;
	text-align: center;
}

	#MyMailForm_button button {
		background-color: #c11c29;
		border: 0px solid #fff;
		box-sizing: border-box;
		color: #fff;
		display: inline-block;
		font-size: 17px;
		font-weight: bold;
		line-height: 1.3;
		min-width: 180px;
		padding: 12px 20px;
		position: relative;
		text-align: center;
		text-decoration: none;
		vertical-align: top;

		transition: all .2s ease;
		/*
		background: -webkit-linear-gradient(top, #006DBE 0%,#0060A7 60%);
		background: linear-gradient(to bottom, #006DBE 0%,#0060A7 60%);
		*/
		border-radius: 30px;
		box-shadow: -3px -3px 0 rgba(0,0,0,0.1) inset,
					5px 5px 0 rgba(0,0,0,0.1);
	}

		#MyMailForm_button .MyMailForm_btn + .MyMailForm_btn {
			margin-left: 15px;
		}

		.viewmode-mobile #MyMailForm_button button {
			font-size: 16px;
			min-width: 130px;
			padding: 10px 15px;
		}

		#MyMailForm_button button:hover {
			/*
			background: #006DBE;
			border: 2px solid #ed6d01;
			color: #ed6d01;
			*/
			cursor: pointer;
			opacity: 0.7;

			/*
			background:-webkit-linear-gradient(top, #4C99D1 0%,#4C8FC1 60%);
			background:linear-gradient(to bottom, #4C99D1 0%, #4C8FC1 60%);
			*/
		}

		#MyMailForm_button button:active {
			right: -3px;
			bottom: -3px;

			box-shadow: none;
		}

		/* 訂正 */
		#MyMailForm_button #back {
		}

		/* 送信 */
		#MyMailForm_button #send {

		}

		/* 送信中画面のボタン */
		form.form-send #MyMailForm_button button {
			display: none;
		}

		/* 送信中画面のローダー */
		form.form-send #MyMailForm_button::before {
			content: url(../img/loading.gif);
			display: block;
		}


/* 確認画面の各入力内容 */
.MyMailForm_value{
	box-sizing: border-box;
	/*
	border: 1px solid #fff;
	*/
	color: #0055cc;
	display: block;
	/*
	font-size: 15px;
	*/
	line-height: 1.6;
	min-height: 2.2em;
	padding: 0.3em 0.5em;
}

/* メールを送信しました */
.text-success {
	border: 1px solid #0000ee;
	color: #0000ee;
	padding: 15px;
	text-align: center;
}

/* エラーが発生しました */
.text-danger {
	border: 1px solid #ee0000;
	color: #ee0000;
	padding: 15px;
	text-align: center;
}


/*
***********************************************************************************************
PCモバイル切り替え表示
***********************************************************************************************
*/

.renderSwitcher {
	/*
	background-color: #111;
	*/
	display: none;
	/*
	width: 100%;
	*/
}

	.mobile .viewmode-pc .renderSwitcher {
		display: block;	/* モバイル端末のPC表示モードでは表示 */
		/*
		display: none;
		*/
	}

		.viewmode-mobile #drawer .renderSwitcher {
			display: block;	/* モバイル端末ではドロワー内で表示 */
			/*
			display: none;
			*/
			margin-top :15px;

			border-radius: 3px;
		}

	.renderSwitcher ul {
		text-align: center;
		margin: 0;
		padding: 5px;
	}

		#drawer .renderSwitcher ul {
			text-align: left;
			padding: 0px;
		}

		.viewmode-pc .renderSwitcher ul {
			text-align: center;
			font-size: 300%;
			padding: 0px;
		}

		.renderSwitcher ul li {
			display: block;
			line-height: 1.5;
			margin: 0;
		}

			.renderSwitcher ul li a {
				background-color: #222;
				color: #fff;
				display: block;
				padding: 15px 15px 15px 15px;
				text-decoration: none;
			}

			.viewmode-mobile .renderSwitcher ul li a {
				background-color: #c11c29;
				padding: 7px 15px 7px 15px;
				border-radius: 20px;
			}


		/* PC版を表示 */
		.renderSwitcher ul li.pc {
			/*
			padding-right: 10px;
			margin-right: 10px;
			border-right: 1px solid #fff;
			*/
		}

			.viewmode-pc .renderSwitcher ul li.pc {
				display: none;	/* PC表示モードでは表示しない */
			}

				.viewmode-pc .renderSwitcher ul li.pc a {
					color: #fff;
				}

			.renderSwitcher ul li.pc a::before {
				color: #fff;
				content: "\f108"; /* fa-desktop */
				display: inline-block;
				font-family: 'Font Awesome 5 Free';
				font-size: 16px;
				font-weight: 900;
				line-height: 1.0;
				margin-right: 10px;
				vertical-align: middle;
			}

			/* モバイル版を表示 */
			.renderSwitcher ul li.mobile a::before {
				color: #fff;
				content: "\f3cd"; /* mobile-alt  */
				display: inline-block;
				font-family: 'Font Awesome 5 Free';
				font-size: 170%;
				font-weight: 900;
				line-height: 1.0;
				margin-right: 15px;
				vertical-align: middle;
			}

			.viewmode-mobile .renderSwitcher ul li.mobile {
				display: none;
			}

				.viewmode-mobile .renderSwitcher ul li.mobile a {
					color: #fff;
				}

/*
***********************************************************************************************
photoswipe.jsのスタイルを上書き
***********************************************************************************************
*/

div.pswp__caption__center {
	color: #fff;
	font-size: 100%;
	text-align: center;
	max-width: none;
	padding: 15px 10px 50px 10px;
}

	.viewmode-mobile div.pswp__caption__center {
		text-align: left;
		padding: 15px 10px;
	}

/* 前へ＆次へ */
button.pswp__button--arrow--left::before,
button.pswp__button--arrow--right::before {
	background-color: transparent;
	background-image: none !important;
	color: #fff;
	display: block;
	font-family: 'Font Awesome 5 Free';
	font-size: 25px;
	font-weight: bold;
	line-height: 35px;
}

/* 前へ */
button.pswp__button--arrow--left::before {
	content: "\f053";	/* fa-chevron-left */
}

/* 次へ */
button.pswp__button--arrow--right::before {
	content: "\f054";	/* fa-chevron-right */
}


/*
***********************************************************************************************
photoswipeを適用したリンク
***********************************************************************************************
*/

/* 検索アイコンのみ（未使用） */
/*
a.pswp--item {
	display: inline-block;
	position: relative;
	vertical-align: top;
}

	a.pswp--item::after {
		background-color: rgba(0,0,0,0.3);
		bottom: 0;
		color: #fff;
		content: "\f002";	/＊ fa-search ＊/
		display: block;
		font-family: 'Font Awesome 5 Free';
		font-size: 18px;
		line-height: 1;
		font-weight: bold;
		padding: 10px 10px 10px 10px;
		position: absolute;
		right: 0;

		transition: all 0.2s ease;
	}

		.viewmode-mobile a.pswp--item::after {
			transform: scale(0.8);
			transform-origin: right bottom;
		}

	a.pswp--item:hover::after {
		font-size: 23px;
	}

	a.pswp--item-text::after {
		content: none;
	}
*/

/* 検索アイコン＆テキスト（未使用） */
/*
a.pswp--item {
	display: inline-block;
	position: relative;
	vertical-align: top;
}

	a.pswp--item::before {
		bottom: 0.5em;
		color: #fff;
		content: "\f002";	/＊ fa-search ＊/
		display: block;
		font-family: 'Font Awesome 5 Free';
		font-size: 18px;
		font-weight: bold;
		line-height: 1;
		position: absolute;
		right: 75px;
		z-index: 1;
	}

	a.pswp--item::after {
		background-color: rgba(0,0,0,0.5);
		bottom: 0;
		color: #fff;
		content: "拡大表示";
		display: block;
		font-size: 14px;
		line-height: 1;
		padding: 10px 10px 10px 35px;
		position: absolute;
		right: 0;
	}
*/


/*
***********************************************************************************************
モーダル（modaal.js）
***********************************************************************************************
*/

.viewmode-mobile .modaal-wrapper {
	padding: 80px 15px 15px 15px;
}

.viewmode-mobile .modaal-inner-wrapper {
	padding: 80px 15px 15px 15px;
}

.modaal-container {
	overflow: visible !important;
}

.modaal-wrapper .modaal-close {
	background: #000 !important;
	color: #fff;
	position: absolute;
	right: -25px;
	top: -25px;
}

	.viewmode-mobile .modaal-wrapper .modaal-close {
	}


	.modaal-wrapper .modaal-close:focus,
	.modaal-wrapper .modaal-close:hover {
		background: #c11c29 !important;
	}

		.modaal-wrapper .modaal-close:hover::before,
		.modaal-wrapper .modaal-close:hover::after {
			background: #fff;
		}

.modaal-iframe-elem {
	height: 80vh;
}

	.viewmode-mobile .modaal-iframe-elem {
	}


/*
***********************************************************************************************
画面幅より大きな表をスクロール式にする
***********************************************************************************************
*/

.table_wrapper {
	overflow: auto;

	-webkit-overflow-scrolling: touch;
}

	.scroll: : -webkit-scrollbar {
		height: 5px;
	}

	.scroll: : -webkit-scrollbar-track {
		background: #F1F1F1;

		border-radius: 5px;
	}

	.scroll: : -webkit-scrollbar-thumb {
		background: #BCBCBC;
	}

/*
***********************************************************************************************
Slideout.jsの基本設定
***********************************************************************************************
*/

.toggle-button {

}

.toggle-button2 {
	float: right;
}

.slideout-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 255px;
	width: 100vw;
	overflow-y: scroll;
	-ms-overflow-style: none;
	min-height: 100vh;

	-webkit-overflow-scrolling: touch;
	z-index: 101;
	display: none;

	/*
	touch-action:none;
	*/
}

	.slideout-menu::-webkit-scrollbar {
		display: none;
	}

	.mobile .slideout-menu {
	}

.slideout-menu-left {
	left: 0;
}

.slideout-menu-right {
	right: 0;
}

.slideout-panel {
	background-color: #fff;	/* 背景色は必須 */
	/*
	background-image: url(../img/containerBg.jpg);
	*/
	background-position: 0 -70px;
	background-repeat: repeat-x;
	min-height: 100vh;
	/*
	padding: 10px;
	*/
	position: relative;
	z-index: 1;
	/*
	will-change: transform;
	*/

}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
	overflow: hidden;
}

.slideout-open .slideout-menu {
	display: block;
}


/*
***********************************************************************************************
ドロワー
***********************************************************************************************
*/

#nav-global_sp {
	margin-left: -10px;
	margin-right: -10px;
	padding: 0px;
}

	#nav-global_sp > ul {
		margin-top: 15px;
		padding: 0px 0px 0px 0px;
	}

		#nav-global_sp > ul > li {
			/*
			border-top: 1px solid #ccc;
			*/
			letter-spacing: 0.05em;
			list-style-type: none;
			line-height: 1.5;
			margin: 0;
			padding: 0px 0 0px 0;
			position: relative;
		}

			#nav-global_sp > ul > li + li {
				margin-top: 8px;
				margin-top: 0px;
			}

			/* カレント表示 */
			#nav-global_sp > ul > li.current {
				/*
				background-color: #c11c29;
				*/
			}

			#nav-global_sp li a {
				color: #000;
				font-size: 1.5rem;
				text-decoration: none;
			}

				#nav-global_sp > ul > li > a {
					/*
					background-color: #c11c29;
					color: #fff;
					*/
					display: block;
					font-weight: bold;
					padding: 8px 5px 8px 15px;
				}

					/* 矢印の飾り（未使用） */
					/*
					#nav-global_sp > ul > li > a::before {
						color: #000;
						content: "\f054";
						display: block;
						font-family: 'Font Awesome 5 Free';
						font-size: 12px;
						font-weight: 900;
						line-height:1.5;
						top: 10px;
						left: 10px;
						position: absolute;
					}
					*/

					#nav-global_sp > ul > li > a:active {
						background-color: #eee;
						color: #000;
					}

					/* カレント表示 */
					#nav-global_sp > ul > li > a.current {
						background-color: #c11c29;
						color: #fff;
					}

				#nav-global_sp .sub-menu {
					list-style-type: none;
					margin-top: 0px;
					padding: 0 0 0 30px;
				}

					#nav-global_sp .sub-menu > li {
						margin: 0px;
					}

						#nav-global_sp .sub-menu > li > a {
							display: block;
							font-size: 13px;
							overflow: visible;
							padding: 3px 10px 3px 0px;
							position: relative;
						}

							.viewmode-mobile #nav-global_sp .sub-menu > li > a {
								font-size: 12px;
							}

							/* 罫線の飾り */
							#nav-global_sp .sub-menu > li > a::before {
								background-image: none;
								background-color: #999;
								content: "";
								display: block;
								height: 1px;
								line-height: 1;
								top: 15px;
								left: -15px;
								position: absolute;
								width: 10px;
							}

							#nav-global_sp .sub-menu > li > a.current {
								background-color: rgba(0,0,0,0.3);
							}

/* フッターメニュー（スマホ用） */
.menu-item-sp {
	border-top: 1px solid #000;
	margin-top: 25px;
	padding-top: 25px;
}

	/* サイト内検索 */
	.viewmode-mobile .menu-item-search {
		display: none;
	}

/* カレント表示 */
#nav-global_sp > ul > li.current::before {
	border-bottom: 5px solid #c11c29;
}

/* 各カテゴリートップ */
/*
.viewmode-mobile .menu-item-aboutus::before,
.viewmode-mobile .menu-item-service::before,
.viewmode-mobile .menu-item-case::before,
.viewmode-mobile .menu-item-flow::before,
.viewmode-mobile .menu-item-contact::before {
	background-image: url(../../service/shared/img/eyecatch_service.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	content: none;
	display: block;
	height: 50px;
	opacity: 0.8;
	margin-bottom: 10px;
}
*/

/* お問い合わせ */
/*
.viewmode-mobile .menu-item-contact::before {
	background-image: url(../../contact/shared/img/eyecatch_contact.jpg);
	background-position: center bottom;
}
*/


/*
***********************************************************************************************
ローカルナビゲーション
***********************************************************************************************
*/

.nav-local {
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
	text-align: center;
	margin-top: 80px;
}

	.viewmode-mobile .nav-local {
		margin-top: 60px;
	}

	.nav-local ul {
		margin: 0 auto;
		padding: 0;
		text-align: left;
	}

		.viewmode-mobile .nav-local ul {
			margin: 0 -5px 0 -5px;
		}

		.nav-local li {
			display: inline-block;
			letter-spacing: normal; /* 文字間を通常に戻す */
			margin: auto;
			padding: 10px 10px;
			text-align: left;
			width: 33%;
			vertical-align: top;
		}

			.viewmode-mobile .nav-local li {
				margin: auto;
				padding: 5px 5px;
				width: 50%;
			}

		.nav-local li a {
			border: 1px solid #ccc;
			color: #000;
			display: block;
			font-weight: bold;
			line-height: 1.5;
			margin-left: -1px;
			min-height: 100px;
			text-decoration: none;
			padding: 10px 10px 5px 120px;
			position: relative;
			transition: all 0.2s ease;
		}

			.viewmode-mobile .nav-local li a {
				font-size: 1.2rem;
				line-height: 1.5;
				min-height: 60px;
				padding: 5px 5px 5px 70px;
			}

			/* カレント表示 */
			.nav-local li a.current {
				background-color: #c11c29;
				border: 1px solid #c11c29;
				color: #fff;
				outline: 2px solid #c11c29;
			}

			/* サムネイル */
			.nav-local li a::before {
				background-color: #fff;
				content: "";
				display: block;
				background-color: #eee;
				background-repeat: no-repeat;
				background-position: 0px 0px;
				background-size: cover;
				height: 100px;
				overflow: hidden;
				left: 0px;
				top: 0px;
				position: absolute;
				width: 100px;
				z-index: 0;
			}

				.viewmode-mobile .nav-local li a::before {
					height: 60px;
					width: 60px;
				}

			.nav-local li a:hover {
				background-color: #c11c29;
				color: #fff;
			}


/*
***********************************************************************************************
ページ内リンク
***********************************************************************************************
*/

.nav-anchor {
	clear: both;
	font-weight: bold;
	line-height: 2;
	padding-top: 2em;
	text-align: center;
}

	.viewmode-mobile .nav-anchor {
		/*
		text-align: left;
		*/
	}

	.nav-anchor ul {
		background-color: #e8ebee;
		letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
		padding: 10px 5px 5px 5px;
	}

		.ios .viewmode-mobile .nav-anchor ul {
			padding-bottom: 10px;
		}

		.nav-anchor ul > li {
			display: inline-block;
			letter-spacing: normal; /* 文字間を通常に戻す */
			line-height: 1.5;
			margin: 0 1.5em 0 0;
			padding: 0 0 0 1em;
			position: relative;
			vertical-align: top;
			white-space: nowrap;
		}

			/* 矢印の飾り */
			.nav-anchor ul > li::before {
				color: #c11c29;
				content: "\f078";	/* fa-chevron-down */
				display: block;
				font-family: 'Font Awesome 5 Free';
				font-size: 0.8em;
				font-weight: 900;
				line-height: 1;
				top: .5em;
				left: 0em;
				position: absolute;
			}

				.viewmode-mobile .nav-anchor ul > li::before {
					top: .5em;
				}

					.ios .viewmode-mobile .nav-anchor ul > li::before {
						top: .7em;
					}

			.nav-anchor ul > li:last-child {
				margin-right: 0;
			}


/*
***********************************************************************************************
「続きをみる」（readmore.js版）
***********************************************************************************************
*/

.readmore_ui {
	display: block;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
}

	.readmore {
		overflow: hidden;
	}

		/* floatによって「続きをみる」が表示されない不具合を解消 */
		/*
		.readmore::after {
			font-size: 0;
			clear: both;
			content: " ";
			display: block;
			height: 0;
			visibility: hidden;
		}
		*/

		/* 「続きをみる」で追加されるリンク */
		.readmore_ui a {
			/*
			text-decoration: none;
			*/
		}
			.readmore_ui a:hover {
				text-decoration: none;
			}

			/* 続きをみる */
			.readmore_ui a::before {
				content: "\f078";	/* fa-chevron-down */
				display: inline-block;
				font-family: 'Font Awesome 5 Free';
				font-size: 13px;
				font-weight: bold;
				margin: -2px 3px 0 0;
				vertical-align: middle;
			}

				body.mobile .readmore_ui a::before,
				body.tablet .readmore_ui a::before {
					margin-top: -4px;
				}

				/* 閉じる */
				.readmore[aria-expanded=true] + .readmore_ui a::before {
					content: "\f077";	/* fa-chevron-up */
				}

			.readmore {
				max-height: 1000px;
			}

				.viewmode-mobile .readmore {
					max-height: 5.9em;
				}


/*
***********************************************************************************************
サムネイル付きメニュー（未使用）
***********************************************************************************************
*/

/*
.menu-category {
	background-color: #d3edf5;
	letter-spacing: -.40em; /＊ 文字間を詰めて隙間を削除する ＊/
	margin: 0px auto 0px auto;
	padding: 30px 0px 15px 0px;
	position: relative;
	text-align: center;
	width: 1120px;
}

	.viewmode-mobile .menu-category {
		padding: 25px 0px 25px 0px;
		width: auto;
	}

	/＊ 背景の延長 ＊/
	.menu-category::before,
	.menu-category::after {
		background-color: #d3edf5;
		content:"";
		display: block;
		top: 0;
		height: 100%;
		position: absolute;
		width: 100%;
	}

	.menu-category::before {
		left: -100%;
	}

	.menu-category::after {
		right: -100%;
	}

	.menu-category h2 {
		background-color: transparent;
		letter-spacing: 0;
		line-height: 1.3;
		font-size: 180%;
		font-weight: bold;
		display: block;
		margin: 0;
		padding: 0px;
		text-align: center;
	}

		.viewmode-mobile .menu-category h2 {
			font-size: 150%;
			margin-bottom: 10px;
		}

		.menu-category h2::before {
			content: none;
		}

	.menu-category .iscroll {
		height: 300px;
		overflow: hidden;
	}

	/＊ 罫線の飾り（未使用） ＊/
	/＊
	.menu-category::after {
		border-top: 4px solid #33cccc;
		content: "";
		display: block;
		left: 0;
		position: absolute;
		top: -60px;
		width: 1100px;
	}

		.viewmode-mobile .menu-category::after {
			width: 100%;
		}
	＊/

	.menu-category li {
		/＊
		border: 1px solid #8b9ba9;
		＊/
		display: inline-block;
		letter-spacing: normal; /＊ 文字間を通常に戻す ＊/
		list-style-type: none;
		margin: 15px;
		vertical-align: top;
	}

		.viewmode-mobile .menu-category li {
			display: block;
			margin: 10px 0px 0px 0;
		}

			.viewmode-mobile .menu-category h2 + li {
				margin-top: 0;
			}

		.menu-category li img {
			display: block;

			transition: all 0.2s ease;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}

			.menu-category li a:hover img {
				opacity: 0.7;
			}

		.menu-category li h2 {
			color: #333;
			display: block;
			font-size: 15px;
			line-height: 1.6;
			margin: 0px 0px;

			text-align: left;
		}

		.menu-category li a {
			background-color: #000;
			background-repeat: no-repeat;
			color: #fff;
			display: block;
			font-size: 16px;
			letter-spacing: 0.05em;
			line-height: 1.6;
			margin: 0px 0px;
			min-height: 110px;
			padding: 10px 8px 10px 140px;
			position: relative;
			text-align: left;
			text-decoration: none;
			width: 325px;

			transition: all .2s ease;
		}

			.menu-category li a:hover {
				opacity: 0.7;
			}

			.viewmode-mobile .menu-category li a {
				font-size: 15px;
				min-height: 80px;
				padding: 10px 8px 10px 110px;
				width: auto;
			}

			/＊ サムネイル ＊/
			.menu-category li a::before {
				content: "";
				display: block;
				background-color: #eee;
				background-repeat: no-repeat;
				background-position: 0px 0px;
				background-size: cover;
				height: 110px;
				overflow: hidden;
				left: 0;
				top: 0;
				position: absolute;
				width: 110px;

				transition: all .2s ease;
			}

				.viewmode-pc .menu-category li a:hover::before {
					/＊
					opacity: 0.7;
					＊/
				}

				.viewmode-mobile .menu-category li a::before {
					height: 80px;
					width: 80px;
				}

			/＊ 矢印の飾り ＊/
			.menu-category li a::after {
				color: #fff;
				content: "\f105";	/＊ angle-right ＊/
				display: block;
				font-family: 'Font Awesome 5 Free';
				font-size: 20px;
				font-weight: 900;
				line-height: 1;
				top: 13px;
				left: 125px;
				position: absolute;
			}

				.viewmode-mobile .menu-category li a::after {
					left: 92px;
				}

	.menu-category li a:link {
		text-decoration: none;
	}

	.menu-category li a:visited {
		/＊
		color: #999;
		＊/
	}

	.viewmode-mobile .menu-category .iScrollVerticalScrollbar {
		background-color: rgba(238,238,238,0.5);
	}

*/

/*
***********************************************************************************************
ページメニュー（未使用）
***********************************************************************************************
*/

/*
.page_menu {
	/＊
	background-color: #FDFAF3;
	＊/
	border: 4px solid #33cccc;
	padding: 20px 20px 15px 20px;

	/＊
	border-radius: 7px;
	＊/
}

	.page_menu li {
		background-image: url("../img/bullet_common5.png");
		background-repeat: no-repeat;
		background-position: 0px 6px;
		list-style-type: none;
		padding-left: 20px;
		margin-bottom: 5px;
		text-align: left;
	}

	.page_menu li a {
		color: #111;
	}
*/


/*
***********************************************************************************************
お知らせ（未使用）
***********************************************************************************************
*/

/*
.block-news {
	/＊
	background-color: #fff;
	border: 1px solid #a2b7cc;
	＊/
	box-sizing: border-box;
	margin-top: 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
	z-index: 1;
}

	.viewmode-mobile .block-news {
		padding: 0px 0px 0px 0px;
	}

	.block-news-inner {
		margin: 0 auto 0 auto;
		/＊
		max-width: 950px;
		＊/
		padding: 0px 0px 0px 0px;
		position: relative;
	}

		.viewmode-mobile .block-news-inner {
			padding-left: 0px;
		}

	/＊ お知らせ記事のリスト ＊/
	.block-news .news_content {
		overflow: hidden;
		/＊
		overflow: scroll;
		overflow-x: hidden;
		＊/
		height: 220px;
		padding-right: 20px;
		position: relative;
		margin: 0 auto;
		/＊
		max-width: 960px;
		＊/
		text-align: left;
		z-index: 1;

		-webkit-overflow-scrolling: touch;
	}

		.viewmode-mobile .block-news .news_content {
			clear: both;
			height: 300px;
		}


	/＊ 過去のお知らせ ＊/
	.block-news-tab .news_archive {
		bottom: -5px;
		display: block;
		margin: 0px auto 0 auto;
		position: absolute;
		left: 45px;
		z-index: 1;
	}

		.viewmode-mobile .block-news-tab .news_archive {
			bottom: -21px;
			right: -10px;
		}

		.block-news-tab .news_archive a {
			/＊
			color: #fff;
			＊/
			display: inline-block;
			/＊
			font-size: 14px;
			＊/
			letter-spacing: 0.1em;
			line-height: 1;
			position: relative;
			padding: 10px 30px 10px 10px;
			text-decoration: none;
			vertical-align: top;

			transition: all 0.2s ease;
		}

			.block-news-tab .news_archive a:hover {
				text-decoration: none;
				opacity: 0.7;
			}

			/＊ 矢印の飾り ＊/
			.block-news-tab .news_archive a::after {
				color: #fff;
				content: "\f054";	/＊ fa-chevron-right ＊/
				display: inline-block;
				font-family: 'Font Awesome 5 Free';
				font-size: 14px;
				font-weight: 900;
				line-height: 1.0;
				position: absolute;
				text-decoration: none;
				right: 10px;
			}

			.block-news-tab .news_archive a:hover {
			}

				.block-news-tab .news_archive a:hover::before {

				}
*/


/*
***********************************************************************************************
お知らせのリスト（未使用）
***********************************************************************************************
*/

/*
.list-news {
	list-style-type: none;
	margin: 0 0px 0px 0px;
	padding: 0px;
	text-align: left;
}

	.viewmode-mobile .list-news {
		line-height: 1.6;
	}

	.list-news::after {
		content: "";
		clear: both;
		display: block;
	}

	.list-news:first-child {
	}

.list-news > li {
	/＊
	border-top: 1px solid #d0dbe5;
	＊/
	letter-spacing: -.40em; /＊ 文字間を詰めて隙間を削除する ＊/
	line-height: 1.6;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 16px 0px;
	position: relative;
}

	.viewmode-mobile .list-news > li {
		margin: 0 0 0px 0;
		padding: 0px 0px 20px 0px;
	}

		.viewmode-mobile .list-news > li:last-child {
			padding-bottom: 0px;
		}

	.list-news > li + li {

	}

		.viewmode-mobile .list-news > li + li {
		}

/＊ お知らせ記事の日付 ＊/
.list-news li .date {
	color: #666;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	letter-spacing: .05em; /＊ 文字間を通常に戻す ＊/
	min-width: 125px;
	position: relative;
	top: 4px;
	vertical-align: top;
}

	.list-news ul dt:first-child .date {
		border-top: none;
		/＊
		padding-top: 5px;
		＊/
	}

	.viewmode-mobile .list-news li .date {
		font-size: 13px;
	}

	/＊ NEWアイコン ＊/
	.list-news li .date img {
		margin: 0 0px 2px 10px;
		vertical-align: middle;
	}

	/＊ アイキャッチ画像（未使用） ＊/
	/＊
	.list-news li .thumb {
		float: left;
		margin: 0px 0px 30px -130px;
		width: 100px;
		height: 100px;
	}

		.viewmode-mobile .list-news li .thumb {
			display: none;
			width: auto;
		}

		.list-news li .thumb img {
			height: 100% !important;
			margin: 0 0px 0px 0px;
			width: auto !important;
		}

	.list-news li .thumb .nailthumb-title {
		display: none;
	}
	＊/

/＊ カテゴリ（未使用） ＊/
.list-news li .cat {
	border: 1px solid #ccc;
	display: inline-block;
	display: none;
	font-size: 14px;
	letter-spacing: .05em; /＊ 文字間を通常に戻す ＊/
	line-height: 1.3;
	margin: 0px 0px 0px 15px;
	min-width: 8em;
	padding: 3px 10px;
	position: relative;
	text-align: center;
	top: 1px;
	vertical-align: top;
}

	.viewmode-mobile .list-news li .cat {
		font-size: 12px;
	}

/＊ お知らせ記事のタイトル＊/
.list-news li .title {
	/＊
	border-top: 1px solid #d0dbe5;
	＊/
	display: inline-block;
	font-size: 95%;
	letter-spacing: .05em; /＊ 文字間を通常に戻す ＊/
	line-height: 2;
	margin: 0px 0px 0px 0px;
	max-width: 585px;
	max-width: 725px;
	padding: 0px 0px 0px 20px;
	vertical-align: top;
}

	.list-news li .date:first-child + .title {
		/＊
		border-top: none;
		padding-top: 5px;
		＊/
	}

	.viewmode-mobile .list-news li .title {
		margin: 5px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	.list-news li .title a {
		color: #000;
		/＊
		text-decoration: none;
		＊/
	}

		.list-news li .title a:hover {
			/＊
			text-decoration: underline;
			＊/
		}


		/＊
		.list-news li .title ul {
			list-style-type: none;
			margin: 0px 0 0 0;
			padding: 0px;
		}

			.list-news li .title ul li {
				padding-left: 0.9em;
				position: relative;
			}

				/＊ 矢印の飾り（未使用） ＊/
				.list-news li .title ul li::before {
					color: #12aba4;
					content:"\f054";	/＊ fa-chevron-right ＊/
					display: block;
					font-family: 'Font Awesome 5 Free';
					font-size: 0.9em;
					font-weight: 900;
					line-height: 1.5;
					text-decoration: none;
					top: .25em;
					left: 0px;
					position: absolute;
				}
				＊/

*/


/*
***********************************************************************************************
重要なお知らせ（未使用）
***********************************************************************************************
*/

/*
.block-news.important {
	border: 3px solid #fecb43;
	height: auto;
	overflow: hidden;
	padding: 0px 0px;
	position: relative;
	visibility: visible;
}

	.block-news.important .block-news-inner {
		padding-left: 210px;
	}

		.viewmode-mobile .block-news.important .block-news-inner {
			padding: 10px;
		}

	.block-news.important h2 {
		background-color: #fecb43;
		background-image: none;
		color: #000;
		font-size: 19px;
		left: 0;
		top: 0px;
		padding: 19px 10px 10px 20px;


		/＊
		/＊ Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff6600+0,f2b452+100 ＊/
		background: #ff6600; /＊ Old browsers ＊/
		background: -moz-linear-gradient(-45deg,  #ff6600 0%, #f2b452 100%); /＊ FF3.6-15 ＊/
		background: -webkit-linear-gradient(-45deg,  #ff6600 0%,#f2b452 100%); /＊ Chrome10-25,Safari5.1-6 ＊/
		background: linear-gradient(135deg,  #ff6600 0%,#f2b452 100%); /＊ W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ ＊/
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6600', endColorstr='#f2b452',GradientType=1 ); /＊ IE6-9 fallback on horizontal gradient ＊/
		＊/
	}

		.viewmode-mobile .block-news.important h2 {
			font-size: 15px;
			margin: -10px -10px 10px -10px;
			padding: 5px 10px;
			position: relative;
		}

	.block-news.important ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

		.block-news.important ul .title {

		}
*/


/*
***********************************************************************************************
yuga.jsのタブ
***********************************************************************************************
*/

.tabNav {
	border-bottom: 1px solid #8f9eab;
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
	line-height: 1.3;
	list-style-type: none;
	margin: 0 0 20px 0;
	padding: 0 0 0 0px;
}

	.tabNav li {
		border: 1px solid #8f9eab;
		border-bottom: none;
		letter-spacing: normal; /* 文字間を通常に戻す */
		display: inline-block;
		margin: 5px 5px -1px 0px;
		padding: 0;
		white-space: nowrap;
		vertical-align: top;
	}

		.tabNav li a {
			background-color: #8f9eab;
			color: #fff !important;
			display: block;
			margin: 0;
			padding: 5px 10px;
			white-space: nowrap;
		}

			.tabNav li a:hover {
				color: #333 !important;
				background: #fff;
				text-decoration: none;
			}

			.tabNav li a.active {
				color: #333 !important;
				background: #fff;
			}


/*
***********************************************************************************************
よくある質問（未使用）
***********************************************************************************************
*/

/*
	.faq dl {
		margin: 0px auto 0 auto;
		/＊
		padding: 25px;

		border-radius: 8px;
		＊/
	}

		.viewmode-mobile .faq dl {
			/＊
			margin-top: 10px;
			padding: 15px;
			＊/
		}

		.faq dt,
		.faq dd {
			letter-spacing: 0.1em;
			margin-left: 0;
			padding-left: 55px;
			position: relative;
			text-align: left;
		}

			.viewmode-mobile .faq dt,
			.viewmode-mobile .faq dd {
				padding-left: 45px;

			}

		/＊ 質問 ＊/
		.faq dt {
			/＊
			color: #d84b0c;
			＊/
			display: inline-block;
			/＊
			font-size: 120%;
			＊/
			font-weight: bold;
			padding-top: 10px;
			padding-bottom: 10px;

			vertical-align: top;
		}

			.faq dt span {
				text-decoration: underline;
			}

			.faq dt:hover {
				cursor: pointer;

			}

				.faq dt:hover span {
					text-decoration: none;
				}

			/＊ 展開時 ＊/
			.faq dt.active {
				color: #000;
			}

			.faq h2 + dl dt {
				border-top: none;
			}

			.viewmode-mobile .faq dt {
				line-height: 1.6;
				margin-top: 0px;
				/＊
				padding-top: 20px;
				＊/
				padding-bottom: 15px;
			}

			/＊ [Q][A]の飾り ＊/
			.faq dt::before,
			.faq dd::before {
				background-color: #c11c29;
				box-sizing: border-box;
				color: #fff;
				content: "Q";
				display: block;
				/＊
				font-family: 'Cabin', sans-serif;
				＊/
				font-family: 'DINOT-Regular', sans-serif;
				font-weight: bold;
				font-size: 22px;
				/＊
				font-weight: bold;
				＊/
				line-height: 1;
				left: 0px;
				margin-top: -2px;
				height: 40px;
				width: 40px;
				padding: 8px 5px 9px 7px;
				position: absolute;
				text-align: center;

				border-radius: 100%;
			}

				.viewmode-mobile .faq dt::before,
				.viewmode-mobile .faq dd::before {
					left: 0px;
					padding-top: 11px;

					transform: scale(0.8);
					transform-origin: 0 0;
				}

					.ios.viewmode-mobile .faq dt::before,
					.ios.viewmode-mobile .faq dd::before {
					}

			/＊ [A] ＊/
			.faq dd::before {
				background-color: #666;
				content: "A";
				margin-top: -2px;
			}


		/＊ 回答 ＊/
		.faq dd {
			display: block;
			/＊
			font-size: 90%;
			＊/
			overflow: hidden;
			max-height: 0;
			padding-bottom: 0px;

			transition: all .3s ease;
		}

			/＊ 展開時 ＊/
			.faq .active + dd {
				display: block;
				max-height: 500px;
				padding-top: 10px;
				padding-bottom: 20px;

				transition: all .3s ease;
			}

				.viewmode-mobile .faq .active + dd {
					max-height: 1000px;
				}

*/


/*
***********************************************************************************************
jQuery UIのDatepicker
***********************************************************************************************
*/

/* 日曜日 */
.ui-datepicker-calendar .day-sunday > a,
.ui-datepicker-calendar .day-holiday > a {
	background-color: #ffc0c0;
}

/* 土曜日 */
.ui-datepicker-calendar .day-saturday > a {
	background-color: #c0d0ff;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	background-color: #c11c29 !important;
	border: 1px solid #c11c29 !important;
}


/*
***********************************************************************************************
リンクの矢印（未使用）
***********************************************************************************************
*/

/*
.link_common {
	margin-top: 5px;
	text-align: right;
	font-size: 95%;
}

	.link_common a {
		background-image: url(../img/bullet_nav-footer2.gif);
		background-repeat: no-repeat;
		background-position: 0px 3px;
		padding-left: 12px;
	}
*/


/*
***********************************************************************************************
アコーディオンメニュー（水平）（未使用）
***********************************************************************************************
*/

/*

.accordion {
	height: 350px;
	overflow: hidden;
	max-width: 1080px;
	width: 100%;
}

	.accordion ul {
		display: table;
		table-layout: fixed;
		margin: 0;
		padding: 0;
		width: 100%;
	}

		.accordion ul li a {
			background: rgba(0, 0, 0, 0);
		}

			.accordion ul:hover li a {
				background: rgba(0, 0, 0, 0.5);
			}

		.accordion ul:hover li {
			width: 20%;	/＊ hover状態のli要素の幅を引いた残りをli要素で等分 ＊/
		}

			.accordion ul:hover li:hover {
				width: 60%;
			}

				.accordion ul:hover li:hover a {
					background: rgba(0, 0, 0, 0);
				}

					.accordion ul:hover li:hover a ＊ {
						opacity: 1;
						-webkit-transform: translateX(0);
						transform: translateX(0);
					}

		.accordion ul li {
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			display: table-cell;
			vertical-align: bottom;
			position: relative;
			height: 350px;
			width: 25%;	/＊ li要素で等分 ＊/

			transition: all 500ms ease;
		}

			.accordion ul li div {
				display: block;
				overflow: hidden;
				width: 100%;
			}

*/


/*
***********************************************************************************************
画像表示のアニメーション
***********************************************************************************************
*/

/* アニメーション1 ━━━━━━━━━━━━━━━━━━━━━━━ */

.mask1 {
	display: block;
	overflow: hidden;
	position: relative;
}

	.mask1.animated::before {
		background-color: #fff;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 2;

		animation: mask1a .7s forwards ease-in;
	}

	.mask1.animated::after {
		background-color: #00a3d8;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;

		animation: mask1b 1.2s forwards ease-in;
	}

@keyframes mask1a {
	0% {
		transform: scale3d(2, 2, 2) translate3d(0, 0, 0) rotate(20deg);
	}
	100% {
		transform: scale3d(2, 2, 2) translate3d(100%, 50%, 0) rotate(20deg);
	}
}

@keyframes mask1b {
	0% {
		transform: scale3d(2, 2, 2) translate3d(0, 0, 0) rotate(20deg);
	}
	100% {
		transform: scale3d(2, 2, 2) translate3d(100%, 50%, 0) rotate(20deg);
	}
}

/* アニメーション2 ━━━━━━━━━━━━━━━━━━━━━━━ */

.mask2 {
	display: block;
	overflow: hidden;
	position: relative;
}

	.mask2.animated::before {
		background-color: #fff;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;

		transform-origin: top left;
		animation: mask2a .5s forwards ease-in;
	}

	.mask2.animated::after {
		background-color: #00a3d8;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 2;

		transform-origin: top left;
		animation: mask2b .7s forwards ease-in;
	}

@keyframes mask2a {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(100%, 0, 0);
	}
}

@keyframes mask2b {
	0% {
		transform: scale3d(0.1, 1, 1) translate3d(0, 0, 0);
	}
	50% {
		transform: scale3d(0.5, 1, 1) translate3d(50%, 0, 0);
	}
	100% {
		transform: scale3d(0.3, 1, 1) translate3d(400%, 0, 0);
	}
}


/*
***********************************************************************************************
animate.cssの上書き
***********************************************************************************************
*/

body .fadeInUp {
	animation-name: fadeInUp3;
	animation-duration: .3s;
	animation-timing-function: ease-in;
}

@keyframes fadeInUp2 {
	from {
		opacity: 0;
		transform: translate3d(0, 100px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInUp3 {
	0% {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}

	85% {
		opacity: 1;
		transform: translate3d(0, -5px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

body .bounceInUp {
	animation-duration: .75s;
}

/*
***********************************************************************************************
ウェビナーのバナー（PC専用）
***********************************************************************************************
*/

.banner01 {
	background-color: #000;
	height: 115px;
	overflow: hidden;
	padding: 20px;
	position: fixed;
	right: 20px;
	top: 100px;
	z-index: 10;
	width: 185px;
	transition: all .3s ease-out;
}

		/* 縦長版 */
		.banner01 {
			height: 490px;
			right: 0px;
			padding: 30px 10px 0px 30px;
			width: 55px;
		}

	.viewmode-mobile .banner01 {
		border-top: 1px solid #fff;
		height: auto;
		right: auto;
		margin-left: -10px;
		margin-right: -10px;
		padding: 20px 20px 20px 20px;
		position: relative;
		top: auto;
		width: auto;
		/*
		width: 485px;
		*/
	}

	/* 背景の目隠し */
	.banner01::before {
		background-color: #000;
		content: "";
		display: block;
		height: 100%;
		right: 0;
		top: 0;
		position: absolute;
		width: 55px;
		z-index: 10;
	}

		.viewmode-mobile .banner01::before {
			display: none;
		}

	.banner01:hover {
		cursor: pointer;
		/*
		height: 518px;
		*/
		width: 500px;
	}

		.viewmode-mobile .banner01:hover {
			width: auto;
		}

	/* 無料ウェビナー定期開催中！ */
	.banner01 h2 {
		color: #fff;
		font-size: 20px;
		letter-spacing: 0;
		line-height: 1.3;
		margin: 0;
		padding: 0;
		position: absolute;
		right: 15px;
		font-feature-settings: normal;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		z-index: 15;
	}

		.viewmode-mobile .banner01 h2 {
			font-size: 16px;
			position: relative;
			right: auto;
			-ms-writing-mode: lr-tb;
			writing-mode: horizontal-tb;
		}

		/* 詳細・お申込みはこちら */
		.banner01 h2 small {
			background-color: #fff;
			color: #000;
			display: inline-block;
			font-size: 13px;
			font-weight: normal;
			line-height: 1.5;
			margin: 20px 0 0 0;
			padding: 8px 5px;
			right: -2px;
			position: relative;
			transition: all .3s ease-out;
		}

			.banner01:hover h2 small {
				opacity: 0;
			}

			.viewmode-mobile .banner01 h2 small {
				display: none;
			}

	.banner01 ul {
		margin-right: 25px;
		opacity: 0;
		padding: 0px 0 0 0;
		position: relative;
		z-index: 9;
		transition: all .3s ease-out;
		/*
		transition-delay: .3s;
		*/
	}

		.banner01:hover ul {
			opacity: 1;
		}

		.viewmode-mobile .banner01 ul {
			margin-top: 1em;
			margin-right: auto;
			opacity: 1;
		}

	.banner01 li {
		position: relative;
		width: 400px;
	}

		.viewmode-mobile .banner01 li {
			width: auto;
		}

		/* 終了しました */
		.banner01 li.closed::before {
			background-color: #000;
			content: "終了しました";
			color: #fff;
			display: block;
			font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS P Gothic","Osaka",Verdana,Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 1.3em;
			left: 50%;
			line-height: 1.3;
			padding: .5em .75em .3em .75em;
			position: absolute;
			top: 50%;
			transform: translate(-50%,-50%) rotate(-15deg);
		}

		.banner01 li + li {
			margin-top: 30px;
		}

			.viewmode-mobile .banner01 li + li {
				margin-top: 20px;
			}

	.banner01 a {
		background-color: #fff;
		display: block;
	}

	.banner01 img {
		vertical-align: top;
		width: 400px;
	}

		.viewmode-mobile .banner01 img {
			width: auto;
		}

		/* 終了に伴いhoverを無効化 */
		.banner01 li.closed a:hover {
			cursor: default;
			pointer-events: none;
		}

			.banner01 li.closed a:hover img {
				opacity: 1;
			}


/*
***********************************************************************************************
シンプルサステナビリティサイト第二弾へのバナー（PC専用）
***********************************************************************************************
*/

.banner02 {
	position: fixed;
	top: 100px;
	right: 0;
	z-index: 10;
	width: 55px;
	height: 490px;
	padding: 13px 10px 0px 14px;
	background-color: #000;
	overflow: hidden;
	transition: all .3s ease-out;
}

	.viewmode-mobile .banner02 {
		border-top: 1px solid #fff;
		height: auto;
		right: auto;
		margin-left: -10px;
		margin-right: -10px;
		padding: 0;
		position: relative;
		top: auto;
		width: auto;
	}

	/* 背景の目隠し */
	.banner02::before {
		background-color: #000;
		content: "";
		display: block;
		height: 100%;
		right: 0;
		top: 0;
		position: absolute;
		width: 55px;
		z-index: 10;
	}

		.viewmode-mobile .banner02::before {
			display: none;
		}

	.banner02:hover {
		cursor: pointer;
		width: 500px;
	}

		.viewmode-mobile .banner02:hover {
			width: auto;
		}

	.banner02 h2 {
		color: #fff;
		font-size: 20px;
		letter-spacing: 0;
		line-height: 1.3;
		margin: 0;
		padding: 0;
		position: absolute;
		right: 15px;
		font-feature-settings: normal;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		z-index: 15;
	}

  .banner02 h2 span {
    display: inline-block;
    vertical-align: top;
  }

  .banner02 h2 span:nth-of-type(1) {
    font-size: 10px;
    letter-spacing: 1px;
    margin-right: -1px;
  }

  .banner02 h2 span:nth-of-type(2) {
    font-size: 26px;
    margin: 20px -1px 24px 0;
    letter-spacing: 1.8px;
    line-height: 1;
  }

		.viewmode-mobile .banner02 h2 {
			display: none;
		}

		/* 詳細はこちら */
		.banner02 h2 small {
			background-color: #fff;
			color: #000;
			display: inline-block;
			font-size: 13px;
			line-height: 1;
      letter-spacing: 1px;
			padding: 8px 5px 7px;
      right: -2px;
			position: relative;
			transition: all .3s ease-out;
		}

			.banner02:hover h2 small {
				opacity: 0;
			}

			.viewmode-mobile .banner02 h2 small {
				display: none;
			}

    .banner02 > a {
      position: absolute;
      top: 17px;
      left: 19px;
      width: 425px;
      display: block;
    }

    .viewmode-mobile .banner02 > a {
      position: relative;
      top: auto;
      left: auto;
      width: 90%;
      margin: 18px auto;
    }

    .banner02 > a img {
      display: block;
    }