/* 2026.11.04 top renew */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');

.blog_list {
    display: flex;
    gap: 40px 40px;
}

body.hometest,body.home  {
	main.u_main {
		padding-top: 0 !important;
	}
	.header_menu.u-header_menu a {
		color: #fff;
	}
	.header_sns {
		li {
			a {
				svg {
					filter: brightness(0) invert(1);
				}
			}
		}
	}
	h1.logo {
		display: none;
	}
}

#hero {
	display: flex;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: #222;

	.img,
	h1 {
		width: 50%;
		height: 100%;
		margin: 0;
		overflow: hidden;

		video,
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center ;
		}
		@media (max-width: 767px) {
			img {
				display: none;
				transform: scale(2);
				aspect-ratio: 4 / 3;
				object-fit: cover;
			}
		}
	}

	@media (max-width: 767px) {
		flex-direction: column;
		height: auto;

		.img,
		h1 {
			width: 100%;
			height: auto;
		}
	}
}

#main_contents {
	& > section {
		position: relative;
		padding: 5vw 0 5vw 0;
		width: calc(100% - 60px);
		margin: 0 auto 5vw auto;
		
		@media screen and (max-width: 768px) {
			width: calc(100% - 60px);
		}
		img {
			width: 100%;
		}
	}
	#section_01 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		
		figure {
			flex-shrink: 0;
			width: 50%;
			&:nth-of-type(1) {
				img {
					border-radius: 0 20% 0 0;
					aspect-ratio: 1 / 1;
					object-fit: cover;
				}
			}
			&:nth-of-type(2) {
				a {
					display: block;
					width: 60%;
					margin: 0 auto;
				}
			}
		}
		p {
			position: absolute;
			right: 0;
			bottom: 50px;
			writing-mode: vertical-rl;
			text-orientation: sideways;
			font: 400 4vw/1.0 "Noto Serif JP", serif;
			letter-spacing: .2em;
			text-shadow: 0 0 4px rgba(0, 0, 0, 0.2), 
               0 0 4px rgba(0, 0, 0, 0);
		}
		
	}
	#section_02 {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		gap: 4vw;
		
		figure {
			flex-shrink: 0;
			width: calc(50% - 4vw / 2);
		}
	}
	#section_03 {
		width: 80%;
		margin: 0 auto 5vw auto;
		display: flex;
		flex-wrap: wrap;
		gap: 4vw;
		
		figure {
			flex-shrink: 0;
			width: calc(33.33% - 4vw * 2 / 3);
			
			@media screen and (max-width: 768px) {
				width: calc(50% - 4vw * 1 / 2);
			}
			
			img {
				border-radius: 0 20% 0 0;
				
			}
		}
	}
	#section_04 {
		width: 90%;
		margin: 0 auto 5vw auto;
		display: flex;
		flex-wrap: wrap;
		gap: 5vw;
		
		& > figure:nth-of-type(1) {
			flex-shrink: 0;
			width: 33.33vw;
			display: flex;
			align-items: flex-end;
		}
		& > div {
			flex: 1;
			p {
				font: 400 clamp(14px, calc(5px + 1.171875vw), 20px)/2.2 "Noto Serif JP", serif;
				letter-spacing: .27em;
				text-align: center;
				margin-bottom: 50px;
			}
		}
		& > figure:nth-of-type(2) {
			flex-shrink: 0;
			width: 100%;
		}
		@media (max-width: 767px) {
			& > figure:nth-of-type(1),& > div {
				width: 100%;
			}
		}
	}
}

.fade_1 {
	opacity: 0;
	transform: translate(0px,40px);
	filter: blur(10px);
	transition: 1.2s all 0s ease;
}
.fade_1.ac {
	opacity: 1;
	filter: blur(0px);
	transform: translate(0);
}
.fade_2 {
	opacity: 0;
	filter: blur(10px);
	transform: translate(-40px,0px);
	transition: 1.2s all 0s ease;
}
.fade_2.ac {
	opacity: 1;
	filter: blur(0px);
	transform: translate(0);
}
.fade_3 {
	opacity: 0;
	filter: blur(10px);
	transform: translate(40px,0px); /* 右から */
	transition: 1.2s all 0s ease;
}
.fade_3.ac {
	opacity: 1;
	filter: blur(0px);
	transform: translate(0);
}