@charset "utf-8";
/*------------------------------*/
/* 基本設定 */
body, html {
	font-size:14px;
	width: 100%;
	overflow-x: hidden; /* アニメーション要素の見切れ対策 */
	overflow-y: auto;
}
body {
	opacity: 0;
}

/* Adobe Fonts */
.font_filmotype_hone {
	font-family: filmotype-honey, sans-serif;
	font-weight: 300;
	font-style: normal;
}

/*------------------------------*/
/* ヘッダー */
/*------------------------------*/

/* メインヘッダー内の大見出し */
.main_header_title_frame {
	position: absolute;
	top:20%;
	right:15%;
	height:70%;
}
.main_header_title_3 {
	height:100%;
	width:auto
}
.main_header_title_2 {
	height:100%;
	width:auto
}
.main_header_title_1 {
	height:100%;
	width:auto
}

/* メインメニュー */
.main_menu_box {
	display: block;
	color:#ffffff;
	text-align: center;
}

/* お問い合わせボタン */
.inquiry_button {
	position: absolute;
	top:50%;
	width:100%;
	max-width: 70px;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

/*------------------------------*/
/* メインロゴ */
.main_logo {
	position: absolute;
	top:10px;
	left:30px;
	width:100%;
	max-width:120px;
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.main_logo {
		left:20px;
		max-width:85px;
	}
}
/* スマホ */
@media only screen and (max-width:599px) {
	.main_logo {
		left:10px;
		max-width:70px;
	}
}

/* メインメニュー枠 */
.main_menu_bar_frame {
	position: absolute;
	top: 20px;
	right: 0;
	width: 70%;
	display: flex;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, #287373 10%);
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.main_menu_bar_frame {
		display: none;
	}
}

/* メインメニューの背景画像 */
.main_menu_bar_bg {
	background-image: url('/image/main_menu_bar_bg.webp');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left top;
}

/* メインメニュー枠内 */
.main_menu_bar_frame_inner {
	width: 1000px;
	max-width: 70%;
	margin-right: calc(50vw - 500px);
}

/*--------------------*/
/* ヘッダー下部の枠 */
.header_bottom_frame {
	background-color: #287373;
	height:30px;
}

/* ヘッダー枠下部の背景部 */
.header_bottom_bg_l {
	background-image: url("/image/header_bottom_bg_l.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position:top center;
	height:200px;
}

/*------------------------------*/
/* フッター */
/*------------------------------*/

footer {
	color:#ffffff;
}

/* フッター上部 */
.footer_top_frame {
	background-image: url('/image/footer_top_bg.webp');
	background-size: 100% auto;
	background-position: bottom center;
	background-repeat: no-repeat;
	padding-bottom:300px;
}
/* スマホ */
@media only screen and (max-width:599px) {
	.footer_top_frame {
		padding-bottom:150px;
	}
}

/* フッター下部 */
.footer_bottom_frame {
	background-image: url('/image/footer_bottom_bg.webp');
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;
	background-color:#287373;
	padding:30px 5px;
}

/* 白縦線 */
.border_right_ffffff {
	border-right: 2px solid #ffffff;
}

/* フッター部メニューボタン */
.footer_menu_button {
	padding:10px 0px;
}
/* スマホ */
@media only screen and (max-width:599px) {
	.footer_menu_button {
		border:none;
		padding:10px;
	}
}

.footer_button {
	color:#ffffff;
}

/*------------------------------*/
/* フッターロゴ */
.footer_logo {
	width: 100%;
	max-width:150px;
}
/* フッタータイトル */
.footer_logo_title {
	width: 100%;
	max-width:200px;
}
/* フッター問合せアイコン */
.footer_inquiry_button {
	width: 100%;
	max-width:100px;
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%); /* Safari用 */
	transform:translateY(-50%);
}
/* スマホ */
@media only screen and (max-width:599px) {
	.footer_logo {
		max-width:110px;
	}
	.footer_inquiry_button {
		max-width:80px;
	}
}

/*------------------------------*/
/* 背景色 */
.background_color_287373 {
	background-color:#287373;
}

/*------------------------------*/
/* カラー */
.color_287373 {
	color:#287373;
}

/*------------------------------*/
/* 線 */
.border_top_287373 {
	border:none;
	border-top:1px solid #287373;
}
.border_top_ffffff {
	border:none;
	border-top:1px solid #ffffff;
}

/*------------------------------*/
/* トップへ戻るボタン */
/*------------------------------*/
.js_scroll_top_button {
	width:50px;
	height:50px;
	position: fixed;
	z-index: 102;
	bottom: 120px;
	right:10px;
	background-color: #287373;
	color: #000000;
	border:1px solid #ffffff;
	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;
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* スマホハイライトカラー */
	display: none;
	transition:0.3s;
}
.js_scroll_top_button:hover {
	background-color: #073a23;
}

/* スマホ */
@media only screen and (max-width:550px) {
	.js_scroll_top_button {
		bottom:30px;
	}
}

/* 上矢印 */
.up_arrow {
	width:100%;
	height: auto;
}

/*------------------------------*/
/* ハンバーガーボタン */
/*------------------------------*/
/* 表示位置調整枠 */
.js_menu_switch_frame {
	bottom: 200px;
	right:10px;
	position: fixed;
	z-index: 103;
	background-color:#287373;
	color:#ffffff;
	border:1px solid #ffffff;
}
.js_menu_switch_frame:hover {
	background-color: #073a23;
}
/* ハンバーガーボタン */
.js_menu_switch {
	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;
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* スマホハイライトカラー */
	transition:0.3s;
	width:50px; /* 外幅 */
	height:50px; /* 外幅 */
	padding:7px 7px; /* [(★外高 - ★三本線の合計の高さ) / 2] [上下スペース] */
}
/* スマホ */
@media only screen and (max-width:550px) {
	.js_menu_switch {
		bottom:100px;
	}
}

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

/*------------------------------*/
/* モバイルメニュー枠 */
/*------------------------------*/
.js_mobile_nav {
	/* right:-100%; /* 右 */
	background-color:#f0ffed;
	border-right:1px solid #073a23;
	position:fixed;
	box-sizing:border-box;
	top:0px;
	width:100%;
	max-width:330px;
	height: 100%;
	z-index:102;
	left:-100%; /* 左 */
	padding:30px 15px 50px 15px;
	transition:0.5s linear;
	overflow: auto;
}

/* モバイルメニューボタン */
.footer_nav_button {
	display: block;
	font-size: 16px;
	color: #ffffff;
	background-color: #287373;
	padding:10px 5px 10px 15px;
	margin-top: 10px;
	transition: 0.3s;
	border-left: 15px solid #073a23;
	border-bottom: 1px solid #073a23;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}
.footer_nav_button:hover {
	background-color: #073a23;
}

/*------------------------------*/
/* アニメーション文字[ホバー] (layout.js) */
/*------------------------------*/
/* ホバー前後のスタイル */
.pop_text_css_01 {
	transition: 0.5s;
}
.pop_text_css_01_after {
	text-decoration: underline;
	color:#000000;
}

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

	--property_animation_css_01: opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_01: 60ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_01: -10ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

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

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

	--property_animation_css_02: top, opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_02: 70ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_02: -40ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

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

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

	--property_animation_css_03: left, opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_03: 100ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_03: -80ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

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

/*------------------------------*/
/* 変化前のスタイル */
.animation_css_04 {
	position: relative;
	opacity: 0;

	--property_animation_css_04: opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_04: 400ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_04: -390ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

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