@charset "utf-8";
/* # =================================================================
#### フッター手前で止まるページトップボタン
# ================================================================= */
#page-top{
	position : fixed;
	right : 20px;
	bottom : 30px;
	width : 50px;
	height : 50px;
	background : #0A5774;
	border-radius : 50%;
	display : flex;
	align-items : center;
	justify-content : center;
	cursor : pointer;
	opacity : 0;            /* ← 初期非表示 */
	pointer-events : none;  /* ← 初期クリック無効 */
	transition : opacity 0.4s ease;
	z-index : 500;
}
/* 通常の表示 */
#page-top.is-visible{
	opacity : 1;
	pointer-events : auto;
}
/* フッター手前で非表示に戻す
#page-top.is-footer-stop{
	opacity : 0;
	pointer-events : none;
}
 */
#page-top a{
	color : #FFF;
	text-decoration : none;
	font-size : 14px;
}
/* ============================================================
#### フェードイン演出（方向付き）
============================================================ */
.js-fadein,
.js-fadein-up,
.js-fadein-down,
.js-fadein-left,
.js-fadein-right {
	opacity : 0;
	transition : all 0.8s ease-out;
}

/* --- 各方向別 初期位置 --- */
.js-fadein-up    { transform : translateY(30px); }
.js-fadein-down  { transform : translateY(-30px); }
.js-fadein-left  { transform : translateX(30px); }
.js-fadein-right { transform : translateX(-30px); }

/* --- 表示時 --- */
.js-fadein.is-visible,
.js-fadein-up.is-visible,
.js-fadein-down.is-visible,
.js-fadein-left.is-visible,
.js-fadein-right.is-visible {
	opacity : 1;
	transform : translate(0, 0);
}



/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){

}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){

}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){

}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/