@charset "utf-8";
/*======== common ========*/
body{
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #333;
	line-height: 1.6;
}
/*======== header ========*/
.home header{
	width: 100%;
}
/*======== index ========*/
#keyv {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
}
.keyv-left {
	position: absolute;
	left: 3.0rem;
	bottom: 3.0rem;
	width: 65%;
}
.keyv-left h1{
	font-size: 54px;
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 1.0rem;
}
.keyv-left h2{
	font-size: 36px;
	font-weight: 900;
	line-height: 1.4;
}
.keyv-right {
	position: absolute;
	right: 3.0rem;
	bottom: 5.0rem;
	width: 400px;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.keyv-right::before {
	content: "";
	position: absolute;
	inset: 0;              /* 親と同じ 400×400 に広げる */
	background: #ff6b6b;
	clip-path: polygon(
		50% 0%, 60% 15%, 75% 8%, 78% 25%, 95% 25%,
		87% 42%, 100% 50%, 87% 58%, 95% 75%, 78% 75%,
		75% 92%, 60% 85%, 50% 100%, 40% 85%, 25% 92%,
		22% 75%, 5% 75%, 13% 58%, 0% 50%, 13% 42%,
		5% 25%, 22% 25%, 25% 8%, 40% 15%
	);
	animation: spin 20s linear infinite;
	z-index: -1;           /* テキストの後ろに配置 */
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.keyv-right h3{
	font-size: 45px;
	color: #fff;
	font-weight: 900;
	text-align: center;
	line-height: 1.4;
}
#intro {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;	
}
#intro article{
	width: 800px;
	margin: 0 auto;
	padding: 5.0rem;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.08);
}
.index-ttl {
	font-size: 36px;
	margin-bottom: 1.0rem;
}
.intro-txt {
	font-size: 18px;
}
.intro-txt p{
	margin-bottom: 1.0rem;
}