@charset "utf-8";

@font-face {
font-family:NSansJP;
src:url(fonts/NotoSansJP_Regular.ttf) format('truetype');
font-style:normal;
font-weight:400;
font-display:swap;
}

@font-face {
font-family:NSansJP;
src:url(fonts/NotoSansJP_Bold.ttf) format('truetype');
font-style:normal;
font-weight:700;
font-display:swap;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
font-size:15px;
}

body{
font-family:NSansJP,serif;
font-weight:400;
color:#333;
background:#2E3192;
}

li{
list-style:none;
}

a{
text-decoration:none;
color:#2E3192;
transition:all 0.3s;
}

strong{
font-weight:400;
}

main{
background:#fff;
}

/* -------------------
        header
---------------------- */
header{
width:100%;
position:fixed;
top:0;
left:0;
background:rgba(255,255,255,0.8);
z-index:90;
}

header div{
max-width:1220px;
height:60px;
padding:0 10px 15px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:flex-end;
}

#logo{
display:block;
width:350px;
}

#logo:hover{
scale:1.02 1.02;
}

header div a img{
width:100%;
}

.nav-list{
display:flex;
justify-content:flex-end;
}

.nav-list li{
padding-left:20px;
}

.nav-list li::before{
content:'';
border-left:1px solid rgba(46,49,146,0.4);
position:relative;
left:-10px;
}

.nav-list li:first-child::before{
content:'';
border-left:none;
}

#menu-btn{
position:fixed;
top:-100px;
right:-100px;
display:none;
}

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

header div{
height:auto;
padding:13px 10px 8px;
}

#logo{
width:50%;
min-width:230px;
max-width:400px;
}

#menu-btn{
top:10px;
right:15px;
display:flex;
background:#2E3192;
color:#fff;
font-size:0.9rem;
font-weight:700;
width:60px;
height:60px;
border-radius:30px;
border:2px solid rgba(255,255,255,0.5);
justify-content:center;
align-items:center;
cursor:pointer;
animation-name:btn-anm;
animation-duration:1s;
animation-fill-mode:forwards;
}

@keyframes btn-anm{
	0%{
    transform:translateX(100px);
	}

	100%{
	transform:translate(0);
	}
}

.nav-list{
display:block;
position:fixed;
top:100px;
right:-180px;
text-align:right;
padding:15px 10px 15px 0;
border-radius:30px 0 0 30px;
background:#2E3192;
box-shadow:-8px 8px 0 rgba(0,0,0,0.4);
transition:all 0.5s;
}

.nav-list li{
padding:0;
}

.nav-list li::before{
border-left:none;
}

.nav-list a{
display:block;
font-size:1.1rem;
font-weight:700;
width:160px;
height:50px;
line-height:50px;
padding-right:25px;
color:#fff;
}

.active{
right:-10px;
}

}

/* -------------------
        HOME
---------------------- */

/* ファーストビュー */
#fstv{
display:flex;
flex-direction:column;
position:relative;
}

#cp{
font-size:1.5rem;
font-weight:700;
color:#fff;
text-shadow:2px 2px 2px rgba(0,0,0,0.5);
padding:40px;
background:linear-gradient(-45deg, rgba(0, 255, 255, 0.4), rgba(237, 221, 24, 0.4));
position:absolute;
top:410px;
right:60%;
z-index:10;
animation-name:cp-anm;
animation-duration:5s;
animation-fill-mode:forwards;
}

@keyframes cp-anm{
	0%{
	opacity: 0;
    transform:translateY(-100px);
	}

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

#cp span{
display:block;
margin-bottom:10px;
}

/* CTA */
#cta{
padding-top:30px;
text-align:center; 
font-size:1.5rem;
font-weight:700;
position:relative;
}

#cta::before{
content:'';
opacity:0.5;
position:absolute;
top:10px;
left:0;
width:100%;
height:250px;
background:url(../img/pattern.svg);
background-size:50%;
}

#cta span{
position:relative;
z-index:1;
}

#cta a,#greet a,#stuff a{
display:block;
width:fit-content;
max-width:600px;
margin:5px auto 0;
padding:14px 50px 16px 83px;
border-radius:50px;
font-size:1.1rem;
font-weight:700;
text-align:center;
color:#333;
background:#EDDD18;
position:relative;
z-index:1;
box-shadow:3px 5px 10px rgba(0,0,0,0.2);
}

#cta a::before,#greet a::before,#stuff a::before{
content:'';
display:inline-block;
width:2rem;
aspect-ratio:191 / 172;
background:url(../img/mark.svg);
background-size:cover;
position:absolute;
top:14px;
left:48px;
animation-name:mark;
animation-duration:4s;
animation-iteration-count:infinite;
}

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

	5%{
	transform:rotate(20deg);
	}

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

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

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

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

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

	25%{
	transform:rotate(0);
	}

	100%{
	transform:rotate(0);
	}

}

/* h1 */
#fstv-h{
width:100%;
max-width:1220px;
margin:0 auto;
padding:20px 30px 50px;
position:relative;
text-align:center;
order:1;
z-index:1;
}

#home h1{
font-size:1.1rem;
font-weight:400;
display:inline;
}

#home h1::after{
content:'は、';
}

#fstv-h p{
display:inline;
font-size:1.1rem;
}

#fstv-h span{
font-size:1.4rem;
font-weight:700;
color:#2E3192;
padding:0 3px;
}

/* スライダー下の青線 */
#slick01::before{
content:'';
position:absolute;
bottom:0;
left:0;
width:50%;
height:15px;
background:#2E3192;
animation-name:slide-under-line-left;
animation-duration:5s;
animation-fill-mode:forwards;
z-index:1;
}

@keyframes slide-under-line-left{
	0%{
	opacity: 0;
    transform:translateX(-100%);
	}

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

#slick01::after{
content:'';
position:absolute;
bottom:0;
right:0;
width:50%;
height:15px;
background:#2E3192;
animation-name:slide-under-line-right;
animation-duration:5s;
animation-fill-mode:forwards;
}

@keyframes slide-under-line-right{
	0%{
	opacity: 0;
    transform:translateX(100%);
	}

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

/* slick */
#slick01{
margin-bottom:0;
overflow:hidden;
}

.slick-dots li button:before{
font-size:17px!important;
color:#fff!important;
}

.slick-active button:before{
opacity:1!important;
}

.slick-dots{
bottom:30px!important;
}

.top1,.top2,.top3,.top4,.top5{
width:100%;
height:700px;
object-fit:cover;
}

.top4{
object-position:50% 10%;
}

.top5{
object-position:80% 50%;
}

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

#cp{
width:fit-content;
padding:40px;
top:calc(100vh - 480px);
left:0;
right:0;
margin:0 auto;
}

.top1,.top2,.top3,.top4,.top5{
height:calc(100vh - 200px);
aspect-ratio:auto;
}

#fstv-h{
padding:20px 30px;
position:relative;
text-align:center;
}

}

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

#cp{
padding:20px;
font-size:1.2rem;
top:calc(100vh - 400px);
}

.slick-dots{
bottom:25px!important;
}

#cta{
padding-top:10px;
}

#cta::before{
height:350px;
background-size:90%;
}

#home h1{
font-size:1rem;
}

#fstv-h p{
font-size:1rem;
}

#fstv-h span{
font-size:1.2rem;
}

#fstv-h h1 span::before{
content:'';
display:block;
}

}

/* about */
#about{
position:relative;
background:#CEF9DC;
z-index:1;
}

#home h2{
height:55px;
line-height:55px;
color:#fff;
text-align:center;
font-size:1.6rem;
background:#009999;
}

h2 span{
font-size:0.7em;
}

#about ul{
display:flex;
justify-content:center;
padding:0 0 80px;
}

#about li{
width:50%;
max-width:600px;
aspect-ratio:1 / 1;
text-align:center;
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
}

#about li a{
display:block;
text-align:center;
font-size:1.4rem;
font-weight:bold;
}

#about ul li:first-child a::before{
content:'';
position:absolute;
bottom:10%;
left:10%;
width:80%;
aspect-ratio:1 / 1;
border-radius:100%;
background:url(../img/maru1.jpg);
background-size:cover;
box-shadow:3px 5px 10px rgba(0,0,0,0.2);
}

#about ul li:last-child a::before{
content:'';
position:absolute;
bottom:10%;
left:10%;
width:80%;
aspect-ratio:1 / 1;
border-radius:100%;
background:url(../img/maru2.jpg);
background-size:cover;
box-shadow:3px 5px 10px rgba(0,0,0,0.2);
}

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

#about ul{
padding:0 0 40px;
}

#about li a{
font-size:1.2rem;
}

#about li{
aspect-ratio:1 / 1.1;
}

#about ul li:first-child a::before{
bottom:18%;
}

#about ul li:last-child a::before{
bottom:18%;
}

}

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

#home h2{
font-size:5.5vw;
}

#about ul{
display:block;
}

#about li{
width:90%;
max-width:450px;
margin:0 auto 30px;
}

#about ul li:last-child{
margin:0 auto;
}

}

/* トップページあいさつ */
#greet,#stuff{
background:#D9E5FF;
padding-bottom:50px;
}

#greet h2,#stuff h2{
background:#2E3192;
}

#greet-fb{
max-width:900px;
margin:40px auto;
padding:0 10px;
display:flex;
justify-content:space-between;
align-items:center;
}

#greet-fb div{
width:200px;
aspect-ratio:300 / 412;
background:url(../img/pfp.jpg);
background-size:cover;
position:relative;
box-shadow:10px 8px 0 rgba(0,0,0,0.3);
z-index:1;
}

#greet-fb div span{
position:absolute;
bottom:5%;
left:-20px;
padding:12px 30px;
background:rgba(255,255,255,0.8);
}

#greet-fb p{
width:calc(100% - 200px);
line-height:2;
position:relative;
}

#greet-fb p span{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:5;
padding:0 20px 0 40px;
position:relative;
z-index:1;
}

#greet-fb p::after{
content:'';
position:absolute;
width:100%;
height:calc(100% + 80px);
top:-40px;
left:0;
background:rgba(255,255,255,0.6);
}

#greet a{
background:#009999;
color:#fff;
padding:14px 20px 16px 63px;
}

#greet a::before{
left:28px;
background:url(../img/mark_w.svg);
background-size:cover;
}

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

#greet-fb{
display:block;
}

#greet-fb div{
width:80%;
max-width:250px;
margin:0 auto;
}

#greet-fb p{
width:calc(100% - 20px);
line-height:1.8;
margin: 40px auto;
}

#greet-fb p span{
padding:0 15px;
}

#greet-fb p::after{
height:calc(100% + 40px);
top:-20px;
left:0;
}

}

/* スタッフ募集 */

#stuff p{
max-width:940px;
padding:0 20px;
margin:60px auto 0;
}

#stuff p:nth-child(3){
margin-top:10px;
}

#stuff a{
margin-top:50px;
background:#009999;
color:#fff;
}

#stuff a::before{
background:url(../img/mark_w.svg);
background-size:cover;
}


/* -------------------
     下層ページ
---------------------- */

/* ページヘッダー */
#class-h{
background:url(../img/pattern_cls.svg);
background-size:45%;
position:relative;
}

#trip-h{
background:url(../img/pattern_trp.svg);
background-size:45%;
position:relative;
}

#comp-h{
background:url(../img/pattern_com.svg);
background-size:45%;
position:relative;
}

#mail-h{
background:url(../img/pattern_mail.svg);
background-size:45%;
position:relative;
}

#class-h::before,
#trip-h::before,
#comp-h::before,
#mail-h::before
{
content:'';
display:block;
width:100%;
height:350px;
background:url(../img/p2.jpg);
background-size:cover;
background-position:50% 20%;
}

#class-h::after,
#trip-h::after,
#comp-h::after,
#mail-h::after
{
content:'CLASS';
display:block;
text-align:center;
padding-top:60px;
line-height:290px;
font-size:7rem;
font-weight:700;
color:#fff;
position:absolute;
top:0;
left:0;
width:100%;
height:290px;
background:linear-gradient(45deg, rgba(0,255,255,0.8), rgba(237,221,24,0.8));
opacity:0.7;
}

#trip-h::before{
background:url(../img/p3.jpg);
background-size:cover;
background-position:50% 10%;
}

#trip-h::after{
content:'CONSIGN';
background:linear-gradient(150deg, rgba(0, 255, 255, 0.8), rgba(242, 12, 122, 0.8));
}

#comp-h::before{
background:url(../img/p4.jpg);
background-size:cover;
background-position:50% 30%;
}

#comp-h::after{
content:'COMPANY';
background:linear-gradient(150deg, rgba(0, 255, 255, 0.8), rgba(32, 158, 2, 0.8));
}

#mail-h::before{
background:url(../img/p5.jpg);
background-size:cover;
background-position:50% 30%;
}

#mail-h::after{
content:'CONTACT';
background:linear-gradient(150deg, rgba(0, 255, 255, 0.8), rgba(244, 60, 11, 0.8));
}

#class-h h1,
#trip-h h1,
#comp-h h1,
#mail-h h1
{
font-size:1.6rem;
max-width:1240px;
padding:0 20px;
margin:30px auto 20px;
}

#class-h p,
#trip-h p,
#comp-h p,
#mail-h p,
#class-h ul{
max-width:1240px;
padding:0 20px 30px;
margin:0 auto;
}

#class-h ul{
font-size:1.2rem;
font-weight:700;
}

#comp-h p span{
font-weight:700;
font-size:1.2rem;
display:block;
color:#2E3192;
}

/* ページボディ */
#class-wg,#class-wc,#class-req{
background:#fffdd1;
}

#trip-b{
background:#fff0ea;
}

#comp-b{
background:#eeffe8;
}

#class  main section:nth-child(2)::before,
#class  main section:nth-child(3)::before,
#class  main section:nth-child(4)::before,
#trip  main section:nth-child(2)::before,
#comp  main section:nth-child(2)::before,
#mail  main section:nth-child(2)::before
{
display:block;
width:100%;
height:55px;
line-height:55px;
color:#fff;
text-align:center;
font-size:1.6rem;
font-weight:700;
}

#class-wg::before{
content:'1.WONDER GYMNASTIC';
background:#EDDD18;
}

#class-wc::before{
content:'2.WONDER COMMUNITY CLASS';
background:#EDDD18;
}

#class-req::before{
content:'3.REQUEST CLASS';
background:#EDDD18;
}

#trip-b::before{
content:'Fun and Strict';
background:#bf5468;
}

#comp-b::before{
content:'Greetings';
background:#009999;
}

#mail-b::before{
content:'Contact form';
background:#2E3192;
}

.cls-fb{
max-width:1240px;
padding:20px 20px 50px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
align-items:center;
}

.section-top{
order:-1;
width:45%;
box-shadow:10px 8px 0 rgba(0,0,0,0.3);
}

.cls-fb div{
width:55%;
padding:40px 10px 40px 20px;
background:rgba(255,255,255,0.4);
}

#class h2,
#trip h2,
#comp h2,
#mail h2
{
font-size:1.5rem;
font-weight:700;
color:#2E3192;
margin:20px 0 5px;
}

#class h2:first-child,
#trip h2:first-child,
#comp h2:first-child,
#mail h2:first-child
{
margin-top:0;
}

.cls-fb div p{
line-height:1.7;
margin-bottom:3px;
}

#comp .cls-fb div p:nth-child(2){
font-weight:bold;
}


#class h3,#comp h3{
font-size:1.3rem;
font-weight:700;
border-bottom:1px solid #666;
}

.cls-fb ul:nth-child(2){
width:100%;
margin:0 0 30px;
}

.cls-fb ul:nth-child(2) li{
margin:60px 0 10px;
}

#trip .cls-fb ul:nth-child(2) li{
display:inline-block;
margin:0;
}

#trip .cls-fb ul:nth-child(2) li::after{
content:'・';
padding:0 3px 0 4px;
}

#trip .cls-fb ul:nth-child(2) li:nth-child(1){
display:block;
margin:30px 0 15px;
}

#trip .cls-fb ul:nth-child(2) li:nth-child(1)::after,
#trip .cls-fb ul:nth-child(2) li:last-child::after
{
display:none;
}

#comp .cls-fb ul:nth-child(2) li{
width:100%;
margin:30px 0;
padding:0;
}

.cls-fb ul:nth-child(2) li p span{
display:block;
}

.cls-fb ul li p:nth-child(2){
margin-bottom:5px;
}

.cls-fb ul:last-child{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:30px 0;
}

.cls-fb ul:last-child li{
width:24%;
}

.cls-fb ul:last-child li img{
width:100%;
}

.cls-fb ul:last-child::before{
content:'';
display:block;
width:24%;
order:1;
}

.cls-fb ul:last-child::after{
content:'';
display:block;
width:24%;
}

#comp .cls-fb ul:nth-child(2) li ul{
margin:10px 0;
padding:0;
}

#comp .cls-fb ul:nth-child(2) li ul li{
margin:0;
padding-left:15px;
position:relative;
}

#comp .cls-fb ul:nth-child(2) li ul li::before{
content:'・';
position:absolute;
top:0;
left:0;
}

.ap{
font-weight:700;
color:#2E3192;
}

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

.section-top{
width:100%;
}

.cls-fb div{
width:100%;
padding:20px;
margin:30px 0 0;
}

.cls-fb div p{
margin-bottom:10px;
}

#class h2,
#trip h2,
#comp h2,
#mail h2
{
font-size:1.3rem;
margin:0 0 10px;
}

.cls-fb ul:nth-child(2){
padding:0 10px;
}

.cls-fb ul:nth-child(2) li{
margin:40px 0 10px;
}

.cls-fb ul:last-child li{
width:49%;
margin-bottom:10px;
}

}

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

#class-h,
#trip-h,
#comp-h,
#mail-h
{
background-size:70%;
}

#class-h::before,
#trip-h::before,
#comp-h::before,
#mail-h::before
{
height:150px;
background-position:50% 20%;
}

#class-h::after,
#trip-h::after,
#comp-h::after,
#mail-h::after{
padding-top:42px;
line-height:108px;
font-size:3.5rem;
height:108px;
}

#class  main section:nth-child(2)::before,
#class  main section:nth-child(3)::before,
#class  main section:nth-child(4)::before,
#trip  main section:nth-child(2)::before,
#comp  main section:nth-child(2)::before,
#mail  main section:nth-child(2)::before
{
font-size:5.5vw;
}

.cls-fb{
padding:0;
}

.cls-fb div{
padding:20px 10px 0;
margin:0;
background:none;
}

.section-top{
box-shadow:none;
}

#class h3{
font-size:1.2rem;
}

.pp{
padding:10px;
}

.cls-fb ul:last-child{
padding:10px;
}

.cls-fb ul:last-child li{
width:49%;
margin-bottom:10px;
}

}

/* -------------------
   お問い合わせ
--------------------- */
#mailform{
width: 100%;
max-width:900px;
padding:0 20px 50px;
margin:50px auto 0;
}

#m_tb{
width: 100%;
margin-bottom: 20px;
border-collapse:collapse;
}

.f_item{
text-align: left;
width: 30%;
background-color: #eee;
border: 1px solid #ccc;
padding: 10px;
}

.f_item span{
display:block;
margin-top:8px;
font-weight:400;
font-size:0.8rem;
}

.f_body{
width: 70%;
border: 1px solid #ccc;
padding: 10px;
}

.frame_1{
width: 60%;
border: 1px solid #ccc;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.frame_2{
width: 97%;
height: 300px;
border: 1px solid #ccc;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

#f_sub{
width: 100px;
height: 40px;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #fff;
background: #333333;
display: block;
border-radius: 100vh;
border: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}

#number{
margin-top: 25px;
font-size: 28px;
text-align: center;
font-weight: bold;
}

.ppc{
display: block;
width: 100%;
font-size: 1.2rem;
text-align: center;
}

.privacy-policy {
  max-width: 700px;
  margin: 20px auto;
  height: 200px;
  overflow: scroll;
  padding: 25px;
  border: 1px solid black;
  background-color: #e5e5e5;
  line-height: 1.5;
  &__item {
	p {
	  margin-bottom: 25px;
	}
  }
}

.privacy-policy__item__title{
font-weight: bold;
}

.g-recaptcha{
width:fit-content;
margin:10px auto 20px;
}

#warning{
text-align:center;
padding-bottom:10px;
}

.mail-compl{
min-height:30vh;
}

/* -------------------
         popup
-------------------- */
#popup{
position:fixed;
bottom:15px;
left:-300px;
width:290px;
padding:8px 10px 8px 30px;
border-radius:0 50px 50px 0;
font-weight:700;
background:#EDDD18;
z-index:90;
border:3px solid rgba(255,255,255,0.7);
transition:left 0.5s;
animation-name:pu-anm;
animation-delay:4s;
animation-duration:1s;
animation-fill-mode:forwards;
}

@keyframes pu-anm{
	0%{
    transform:translate(0);
	}

	100%{
	transform:translateX(70px);
	}
}

#popup.pu-active{
left:-80px;
}

#popup a{
display:block;
width:fit-content;
color:#333;
}

#popup::after{
content:'';
width:2.5rem;
aspect-ratio:191 / 172;
background:url(../img/mark.svg);
background-size:cover;
position:absolute;
top:14px;
right:14px;
animation-name:mark;
animation-duration:4s;
animation-iteration-count:infinite;
}

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

	5%{
	transform:rotate(20deg);
	}

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

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

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

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

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

	25%{
	transform:rotate(0);
	}

	100%{
	transform:rotate(0);
	}

}

/* -------------------
         footer
-------------------- */
footer{
color:#fff;
background:#2E3192;
text-align:center;
padding-bottom:15px;
}

footer p{
margin:50px auto 0;
font-size:1.6rem;
font-weight:700;
}

footer ul{
width:110px;
margin:20px auto 60px;
display:flex;
justify-content:space-between;
}

footer li{
width:40px;
}

#foot-logo{
display:block;
margin:0 auto 60px;
width:200px;
}