@charset "utf-8";

/*------------------------------*/
/* 全体設定 */
/*------------------------------*/
body {
	font-size:13px;
	line-height: 1.8;
}

/*------------------------------*/
/* ヘッダー */
/*------------------------------*/
.header_fixed {
	position: fixed;
	width:100%;
	top:0px;
	left:0px;
	background-color: #ffffff;
	z-index: 1;
}

/* メインロゴ */
.main_logo {
	height: 100%;
	width: auto;
	max-height: 50px;
	transition: 0.3s;
}

/* メインメニューボタン */
.main_menu_button {
	display: block;
	width:100%;
	text-align: center;
}

/* ヘッダー枠 */
.header_flame {
	margin-top: 10px;
	border-top:10px solid #009ae3;
	border-bottom:10px solid #009ae3;
	height:500px;
	width:100%;
	overflow: hidden;
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.header_flame {
		height:400px;
	}
}
/* スマホ */
@media only screen and (max-width:599px) {
	.header_flame {
		height:300px;
	}
}

/* ヘッダー中央ロゴ */
.main_center_logo {
	position: absolute;
	top:55%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	height:40%;
	width: auto;
}

/*------------------------------*/
/* メインフレーム */
/*------------------------------*/
/* 問い合わせボタン */
.mail_button {
	width:100%;
	max-width: 130px;
	height:auto;
}

/* 飛行するフクロウ */
.flying_owl {
	position: absolute;
	top:30%;
	right:-100%;
	width:300%;
}
/* スマホ */
@media only screen and (max-width:599px) {
	.flying_owl {
		position: static;
		top:500%;
		right:-100%;
		width:100%;
	}
}

/*------------------------------*/
/* フッター */
/*------------------------------*/
/* 上部枠 */
.footer_box_top {
	background-color: #009ae3;
	padding:30px 10px;
	color:#ffffff;
}

.footer_logo {
	width:100%;
	max-width:250px;
}

/* 電話アイコン */
.tel_icon {
	position: absolute;
	top:50%;
	right:0px;
	height:30px;
	width:auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* モバイルメニューボタン */
.mobile_menu_button {
	display:block;
	width:200px;
	margin-left: auto;
	margin-right: auto;
	color:#ffffff;
	font-size:16px;
	padding:10px;
	letter-spacing: 5px;
}

/*------------------------------*/
/* メールでのお問い合わせボタン */
.icon_button_frame {
	width: 100%;
	max-width: 250px;
	height: 50px;
	background-color: #ffffff;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon_button_inner {
	width: 150%; /* 子要素幅 */
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #f0f0f0;
	transform-origin: left center;
	transition: transform 0.2s linear;
	z-index: 0;

	transform: translateX(-175%) skewX(40deg); /* スタート位置：親の左端から -175% */
}

.icon_button_frame:hover .icon_button_inner {
	transform: translateX(-25%) skewX(40deg); /* 終了位置：親の左端から -25% */
}

.icon_button_svg {
	position: relative;
	z-index: 1;
	pointer-events: none;
	height: auto;
	width: calc(100% - 40px);
}

/*------------------------------*/
/* 共通 */
/*------------------------------*/
/* 線 */
.border_right_000000 {
	border-right: 1px solid #000000;
}
.border_top_ffffff_d {
	border: none;
	border-top: 1px dotted #ffffff;
}
/* カラー */
.color_009ae3 {
	color:#009ae3;
}

/*------------------------------*/
/* アニメーション文字[ホバー] (layout.js) */
/*------------------------------*/
/* ホバー前の共通スタイル */
.hover_trigger_01 span {
	display: inline-block;
	transition: 0.2s;
}
.hover_trigger_01_after {
	color: #666666;
	text-decoration: underline;
}

/*------------------------------*/
/* トップへ戻るボタン */
/*------------------------------*/
.js_scroll_top_button {
	width:50px;
	height:50px;
	position: fixed;
	z-index: 102;
	bottom: 120px;
	right:10px;
	background-color: rgba(0, 154, 227, 0.5);
	color: #666666;
	border:1px solid #ffffff;
	border-radius:2px;
	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: rgba(0, 154, 227, 1);
}

/* 上矢印 */
.up_arrow {
	position: absolute;
	top:50%;
	left:50%;
	width:40%;
	height:40%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

/*------------------------------*/
/* ハンバーガーボタン */
/*------------------------------*/
.js_menu_switch {
	width:50px; /* 外幅 */
	height:50px; /* 外高 */
	right:10px;
	bottom: 60px;
	position: fixed;
	z-index: 102;
	background-color:rgba(0, 154, 227, 0.5);
	color: #666666;
	border:1px solid #ffffff;
	border-radius:2px;
	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:15px 12px; /* [外高 - (三本線の高さ / 2)] [左右スペース] */
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* スマホハイライトカラー */
	transition:0.3s;
}
.js_menu_switch:hover {
	background-color:rgba(0, 154, 227, 1);
}

/*-----*/
/* 外枠の半分の高さ + 棒の太さ = 偶数で安定 */
.js_menu_trigger {
	position: relative;
	box-sizing: border-box;
	height: 20px; /* 三本線の高さ */
}
.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:rgba(0, 154, 227, 0.9);
	border-right:1px solid #cccccc;
	position:fixed;
	box-sizing:border-box;
	top:0px;
	width:100%;
	max-width:300px;
	z-index:101;
	overflow:auto;
	height:100%;
	left:-100%; /* 左 */
	padding:10px 20px 200px 20px;
	transition:0.3s;
}

/*------------------------------*/
/* ページャー用ボタン */
.center_wrapper {
	text-align: center;
}
.pager_button_off, .pager_button_on {
	min-width: 30px;
	display: inline-block;
	text-align: center;
	padding: 4px 4px;
	margin: 6px 2px;
	text-decoration: none;
	color: #666666;
	background-color: #efefef;
	user-select: none;
	transition: 0.2s;
}
.pager_button_on {
	background-color: #00939d;
	color: #ffffff;
}
/* ホバー効果 */
.pager_button_off:hover {
	background-color: #00939d;
	color: #ffffff;
}

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

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

	--property_animation_css_01: opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_01: 20ms; /* 要素単体の実行時間 (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: -30ms; /* 次の要素開始までの時差 (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); /* 処理軽減 */
}