body {
	font-family: "noto-sans-cjk-jp", sans-serif;
}

.u-desktop {
	display: none;
}

/* リキッドレイアウト対応 */

html {
	font-size: 16px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core root defaults */

html {
	scroll-behavior: smooth;
}

/* Set core body defaults */

body {
	line-height: 1.5;
	min-height: calc(100vh - 40px);
	overflow-x: hidden;
	text-rendering: optimizeLegibility;

}

/* Remove list styles on ul, ol elements with a class attribute */

ul,
ol {
	list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
	display: block;
	max-width: 100%;
	width: 100%;
}

/* Natural flow and rhythm in articles by default */

article > * + * {
	margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Blur images when they have no alt attribute */

img:not([alt]) {
	filter: blur(10px);
}

/* フォームリセット */

input,
button,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}

textarea {
	resize: vertical;
}

input[type=checkbox],
input[type=radio] {
	display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}

/* ホバー */

a {
	-webkit-text-decoration: none;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}



.top{
	width: 100%;
	min-height: calc(100vh - 40px);
	position: relative;

}

/* インナー幅 */
.inner {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 60px;
}



/* ========================================
  リセット・基本設定
======================================== */


html {
	font-size: 16px;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Quicksand", "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight: 400;
	line-height: 1.8;
	color: #333;
	background-color: #fff;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	text-decoration: none;
	color: inherit;
}

/* ========================================
  ヘッダー
======================================== */
.header {
		width: 100%;
		height: 50px;
		z-index: 1000;
		position: fixed;
}

.header-menu{
	height: inherit;
		align-items: center;
		display: flex;
			position: fixed;
				z-index: 1000;
}
.header-kids{
			position: sticky;
				z-index: 1000;
}

.header__inner {
	height: inherit;
	align-items: center;
	display: flex;
			position: sticky;
				z-index: 1000;
}



.header__title {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: #333;
}
.header__back-btn {
	display: inline-block;
	padding: 6px 20px;
	border-radius: 999px;
	margin-left: 20px;
	font-family: "Quicksand", "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, #ff2a8a, #ff3b3b);
	box-shadow: 0 6px 0 #d81b60;
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.header__back-btn:hover {
	opacity: 0.8;
}

.header__back-btn:active {
	transform: translateY(6px);
	box-shadow: 0 0 0 #d81b60;
}

@media (max-width: 600px) {
.header__back-btn{
	padding: 3px 15px;
	margin-left: 12px;
	font-size: 10px;
			}}
/* ========================================
  top
======================================== */
.top {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* コンテンツを前面に */
.top__inner {
	position: relative;
	z-index: 2;

	display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
}



/* ========================
  装飾レイヤー
======================== */

.top__decorations {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.deco {
	position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
}

/* ▼ 各装飾（自由に調整OK） */

.deco_top-1 {
	width: 100vw;
	height: 50vh;
	top: 0;
	left: 0;
	background-image: url("../images/common/deco_top-1'.png");
}

.deco_top-2 {
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 35vh;
	background-image: url("../images/common/deco_top-2'.png");
}

.deco_top-3 {
	bottom: 0;
		left: 0;
		width: 50vw;
		height: 40vh;
	background-image: url("../images/common/deco_top-3.png");
}

.deco_top-4 {
	bottom: 0;
		right: 0;
		width: 50vw;
		height: 40vh;
	background-image: url("../images/common/deco_top-4.png");
}


.top__title{
			width: 45%;
				height: auto;
				object-fit: contain;
				max-width: 800px;
				margin-top: -30px;
}

.top__title img {
	width: 100%;
	height: auto;
	object-fit: contain;
}


.top__buttons {
	display: flex;
	gap: 60px;
	justify-content: center;
	align-items: flex-start;
}

.top__button-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.top__button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.top__button:hover {
	opacity: 0.85;
	transform: scale(1.05);
}


.top__button-icon img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.top__button-text {
	font-family: "じゅん Pro", "A-OTF じゅん Pro", "游ゴシック", YuGothic, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #e00000;
	text-align: center;
	margin: 0;
}


@media (max-width: 600px) {


	.top__title {
		font-size: 22px;
	}

	.top__buttons {
		gap: 30px;
	}

	.top__button {
		width: 140px;
		height: 140px;
	}
}


/* ========================================
  kids
======================================== */

.kids {
	padding: 100px 40px;
	background-color: #fffcdb;
	position: relative;
		z-index: 0;
}

.kids__video-block {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 800px;
	width: 90%;
	margin: 0 auto;
	position: relative;
}


/* ========================================
  kids あしらい
======================================== */

.kids__deco-1::before,
.kids__deco-1::after,
.kids__deco-2::before,
.kids__deco-2::after,
.kids__deco-title::before,
.kids__deco-3::before,
.kids__deco-3::after,
.kids__deco-4::before,
.kids__deco-4::after {
	z-index: 0;
	pointer-events: none;
}




.kids__video-block,
.kids__thumbnail,
.kids__text-block,
.kids__heading-block,
.kids__heading-container {
	position: relative;
	z-index: 2;
}

.kids__deco-1,
.kids__deco-2,
.kids__deco-title,
.kids__deco-4 {
	position: relative;
	z-index: 0;
}

.kids__deco-1::before,
.kids__deco-1::after,
.kids__deco-2::before,
.kids__deco-2::after,
.kids__deco-title::before,
.kids__deco-4::before,
.kids__deco-4::after {
	z-index: -1;
	position: absolute;
	pointer-events: none;
}



.kids__deco-1::before {
	background: url(../images/common/deco_kids-1.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 207px;
		left: calc(50% - min(48.5vw, 463px));
		position: absolute;
		top: -15px;
		width: 90px;
}

.kids__deco-1::after {
	background: url(../images/common/deco_kids-2.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 202px;
		right: calc(50% - min(48.5vw, 450px));
		position: absolute;
		top: -41px;
		width: 43px;
}

@media (max-width: 768px) {
	.kids__deco-1::before {
		height: 150px;
			left: calc(50% - min(49vw, 438px));
			bottom: -90px;
			width: 32px;
	}

	.kids__deco-1::after {
		height: 100px;
		right: calc(50% - min(49vw, 450px));
		top: -34px;
		width: 43px;
	}
}

.kids__deco-2 {
	position: relative;
}

.kids__deco-2::before {
	background: url(../images/common/deco_kids-5.png) center center / contain no-repeat;
			content: "";
				display: block;
				height: 207px;
				left: calc(50% - min(48.5vw, 480px));
				position: absolute;
				top: -80px;
				width: 90px;
}

.kids__deco-2::after {
	background: url(../images/common/deco_kids-3.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 140px;
		right: calc(50% - min(48.5vw, 464px));
		position: absolute;
		top: -31px;
		width: 250px;
}

@media (max-width: 768px) {
	.kids__deco-2::before {
		height: 150px;
		left: calc(50% - min(48.5vw, 450px));
		bottom: -90px;
		width: 44px;
	}

	.kids__deco-2::after {
		height: 100px;
		right: calc(50% - min(48.5vw, 450px));
		bottom: -90px;
		width: 140px;
	}
}
.kids__deco-title {
	position: relative;
		z-index: 0;
}

.kids__deco-title::before {
	background: url(../images/common/deco_kids-9.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 87px;
		left: calc(50% - min(48.5vw, 436px));
		position: absolute;
		top: 18px;
		width: 143px;
}

.kids__deco-3 {
	position: relative;
}

.kids__deco-3::before {
	background: url(../images/common/deco_kids-6.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 350px;
		left: calc(50% - min(48.5vw, 490px));
		position: absolute;
		top: -96px;
		width: 143px;
}

.kids__deco-3::after {
			background: url(../images/common/deco_kids-4.png) center center / contain no-repeat;
				content: "";
				display: block;
				height: 197px;
				right: calc(50% - min(48.5vw, 500px));
				position: absolute;
				top: -190px;
				width: 190px;
}

@media (max-width: 768px) {

		.kids__deco-title::before {
				height: 70px;
				right: calc(50% - min(48.5vw, 450px));
				top: 0;
				width: 75px;
			}

	.kids__deco-3::before {
						height: 150px;
							left: calc(50% - min(48.5vw, 450px));
							top: -40px;
							width: 106px;
	}

	.kids__deco-3::after {
						height: 100px;
							right: calc(50% - min(48.5vw, 450px));
							top: -111px;
							width: 140px;
	}
}

.kids__deco-4,
.kids__deco-6 {
	position: relative;
		z-index: 0;
}

.kids__deco-4::before {
	background: url(../images/common/deco_kids-7.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 345px;
		left: calc(50% - min(48.5vw, 490px));
		position: absolute;
		top: -109px;
		width: 143px;
}

.kids__deco-4::after {
	background: url(../images/common/deco_kids-8.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 313px;
		right: calc(50% - min(48.5vw, 500px));
		position: absolute;
		top: -77px;
		width: 167px;
}

.kids__deco-6::before{
	background: url(../images/common/deco_kids-7.png) center center / contain no-repeat;
		content: "";
		display: block;
		height: 345px;
		left: calc(50% - min(48.5vw, 490px));
		position: absolute;
		top: -109px;
		width: 143px;
}

.kids__deco-5::after{
	background: url(../images/common/deco_kids-5.png) center center / contain no-repeat;
			content: "";
				display: block;
				height: 345px;
				right: calc(50% - min(48.5vw, 429px));
				position: absolute;
				bottom: 34px;
				width: 55px;
}

.kids__deco-6::after {
	background: url(../images/common/deco_menu.png) center center / contain no-repeat;
	content: "";
	display: block;
	height: 185px;
	right: calc(50% - min(48.5vw, 490px));
	position: absolute;
	bottom: -100px;
	width: 110px;
}

@media (max-width: 768px) {
	.kids__deco-4::before {
		height: 180px;
		left: calc(50% - min(48.5vw, 450px));
		top: 0;
		width: 64px;
	}

	.kids__deco-4::after {
					height: 173px;
						right: calc(50% - min(48.5vw, 450px));
						top: 0;
						width: 112px;
					}
.kids__deco-5::after{
				height: 114px;
					right: calc(50% - min(48.5vw, 450px));
					width: 38px;
					bottom: 220px;
}
		.kids__deco-6::before {
			height: 180px;
			left: calc(50% - min(48.5vw, 450px));
			top: -81px;
			width: 64px;
		}
				.kids__deco-6::after {
					height: 150px;
					right: calc(50% - min(48.5vw, 450px));
					bottom:-50px;
					width: 67px;
				}
}



/*========================================あしらい終了 */

.kids__thumbnail {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: auto;
}

.kids__thumbnail-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}


.kids__thumbnail img {
	width: 100%;
	height: 100%;
	display: block;
}

.kids__thumbnail:hover .kids__play-btn {
	opacity: 0.8;
}

.kids__play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s ease;
}

.kids__play-btn img {
	width: 60px;
	height: 60px;
}

.kids__video-label {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-55%, 10px);
	font-size: 20px;
	font-weight: 600;
	color: #000;
	margin: 0;
	white-space: nowrap;

		text-shadow:
			4px 4px 4px #fff, -4px -4px 4px #fff,
			-4px 4px 4px #fff, 4px -4px 4px #fff,
			4px 0 4px #fff, -4px 0 4px #fff,
			0 4px 4px #fff, 0 -4px 4px #fff;
}


.kids__text-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 20px;
}

.kids__text-point {
			width: 30%;
				height: auto;
				object-fit: contain;
				max-width: 800px;
				margin: 0 auto;
}

.kids__text-point img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.kids__text {
	font-size: 18px;
	color: #000;
	font-weight: 600;
	margin: 0;
	line-height: 1.7;
}
.kids__text-subtitle {
	font-size: 40px;
	font-weight: 600;
	color: #0000ff;
	text-align: center;
}

.kids__text_3{
	font-size: 28px;
		font-weight: 600;
		color: #0000ff;
		text-align: center;
		margin-top: 40px;
}

.kids__heading-block {
	display: flex;
	flex-direction: column;
	text-align: center;
	position: relative;
}


.kids__heading-container{
padding: 15px 0;
}


.kids__heading {
	font-size: 40px;
	font-weight: 600;
	color: #000;
line-height: 1.1;
}


@media (max-width: 600px) {

	.kids {
		padding: 40px 16px;
	}

	.kids__inner {
		gap: 40px;
	}

	.kids__heading {
		font-size: 24px;
	}

	.kids__text {
		font-size: 16px;
	}
				.kids__text_3 {
					font-size: 20px;
				}

	.kids__text-block{
		margin:0;
	}

	.kids__text-subtitle {
		font-size: 20px;
	}

	.kids__play-btn img {
		width: 44px;
		height: 44px;
	}

	.kids__video-label {
		font-size: 12px;
	}

	.kids__video-note {
		font-size: 12px;
	}
}


/* ========================================
  ポップアップ
======================================== */

.kids-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.kids-popup.is-active {
	display: block;
}

.kids-popup__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.85);
}

.kids-popup__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 900px;
}

.kids-popup__close {
	position: absolute;
	top: -82px;
	right: 0;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 73px;
	cursor: pointer;
	line-height: 1;
	padding: 0;
}

.kids-popup__video-wrap {
	position: relative;
	/* padding-top: 56.25%; */
}

.kids-popup__video-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* ========================================
  大人ページ menu
======================================== */
.menu {
	padding: 100px 20px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu__inner {
	position: relative;
	z-index: 1;
}

.menu__inner {
	max-width: 1080px;
	margin: 0 auto;
	width: 75%;

		position: relative;
}

.menu__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	gap: 24px;


}


.menu__inner::after {
	background: url(../images/common/deco_menu.png) center center / contain no-repeat;
	bottom: 29px;
	content: "";
	height: 168px;
		position: absolute;
		right: calc(50% - min(35vw,300px));
		width: 114px;
		z-index: 0;

}

@media (max-width: 768px) {
	.menu__inner::after{
						height: 100px;
							position: absolute;
							right: calc(50% - min(35vw, 400px));
							width: 68px;
							bottom: 0;
}}

/* 4つ目のアイテムを中央に */
.menu__item:nth-child(4) {
	grid-column: 2 / 3;
}

.menu__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}


.menu__item img{
	width: 100%;
	height: auto;
	object-fit: contain;
}

.menu__item:hover {
	transform: scale(1.03);
}


/* ========================================
  共通パーツ
======================================== */
.page__title {
	font-size: 40px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
	text-align: center;
}

		/* 見出し */
		.heading-block {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}

		/* 見出し線 */
		.divider {
			border: none;
			border-top: 2px solid #1a1a1a;
			margin: 0;
		}


h2 {
	font-size: 26px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	line-height: 1.5;
}

/* CONCEPT */
.concept {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}


.concept-heading {
	font-size: 26px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	line-height: 1.5;
}

.concept-label {
	font-size: 40px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
}

.concept-text {
	font-size: 16px;
	color: #333333;
	margin: 0;
	line-height: 1.8;
}



@media (max-width: 768px) {
	.page__title {
		font-size: 24px;
	}

	h2 {
		font-size: 20px;
	}

	.concept-label {
		font-size: 18px;
	}


.concept-heading {
	font-size: 20px;
}

.divider {
	border-top: 1px solid #1a1a1a;
}
}


/* ========================================
  about
======================================== */
.about {
	padding: 100px 20px;
			background-color: #e9f2db;
}


.about__image-block{
	max-width: 800px;
	width: 80%;
	margin: 0 auto;

	position: relative;
}

.about__image-block::before{
	background: url(../images/common/deco_adult-1.png) center center / contain no-repeat;
	content: "";
	display: block;
	height: 309px;
	left: calc(50% - min(48.5vw, 450px));
	position: absolute;
	bottom: -90px;
	width: 134px;
}

.about__image-block::after {
	background: url(../images/common/deco_adult-2.png) center center / contain no-repeat;
	content: "";
	display: block;
	height: 309px;
	right: calc(50% - min(48.5vw, 450px));
	position: absolute;
	bottom: -171px;
		width: 111px;
}

@media (max-width: 768px) {
.about__image-block::before {
		height: 150px;
		left: calc(50% - min(48.5vw, 450px));
		bottom: -90px;
		width: 80px;
	}

	.about__image-block::after {
		height: 100px;
		right: calc(50% - min(48.5vw, 450px));
		bottom: -90px;
		width: 80px;
	}
}

/* メイン画像 */
.about__main-image {
	width: 100%;
	height: auto;
	display: block;
}

/* なぜ必要なのか */
.about__reason {
	background-color: #e6e6e6;
	padding: 60px 40px;
	margin-bottom: 150px;
}

.about__reason-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 800px;
		margin: 0 auto;
}

.about__reason-title {
  margin-bottom: 20px;
}

.about__reason-text {
	font-size: 15px;
	color: #333333;
	margin: 0;
	line-height: 1.8;
}



/* サブタイトル3つ */
.about__subtitles {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: flex-start;
	margin-top: 100px;
	width: 100%;
}

.about__subtitle-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	flex: 1;
}

.about__subtitle-label {
	background-color: #009245;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	padding: 6px 24px;
	border-radius: 999px;
	margin: 0;
	width: 100%;
	max-width: 180px;
}

.about__subtitle-text {
	font-size: 15px;
	color: #333333;
	text-align: center;
	margin: 0;
	line-height: 1.3;
}


@media (max-width: 600px) {

	.about__concept-heading{
		font-size: 18px;
	}

	.about__reason {
		padding: 40px 20px;
	}

	.about__subtitles {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}

	.about__subtitle-item {
		width: 100%;
		gap: 12px;
	}
}

@media (max-width: 768px) {
		.about__subtitles {
			flex-direction: column;
			align-items: center;
			gap: 30px;
		}
	}

/* ========================================
  how-to-use
======================================== */
.how-to-use {
	padding: 100px 20px;
	background-color: #e9f2db;

}

/* メイン画像 */
.how-to-use__image-block {
	max-width: 800px;
	width: 80%;
	margin: 0 auto;
	position: relative;
}

.how-to-use__image-block::before {
	background: url(../images/common/deco_adult-3.png) center center / contain no-repeat;
	content: "";
	display: block;
	height: 309px;
	left: calc(50% - min(48.5vw, 450px));
	position: absolute;
	bottom: -90px;
	width: 134px;
}

.how-to-use__image-block::after {
	background: url(../images/common/deco_adult-4.png) center center / contain no-repeat;
		content: "";
		display: block;
		height: 153px;
		right: calc(50% - min(49vw, 511px));
		position: absolute;
		bottom: -102px;
		width: 193px;
}

@media (max-width: 768px) {
	.how-to-use__image-block::before {
		height: 150px;
		left: calc(50% - min(48.5vw, 450px));
		bottom: -90px;
		width: 80px;
	}

	.how-to-use__image-block::after {
		height: 100px;
		right: calc(50% - min(49vw, 450px));
		bottom: -90px;
		width: 135px;
	}
}

.how-to-use__main-image {
	width: 100%;
	height: auto;
	display: block;
}


/* おすすめの活用シーン */
.how-to-use__scene {
	background-color: #e6e6e6;
	padding: 60px 40px;
	margin-bottom: 150px;
}

.how-to-use__scene-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.how-to-use__scene-title {
	margin-bottom: 60px;
}

/* サブタイトル */
.how-to-use__subtitles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	gap: 32px 24px;
	width: 100%;
}

/* 4つ目を中央に */
.how-to-use__subtitle-item:nth-child(4) {
	grid-column: 2 / 3;
}

.how-to-use__subtitle-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.how-to-use__subtitle-label {
	background-color: #009245;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	padding: 6px 24px;
	border-radius: 999px;
	margin: 0;
	width: 100%;
	line-height: 1.2;
	height: 45px;
	display: flex;
		align-items: center;
		justify-content: center;
}

.how-to-use__subtitle-text {
	font-size: 15px;
	color: #333333;
	text-align: center;
	margin: 0;
	line-height: 1.6;
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 768px) {
	.how-to-use__subtitles {
		grid-template-columns: 1fr;
	}

	.how-to-use__subtitle-item:nth-child(4) {
		grid-column: 1 / 2;
	}

		.how-to-use__subtitle-label {
			background-color: #009245;
			color: #ffffff;
			font-size: 15px;
			font-weight: 600;
			text-align: center;
			padding: 6px 24px;
			border-radius: 999px;
			margin: 0;
			width: 100%;
			max-width: 250px;
			line-height: 1.2;
			height: 45px;
			display: flex;
			align-items: center;
			justify-content: center;
		}


	.how-to-use__scene {
		padding: 40px 20px;
	}

	.how-to-use__subtitles {
		grid-template-columns: 1fr;
		align-items: center;
		gap: 30px;
	}

	.how-to-use__subtitle-item:nth-child(4) {
		grid-column: 1 / 2;
	}

	.how-to-use__subtitle-item {
		width: 100%;
		gap: 12px;
	}
}

/* ========================================
  how-to-teach
======================================== */
.how-to-teach {
	padding: 100px 20px;
	background-color: #e9f2db;
}

/* メイン画像 */
.how-to-teach__image-block {
	max-width: 800px;
	width: 80%;
	margin: 0 auto;
	position: relative;
}

.how-to-teach__image-block::before {
	background: url(../images/common/deco_adult-5.png) center center / contain no-repeat;
	content: "";
	display: block;
	height: 309px;
	left: calc(50% - min(48.5vw, 450px));
	position: absolute;
	bottom: -90px;
	width: 134px;
}

.how-to-teach__image-block::after {
	background: url(../images/common/deco_adult-6.png) center center / contain no-repeat;
	content: "";
		display: block;
		height: 214px;
		right: calc(50% - min(49vw, 511px));
		position: absolute;
		bottom: -24px;
		width: 234px;
}

@media (max-width: 768px) {
	.how-to-teach__image-block::before {
		height: 150px;
		left: calc(50% - min(48.5vw, 450px));
		bottom: -90px;
		width: 80px;
	}

	.how-to-teach__image-block::after {
	height: 150px;
		right: calc(50% - min(49vw, 450px));
		bottom: -90px;
		width: 125px;
	}
}

.how-to-teach__main-image {
	width: 100%;
	height: auto;
	display: block;
}



/* 指導の方向性 */
.how-to-teach__direction {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.how-to-teach__direction-text {
	font-size: 16px;
	color: #333333;
	margin: 0;
	line-height: 1.8;
}

/* 4ステップ */
.how-to-teach__steps {
	background-color: #e6e6e6;
	padding: 60px 40px;
	margin-bottom: 150px;
}

.how-to-teach__steps-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.how-to-teach__steps-title {
	margin-bottom: 60px;
}
.how-to-teach__scene-title{
	margin-bottom: 60px;
}

/* サブタイトル */
.how-to-teach__subtitles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
	width: 100%;
}

.how-to-teach__subtitle-item:nth-child(4) {
	grid-column: 2 / 3;
}

.how-to-teach__subtitle-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.how-to-teach__subtitle-img {
	width: 100%;
	max-width: 180px;
	height: auto;
}
.how-to-teach__subtitle-label {
	background-color: #009245;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	padding: 6px 24px;
	border-radius: 999px;
	margin: 0;
	width: 100%;
	max-width: 250px;
	line-height: 1.2;
	height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
}

.how-to-teach__subtitle-text {
	font-size: 15px;
	color: #333333;
	text-align: center;
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 600px) {


	.how-to-teach__steps {
		padding: 40px 20px;
	}


	.how-to-teach__subtitle-item {
		width: 100%;
		gap: 12px;
	}

}
@media (max-width: 768px) {
.how-to-teach__subtitles {
	grid-template-columns: 1fr;
	align-items: center;
	gap: 30px;
}

		.how-to-teach__subtitle-item:nth-child(4) {
			grid-column: 1 / 2;
		}
}
/* ========================================
  project
======================================== */


.project {
	padding: 100px 20px;
	margin-bottom: 150px;
	background-color: #e9f2db;
}

.project__inner {
	max-width: 750px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

/* メイン画像 */
.project__image-block {
	max-width: 800px;
	width: 80%;
	margin: 0 auto;
	position: relative;
}

.project__image-block::before {
	background: url(../images/common/deco_adult-7.png) center center / contain no-repeat;
	content: "";
	display: block;
	height: 309px;
	left: calc(50% - min(48.5vw, 450px));
	position: absolute;
	bottom: -90px;
	width: 134px;
}

@media (max-width: 768px) {
	.project__image-block::before {
		height: 150px;
		left: calc(50% - min(48.5vw, 450px));
		bottom: -90px;
		width: 80px;
	}}

.project__main-image {
	width: 100%;
	height: auto;
	display: block;
}


/* 各セクション */
.project__section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}


.project__section-text {
	font-size: 16px;
	color: #333333;
	margin: 0;
	line-height: 1.8;
}