@charset "utf-8";
/*==========================================================================
アニメーション (テキスト)
==========================================================================*/
/*:::::::::::::::::::::::::::::::タイミング:::::::::::::::::::::::::::::::::*/
.delay-time {
	opacity: 0;
}
.delay-time02 {
	animation-delay: 0.2s;
}
.delay-time03 {
	animation-delay: 0.3s;
}
.delay-time04 {
	animation-delay: 0.4s;
}
.delay-time05 {
	animation-delay: 0.5s;
}
.delay-time06 {
	animation-delay: 0.6s;
}
.delay-time09 {
	animation-delay: 0.9s;
}
.delay-time10 {
	animation-delay: 1.0s;
}
.delay-time11 {
	animation-delay: 1.1s;
}
.delay-time12 {
	animation-delay: 1.2s;
}
.delay-time13 {
	animation-delay: 1.3s;
}
.delay-time14 {
	animation-delay: 1.4s;
}
.delay-time15 {
	animation-delay: 1.5s;
}
.delay-time16 {
	animation-delay: 1.6s;
}
.delay-time17 {
	animation-delay: 1.7s;
}
.delay-time18 {
	animation-delay: 1.8s;
}
.delay-time19 {
	animation-delay: 1.9s;
}
.delay-time20 {
	animation-delay: 2.0s;
}
/*::::::::::::::::::::::::::::::::【ふわっ】::::::::::::::::::::::::::::::::*/
/* その場で */
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeInAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* 下から */
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* 上から */
.fadeDown {
	animation-name: fadeDownAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeDownAnime {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* 左から */
.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
/* 右から */
.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/*（☆）*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
	opacity: 0;
}
/*::::::::::::::::::::::【ズームイン・アウト】:::::::::::::::::::::::*/
/* ズームイン */
.zoomInTrigger {
	opacity: 0;
}
.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes zoomInAnime {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
/* はじめ0　*/
.zoomInTrigger {
	opacity: 0;
}
/* ズームアウト */
.zoomOut {
	animation-name: zoomOutAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	opacity: 1;
	/* 最終的に完全に表示される */
}
@keyframes zoomOutAnime {
	from {
		opacity: 1;
		transform: scale(2);
	}
	to {
		opacity: 1;
		transform: scale(1);
		/* 1倍に戻す */
	}
}
.zoomOutTrigger {
	padding: 20px;
	cursor: pointer;
	font-size: 20px;
}
/*::::::::::::::::::::::【シャッ（背景色が伸びて出現）】:::::::::::::::::::::::*/
/*背景色が伸びて出現（共通）*/
/*（☆）*/
.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	/*　はみ出た色要素を隠す　*/
	opacity: 0;
}
@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*中の要素*/
.bgappear {
	animation-name: bgextendAnimeSecond;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*左から*/
.bgLRextend::before {
	animation-name: bgLRextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #0C123C;
	/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}
	50% {
		transform-origin: left;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: right;
	}
	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}
/*右から*/
.bgRLextend::before {
	animation-name: bgRLextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #0C123C;
	/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime {
	0% {
		transform-origin: right;
		transform: scaleX(0);
	}
	50% {
		transform-origin: right;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: left;
	}
	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}
/*下から*/
.bgDUextend::before {
	animation-name: bgDUextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;
	/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime {
	0% {
		transform-origin: bottom;
		transform: scaleY(0);
	}
	50% {
		transform-origin: bottom;
		transform: scaleY(1);
	}
	50.001% {
		transform-origin: top;
	}
	100% {
		transform-origin: top;
		transform: scaleY(0);
	}
}
/*上から*/
.bgUDextend::before {
	animation-name: bgUDextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;
	/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime {
	0% {
		transform-origin: top;
		transform: scaleY(0);
	}
	50% {
		transform-origin: top;
		transform: scaleY(1);
	}
	50.001% {
		transform-origin: bottom;
	}
	100% {
		transform-origin: bottom;
		transform: scaleY(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/*（☆）*/
.bgappearTrigger, .bgUDextendTrigger, .bgDUextendTrigger, .bgRLextendTrigger, .bgLRextendTrigger {
	opacity: 0;
}
/*-------------------------------【ぼかしから出現】---------------------------*/
/*（☆）*/
.blur {
	animation-name: blurAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
/* はじめ0　*/
.blurTrigger {
	opacity: 0;
}
/*---------------------------------【点滅】---------------------------------*/
/*（☆）*/
.blinking {
	-webkit-animation: blink 0.8s ease-in-out infinite alternate;
	-moz-animation: blink 0.8s ease-in-out infinite alternate;
	animation: blink 0.8s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*---------------------------【タイピング】---------------------------------*/
/*（☆）*/
.TextTyping span {
	display: none;
}
/*文字列後ろの線の設定*/
.TextTyping::after {
	content: "";
	animation: typinganime .8s ease infinite;
}
@keyframes typinganime {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
/*--------------------------【一文字ずつ出現　未完成】--------------------------------*/
/* 文字を隠すための基本スタイル */
.animate-text {
	display: block;
	font-size: 24px; /* 必要に応じてサイズを調整 */
	white-space: nowrap;
	overflow: hidden;
}
.animate-text span {
	display: inline-block;
	opacity: 0; /* 初めは文字を隠す */
	animation: fadeIn 1s forwards;
}
.animate-text span:nth-child(1) {
	animation-delay: 0.1s;
}
.animate-text span:nth-child(2) {
	animation-delay: 0.2s;
}
.animate-text span:nth-child(3) {
	animation-delay: 0.3s;
}
.animate-text span:nth-child(4) {
	animation-delay: 0.4s;
}
/* 追加の文字も同様にdelayを増やす */
/* アニメーションの定義 */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*==========================================================================
アニメーション 
==========================================================================*/
/*-------------------------【キラーン】------------------------------*/
/* 親要素 */
.shine-box {
	position: relative;
	overflow: hidden;
}
/* キラーン効果 */
.shine-text {
	position: relative;
	display: inline-block;
	white-space: nowrap; /* テキストの幅を正確に認識 */
}
/* 擬似要素で光を作成 */
.shine-text::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%; /* 開始位置 */
	width: 100%; /* テキスト幅だけ */
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
	animation: shine 2s ease-out forwards;
	pointer-events: none;
}
/* キラーンの動き */
@keyframes shine {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}
/* 遅延時間の設定 */
.delay-1::after {
	animation-delay: 0.5s;
}
.delay-2::after {
	animation-delay: 1.5s;
}
/*-------------------------【ぽよぽよ収縮する】------------------------------*/
.anim-box.poyopoyo {
	display: inline-block;
	/* or block */
	animation: poyopoyo 2s ease-out infinite;
	opacity: 1;
}
@keyframes poyopoyo {
	0%, 40%, 60%, 80% {
		transform: scale(1.0);
	}
	50%, 70% {
		transform: scale(0.95);
	}
}
/*-------------------------【ぼよよん】------------------------------*/
.boyoyon {
	transform: scale(1);
	animation: bound 1s ease-in infinite;
	/* ホバーの際は消す */
}
/** ホバー時に動かしたいときの設定 */
/* .boyoyon img:hover{
  -webkit-animation: bound 1s ease-in; 
  -moz-animation:    bound 1s ease-in; 
  animation: bound 1s ease-in;
} */
/** アニメーションの定義 */
@keyframes bound {
	from {
		transform: scale(1);
	}
	25% {
		transform: scale(1.15);
	}
	50% {
		transform: scale(0.95);
	}
	75% {
		transform: scale(1.05);
	}
	to {
		transform: scale(1);
	}
}
/*-------------------------【線が伸びる】------------------------------*/
.line {
	display: block;
	position: relative;
}
.line::after {
	background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
	content: '';
	display: block;
	height: 1px;
	width: 0;
	transform: translateX(-50%);
	transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
	position: absolute;
	bottom: 0;
	left: 50%;
}
.line.is-animated::after {
	width: 100%;
}
/*==========================================================================
空を飛ぶ動き
==========================================================================*/
/*-------------------------【ふわふわ空を飛ぶ動き】------------------------------*/
.fly-container {
	/*containerを入れないと横幅がはみ出る原因になる*/
	width: 100%;
	height: 200px;
	display: flex;
	overflow: hidden;
	position: relative;
	align-items: center;
	justify-content: flex-end;
}
.fly {
	width: 50vw;
	max-width: 100vw;
	height: 30vh;
	/* overflow-x: hidden;*/
	/*これをかけると黒い線が出現するので消す*/
	position: relative;
}
.fly img {
	position: absolute;
	top: 20px;
}
.target-fly {
	display: block;
	width: auto;
	user-select: none;
}
/*********************【縦にふわふわ】*********************/
.tate-fuwa img {
	animation: 3s tatefuwa infinite;
}
@keyframes tatefuwa {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}
/*********************【横にふわふわ】*********************/
.yoko-fuwa img {
	animation: yokofuwa 3s ease-in-out infinite alternate;
	transition: 1.5s ease-in-out;
}
@keyframes yokofuwa {
	0% {
		transform: translate(0, 0) rotate(-7deg);
	}
	50% {
		transform: translate(0, -7px) rotate(0deg);
	}
	100% {
		transform: translate(0, 0) rotate(8deg);
	}
}
/*===========================================================================
その他　機能に関する動き
===========================================================================*/
/* モーダルの背景 */
.modal {
	display: none;
	position: fixed;
	z-index: 5;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
}
/* モーダルの内容 */
.modal-content {
	position: absolute;
	background-color: #fff;
	margin: 0 auto;
	padding: 20px;
	  width: auto;
	height: auto;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* 閉じるボタン */
.close-modal {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 25px;
	font-weight: bold;
	color: #000;
	cursor: pointer;
	background-color: #e9e9e9;
	border-radius: 50%;
	padding: 0 5px 3px 5px;
}
/* モーダル画像 */
.modal-image {
	/*  width: 100%;
  height: auto;*/
	height: 100%;
	width: auto;
}
@media (max-width:1280px) {}
@media (max-width:1024px) {}
@media (min-height:1366px) { /*ipad pro*/

}
@media (max-width:900px) {
	/* モーダルの内容 */
}
@media (max-width:600px) {}
@media (max-width:450px) {

}
@media (max-width: 400px) {

}
/*==========================================================================
【ここからローディング】
=========================================================================*/
/* Loading背景画面設定　*/
#splash {
	/*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background-image: url("../image/common/loading-back.png");
	background-size: cover;
	background-position: center;
	text-align: center;
	color: #0a51a1;
}
/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo .img-back {
	background-size: cover;
	background-position: bottom;
	background-repeat: repeat-x;
	width: 100vw;
}
.img-back {
	width: 100%;
}
#splash_logo img {
	display: block;
	width: 260px;
}
#splash_logo p {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 800;
	font-size: 3.5rem;
	position: relative;
	top: -150px;
}
/* fadeUpをするアイコンの動き */
@keyframes moveRight {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100vw);
	}
}
.car {
	animation: moveRight 6s ease-in-out forwards;
}
@media (max-width:1280px) {}
@media (max-width:1024px) {
	#splash_logo p {
		font-size: 2.5rem;
		top: -130px;
	}
}
@media (min-height:1366px) { /*ipad pro*/
	#splash_logo p {
		top: -250px;
		font-size: 3.5rem;
	}
}
@media (max-width:900px) {}
@media (max-width:600px) {
	#splash_logo p {
		top: -200px;
		font-size: 2.3rem;
	}
	#splash_logo img {
		width: 200px;
	}
}
@media (max-width:450px) {}
@media (max-width: 400px) {
	#splash_logo p {
		top: -150px;
		font-size: 1.8rem;
	}
	#splash_logo img {
		width: 150px;
	}
}