@charset "UTF-8";
/*---- 共通 top --------------------------------------------------*/ 
.top{
	width: 100%;
	height: 100vh;
	margin-bottom: 250px;
	position: relative;
    justify-content: center;
	overflow: hidden;
}
.moon_image{
	position: absolute;
	top: -47vh;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(570px, calc(392.8px + 47.25vw), 1300px);
	pointer-events: none;
}
.moon_image img{
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}
.top_title{
	position: absolute;
	display: flex;
	flex-direction: column;
	text-align: center;
	left:50%;
	transform:translateX(-50%);

	padding: 0 20px;
	bottom: 4vh;
}
.top_star{
	position: absolute;
	animation: twinkle 1.8s ease-in-out infinite;
}
.top_star.right_star_small{
	animation-delay: 0.7s;
	top: 40px;
	right: -30px;
}
.top_star.left_star_small{
	animation-delay: 0.3s;
	bottom: 20px;
	left: -20px;
}
/* .name{
	font-size: clamp(24px, calc(24px + 6 * ((100vw - 560px) / 484)), 30px);
	margin-bottom: 14px;
	text-shadow: 4px 4px 10px #3c3c3c;

	opacity: 0;
	transform: translateY(10px);
	transition: 
	opacity 1.0s ease-out,
	transform 1.0s ease-out;
}
.title_text{
	font-weight: lighter;
	font-size: 80px;
	line-height: 1;
	margin-bottom: -5px;
	text-shadow: 0px 0px 20px #3c3c3c;
	font-size: clamp(60px, calc(25.43px + 9.22vw), 120px);

	opacity: 0;
	transform: translateY(10px);
	transition: 
	opacity 2.0s ease-out,
	transform 2.0s ease-out;
}
.title_row{
	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	transform: translateY(10px);
	transition: 
	opacity 3.0s ease-out,
	transform 3.0s ease-out;
}
.title_row .title_text{
	opacity: 1;
	transform: translateY(0px);
} */
.loaded .title_animation{
	opacity: 1;
	transform: translateY(0px);
}

.title_img img{
	width: 100%;
	height: auto;

	/*--- loading -------------*/
	opacity: 0;
	transform: translateY(10px);
	transition: 
	opacity 2.0s ease-out,
	transform 2.0s ease-out;
}

.star_image{
	background: url(../image/star_white.png) no-repeat center center/cover;

	width: 30px;
	height: 30px;
	display: flex;
	margin-right: 10px;
}
/*---- 共通 scroll down ------------------------------------------*/
.scroll{
	position: absolute;
	right: 8%;
	bottom: -100px;
	z-index: 1000;

    display: flex;
    flex-direction: column;
	align-items: center;
}
.circle-wrapper{
	position: relative;
}
.circle-text{
	width: 100%;
	height: 100%;
	animation: scroll_rotate 15s linear infinite;
}
.circle-text text{
	font-size: 38px;
	letter-spacing: 6px;
	fill: #fff;
}
@keyframes scroll_rotate{
	from{ transform:rotate(0deg); }
	to{ transform:rotate(360deg); }
}
.scr_star{
	position:absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
	pointer-events:none;
	background: url(../image/star_white_8.png) no-repeat center center/cover;
}	
/*---- 共通 scroll line ------------------------------------------*/
.scroll_line{
	display: block;
	position: relative;

	width: 1px;
	background: #fff;
	animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
    0%{
		transform: scaleY(0);
        transform-origin: top;
    }
    40%{
        transform: scaleY(1);
        transform-origin: top;
    }
	59%{
		transform-origin: bottom;
		transform: scaleY(1);
    }
    60% {
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}
/*---- 共通 work --------------------------------------------------*/ 
.section_title{	
	font-size: clamp(48px, 10vw, 18rem);
	font-weight: normal;

	/*--- loading -------------*/
	opacity: 0;
	transform: translateY(20px);
	transition: 
	opacity 2.0s ease-out,
	transform 2.0s ease-out;
} 
.works{
	position: relative;
}
.works_inner{
	width: 80%;
	position: relative;
	margin: 0 auto;
	max-width: 1240px;
}
.works_title_wrap{
	width: fit-content;
	margin: 0 auto;
	position: relative;
  	text-align: center;
	margin-bottom: 100px;
}
.work_content{
	font-family: "Shippori Mincho", serif;
	margin-bottom: 80px;

	/*--- loading -------------*/
	opacity: 0;
	transform: translateY(30px);
	transition: 
	opacity 1.5s ease-out,
	transform 1.5s ease-out;
}
.work_content:hover .work_image img {
	transform: scale(1.2);
}
.work_image{
	width: 100%;
	height: 100%;
	aspect-ratio: 2560 / 1600;
	overflow: hidden;
}
.work_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 1s ease;
}
.tag{
	border: 1px solid white;
	width: fit-content;
	padding: 5px 20px;
	border-radius: 20px;
}


/*---- 共通 work star --------------------------------------------------*/ 
.works_star{
	position: absolute;
	display: block;
	animation: twinkle 1.8s ease-in-out infinite;
}
.right_star_large{
	animation-delay: 0s;
}
.right_star_small{
	animation-delay: 0.6s;
}
.left_star_small{
	animation-delay: 0.9s;
}
@keyframes twinkle{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.8;
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    80%{
        opacity: 0.8;
    }
    100%{
        opacity: 0;
    }
}
/*----- 共通 about me -------------------------------------------------*/ 
.about_me{
	min-height: 100vh;
}
.about_inner{
	align-items: center;
	justify-content: space-between; 
}
.image_area{
	position: relative; 
}
/*------ 共通 namecard --------------------------------------------*/ 
.namecard_image_wrap{
	aspect-ratio: 42 / 32;
	/*--- loading -------------*/
	transition: 
	opacity 1.0s ease-out,
	transform 2.0s ease-out;
}
.namecard_image{
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	position: absolute;
	height: fit-content;
}
.scroll_animation{
	opacity: 0;
	transform: translateY(10px);
}
.active{
	opacity: 1;
	transform: translateY(0px);
}
.namecard_image img{
	display: block;
	width: 100%;
}
.namecard1{
	transform: rotate(-6deg);
	bottom: 0;
}
.namecard2{
	transform: rotate(8deg);
	top: 0;
}
/*----- 共通 about star -------------------------------------------------*/ 
.about_right_decoration{
	z-index: 1000;
	position: absolute;
}
.about_left_decoration{
	z-index: 1000;
	position: absolute;
}
.about_star{
	position: absolute;
	animation: twinkle 1.8s ease-in-out infinite;
}
.star_large{
	background: url(../image/star_white_8.png) no-repeat center center/cover;
	width: clamp(40px, calc(40px + (50 - 40) * ((100vw - 375px) / (1024 - 375))), 50px);
	height: clamp(40px, calc(40px + (50 - 40) * ((100vw - 375px) / (1024 - 375))), 50px);
}
.star_small{
	background: url(../image/star_white_4.png) no-repeat center center/cover;
	width: clamp(20px, calc(20px + (25 - 20) * ((100vw - 375px) / (1024 - 375))), 25px);
	height: clamp(20px, calc(20px + (25 - 20) * ((100vw - 375px) / (1024 - 375))), 25px);
}
.about_right_decoration .star_large{
	animation-delay: 0s;
}
.about_right_decoration .star_small{
	animation-delay: 0.6s;
}
.about_left_decoration .star_large{
    animation-delay: 0.3s;
}
.about_left_decoration .star_small{
    animation-delay: 0.9s;
}
/*------ 共通 view more --------------------------------------------*/ 
.button{ 
	display: inline-flex;
  	align-items: center;
  	gap: 20px;
  	text-decoration: none;
  	color: #fff;
}
.button_text_wrap{
	text-decoration: none;
	position: relative;
  	overflow: hidden;
  	line-height: 1.2;
	height: auto; 
  	display: inline-block;
}
.button_text{
	font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 375px) / (1024 - 375))), 30px);
	display: block;
	transition: transform 0.4s ease;
}
.button_circle{
	font-family: "Cinzel", serif;
}
.button_text_wrap .hover {
	position: absolute;
	top: 100%;
	left: 0;
}
.button:hover .default {
	transform: translateY(-100%);
}
.button:hover .hover {
	transform: translateY(-100%);
}
.button_circle{
	width: clamp(40px, calc(40px + (50 - 40) * ((100vw - 375px) / (1024 - 375))), 50px);
  	height: clamp(40px, calc(40px + (50 - 40) * ((100vw - 375px) / (1024 - 375))), 50px);
  	border: 1px solid #fff;
  	border-radius: 50%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-size: 24px;
	transition: transform 0.4s ease;
}
.button:hover .button_circle{
	transform: scale(0.7);
}
/*------------------------------------------------------*/ 
@media (max-width: 560px){
	/*----scroll down ------------------------------------------*/
	.circle-wrapper{
		width: 80px;
		height: 80px;
		margin-bottom: 16px;
	}
	.scr_star{
		width: 32px;
		height: 32px;
	}
	/*---- 共通 scroll line ------------------------------------------*/
	.scroll_line{
		height: 150px;
	}
	/*---- top ---------------------------------------------*/ 
	.moon_image{
		top: -30vh;
	}
	.top_title{
		bottom:  24vh; 
		width: 80%;
	}
	.top_star.right_star_small{
		top: 20px;
		right: 15px;
	}
	.top_star.left_star_small{
		bottom: -10px;
		left: 15px;
	}
	/*----- work ---------------------------------------*/
	.works_title_wrap{
		margin-bottom: 100px;
	}
	.works_title{
		width: fit-content;
	}
	.work_list{
		display: flex;
		flex-direction: column;
	}
	.work_content{
		max-width: 100%;
		width: 100%;
	}
	.work_image{
		margin-bottom: 15px;
	}
	.tag{
		margin-bottom: 10px;
		display: block;
	}
	/*---- work star --------------------------------------------------*/ 
	.works_star.star_large{
		top: 5px;
		right: -70px;
	}
	.works_star.right_star_small{
		top: -15px;
		right: -30px;
	}
	.works_star.left_star_small{
		bottom: -10px;
		left: -50px;
	}
	/*----- about me ---------------------------------------*/
	.about_inner{
		width: 70vw;
		height: 60vh;
		margin: 0 auto;
		flex-direction: column;
	}
	.image_area{
		width: 100%;
		padding: 0 auto;
	}
	.about_title{
		margin-bottom: 60px;
		text-align: center;
	}
	/*------ namecard --------------------------------------------*/ 
	.namecard_image_wrap{
		margin: 0 auto;
		position: relative;
		width: 100%;
		margin-bottom: 100px;
	}
	.namecard_image{
		width: clamp(200px, calc(200px + 60 * ((100vw - 375px) / 185)), 260px);
	}
	.namecard1{
		right: 10px;
		bottom: 0;
	}
	.namecard2{
		left: 10px;
		bottom: 0;
	}
	/*-----about star-------------------------------------------------*/ 
	.about_right_decoration{
		top: 20px;
    	right: -5px;
	}
	.about_left_decoration{
		bottom: -5px;
		left: -25px;
	}
	.about_right_decoration .star_large{
		top: 0;
    	right: 0;
	}
	.about_right_decoration .star_small{
		top: 35px;
    	right: -5px;
	}
	.about_left_decoration .star_large{
		bottom: -5px;
    	left: 25px;
	}
	.about_left_decoration .star_small{
		bottom: 30px;
		left: 20px;
	}
	/*------ view more --------------------------------------------*/ 
	.button_wrap{
		display: flex;
		justify-content: center;
	}	
	.button{ 
		gap: 15px;
	}
	/*------- fotter ------------------------------------------*/ 
	.footer_button{
		font-size: 24px;
		transition: color 0.6s ease;
	}
	.footer_menu{
		margin-left: 50px;
		margin-top: 150px;
	}
	/*------- footer star ------------------------------------------*/ 
	.footer_star.star_large{
		top: 320px;
		left: 20px;
	}
	.footer_star.star_small{
		top: 110px;
		left: 180px;
	}
	/*------- loop animation --------------------------------------*/ 
	.loop_text{
		font-size: 110px;
	}
	.loop_icon{
		width: 70px;
		height: 70px;
		margin: auto 20px;
	}
}
@media (max-width: 1024px) and (min-width: 560px) {
	/*----scroll down ------------------------------------------*/
	.circle-wrapper{
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
	}
	.scr_star{
		width: 40px;
		height: 40px;
	}	
	/*---- 共通 scroll line ------------------------------------------*/
	.scroll_line{
		height: 200px;
	}
	/*---- top --------------------------------------------------*/ 
	.moon_image{
		top: clamp(-50vh, calc(-30vh - 4.31vw), -30vh);
	}
	.top_title{
		bottom: clamp(20vh, calc(27vh - 1.51vw), 27vh); 
		width: 75%;
	}
	/*----- work ---------------------------------------*/
	.works_title_wrap{
		margin-bottom: 100px;
	}
	.works_title{
		width: fit-content;
	}
	.work_list{
		list-style: none;
		display: flex;
		flex-direction: column;
	}
	.work_content{
		max-width: 100%;
		width: 100%;
	}
	.work_image{
		height: 100%;
		margin-bottom: 15px;
	}
	.tag{
		margin-bottom: 10px;
		display: block;
	}
	/*----work star --------------------------------------------------*/ 
	.works_star.star_large{
		top: 5px;
		right: -70px;
	}
	.works_star.right_star_small{
		top: -15px;
		right: -30px;
	}
	.works_star.left_star_small{
		bottom: -10px;
		left: -50px;
	}
	/*----- about me ---------------------------------------*/
	.about_inner{
		width: 70vw;
		height: 60vh;
		margin: 0 auto;
		flex-direction: column;
	}
	.image_area{
		width: 100%;
		padding: 0 auto;
	}
	.about_title{
		margin-bottom: 60px;
		text-align: center;
	}
/*----- about me ---------------------------------------*/
	.about_inner{
		width: 70vw;
		height: 60vh;
		margin: 0 auto;
	}
	.image_area{
		width: 100%;
		padding: 0 auto;
	}
	.about_title{
		margin-bottom: 60px;
		text-align: center;
	}
	/*------ namecard --------------------------------------------*/ 
	.namecard_image_wrap{
		margin: 0 auto;
		position: relative;
		width: 370px;
		margin-bottom: 100px;
	}
	.namecard_image{
		width: 260px;
	}
	.namecard1{
		right: 10px;
	}
	.namecard2{
		left: 10px;
		bottom: 0;
	}
	/*------ namecard --------------------------------------------*/ 
	.namecard_image_wrap{
		margin: 0 auto;
		position: relative;
		width: 370px;
		margin-bottom: 100px;
		aspect-ratio: 42 / 32;
	}
	.namecard_image{
		width: 260px;
	}
	.namecard1{
		right: 10px;
	}
	.namecard2{
		left: 10px;
		bottom: 0;
	}
	/*----- about star -------------------------------------------------*/ 
	.about_right_decoration{
		top: 20px;
    	right: -5px;
	}
	.about_left_decoration{
		bottom: -5px;
		left: -25px;
	}
	.about_right_decoration .star_large{
		top: 0;
    	right: 0;
	}
	.about_right_decoration .star_small{
		top: 35px;
    	right: -5px;
	}
	.about_left_decoration .star_large{
		bottom: -5px;
    	left: 25px;
	}
	.about_left_decoration .star_small{
		bottom: 30px;
		left: 20px;
	}
	/*------ view more --------------------------------------------*/ 
	.button_wrap{
		display: flex;
		justify-content: center;
	}	
	.button{ 
		gap: 15px;
	}
	/*------- fotter ------------------------------------------*/ 
	.footer_button{
		font-size: 24px;
	}
	.footer_menu{
		margin-left: 50px;
		margin-top: 150px;
	}
	/*------- footer star ------------------------------------------*/ 
	.footer_star.star_large{
		top: 320px;
		left: 20px;
	}
	.footer_star.star_small{
		top: 110px;
		left: 180px;
	}
	/*------- loop animation --------------------------------------*/ 
	.loop_text{
		font-size: 220px;
	}
	.loop_icon{
		width: 70px;
		height: 70px;
		margin: auto 20px;
	}
}
@media (min-width: 1024px) {
	/*----scroll down ------------------------------------------*/
	.circle-wrapper{
		width: 120px;
		height: 120px;
		margin-bottom: 24px;
	}
	.scr_star{
		width: 48px;
		height: 48px;
	}	
	/*---- 共通 scroll line ------------------------------------------*/
	.scroll_line{
		height: 200px;
	}
	/*---- top --------------------------------------------------*/ 
	.star_image{
		background: url(../image/star_white.png) no-repeat center center/cover;
		width: 50px;
		height: 50px;
		display: flex;
		margin-right: 10px;
	}
	/*----- top star----------------------------------------*/
	.top_title{
		max-width: 760px;
		width: 70%;
	}
	.top_star.right_star_small{
		top: 40px;
		right: -30px;
	}
	.top_star.left_star_small{
		bottom: 20px;
		left: -20px;
	}
	/*---- works --------------------------------------------------*/ 
	.works{
		position: relative;
	}
	.works_inner{
		width: 80%;
		position: relative;
		margin: 0 auto;
		text-align: center;
		max-width: 1240px;
	}
	.works_title_wrap{
		position: relative;
		text-align: center;
		margin-bottom: 100px;
	}
	.works_title{
		display: inline-block;
	}
	.work_list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		max-width: calc(525px * 2 + 120px);
		justify-content: space-between;
		gap: 0 80px; 
		list-style: none;
		margin: 0 auto;
	}
	.work_content{
		flex: 1 1 calc((100% - 120px) / 2);
		max-width: 525px;
	}
	.work_image{
		height: auto;
		margin-bottom: 30px;
	}
	.work_image img{
		display: block;
	}
	.text_wrap{
		display: flex;
		align-items: center;
	}
	.tag{
		margin-right: 15px;
	}
	/*---- work star --------------------------------------------------*/ 
	.works_star.star_large{
		top: 20px;
		right: -30%;
	}
	.works_star.right_star_small{
		top: -15px;
		right: -20%;
	}
	.works_star.left_star_small{
		bottom: 5%;
		left: -20%;
	}
	/*---- about me --------------------------------------------------*/ 
	.about_me{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.about_inner{
		display: flex;
		gap: 6vw;
	}
	.section_title{	
		font-size: clamp(6rem, 10vw, 18rem);
		font-weight: normal;
	} 
	/*------ namecard --------------------------------------------*/ 
	.namecard_image_wrap{
		width: 100%;
		height: 320px;
	}
	.namecard_image{
		width: clamp(260px, calc(260px + 40 * ((100vw - 560px) / 484)), 300px);
	}
	.namecard1{
		right: 0;
	}
	.namecard2{
		left: 40px;
	}
	/*------ about star --------------------------------------*/ 
	.about_right_decoration{
		top: 0;
		right: 0;
	}
	.about_left_decoration{
		bottom: 0;
		left: 0;
	}
	.about_right_decoration .star_large{
		top: 0px;
		right: -25px;
	}
	.about_right_decoration .star_small{
		top: 45px;
		right: -30px;
	}
	.about_left_decoration .star_large{
		bottom: -20px;
		left: 25px;
	}
	.about_left_decoration .star_small{
		bottom: 20px;
		left: 20px;
	}
	/*------ view more --------------------------------------------*/ 
	.button_wrap{
		position: absolute;
		right: 0;
		bottom: -120px;

		display: flex;
		justify-content: flex-end;
	}
	/*------- fotter ------------------------------------------*/ 
	.footer_button{
		font-size: 30px;
	}
	.footer_menu{
		margin-left: 100px;
		margin-top: 200px;
	}
	/*------- footer star ------------------------------------------*/ 
	.footer_star.star_large{
		top: 380px;
		left: 40px;
	}
	.footer_star.star_small{
		top: 170px;
		left: 300px;
	}
	/*------- loop animation --------------------------------------*/ 
	.loop_text{
		font-size: 300px;
	}
	.loop_icon{
		width: 150px;
		height: 150px;
		margin: auto 40px;
	}
}