/*
Theme Name: Banapo
Theme URI: https://banapo.com/
Author: Banapo
Description: Banapoカスタムテーマ
Version: 1.0
*/
html,
body {
	overflow-x: hidden;
}

html {
  margin-top: 0 !important;
}

body {
	position: relative;
	min-height: 100vh;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	color: #fff;
	margin: 0;
}

.chillax {
	font-family: 'Chillax', sans-serif;
	font-weight: 600;
}

.fadeup.is-animated {
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
	0% {
		transform: translateY(30px);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* PC用（幅751px以上） */
@media (min-width: 751px) {
	.sp {
		display: none !important;
	}
}

/* スマホ用（幅750px以下） */
@media (max-width: 750px) {

	.pc,
	.tablet {
		display: none !important;
	}
}

@media (min-width: 751px) and (max-width: 991px) {

	.sp,
	.pc {
		display: none !important;
	}
}

@media (min-width: 992px) {
	.tablet {
		display: none !important;
	}
}

/* header
=============================*/
.main-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 3em 4em;
	pointer-events: none;
}

.menu_img {
	width: 65px;
	margin: 0.3em auto;
}

.menu_img img {
	width: 100%;
	height: auto;
}

.main-header .kv__main--img--nami {
	position: relative;
	width: 65px;
	height: 3.5vw;
	top: 0;
	right: 0;
	overflow: hidden;
	z-index: 5;
}

.kv__main--img--nami span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 1000%;
	background-image: url("/wp-content/themes/banapo/img/kv--nami.svg");
	background-repeat: repeat-x;
	background-position: left center;
	background-size: cover;
	animation: namiKvAnime 5s linear infinite;
	-webkit-animation: namiKvAnime 15s linear infinite;
}

@keyframes namiKvAnime {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-85%);
	}
}

.header-left {
	pointer-events: auto;
}

.header-left .logo img {
	width: 150px;
}

.header-menu {
	position: absolute;
	top: 18%;
	right: 6%;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.header-right {
	position: absolute;
	top: 53%;
	right: 4.5%;
	display: flex;
	flex-direction: column;
	gap: 15px;
	pointer-events: auto;
}

.icon-button img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	transition: all 0.3s ease;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

.icon-button:hover img {
	transform: scale(1.1);
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.fade-in {
	animation: fadeIn 0.4s ease forwards;
}

.fade-out {
	animation: fadeOut 0.4s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

#menuPopup {
	display: none;
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 101;
}

#menuPopup.active {
	position: fixed !important;
	z-index: 999999 !important;
	display: block !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.closeMenu {
	position: absolute;
	top: 10%;
	right: 6%;
	width: 5%;
	height: 50px;
	padding: 0;
	background: none;
	z-index: 1000;
}

.closeMenu img {
	width: 100%;
	height: auto;
}

.menu-content {
	position: relative;
	background-image: url(/wp-content/themes/banapo/img/bg_all.webp);
	background-size: cover;
	width: 100%;
	height: 100vh;
	text-align: left;
	z-index: 999;
}

.menu-content .col {
	position: absolute;
	top: 12%;
	left: 0;
	right: 0;
	width: 100%;
}

.menu-content .col_l img{
	width: 55%;
	height: auto;
}

.col_l,
.col_r {
	display: inline-block;
	width: 49%;
	vertical-align: middle;
}

.col_l {
	text-align: center;
}

.col_l img {
	width: 65%;
}

.col_r {
	padding-top: 5%;
}

.menu-content ul {
	padding: 0;
	margin: 0;
}

.menu-content ul li {
	list-style: none;
	font-family: "Gothic A1", Sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 3.5rem;
	color: #FFFFFF;
}

.menu-content ul li a {
	color: #FFFFFF;
	text-decoration: none;
}

.menu-content ul li a:hover {
	color: #ffffffe4;
}

.menu-content .icon {
	margin-top: 2rem;
}

.menu-content .icon li {
	display: inline-block;
	padding-right: 2%;
}

.menu-content .icon li img {
	width: 100px;
}

.menu-content .icon li a:hover {
	transform: scale(1.05);
	transition: 0.2s;
}

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #3087A3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.5s ease;
}

.seal-img {
	width: 100px;
	animation: floatX 3s ease-in-out infinite;
}

@keyframes floatX {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(20px);
	}
}

.loading-text span {
	display: inline-block;
	font-family: 'Chillax', sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: #fff;
	animation: wave 1.5s infinite;
	letter-spacing: 0.1em;
	padding: 2em 0;
}

.loading-text span:nth-child(1) {
	animation-delay: 0s;
}

.loading-text span:nth-child(2) {
	animation-delay: 0.1s;
}

.loading-text span:nth-child(3) {
	animation-delay: 0.2s;
}

.loading-text span:nth-child(4) {
	animation-delay: 0.3s;
}

.loading-text span:nth-child(5) {
	animation-delay: 0.4s;
}

.loading-text span:nth-child(6) {
	animation-delay: 0.5s;
}

.loading-text span:nth-child(7) {
	animation-delay: 0.6s;
}

.loading-text span:nth-child(8) {
	animation-delay: 0.7s;
}

@keyframes wave {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.main-header {
		padding: 3em 3em;
	}

	.closeMenu {
		top: 6%;
		right: 6%;
		width: 8%;
	}

	#page-loader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #3087A3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		transition: opacity 0.5s ease;
	}

	.seal-img {
		width: 150x;
		animation: floatX 3s ease-in-out infinite;
	}

	.loading-text span {
		padding: 3em 0;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	.main-header {
		padding: 3em 3em;
	}

	.header-left .logo img {
		width: 200px;
	}

	.menu_img {
		width: 80px;
		margin: 0.5em auto;
	}

	.menu_img img {
		width: 100%;
		height: auto;
	}

	.header-right {
		gap: 20px;
	}

	.icon-button img {
		width: 120px;
		height: 120px;
	}

	.main-header .kv__main--img--nami {
		position: relative;
		width: 80px;
		height: 4.5vw;
		top: 0;
		right: 0;
		overflow: hidden;
		z-index: 5;
		padding: 0.1em;
	}

	.seal-img {
		width: 150x;
		animation: floatX 3s ease-in-out infinite;
	}

	.loading-text span {
		padding: 3em 0;
	}
}

@media screen and (max-width: 767px) {
	.main-header {
		padding: 1em 1em;
	}

	.main-header .fixed-menu {
		position: fixed;
		bottom: 1.5em;
		left: 0;
		right: 0;
		width: 90%;
		margin: 0 auto;
		background: linear-gradient(90deg, #feda52, #f6a623);
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0.65em 0;
		border-radius: 300px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 100;
		opacity: 0;
		transform: translateY(30px);
		transition: all 0.6s ease;
		pointer-events: none;
	}

	.main-header .fixed-menu_popup {
		position: fixed;
		bottom: -20%;
		left: 0;
		right: 0;
		width: 90%;
		margin: 0 auto;
		background: linear-gradient(90deg, #feda52, #f6a623);
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0.65em 0;
		border-radius: 300px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 9999;
		opacity: 1;
		transform: translateY(30px);
		transition: all 0.6s ease;
		pointer-events: none;
	}

	.main-header .fixed-menu.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}


	.main-header .menu-item {
		text-align: center;
		flex: 1;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		border-right: 1px solid rgba(255, 255, 255, 0.4);
	}

	.main-header .menu-item:last-child {
		border-right: none;
	}

	.main-header .icon {
		padding: 0 0 0.2em;
	}

	.main-header .icon img {
		width: auto;
		height: 30px;
		display: block;
		margin: 0 auto 5px;
	}

	.label {
		font-size: 0.8em;
		font-family: "Gothic A1", Sans-serif;
		letter-spacing: 0.05em;
	}

	.label.chillax {
		font-size: 0.85em;
		font-family: 'Chillax', sans-serif;
		font-weight: 600;
	}

	.menu_img {
		width: 50px;
		margin: 0 auto;
	}

	.main-header .kv__main--img--nami {
		width: 50px;
		height: 7vw;
	}

	.header-left .logo img {
		width: 100px;
	}

	.header-menu {
		top: 15%;
		right: 6%;
		pointer-events: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	.header-right {
		position: absolute;
		top: 75%;
		right: 4.5%;
		width: 8%;
	}

	.icon-button {
		display: block;
	}

	.icon-button img {
		width: 100%;
		height: auto;
		border-radius: 0;
	}

	.icon-button:hover img {
		transform: scale(1.1);
		box-shadow: 0 0 15px rgba(255, 255, 255, 0);
	}

	#menuPopup.active {
		position: fixed !important;
		z-index: 999999 !important;
		display: block !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.closeMenu {
		position: absolute;
		top: 3%;
		right: 8%;
		width: 12%;
		height: 50px;
	}

	.menu-content .col {
		position: absolute;
		top: 36%;
		left: 0;
		right: 0;
		transform: translate(0, -40%);
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.menu-content .col_l,
	.menu-content .col_r {
		display: inline-block;
		width: 100%;
		margin: 0 auto;
		vertical-align: middle;
	}

	.menu-content .col_l {
		width: 85%;
		margin: 5% auto 0;
		text-align: center;
	}

	.menu-content .col_l img {
		width: 50%;
	}

	.menu-content .col_r {
		width: 100%;
		display: block;
		padding-top: 0;
	}

	.menu-content ul {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.menu-content ul li {
		list-style: none;
		font-family: "Gothic A1", Sans-serif;
		font-size: 1em;
		font-weight: 600;
		line-height: 2.6rem;
		color: #FFFFFF;
		width: 100%;
	}

	.menu-content ul li a {
		color: #FFFFFF;
		text-decoration: none;
	}

	.menu-content ul li a:hover {
		color: #ffffffe4;
	}

	.menu-content .icon {
		margin-top: 0;
	}

	.menu-content .icon li {
		display: inline-block;
		padding-right: 2%;
	}

	.menu-content .icon li img {
		width: 100px;
	}

	.menu-content .icon li a:hover {
		transform: scale(1.05);
		transition: 0.2s;
	}

}

/* animation
=============================*/
.anim-box.popup.is-animated {
	animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
	0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
	}

	100% {
		transform: translateY(0) scale(1.0);
	}

	80%,
	100% {
		opacity: 1;
	}
}

/* movie
=============================*/
#movie {
	position: relative;
}

#movie video {
	position: relative;
	width: 100%;
	margin: 0 auto -1%;
	z-index: -1;
}

.toggleSoundBtn {
	padding: 0.6em 1.2em;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	font-family: 'Chillax', sans-serif;
	font-weight: 600;
	cursor: pointer;
	bottom: 5%;
	position: absolute;
	bottom: 13%;
	left: 3%;
	z-index: 10;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#movie video {
		margin: 0 auto -3%;
	}
}

@media screen and (max-width: 767px) {
	#movie video {
		margin: 0 auto -5%;
	}

	.toggleSoundBtn {
		padding: 0.6em 1.2em;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		border: none;
		border-radius: 6px;
		font-size: 0.6rem;
		font-family: 'Chillax', sans-serif;
		font-weight: 600;
		cursor: pointer;
		left: 3%;
		bottom: 8%;
	}
}

/* h2
=============================*/
.section_head {
	position: relative;
	text-align: center;
	z-index: 10;
}

h2 {
	display: inline-block;
	padding-bottom: 1%;
	font-family: "Gothic A1", Sans-serif;
	font-weight: 600;
	font-size: 2.2rem;
	letter-spacing: 0.1em;
	background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px);
	background-size: 8px 8px;
	background-repeat: repeat-x;
	background-position: left bottom;
	padding: 0.5em 0;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	h2 {
		font-size: 1.8rem;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	h2 {
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 767px) {
	h2 {
		font-size: 1.6em;
	}
}

/* tsunagi
=============================*/
.custom-image-wrapper {
	position: absolute;
	width: 100%;
	max-width: 100%;
	margin: -10% auto;
	z-index: 1;
}

#sauna .custom-image-wrapper {
	margin: -11.5% auto;
	z-index: -1;
}

#store .custom-image-wrapper.first {
	margin: -9% auto;
	z-index: 2;
}

#plan .custom-image-wrapper {
	margin: -11% auto;
	z-index: 3;
}

.custom-image-wrapper img {
	width: 100%;
	display: block;
}

.fade-gradient {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#staff .custom-image-wrapper {
		margin: -14.5% auto;
		z-index: -1;
	}

	#recruit .custom-image-wrapper {
		position: absolute;
		width: 100%;
		max-width: 100%;
		margin: -12% auto;
		z-index: 1;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#staff .custom-image-wrapper {
		margin: -10.5% auto;
		z-index: -1;
	}
}

@media screen and (max-width: 767px) {
	#staff .custom-image-wrapper {
		margin: -15% auto;
		z-index: -1;
	}

	#sauna .custom-image-wrapper {
		margin: -11.5% auto;
		z-index: -1;
	}

	#store .custom-image-wrapper.first {
		margin: -2% auto;
		z-index: 2;
	}

	#plan .custom-image-wrapper {
		margin: -18% auto;
		z-index: 3;
	}

	#faq .custom-image-wrapper {
		margin: -22% auto;
		z-index: 3;
	}

	#access .custom-image-wrapper {
		margin: -22% auto;
		z-index: 3;
	}

	#step .custom-image-wrapper {
		margin: -24% auto;
		z-index: 3;
	}

	#recruit .custom-image-wrapper {
		margin: -18% auto;
		z-index: 3;
	}
}

/* button
=============================*/
.btn {
	text-align: center;
}

.button {
	display: inline-block;
	background: #000;
	border-radius: 300px;
	color: #fff;
	font-family: "Gothic A1", Sans-serif;
	font-size: 1.2em;
	width: 350px;
	margin: 3% auto;
	text-align: center;
	padding: 1em 0;
	text-decoration: none;
	position: relative;
	font-weight: bold;
	letter-spacing: 0.1em;
	transition: all 0.3s ease;
	background: linear-gradient(90deg, #FED652, #FBB819);
}

.button:hover {
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
}

.button::after {
	position: absolute;
	content: "";
	background: url("/wp-content/themes/banapo/img/arrow.svg") no-repeat;
	background-size: 100% auto;
	width: 15px;
	height: 15px;
	top: 40%;
	right: 20px;
}

@media screen and (max-width: 767px) {
	.button {
		font-size: 1.2em;
		width: 300px;
		margin: 3% auto;
		padding: 1em 0;
	}

	.button:hover {
		font-size: 1.2em;
		width: 300px;
		margin: 3% auto;
		padding: 1em 0;
	}
}

/* slider
=============================*/
.swiper {
	width: 100%;
	height: auto;
}

.swiper-slide {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: bold;
}

.swiper-slide img {
	width: 100%;
	height: auto;
}

.swiper-pagination {
	position: absolute;
	bottom: 5% !important;
	z-index: 10 !important;
}

.swiper-pagination-bullet {
	background-color: #bbb;
	height: 12px;
	width: 12px;
}

.swiper-pagination-bullet-active {
	background-color: #ED7D2B !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
	display: none;
}

.swiper-button-prev img,
.swiper-button-next img {
	width: 36px;
	height: auto;
}

/* main-visual
=============================*/
#fv-section {
	position: relative;
	height: 200vh;
	background: url("/wp-content/themes/banapo/img/bg_all.webp");
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

#main_visual .custom-image-wrapper {
	margin: -14% auto;
}

#photo-people {
	position: fixed;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	width: 45%;
	z-index: 2;
	opacity: 1;
	pointer-events: auto;
	transition: all 0.3s ease-out;
}

#photo-azarashi-wrapper {
	position: fixed;
	bottom: 26%;
	left: 0;
	right: 0;
	transform: translate(0, 0);
	width: 25%;
	margin: 0 auto;
	z-index: 1;
	transition: transform 0.6s ease;
	will-change: transform;
}

.mini-azarashi {
	position: fixed;
	top: 25%;
	left: -35%;
	right: 0;
	width: 40%;
	margin: 0 auto;
	z-index: 1;
	transform: translate(0, 0);
	transition: none !important;
}

#photo-azarashi-wrapper #photo-azarashi img {
	width: 100%;
	height: auto;
}

#copy-text {
	position: fixed;
	bottom: 8%;
	left: 30%;
	transform: translateX(0px);
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em;
	z-index: 3;
	font-family: "Gothic A1", sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 3.5rem;
	color: #ffffff;
	text-align: center;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease, transform 0.4s ease;

}

.char {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s ease-out;
}

.char.strong {
	font-size: 40px;
	color: #fff;
}

#underline1 {
	position: absolute;
	bottom: 0;
	width: 15%;
}

#underline2 {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 20%;
}

#icon {
	position: absolute;
	top: -45%;
	right: -10%;
	width: 13%;
}

.decoration {
	opacity: 0;
	position: absolute;
	transition: opacity 0.5s ease-out;
}

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

	15% {
		transform: rotate(-15deg);
	}

	30% {
		transform: rotate(10deg);
	}

	45% {
		transform: rotate(-10deg);
	}

	60% {
		transform: rotate(6deg);
	}

	75% {
		transform: rotate(-4deg);
	}

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

@media screen and (min-width: 768px) and (max-width: 991px) {
	#fv-section {
		height: 150vh;
	}

	#main_visual .custom-image-wrapper {
		margin: -14% auto;
	}

	#photo-people {
		position: fixed;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		width: 75%;
		z-index: 2;
		opacity: 1;
		pointer-events: auto;
		transition: all 0.3s ease-out;
	}

	#photo-azarashi-wrapper {
		position: fixed;
		bottom: 42%;
		left: 0;
		right: 0;
		width: 42%;
	}

	#photo-azarashi-wrapper #photo-azarashi-wrapper #photo-azarashi img {
		width: 100%;
		height: auto;
	}

	#copy-text {
		position: fixed;
		bottom: 15%;
		left: 18%;
		font-size: 1.6em;
		line-height: 3.5rem;
	}

	.char {
		opacity: 0;
		transform: translateY(20px);
	}

	.char.strong {
		font-size: 1.6em;
		color: #fff;
	}

	#underline1 {
		position: absolute;
		bottom: 0;
		width: 15%;
	}

	#underline2 {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 20%;
	}

	#icon {
		position: absolute;
		top: -60%;
		right: -8%;
		width: 11%;
	}

}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#fv-section {
		height: 150vh;
	}

	#photo-people {
		position: fixed;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		width: 75%;
		z-index: 2;
		opacity: 1;
		pointer-events: auto;
		transition: all 0.3s ease-out;
	}

	#photo-azarashi-wrapper {
		position: fixed;
		bottom: 40%;
		left: 0;
		right: 0;
		transform: translate(0, 0);
		width: 46%;
		margin: 0 auto;
		z-index: 1;
	}

	#copy-text {
		position: fixed;
		bottom: 18%;
		left: 18%;
		transform: translateX(0px);
		display: flex;
		flex-wrap: wrap;
		gap: 0.2em;
		z-index: 3;
		font-family: "Gothic A1", sans-serif;
		font-size: 2em;
	}

	.char.strong {
		font-size: 1.6em;
		color: #fff;
	}

	#icon {
		position: absolute;
		top: -80%;
		right: -10%;
		width: 12%;
	}

}

@media screen and (max-width: 767px) {
	#fv-section {
		height: 150vh;
		position: relative;
		padding-bottom: 0;
		z-index: 1;
	}

	#main_visual .custom-image-wrapper {
		margin: -14% auto;
	}

	#photo-people {
		position: fixed;
		top: 26%;
		width: 91%;
	}

	#photo-azarashi-wrapper {
		bottom: 40%;
		left: 0;
		right: 0;
		width: 55%;
		transform: translateY(0);
		transition: top 0.6s ease, bottom 0.6s ease, transform 0.6s ease;
	}

	#photo-azarashi-wrapper img {
		width: 100%;
		height: auto;
	}

	#photo-azarashi,
	#copy-text {}

	.mini-azarashi {
		top: 25%;
		left: -35%;
		right: 0;
		width: 40%;
	}

	#copy-text {
		position: fixed;
		bottom: 13%;
		left: 10%;
		font-size: 1em;
		line-height: 3.5rem;
	}

	.char {
		opacity: 0;
		transform: translateY(20px);
		transition: all 0.3s ease-out;
	}

	.char.strong {
		font-size: 1.6em;
		color: #fff;
	}

	#underline1 {
		position: absolute;
		bottom: 0.5em;
		width: 15%;
	}

	#underline2 {
		position: absolute;
		bottom: 0.5em;
		left: 50%;
		width: 20%;
	}

	#icon {
		position: absolute;
		top: -12%;
		right: -8%;
		width: 10%;
	}
}


/* staff
=============================*/
#staff {
	position: relative;
	width: 100%;
	margin: 4% auto;
	padding: 0 0 3%;
	background: url("/wp-content/themes/banapo/img/bg_all.webp");
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

#staff .staff_col {
	width: 85%;
	margin: 0 auto;
}

#staff .detail_col {
	width: 85%;
	margin: 0 auto;
	vertical-align: bottom;
}

#staff .staff_col .staff_box,
#staff .detail_col .staff_box {
	display: inline-block;
	width: 49%;
	margin: 0 auto;
}

#staff .staff_col .staff_box .staff_img img {
	width: 100%;
	height: auto;
}

#staff .detail_col .staff_box {
	vertical-align: bottom;
	text-align: center;
}

#staff .detail_col .name {
	font-size: 1.4rem;
	font-family: "Gothic A1", Sans-serif;
	font-weight: 600;
	letter-spacing: 0.1em;
}

#staff .detail_col .staff_box .name span {
	font-size: 1rem;
	line-height: 2rem;
}

#staff .detail_col .staff_box .name {
	font-size: 1.4rem;
	font-family: "Gothic A1", Sans-serif;
	font-weight: 600;
	letter-spacing: 0.1em;
}

#staff .detail_col .staff_box .outfit {
	font-size: 1.4rem;
	font-family: 'Chillax', sans-serif;
	font-weight: 600;
	letter-spacing: 0.1em;
}

#staff .detail_col .staff_box .name+p {
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.8rem;
	margin: 3% auto;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#staff {
		position: relative;
		width: 100%;
		margin: 4% auto;
		padding: 5% 0 3%;
		background: url("/wp-content/themes/banapo/img/bg_all.webp");
		background-position: center bottom;
		background-size: cover;
		z-index: 2;
	}

	#staff .detail_col .staff_box .outfit {
		font-size: 1.4rem;
	}

	#staff .detail_col .staff_box .name+p {
		font-size: 0.85rem;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {


	#staff .staff_col {
		width: 85%;
		margin: 0 auto;
	}

	#staff .detail_col {
		width: 85%;
		margin: 0 auto;
		vertical-align: bottom;
	}

	#staff .staff_col .staff_box,
	#staff .detail_col .staff_box {
		display: inline-block;
		width: 49%;
		margin: 0 auto;
	}

	#staff .staff_col .staff_box .staff_img img {
		width: 100%;
		height: auto;
	}

	#staff .detail_col .staff_box {
		vertical-align: bottom;
		text-align: center;
	}

	#staff .detail_col .name {
		font-size: 1.4rem;
		font-family: "Gothic A1", Sans-serif;
		font-weight: 600;
		letter-spacing: 0.1em;
	}

	#staff .detail_col .staff_box .name span {
		font-size: 1rem;
		line-height: 2rem;
	}

	#staff .detail_col .staff_box .name {
		font-size: 1.4rem;
		font-family: "Gothic A1", Sans-serif;
		font-weight: 600;
		letter-spacing: 0.1em;
	}

	#staff .detail_col .staff_box .outfit {
		font-size: 1.4rem;
		font-family: 'Chillax', sans-serif;
		font-weight: 600;
		letter-spacing: 0.1em;
	}

	#staff .detail_col .staff_box .name+p {
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 1rem;
		line-height: 1.8rem;
		margin: 3% auto;
	}
}

@media screen and (max-width: 767px) {
	#staff {
		margin: 4% auto -5%;
		padding: 10% 0 15%;
	}

	#staff .col {
		width: 90%;
		margin: 5% auto 0;
		text-align: center;
	}

	#staff .col .col_l,
	#staff .col .col_r {
		width: 90%;
		margin: 0 auto 5%;
		text-align: center;
	}

	.staff_box {
		display: block;
		width: 100%;
		margin: 5% auto 8%;
	}

	.staff_img {
		width: 80%;
		height: auto;
		margin: 0 auto 5%
	}

	.staff_img img {
		width: 100%;
		height: auto;
	}

	#staff .col .name {
		font-size: 1.6rem;
		font-family: 'Chillax', sans-serif;
		font-weight: 600;
		letter-spacing: 0.1em;
		line-height: 2rem;
	}

	#staff .col .name span {
		font-size: 1.2rem;
		font-family: "Gothic A1", Sans-serif;
		font-weight: 600;
		letter-spacing: 0.1em;
	}

	#staff .col p {
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.85rem;
		line-height: 1.6rem;
		margin: 3% auto;
	}
}


/* sauna
=============================*/
#sauna {
	position: relative;
	width: 100%;
	margin: 5% auto 0;
	padding: 0 0 10%;
	background: url("/wp-content/themes/banapo/img/bg_all.webp");
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

#sauna .sauna_col {
	width: 85%;
	margin: 5% auto 0;
}

#sauna .sauna_col .box {
	display: inline-block;
	width: 49%;
	vertical-align: middle;
	position: relative;
}

#sauna .sauna_col .box:last-child .sauna_detail {
	margin: 0 0 0 8%;
}

#sauna .sauna_name span {
	font-size: 1.4rem;
}

#sauna .sauna_detail {
	width: 90%;
}

#sauna .sauna_name {
	padding-bottom: 10px;
	font-size: 2rem;
	font-family: "Gothic A1", Sans-serif;
	font-weight: 600;
	line-height: 2.4rem;
	letter-spacing: 0.1em;
	background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px);
	background-size: 8px 8px;
	background-repeat: repeat-x;
	background-position: left bottom;
	padding: 0.5em 0;
}

#sauna .sauna_name+p {
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.8rem;
	margin: 3% 0;
}

.steam-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}

.steam-box img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
	filter: blur(10px) brightness(180%) opacity(0.6);
}

.steam-box-sauna01,
.steam-box-sauna02 {
	position: absolute;
	top: -100px;
	left: 0;
	width: 100%;
	height: 300%;
	pointer-events: none;
	z-index: 3;
	overflow: visible;
}

.steam-01 {
	position: absolute;
	bottom: 0%;
	animation: steam-float 12s infinite ease-in-out;
	opacity: 0;
}

.steam-02 {
	position: absolute;
	bottom: 0%;
	animation: steam-float 12s infinite ease-in-out;
	opacity: 0;
}

.steam-box-sauna01 .steam-01 {
	right: -10%;
	animation-delay: 0s;
}

.steam-box-sauna01 .steam-02 {
	right: -20%;
	animation-delay: 6s;
}

.steam-box-sauna02 .steam-01 {
	left: -30%;
	animation-delay: 0s;
}

.steam-box-sauna02 .steam-02 {
	left: -50%;
	animation-delay: 6s;
}

@keyframes steam-float {
	0% {
		transform: translateY(0px) translateX(0px) scale(0.8) rotate(0deg);
		opacity: 0;
	}

	10% {
		opacity: 0.2;
	}

	50% {
		transform: translateY(-200px) translateX(10px) scale(1) rotate(5deg);
		opacity: 0.4;
	}

	80% {
		transform: translateY(-400px) translateX(-10px) scale(1.2) rotate(-5deg);
		opacity: 0.2;
	}

	100% {
		transform: translateY(-600px) translateX(0px) scale(1.3) rotate(0deg);
		opacity: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#sauna {
		margin: 5% auto 0;
		padding: 0 0 10%;
	}

	#sauna .sauna_col {
		width: 90%;
		margin: 5% auto 0;
		overflow: hidden;
	}

	#sauna .sauna_col .box {
		width: 80%;
		display: block;
		position: relative;
	}

	#sauna .sauna_col:last-child .box {
		width: 80%;
		margin: 0 0 0 auto;
	}

	#sauna .sauna_col .box:last-child .sauna_detail {
		width: 90%;
		margin: 5% auto 5%;
	}

	#sauna .sauna_name span {
		font-size: 1rem;
	}

	#sauna .sauna_detail {
		width: 90%;
		margin: 0 auto;
	}

	#sauna .sauna_name {
		padding-bottom: 10px;
		font-size: 1.6rem;
		line-height: 2rem;
		border-width: 0px 0px 3px 0px;
		letter-spacing: 0.05em;
	}

	#sauna .sauna_name+p {
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.85rem;
		line-height: 1.6rem;
		margin: 3% 0;
	}

	.steam-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 3;
	}

	.steam-box img {
		width: 50%;
		height: auto;
		display: block;
		pointer-events: none;
		filter: blur(10px) brightness(180%) opacity(0.6);
	}

	.steam-box-sauna01,
	.steam-box-sauna02 {
		position: absolute;
		top: -100px;
		left: 0;
		width: 100%;
		height: 300%;
		pointer-events: none;
		z-index: 3;
		overflow: visible;
	}

	.steam-01 {
		position: absolute;
		bottom: 50%;
		right: 0;
		animation: steam-float 5s infinite ease-in-out;
		opacity: 0;
	}

	.steam-02 {
		position: absolute;
		bottom: 50%;
		animation: steam-float 5s infinite ease-in-out;
		opacity: 0;
	}

	.steam-box-sauna01 .steam-01 {
		left: -35%;
		animation-delay: 0s;
	}

	.steam-box-sauna01 .steam-02 {
		right: -30%;
		animation-delay: 6s;
	}

	.steam-box-sauna02 .steam-01 {
		left: 65%;
		animation-delay: 0s;
	}

	.steam-box-sauna02 .steam-02 {
		left: -3%;
		animation-delay: 6s;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#sauna {
		position: relative;
		width: 100%;
		margin: 5% auto 0;
		padding: 0 0 10%;
		background: url("/wp-content/themes/banapo/img/bg_all.webp");
		background-position: center bottom;
		background-size: cover;
		z-index: 2;
	}

	#sauna .sauna_col {
		width: 85%;
		margin: 5% auto 0;
	}

	#sauna .sauna_col .box {
		display: inline-block;
		width: 49%;
		vertical-align: middle;
		position: relative;
	}

	#sauna .sauna_col .box:last-child .sauna_detail {
		margin: 0 0 0 8%;
	}

	#sauna .sauna_name span {
		font-size: 1.4rem;
	}

	#sauna .sauna_detail {
		width: 90%;
	}

	#sauna .sauna_name {
		padding-bottom: 10px;
		font-size: 2rem;
		font-family: "Gothic A1", Sans-serif;
		font-weight: 600;
		line-height: 2.4rem;
		letter-spacing: 0.1em;
	}

	#sauna .sauna_name+p {
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 1rem;
		line-height: 1.8rem;
		margin: 3% 0;
	}

	.steam-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 3;
	}

	.steam-box img {
		width: 100%;
		height: auto;
		display: block;
		pointer-events: none;
		filter: blur(10px) brightness(180%) opacity(0.6);
	}

	.steam-box-sauna01,
	.steam-box-sauna02 {
		position: absolute;
		top: -100px;
		left: 0;
		width: 100%;
		height: 300%;
		pointer-events: none;
		z-index: 3;
		overflow: visible;
	}

	.steam-01 {
		position: absolute;
		bottom: 0%;
		animation: steam-float 12s infinite ease-in-out;
		opacity: 0;
	}

	.steam-02 {
		position: absolute;
		bottom: 0%;
		animation: steam-float 12s infinite ease-in-out;
		opacity: 0;
	}

	.steam-box-sauna01 .steam-01 {
		right: -10%;
		animation-delay: 0s;
	}

	.steam-box-sauna01 .steam-02 {
		right: -20%;
		animation-delay: 6s;
	}

	.steam-box-sauna02 .steam-01 {
		left: -30%;
		animation-delay: 0s;
	}

	.steam-box-sauna02 .steam-02 {
		left: -50%;
		animation-delay: 6s;
	}

	@keyframes steam-float {
		0% {
			transform: translateY(0px) translateX(0px) scale(0.8) rotate(0deg);
			opacity: 0;
		}

		10% {
			opacity: 0.2;
		}

		50% {
			transform: translateY(-200px) translateX(10px) scale(1) rotate(5deg);
			opacity: 0.4;
		}

		80% {
			transform: translateY(-400px) translateX(-10px) scale(1.2) rotate(-5deg);
			opacity: 0.2;
		}

		100% {
			transform: translateY(-600px) translateX(0px) scale(1.3) rotate(0deg);
			opacity: 0;
		}
	}

}

@media screen and (max-width: 767px) {
	#sauna {
		margin: 5% auto -9%;
		padding: 5% 0 10%;
	}

	#sauna .sauna_col {
		width: 100%;
		margin: 5% auto 0;
		overflow: hidden;
	}

	#sauna .sauna_col .box {
		width: 100%;
		display: block;
		position: relative;
	}

	#sauna .sauna_col .box:last-child .sauna_detail {
		width: 80%;
		margin: 5% auto 15%;
	}

	#sauna .sauna_name span {
		font-size: 1rem;
	}

	#sauna .sauna_detail {
		width: 90%;
		margin: 0 auto;
	}

	#sauna .sauna_name {
		padding-bottom: 10px;
		font-size: 1.6rem;
		line-height: 2rem;
		border-width: 0px 0px 3px 0px;
		letter-spacing: 0.05em;
	}

	#sauna .sauna_name+p {
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.85rem;
		line-height: 1.6rem;
		margin: 3% 0;
	}

	.steam-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 3;
	}

	.steam-box img {
		width: 50%;
		height: auto;
		display: block;
		pointer-events: none;
		filter: blur(10px) brightness(180%) opacity(0.6);
	}

	.steam-box-sauna01,
	.steam-box-sauna02 {
		position: absolute;
		top: -100px;
		left: 0;
		width: 100%;
		height: 300%;
		pointer-events: none;
		z-index: 3;
		overflow: visible;
	}

	.steam-01 {
		position: absolute;
		bottom: 50%;
		right: 0;
		animation: steam-float 5s infinite ease-in-out;
		opacity: 0;
	}

	.steam-02 {
		position: absolute;
		bottom: 50%;
		animation: steam-float 5s infinite ease-in-out;
		opacity: 0;
	}

	.steam-box-sauna01 .steam-01 {
		left: -35%;
		animation-delay: 0s;
	}

	.steam-box-sauna01 .steam-02 {
		right: -30%;
		animation-delay: 6s;
	}

	.steam-box-sauna02 .steam-01 {
		left: 65%;
		animation-delay: 0s;
	}

	.steam-box-sauna02 .steam-02 {
		left: -3%;
		animation-delay: 6s;
	}
}


/* store
=============================*/
#store {
	position: relative;
	z-index: 2;
}

#store .swiper {
	position: relative;
	z-index: 0;
}

#store .interiorSwiper {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 40px 0;
	margin: 0 auto 3.5%;
	z-index: 0;
}

.interiorSwiper .swiper-slide {
	height: auto;
	border-radius: 0;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.interiorSwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.interiorSwiper .swiper-slide-active {
	transform: scale(1.02);
	z-index: 1;
}

#store .slide-content {
	position: relative;
}

#store .text-box {
	position: absolute;
	font-size: 1.2em;
	line-height: 2rem;
	color: #fff;
	padding: 1%;
	letter-spacing: 0.05em;
}

#store .text-box.slider_txt_01 {
	bottom: 24%;
	right: 8%;
	text-align: right;
}

#store .text-box.slider_txt_02 {
	bottom: 18%;
	left: 5%;
	text-align: left;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

#store .text-box.slider_txt_03 {
	bottom: 24%;
	right: 0;
	left: 0;
	text-align: center;
}

#store .text-box.slider_txt_04 {
	top: 20%;
	left: 8%;
	text-align: left;
}

#store .text-box.slider_txt_05 {
	top: 22%;
	right: 10%;
	text-align: left;
}

#store .text-box.slider_txt_06 {
	top: 16%;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 1.8rem;
}

#store .text-box.slider_txt_06 span {
	font-size: 0.75em;
	line-height: 1.2rem;
}

#store .text-box.slider_txt_07 {
	bottom: 62%;
	left: 5%;
	text-align: left;
}

#store .text-box.slider_txt_08 {
	top: 15%;
	left: 8%;
	text-align: left;
}

#store .text-box.slider_txt_09 {
	top: 36%;
	left: 5%;
	text-align: left;
}

#store .text-box.slider_txt_10 {
	bottom: 27%;
	left: 8%;
	text-align: left;
}

#store .text-box.slider_txt_11 {
	top: 20%;
	right: 8%;
	text-align: right;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

#store .text-box.slider_txt_12 {
	top: 20%;
	left: 5%;
	text-align: left;
}

#store .text-box.slider_txt_13 {
	top: 26%;
	left: 16%;
	text-align: center;
}

#store .swiper-button-prev {
	left: 15%;
}

#store .swiper-button-next {
	right: 15%;
}

.bubble-container_l {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.bubble-container_r {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.bubble {
	position: absolute;
	bottom: -60px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(2px);
	animation: floatUp 8s linear forwards, sway 4s ease-in-out infinite, pulse 3s ease-in-out infinite;
	opacity: 0.6;
}

@keyframes floatUp {
	0% {
		transform: translateY(0);
		opacity: 0.6;
	}

	80% {
		opacity: 0.3;
	}

	100% {
		transform: translateY(-100%);
		opacity: 0;
	}
}

@keyframes sway {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(10px);
	}
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#store .interiorSwiper {
		overflow: hidden;
		position: relative;
		width: 100%;
		padding: 3% 0;
		margin: 0 auto 3.5%;
		z-index: 0;
	}

	#store .swiper-button-prev {
		left: 5%;
	}

	#store .swiper-button-next {
		right: 5%;
	}

	#store .text-box {
		font-size: 1.2em;
		line-height: 2rem;
		padding: 1%;
	}

	#store .text-box.slider_txt_01 {
		bottom: 17%;
		right: 8%;
		text-align: right;
	}

	#store .text-box.slider_txt_02 {
		bottom: 15%;
		left: 12%;
		text-align: left;
		text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
		font-size: 1em;
		line-height: 1.8rem;
	}

	#store .text-box.slider_txt_03 {
		bottom: 24%;
		right: 8%;
	}

	#store .text-box.slider_txt_04 {
		top: 18%;
		left: 10%;
		text-align: left;
	}

	#store .text-box.slider_txt_05 {
		top: 30%;
		right: 8%;
		text-align: left;
	}

	#store .text-box.slider_txt_06 {
		top: 16%;
		left: 0;
		right: 0;
		text-align: center;
	}

	#store .text-box.slider_txt_07 {
		top: 60%;
		left: 8%;
		text-align: left;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
	}

	#store .text-box.slider_txt_08 {
		top: 13%;
		left: 5%;
		text-align: left;
	}

	#store .text-box.slider_txt_09 {
		bottom: 0;
		top: 65%;
		left: 8%;
		text-align: left;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
	}

	#store .text-box.slider_txt_10 {
		top: 70%;
		left: 8%;
		text-align: left;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
	}

	#store .text-box.slider_txt_11 {
		top: 20%;
		left: 10%;
		text-align: right;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
	}

	#store .text-box.slider_txt_12 {
		top: 18%;
		left: 8%;
		text-align: left;
	}

	#store .text-box.slider_txt_13 {
		top: 26%;
		left: 10%;
		text-align: center;
	}

}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#store .text-box {
		font-size: 1em;
	}

	#store .text-box.slider_txt_02 {
		line-height: 1.8em;
	}

}

@media screen and (max-width: 767px) {
	#store {
		padding: 5% 0;
		position: relative;
		z-index: 2;
	}

	#store .interiorSwiper {
		padding: 4% 0;
		margin: 0 auto 3.5%;
	}

	#store .text-box {
		font-size: 0.85em;
		line-height: 1.4rem;
		padding: 1%;
	}

	#store .text-box.slider_txt_01 {
		bottom: 17%;
		right: 8%;
		text-align: right;
	}

	#store .text-box.slider_txt_02 {
		bottom: 15%;
		left: 12%;
		text-align: left;
		text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
		font-size: 0.75em;
		line-height: 1.1rem;
	}

	#store .text-box.slider_txt_03 {
		bottom: 24%;
		right: 8%;
	}

	#store .text-box.slider_txt_04 {
		top: 12%;
		left: 13%;
		text-align: left;
	}

	#store .text-box.slider_txt_05 {
		top: 24%;
		right: 2%;
		text-align: left;
	}

	#store .text-box.slider_txt_06 {
		top: 14%;
		left: 0;
		right: 0;
		text-align: center;
		line-height: 1.4rem;
	}

	#store .text-box.slider_txt_07 {
		top: 60%;
		left: 8%;
		text-align: left;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	}

	#store .text-box.slider_txt_08 {
		top: 7%;
		left: 5%;
		text-align: left;
	}

	#store .text-box.slider_txt_09 {
		bottom: 0;
		top: 63%;
		right: 8%;
		text-align: left;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	}

	#store .text-box.slider_txt_10 {
		top: 70%;
		left: 5%;
		text-align: left;
	}

	#store .text-box.slider_txt_11 {
		top: 17%;
		left: 10%;
		text-align: right;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
	}

	#store .text-box.slider_txt_12 {
		top: 12%;
		left: 8%;
		text-align: left;
	}

	#store .text-box.slider_txt_13 {
		top: 26%;
		left: 10%;
		text-align: center;
	}

	#store .swiper-button-prev {
		left: 3%;
	}

	#store .swiper-button-next {
		right: 3%;
	}
}

/* plan
=============================*/
#plan {
	position: relative;
	width: 100%;
	margin: -2.5% auto 0;
	padding: 0 0 10%;
	background: url("/wp-content/themes/banapo/img/bg_plan.webp") no-repeat;
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

.plan-section {
	position: relative;
	width: 65%;
	margin: 0 auto;
	color: #fff;
	padding: 5% 0 0;
	font-family: "Gothic A1", sans-serif;
	z-index: 10;
}

.plan-title {
	font-size: 2rem;
	text-align: center;
}

.plan-lead {
	position: relative;
	text-align: center;
	font-size: 2rem;
	font-weight: 600;
}

.plan-lead #underline3 {
	position: absolute;
	width: 25%;
	left: 32%;
	bottom: 50%;
}

.plan-lead span {
	padding: 0 0 0 1%;
	font-family: 'Chillax', sans-serif;
	font-size: 2em;
	font-weight: 600;
	color: #333;
	line-height: 2.6rem;
	color: #fff;
}

.plan-lead span .en {
	padding: 0 0.5% 0 0;
	font-size: 3rem;
}

.plan-lead small {
	display: block;
	padding: 4% 0;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1rem;
}

.plan-boxes {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.plan-box {
	background: #fff;
	color: #333;
	padding: 0 3% 2% 3%;
	border-radius: 10px;
	width: calc(50% - 20px);
}

.plan-box.full {
	padding: 0 4% 3% 4%;
}

.plan-box ul {
	text-align: center;
}

.plan-box li {
	display: block;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: 'Chillax', sans-serif;
	font-size: 2em;
	font-weight: 600;
	line-height: 2.8rem;
}

.plan-box .font_number {
	font-family: 'Chillax', sans-serif;
	font-size: 1em;
	font-weight: 600;
	color: #333;
	line-height: 2.6rem;
}

.plan-box .font_min {
	font-family: 'GothicA1', sans-serif;
	font-size: 0.75em;
	font-weight: 600;
	color: #333;
	line-height: 2.6rem;
}

.plan-box .dots {
	padding: 0 2% 0 0;
	font-size: 0.6em;
	letter-spacing: -0.5em;
}

.plan-box.full .dots {
	padding: 0 1% 0 0;
}

.plan-box.full {
	width: 100%;
	text-align: center;
}

.plan-box.full .comment {
	position: relative;
	padding: 1% 0 0;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	text-align: center;
}

.plan-box small {
	display: block;
	padding: 4% 0;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 0.85rem;
}

.plan-heading {
	position: relative;
	padding: 8% 0 3%;
	font-family: "Gothic A1", Sans-serif;
	font-weight: 600;
	color: #FFFFFF;
	font-size: 1.6rem;
	margin-bottom: 10px;
	text-align: center;
}

.plan-box.full .plan-heading {
	padding: 4% 0 2%;
	line-height: 1.6rem;
}

.plan-box.full .plan-heading span {
	font-size: 0.75em;
}

.plan-heading.orange {
	color: #ED7D2B;
	border-bottom: 2px dotted #ED7D2B;
}

.plan-heading.orange:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 100%;
	margin: 0 auto;
	border-top: #ED7D2B 8px solid;
}

.plan-heading.blue {
	color: #3087A3;
	border-bottom: 2px dotted #3087A3;
}

.plan-heading.blue:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 100%;
	margin: 0 auto;
	border-top: #3087A3 8px solid;
}

.plan-heading.purple {
	color: #6161B8;
	border-bottom: 2px dotted #6161B8;
}

.plan-heading.purple:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 100%;
	margin: 0 auto;
	border-top: #6161B8 8px solid;
}

.plan-heading.yellow {
	color: #C09D34;
	border-bottom: 2px dotted #C09D34;
}

.plan-heading.yellow:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 100%;
	margin: 0 auto;
	border-top: #C09D34 8px solid;
}

.plan-heading.red {
	color: #E15B5A;
	border-bottom: 2px dotted #E15B5A;
}

.plan-heading.red:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 100%;
	margin: 0 auto;
	border-top: #E15B5A 8px solid;
}

.plan-heading.lightblue {
	color: #6BBFD2;
	border-bottom: 2px dotted #6BBFD2;
}

.plan-heading.lightblue:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 100%;
	margin: 0 auto;
	border-top: #6BBFD2 8px solid;
}

.plan-heading.gray {
	color: #7B7B7B;
	border-bottom: 2px dotted #7B7B7B;
}

.plan-heading.gray:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 30%;
	height: 100%;
	margin: 0 auto;
	border-top: #7B7B7B 8px solid;
}

.service-items {
	display: flex;
	gap: 20px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.service-item {
	flex: 1 1 30%;
	text-align: center;
}

.service-item .price {
	flex: 1 1 30%;
	text-align: center;
	padding: 0 0 0 1%;
	font-family: 'Chillax', sans-serif;
	font-size: 1.4em;
	font-weight: 600;
	color: #333;
	line-height: 1rem;
}

.service-item .font_min {
	font-size: 1em;
}

.service-item img {
	height: 100px;
	margin-bottom: 5%;
}

.service-item dl {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 36%;
}

.service-item dt,
.service-item dd {
	margin: 0;
	padding: 5px 0;
}

.service-item dt {
	padding: 0;
	font-family: "Gothic A1", Sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.6rem;
}

.service-item dt.price {
	font-family: "Gothic A1", Sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.6rem;
}

.service-item dd {
	display: inline-block;
	padding: 0 3%;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 0.85rem;
	line-height: 1.2rem;
}

.modal-btn {
	position: relative;
	left: 0;
	right: 0;
	width: 40%;
	margin: 1em auto 0;
	padding: 1em 3em;
	text-align: center;
	font-weight: 600;
	border-radius: 300px;
}

.modal {
	display: none;
	position: fixed;
	z-index: 99999 !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);

	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content-wrapper {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content {
	width: 75%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
}

.modal-close {
	position: absolute;
	top: -20px;
	right: -20px;
	font-size: 32px;
	color: white;
	cursor: pointer;
	z-index: 100000;
	/* モーダルの上にくるように */
}

.modal-btn.ticket {
	color: #E15B5A;
	border: 1px solid #E15B5A;
	transition: all 0.3s ease;
}

.modal-btn.ticket:hover {
	box-shadow: 0 0 10px #E16B5A;
	transition: all 0.3s ease;
}

.modal-btn.company {
	color: #6BBFD2;
	border: 1px solid #6BBFD2;
}

.modal-btn.company:hover {
	box-shadow: 0 0 10px #6BBFD2;
	transition: all 0.3s ease;
}

.modal-btn.ticket::after,
.modal-btn.company::after {
	position: absolute;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f08e";
	position: absolute;
	right: 1em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f08e";
}

#plan .note{
	font-size: 1em;
    color: #fff;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 500;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#plan {
		margin: -2.5% auto 0;
		padding: 0 0 10%;
	}

	.plan-section {
		width: 80%;
		margin: 0 auto;
		padding: 5% 0 0;
	}

	.plan-title {
		font-size: 2rem;
		text-align: center;
	}

	.plan-lead {
		font-size: 1.6rem;
	}

	.plan-lead #underline3 {
		width: 23%;
		left: 32%;
		bottom: 50%;
	}

	.plan-lead span {
		padding: 0 0 0 1%;
		font-size: 1.8em;
		line-height: 2rem;
	}

	.plan-lead span .en {
		padding: 0 0.5% 0 0;
		font-size: 2rem;
	}

	.plan-lead small {
		padding: 4% 0;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-size: 0.85rem;
	}

	.plan-box li {
		font-size: 1.4em;
		font-weight: 600;
		line-height: 2rem;
	}

	.plan-box .font_number {
		font-size: 1em;
		font-weight: 600;
		line-height: 1.4rem;
	}

	.plan-box .font_min {
		font-size: 0.75em;
		line-height: 1.6rem;
	}

	.plan-box .dots {
		padding: 0 2% 0 0;
		font-size: 0.6em;
		letter-spacing: -0.5em;
	}

	.plan-box.full .comment {
		padding: 1% 0 0;
		font-size: 0.85rem;
	}

	.plan-box small {
		padding: 4% 0;
		font-size: 0.85rem;
	}

	.plan-heading {
		padding: 8% 0 3%;
		font-size: 1.2rem;
		margin-bottom: 10px;
	}

	.plan-box.full .plan-heading {
		padding: 4% 0 2%;
		line-height: 1.4rem;
	}

	.plan-box.full .plan-heading span {
		font-size: 0.75em;
	}

	.service-item dl {
		height: 36%;
	}

	.service-item dt {
		font-size: 0.85rem;
		line-height: 1.6rem;
	}

	.service-item dt.price {
		font-size: 0.8rem;
		line-height: 1.6rem;
	}

	.service-item dd {
		padding: 0 3%;
		font-size: 0.65rem;
		line-height: 1rem;
	}

	.modal-content {
		width: 80%;
		height: auto;
	}

	.modal-btn {
		width: 35%;
		margin: 1em auto 0;
		padding: 0.65em 3em;
		font-size: 0.85rem;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#plan {
		margin: -2.5% auto 0;
		padding: 0 0 10%;
	}

	.plan-section {
		width: 80%;
		margin: 0 auto;
		padding: 5% 0 0;
	}

	.plan-title {
		font-size: 2rem;
		text-align: center;
	}

	.plan-lead {
		font-size: 1.6rem;
	}

	.plan-lead #underline3 {
		width: 23%;
		left: 32%;
		bottom: 50%;
	}

	.plan-lead span {
		padding: 0 0 0 1%;
		font-size: 1.8em;
		line-height: 2rem;
	}

	.plan-lead span .en {
		padding: 0 0.5% 0 0;
		font-size: 2rem;
	}

	.plan-lead small {
		padding: 4% 0;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-size: 0.85rem;
	}

	.plan-box li {
		font-size: 1.4em;
		font-weight: 600;
		line-height: 2rem;
	}

	.plan-box .font_number {
		font-size: 1em;
		font-weight: 600;
		line-height: 1.4rem;
	}

	.plan-box .font_min {
		font-size: 0.75em;
		line-height: 1.6rem;
	}

	.plan-box .dots {
		padding: 0 2% 0 0;
		font-size: 0.6em;
		letter-spacing: -0.5em;
	}

	.plan-box.full .comment {
		padding: 1% 0 0;
		font-size: 0.85rem;
	}

	.plan-box small {
		padding: 4% 0;
		font-size: 0.85rem;
	}

	.plan-heading {
		padding: 8% 0 3%;
		font-size: 1.4rem;
		margin-bottom: 10px;
	}

	.plan-box.full .plan-heading {
		padding: 4% 0 2%;
		line-height: 1.4rem;
	}

	.plan-box.full .plan-heading span {
		font-size: 0.75em;
	}

	.service-item dl {
		height: 36%;
	}

	.service-item dt {
		font-size: 1rem;
		line-height: 1.6rem;
	}

	.service-item dt.price {
		font-size: 0.8rem;
		line-height: 1.6rem;
	}

	.service-item dd {
		padding: 0 3%;
		font-size: 0.85rem;
		line-height: 1.2rem;
	}

	.modal-content {
		width: 80%;
		height: auto;
	}

	.modal-btn {
		width: 35%;
		margin: 1em auto 0;
		padding: 0.65em 3em;
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 767px) {
	#plan {
		margin: -8.5% auto 0;
		padding: 8% 0 10%;
	}

	.plan-section {
		width: 85%;
		padding: 5% 0 0;
	}

	.plan-title {
		font-size: 1.6em;
	}

	.plan-lead {
		font-size: 1.4rem;
	}

	.plan-lead #underline3 {
		width: 35%;
		left: 22%;
		bottom: 55%;
	}

	.plan-lead span {
		padding: 0 0 0 1%;
		font-size: 1.8em;
		line-height: 2.6rem;
		color: #fff;
		letter-spacing: 0.03em;
	}

	.plan-lead span .en {
		font-size: 1.8rem;
	}

	.plan-lead small {
		padding: 0.5em 0 3em;
		font-size: 0.85rem;
	}

	.plan-boxes {
		gap: 20px;
	}

	.plan-box {
		padding: 0 1em 1em;
		width: 100%;
	}

	.plan-box.full {
		padding: 0 1em 2em;
	}

	.plan-box li {
		line-height: 1.6rem;
	}

	.plan-box:nth-child(3) li .font_min {
		font-size: 0.5em;
	}

	.plan-box:nth-child(4) li {
		line-height: 1.6rem;
		padding: 0.5em 0;
		border-bottom: 2px dotted #7B7B7B;
	}

	.plan-box:nth-child(4) li:last-child {
		padding: 0.5em 0 0;
		border-bottom: none;
	}

	.plan-box .font_number {
		font-size: 0.85em;
		line-height: 2rem;
	}

	.plan-box .price {
		font-size: 0.85em;
		line-height: 2.2rem;
	}

	.plan-box .font_min {
		font-family: 'GothicA1', sans-serif;
		font-size: 0.55em;
		font-weight: 600;
		color: #333;
		line-height: 1.8rem;
		padding: 0 0.1em;
	}

	.plan-box .dots {
		padding: 0 2% 0 0;
		font-size: 0.6em;
		letter-spacing: -0.5em;
	}

	.plan-box.full .dots {
		padding: 0 1% 0 0;
	}

	.plan-box.full {
		width: 100%;
		text-align: center;
	}

	.plan-box.full .comment {
		position: relative;
		padding: 0.5em 0 0;
		font-size: 1rem;
		line-height: 1.4rem;
		font-weight: 600;
		text-align: center;
	}

	.plan-box small {
		display: block;
		padding: 4% 0;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.85rem;
		text-align: center;
	}

	.plan-heading {
		position: relative;
		padding: 8% 0 3%;
		font-family: "Gothic A1", Sans-serif;
		font-weight: 600;
		color: #FFFFFF;
		font-size: 1.4rem;
		margin-bottom: 10px;
		text-align: center;
	}

	.plan-box.full .plan-heading {
		padding: 1.5em 0 1em;
		line-height: 1.4rem;
	}

	.plan-box.full .plan-heading span {
		font-size: 0.65em;
	}

	.plan-heading.orange {
		color: #ED7D2B;
		border-bottom: 2px dotted #ED7D2B;
	}

	.plan-heading.orange:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0 auto;
		border-top: #ED7D2B 8px solid;
	}

	.plan-heading.blue {
		color: #3087A3;
		border-bottom: 2px dotted #3087A3;
	}

	.plan-heading.blue:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0 auto;
		border-top: #3087A3 8px solid;
	}

	.plan-heading.purple {
		color: #6161B8;
		border-bottom: 2px dotted #6161B8;
	}

	.plan-heading.purple:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0 auto;
		border-top: #6161B8 8px solid;
	}

	.plan-heading.yellow {
		color: #C09D34;
		border-bottom: 2px dotted #C09D34;
	}

	.plan-heading.yellow:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0 auto;
		border-top: #C09D34 8px solid;
	}

	.plan-heading.red {
		color: #E15B5A;
		border-bottom: 2px dotted #E15B5A;
	}

	.plan-heading.red:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0 auto;
		border-top: #E15B5A 8px solid;
	}

	.plan-heading.lightblue {
		color: #6BBFD2;
		border-bottom: 2px dotted #6BBFD2;
	}

	.plan-heading.lightblue:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0 auto;
		border-top: #6BBFD2 8px solid;
	}

	.plan-heading.gray {
		color: #7B7B7B;
		border-bottom: none;
	}

	.plan-heading.gray:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0 auto;
		border-top: #7B7B7B 8px solid;
	}

	.service-items {
		display: flex;
		gap: 20px;
		margin-top: 0;
		flex-wrap: wrap;
	}

	.service-item {
		width: 100%;
		padding: 0 0 1.5em;
		flex: none;
		text-align: center;
		border-bottom: 2px dotted #7B7B7B;
	}

	.service-item:last-child {
		border-bottom: none;
	}

	.service-item .price {
		flex: 1 1 30%;
		text-align: center;
		padding: 0 0 0 1%;
		font-family: 'Chillax', sans-serif;
		font-size: 1.4em;
		font-weight: 600;
		color: #333;
		line-height: 1rem;
	}

	.service-item .font_min {
		font-size: 1em;
	}

	.service-item img {
		height: 120px;
		margin-bottom: 5%;
	}

	.service-item dl {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 36%;
	}

	.service-item dt,
	.service-item dd {
		margin: 0;
		padding: 5px 0;
	}

	.service-item dt {
		padding: 0 0 0.5em;
		font-size: 1.2rem;
		font-family: "Gothic A1", Sans-serif;
		font-weight: 600;
		text-align: center;
		line-height: 1.6rem;
	}

	.service-item dt.price {
		font-family: "Gothic A1", Sans-serif;
		font-size: 0.8rem;
		font-weight: 600;
		text-align: center;
		line-height: 1.6rem;
	}

	.service-item dd {
		padding: 0;
		font-size: 1rem;
		line-height: 1.6rem;
	}

	.modal {
		display: none;
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-content-wrapper {
		position: relative;
		max-width: 90%;
		max-height: 90%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-content {
		width: 95%;
		height: auto;
	}

	.modal-close {
		position: absolute;
		top: -30%;
		right: 2%;
		font-size: 32px;
		color: white;
		cursor: pointer;
		z-index: 100000;
	}

	.modal-btn {
		position: relative;
		left: 0;
		right: 0;
		width: 70%;
		margin: 1em auto 0;
		padding: 1em 3em;
		text-align: center;
		font-weight: 600;
		border-radius: 300px;
	}

	.modal-btn.ticket {
		color: #E15B5A;
		border: 1px solid #E15B5A;
		transition: all 0.3s ease;
	}

	.modal-btn.ticket:hover {
		box-shadow: 0 0 10px #E16B5A;
		transition: all 0.3s ease;
	}

	.modal-btn.company {
		color: #6BBFD2;
		border: 1px solid #6BBFD2;
	}

	.modal-btn.company:hover {
		box-shadow: 0 0 10px #6BBFD2;
		transition: all 0.3s ease;
	}

	.modal-btn.ticket::after,
	.modal-btn.company::after {
		position: absolute;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f08e";
		position: absolute;
		right: 1em;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f08e";
	}

	#plan .note{
	font-size: 0.85em;
}
}

/* step
=============================*/
#step {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 8%;
	background: url("/wp-content/themes/banapo/img/bg_all.webp");
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

#step .swiper-slide {
	margin: 5% auto 0;
}

#step .step_icon {
	width: 12%;
	margin: 0 auto;
	padding: 0.3em;
	text-align: center;
	background-color: #ED7D2B;
	border-radius: 300px;
	font-family: 'Chillax', sans-serif;
	font-size: 1.4em;
	font-weight: 500;
	letter-spacing: 0.05em;
}

#step .col {
	width: 60%;
	margin: 0 auto;
}

#step .img_box,
#step .txt_box {
	display: inline-block;
	width: 49%;
	margin: 0 0 0 5%;
	vertical-align: middle;
}

#step .img_box {
	position: relative;
	z-index: 0;
	width: 42%;
	height: auto;
	margin: 40px auto;
	border-radius: 50%;
}

#step .img_box img {
	width: 100%;
	height: auto;
}

#step .img_box::before,
#step .img_box::after {
	position: absolute;
	top: 50%;
	left: 62%;
	display: block;
	content: '';
	border-radius: 50%;
}

#step .img_box::before {
	z-index: -1;
	width: 101%;
	height: 101%;
	margin-top: -50%;
	margin-left: -60%;
	-webkit-animation: wb 6s infinite linear;
	animation: wb 6s infinite linear;
	background-color: rgb(237 125 43 / 30%);
}

#step .img_box::after {
	z-index: -2;
	width: 101%;
	height: 101%;
	margin-top: -50%;
	margin-left: -63%;
	-webkit-animation: wb 7s infinite linear reverse;
	animation: wb 7s infinite linear reverse;
	background-color: rgb(226 213 68 / 50%);
}

@-webkit-keyframes wb {
	0% {
		-webkit-transform: rotate(0deg);
		border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
	}

	20% {
		-webkit-transform: rotate(72deg);
		border-radius: 70% 58% 58% 58%/70% 58% 58% 58%;
	}

	40% {
		-webkit-transform: rotate(144deg);
		border-radius: 58% 60% 58% 58%/58% 60% 58% 58%;
	}

	60% {
		-webkit-transform: rotate(216deg);
		border-radius: 58% 58% 65% 58%/58% 58% 65% 58%;
	}

	80% {
		-webkit-transform: rotate(288deg);
		border-radius: 58% 58% 58% 70%/58% 58% 58% 70%;
	}

	100% {
		-webkit-transform: rotate(360deg);
		border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
	}
}

@keyframes wb {
	0% {
		transform: rotate(0deg);
		border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
	}

	20% {
		transform: rotate(72deg);
		border-radius: 70% 58% 58% 58%/70% 58% 58% 58%;
	}

	40% {
		transform: rotate(144deg);
		border-radius: 58% 60% 58% 58%/58% 60% 58% 58%;
	}

	60% {
		transform: rotate(216deg);
		border-radius: 58% 58% 65% 58%/58% 58% 65% 58%;
	}

	80% {
		transform: rotate(288deg);
		border-radius: 58% 58% 58% 70%/58% 58% 58% 70%;
	}

	100% {
		transform: rotate(360deg);
		border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
	}
}

#step .txt_box {
	width: 50%;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.8rem;
}

#step .txt_box .head {
	margin: 0 auto 3%;
	font-family: "Gothic A1", Sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 1.4rem;
	line-height: 1.8rem;
}

#step .swiper-button-next {
	right: 20%;
}

#step .swiper-button-prev {
	display: none;
}

#step .swiper-button-prev img,
#step .swiper-button-next img {
	width: 60px;
	height: auto;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#step .step_icon {
		width: 15%;
		margin: 0 auto;
		padding: 0.5em;
		font-size: 1em;
	}

	#step .txt_box .head {
		font-size: 1.2rem;
	}

	#step .txt_box {
		width: 50%;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.85rem;
		line-height: 1.8rem;
	}

	#step .col {
		width: 75%;
		margin: 0 auto;
	}

	#step .swiper-button-next {
		right: 5%;
	}

	#step .swiper-button-prev img,
	#step .swiper-button-next img {
		width: 45px;
		height: auto;
	}

	#step .img_box {
		margin: 1em auto;
	}


}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#step .step_icon {
		width: 15%;
		margin: 0 auto;
		padding: 0.5em;
		font-size: 1em;
	}

	#step .txt_box .head {
		font-size: 1.2rem;
	}

	#step .txt_box {
		width: 50%;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.85rem;
		line-height: 1.8rem;
	}

	#step .col {
		width: 75%;
		margin: 0 auto;
	}

	#step .swiper-button-next {
		right: 5%;
	}

	#step .swiper-button-prev img,
	#step .swiper-button-next img {
		width: 45px;
		height: auto;
	}

	#step .img_box {
		margin: 1em auto;
	}

}

@media screen and (max-width: 767px) {
	#step {
		padding: 15% 0 8%;
	}

	#step .swiper-slide {
		margin: 10% auto 0;
	}

	#step .step_icon {
		width: 30%;
		margin: 0 auto;
		padding: 0.5em;
		text-align: center;
		background-color: #ED7D2B;
		border-radius: 300px;
		font-family: 'Chillax', sans-serif;
		font-size: 1em;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	#step .col {
		width: 85%;
		margin: 0 auto;
	}

	#step .img_box,
	#step .txt_box {
		display: block;
		width: 49%;
		margin: 0 auto;
	}

	#step .img_box {
		position: relative;
		z-index: 0;
		width: 70%;
		height: auto;
		margin: 2em auto 1.5em;
		border-radius: 50%;
	}

	#step .img_box img {
		width: 100%;
		height: auto;
	}

	#step .img_box::before,
	#step .img_box::after {
		position: absolute;
		top: 50%;
		left: 62%;
		display: block;
		content: '';
		border-radius: 50%;
	}

	#step .img_box::before {
		z-index: -1;
		width: 101%;
		height: 101%;
		margin-top: -50%;
		margin-left: -60%;
		-webkit-animation: wb 6s infinite linear;
		animation: wb 6s infinite linear;
		background-color: rgb(237 125 43 / 30%);
	}

	#step .img_box::after {
		z-index: -2;
		width: 101%;
		height: 101%;
		margin-top: -50%;
		margin-left: -63%;
		-webkit-animation: wb 7s infinite linear reverse;
		animation: wb 7s infinite linear reverse;
		background-color: rgb(226 213 68 / 50%);
	}

	@-webkit-keyframes wb {
		0% {
			-webkit-transform: rotate(0deg);
			border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
		}

		20% {
			-webkit-transform: rotate(72deg);
			border-radius: 70% 58% 58% 58%/70% 58% 58% 58%;
		}

		40% {
			-webkit-transform: rotate(144deg);
			border-radius: 58% 60% 58% 58%/58% 60% 58% 58%;
		}

		60% {
			-webkit-transform: rotate(216deg);
			border-radius: 58% 58% 65% 58%/58% 58% 65% 58%;
		}

		80% {
			-webkit-transform: rotate(288deg);
			border-radius: 58% 58% 58% 70%/58% 58% 58% 70%;
		}

		100% {
			-webkit-transform: rotate(360deg);
			border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
		}
	}

	@keyframes wb {
		0% {
			transform: rotate(0deg);
			border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
		}

		20% {
			transform: rotate(72deg);
			border-radius: 70% 58% 58% 58%/70% 58% 58% 58%;
		}

		40% {
			transform: rotate(144deg);
			border-radius: 58% 60% 58% 58%/58% 60% 58% 58%;
		}

		60% {
			transform: rotate(216deg);
			border-radius: 58% 58% 65% 58%/58% 58% 65% 58%;
		}

		80% {
			transform: rotate(288deg);
			border-radius: 58% 58% 58% 70%/58% 58% 58% 70%;
		}

		100% {
			transform: rotate(360deg);
			border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
		}
	}

	#step .txt_box {
		width: 100%;
		height: auto;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.85rem;
		line-height: 1.6rem;
		text-align: center;
	}

	#step .txt_box .head {
		margin: 0 auto 3%;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 600;
		font-style: normal;
		font-size: 1.4rem;
		line-height: 1.8rem;
	}

	#step .swiper-button-next {
		right: 5%;
	}

	#step .swiper-button-prev {
		display: none;
	}

	#step .swiper-button-prev img,
	#step .swiper-button-next img {
		width: 45px;
		height: auto;
	}
}

/* faq
=============================*/
#faq {
	position: relative;
	width: 100%;
	margin: -1% auto 0;
	padding: 0 0 6%;
	background: url("/wp-content/themes/banapo/img/bg_all.webp");
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

.training_area,
.sauna_area {
	width: 75%;
	margin: 5% auto;
}

.training_area .head,
.sauna_area .head {
	margin: 0 auto 2%;
	font-family: "Gothic A1", Sans-serif;
	font-style: normal;
	font-size: 1.4rem;
	line-height: 1.8rem;
}

.accordion-006 {
	max-width: 100%;
	margin-bottom: 7px;
	background-color: #ffffff;
	border-radius: 15px;
	margin: 0 auto 2%;
}

.accordion-006 summary {
	display: flex;
	justify-content: left;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	color: #333333;
	font-weight: 600;
	cursor: pointer;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1.8rem;
	flex-direction: row;
}

.accordion-006 .icon {
	width: 45px;
	margin: 0 1.5% 0 0;
	display: flex;
}

.accordion-006 .icon img {
	width: 100%;
	height: auto;
}

.accordion-006 summary::-webkit-details-marker {
	display: none;
}

.accordion-006 summary::before,
.accordion-006 summary::after {
	width: 3px;
	height: .9em;
	border-radius: 5px;
	background-color: #ED7D2B;
	content: '';
}

.sauna_area .accordion-006 summary::before,
.sauna_area .accordion-006 summary::after {
	background-color: #3087A3;
}

.accordion-006 summary::before {
	position: absolute;
	right: 2.5em;
	rotate: 90deg;
}

.accordion-006 summary::after {
	position: absolute;
	right: 2.5em;
	transition: rotate .3s;
}

.accordion-006[open] summary::after {
	rotate: 90deg;
}

.accordion-006 p {
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 1.5em 0 1.5em;
	color: #333333;
	transition: transform .5s, opacity .5s;
}

.accordion-006[open] p {
	display: flex;
	justify-content: left;
	align-items: anchor-center;
	width: 90%;
	margin: 0 auto;
	transform: none;
	opacity: 1;
	line-height: 2rem;
	border-top: 1px dotted #ED7D2B;
	font-size: 1.2em;
}

.sauna_area .accordion-006[open] p {
	border-top: 1px dotted #3087A3;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#faq {
		margin: -1% auto 0;
		padding: 0 0 6%;
	}

	.training_area,
	.sauna_area {
		width: 80%;
		margin: 6% auto;
	}

	.training_area .head,
	.sauna_area .head {
		margin: 0 auto 2%;
		line-height: 1.8rem;
	}

	.accordion-006 {
		max-width: 100%;
		margin-bottom: 7px;
		margin: 0 auto 2%;
	}

	.accordion-006 summary {
		padding: 1em 2em;
		font-weight: 600;
		cursor: pointer;
		font-size: 0.85em;
		line-height: 1.8rem;
	}

	.accordion-006 .icon {
		width: 35px;
		margin: 0 1.5% 0 0;
	}

	.accordion-006 p {
		padding: 1.5em 0 1.5em;
	}

	.accordion-006[open] p {
		width: 90%;
		margin: 0 auto;
		line-height: 1.4rem;
		font-size: 0.85em;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#faq {
		margin: -1% auto 0;
		padding: 0 0 6%;
	}

	.training_area,
	.sauna_area {
		width: 75%;
		margin: 6% auto;
	}

	.training_area .head,
	.sauna_area .head {
		margin: 0 auto 2%;
		line-height: 1.8rem;
	}

	.accordion-006 {
		max-width: 100%;
		margin-bottom: 7px;
		margin: 0 auto 2%;
	}

	.accordion-006 summary {
		padding: 1em 2em;
		font-weight: 600;
		cursor: pointer;
		font-size: 1em;
		line-height: 1.8rem;
	}

	.accordion-006 .icon {
		width: 35px;
		margin: 0 1.5% 0 0;
	}

	.accordion-006 p {
		padding: 1.5em 0 1.5em;
	}

	.accordion-006[open] p {
		width: 90%;
		margin: 0 auto;
		line-height: 1.4rem;
		font-size: 0.85em;
	}
}

@media screen and (max-width: 767px) {
	#faq {
		margin: -1% auto 0;
		padding: 15% 0 6%;
	}

	.training_area,
	.sauna_area {
		width: 90%;
		margin: 2em auto;
	}

	.training_area .head,
	.sauna_area .head {
		margin: 0 auto 2%;
		font-weight: 200;
		font-style: normal;
		font-size: 1.2rem;
		line-height: 2.6rem;
	}

	.accordion-006 {
		margin: 0 auto 1em;
	}

	.accordion-006 summary {
		padding: 1em 1em;
		font-size: 1rem;
		line-height: 1.2rem;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-weight: 600;
	}

	.accordion-006 .icon {
		width: 30px;
		margin: 0 1.5% 0 0;
	}

	.accordion-006 .icon img {
		width: 30px;
		height: 30px;
	}

	.accordion-006 summary::-webkit-details-marker {
		display: none;
	}

	.accordion-006 summary::before,
	.accordion-006 summary::after {
		width: 3px;
		height: .9em;
		border-radius: 5px;
	}

	.accordion-006 p {
		padding: 1em 0 1em;
	}

	.accordion-006[open] p {
		width: 92%;
		line-height: 1.4rem;
		font-size: 1rem;
	}
}

/* access
=============================*/
#access {
	position: relative;
	width: 100%;
	margin: -1% auto 0;
	padding: 0 0 10%;
	background: url("/wp-content/themes/banapo/img/bg_all.webp");
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

#access .map {
	margin: 5% auto;
	overflow: hidden;
}

.info {
	text-align: center;
}

.info table {
	margin: -3em auto 2em;
	border-collapse: collapse;
	font-family: "Gothic A1", Sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #fff;
	text-align: left;
	letter-spacing: 0.05em;
}

.info th,
.info td {
	vertical-align: top;
	padding: 0.5em 0;
}

.info th {
	width: 5em;
	font-weight: bold;
	white-space: nowrap;
}

.info td {
	padding-left: 0;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-size: 1rem;
	line-height: 1.4rem;
}

.icon-text {
	width: 25%;
	margin: 0.5em auto;
	display: flex;
	justify-content: left;
	align-items: center;
	gap: 0.5em;
	font-family: 'Chillax', sans-serif;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 2rem;
}

.icon-text span {
	padding: 0 0.3em;
}

.icon-text img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#access {
		margin: -1% auto 0;
		padding: 0 0 10%;
	}

	#access .map iframe {
		width: 100%;
		height: 300px
	}

	.info table {
		margin: 0 auto 2em;
		font-size: 0.85em;
		line-height: 1.8em;
	}

	.info th,
	.info td {
		padding: 0.5em 0;
	}

	.info th {
		width: 5em;
		line-height: 1.8em;
		font-size: 1em;
	}

	.info td {
		font-size: 1rem;
		line-height: 1.6rem;
	}

	.icon-text {
		width: 39%;
		margin: 0.5em auto;
		font-size: 1.2em;
		line-height: 2rem;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#access {
		margin: -1% auto 0;
		padding: 0 0 10%;
	}

	#access .map iframe {
		width: 100%;
		height: 300px
	}

	.info table {
		margin: 0 auto 2em;
		font-size: 0.85em;
		line-height: 1.8em;
	}

	.info th,
	.info td {
		padding: 0.5em 0;
	}

	.info th {
		width: 5em;
		line-height: 1.8em;
		font-size: 1em;
	}

	.info td {
		font-size: 1rem;
		line-height: 1.8rem;
	}

	.icon-text {
		width: 28%;
		margin: 0.5em auto;
		font-size: 1.2em;
		line-height: 2rem;
	}
}

@media screen and (max-width: 767px) {
	#access {
		position: relative;
		width: 100%;
		margin: -1% auto 0;
		padding: 14% 0 10%;
		background: url("/wp-content/themes/banapo/img/bg_all.webp");
		background-position: center bottom;
		background-size: cover;
		z-index: 2;
	}

	#access .map {
		width: 100%;
		margin: 8% auto 15%;
		overflow: hidden;
	}

	#access .map iframe {
		width: 100%;
		height: 250px
	}

	.info th {
		width: 5em;
		font-size: 0.85em;
		font-weight: bold;
		white-space: nowrap;
		padding: 0.5em;
	}

	.info td {
		padding: 0.5em;
		font-family: "dnp-shuei-gothic-gin-std", sans-serif;
		font-size: 0.85rem;
		line-height: 1.4rem;
	}

	.info {
		width: 75%;
		margin: 0 auto;
		text-align: center;
	}

	.info table {
		margin: -3em auto 2em;
		font-size: 1em;
	}

	.icon-text {
		width: 60%;
		margin: 0.5em auto;
		display: flex;
		justify-content: left;
		align-items: center;
		gap: 0.5em;
		font-family: 'Chillax', sans-serif;
		font-size: 1em;
		line-height: 2rem;
	}

	.icon-text span {
		padding: 0 0.3em;
	}

	.icon-text img {
		width: 30px;
		height: 30px;
		object-fit: contain;
	}

}

/* recruit
=============================*/
#recruit {
	position: relative;
	width: 100%;
	margin: -2% auto 0;
	padding: 0 0 60%;
	background: url("/wp-content/themes/banapo/img/bg_all.webp");
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

#recruit .recruit_inner {
	position: relative;
	height: 735px;
	background: url("/wp-content/themes/banapo/img/recruit_bg.webp") no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
}

#recruit .recruit_inner .txt_box {
	position: absolute;
	width: 40%;
	top: 26%;
	right: 5%;
	color: #333;
	text-align: left;
}

#recruit .recruit_inner .txt_box p {
	margin: 0 auto 5%;
	font-size: 1rem;
	line-height: 2rem;
}

#recruit .recruit_inner .txt_box .section_head {
	text-align: left;
}

#recruit .recruit_inner .txt_box h2 {
	display: inline-flex;
	justify-content: left;
	text-align: left;
	margin: 0 auto 5%;
	color: #3087A3;
	border-style: dotted;
	border-width: 0px 0px 3px 0px;
	border-color: #3087A3;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#recruit {
		width: 100%;
		margin: 5% auto 0;
		padding: 0 0 85%;
	}

	#recruit .recruit_inner {
		position: relative;
		height: 1000px;
		background: url("/wp-content/themes/banapo/img/sp_recruit_bg.webp") no-repeat;
		background-position: center center;
		background-size: contain;
	}

	#recruit .recruit_inner .txt_box {
		position: absolute;
		width: 50%;
		margin: 0 auto;
		top: 46%;
		right: 0;
		left: 0;
	}

	#recruit .recruit_inner .txt_box p {
		margin: 0 auto 5%;
		font-size: 1rem;
		line-height: 2rem;
	}

	#recruit .recruit_inner .txt_box .section_head {
		text-align: left;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#recruit {
		position: relative;
		width: 100%;
		margin: -2% auto 0;
		padding: 0 0 75%;
		background: url("/wp-content/themes/banapo/img/bg_all.webp");
		background-position: center bottom;
		background-size: cover;
		z-index: 2;
	}

	#recruit .recruit_inner {
		position: relative;
		height: 575px;
		background: url("/wp-content/themes/banapo/img/recruit_bg.webp") no-repeat;
		background-position: center center;
		background-size: 100% auto;
	}

	#recruit .recruit_inner .txt_box {
		position: absolute;
		width: 40%;
		top: 22%;
		right: 5%;
		color: #333;
		text-align: left;
	}

	#recruit .recruit_inner .txt_box p {
		margin: 0 auto 5%;
		font-size: 0.85rem;
		line-height: 1.6rem;
	}

	#recruit .recruit_inner .txt_box .section_head {
		text-align: left;
	}

	#recruit .recruit_inner .txt_box h2 {
		display: inline-flex;
		justify-content: left;
		text-align: left;
		margin: 0 auto 5%;
		color: #3087A3;
		border-style: dotted;
		border-width: 0px 0px 3px 0px;
		border-color: #3087A3;
	}
}

@media screen and (max-width: 767px) {
	#recruit {
		margin: 0 auto;
		padding: 8% 0 120%;
	}

	#recruit .recruit_inner {
		position: relative;
		width: 100%;
		height: 800px;
		background: url("/wp-content/themes/banapo/img/sp_recruit_bg.webp") no-repeat;
		background-position: center top;
		background-size: 100% auto;
		margin: 0 auto 12%;
	}

	#recruit .recruit_inner .txt_box {
		position: absolute;
		width: 75%;
		top: 40%;
		left: 0;
		right: 0;
		margin: 0 auto;
		color: #333;
		text-align: left;
	}

	#recruit .recruit_inner .txt_box p {
		margin: 5% auto 5%;
		font-size: 0.85rem;
		line-height: 1.6rem;
	}

	#recruit .recruit_inner .txt_box .section_head {
		text-align: center;
	}

	#recruit .recruit_inner .txt_box h2 {
		display: inline-flex;
		justify-content: left;

		text-align: left;
		margin: 0 auto 5%;
		color: #3087A3;
		border-style: dotted;
		border-width: 0px 0px 3px 0px;
		border-color: #3087A3;
	}
}


/* footer
=============================*/

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 5% 0 3%;
	text-align: center;
	z-index: 10;

}

footer .logo {
	width: 25%;
	margin: 0 auto;
}

footer .logo img,
footer .icon img {
	width: 100%;
	height: auto;
}

footer .icon {
	width: 3.5em;
	margin: 3% auto;
}

footer p:last-of-type {
	text-align: center;
	font-family: 'Chillax', sans-serif;
	font-size: 1em;
}

.bubble {
	position: absolute;
	bottom: 0;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
	box-shadow:
		0 0 8px rgba(255, 255, 255, 0.2),
		inset 0 0 6px rgba(255, 255, 255, 0.5),
		inset -4px -4px 8px rgba(173, 216, 230, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(1.5px);
	opacity: 0.7;
	animation: bubbleMotion 10s linear infinite;
}

@keyframes bubbleMotion {
	0% {
		transform: translateY(0) translateX(0px) scale(1);
		opacity: 0.7;
	}

	10% {
		transform: translateY(-10vh) translateX(4px) scale(1.02);
	}

	20% {
		transform: translateY(-20vh) translateX(7px) scale(1.03);
	}

	30% {
		transform: translateY(-30vh) translateX(10px) scale(1.05);
	}

	40% {
		transform: translateY(-40vh) translateX(5px) scale(1.02);
	}

	50% {
		transform: translateY(-50vh) translateX(-5px) scale(1);
	}

	60% {
		transform: translateY(-60vh) translateX(-10px) scale(1.05);
	}

	70% {
		transform: translateY(-70vh) translateX(-6px) scale(1.08);
	}

	80% {
		transform: translateY(-80vh) translateX(3px) scale(1.1);
	}

	90% {
		transform: translateY(-90vh) translateX(0px) scale(1.15);
	}

	100% {
		transform: translateY(-100vh) translateX(0px) scale(1.2);
		opacity: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	footer {
		padding: 5% 0 3%;
		z-index: 10;
	}

	footer .logo {
		width: 35%;
		margin: 0 auto;
	}

	footer .icon {
		width: 3.5em;
		margin: 5% auto;
	}

	footer p:last-of-type {
		font-size: 1em;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	footer {
		padding: 5% 0 3%;
		z-index: 10;
	}

	footer .logo {
		width: 30%;
		margin: 0 auto;
	}

	footer .icon {
		width: 3.5em;
		margin: 5% auto;
	}

	footer p:last-of-type {
		font-size: 1em;
	}
}

@media screen and (max-width: 767px) {
	footer {
		padding: 5% 0 30%;
	}

	footer .logo {
		width: 50%;
		margin: 0 auto 2em;
	}

	footer .icon {
		width: 3em;
		margin: 0 auto 2em;
	}

	footer p:last-of-type {
		font-size: 0.85em;
	}
}