@charset "UTF-8";

/*=========================================================================================================
UNIFORM
=========================================================================================================*/

/*【 ＜ UNIFORM ＞ UNIFORM SETTING 】_■■■■■■■■■■■■■■■■■■*/
/*.【 HTML ALL SETTING 】======================================■*/
html,body{
    font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
*{
	margin: 0;
    padding: 0;
  }
/*. ===============================【 HTML ALL SETTING / END 】■*/


/*.【 SCROLL AREA SETTING 】===================================■*/
#SCRL{
	width: 14px;
	height: 45px;
	padding: 0;
	
	box-sizing: border-box;
	border: solid 2px rgba(255,255,255,0.3);
	border-radius: 10px;
	
	position: fixed;
	bottom: 50px;
	left: 55%;
	transform: translateX(-50%);
	opacity: 1;
	z-index: 1000;
    transition: opacity 500ms ease-in-out, visibility 500ms ease-in-out;
	visibility: visible; 	/* 初期表示を制御するために追加 */
}
.scroll-prompt {
	width: 8px;
	height: 8px;
	border-radius: 10px;
	background: rgba(255,255,255,0.3);
	position: relative;
	top: 16px;
	left: 5px;
	animation: fade-bounce 1800ms infinite ease-in-out;
  }
#SCRL::after{
	content: "SCROLL";
	display: block;
	color: rgba(255,255,255,0.3);
	font-weight: 500;
	position: relative;
	top: 40px;
	left: -30px;
}
#SCRL.hidden,
.scroll-prompt.hidden {
    opacity: 0;
    visibility: hidden;
  }

@keyframes fade-bounce {
      0% { opacity: 0; transform: translateX(-50%) translateY(-15px);	}
     50% { opacity: 1; transform: translateX(-50%) translateY(0);		}
    100% { opacity: 0; transform: translateX(-50%) translateY(15px);	}
	}
/*. ============================【 SCROLL AREA SETTING / END 】■*/


/*.【 BACK TOP BOTTON SETTING 】===============================■*/
#BK_TOP{
	padding: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);
	color: #333;
	border: none;
	border-radius: 100px;
	display: none;		/* 初期状態では非表示 */
	position: fixed; /* 画面の右下などに固定 */
	bottom: 20px;
	right: 20px;
	background: rgba(20,20,20,0.8);
	z-index: 1000; /* 他の要素よりも前面に表示 */
	
	cursor: pointer;
	opacity: 0.7;
	/*
	transition: opacity 300ms ease;*/
	/*【 VALUES 】min: 10px & max:  15px */
	/*【VIEWPORT】min:320px & max:1200px */
}
#BK_TOP:hover {
  opacity: 1;
}
#BK_TOP svg {
	width: clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem);
	height: clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem);
	vertical-align: middle;
	
	fill: rgba(255,255,255,0.8);
	/*【 VALUES 】min: 30px & max:  40px */
	/*【VIEWPORT】min:320px & max:1200px */
}
/*. ========================【 BACK TOP BOTTON SETTING / END 】■*/
/*■■■■■■■■■■■■■■■_【 ＜ UNIFORM ＞ UNIFORM SETTING / END 】*/



/*《 UNIFORM PC SETTING 》_□□□□□□□□□□□□□□□□□□□□□□□□□□□□□*/
@media screen and (min-width: 1101px) {
/*【 BACKGROUND AREA  SETTING 】■■■■■■■■■■■■■■■■■■■■■*/
#BKG{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	
}
#BKG img{
	width: 100%;
	max-width: 2300px;
	min-width: 2000px;
	position: absolute;
	top: -100px;
	left: 10vw;
}
/*■■■■■■■■■■■■■■■■■■_【 BACKGROUND AREA SETTING / END 】*/


/*【 MAIN AREA SETTING 】_■■■■■■■■■■■■■■■■■■■■■■■■*/
#MAIN{
	width: 100%;
	
	min-height: 100vh;
	
	padding: 0 0 0 340px;
	position: relative;
	z-index: 999;
	
	box-sizing: border-box;
	/*
	background: rgba(10,10,40,0.5);*/
}
/*■■■■■■■■■■■■■■■■■■■■■_【 MAIN AREA SETTING / END 】*/
}/*□□□□□□□□□□□□□□□□□□□□□□□□□□《 UNIFORM PC SETTING / END 》*/
/*=========================================================================================================
UNIFORM / END
=========================================================================================================*/