@charset "UTF-8";
/* CSS Document */
:root {
	--white:     #ffffff;
	--lightgray: #cccccc;
	--darkgray:  #535353;
	--bggray:    #EFEEE7;
	--red:       #FF674B;
	--yellow:    #FFCF4B;
	--pink:      #FFBEB3;
	--lightpink: #FFE3DE;
	--navy:      #002B57;
	--blue:      #ADE0FF;
	--lightblue: #D9F0FA;
	--dwblue:    #009CDE;
	--padding: 16px;
	
}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body {
	font-size: 1.4rem;
	font-family: "hedley-new-web","Noto Sans JP","sans-serif";
	font-style: bold;
	font-weight: 700;
	color: var(--navy);
	background-color: var(--bggray);
}
a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    transition: 0.15s;
}
a:hover {
	opacity: 0.5;
}
.btn{
	width: 100%; margin: 0 auto 3rem; padding: .5rem 0;
	max-width: 300px;
	display: block; text-align: center; color: var(--white);
	border: 1px solid var(--navy);
	border-radius: 2.4rem;
	background-color: var(--navy);
}
.bg__yellow{background-color: var(--yellow);}
.bg__red   {background-color: var(--red);}
.bg__pink  {background-color: var(--pink);}
.bg__blue  {background-color: var(--blue);}
.bg__navy  {background-color: var(--navy);}
.txt__red  {color: var(--red);}

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

.wrap {overflow:hidden;}

section[class*="__section"]{width: 90%; margin: 0 auto; padding: 20px 0;}
h2{font-size: 2.4rem; margin-bottom: 2.4rem; text-align: center;}
h3{margin-bottom: 1.5rem;}
p[class*="__txt"]{padding-bottom: 20px;}

/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
	background-color: var(--navy);
	border-radius: 48px;
}

.hamburger-overlay__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: var(--white);
  transition: all .6s;
}
.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #fff;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}
.side__nav{margin-bottom: 40px;}
.side__nav-btn{
	position: relative;
	padding:1.5rem 0 1.5rem 5rem;
	color: var(--white);
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	transition: color .3s;
}
.side__nav-btn:before{
	position: absolute;
	top: 6px; left: 0px;
	width: 42px; height: 42px;
	content: "";
}
.side__nav-btn.side__nav-btn-about:before{background: url('../img/common/icon_about.svg')no-repeat;background-size: contain;}
.side__nav-btn.side__nav-btn-fee:before{background: url('../img/common/icon_fee.svg')no-repeat;background-size: contain;}
.side__nav-btn.side__nav-btn-faq:before{background: url('../img/common/icon_faq.svg')no-repeat;background-size: contain;}
.side__nav-btn.side__nav-btn-info:before{background: url('../img/common/icon_info.svg')no-repeat;background-size: contain;}
.side__nav-btn.side__nav-btn-access:before{background: url('../img/common/icon_access.svg')no-repeat;background-size: contain;}
.side__logo{max-width: 200px; margin: 0 auto 40px;}
.side__mark{max-width: 120px; margin: 0 auto;}

/*フッター*/
.footer{
	background-color: var(--navy);
	color: var(--white);
	border-radius: 70px 70px 0 0;
	padding: 12% 6% 6%;
}
.footer a{color: var(--white);}
.footer__access-contents{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.footer__access-contents > .footer__access-contents-box {
}
.footer__access-list{font-size: 1.4rem; font-weight: 400; padding-left: 2rem;}
.footer__nav-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer__logo-wrap{margin-bottom: 40px;}
.footer__access-map{margin-bottom: 40px;}
.footer__pmark{max-width: 80px;}
.footer__nav{display: flex; gap:40px; align-items: flex-end; font-size: 1rem;}


/* スライドショー */
.concept__slide-wrap{
widows: 100%;
	display: flex;
	align-items: center;
	gap:0 10px; margin-bottom: 40px;
}
.concept__slide{
	display: flex;
	gap:0 40px;
	animation: loop-slide 30s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.concept__slide-contents {
  width: 360px;
  height: 360px;
	list-style: none;
}
.concept__slide-contents img{border-radius: 70px;}

/* プレイスタジオについて */
.about__contents{
	padding: 40px;
	align-items: center;
	margin-right: calc(50% - 50vw);
}
.about__contents-tit{
	font-size: 2.4rem;
	margin-bottom: 1.6rem;
	padding-bottom: 1.6rem;
	border-bottom: 6px dotted var(--white);
}
.about__contents-img{
}
.about__contents-txtarea{
	text-align: left;
}
.about__map-flow{text-align: left; margin-bottom: 40px; padding-left: 2rem;}
.about__map-baby,
.about__map-kids{
	border: 4px solid var(--navy);
	border-radius: 70px;
	padding-bottom: 20px;
}
.about__map-baby-img,
.about__map-kids-img{border-radius: 70px 70px 0 0; margin-bottom: 1.6rem;}

/* 営業時間・利用料金 */
.fee__tab-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
}
.fee__tab-wrap > .fee__tab-label {
    flex: 1 1 auto; /* タブが均等に幅をとるが、幅を超えると折り返す */
    order: -1;
    position: relative;
    padding: 1em;
    background-color:  #E0DED1;
    color: var(--navy);
    text-align: center;
    cursor: pointer;
    transition:.3s all;
	border-radius: 70px 70px 0 0;
}
.fee__tab-wrap > .fee__tab-label:hover,
.fee__tab-wrap .fee__tab-label:has(:checked) {
    background-color:var(--white);
}
.fee__tab-wrap input {
    display: none;
}
.fee__tab-wrap > .fee__tab-contents {
    display: none; /* 初期状態では非表示 */
    width: 100%; /* コンテンツ幅を全体に */
    padding: 1.5em 6%; /* 内側余白 */
	background-color:var(--white);
	border-radius: 0 0 70px 70px ;
	margin-bottom: 40px;
}
.fee__tab-wrap .fee__tab-label:has(:checked) + .fee__tab-contents {
    display: block; /* 選択されたタブに対応するコンテンツを表示 */
}
.fee__tab-contents-tit{
	background-color: var(--bggray);
	padding: 1rem; margin-bottom:1.5rem;
}
.fee__table-tit{
	width: 110px;
	background-color: var(--navy); color: var(--white);
}
.fee__table-tit-weekday{width: 20px;background-color: var(--lightblue);}
.fee__table-tit-holiday{width: 20px;background-color: var(--lightpink);}
.fee__table-subtit{width: 100px;}
.fee__table{
	width: 100%; margin: 0 auto; border-radius: 20px;
	border-collapse: collapse;
	margin-bottom:40px;
	/*border: 2px solid var(--navy);*/
}
.fee__table th,.fee__table td{
	border: 1px solid #d8d8d8;
	padding: .5rem;
	 text-align: center;
}
.fee__table td.blank{border: none;}
.fee__table-label{
	display: block; font-size: 1.2rem; 
	background-color: var(--bggray);
	color: var(--navy);
	margin: .5rem 0;
	border-radius: 20px;
}
.fee__caution{
	padding: 9%; margin-bottom: 5%;
	border-radius: 70px;
	border: 1px solid var(--navy);
}
.fee__caution-tit{
	margin: 0 auto 2rem;
	text-align: center;
	font-size: 120%;
	border-bottom: 1px solid var(--navy);
	color: var(--navy);
	font-weight: bold;
}
.fee__caution-txt{text-align: left;}
.fee__list{font-weight: 400; font-size: 1.2rem; text-align: left; padding-left: 1rem;}
.fee__list li{margin-bottom: 1rem;}


/*FAQ*/
.faq__accordion  {
  margin: 0 auto 1em;
}
.faq__accordion-tit {
  position: relative;
  border: none;
  display: block;
  list-style: none;
  width: 100%;
  cursor: pointer;
  background: var(--white);
  border: 2px solid #d8d8d8;
	border-radius: 3.2em;
  padding: 1em 2em 1em 3.2em;
  line-height: 1.4em;
	text-align: left;
}

.faq__accordion-tit::-webkit-details-marker {
  display:none;
}
.faq__accordion-tit:before {
	 content: "Q";
  position: absolute;
	left: 20px;
	 top: calc(50% - .4em);
	font-size:2em;
}
.faq__accordion-tit:after {
  content: "+";
  position: absolute;
  top: calc(50% - 0.55em);
  right: 24px;
  line-height: 1;
  padding: 0;
  pointer-events: none;
	font-size:2em;
	font-weight: 400;
}

.faq__accordion::details-content {
  opacity: 0;
  block-size: 0;
  transition: .3s;
  transition-property: display, opacity, block-size, padding;
  transition-behavior: allow-discrete;
  line-height: 1.6em;
}

.faq__accordion .faq__accordion-contents {padding: 0 2em 0 3em; text-align: left;}
.faq__accordion .faq__accordion-contents > *:first-of-type {margin-top: 0;}
.faq__accordion .faq__accordion-contents > *:last-of-type  {margin-bottom: 0;}

.faq__accordion[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}
.faq__accordion[open] .faq__accordion-contents {padding: 1.4em 1em;}
.faq__accordion[open] .faq__accordion-tit:after {content: "-";}
.faq__accordion-contents-txt{
	position: relative;
	padding-left: 2.4em;
}
.faq__accordion-contents-txt:before {
	 content: "A";
	position: absolute;
	left: 0;
	top:0;
	font-size:2em;
}
/*PC*/

@media screen and (min-width: 960px) {
	body {font-size: 1.6rem;}
	header,.hamburger-overlay,
	.sp{display: none !important;}
	.pc{display: block !important;}
	h2{font-size: 3.2rem; margin-bottom: 1.6rem;}
	.wrap {
	  width: 100%; margin: 0 auto;
	  display: flex; justify-content: space-between; flex-direction: row-reverse;
	overflow:clip;
	}
	section[class*="__section"]{width: 96%; margin: 0 auto 0 0; padding: 56px 0;}
	p[class*="__txt"]{padding-bottom: 40px;}
	.main {width: calc(100% - 440px); text-align: center;}
	.side {width: 360px; margin-left: 20px;}
	.nav-overlay {
		margin-top: 20px;
		background-color: var(--navy);
		padding: 56px 40px;
		position: sticky; top: 20px;
		margin-bottom: 20px; border-radius: 70px;
	}
	.footer{border-radius: 70px 70px 0 0; padding: 4% 4% 10px;}
	.footer__wrap{
		display: grid;
		align-content: start;
		height: calc(100svh - 16px * 2);
		padding: var(--padding);
		gap: 80px;
		grid-template: 1fr 2fr / 300px 1fr;
	}
	
	/* スライドショー */
	.concept__slide-wrap{gap:0 10px; margin-bottom: 40px;}
	.concept__slide{gap:0 40px;}
	.concept__slide-contents {width: 500px;height: 500px;}
	.concept__slide-contents img{border-radius: 70px;}
	.about__contents{
		display: grid;
		grid-template: 1fr / 300px 1fr;
		justify-content: space-around;
		padding: 40px;
		border-radius: 200px 0 0 200px;
		gap:40px;
		margin-bottom: 56px;
	}
	.about__contents-tit{
		font-size: 3.2rem;
		margin-bottom: 1.6rem;
		padding-bottom: 1.6rem;
		border-bottom: 6px dotted var(--white);
	}
	.about__contents-img{
		grid-column: 1 / 2;
		grid-row: 1;
	}
	.about__contents-txtarea{
		text-align: left;
		grid-column: 2 / 3;
		grid-row: 1;
	}
	.about__map{position: relative;}
	.about__map-img {width: 70%; margin: 0 auto; padding-top: 10%;}
	.about__map-baby,
	.about__map-kids,
	.about__map-flow-wrap{
		position: absolute;
		max-width: 280px;
		border-radius: 70px;
		padding-bottom: 20px;
	}
	.about__map-baby{top: 0; left: 0;}
	.about__map-kids{bottom: 0;right: 0;}
	.about__map-flow-wrap{bottom: 0; left: 0; padding: 0;}
	.about__map-flow{margin: 0;}
	.fee__table th,.fee__table td{padding: 1rem;}
	.fee__table-tit{width: 250px;}
	.fee__table-subtit{width: 200px;}
	.fee__table-tit-weekday,.fee__table-tit-holiday{width: 100px;}
	.fee__tab-wrap{gap:0 20px;}
	.faq__accordion-tit {border-radius: 3.2em;padding: 1.4em 1.6em 1.4em 4.2em;line-height: 1.6em;}
	.faq__accordion-tit:before {left: 20px;font-size:2.4em;}
	.faq__accordion[open] .faq__accordion-contents {padding: 1.4em 2em 1.4em 3em;}
	.fee__caution{padding: 4%;}
}
@media screen and (max-width: 650px){
	.footer__wrap{grid-template: auto / 1fr;}

	header{background-color: var(--navy);padding: 20px; margin-bottom: 20px; border-radius: 0 0 50px 50px;}
	header .side__logo{margin: 0 auto;}
	.footer__logo{width: 70%; margin: 0 auto;}
	.about__contents-img{margin-bottom: 1.4rem;}
	.about__contents.bg__yellow{border-radius: 200px 0 0 0; margin-bottom: 0;}
	.about__contents.bg__red{border-radius: 0 0 0 200px; padding-bottom: 100px; margin-bottom: 40px;}
	.about__map-baby,.about__map-kids{
		border-radius: 50px; display: flex;align-items: center;gap:20px; padding: 0; margin-bottom: 20px;
	}
	.about__map-baby-img,.about__map-kids-img{width: 50%; border-radius: 50px 0 0 50px; margin: 0;}
	
	.side__nav{padding: 6%; text-align: left;}
	
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
	background-color: var(--navy);
}
.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}
.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}
.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}
.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }
}