@charset "utf-8";
/* CSS Document */

/***
 header
*************************************************/

header {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9997;
}
.header-inner {
	background: rgba(255,255,255,.5);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em;
}
.header-inner .logo {
	max-width: 200px;
}
@media (width < 960px) {
	.header-inner .drw {
		background: #EBEBEB;
		box-shadow: -3px 0 3px 3px rgba(0,0,0,.2);
		width: 90%;
		height: 100vh;
		padding: 7em 2em;
		position: fixed;		
		top: 0;
		right: -100%;
		transition: all .5s ease-in-out;
		z-index: 9998;
	}
	.header-inner .drw.is-active {
		right: 0;
	}
}
@media (width >= 960px) {
	.header-inner .drw {
		flex-grow: 1;
		max-width: 1080px;
	}
	.header-inner .nav-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
}
@media (width < 960px) {
	.header-inner .nav-list a {
		border-bottom: 1px dotted #333;
		display: block;
		padding: 1em;
	}
	.header-inner .nav-list a:first-of-type {
		border-top: 1px dotted #333;
	}
}
@media (width >= 960px) {
	.header-inner .nav-list a {
		display: inline-block;
		padding-left: 1em;
		white-space: nowrap;
	}
}
@media (width < 960px) {
	.header-inner .visit-btn {
		margin-top: 1em;
	}
}
@media (width >= 960px) {
	.header-inner .visit-btn {
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120px;
		height: 120px;
		line-height: 1.2;
		aspect-ratio: 1 / 1;
		position: fixed;
		right: 1em;
		top: 150px;
	}
	.header-inner .visit-btn::before,
	.header-inner .visit-btn::after {
		display: none;
	}
}
.nav-btn {
    background: #FFF000;
    border-radius: 10px 0 0 10px;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
	position: fixed;
	right: 0;
	z-index: 9999;
}
.nav-btn span {
	background: #000042;
	width: 25px;
	height: 4px;
	margin-top: 5px;	
}
.nav-btn span:nth-child(1) {
	margin-top: 0;
}
.nav-btn span:nth-child(1),
.nav-btn span:nth-child(3) {
	transition: all .4s;
}
.nav-btn.is-active {
	background: none;
}
.nav-btn.is-active span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.nav-btn.is-active span:nth-child(2) {
	width: 0;
}
.nav-btn.is-active span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}
@media (width >= 960px) {
	.nav-btn {
		display: none;
	}
}


/*** 
Footer 
***************************/

footer {
	background: #005A96;
	color: #FFF;
}
.footer-inner {
	display: flex;
	max-width: 1200px;
	margin: auto;
	text-align: center;
	padding: 2em 1em 1em;
}
@media (width < 768px) {
	.footer-inner {
		flex-direction: column;
	}
}
@media (width >= 960px) {
	.ft-left {
		width: 25%;
	}
	.footer-nav {
		width: 75%;
	}
}
.sns {
	display: flex;
	justify-content: center;
	padding-bottom: .5em;
}
.sns a {
	max-width: 50px;
	margin-left: 10px;
}
.ft-logo img {
	max-width: 200px; 
}
.footer-nav a {
	display: inline-block;
	padding: .5em;
}
@media (width >= 768px) {
	.footer-nav a {
		padding: 1em;
	}	
}
.copyright {
	text-align: center;
	padding-bottom: 1em;
}


/* ボタン */
.btn-wrap {
	padding: 1em 0;
}
.visit-btn {
	background: linear-gradient(to bottom, #FFD500 0, #ff7f00 100%);
	border: 2px solid #FFF;
	box-shadow: 1px 1px 2px 2px rgba(0,0,0,.1);
	border-radius: 50px;
	display: block;
	width: 90%;
	max-width: 400px;
	margin: auto;
	padding: 1em;
	color: #00008B;
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
	position: relative;
}
.visit-btn::before,
.visit-btn::after {
	position: absolute;
	
}
.visit-btn::before {
	content: "";
	background: #00008B;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;	
	padding-bottom: 2px;	
	aspect-ratio: 1 / 1;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
}
.visit-btn::after {
	content: "▲";
	color: #FFF;
	font-size: 10px;
	line-height: 1;
	transform: rotate(90deg) translateY(-50%);
	right: 16px;
	top: 43%;
}
.visit-btn .easy {
	background: #FFF;	
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	font-size: .7em;	
	line-height: 1.2;
	font-weight: normal;
	aspect-ratio: 1 / 1;
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}
.visit-btn:hover {
	border-color: #FF6600;
	background: #FFF;
	color: #FF6600;
}
.visit-btn:hover .easy {
	background: #FF6600;
	color: #FFF;
}

.more-btn {
	background: linear-gradient(to bottom, #FFF 0%, #FCFCFC 40%, #DFDFDF 100%);
	border: 1px solid #0AC1E7;
	border-radius: 50px;
	color: #00008B;
	display: inline-block;
	padding: .5em 2em;
	cursor: pointer;
}
.more-btn:hover {
	font-size: 106%;
	border: 1px solid #FFF000;
	color: #FF6600;
}



/***
 main contents
*************************************************/

section {
	scroll-margin-top: 80px;
}

@media (width >= 1024px) {	
	.section-wrap {
		padding-left: 1.5em;
		padding-right: 1.5em;/*フル画面で左右に余白*/
	}
}
.section-full-inner,
.section-inner {
	text-align: center;
	padding: 3em 1em;
}
.section-full-inner {
	width: 100%;	
}
@media (width > 1200px) {
	.section-full-inner {
		padding-left: 0;
		padding-right: 0;
	}
}
.section-inner {
	max-width: 1200px;
	margin: auto;	
}
.section-full-inner .section-inner {
	padding: 0;
}
.sec-bg-blue {
	background: #00B9DC;
	border-radius: 50px;
}
.section-ttl {
	color: #00008b;
	padding-bottom: 1em;
	scroll-margin-top: 80px;
}
.sec-bg-blue .section-ttl {
	color: #FFF!important;
}
.cont-wrap {
	padding: 2em 0 3em;
}
.cont-ttl {
	padding-bottom: 1em;
}

.fl-box {
	display: flex;
}

/* スライダーカスタマイズ */
.splide__arrow svg {
	display: none;
}
.splide__arrow {
	background: #00008B;
	border: 1px solid #FFF;
	border-radius: 50%;
	width: 30px;
	height: 30px;
}
.splide__arrow--next::before,
.splide__arrow--prev::before {
	content: "▲";
	color: #FFF;
	font-size: .9em;
}
.splide__arrow--prev::before {
	transform: rotate(-90deg);
}
.splide__arrow--next::before {
	transform: rotate(90deg);
}
.splide__pagination__page.is-active {
	background: #00008B;
}


/*** MV ***************************/

#mv {
	width: 100%;
	position: relative;
}
/*@media (width >= 1024px) {
	#mv {
		padding: 0 3em;
	}
}*/
#mv img {
	height: 80vh;
	object-fit: cover;
	border-radius: 0 0 50px 50px;
}
@media (width >= 1024px) {
	#mv img {
		height: 85vh;
	}
}
.mv-txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	padding-top: 10%;
	position: absolute;
	top: 0;
	left: 0;
}
.mv-txt h1 {
	color: #002187;
    font-size: clamp(2rem, 7vw, 5rem);
    text-align: center;
    line-height: 1.2;
}
.mv-txt h1 span {
    background: rgba(255,255,255,.5);
    display: block;
    margin-bottom: .2em;
}
.h1-sub {
	color: #FFF;
	font-size: clamp(1.5rem, 4vw, 2.8rem);
	font-weight: 700;
	text-align: center;
	text-shadow: 3px 3px 5px rgba(0,0,66,.5), -3px -3px 5px rgba(0,0,66,.5), 3px -3px 5px rgba(0,0,66,.5),-3px 3px 5px rgba(0,0,66,.5);
}


/*** Information ***************************/

#info {
	text-align: center;
}
@media (width < 1024px) {
	.camp-slide {
		margin: 0 -1em;
	}
}
.camp-slide .splide__list {
	padding: 1em 0 2em!important;
	/*gap: 2em;*/
}
.camp-slide .splide__arrow--prev {
	left: 0;
}
.camp-slide .splide__arrow--next {
	right: 0;
}
@media (width >= 960px) {
	.camp-slide .splide__arrow--prev,
	.camp-slide .splide__arrow--next,
	.camp-slide .splide__pagination {
		display: none;
	}
}

.camp-banner {
	border-radius: 20px;
	box-shadow: 3px 3px 3px 3px rgba(0,0,0,.2);
	box-shadow: 3px 3px 3px 3px rgba(0,0,0,.2);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto max(45px);
	padding: 1.5em 1em;
}
.camp-name {
	font-size: clamp(1.25rem, 3vw, 1.8rem);
	font-weight: 700;
	line-height: 1.2;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.benefit {
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	padding: 1em 0;
}
.benefit-price {
	color: #FF26A6;	
	font-weight: bold;
	padding-left: 5px;
}
.benefit-price span {
	font-size: 1.5em;
}
.monthly-camp {
	background: linear-gradient(to bottom, #00BFE6 0%, #BFF0FF 100%);
}
.monthly-camp .camp-name {
	color: #FFFF00;
}
.norikae-camp {
	background: #004E9B;
}
.norikae-camp .camp-name,
.norikae-camp .benefit {
	color: #FFF;
}
.friend-camp {
	background: #FFF000;
}
.info-txt-block {
	border: 1px solid #666;
	border-radius: 5px;
	max-height: 150px;
	padding: 1em;
	text-align: left;
	overflow-x: auto;
}
.info-txt-block ul {
	padding-left: 1em;
}
.info-txt-block li {
	list-style: square;
	padding-bottom: .5em;
}

/*** おすすめの理由 ***************************/

#reason .sec-bg-blue {
	background-image: url("../images/reason_sp_bg01.png") ,url("../images/reason_sp_bg02.png") , linear-gradient(#00B9DC, #00B9DC);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: top right, bottom center, center;
	background-size: contain, contain, cover;
	padding: 2em 1em;
}
@media (width >= 960px) {
	#reason .sec-bg-blue {
		background-image: url("../images/reason_bg02.png"),url("../images/reason_bg01.png"), linear-gradient(#00B9DC, #00B9DC);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: bottom right, top center, center;
		background-size: contain, contain, cover;
		padding: 4em 1em;
	}
}
@media (width >= 1200px) {
	#reason .sec-bg-blue {
		min-height: 800px;
	}
}
@media (width < 744px) {
	#reason .section-ttl {
		text-align: left;
	}
}
#reason .fl-box {
	gap: 2em;
}
@media (width < 960px) {
	#reason .fl-box {
		flex-wrap: wrap;
		gap: 1em 2em;
	}
}
.reason-item {
	/*background: linear-gradient(to bottom, rgba(0,185,220,0) 50%, rgba(0,185,220,.6) 100%);*/
    width: calc((100% - 2em) / 2);
}
@media (width >= 960px) {
	.reason-item {
		width: calc((100% - 2em * 3) / 4);
		padding-bottom: 1.5em;
	}
}
/*.reason-item {	
	background: rgba(255,255,225,.5);
}*/
.reason-item figure {
	display: block;
	margin: auto;
	padding: 1.5em;
}
.reason-item figure img {
	max-width: 200px;
}
.reason-item h3 {
	color: #00008b;
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	margin-bottom: .5em;
}


/*** 施設紹介 ***************************/

#facility h3 {
	padding-bottom: 1em;
	text-align: center;
}
/* タブ切替 */
.tab-switch {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 2em;
}
.tab-switch input {
	display: none;
}
.tab-switch label {
	background: #EBEBEB;
	border: 1px solid #666;
	border-radius: 10px;
	display: block;
	flex: 1;
	padding: 1em .5em;
	text-align: center;
	order: -1;
	cursor: pointer;
}
@media (width >= 960px) {
	.tab-switch label {
		padding: .5em;
	}
}
@media (width < 960px) {
	.tab-switch label span {
		font-size: .85em;		
		padding-top: .5em;
	}
}
@media (width < 768px) {
	.tab-switch label span {
		font-size: .7em;
		display: block;
	}
}
.tab-switch label::before {
	content: "";
	display: inline-block;
	width: 50px;
	height: 50px;
	vertical-align: middle;
	background-color: #005A96;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
@media (width >= 768px) {
	.tab-switch label::before {
		margin-right: 5px;
	}
}
@media (width >= 960px) {
	.tab-switch label::before {
		width: 80px;
		height: 80px;
	}
}
#tab01 + label::before {
	-webkit-mask-image: url("../images/mc-icon_01.svg");
	mask-image: url("../images/mc-icon_01.svg");
}
#tab02 + label::before {
	-webkit-mask-image: url("../images/mc-icon_02.svg");
	mask-image: url("../images/mc-icon_02.svg");
}
#tab03 + label::before {
	-webkit-mask-image: url("../images/mc-icon_03.svg");
	mask-image: url("../images/mc-icon_03.svg");
}
#tab04 + label::before {
	-webkit-mask-image: url("../images/mc-icon_04.svg");
	mask-image: url("../images/mc-icon_04.svg");
}
.tab-switch input:checked + label::before {
	background-color: #FFF;
}
.tab-content {
	/*display: none;*/
	width: 100%;	
	height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tab-switch input:checked + label {
	background: #00B9DC;
	/*border: 1px solid #00B9DC;*/
	color: #FFF;
	font-weight: 500;
}
.tab-switch input:checked + label + .tab-content {
	/*display: block;*/
	height: auto;
	opacity: 1;
	visibility: visible;
	overflow: visible;
}
.tab-content p {
	padding: 1em;
	text-align: left;
}
/* スライダー */
.machine-slide .splide__arrow--prev {
	left: -1em;
}
.machine-slide .splide__arrow--next {
	right: -1em;
}
.machine-slide .splide__pagination {
	bottom: -1.5em;
}



.machine-slide li {
	padding: 5px 0;
}
#facility img {
	border-radius: 20px;
	border: 1px solid #666;
}
.facility {
	padding-bottom: 3em;
}
.facility .fl-box {
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em; 
}
.facility .fl-box li {
	width: calc((100% - 1em) / 2);
}
@media (width >= 960px) {
	.facility .fl-box li {
		width: calc((100% - 1em * 3) / 4);
	}
}
.facility .fl-box li figcaption {
	text-align: center;
	padding-top: .5em;
}
.option li.single {
	width: 100%;
}
@media (width >= 960px) {
	.option li.single {
		width: calc((100% - 1em * 3) / 2);
	}
}
.option li.single img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
.fac-name {
	font-weight: 500;
	padding: .5em 0;
}
.fac-disc {
	font-size: .9em;
	text-align: left;
}
/*.gym-img.splide {
    overflow: hidden;
  }*/
.gym-img .splide__slide img {
	border: none!important;
    height: auto;
}
.gym-img .splide__arrow--prev {
    left: -1em;
}
.gym-img .splide__arrow--next {
    right: -1em;
}
@media (width >= 1024px) {
	.gym-img .splide__slide {
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	.gym-img .splide__slide:not(.is-active) img {
		transform: scale(.9);
		opacity: .5;
		transition: transform 0.4s ease;
	}
	.gym-img .splide__slide.is-active {
		z-index: 1;
	}
	.gym-img .splide__slide.is-active img {

		transform: scale(1);
		opacity: 1;		
	}
}
.gym-img .splide__arrow--prev {
    left: 0;
}
.gym-img .splide__arrow--next {
    right: 0;
}
/*@media (width >= 768px) {
	.gym-img .splide__arrow--prev {
    	left: -1em;
	}
	.gym-img .splide__arrow--next {
		right: -1em;
	}
}*/
@media (width >= 1024px) {
	.gym-img .splide__arrow--prev {
		left: 17%;
	}
	.gym-img .splide__arrow--next {
		right: 17%;
	}
}


/*** 料金プラン ***************************/

#price {
	position: relative;
	z-index: 1;
}
#price .fl-box {
	justify-content: center;
	gap: 1em 2em;
}
@media (width < 768px) {
	#price .fl-box {
		flex-direction: column;
	}
}
.price-box {
	border-radius: 20px;
	box-shadow: 3px 3px 3px 3px rgba(0,0,0,.2);
	padding: 1em;
}
@media (width >= 768px) {
	.price-box {
		padding: 2em;
		width: calc((100% - 2em) / 2);
	}
}
.price-box dt {
	border-bottom: 1px solid #666;
	padding-bottom: 1em;
}
.price-box dd {
	padding-top: 1em;
}
@media (width >= 960px) {
	.price-box dt {
		padding-bottom: 1.5em;
	}
	.price-box dd {
		padding-top: 1.5em;
	}
}
.plan .price-box.day {
	background: #FFF084;
}
.plan .price-box.full {
	background: #00008B;
	color: #FFF;
}
.cost .price-box,
.option .price-box {
	background: #FFF;
}
.plan-disc {
	font-size: 1.3em;
	padding-bottom: .5em;
}
.option .fl-box {
	flex-wrap: wrap;
}
.option .price-box {
	display: flex;
	padding: 1em;
}
.option .price-box dt {
	border-bottom: none;
	border-right: 1px solid #666;
	width: 55%;
	padding-bottom: 0;
	padding-right: .5em;
	text-align: left;
}
.option .price-box dt h4 {
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	font-weight: 400;
}
.option .price-box dt p {
	font-size: .9em;
	padding-top: .5em;
	
}
.option .price-box dd {
	width: 45%;
	padding-top: 0;
	padding-left: .5em;
}
.price {
	padding-bottom: .5em;
}
.tax-ex {
	font-size: 1.6em;
	font-weight: 700;
}
@media (width >= 960px) {
	.tax-ex {
		font-size: 2em;
	}
}
.tax-inc {
	display: inline-block;
}
.option .tax-ex {
	font-size: 1.3em;
}
.option .tax-inc {
	display: block;
	font-size: .9em;
	line-height: 1.2;
}
.price-cate .note-list {
	max-width: 960px;
	margin: auto;
	padding: 1em;
}
#price .note-list {
	max-width: 800px;
	margin: 1em auto 0;
}
.more-btn.btn-blue {
	background: #005A96;
	color: #FFF;
	margin-top: .5em;
	padding: 5px 1em;
}
.more-btn.btn-blue:hover {
	font-size: 100%;
	color: #FFF000;
}

/*** 見学のすすめ ***************************/

#coming {
	background-image: url("../images/coming_sp_bg01.png"),url("../images/coming_sp_bg02.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top center, bottom center;
	background-size: contain, contain;
	margin: -50px 0;
	padding: 100px 0;
	position: relative;
	z-index: 0;	
	scroll-margin-top: 0!important;
}
@media (width >= 960px) {
	#coming {
		background-image: url("../images/coming_bg01.png"),url("../images/coming_bg02.png");
		background-repeat: no-repeat, no-repeat;
		background-position: top center, bottom center;
		background-size: contain, contain;
		margin: -100px 0;
		padding: 150px 0;
	}
}
.grid-box {
	display: grid;
	grid-template-columns: 2fr 3fr;
	grid-template-rows: max-content 1fr;
	grid-row-gap: 1em; 
}
#coming .circle-img {
    grid-area: 1 / 1 / 2 / 2;
}
#coming .headline {
    grid-area: 1 / 2 / 2 / 3;
	text-align: left;
	padding-left: .5em;
}
#coming .txt-block {
    grid-area: 2 / 1 / 3 / 3;
    padding: 1em;
}
@media (width >= 960px) {
	.grid-box {
		display: grid;		
		grid-template-rows:  max-content 1fr;
		grid-column-gap: 1em; 
		align-items: start;
	}
	#coming .circle-img {
		grid-area: 1 / 1 / 3 / 2;
	}
	#coming .headline {
		grid-area: 1 / 2 / 2 / 3;
		text-align: left;
		padding-left: 1em;
	}
	#coming .txt-block {
		grid-area: 2 / 2 / 3 / 3;
		padding: 1em;
	}
}
#coming .circle-img img {
	clip-path: circle(50% at 50% 50%);
}
#coming .sub-catch {
	color: #00008B;
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	font-weight: 700;
	padding-bottom: .5em;
}
#coming h2 {
	color: #00B9DC;
	font-size: clamp(1.35rem, 3.6vw, 2.5rem);
}
#coming .txt-block {
	text-align: left;
	font-size: 1.1em;
}


/*** 初めての方へ ***************************/

#beginner {
	position: relative;
	z-index: 1;
}

@media (width < 768px) {
	.flow .fl-box {
		flex-direction: column;
	}
}
@media (width >= 768px) {
	.flow .fl-box {
		justify-content: space-between;
		/*align-items: center;*/
	}
}
.flow-step {
    background: #FFFF00;
    border-radius: 20px;
	display: grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: max-contet 1fr;
	column-gap: 1em;
	padding: 1em;
}
@media (width >= 768px) {
	.flow-step {
		display: block;
		width: 30%;
		padding: 1em;
	}
	.flow-step figure {
		width: 60%;
		padding: 1em;
		margin: 1em auto;
	}
	.flow-step .num {
		padding-bottom: .5em;
	}
	.flow-step h4 {
		text-align: center;
	}
}
@media (width >= 960px) {
	.flow-step {
		padding: 2em;
	}
}
.flow-step figure {
    background: #FFF;
    border-radius: 50%;
    display: block;
    padding: 1em;
}
@media (width >= 768px) {
	.flow-step figure {
		padding: 1.5em;
	}
}
@media (width >= 960px) {
	.flow-step figure {
		padding: 2em;
	}
}
.flow-step p {
	padding-top: 1em;
}
.arrow {
	color: #00008B;
	padding: .5em;
}
@media (width >= 768px) {
	.arrow {
		align-self: center;
	}
	.arrow span {
		font-size: 1.2em;
		display: inline-block;
		transform: rotate(-90deg);
	}
}
.required .fl-box {
	column-gap: 1em;
	margin-bottom: 2em;
}
@media (width >= 768px) {
	.required .fl-box {
		column-gap: 2em;
	}
}
.req-item {
	background: #FFF;
	border-radius: 20px;
	width: calc((100% - 1em) / 2);
	padding: 1em;
}
@media (width >= 960px) {
	.req-item {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		width: calc((100% - 2em) / 2);
	}
	.req-item p ,
	.req-item figure {
		width: 50%;
	}
}
.req-item figure img {
	max-width: 250px;
}
.attention {
	max-width: 960px;
	margin: auto;
	text-align: left;
}
.attention dt {
	font-size: 1.1em;
	font-weight: 700;
	padding: 1em 0 .5em 1em;
}
.attention dd {
	background: rgba(255,255,255,.7);
	border-radius: 20px;
	padding: 1em;
}
.attention .note-list {
	font-size: initial;
}


/*** よくある質問 ***************************/

.faq-list {
	/*background: #FFF;*/
	border: 1px solid rgba(0,90,150,.5);
	border-radius: 20px;
	text-align: left;
	margin-bottom: 2em;
	overflow: hidden;
}
.faq + .faq {
	border-top: 1px solid rgba(0,90,150,.5);
}
.question {
	display: flex;
	align-items: baseline;
	cursor: pointer;
	padding: 1em;
	
}
@media (width >= 960px) {
	.question {
		padding: 1em;
	}
}
.question::-webkit-details-marker {
    display: none;
}
.question:hover {
	background: rgba(0,90,150,.05);
}
.faq[open] .question {
	background: rgba(0,90,150,.1);
}
.question::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease;
}
.faq[open] .question::after {
	transform: rotate(-135deg);
}
.question p {
	font-weight: 500;
	flex-grow: 1;
	padding-right: 1em;
}
.faq[open] .question p {
	color: #00008B;
	font-weight: 700;
}
.question p::before {
	content: "Q.";
	color: #00008B;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1;
	margin-right: 10px;
}
.answer {
	background: #FFF;
	transition: all .5s;
}
.answer-inner {
	border-top: 1px solid #005A96;
	padding: 1em 1em 1em 3em;
}
.answer p {	
	text-indent: -2em;
}
.answer p::before {
	content: "A.";
	color: #F50005;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1;
	margin-right: 10px;	
}

.legal ul {
	padding-top: .5em;
}
@media (width >= 768px) {
	.legal ul {
		display: flex;
		justify-content: center;
		column-gap: 4em;		
	}
}
.legal li {
	list-style: disc;
	text-align: left;
	
}
@media (width < 768px) {
	.legal p {
		text-align: left;
	}
	.legal li {
		margin-left: 2em;
	}
}


/*** アクセス ***************************/

@media (width < 960px) {
	#access .fl-box {
		flex-direction: column;
	}
}
.gym-detail {
	padding-bottom: 1em;
}
@media (width >= 768px) {
	.gym-detail {
		padding: 0 1em 1em;
	}
}
@media (width >= 960px) {
	.gym-detail,
	.gmap {
		width: 50%;
	}
	.gym-detail {
		padding: 0 1em 0 0;
	}
	.gmap {
		padding-left: 1em;
	}
}
.gym-detail h3 {
	background: rgba(255,255,255,.8);
	border-radius: 5px;
	font-size: 1.4em;
	text-align: left;
	padding: 5px 1em;
}
.gym-detail dl {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
.gym-detail dt {
	border-bottom: 1px dashed #EBEBEB;
	color: #00008B;
	width: 25%;
	padding: 1em 0 1em;
	text-align: right;
}
@media (width >= 768px) {
	.gym-detail dt {		
		width: 30%;
		padding: 1em;
	}
}
.gym-detail dd {
	border-bottom: 1px dashed #EBEBEB;
	width: 75%;
	padding: 1em 0 1em 1em;
	text-align: left;
}
@media (width >= 768px) {
	.gym-detail dd {
		width: 70%;
		padding: 1em;
	}
}
.staff-hour {
	padding: .5em;
}
@media (width < 768px) {
	.staff-hour span {
		display: block;
	}
}
.gmap iframe {
	border-radius: 20px;
	width: 100%;
	height: 100%;
	min-height: 250px;
}
.more-btn.cal {
	border: 2px solid #00008E;
	display: flex;
	align-items: center;
	margin: auto;
}
.more-btn.cal::after {
	content:"";
	-webkit-mask-image: url("../images/calendar-icon.svg");
	mask-image: url("../images/calendar-icon.svg");
	background-color: #00008B;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-left: 1em;
}
.more-btn.cal:hover {
	font-size: 100%;
}
.more-btn.cal:hover::after {
	background-color: #FF6600;
}
/*** 来店予約ボタン（ページ下） ***************************/

.to-visit .section-full-inner {
	overflow: hidden;
}
@media (width < 960px) {
	.to-visit .section-full-inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}	
}
@media (width >= 960px) {
	.to-visit .section-full-inner {
		position: relative;
	}
}
.to-visit .section-full-inner::before {
	content: "";
    background: #FFFFDC url("../images/visit-bg.jpg") no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: multiply;
	display: block;
	aspect-ratio: 1 / 1;	
    height: 100%;
	width: 80%;
	max-width: 400px;	
}
@media (width < 960px) {
	.to-visit .section-full-inner::before {		
		height: auto;
		margin: auto;
		order: 2;
	}
}
@media (width >= 960px) {
	.to-visit .section-full-inner::before {
		position: absolute;
		top: 50%;
		right: -8%;
		transform: translateY(-50%);
		z-index: -1;
	}
}
@media (width >= 1200px) {
	.to-visit .section-full-inner::before {
		right: 0;
	}
}
@media (width < 960px) {
	.visit-catch {
		order: 1;
	}
	.to-visit .btn-wrap {
		order: 3;
		margin-top: -2em;
	}
}
.visit-catch {
	color: #00B9DC;
	font-size: clamp(1.2rem, 2.4vw, 1.8rem);
	font-weight: 700;
	text-shadow: 1px 1px 2px #FFFFDC, 1px -1px 2px #FFFFDC, -1px 1px 2px #FFFFDC, -1px -1px 2px #FFFFDC;
	display: flex;
	justify-content: center;
	align-items: center;
}
.visit-catch::before,
.visit-catch::after {
	content: "";
	background: #00B9DC;
	display: inline-block;
	width: 3px;
	height: 4em;
}
.visit-catch::before {
	transform: rotate(-18deg) translate(-10px);
}
.visit-catch::after {
	transform: rotate(18deg);
}
@media (width >= 960px) {
	.visit-catch {
		padding-bottom: 3em;
	}
}

/*** ボタン固定 ***/
@media (width < 960px) {
	.js-target-btn.is-floating {
		position: fixed!important;
		bottom: 1em!important;
		/*left:5%!important;*/		
		left: 50%!important;
		width: 90%!important;
		max-width: 400px!important;
		z-index: 999;
		animation: floatUp .3s ease forwards;
		box-shadow: 0 8px 20px rgba(0,0,0,.3);
	}
}

@keyframes floatUp {
	from {
		opacity: 0;
		transform: translate(-50%, 20px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}


/*** カレンダーModal ***************************/

dialog#modal-calendar {	
	border: none;
	border-radius: 20px;
	width: 90%;
	max-width: 500px;
	padding:  1em;
	margin: auto;
	box-shadow: 0 4px 20px rgba(0,0,0,.2);
	position: fixed;
	inset: 0;
}
@media (width >= 768px) {
	dialog#modal-calendar {
		padding: 2em;
	}
}
dialog#modal-calendar::backdrop {
	background: rgba(0,0,0,.6);
	backdrop-filter: blur(4px);
}
dialog .modal-inner {
	text-align: center;
	height: 100%;
}
dialog .modal-inner h4 {
	background: #005A96;
	border-radius: 10px;
	color: #FFF;
	font-size: 1.1em;
	text-align: center;
	padding: 5px;
	margin-bottom: .5em;
}
dialog .iframe-container {	
	height: 270px;
}
dialog .iframe-container iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
	overflow: hidden;
}
dialog .modal-close {
	background: #EBEBEB;
	border: 1px solid #666;
	border-radius: 10px;
	font-size: .8em;
	padding: 0 10px;
	cursor: pointer;
}
dialog .note {
	text-align: left;
}
.am-time,
.pm-time,
.full-time {
	border: 1px solid #959595;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 5px;
	vertical-align: middle;	
}
.am-time {
	background: linear-gradient(135deg, #959595 0%, #959595 49%, #FFF 50%, #FFF 100%);	
}
.pm-time {
	background: linear-gradient(135deg, #FFF 0%, #FFF 49%, #959595 50%, #959595 100%);	
}
.full-time {
	background: #959595;
}