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

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

/* メインタイトル枠 */
.main_title_box {
	position:absolute;
	z-index: 1;
	width:100%;
	width: auto;
}

/* メインロゴ */
.main_logo {
	height:70px;
	width: auto;
}

/* メインタイトル */
.main_title {
	height:70px;
	width: auto;
}

/* タブレット */
@media only screen and (max-width:1024px) {

	/* メインロゴ */
	.main_logo {
		height:50px;
	}

	/* メインタイトル */
	.main_title {
		height:50px;
	}

}

/* スマホ */
@media only screen and (max-width:599px) {

	/* メインロゴ */
	.main_logo {
		height:40px;
	}

	/* メインタイトル */
	.main_title {
		height:40px;
	}

}

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

#footer {
	padding-top:30px;
	padding-bottom:20px;
	background-image: url('/image/camouflage_bg.webp');
	background-size: cover;
	background-position: center;
	color:#ffffff;
	padding:10px;
}

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

/* 垂直の線 */
.vertical_line_w {
	background-image: url('/common_assets/image/vertical_line_index.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 3px 80%;
}

/* お問合せはコチラボタン */
.inquiry_footer_button {
	width:100%;
	max-width:110px;
	color:#ffffff;
}

/* モバイル用ナビボタン */
.footer_nav_button {
	padding:5px 0px;
	font-size:16px;
	display:block;
	color:#ffffff;
}
.footer_nav_button:hover {
	color:#ffff00;
}

/* モバイル用ナビボタン (サブ) */
.footer_nav_button_sub {
	font-size:14px;
	color:#ffffff;
}
.footer_nav_button_sub:hover {
	color:#ffff00;
}

/*------------------------------*/
/* フッター部隊名画像 */
.unit_title {
	height:50px;
}

/* お問合せはコチラボタン */
.footer_mail_icon {
	width: 100%;
	max-width: 120px;
}

/*------------------------------*/
/* SNS アイコン枠 */
.link_icon_frame_footer {
	margin-left:auto;
	margin-right:auto;
	max-width:300px;
}

/* SNS アイコン */
.link_icon_footer {
	width:40px;
	height:auto;
	transition: 0.3s;;
}
.link_icon_footer:hover {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
}

/*------------------------------*/
/* 丸型リンクバナー */
.link_baner {
	width:90%;
	max-width:130px;
}

/*------------------------------*/
/* YOUTUBE動画用の枠 */
.movie_wrapper {
	aspect-ratio: 16 / 9; /* 16:9 の比率を自動調整 */
}

.movie_wrapper iframe {
	width: 100%;
	height: 100%;
}

/*------------------------------*/
/* サファリにも対応した固定背景枠 */
/*------------------------------*/
/* 固定背景枠 (サファリ対応 / 高さが必要) */
.background_frame {
	position: relative;
	overflow: hidden;
}
/* 固定背景 */
.background_frame_bg {
	height:100%;
	width:100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
/* 未対応の Safari 対策 */
@supports (-webkit-touch-callout: none) {
	.background_frame_bg {
		background-attachment: scroll;
	}
}

/*------------------------------*/
/* フォントカラー */
/*------------------------------*/
.color_eee0b9 {
	color: #eee0b9;
}

/*------------------------------*/
/* 線 */
/*------------------------------*/
.border_top_cccccc_d {
	border:none;
	border-top:1px dotted #cccccc;
}
.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: #4e4e27;
	color: #000000;
	border:1px solid #383820;
	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: #383820;
}

/* スマホ */
@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:#505028;
	color:#ffffff;
	border:1px solid #383820;
}
.js_menu_switch_frame:hover {
	background-color: #383820;
}
/* ハンバーガーボタン */
.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:#908d5c;
	border-right:1px solid #383820;
	position:fixed;
	box-sizing:border-box;
	top:0px;
	width:100%;
	max-width:330px;
	height: 100%;
	z-index:102;
	left:-100%; /* 左 */
	padding:50px 25px;
	transition:0.7s linear;
	overflow: auto;
}

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

/*------------------------------*/
/* アニメーション文字[プレビュー] (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); /* 処理軽減 */
}