@charset "UTF-8";
*{
	margin: 0;
	padding: 0;
	list-style: none;
}
html{
    font-size: 62.5%;
	font-family: "Cormorant", serif;
	scroll-behavior: smooth;	
	-webkit-font-smoothing: antialiased;
}
body{
	font-size: 1.6rem;
	background-image: url(../image/background_pc.png);
	/* background-scolor: #212121; */
	color: #F2F2F2;
}
a{
	text-decoration: none;
	color: inherit;
}
/*---- loading --------------------------------------------------*/ 
.loading{
	opacity: 0;
	transform: rotate(90deg);
}
.loading.active{
	opacity: 1;
	transform: rotate(0);
}

/*---- 共通 header --------------------------------------------------*/ 
#header{
	position: fixed;
	top: 0;
	left: 0;

	z-index: 10000;
	width: 100%;
}
.header_inner{
	display: flex;
	align-items: center; 
	padding: 30px 40px 0;
}
.nav_star{
	display: block;
	width: 40px;
	height: 40px;
	margin-right: auto;

	background: url("../image/star_white.png")  no-repeat center center/contain;
}
.navi_list{
	display: flex;
	gap: 60px;
}
.navi_list li{
	list-style: none;
	font-size: 26px;
	
	position: relative;
  	overflow: hidden;
  	line-height: 1.2;
	height: auto; 
  	display: inline-block;
}
.hover_text{
	display: block;
	transition: transform 0.4s ease;
	text-shadow: 0 0 8px rgba(72, 72, 72, 0.5);
}
.navi_button .hover{
	position: absolute;
	top: 100%;
	left: 0;
}
.navi_button:hover .default{
	transform: translateY(-100%);
}
.navi_button:hover .hover{
	transform: translateY(-100%);
}

/*------- 共通 fotter ------------------------------------------*/ 
.footer{
	min-height: 100vh;
	display: flex;
  	flex-direction: column;
	position: relative;
}
.footer_menu_wrap{
	margin-bottom: 20px;
	list-style: none;
	font-size: 26px;
	padding-right: 40px;
  	overflow: hidden;
  	line-height: 1.2;
	height: auto; 
  	display: block;
	transition:
	color 0.6s ease;
}
.footer_button{
	position: relative;
	display: inline-block;
	height: 1.2em;
}
.footer_button .hover{
	position: absolute;
}
.footer_button:hover .default{
	transform: translateY(-100%);
}
.footer_button:hover .hover{
	transform: translateY(-100%);
}
.footer_menu{
	text-decoration: none;
	list-style: none;
	z-index: 1000;
}
/*------- 共通 footer star ------------------------------------------*/ 
.footer .star_decoration_wrap{
	position: absolute;
	z-index: 0;
}
.footer_star{
	animation: twinkle 1.8s ease-in-out infinite;
}
.footer_star.star_large{
	position: absolute;
	animation-delay: 0s;
}
.footer_star.star_small{
	position: absolute;
	animation-delay: 0.9s;
}
/*------- 共通 loop animation --------------------------------------*/ 
.loop_wrap{
	margin-top: auto;
	overflow: hidden;
	width: 100%;
} 
.loop_inner{
	display: flex;
	width: max-content;
	animation: loop 20s linear infinite;
}
.loop_set{
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.loop_text{
	line-height: 0.85;
}
.loop_icon{
	background: url(../image/star_white.png) no-repeat center center/cover;
}
.loop_icon img{
	height: auto;
	width: 100%;
}
@keyframes loop {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(-50%);
	}
}
/*------------------------------------------------------*/ 
.Copyright{
	width: fit-content;
	font-size: 14px;
	margin: 0 auto;
	font-family: "Noto Serif JP", serif;
}

@media (max-width: 560px){
	body{
		background: url("../image/background_sp.png");
		background-repeat: repeat-y;
		background-size: 100% auto;
		background-position: center top;
	}
	/*----- header ----------------------------------*/
	.header_inner{
		justify-content: space-between;
		padding: 30px 20px 0;
		position: relative; 
	}
	.navi_list li{
		font-size: 20px;
		padding: 0;
	}
	.navi_list{
		gap: clamp(16px, calc(16px + 12 * ((100vw - 375px) / 185)), 28px);
	}
	.navi_wrap{
		margin-left: auto;
	}
}
@media (max-width: 1024px) and (min-width: 560px) {
	body{
		background-size: cover;
		background-attachment: fixed;
	}
}
@media (min-width: 1024px) {
	body{
		background-size: cover;
		background-attachment: fixed;
	}
	.header_inner{
		padding: 30px 40px 0;
	}
}