/* ========== KV ========== */
.kv-wrapper {
	background-color: #EAF6FF;
}
.kv {
	position: relative;
	overflow: hidden;
	background: url('../img/kv_bg_pc.png') no-repeat center center/ contain;
	aspect-ratio: 1440 / 600;
	margin: 0 auto;
	max-width: 1440px;
}
.kv h1 {
	font-size: 0;
}
.kv-book {
	position: absolute;
	top: clamp(0px, calc(24 / 1440 * 100vw), 24px);
	right: clamp(0px, calc(144 / 1440 * 100vw), 144px);
	width: clamp(0px, calc(135 / 1440 * 100vw), 135px);
}
.kv-board {
	position: absolute;
	bottom: -11.3%;
	left: 7.7%;
	width: clamp(0px, calc(316 / 1440 * 100vw), 316px);
	aspect-ratio: 316 /314;
	background: url('../img/kv_board.png') no-repeat center / contain;
}
.kv-board-content {
	width: clamp(0px, calc(176 / 1440 * 100vw), 176px);
	margin-top: clamp(0px, calc(82 / 1440 * 100vw), 82px);
	margin-left: clamp(0px, calc(80 / 1440 * 100vw), 80px);
}
.kv-board-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 800;
	height: clamp(0px, calc(16 / 1440 * 100vw), 16px);
}
.kv-board-tag {
	color: #fff;
	background-color: #FA5A50;
	border-radius: clamp(0px, calc(2 / 1440 * 100vw), 2px);
	font-size: clamp(0px, calc(10 / 1440 * 100vw), 10px);
	padding: 0 clamp(0px, calc(2 / 1440 * 100vw), 2px);
	line-height: clamp(0px, calc(16 / 1440 * 100vw), 16px);
}
.kv-board-date {
	font-size: clamp(0px, calc(12 / 1440 * 100vw), 12px);
	color: rgba(68, 68, 68, 0.6);
}
.kv-board-title {
	font-weight: 800;
	font-size: clamp(0px, calc(14 / 1440 * 100vw), 14px);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.kv-board-text {
	font-weight: 500;
	font-size: clamp(0px, calc(12 / 1440 * 100vw), 12px);
	line-height: clamp(0px, calc(16 / 1440 * 100vw), 16px);
}
.kv-text {
	position: absolute;
	bottom: clamp(0px, calc(18 / 1440 * 100vw), 18px);
	right: clamp(0px, calc(140 / 1440 * 100vw), 140px);
	text-align: right;
	font-size: clamp(0px, calc(12 / 1440 * 100vw), 12px);
	line-height: clamp(0px, calc(20 / 1440 * 100vw), 20px);
}
.kv-text strong {
	font-size: clamp(0px, calc(16 / 1440 * 100vw), 16px);
}
/* sp用スタイル */
@media screen and (width < 768px) {
	.kv {
		background: url('../img/kv_bg_sp.png') no-repeat center center/ contain;
		aspect-ratio: 375 / 525;
	}
	.kv-book {
		top: auto;
		bottom: calc(45 / 375 * 100vw);
		right: calc(18 / 375 * 100vw);
		width: calc(112 / 375 * 100vw);
	}
	.kv-board {
		width: calc(249 / 375 * 100vw);
		left: -4%;
		bottom: -10.5%;
	}
	.kv-text {
		font-size: calc(8 / 375 * 100vw);
		line-height: calc(12 / 375 * 100vw);
		bottom: calc(8 / 375 * 100vw);
		right: calc(16 / 375 * 100vw);
	}
	.kv-text strong {
		font-size: calc(11 / 375 * 100vw)
	}
	.kv-board-content {
		width: calc(138 / 375 * 100vw);
		margin-top: calc(64 / 375 * 100vw);
		margin-left: calc(61 / 375 * 100vw);
	}
	.kv-board-meta {
		height: calc(13 / 375 * 100vw);
	}
	.kv-board-tag {
		border-radius: calc(2 / 375 * 100vw);
		font-size: calc(10 / 375 * 100vw);
		padding: calc(2 / 375 * 100vw);
		line-height: calc(13 / 375 * 100vw);
	}
	.kv-board-date {
		font-size: calc(10 / 375 * 100vw);
	}
	.kv-board-title {
		font-size: calc(11 / 375 * 100vw);
	}
	.kv-board-text {
		font-size: calc(10 / 375 * 100vw);
		line-height: calc(12 / 375 * 100vw);
	}
}

/* ========== リード文 ========== */
.lead {
	background-color: #FFFDF0;	
}
.lead-content {
	max-width: 1440px;
	padding: clamp(0px, calc(64 / 1440 * 100vw), 64px) 0;
	text-align: center;
	position: relative;
	margin: 0 auto;
}
.lead-text {
	font-size: clamp(0px, calc(24 / 1440 * 100vw), 24px);
	line-height: 2;
}
.monster-1 {
	position: absolute;
	top: clamp(0px, calc(50 / 1440 * 100vw), 50px);
	left: clamp(0px, calc(200 / 1440 * 100vw), 200px);
	width: clamp(0px, calc(151 / 1440 * 100vw), 151px);
	transform: rotate(-10deg);
}
.monster-2 {
	position: absolute;
	bottom: clamp(0px, calc(45 / 1440 * 100vw), 45px);
	left: clamp(0px, calc(275 / 1440 * 100vw), 275px);
	width: clamp(0px, calc(75 / 1440 * 100vw), 75px);
	transform: rotate(-15deg);
}
.monster-3 {
	position: absolute;
	top: clamp(0px, calc(45 / 1440 * 100vw), 45px);
	right: clamp(0px, calc(314 / 1440 * 100vw), 314px);
	width: clamp(0px, calc(80 / 1440 * 100vw), 80px);
	transform: rotate(15deg);
}
.monster-4 {
	position: absolute;
	bottom: clamp(0px, calc(35 / 1440 * 100vw), 35px);
	right: clamp(0px, calc(280 / 1440 * 100vw), 280px);
	width: clamp(0px, calc(120 / 1440 * 100vw), 120px);
	transform: rotate(22deg);
}
.monster-5 {
	position: absolute;
	bottom: clamp(0px, calc(160 / 1440 * 100vw), 160px);
	right: clamp(0px, calc(220 / 1440 * 100vw), 220px);
	width: clamp(0px, calc(97 / 1440 * 100vw), 97px);
	transform: rotate(-18deg);
}
/* sp用スタイル */
@media screen and (width < 768px) {
	.lead {
		padding: clamp(0px, calc(102 / 375 * 100vw), 102px) 0;
	}
	.lead-content {
		padding: 0;
		max-width: 375px;
	}
	.lead-text {
		font-size: clamp(0px, calc(18 / 375 * 100vw), 18px);
		line-height: clamp(0px, calc(30 / 375 * 100vw), 30px);
	}
	.monster-1 {
		top: clamp(-75px, calc(75 / 375 * 100vw * -1), 0px);
		left: clamp(0px, calc(18 / 375 * 100vw), 18px);
		width: clamp(0px, calc(70 / 375 * 100vw), 70px);
	}
	.monster-2 {
		bottom: auto;
		left: auto;
		width: clamp(0px, calc(50 / 375 * 100vw), 50px);
		top: clamp(-65px, calc(65 / 375 * 100vw * -1), 0px);
		right: clamp(0px, calc(10 / 375 * 100vw), 10px);
		transform: rotate(15deg);
	}
	.monster-3 {
		top: auto;
		right: auto;
		width: clamp(0px, calc(60 / 375 * 100vw), 60px);
		bottom: clamp(-70px, calc(70 / 375 * 100vw * -1), 0px);
		left: clamp(0px, calc(15 / 375 * 100vw), 15px);
	}
	.monster-4 {
		bottom: clamp(-60px, calc(60 / 375 * 100vw * -1), 0px);
		right: clamp(0px, calc(10 / 375 * 100vw), 10px);
		width: clamp(0px, calc(60 / 375 * 100vw), 60px);
		transform: rotate(-19deg);
	}
	.monster-5 {
		bottom: clamp(-100px, calc(100 / 375 * 100vw * -1), 0px);
		right: 50%;
		transform: translateX(50%);
		width: clamp(0px, calc(68 / 375 * 100vw), 68px);
	}
}

/* ========== h2セクション ========== */
.section-inner {
	text-align: center;
	padding: clamp(0px, calc(80 / 1440 * 100vw), 80px) 0;
	max-width: 1440px;
	position: relative;
	margin: 0 auto;
}
.section-inner h2 {
	font-size: clamp(0px, calc(48 / 1440 * 100vw), 48px);
	line-height: clamp(0px, calc(71 / 1440 * 100vw), 71px);
	font-weight: 900;
	position: relative;
	margin: 0 auto;
	padding-bottom: clamp(0px, calc(8 / 1440 * 100vw), 8px);
}
.section-inner h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: clamp(0px, calc(6 / 1440 * 100vw), 6px);
	border-radius: 100vh;
}
/* セクション red */
.section-red {
	background-color: #FAAAAE;
	overflow: hidden;
}
.section-red h2 {
	color: var(--text-red);
}
.section-red h2::after {
	background-color: var(--text-red);
}
.character-right,
.character-left {
	z-index: 1;
}
.section-red .character-left {
	position: absolute;
	bottom: clamp(0px, calc(20 / 1440 * 100vw), 20px);
	left: clamp(-65px, calc(65 / 1440 * 100vw * -1), 0px);
	transform: rotate(20deg);
	width: clamp(0px, calc(320 / 1440 * 100vw), 320px);
}
.section-red .character-right {
	position: absolute;
	top: clamp(0px, calc(67 / 1440 * 100vw), 67px);
	right: clamp(-25px, calc(25 / 1440 * 100vw * -1), 0px);
	width: clamp(0px, calc(278 / 1440 * 100vw), 278px);
}
/* セクション blue */
.section-blue {
	background-color: #C3DCFF;
	overflow: hidden;
}
.section-blue h2 {
	color: var(--text-blue);
}
.section-blue h2::after {
	background-color: var(--text-blue);
}
.section-blue .character-left {
	position: absolute;
	top: clamp(0px, calc(50 / 1440 * 100vw), 50px);
	left: clamp(-10px, calc(65 / 1440 * 100vw * -1), 0px);
}
.section-blue .character-left img {
	width: clamp(0px, calc(270 / 1440 * 100vw), 270px);
}
.section-blue .character-right {
	position: absolute;
	bottom: clamp(0px, calc(67 / 1440 * 100vw), 67px);
	right: clamp(0px, calc(25 / 1440 * 100vw), 25px);
	width: clamp(0px, calc(220 / 1440 * 100vw), 220px);
	transform: rotate(-8deg);
}
/* セクション green */
.section-green {
	background-color: #D4E3D4;
	overflow: hidden;
}
.section-green h2 {
	color: var(--text-green);
}
.section-green h2::after {
	background-color: var(--text-green);
}
.section-green .character-left {
	position: absolute;
	bottom: clamp(0px, calc(105 / 1440 * 100vw), 105px);
	left: clamp(-50px, calc(50 / 1440 * 100vw * -1), 0px);
	transform: rotate(14.7deg);
	width: clamp(0px, calc(300 / 1440 * 100vw), 300px);
}
.section-green .character-right {
	position: absolute;
	top: clamp(0px, calc(65 / 1440 * 100vw), 65px);
	right: clamp(-15px, calc(15 / 1440 * 100vw * -1), 0px);
	width: clamp(0px, calc(310 / 1440 * 100vw), 310px);
}
/* セクション pink */
.section-pink {
	background-color: #FDE7EF;
	overflow: hidden;
}
.section-pink h2 {
	color: var(--text-pink);
}
.section-pink h2::after {
	background-color: var(--text-pink);
}
.section-pink .character-left {
	position: absolute;
	top: clamp(0px, calc(96 / 1440 * 100vw), 96px);
	left: clamp(-50px, calc(50 / 1440 * 100vw * -1), 0px);
	width: clamp(0px, calc(321 / 1440 * 100vw), 321px);
}
.section-pink .character-right {
	position: absolute;
	bottom: clamp(0px, calc(95 / 1440 * 100vw), 95px);
	right: clamp(-35px, calc(35 / 1440 * 100vw * -1), 0px);
	width: clamp(0px, calc(300 / 1440 * 100vw), 300px);
	transform: rotate(-16deg);
}
/* セクション yellow */
.section-yellow {
	background-color: #FFE4B4;
	overflow: hidden;
}
.section-yellow h2 {
	color: var(--text-yellow);
}
.section-yellow h2::after {
	background-color: var(--text-yellow);
}
.section-yellow .character-left {
	position: absolute;
	top: clamp(0px, calc(50 / 1440 * 100vw), 50px);
	left: clamp(-50px, calc(50 / 1440 * 100vw * -1), 0px);
	transform: rotate(14deg);
	width: clamp(0px, calc(320 / 1440 * 100vw), 320px);
}
.section-yellow .character-right {
	position: absolute;
	bottom: clamp(0px, calc(68 / 1440 * 100vw), 68px);
	right: clamp(-25px, calc(25 / 1440 * 100vw * -1), 0px);
	width: clamp(0px, calc(320 / 1440 * 100vw), 320px);
}

.content-wrapper {
	background: url(../img/bg_book_frame_pc.png) no-repeat center center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	gap: clamp(0px, calc(24 / 1440 * 100vw), 24px);
	width: clamp(0px, calc(1000 / 1440 * 100vw), 1000px);
	height: 100%;
	margin: 0 auto;
	padding: clamp(0px, calc(100 / 1440 * 100vw), 100px)
			 clamp(0px, calc(48 / 1440 * 100vw), 48px) 
			 clamp(0px, calc(143 / 1440 * 100vw), 143px);
	position: relative;
	z-index: 0;
}
.intro {
	font-size: clamp(0px, calc(22 / 1440 * 100vw), 22px);
	line-height: clamp(0px, calc(34 / 1440 * 100vw), 34px);
}
.btn-wrapper {
	display: flex;
	gap: clamp(0px, calc(24 / 1440 * 100vw), 24px);
	justify-content: center;
}
.btn img {
	width: clamp(0px, calc(440 / 1440 * 100vw), 440px);
}
/* sp用スタイル */
@media screen and (width < 768px) {
	.section-inner {
		padding: clamp(0px, calc(42 / 375 * 100vw), 42px)
				 clamp(0px, calc(14 / 375 * 100vw), 14px);
	}	
	.content-wrapper {
		width: 100%;
		gap: clamp(0px, calc(16 / 375 * 100vw), 16px);
		background: url(../img/bg_book_frame_sp.png) no-repeat center center;
		background-size: 100% 100%;
		padding: clamp(0px, calc(45 / 375 * 100vw), 45px)
				 clamp(0px, calc(16 / 375 * 100vw), 16px)
				 clamp(0px, calc(48 / 375 * 100vw), 48px);
	}
	.section-inner h2 {
		font-size: clamp(0px, calc(28 / 375 * 100vw), 28px);
		line-height: clamp(0px, calc(32 / 375 * 100vw), 32px);
		padding-bottom: clamp(0px, calc(8 / 375 * 100vw), 8px);
	}
	.section-inner h2::after {
		height: clamp(0px, calc(4 / 375 * 100vw), 4px);
	}
	.btn-wrapper {
		display: grid;
		gap: clamp(0px, calc(6 / 375 * 100vw), 6px);
	}
	.intro {
		font-size: clamp(0px, calc(14 / 375 * 100vw), 14px);
		line-height: 1.5;
	}
	.btn img,
	.btn-wide img {
		width: clamp(0px, calc(315 / 375 * 100vw), 315px);
	}
	.section-red .character-left {
		bottom: calc(22 / 375 * 100vw);
		left: calc(15 / 375 * 100vw * -1);
		transform: rotate(12deg);
		width: calc(80 / 375 * 100vw);
	}
	.section-red .character-right {
		top: calc(14 / 375 * 100vw);
		right: calc(8 / 375 * 100vw);
		width: calc(60 / 375 * 100vw);
	}
	.section-blue .character-left {
		left: calc(14 / 375 * 100vw * -1);
		width: calc(70 / 375 * 100vw);
	}
	.section-blue .character-right {
		bottom: calc(18 / 375 * 100vw);
		right: calc(6 / 375 * 100vw * -1);
		width: calc(63 / 375 * 100vw);
		transform: rotate(-20deg);
	}
	.section-green .character-left {
		bottom: calc(15 / 375 * 100vw);
	}
	.section-green .character-right {
		top: calc(36 / 375 * 100vw);
		width: calc(68 / 375 * 100vw);
	}
	.section-pink .character-left {
		top: calc(10 / 375 * 100vw);
	}
	.section-pink .character-right {
		bottom: calc(40 / 375 * 100vw);
	}
	.section-yellow .character-left {
		transform: rotate(-13deg);
		top: auto;
		bottom: calc(5 / 375 * 100vw);
		width: calc(90 / 375 * 100vw);
		left: calc(22 / 375 * 100vw * -1);
	}
	.section-yellow .character-right {
		top: 32px;
		right: calc(15 / 375 * 100vw * -1);
	}
}