@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#gHeader {
	margin: 0;
	background: #FFCF00;
}
.mainVisual {
	position: relative;
}
.mainVisual img {
	width: 100%;
}
.mainVisual .innerBox {
	margin-top: -13.1rem;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	color: #fff;
	transform: translateY(-50%);
}
.mainVisual .innerBox h2 {
	margin-bottom: 0.1rem;
	text-align: center;
	font-size: 5.6rem;
	font-weight: 500;
	letter-spacing: 0.385em;
	text-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
}
.mainVisual .innerBox p {
	margin-bottom: 0.7rem;
	text-align: center;
	font-size: 2.1rem;
	line-height: 1.6;
	text-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
}
.mainVisual .innerBox .linkList {
	display: flex;
	justify-content: center;
	gap: 3.6rem;
}
.mainVisual .innerBox .linkList li {
	width: 24rem;
	text-align: center;
}
.mainVisual .innerBox .linkList li .img {
	margin: 0 auto -3.3rem;
	width: 23.6rem;
}
.mainVisual .innerBox .linkList li a {
	padding: 0.7rem 1rem 1.3rem;
	display: block;
	position: relative;
	text-align: center;
	color: #fff;
	font-size: 2.6rem;
	font-weight: 700;
	border-radius: 1rem;
	box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
	border: 0.3rem solid #fff;
	background: #007AD8;
	z-index: 1;
}
.mainVisual .innerBox .linkList li .btn02 {
	background: #F39400;
}
.mainVisual .innerBox .linkList li .btn03 {
	background: #FF4B2E;
}
.fixBtn {
	width: 11.7rem;
	position: absolute;
	right: 0;
	top: 11.5rem;
	z-index: 50;
}
.fixBtn a {
	display: block;
}
#main .heading01 {
	text-align: center;
	color: #251714;
	font-size: 2.5rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
#main .heading01 .en {
	margin-bottom: 0.8rem;
	display: block;
	font-size: 0;
	line-height: 0;
}
#main .heading01 .en img {
	width: auto;
	height: 6.5rem;
	object-fit: contain;
}
#main .news {
	padding: 0.1rem 0 10.5rem;
	background: url(../img/index/bg01.png) no-repeat center bottom -0.01rem / 100% 8.8rem, #FFCF00;
}
#main .news .img {
	width: 23rem;
	position: absolute;
	left: 50%;
	top: -4.6rem;
	transform: translateX(-50%);
	margin-left: -37.4rem;
}
#main .news .heading01 {
	margin: -4.1rem 0 2.9rem;
	color: #050f1d;
	position: relative;
	z-index: 1;
}
#main .news .newsList {
	margin-bottom: 3.7rem;
	gap: 3.1rem;
}
#main .news .newsList li {
	width: calc((100% - 9.3rem) / 4);
	font-weight: 700;
}
#main .news .newsList li a {
	display: block;
}
#main .news .newsList li .pho {
	margin-bottom: 1.3rem;
}
#main .news .newsList li .pho img {
	width: 100%;
	border-radius: 1.5rem;
	object-fit: cover;
	aspect-ratio: 454/316;
}
#main .news .newsList li .data {
	margin-bottom: 0.5rem;
	color: #000000;
}
#main .news .newsList li .ttl {
	margin-bottom: 0.6rem;
	color: #1970ef;
	font-weight: 700;
}
#main .news .newsList li .text {
	margin-bottom: 0.7rem;
	color: #211915;
	font-weight: 500;
	font-size: 1.2rem;
}
#main .news .newsList li .link span {
	padding-right: 2rem;
	display: inline-block;
	color: #1970ef;
	background: url(../img/common/icon03.png) no-repeat right center / 1.7rem;
}
#main .service {
	position: relative;
}
#main .service .img01 {
	position: absolute;
	left: 0;
	top: -10.2rem;
	width: min(26.024vw, 28.6rem);
}
#main .service .heading01 {
	margin-bottom: 2.9rem;
	font-size: 2.2rem;
	line-height: 1.39;
	letter-spacing: -0.012em;
}
#main .service .heading01 .en {
	margin-bottom: 2.1rem;
}
#main .service .sub01 {
	padding: 5rem 0 2.9rem;
	position: relative;
}
#main .service .sub01 .imgList {
	margin: 0 auto;
	max-width: 97rem;
	gap: 2.8rem 5%;
	position: relative;
	z-index: 1;
}
#main .service .sub01 .imgList li {
	width: 30%;
	text-align: center;
}
#main .service .sub01 .imgList li .pho {
	width: 23.5rem;
	margin: 0 auto 0.8rem;
	max-width: 100%;
}
#main .service .sub01 .imgList li .pho img {
	width: 100%;
}
#main .service .sub01 .imgList li .ttl {
	margin-bottom: 2.7rem;
	color: #000;
	font-size: 2.3rem;
	font-weight: 700;
	position: relative;
}
#main .service .sub01 .imgList li .ttl::after {
	width: 5.6rem;
	height: 0.6rem;
	position: absolute;
	left: 50%;
	bottom: -1.6rem;
	background: #F39400;
	transform: translateX(-50%);
	content: '';
}
#main .service .sub01 .imgList li .ttl01 {
	margin-bottom: 0.8rem;
}
#main .service .sub01 .imgList li .ttl01::after {
	display: none;
}
#main .service .sub01 .imgList li p {
	font-size: 1.8rem;
	color: #1970EF;
	line-height: 1.4;
}
#main .service .sub01 .imgList li .txt01 {
	margin: 0 auto;
	width: fit-content;
	display: block;
	color: #fff;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.05em;
	background: #1970EF;
}
#main .service .sub01 .imgList li .txt01 .sml {
	font-size: 1.5rem;
}
#main .service .sub01 .imgList li .txt02 {
	display: block;
	font-size: 2.4rem;
	color: #f39400;
	line-height: 1.25;
}
#main .service .sub01 .imgList li .txt02 .lrg {
	font-size: 3.3rem;
}
#main .service .sub01 .img02 {
	width: min(22.384vw, 24.6rem);
	position: absolute;
	right: 2.3rem;
	bottom: -0.5rem;
}
#main .service .sub02 .photo img {
	width: 100%;
}
#main .service .sub02 .textBox {
	padding: 2.6rem 0.4rem 4rem;
	color: #fff;
	position: relative;
	background: #1E2980;
}
#main .service .sub02 .textBox p {
	max-width: 61%;
	line-height: 2.2;
}
#main .service .sub02 .textBox .img03 {
	width: 43.2rem;
	max-width: 39.28%;
	position: absolute;
	right: 0;
	bottom: 0;
}
#main .record {
	padding: 7.5rem 0 14rem;
}
#main .record .heading01 {
	margin-bottom: 3.2rem;
	color: #050f1d;
}
#main .record .heading01 .en {
	margin-bottom: 1.1rem;
}
#main .record .img {
	margin-left: -38.2rem;
	width: 16.1rem;
	position: absolute;
	left: 50%;
	top: -4.3rem;
	transform: translateX(-50%);
}
#main .record .caseList {
	margin: 0 0.1rem;
	gap: 3.1rem;
}
#main .record .caseList li {
	width: calc((100% - 9.3rem) / 4);
}
#main .record .caseList li a {
	display: block;
}
#main .record .caseList li .photo {
	margin-bottom: 1rem;
}
#main .record .caseList li .photo img {
	width: 100%;
	border-radius: 1.8rem;
	aspect-ratio: 226/184;
	object-fit: cover;
}
#main .record .caseList li .ttl {
	color: #1970EF;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 0.5rem;
}
#main .record .caseList li .text {
	font-size: 1.2rem;
	letter-spacing: 0.06em;
	color: #211915;
}
#main .pickup {
	margin-bottom: 10.1rem;
	position: relative;
}
#main .pickup .sliderBox {
	width: 100%;
	position: absolute;
	left: 0;
	top: -2.4rem;
}
#main .pickup .sliderBox img {
	width: 230.4rem;
	max-width: initial;
}
#main .pickup .sub01 {
	margin: 0 auto 6.7rem;
	padding: 0 0.7rem;
	max-width: 110rem;
	display: flex;
	gap: 2.1rem;
	position: relative;
	z-index: 1;
}
#main .pickup .sub01 .textBox {
	margin-top: 1.6rem;
	order: 1;
	flex: 1;
}
#main .pickup .sub01 .textBox h2 {
	margin-bottom: 3.4rem;
	font-size: min(3.094vw, 3.4rem);
	color: #000;
}
#main .pickup .sub01 .textBox h2 .en {
	margin-bottom: 1.1rem;
	display: block;
	font-size: 0;
}
#main .pickup .sub01 .textBox h2 .en img {
	width: min(31.574vw, 34.7rem);
}
#main .pickup .sub01 .textBox h2 .txt {
	margin-top: 0.4rem;
	padding-bottom: 0.9rem;
	width: fit-content;
	display: block;
	font-size: min(5.096vw, 5.6rem);
	line-height: 1;
	letter-spacing: -0.1em;
	color: #1970ef;
	background: linear-gradient(#FFCF00, #FFCF00) no-repeat left bottom / 100% min(1.547vw, 1.7rem);
}
#main .pickup .sub01 .textBox .txtList {
	margin-bottom: 2.1rem;
	gap: min(1.547vw, 1.7rem);
}
#main .pickup .sub01 .textBox .txtList li {
	padding: 0.4rem 0.5rem 0.7rem;
	min-width: min(15.287vw, 16.8rem);
	text-align: center;
	color: #fff;
	font-size: min(2.73vw, 3rem);
	font-weight: 700;
	border-radius: 0.8rem;
	background: #F39400;
}
#main .pickup .sub01 .textBox p {
	margin: 0 0 1.3rem;
	color: #000;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.07em;
}
#main .pickup .sub01 .textBox .text01 {
	margin: 0;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
#main .pickup .sub01 .textBox .text01 span {
	color: #1970ef;
	font-size: 5.3rem;
}
#main .pickup .sub01 .photo {
	width: 45.3%;
}
#main .pickup .sub02 .text02 {
	margin: 0 0 4rem 2rem;
	text-align: center;
	font-size: 4.1rem;
	font-weight: 700;
	letter-spacing: -0.1em;
	line-height: 1.2;
	color: #000;
}
#main .pickup .sub02 .text02 .sml {
	font-size: 2.8rem;
}
#main .pickup .sub02 .imgList li {
	padding-left: 3.8rem;
	width: 47.4%;
}
#main .pickup .sub02 .imgList li:nth-child(2n) {
	width: 48.8%;
}
#main .pickup .sub02 .imgList li .photo {
	position: relative;
}
#main .pickup .sub02 .imgList li .photo img {
	width: 100%;
}
#main .pickup .sub02 .imgList li .photo .imgtext {
	width: 12.8rem;
	position: absolute;
	left: -3.1rem;
	top: -2.5rem;
}
#main .pickup .sub02 .imgList li .txtBox {
	display: flex;
	position: relative;
}
#main .pickup .sub02 .imgList li .txtBox .img {
	margin: -8.2rem 0 0 -7.3rem;
	width: min(15.924vw, 17.5rem);
}
#main .pickup .sub02 .imgList li .txtBox .inner {
	padding: 1.6rem 0 3.6rem;
	flex: 1;
}
#main .pickup .sub02 .imgList li .txtBox .inner p {
	margin-bottom: 0.5rem;
	color: #000;
	font-size: min(2.912vw, 3.2rem);
	font-weight: 700;
	line-height: 1.38;
}
#main .pickup .sub02 .imgList li .txtBox .inner p:last-child {
	margin-bottom: 0 !important;
}
#main .pickup .sub02 .imgList li .txtBox .inner .note {
	padding-left: 1em;
	text-indent: -1em;
	color: #251714;
	font-size: 1.6rem;
	font-weight: 500;
}
#main .pickup .sub02 .comBtn a {
	width: 22rem;
}
#main .comments {
	position: relative;
}
#main .comments::before {
	width: 19.2rem;
	height: 19rem;
	position: absolute;
	top: -1.4rem;
	left: 1rem;
	box-sizing: border-box;
	border-top: 3.1rem solid #FFE556;
	border-left: 3.1rem solid #FFE556;
	content: '';
	pointer-events: none;
	user-select: none;
}
#main .comments::after {
	width: 19.2rem;
	height: 19rem;
	position: absolute;
	bottom: -7.4rem;
	right: -2.1rem;
	box-sizing: border-box;
	border-bottom: 3.1rem solid #FFE556;
	border-right: 3.1rem solid #FFE556;
	content: '';
	pointer-events: none;
	user-select: none;
}
#main .comments h2 {
	margin-bottom: 1.6rem;
	text-align: center;
}
#main .comments h2 img {
	width: 80rem;
}
#main .comments .textList {
	gap: min(2.457vw, 2.7rem);
}
#main .comments .textList li {
	padding: 6.7rem min(1.82vw, 2rem) 3.5rem;
	width: calc((100% - 5.6rem) / 3);
	max-width: 27.3rem;
	min-height: 29.5rem;
	background: url(../img/index/bg02.png) no-repeat center top / 100%;
}
#main .comments .textList li .ttl {
	text-align: center;
	font-weight: 700;
	font-size: min(1.911vw, 2.1rem);
	line-height: 1.28;
	letter-spacing: 0.05em;
	padding-bottom: 2rem;
	margin-bottom: 0.9rem;
	background: linear-gradient(#EFC305, #EFC305) no-repeat center bottom / 15.1rem 1.2rem;
}
#main .comments .textList li p {
	margin: 0 auto;
	max-width: 19.4rem;
	font-size: min(1.001vw, 1.1rem);
	line-height: 1.68;
	text-align: justify;
}
#main {
	padding-bottom: 19.5rem;
}
#main .comBtmImg {
	z-index: 2;
}
@media all and (min-width: 897px) {
	#gHeader .hBox {
		padding: 1.2rem 3.7rem 0.3rem 4.3rem;
	}
	#gNavi .naviList li:not(:last-child)::after {
		background: #fff;
	}
}
@media all and (min-width: 897px) and (max-width: 1050px) {
	#main .pickup .sub01 .photo {
		width: 42%;
	}
	#main .pickup .sub01 .textBox p {
		font-size: 2rem;
	}
}
@media all and (max-width: 896px) {
	#gHeader .hBox h1 {
		transition: background 0.3s;
	}
	#gHeader .hBox h1:not(.on) {
		background: #FFCF00;
	}
	.mainVisual .innerBox {
		margin-top: -2.5rem;
	}
	.mainVisual .innerBox h2 {
		font-size: 2rem;
	}
	.mainVisual .innerBox p {
		margin-bottom: 0.5rem;
		font-size: 1.2rem;
	}
	.mainVisual .innerBox .linkList {
		padding: 0 1rem;
		gap: 1rem;
	}
	.mainVisual .innerBox .linkList li {
		width: calc((100% - 2rem) / 3);
		max-width: 20rem;
	}
	.mainVisual .innerBox .linkList li .img {
		margin-bottom: -1.5rem;
		max-width: 100%;
	}
	.mainVisual .innerBox .linkList li a {
		padding: 0.5rem;
		font-size: 1rem;
		border-radius: 0.5rem;
		box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.5);
		border: 0.1rem solid #fff;
	}
	.fixBtn {
		width: 5rem;
	}
	#main .heading01 {
		font-size: 1.8rem;
	}
	#main .heading01 .en {
		margin-bottom: 0.5rem;
	}
	#main .heading01 .en img {
		height: 3.5rem;
	}
	#main .news {
		padding-bottom: 7rem;
		background-size: 100% 6rem, 100%;
	}
	#main .news .img {
		width: 12rem;
		top: -4.6rem;
		margin-left: -17rem;
	}
	#main .news .heading01 {
		margin: 0 0 1.5rem;
	}
	#main .news .newsList {
		margin-bottom: 3rem;
		gap: 1.5rem 1rem;
	}
	#main .news .newsList li {
		width: calc(50% - 0.5rem);
	}
	#main .news .newsList li .pho {
		margin-bottom: 1rem;
	}
	#main .news .newsList li .pho img {
		border-radius: 1rem;
		aspect-ratio: 454/316;
	}
	#main .news .newsList li .link span {
		background-size: 1.5rem;
	}
	#main .service .img01 {
		top: -5rem;
		width: 9.5rem;
	}
	#main .service .heading01 {
		margin-bottom: 1.5rem;
		font-size: 1.6rem;
	}
	#main .service .heading01 .en {
		margin-bottom: 1rem;
	}
	#main .service .sub01 .imgList {
		max-width: initial;
		gap: 1.5rem 4%;
	}
	#main .service .sub01 .imgList li {
		width: 47%;
	}
	#main .service .sub01 .imgList li .ttl {
		margin-bottom: 1.5rem;
		font-size: 1.8rem;
	}
	#main .service .sub01 .imgList li .ttl::after {
		width: 3rem;
		height: 0.3rem;
		bottom: -0.8rem;
	}
	#main .service .sub01 .imgList li .ttl01 {
		margin-bottom: 0.5rem;
	}
	#main .service .sub01 .imgList li p {
		font-size: 1.4rem;
	}
	#main .service .sub01 .imgList li .txt01 {
		font-size: 1.6rem;
	}
	#main .service .sub01 .imgList li .txt01 .sml {
		font-size: 1.3rem;
	}
	#main .service .sub01 .imgList li .txt02 {
		font-size: 1.8rem;
	}
	#main .service .sub01 .imgList li .txt02 .lrg {
		font-size: 2rem;
	}
	#main .service .sub01 .img02 {
		width: 9.5rem;
		right: 0.5rem;
	}
	#main .service .sub02 .photo img {
		aspect-ratio: 375/230;
		object-fit: cover;
	}
	#main .service .sub02 .textBox {
		padding: 2rem 0 10.5rem;
	}
	#main .service .sub02 .textBox p {
		max-width: 100%;
		line-height: 1.85;
	}
	#main .service .sub02 .textBox .img03 {
		width: 15rem;
	}
	#main .record {
		padding: 6rem 0 8rem;
	}
	#main .record .heading01 {
		margin-bottom: 2rem;
	}
	#main .record .heading01 .en {
		margin-bottom: 0.5rem;
	}
	#main .record .img {
		margin-left: -20.5rem;
		width: 9.5rem;
		top: -6.5rem;
	}
	#main .record .caseList {
		margin: 0;
		gap: 1.5rem 1rem;
	}
	#main .record .caseList li {
		width: calc(50% - 0.5rem);
	}
	#main .record .caseList li .photo img {
		border-radius: 1rem;
	}
	#main .pickup {
		margin-bottom: 5rem;
	}
	#main .pickup .sliderBox img {
		width: 115.2rem;
	}
	#main .pickup .sub01 {
		margin-bottom: 4rem;
		padding: 0 1.5rem;
		max-width: initial;
		display: block;
	}
	#main .pickup .sub01 .textBox {
		margin: 0 0 3rem;
	}
	#main .pickup .sub01 .textBox h2 {
		margin-bottom: 2rem;
		font-size: 2rem;
	}
	#main .pickup .sub01 .textBox h2 .en {
		margin-bottom: 0.8rem;
	}
	#main .pickup .sub01 .textBox h2 .en img {
		width: 18rem;
	}
	#main .pickup .sub01 .textBox h2 .txt {
		padding-bottom: 0.3rem;
		font-size: 2.8rem;
		background-size: 100% 0.8rem;
	}
	#main .pickup .sub01 .textBox .txtList {
		margin-bottom: 1.8rem;
		gap: 1rem;
	}
	#main .pickup .sub01 .textBox .txtList li {
		padding: 0.5rem;
		min-width: calc((100% - 2rem) / 3);
		font-size: 2rem;
		border-radius: 0.5rem;
	}
	#main .pickup .sub01 .textBox p {
		margin: 0 0 1rem;
		font-size: 1.6rem;
		letter-spacing: -0.01em;
		line-height: 1.4;
	}
	#main .pickup .sub01 .textBox .text01 {
		margin: 0;
		font-size: 2.6rem;
	}
	#main .pickup .sub01 .textBox .text01 span {
		font-size: 3.4rem;
	}
	#main .pickup .sub01 .photo {
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
	#main .pickup .sub02 .text02 {
		margin: 0 0 2rem;
		font-size: 2.8rem;
		letter-spacing: -0.05em;
		line-height: 1.3;
	}
	#main .pickup .sub02 .text02 .sml {
		font-size: 2rem;
	}
	#main .pickup .sub02 .imgList {
		gap: 3rem 0;
	}
	#main .pickup .sub02 .imgList li {
		padding-left: 3rem;
		width: 100%;
	}
	#main .pickup .sub02 .imgList li:nth-child(2n) {
		width: 100%;
	}
	#main .pickup .sub02 .imgList li .photo .imgtext {
		width: 7rem;
		left: -3rem;
		top: -3rem;
	}
	#main .pickup .sub02 .imgList li .txtBox .img {
		margin: -4rem 0 0 -3rem;
		width: 10rem;
	}
	#main .pickup .sub02 .imgList li .txtBox .inner {
		padding: 1rem 0 2.5rem;
	}
	#main .pickup .sub02 .imgList li .txtBox .inner p {
		font-size: 2rem;
	}
	#main .pickup .sub02 .imgList li .txtBox .inner .note {
		font-size: 1.4rem;
	}
	#main .comments::before {
		width: 10rem;
		height: 10rem;
		top: -1rem;
		left: 0;
		border-width: 1rem;
	}
	#main .comments::after {
		width: 10rem;
		height: 10rem;
		bottom: -3rem;
		right: 0;
		border-width: 1rem;
	}
	#main .comments h2 {
		margin-bottom: 1rem;
	}
	#main .comments h2 img {
		width: 40rem;
	}
	#main .comments .textList {
		gap: 3rem 0;
		flex-direction: column;
		align-items: center;
	}
	#main .comments .textList li {
		padding: 6.7rem 2rem 3.5rem;
		width: 27.3rem;
		max-width: 100%;
	}
	#main .comments .textList li .ttl {
		font-size: 2.1rem;
	}
	#main .comments .textList li p {
		font-size: 1.1rem;
	}
	#main {
		padding-bottom: 12rem;
	}
}


/* テキストのフェードインアニメーション */
.fade-in-text {
  opacity: 0; /* アニメーション開始前の状態（透明） */
  animation-name: fadeIn; /* 下で定義するアニメーション名を指定 */
  animation-duration: 2.5s; /* アニメーションにかかる時間（2.5秒） */
  animation-fill-mode: forwards; /* アニメーション終了後もスタイルを維持 */
  animation-delay: 0.5s; /* 0.5秒遅れてアニメーションを開始 */
}

/* フェードインのキーフレーム定義 */
@keyframes fadeIn {
  0% {
    opacity: 0; /* 開始時：透明 */
  }
  100% {
    opacity: 1; /* 終了時：不透明 */
  }
}

/* --- ヒーローイメージ画像のホバーエフェクト --- */

/* 画像を囲むコンテナの設定 */
.mainVisual .linkList li .img {
  overflow: hidden; /* ズームではみ出した部分を隠す */
}

/* 画像に変化が滑らかになるようtransitionを設定 */
.mainVisual .linkList li .img img {
  transition: transform 0.3s ease-in-out; /* 0.3秒かけてズームする */
}

/* リスト全体（画像とボタン）にマウスが乗った時に画像を拡大 */
.mainVisual .linkList li:hover .img img {
  transform: scale(1.08); /* 1.08倍に拡大 */
}







/* ヒーローイメージ テキストアニメーション */
.mainVisual .innerBox p {
  /* JavaScriptでspanが挿入されるまでテキストを非表示にする */
  opacity: 0;
}
.mainVisual .innerBox p.is-active {
  /* 準備完了後に表示 */
  opacity: 1;
}

/* JavaScriptによって挿入される各文字（span）のスタイル */
.mainVisual .innerBox p span {
  display: inline-block; /* アニメーション適用のため */
  opacity: 0; /* 初期状態は透明 */
  transform: translateY(20px); /* 少し下から移動してくる */
  animation-name: text-appear;
  animation-duration: 0.8s; /* アニメーション時間 */
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 少しバウンドするような動き */
  animation-fill-mode: forwards; /* アニメーション終了時の状態を維持 */
}

/* アニメーションの定義 */
@keyframes text-appear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ↓↓↓ ズームインアニメーション用のCSS ↓↓↓ */

/* アニメーションの初期状態（小さく透明） */
.zoom-in-target {
  opacity: 0;
  transform: scale(0.5); /* 50%のサイズから開始 */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* is-visibleクラスが付与されたときの最終状態（元のサイズで不透明） */
.zoom-in-target.is-visible {
  opacity: 1;
  transform: scale(1); /* 元のサイズ */
  animation: zoomBounce 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* ぐわんアニメーションのキーフレーム */
@keyframes zoomBounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    opacity: 1;
    transform: scale(1.1); /* 少し大きめに跳ねる */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 元のサイズに戻る */
  }
}