@charset "UTF-8";

html {
	font-size: 17px;

	@media screen and (max-width: 1400px) {
		font-size: 16px;
	}

	@media screen and (max-width: 1100px) {
		font-size: 14px;
	}

	@media screen and (max-width: 800px) {
		font-size: 12px;
	}

	@media screen and (max-width: 500px) {
		font-size: 10px;
	}
}

html {
	background-color: #EFF6FB;
}

body {
	color: #55606E;
	margin-top: 0;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
	text-align: center;
}

li {
	list-style: none;
}

.title {
	padding-top: 40px;
	font-size: 6rem;
	text-align: center;
	font-family: "Quicksand", sans-serif;
	background: linear-gradient(360deg, #1E74B2, #B3D8F3, #4C98CF, #448DC2, #64A8DA, #64A8DA, #95CBF3, #1C5B88);
	background: -webkit-linear-gradient(90deg, #1E74B2, #68a8d6, #6aa7d3, #5096ca, #64A8DA, #64A8DA, #4787b4, #356c93);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	opacity: 0.7;
	margin-bottom: 0;
	margin-top: 0;

	@media screen and (max-width: 560px) {
		font-size: 50px;
	}
}

.sub-title {
	font-size: 2.5rem;
	text-align: center;
	margin-top: 0;
}

/* loading */

.remove-scrolling {
	height: 100%;
	overflow: hidden;
}

#loading-wrapper {
	background-color: #add6e2;
	background-size: cover;
	font-size: 20px;
	color: #fff;
	overflow: hidden;
	z-index: 10000;
	position: fixed;
	width: 100%;
	height: 100%;

	& #loading-cat {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		text-align: center;
		justify-content: center;
		display: flex;
		align-items: center;
		height: 100vh;

		.cat-img {
			-webkit-filter: brightness(0) invert(1);
			filter: brightness(0) invert(1);
			width: 145px;

			@media screen and (max-width: 560px) {
				width: 100px;
			}

		}
	}

	.circle {
		font-family: "Inconsolata", monospace;
		position: relative;
		display: flex;
		justify-content: center;
		border-radius: 50%;
		right: 0%;
		top: 50%;
		transform: translateY(-50%);

	}

	.inner {
		/* 文字を配置する起点となる親要素 */
		position: relative;
		width: 200px;
		/* この親要素自体は1文字が収まる程度の小さいサイズ */
		height: 530px;
		border-radius: 50%;
		animation: rotateAnim 10s linear infinite;

		@media screen and (max-width: 560px) {
			width: 17rem;
		}

		/* 円形テキストを回転 */
		&:hover {
			animation-play-state: paused;
			/* アニメーション一時停止 */
		}
	}

	& span {
		position: absolute;
		writing-mode: vertical-rl;
		inset: 0;
	}
}

@keyframes rotateAnim {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* header */
/*ボタン全体の形状*/

.openbtn1 {
	display: none;
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 999;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 5px;

	.nav-btn {
		max-width: none;
		width: 132px;
		height: 90px;
		margin-left: -70px;
		position: relative;
		z-index: 998;

		@media screen and (max-width: 560px) {
			width: 80px;
			height: 55px;
			margin-left: -17px;
		}
	}

	& strong {
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: -18px;
		height: 3px;
		border-radius: 2px;
		background-color: #EFF6FB;
		width: 45%;

		@media screen and (max-width: 560px) {
			left: 14px;
			width: 30%;
			height: 1.5px;
		}

		/*ボタンのアイコン設定*/
		&:nth-of-type(1) {
			top: 48px;
			z-index: 9999;

			@media screen and (max-width: 560px) {
				top: 30px;
			}
		}

		&:nth-of-type(2) {
			top: 56px;
			z-index: 9999;

			@media screen and (max-width: 560px) {
				top: 35px;
			}
		}

		&:nth-of-type(3) {
			top: 64px;
			z-index: 9999;

			@media screen and (max-width: 560px) {
				top: 40px;
			}
		}
	}
}

/*activeクラスが付与された後のボタンのアイコン設定*/

.active strong:nth-of-type(1) {
	top: 49px;
	left: -13px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;

	@media screen and (max-width: 560px) {
		top: 30px;
		left: 14px;
	}
}

.active strong:nth-of-type(2) {
	opacity: 0;
}

.active strong:nth-of-type(3) {
	top: 61px;
	left: -13px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;

	@media screen and (max-width: 560px) {
		top: 42px;
		left: 14px;
	}
}

/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/

.fadeDown {
	animation-name: fadeDownAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	display: block;
}

@keyframes fadeDownAnime {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#header {
	font-family: "Zen Maru Gothic", serif;
	height: 30px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #EFF6FB;
	color: #fff;
	text-align: center;
	padding: 20px;
	justify-content: flex-end;

	@media screen and (max-width: 900px) {
		padding: 0;
		justify-content: center;
	}

	/*==ヘッダーのテキストナビゲーションの形状*/
	#g-navi {
		& ul {
			list-style: none;
			display: flex;
			justify-content: center;

			@media screen and (max-width: 560px) {
				padding: 0;
			}

			& li,
			& a {
				display: block;
				text-decoration: none;
				color: #666;
				padding: 10px;

				@media screen and (max-width: 560px) {
					padding: 12px;
					display: flex;
					justify-content: center;
				}
			}

			& li.current a,
			& li a:hover {
				color: #fff;
			}
		}
	}

	/*.doneクラスがついたヘッダー*/
	.dnone {
		opacity: 0;

		.panelactive {
			opacity: 1;
		}
	}
}

/*.doneクラスがついたヘッダーのテキストナビゲーションの形状*/

#header.dnone #g-navi {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity: 0;
}

/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたナビゲーションの形状*/

#header.dnone.panelactive #g-navi {
	opacity: 1;
	z-index: 3;
	background: #BEDFE7;

	& ul {
		display: block;

		& li {
			a {
				color: #333;
				text-decoration: none;
				padding: 10px;
				display: block;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				transition: all 0.3s;
				font-size: 22px;
				line-height: 45px;

				@media screen and (max-width: 560px) {}
			}
		}
	}
}

/*リストの形状*/

section {
	position: relative;
	z-index: 1;
}

/* mainvisual */

#mainvisual {
	display: flex;

	@media screen and (max-width: 560px) {
		flex-direction: column-reverse;
	}

	.left {
		width: 55%;
		margin: 20px;
		text-align: center;

		@media screen and (max-width: 560px) {
			z-index: 1;
			position: absolute;
			top: 10%;
		}

		& h3 {
			font-family: "Comfortaa", sans-serif;
			color: #A1ADB8;
			font-size: 2rem;
			padding-top: 20px;
			margin-top: 30px;
			margin-bottom: 0;

			@media screen and (max-width: 560px) {
				font-size: 15px;
				color: #7c8b9a;
				margin-top: 20px;
			}
		}

		& h1 {
			font-family: "Quicksand", sans-serif;
			font-size: 4rem;
			margin-top: 50px;
			display: inline-block;
			background: linear-gradient(90deg, #BED3E8, #BED3E8, #A7BDD5, #A8C1D7, #B2C7DC, #B9D0E2, #BED3E8);
			background: -webkit-linear-gradient(0deg, #BED3E8, #BED3E8, #A7BDD5, #A8C1D7, #B2C7DC, #B9D0E2, #BED3E8);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
			margin-bottom: 0;

			@media screen and (max-width: 560px) {
				font-size: 45px;
				color: #7c8b9a;
				margin-top: 20px;
			}
		}

		& h4 {
			font-family: "Comfortaa", sans-serif;
			font-size: 1rem;
			padding-top: 20px;
			color: #95AABA;
			margin-bottom: 0;
			margin-top: 0;
		}

		& img {
			width: 141px;
			height: 139px;
			margin-top: 50px;
			object-fit: cover;
			margin-bottom: 0;

			@media screen and (max-width: 560px) {
				width: 80px;
				height: 80px;
				margin-top: 	10px;
			}
		}

		& p {
			font-size: 1.5rem;
			color: #A7B4C3;
			font-weight: normal;
			font-family: "Zen Maru Gothic", serif;
			margin-bottom: 0;

			@media screen and (max-width: 560px) {
				font-size: 12px;
				color: #7c8b9a;
			}
		}
	}

	.right {
		max-width: 100%;
	}
}

/* about */

#about {
	animation: DownAnime 0.5s forwards;
	margin: 10rem 0 6rem 0;
	text-align: center;
	background-image: url(../image/bg.png);
	background-size: cover;

	@media screen and (max-width: 560px) {
		margin: 10rem 0 2rem 0;
	}

	.abo-img {
		& img {
			margin-bottom: 50px;

			@media screen and (max-width: 560px) {
				max-width: 20rem;
			}
		}

		& h1 {}
	}

	.profile {
		.box1 {
			position: relative;

			& img {
				width: 350px;
				height: 87px;

				@media screen and (max-width: 560px) {
					width: 180px;
					height: 45px;
				}
			}

			& p {
				font-family: "Zen Maru Gothic", serif;
				position: absolute;
				font-size: 2.5rem;
				left: 50%;
				top: 44%;
				color: #ffff;
				transform: translate(-50%, -50%);

				@media screen and (max-width: 560px) {
					font-size: 20px;
				}
			}
		}

		.pro-icon {
			animation: fadeIn linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 50%;
			width: 200px;
			height: 200px;
			margin-top: 50px;

			@media screen and (max-width: 560px) {
				width: 100px;
				height: 100px;
			}
		}

		& dl {
			animation: fadeIn linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 50%;
			font-family: "Zen Maru Gothic", serif;
			display: flex;
			margin-top: 60px;
			flex-wrap: wrap;
			width: 100%;
			font-size: 1.8rem;
			margin-bottom: 50px;

			@media screen and (max-width: 560px) {
				font-size: 13px;
				margin: 20px 0 30px 0;
			}

			& dt {
				width: 50%;
				padding-left: 25%;
				padding-bottom: 20px;
				font-weight: normal;
			}

			& dd {
				width: 50%;
				padding-right: 25%;
				padding-bottom: 20px;
				margin: 0;
			}
		}

		.pro-text {
			animation: fadeIn linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 50%;
			font-family: "Zen Maru Gothic", serif;
			font-size: 1.3rem;
			margin-left: auto;
			margin-right: auto;
			line-height: 70px;
			text-align: left;
			display: inline-block;
			margin-bottom: 30px;

			@media screen and (max-width: 560px) {
				font-size: 10px;
				line-height: 35px;
			}
		}

		.read-btn {
			position: relative;
			margin: 50px 0 80px 0;

			& img {
				width: 580px;
				height: 183px;
				margin-left: 40px;
			}

			.btn-text {
				font-size: 30px;
				font-family: "Zen Maru Gothic", serif;
				position: absolute;
				left: 50%;
				top: 50%;
				color: #ffff;
				transform: translate(-50%, -50%);
			}
		}
	}

	/*アコーディオン*/
	.accordion-area {
		list-style: none;

		& li {
			margin: 10px 0;
		}

		section {
			border: 1px solid #ccc;
		}

		.read-img {
			cursor: pointer;
			width: 30%;
			margin: 0 auto;
			transition: all .5s ease;

			@media screen and (max-width: 560px) {
				width: 55%;
				padding: 0;
				display: block;
				margin: auto;
			}

			/*　closeというクラスがついたら形状変化　*/
			.close::before {
				transform: rotate(45deg);
			}

			.close::after {
				transform: rotate(-45deg);
			}
		}

		/*アコーディオンで現れるエリア*/
		.box {
			display: none;
		}
	}

	.history {
		background-image: url(../image/history-bg.png);
		background-size: cover;
		padding: 20px;

		.box2 {
			position: relative;
			margin-bottom: 30px;

			& img {
				width: 350px;
				height: 87px;
				margin-top: 60px;

				@media screen and (max-width: 560px) {
					width: 180px;
					height: 45px;
				}
			}

			& p {
				font-family: "Zen Maru Gothic", serif;
				position: absolute;
				left: 51%;
				top: 69%;
				color: #ffff;
				transform: translate(-50%, -50%);

				@media screen and (max-width: 560px) {
					font-size: 20px;
					bottom: 32px;
				}
			}
		}

		.his-text1 {
			font-family: "Zen Maru Gothic", serif;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 3rem 2rem;
			margin: 3rem;

			@media screen and (max-width: 560px) {
				flex-direction: column;
				padding: 0;
				margin: 0;
			}

			.right {
				text-align: center;
				width: 35%;

				@media screen and (max-width: 560px) {
					width: 60%;
				}

				& h3 {
					font-size: 2rem;
					line-height: 60px;
					padding-bottom: 1.2rem;
					margin: 0;

					@media screen and (max-width: 560px) {
						font-size: 1.7rem;
						line-height: 3rem;
					}
				}

				& p {
					font-size: 1.1rem;
					line-height: 40px;
					text-align: left;


					@media screen and (max-width: 560px) {
						font-size: 1rem;
						line-height: 25px;
						margin-bottom: 5rem;
					}
				}
			}

			.left {
				text-align: left;
				max-width: 30%;

				@media screen and (max-width: 560px) {
					max-width: 25%;
					margin-bottom: 2rem;
				}


				.his-img {
					width: 200px;

					@media screen and (max-width: 560px) {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}

	.skill {
		background-image: url(../image/skill-bg.png);
		background-size: cover;

		.box3 {
			position: relative;

			& img {
				width: 350px;
				height: 87px;
				margin-top: 50px;

				@media screen and (max-width: 560px) {
					width: 180px;
					height: 45px;
				}
			}

			& p {
				font-family: "Zen Maru Gothic", serif;
				position: absolute;
				left: 49%;
				top: 72%;
				color: #ffff;
				transform: translate(-50%, -50%);

				@media screen and (max-width: 560px) {
					font-size: 20px;
					bottom: 10%;
				}
			}
		}

		.ski-top {
			display: flex;
			margin: 2rem;
			padding: 2rem;
			text-align: center;

			@media screen and (max-width: 560px) {
				padding: 0;
			}

			& img {
				width: 7rem;

				@media screen and (max-width: 560px) {
					width: 4.9rem;
				}
			}

			& p {
				font-family: "Zen Maru Gothic", serif;
				font-size: 2.2rem;
				margin: 30px;

				@media screen and (max-width: 560px) {
					font-size: 12px;
					margin: 10px;
				}
			}

			& li {
				width: 47%;
				flex: 1;
			}
		}

		.ski-bottom {
			display: flex;
			margin: 2rem;
			padding: 2rem;
			text-align: center;

			@media screen and (max-width: 560px) {
				padding: 0;
			}

			& img {
				width: 10.5rem;

				@media screen and (max-width: 560px) {
					width: 75px;
				}
			}

			& p {
				font-family: "Zen Maru Gothic", serif;
				font-size: 2.2rem;
				margin: 15px;

				@media screen and (max-width: 560px) {
					font-size: 12px;
					margin: 10px;
				}
			}

			& li {
				width: 100%;
				flex: 1;
			}

			.ski-box5 {
				& img {
					width: 6.5rem;

					@media screen and (max-width: 560px) {
						width: 50px;
					}
				}
			}
		}
	}
}

/* service */

#service {
	text-align: center;

	.ser-img {
		& img {
			margin-bottom: 40px;
			max-width: 100%;

			@media screen and (max-width: 560px) {
				max-width: 23rem;
			}
		}

		& h1 {
			left: 50%;
			top: 42%;

			@media screen and (max-width: 560px) {
				font-size: 50px;
			}
		}
	}

	.content {
		.ser-title {
			font-size: 2rem;
			margin-top: 50px;

			@media screen and (max-width: 560px) {
				margin-top: 0;
			}
		}

		& p {
			text-align: center;
			line-height: 50px;
		}

		& img {
			margin-bottom: 50px;

			@media screen and (max-width: 560px) {
				margin-bottom: 3rem;
			}
		}

		.wrap-top {
			margin-bottom: 80px;
			position: relative;

			@media screen and (max-width: 560px) {
				margin: 0 30px;
				align-items: center;
			}

			& img {
				width: 65%;

				@media screen and (max-width: 560px) {
					width: 100%;
					margin-top: 1rem;
				}
			}

			.text {
				font-family: "Zen Maru Gothic", serif;
				font-size: 1.3rem;
				text-align: left;
				display: inline-block;
				margin-bottom: 25px;
				width: 100%;
				text-align: center;

				@media screen and (max-width: 560px) {
					margin-bottom: 10px;
					line-height: 30px;
					font-size: 10px;
				}
			}

			& h4 {
				font-family: "Zen Maru Gothic", serif;
				text-align: center;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin-bottom: 0;

				@media screen and (max-width: 500px) {
					font-size: 15px;
				}
			}

			.fee {
				display: flex;
				flex-wrap: wrap;
				padding: 30px 20% 5px 20%;

				@media screen and (max-width: 560px) {
					padding: 0;
				}

				.name {
					font-family: "Zen Maru Gothic", serif;
					width: 50%;
					font-size: 1.4rem;
					flex-direction: column;

					@media screen and (max-width: 560px) {
						font-size: 10px;
					}
				}

				.price {
					flex-direction: column;
					font-family: "Zen Maru Gothic", serif;
					width: 50%;
					font-size: 1.4rem;

					@media screen and (max-width: 560px) {
						font-size: 10px;
					}
				}
			}
		}

		.wrap-bottom {
			margin-bottom: 160px;
			position: relative;

			@media screen and (max-width: 560px) {
				margin: 4.5rem 30px;
				align-items: center;
			}

			& img {
				width: 65%;

				@media screen and (max-width: 560px) {
					width: 100%;
					margin-top: 1rem;
				}
			}

			.text {
				font-family: "Zen Maru Gothic", serif;
				text-align: left;
				display: inline-block;
				margin-bottom: 30px;
				font-size: 1.3rem;
				width: 100%;
				text-align: center;

				@media screen and (max-width: 560px) {
					margin-bottom: 10px;
					line-height: 30px;
					font-size: 10px;
				}
			}

			& h4 {
				font-family: "Zen Maru Gothic", serif;
				text-align: center;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin-bottom: 0;

				@media screen and (max-width: 500px) {
					font-size: 15px;
				}
			}
		}

		.fee {
			display: flex;
			flex-wrap: wrap;
			padding: 30px 20% 5px 20%;

			@media screen and (max-width: 560px) {
				padding: 5px 10px 2px 20px;
			}

			.name {
				font-family: "Zen Maru Gothic", serif;
				width: 50%;
				font-size: 1.4rem;

				@media screen and (max-width: 560px) {
					font-size: 10px;
				}
			}

			.price {
				font-family: "Zen Maru Gothic", serif;
				width: 50%;
				font-size: 1.4rem;
			}
		}
	}
}

/* diary */

#diary {
	padding: 0px 0 30px 0;
	text-align: center;
	background-image: url(../image/dia-bg.png);
	background-size: cover;
	width: 100%;
	height: 100%;
	position: relative;

	& h5 {
		font-size: 25px;
		margin: 0;
	}

	& p {
		font-size: 16px;
		line-height: 26px;
	}

	.cat-anime {
		max-width: 100%;
		position: absolute;
		top: 0;
		-webkit-filter: brightness(0) invert(1);
		filter: brightness(0) invert(1);

		@media screen and (max-width: 560px) {
			display: none;
		}
	}

	.dia-img {
		margin-top: 100px;

		& img {
			z-index: 10;

			@media screen and (max-width: 560px) {
				max-width: 20rem;
			}
		}

		& h1 {
			z-index: 10;

			@media screen and (max-width: 560px) {
				font-size: 50px;
			}
		}
	}

	.dia-contents {
		& img {
			width: 200px;
			padding-bottom: 12px;
		}

		margin: 50px 20px;

		@media screen and (max-width: 560px) {
			padding: 0;
		}

		.description {
			top: 26%;
			left: 19%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 50px;
			gap: 2rem;

			@media screen and (max-width: 560px) {
				top: 120px;
				right: 60px;
				flex-direction: column;
			}
			@media screen and (max-width: 560px) {
				&.reverse {
					flex-direction: column-reverse;
				}
			}



			.description-image {
				padding: 0;

				@media screen and (max-width: 560px) {
					margin: 0 0 20px 0;
					max-width: 100%;
					min-width: 120px;
					text-align: center;
				}

				& img {
					height: 200px;
				}
			}

			.description-text {
				font-family: "Zen Maru Gothic", serif;
				float: left;
				padding: 30px 5rem;
				border-radius: 20px;
				background: #fff;
				position: relative;

				@media screen and (max-width: 560px) {
					margin-left: 0;
					margin-bottom: 2rem;
				}
				&::after {
					position: absolute;
					content: '';
					border: 18px solid transparent;
					border-right: 20px solid #fff;
					bottom: 10%;
					left: -10%;
				}

				@media screen and (max-width: 560px) {
					&::after {
						border: 18px solid transparent;
						border-bottom: 20px solid #fff;
						top: -20%;
						left: 50%;
						bottom: auto;
						right: auto;
						transform: translateX(-50%);
					}
				}

				&.reverse {
					&::after {
						bottom: 10%;
						right: -10%;
						left: auto;
						transform: rotate(180deg);

					}
					@media screen and (max-width: 560px) {
						&::after {
							border-bottom: 20px solid #fff;
							left: 50%;
							bottom: auto;
							right: auto;
							transform: translateX(-50%);
						}
					}
	
				}
			}
		}
	}
}

/* contact */

#contact {
	animation: scroll-anim linear;
	animation-timeline: view();
	animation-range: entry 0% contain 20%;
	background-image: url(../image/contact-bg.png);
	background-size: cover;
	margin-top: 7rem;
	text-align: center;
	padding: 0 10rem;

	@media screen and (max-width: 560px) {
		margin-top: 50px;
		padding: 0;
	}

	.con-img {
		& img {
			@media screen and (max-width: 560px) {
				max-width: 20rem;
			}
		}

		& h1 {
			@media screen and (max-width: 560px) {
				font-size: 4rem;
			}
		}
	}

	& p {
		font-family: "Zen Maru Gothic", serif;
		text-align: center;
		margin-top: 50px;
		margin-bottom: 55px;
		font-size: 1.3rem;

		@media screen and (max-width: 560px) {
			font-size: 1rem;
		}
	}

	.con-form {
		font-family: "Zen Maru Gothic", serif;
		margin: 0 25%;
		height: auto;
		text-align: center;
		padding-bottom: 1rem;
		@media screen and (max-width: 560px) {
			font-size: 1rem;
		}

		.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
			background: #fff;
			border: 1px solid #fff;
			box-sizing: border-box;
			border-radius: 15px;
	}
	.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
    background-color: #75acd0;
    color: var(--wpforms-button-text-color);
}


		& label {
			position: relative;
			display: block;
			margin: 20px 0 10px 0;
			text-align: left;
			font-size: 16px;

			@media screen and (max-width: 560px) {
				font-size: 1rem;
				;
			}
		}

		& input,
		& textarea {
			background-color: #ffff;
			flex: 1;
			width: 100%;
			padding: 10px;
			border-radius: 5px;
			margin-bottom: 15px;

			@media screen and (max-width: 560px) {
				padding: 3px;
			}
		}
	}

	.btn {
		.con-btn {
			position: relative;
			display: block;
			margin-top: 30px;
			padding-bottom: 40px;

			& img {
				width: 330px;

				@media screen and (max-width: 560px) {
					width: 180px;
				}
			}

			& strong {
				font-family: "Zen Maru Gothic", serif;
				position: absolute;
				left: 47.5%;
				top: 35%;
				font-size: 1.0rem;
				color: #596064;

				@media screen and (max-width: 560px) {
					font-size: 8px;
					position: absolute;
					top: 25%;
					left: 46%;
				}
			}
		}
	}
}

@keyframes scroll-anim {
	from {
		opacity: 0;
		scale: 0.9;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

/* footer */

#footer {
	& p {
		margin: 10px 0;
		text-align: center;
		font-size: 10px;

		@media screen and (max-width: 560px) {
			font-size: 5px;
			margin: 5px 0;
		}
	}
}

/*===1文字ずつ===*/

.eachTextAnime span {
	opacity: 0;
}

.eachTextAnime.appeartext span {
	animation: text_anime_on 0.1s ease forwards;
}

@keyframes text_anime_on {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*===ふわっと===*/

.ski-wrapper {
	overflow: hidden;
}

.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);
	}
}

.fadeUpTrigger {
	opacity: 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);
	}
}

.fadeLeftTrigger,
.fadeRightTrigger {
	opacity: 0;
}

.flipLeft {
	animation-name: flipLeftAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	perspective-origin: left center;
	opacity: 0;
}

@keyframes flipLeftAnime {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
	}

	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}

.flipRight {
	animation-name: flipRightAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	perspective-origin: right center;
	opacity: 0;
}

@keyframes flipRightAnime {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
		opacity: 0;
	}

	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}

.flipLeftTrigger,
.flipRightTrigger {
	opacity: 0;
}

.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.smooth {
	animation-name: smoothAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	transform-origin: left;
	opacity: 0;
}

@keyframes smoothAnime {
	from {
		transform: translate3d(0, 100%, 0) skewY(12deg);
		opacity: 0;
	}

	to {
		transform: translate3d(0, 0, 0) skewY(0);
		opacity: 1;
	}
}

.smoothTrigger {
	opacity: 0;
}

/*=== 流れるテキスト===*/

.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;
}

.upAnime {
	opacity: 0;
}

.slideAnimeDownUp {
	animation-name: slideTextY100;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextY100 {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.slideAnimeUpDown {
	animation-name: slideTextY-100;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextY-100 {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* アニメーションスタート時間*/

.delay-time05 {
	animation-delay: 0.5s;
}

.delay-time1 {
	animation-delay: 1s;
}

.delay-time15 {
	animation-delay: 1.5s;
}

.delay-time2 {
	animation-delay: 2s;
}

.delay-time25 {
	animation-delay: 2.5s;
}