@charset "utf-8";

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

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

.header_box {
	top:0px;
	left:0px;
	width:100%;
	position: fixed;
	z-index: 100;
}

/* トップページ以外のメイン背景画像枠 */
.main_bg {
	background-image: url('/image/main_bg_no.png');
	background-image: url('/image/main_bg.webp');
	background-size: cover;
	background-position: top center;
	background-repeat: repeat-y;
	padding-left:5px;
	padding-right:5px;
}

/*----------*/
/* 回転ボックス */
.flip_frame {
	display: block;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
}

/* 回転する箱の枠 */
.flip_box {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.2s ease;
}

/* ホバーで箱を回転 */
.flip_frame:hover .flip_box {
	transform: rotateX(90deg);
}

/* 表面と裏面 */
.flip_face {
	color: #ffffff;
	font-size: 18px;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 箱の表面 */
.front {
	transform: rotateX(0deg) translateZ(20px); /* flip_frame の半分 */
	background-color: #9e9e9e;
}

/* 箱の裏面 */
.back {
	transform: rotateX(-90deg) translateZ(20px); /* flip_frame の半分 */
	background-color: #666666;
}

/*----------*/
/* ミニアイコン */
.mini_icon_1 {
	background-color:#cccccc;
	padding: 0px 10px;
	border-radius:10px;
	font-size:12px;
	color:#ffffff;
	margin-left: 5px;
	white-space:nowrap;
}

/*------------------------------*/
/* ボーダーライン */
.border_all_000000 {
	border: 1px solid #000000;
}
.border_top_cccccc_d {
	border: none;
	border-top: 1px dotted #cccccc;
}

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

/* フッター上部 */
.footer_box_top {
	background-color: #000000;
	padding:30px 0px;
	color:#ffffff;
}

/* フッターロゴ */
.footer_logo {
	width:100%;
}
/* スマホ */
@media only screen and (max-width:599px) {
	/* フッターロゴ */
	.footer_logo {
		max-width:200px;
	}
}

.border_left_ffffff {
	border-left:1px solid #ffffff;
}
.border_right_ffffff {
	border-right:1px solid #ffffff;
}

/* スマホ */
@media only screen and (max-width:599px) {
	.sp_border_right_ffffff {
		border-right:1px solid #ffffff;
	}
}

/* メニューボタン */
.bottom_menu {
	font-size: 14px;
	color:#ffffff;
}
.bottom_menu:hover {
	text-decoration: underline;
}

/* フッターロゴ */
.footer_icon {
	width:60%;
	max-width: 200px;
}
/* スマホ */
@media only screen and (max-width:599px) {
	/* フッターロゴ */
	.footer_icon {
		max-width: 100px;
	}
}

/* フッター下部 */
.footer_box_bottom {
	text-align: center;
	padding: 5px;
	font-size: 12px;
}

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

/*------------------------------*/
/* トップへ戻るボタン */
/*------------------------------*/
.js_scroll_top_button {
	width:50px;
	height:50px;
	position: fixed;
	z-index: 102;
	bottom: 120px;
	right:10px;
	background-color: rgba(36, 204, 182, 0.5);
	color: #666666;
	border:1px solid #666666;
	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(36, 204, 182, 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(36, 204, 182, 0.5);
	color: #666666;
	border:1px solid #666666;
	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(36, 204, 182, 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(36, 204, 182, 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 10px 200px 10px;
	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: -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); /* 処理軽減 */
}