@charset "utf-8";
/*------------------------------
 ▼共通デザイン（モバイル向け）
 -------------------------------*/
  html{
  font-size:62.5%;
}

body{
  margin:0;
  padding:0;
  font-family: 'Kiwi Maru', serif;
  letter-spacing:1px;
}
h2,h3,h4{
  text-align:center;
}
.pc-br{
display:none;
}
aside{
  display:block;
  background-color:rgb(255,255,255);
  width:250px;
  height:100%;
  position:fixed;
  top:0;
  right:-250px;
  z-index:100000000;
}
button{
  display:block;
  width:50px;
  height:50px;
  font-size:2.5rem;
  border:none;
  position:absolute;
  top:0;
  right:100%;
  background-color:rgb(255,105,180);
  color:white;
}
a{
  text-decoration:none;
}

.g-nav-container-bg{
  width:100%;
  margin:0 auto;
  max-width:2500px;
  background-color:rgb(255,255,255);
}
.g-nav-container{
  width:100%;
  height:50px;
  max-width:2500px;
  position:fixed;
  display:flex;
  justify-content:space-between;
  background-color:rgb(255,255,255);
  z-index:100;
}


.logo{
margin:0 auto;
  margin-top:10px;
}
.logo img{
  display:block;
  width:210px;
}

.g-nav-ul{
  display:block;
  padding:0;
  margin-top:30px;
}
.g-nav-li{
  display:block;
  font-size:1.9rem;
  margin-left:30px;
  height:60px;
  line-height:60px;
}
.g-nav-li a{
  color:rgb(0,0,0);
}
.blog-button{
  display:block;
  font-size:1.9rem;
  color:rgb(255,255,255);
  background-color:rgb(255,105,180);
  width:100%;
  text-align:center;
}
.blog-button:hover{
  color:rgb(255,105,180);
  background-color:rgb(255,255,0);
}



#main-visual{
  padding-top:50px;
}

.main-visual-inner{
  width:100%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  flex-direction: column-reverse;
  justify-content:space-between;
  align-items:center;
  max-width:2500px;
}


.form-button{
  display:block;
  color:rgb(255,255,255);
  font-size:1.8rem;
  font-weight:bold;
  background-color:rgb(255,105,180);
  width:90%;
  margin:0 auto;
  margin-top:10px;
  margin-bottom:30px;
  text-align:center;
  padding:6px 0px;
  border-radius:10px;
}
.form-button:hover{
  color:rgb(255,105,180);
  background-color:rgb(255,255,0);
}



.question-content{
  width:80%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:20px;
}
h2.question-heading{
  font-size:2.5rem;
  color:rgb(103,193,255);
  font-weight:bold;
  text-align:left;
}
.question-txt{
  font-size:1.8rem;
}


.bg-img-content{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
width:80%;
margin:0 auto;
}





.suggestion-content{
  width:80%;
  margin:0 auto;
}
.suggestion-ttl{
  text-align:center;
  color:rgb(103,193,255);
  font-size:2.2rem;
  font-weight:bold;
  padding:20px 0px;
}



/* h3制御部分ここから */
h3{
  font-size:2.5rem;
  position:relative;
  margin-top:90px;
  margin-bottom:50px;
}
h3::before{
  position:absolute;
  content:'';
  display:block;
  top:-80px;
  left:50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*菴咲ｽｮ隱ｿ謨ｴ*/
  width:80px;
  height:80px;
  margin:0 auto;
  background-size: cover;
  background-repeat:no-repeat;
}
h3::after{
  content:"";
  position:absolute;
  top:50px;
  left:50%;
  width:60px;
  height:2px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*菴咲ｽｮ隱ｿ謨ｴ*/
  background-color: rgb(228,26,0);
}
h3.feature-heading::before{
  background-image:url(img/each-section-illust1.gif);
}
h3.movie-heading::before{
  background-image:url(img/each-section-illust2.gif);
}
h3.reason-heading::before{
  background-image:url(img/each-section-illust3.gif);
}
h3.course-heading::before{
  background-image:url(img/each-section-illust4.gif);
}
h3.profile-heading::before{
  background-image:url(img/each-section-illust5.gif);
}
h3.voice-heading::before{
  background-image:url(img/each-section-illust6.gif);
}
h3.access-heading::before{
  background-image:url(img/each-section-illust7.gif);
}
h3.form-heading::before{
  background-image:url(img/each-section-illust8.gif);
}
/* h3制御部分ここまで */



/* 「カリキュラムの特徴」ここから */
#feature{
  padding-top: 10px;
  margin-top: -10px;
}

.feature-inner{
  margin-top:150px;
}
.feature-content{
  width:80%;
  margin:0 auto;
  margin-bottom:60px;
  display:flex;
  flex-direction:column;
  align-items: start;
  border-top:solid 1px rgb(150,150,150);
}
.feature-content:first-child{
    border-style:none;
}

h4.feature-different-heading{
  color:rgb(255,255,255);
  background-color:rgb(103,193,255);
  text-align:center;
  font-size:2.2rem;
  height:40px;
  line-height:40px;
  border-radius:10px;
}
h4.feature-different-heading.a{
  background-color:rgb(90,90,90);
}


.half.a{
text-align:center;
margin:0 auto;
margin-top:30px;
width:80%;
max-width:400px;
}

.half.a img{
width:100%;
}

.half.b{
  width:100%;
}

.half.b img{
  width:100%;
  height:350px;
  object-fit:cover;
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
}

.half.c{
  width:70%;
  max-width:260px;
  margin:0 auto;
}
.half.c img{
width:100%;
}
.half.e{
  width:100%;
}
.half.f{
  width:100%;
}
.half.g{
  width:70%;
  max-width:260px;
  margin:0 auto;
}
.half.h{
  width:100%;
}

.half.i{
  display:inline-block;
  width:90%;
  padding-bottom:56.25%;
  height:0;
  position:relative;
}
.half.i iframe{
position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.half.i:nth-child(n + 2){
margin-top:30px;
}
.half.j{
  width:100%;
}
.half.k{
  width:50%;
  max-width:200px;
  margin:0 auto;
}
.half.l{
  width:100%;
}

.half.m{
  width:90%;
  max-width:500px;
  margin:0 auto;
}

.half.n{
  display:inline-block;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  position:relative;
  margin-top:30px;
}
.half.n iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.half.g img{
  width:100%;
}

.quarter.a,.quarter.b{
  width:45%;
  max-width:400px;
  margin:0 auto;
  background-color:rgb(103,193,255);
  border-radius:10px;
  margin-bottom:10px;
}

.quarter.a{
  background-color:transparent;
}

.quarter.a img{
width:100%;
}


.feature-different-content{
  display:flex;
  flex-direction:column;
}
.feature-different-ttl{
  font-size:2.8rem;
  text-align:left;
}
.feature-different-txt{
  font-size:1.8rem;
}
/* 「カリキュラムの特徴」ここまで */



/* 「授業動画」ここから */
#movie{
  padding-top: 10px;
  margin-top: -10px;
}
.movie-bg{
  background-color:rgb(255,255,0);
  width:100%;
  max-width:2500px;
  margin:0 auto;
}
.movie-inner{
  width:100%;
  margin:0 auto;
  padding-top:30px;
  padding-bottom:40px;
}
.movie-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 auto;
}
/* 「授業動画」ここまで */




/* 「選ばれる理由」ここから */
#reason{
  padding-top: 10px;
  margin-top: -10px;
}
.reason-inner{
  width:90%;
  margin:0 auto;
  margin-top:150px;
}
.reason-content{
  display:flex;
  flex-wrap:wrap;
}


p.reason-txt{
  color:white;
  text-align:center;
  font-size:2.5rem;
  font-weight:bold;
}
.reason-img{
  text-align:center;
}
.reason-img img{
  width:45%;
  margin:0 auto;
}
/* 「選ばれる理由」ここまで */




/* 「コース・料金」ここから */
#course{
  padding-top: 10px;
  margin-top: -10px;
}
.course-bg{
  background-color:rgb(240,240,240);
  width:100%;
  max-width:2500px;
  margin:0 auto;
  margin-top:60px;
}
.course-inner{
  width:90%;
  margin:0 auto;
  padding-top:30px;
  padding-bottom:40px;
}

.table-bg{
background-color:rgb(255,255,255);
border-radius:20px;
padding:15px;
}

tr{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:space-between;
align-items: center;
margin:20px 0;
padding-bottom:20px;
border-bottom:solid 1px rgb(200,200,200);
}

tr:first-child{
margin-top:0;
}


th.course-ttl,td.course-txt{
displaly:block;
width:100%;
}


th.course-ttl{
padding:10px 0;
border-radius:10px;
font-size:2rem;
color:rgb(255,255,255);
}
td.course-txt{
font-size:1.8rem;
margin-top:10px;
}
.course-price,.material-price{
display:inline-block;
font-size:2rem;
font-weight:bold;
padding-top:7px;
}

.rhythmic{
background-color:rgb(250,80,150);
}
.red{
background-color:rgb(250,0,0);
}
.yellow{
background-color:rgb(255,238,0);
}
.green{
background-color:rgb(51,198,50);
}
.blue{
background-color:rgb(0,200,220);
}
.purple{
background-color:rgb(190,70,150);
}
.private{
background-color:rgb(240,0,70);
}

.material-price{
display:block;
text-align:center;
}

.annotation{
text-align:center;
font-size:1.3rem;
}

.eiken_banner{
padding: 1em 0;
display: block;
}

/* 「コース・料金」ここまで */





/* 「講師プロフィール」ここから */
#profile{
  padding-top: 10px;
  margin-top: -10px;
}
.profile-inner{
  width:80%;
  margin:0 auto;
  margin-top:150px;
  padding-bottom:20px;
  border-bottom:solid 1px rgb(220,220,220);
}
.profile-content{
  display:flex;
  flex-direction:column;
}
.half.k img{
  width:100%;
}
.profile-txt{
  font-size:1.8rem;
  line-height:3rem;
}
/* 「講師プロフィール」ここまで */



/* 「体験者の声」ここから */
#voice{
  padding-top: 10px;
  margin-top: -10px;
}
.voice-inner{
  width:90%;
  margin:0 auto;
  margin-top:0px;
  margin-bottom:80px;
}
.voice-content{
  display:flex;
  flex-direction:column;
}
.three{
  width:100%;
  border-bottom:solid 1px rgb(200,200,200);
  padding-bottom:40px;
}
.three:last-child{
border:none;
}

.voice-img{
  text-align:center;
}
.voice-img img{
  width:70%;
  max-width:300px;
}
.voice-txt{
  font-size:1.8rem;
}
/* 「体験者の声」ここまで */



/* 「アクセス」ここから */
#access{
  padding-top: 10px;
  margin-top: -10px;
}
.access-bg{
  width:100%;
  background-color:rgb(110,210,230);
  max-width:2500px;
  margin:0 auto;
}
.access-inner{
  width:90%;
  margin:0 auto;
  padding-top:30px;
  padding-bottom:40px;
}
.access-ttl{
font-size:2.8rem;
text-align:center;
}
.access-txt{
  font-size:1.6rem;
}
.access-content{
  display:flex;
  flex-direction:column;
  padding-bottom:60px;
  border-bottom:solid 1px rgb(0,0,0);
}
.access-content:last-child{
border:none;
}
.half.m img{
  width:100%;
}
/* 「アクセス」ここまで */



/* 「お問い合わせ」ここから */
#form{
  padding-top: 10px;
  margin-top: -10px;
}
.form-inner{
  width:100%;
  margin:0 auto;
  margin-top:180px;
}
.form-content{
  text-align:center;
}
/* 「お問い合わせ」ここまで */


/* footer部分ここから */
.footer-bg{
  width:100%;
  background-color:rgb(0,185,239);
  max-width:2500px;
  margin:0 auto;
}
.footer-inner{
  width:100%;
  margin:0 auto;
}
.copyright{
  color:rgb(255,255,255);
  text-align:center;
  margin:0;
  padding:10px 0;
}
/* footer部分ここまで */

/*------------------------------
 ▼タブレット
 -------------------------------*/
@media screen and (min-width: 768px) {
.mobile-br{
display:none;
}
.pc-br{
display:block;
}

.logo img{
  width:260px;
}

.main-visual-inner{
  width:100%;
  flex-direction: row;
}

.half.a{
  width:28%;
  margin-top:0px;
  max-width:470px;
}

.half.b{
  width:65%;
}
.half.b img{
height:auto;
border-top-left-radius:80px;
border-bottom-left-radius:80px;
}


.half.g{
width:40%;
}
.half.h{
width:60%;
}

h2.question-heading{
font-size:3rem;
  font-weight:bold;
  text-align:left;
}
.question-txt{
  font-size:1.8rem;
}


.bg-img{
width:22%;
}
.bg-img:nth-child(n + 3){
margin-top:0px;
}
.bg-img img{
width:100%;
}


.suggestion-ttl{
  text-align:center;
  font-size:3rem;
  font-weight:bold;
  padding:20px 0px;
}
  
.reason-content{
  flex-direction:row;
  flex-wrap: wrap;
}

.quarter.a,.quarter.b{
  width:24%;
}

.feature-different-content{
  flex-direction:row;
  justify-content:space-between;
}

.voice-content{
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
}

/* 「コース・料金」ここから */
tr{
display:flex;
flex-direction:row;
}
th.course-ttl{
displaly:block;
width:29%;
padding:20px 0;
}
td.course-txt{
displaly:block;
width:68%;
}
/* 「コース・料金」ここまで */
}

/*------------------------------
 ▼PC
 -------------------------------*/
@media screen and (min-width: 1024px) {
aside{
  position: static;
  width:100%;
  margin: 0 auto;
  z-index:1000000;
}
button{
display:none;
}

.g-nav-container{
  height:80px;
  line-height:80px;
}


.logo{
  margin:0;
  margin-left:10px;
 margin-top:20px;
}
.logo img{
  width:350px;
}

.g-nav-ul{
  display:inline;
}
.g-nav-li{
  display:inline;
  font-size:1.5rem;
  margin-right:20px;
  margin-left:0;
}

.blog-button{
  display:inline-block;
  font-size:1.5rem;
  width:120px;
}

#main-visual{
  padding-top:80px;
}

.main-visual-inner{
  width:100%;
  justify-content: space-between;
}




.form-button{
  font-size:2.3rem;
  margin-top:30px;
  margin-bottom:0;
  width:95%;
  padding:10px 0px;
}

.question-content{
  width:1080px;
  flex-direction:row;
  justify-content:center;
}

.suggestion-content{
margin-top:50px;
  width:1080px;
}


/* 「カリキュラムの特徴」ここから */
.feature-content{
  width:1080px;
  flex-direction:row;
  justify-content:space-between;
  border-style:none;
}
.half.c{
  width:45%;
  margin:0;
}
.half.d{
width:55%;
}
.half.e{
width:45%;
}
.half.f{
  width:54%;
}
.half.g{
width:50%;
}
.half.h{
width:50%;
}

.half.i{
padding-bottom:0; 
width:32%;
height:300px;
}
.half.i:nth-child(n + 2){
margin-top:0;
}

.half.j{
width:48%;
}
.half.k{
width:30%;
text-align:center;
}
.half.l{
width:68%;
}
.half.m{
width:39%;
}
.half.n{
  width:59%;
  padding-bottom:0;
  height:400px;
  margin-top:0;
}

/* 「カリキュラムの特徴」ここまで */



/* 「授業動画」ここから */
#movie{
padding-top: 10px;
margin-top: -10px;
}
.movie-inner{
  width:1080px;
  margin:0 auto;
  padding-top:30px;
  padding-bottom:40px;
}
.movie-content{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  margin:0 auto;
}

/* 「授業動画」ここまで */




/* 「選ばれる理由」ここから */
#reason{
padding-top: 10px;
margin-top: -10px;
}
.reason-inner{
  width:1080px;
  margin:0 auto;
  margin-top:150px;
}
.reason-content{
flex-direction:row;
}

p.reason-txt{
color:white;
text-align:center;
font-size:2.5rem;
font-weight:bold;
}
.reason-img{
text-align:center;
}
.reason-img img{
width:45%;
}
/* 「選ばれる理由」ここまで */




/* 「コース・料金」ここから */
.course-inner{
  width:1080px;
}
/* 「コース・料金」ここまで */



/* 「講師プロフィール」ここから */
.profile-inner{
  width:1080px;
  padding-bottom:60px;
}
.profile-content{
  flex-direction:row;
  jusitify-content:space-between;
}
.half.k img{
  width:100%;
}
/* 「講師プロフィール」ここまで */



/* 「体験者の声」ここから */
.voice-inner{
width:1080px;
margin-top:150px;
}
.voice-content{
flex-direction:row;
justify-content:space-between;
}
.three{
width:30%;
border:none;
}
.voice-img img{
width:80%;
}
/* 「体験者の声」ここまで */



/* 「アクセス」ここから */
.access-inner{
width:1080px;
}
.access-content{
flex-direction:row;
justify-content:space-between;
align-items: start;
}
/* 「アクセス」ここまで */



/* 「お問い合わせ」ここから */
.form-inner{
width:1080px;
}
/* 「お問い合わせ」ここまで */

/* footer部分ここから */
.footer-inner{
width:1080px;
}
/* footer部分ここまで */

}