@charset 'UTF-8';

/* .topimg
================================================== */
.topimg {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 400px;
  overflow:hidden;
}

#bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

@media screen and (max-width: 800px) {
#bg {
background-attachment: scroll;
}
}

#dot {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url(../images/top/raster.png);
    z-index:-1;
}

#top_row {
  width: 100%;
  height:100%;
  position: absolute;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to top, rgba(000, 000, 000, 1), rgba(000, 000, 000, 0));
  background: linear-gradient(to top, rgba(000, 000, 000, 1) 5%,rgba(000, 000, 000, 0.8) 10%,rgba(000, 000, 000, 0.6) 15%,rgba(000, 000, 000, 0.3) 25%,rgba(000, 000, 000, 0) 60%);
  opacity: 0.9;
  z-index:-1;
}

@media screen and (max-width: 800px) {
#top_row {
 position: absolute;
}
}

#girl{
  width: 28%;
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 1;
}

@media screen and (max-width: 800px) {
#girl{
  width: 60%;
  position: absolute;
  right: -20%;
}
}

@media screen and (max-width: 568px) {
#girl{
  width: 75%;
  position: absolute;
  right: -25%;
}
}

#girl img{
  width: 100%;
  height:auto;
}

#top_catch{
  width: 70%;
  max-width: 900px;
  z-index: 1;
}

@media screen and (max-width: 800px) {
#top_catch{
  width: 80%;
}
}

@media screen and (max-width: 568px) {
#top_catch{
  width: 90%;
}
}

#top_catch img{
  width: 100%;
  height:auto;
}

/* top_info
================================================== */
#top_info  {
  text-align: left;
  z-index: 2;
  width:100%;
  bottom: 15%;
  left: 0;
  position: absolute;
  color:#FFF;
  box-sizing: border-box;
  padding-left:8%;
  z-index: 1;
}

@media screen and (max-width: 568px) {
#top_info  {
  bottom: 8%;
  padding:0 0 0 8%;
}
}

#top_info .tp-ttl {
  font-size:1.1em;
  padding-left:5px;
  font-weight:400;
  font-family: 'Roboto', sans-serif;
  letter-spacing : 0.05em;
}

#top_info .tp-txt{
  font-size:1.25em;
  padding-left:5px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:400;
}

#top_info h1{
  font-size:3em;
  font-family: "M PLUS 1p";
  font-weight:400;
  line-height:1.5;
  padding:1% 0;
}

@media screen and (max-width: 568px) {
#top_info .tp-ttl {
  padding-left:2px;
}


#top_info .tp-txt{
  font-size:1em;
  padding-left:2px
}
#top_info h1{
  font-size:2em;
}
}

/* topimg_row
================================================== */
#topimg_row {
  width: 350px;
  height:auto;
  position:absolute;
  top:45%;
  left:50%;
  margin-left:-175px;
  margin-top:-175px;
}

@media screen and (max-width: 800px) {
#topimg_row {
  width: 240px;
  margin-left:-120px;
  margin-top:-120px;
}
}

@media screen and (max-width: 568px) {
#topimg_row {
  width: 150px;
  margin-left:-75px;
  margin-top:-75px;
}
}

/* wave
================================================== */
.wave {
    background-image: url(../images/top/wave.png);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-repeat: repeat-x;
    background-size: 1920px 30px;
    position: absolute;
    z-index: 1;
    -webkit-animation: waveAnime 5s linear infinite;
    animation: waveAnime 5s linear infinite;
}
@-webkit-keyframes waveAnime {
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}
@keyframes waveAnime { 
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@media screen and (max-width: 568px) {
.wave {
  height: 10px;
  background-size: 640px 10px;
}
@-webkit-keyframes waveAnime {
0% {background-position: 0 0}
100% {background-position: 640px 50%;}
}
@keyframes waveAnime { 
0% {background-position: 0px 50%;}
100% {background-position: 640px 50%;}
}
}

/* wave2
================================================== */
.wave2 {
    background-image: url(../images/top/wave2.png);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-repeat: repeat-x;
    background-size: 1920px 30px;
    position: absolute;
    z-index: 2;
    -webkit-animation: waveAnime2 3s linear infinite;
    animation: waveAnime2 3s linear infinite;
}
@-webkit-keyframes waveAnime2 {
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}
@keyframes waveAnime2 { 
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@media screen and (max-width: 568px) {
.wave2 {
  height: 10px;
  background-size: 640px 10px;
}
@-webkit-keyframes waveAnime2 {
0% {background-position: 0 0;}
100% {background-position: 640px 50%;}
}
@keyframes waveAnime2 { 
0% {background-position: 0px 50%;}
100% {background-position: 640px 50%;}
}
}

/* wave3
================================================== */
.wave3 {
    background-image: url(../images/top/wave3.png);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-repeat: repeat-x;
    background-size: 1920px 30px;
    position: absolute;
    z-index: 2;
    -webkit-animation: waveAnime3 2.5s linear infinite;
    animation: waveAnime3 2.5s linear infinite;
}
@-webkit-keyframes waveAnime3 {
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}
@keyframes waveAnime3 { 
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@media screen and (max-width: 568px) {
.wave3 {
  height: 10px;
  background-size: 640px 10px;
}
@-webkit-keyframes waveAnime3 {
0% {background-position: 0 0;}
100% {background-position: 640px 50%;}
}
@keyframes waveAnime3 { 
0% {background-position: 0px 50%;}
100% {background-position: 640px 50%;}
}
}

/* site_info
--------------------------------------------------*/
.site_info{
  width:100%;
  box-sizing: border-box;
  padding:2.5% 0 3.5%;
  position:relative;
  background :#FFF;
}

@media screen and (max-width: 800px) {
.site_info{
  padding:3% 2% 5%;
}
}

@media screen and (max-width: 568px) {
.site_info{
  padding:3% 1% 3%;
}
}

.site_info .character{
 position: absolute;
 right:5%;
 bottom:4%;
 width:12%;
}

@media screen and (max-width: 800px) {
.site_info .character{
 right:1%;
 top:140px;
 width:20%;
}
}

@media screen and (max-width: 568px) {
.site_info .character{
 top:55px;
 width:16%;
 right:5px;
 z-index:3;
}
}

.site_info .character img{
  width:100%;
  height:auto;
}

.site_info h2{
 text-align: center;
 font-size:2.2em;
 margin-bottom:3%;
 font-size:2.2em;
 font-family: 'Noto Sans Japanese', sans-serif;
 font-weight:600;
 color:#000;
}

@media screen and (max-width: 800px) {
.site_info h2{
 font-size:1.8em;
}
}

@media screen and (max-width: 568px) {
.site_info h2{
 font-size:1.5em;
 margin-top:2%;
}
}

.site_info h2 span {
  background: linear-gradient(transparent 75%, #FFD200 75%);
  padding-right:10px;
  padding-left:10px;
}

.sin-tit {
  margin-bottom:3%;
  text-align: center;
}

@media screen and (max-width: 568px) {
.sin-tit {
  margin-bottom:2%;
}
}

.sin-tit img {
  display: inline-block;
  vertical-align: middle;
  margin-left:5px;
  margin-right:5px;
  width:174px;
  height:auto;
}

.sin-tit p{
  font-size:2em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  margin-bottom:1%;
  color:#000;
  vertical-align: middle;
}

@media screen and (max-width: 800px) {
.sin-tit img {
  width:150px;
}

.sin-tit p{
 font-size:1.8em;
}
}

@media screen and (max-width: 568px) {
.sin-tit img {
  margin:5px;
  width:120px;
}

.sin-tit p{
 font-size:1.6em;
 font-weight:500;
}
}

.site_info .catch span{color:#EF256C;font-weight: 500;font-size:1.05em;}

.site_info .catch{
 font-size:1.1em;
 line-height:2;
 font-family: 'Noto Sans Japanese', sans-serif;
 font-weight: 400;
 text-align: center;
 margin-bottom:10px;
}

@media screen and (max-width: 568px) {
.site_info .catch{
 font-size:0.95em;
 line-height:1.8;
}
}

.site_info .catch2{
 font-size:1.1em;
 line-height:2;
 font-family: 'Noto Sans Japanese', sans-serif;
 font-weight: 400;
 text-align: center;
}

@media screen and (max-width: 568px) {
.site_info .catch2{
 font-size:0.9em;
 line-height:1.8;
 text-align: left;
 padding:0 2%;
}
}

.menu_btn {
  width:96%;
  max-width:1100px;
  margin:1% auto 2%;
}

@media only screen and  (max-width: 568px) {
.menu_btn {
  width:94%;
  margin:1% 3% 5%;
}
}

.menu_btn ul {
  width:100%;
  box-sizing:border-box;
  display:table;
  border-collapse: separate;
  border-spacing: 10px 0;
  text-align: center;
}

.menu_btn ul li {
  display:table-cell;
  width:25%;
  text-align:center;
  transition: all .3s;
  vertical-align:middle;
  position: relative;
  line-height:1.4;
}

@media only screen and  (max-width: 800px) {
.menu_btn ul {
  width:100%;
  display:block;
  border-spacing: 0;
}

.menu_btn ul li {
  display:inline-block;
  width:47%;
  margin:1% 1% 2%;
}
}

@media only screen and  (max-width: 568px) {
.menu_btn ul li {
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:1% 0;
}
}

.menu_btn ul li a {
  width:100%;
  display:block;
  color:#FFF;
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
  padding:35px 0;
  box-sizing:border-box;
  text-decoration: none;
}

@media screen and (max-width: 568px) {
.menu_btn ul li a {
  padding:20px 0;
}
}

.menu_btn a:hover {
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
  color:#fff;
  text-decoration: none;
}

.menu_btn ul li a.gr {
  background: #6FC191;
}

.menu_btn a.gr:hover {
  background: #6AB78A;
}

.menu_btn ul li a.sky {
  background: #74CEE4;
}

.menu_btn a.sky:hover {
  background: #67C5DC;
}

.menu_btn ul li a.sky2 {
  background: #F37F53;
}

.menu_btn a.sky2:hover {
  background: #EB7B50;
}

.menu_btn ul li a.yel {
  background: #EDBF47;
}

.menu_btn a.yel:hover {
	 background: #E0B84E;
}

.menu_btn li p {
  font-size:1.1em;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
  line-height:1.4;
  position: relative;
}

.menu_btn li small {
  font-size:0.8em;
  font-weight:400;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
}

.menu_btn li img {
  height:90%;
  width:auto;
  margin:0;
  position: absolute;
  top: 5%;
  left: 0;
}

/* #full-photo
-------------------------------------------------- */
#full-photo{
  width:100%;
  margin:0 0;
  float:left;
  clear:both;
}

@media screen and (max-width: 800px) {
#full-photo{
  position: relative;
}
}


.bgspace60{
  width: 100%;
  height: 70vh;
  float:left;
}

@media screen and (max-width: 800px) {
.bgspace60{
  height: 300px;
  z-index:-2;
  position: relative;
}
}

.okinawa_bg {
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
  background-image:url("../images/bg_okinawa.jpg");
}

@media screen and (max-width: 800px) {
.okinawa_bg{
  background:none;
}
}

@media screen and (max-width: 800px) {
.okinawa_bg_sp{
  position: absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:300px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: top center;
  background-image:url("../images/bg_okinawa.jpg");
}
}

@media screen and (max-width: 568px) {
.okinawa_bg_sp{
  background-image:url("../images/bg_okinawa_sp.jpg");
}
}

.miyako_bg {
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
  background-image:url("../images/bg_miyako.jpg");
}

@media screen and (max-width: 800px) {
.miyako_bg{
  background:none ;
}
}

@media screen and (max-width: 800px) {
.miyako_bg_sp{
  position: absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:300px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: top center;
  background-image:url("../images/bg_miyako.jpg");
}
}

@media screen and (max-width: 568px) {
.miyako_bg_sp{
  background-image:url("../images/bg_miyako_sp.jpg");
}
}

.online_bg {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
  background-image:url("../images/bg_online.jpg");
}

@media screen and (max-width: 800px) {
.online_bg{
  background:none ;
}
}

@media screen and (max-width: 800px) {
.online_bg_sp{
  position: absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:300px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: bottom center;
  background-image:url("../images/bg_online.jpg");
}
}

@media screen and (max-width: 568px) {
.online_bg_sp{
  background-image:url("../images/bg_online_sp.jpg");
}
}

/* .okinawa-box
-------------------------------------------------- */
.okinawa-box{
  padding:3% 0 3%;
  width:100%;
  float:left;
  background :#E8F7FA;
  position:relative;
}

@media screen and (max-width: 1280px) {
.okinawa-box{
 padding:3% 2%;
 box-sizing:border-box;
}
}

@media screen and (max-width: 800px) {
.okinawa-box{
 padding:3.5% 2%;
}
}

@media screen and (max-width: 568px) {
.okinawa-box{
 padding:5% 2%;
}
}

.okinawa-box .okinawa{
 position: absolute;
 right:0;
 top:-150px;
 width:550px;
}

@media screen and (max-width: 800px) {
.okinawa-box .okinawa{
  width:60%;
  top:-90px;
}
}

@media screen and (max-width: 568px) {
.okinawa-box .okinawa{
  width:90%;
  top:-70px;
}
}

.okinawa-box .okinawa img{
  width:100%;
  height:auto;
}

.okinawa-box h3{
  font-size:2.2em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  color:#30ABC0;
  line-height:1.4;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 800px) {
.okinawa-box h3{
  font-size:1.8em;
}
}

@media screen and (max-width: 568px) {
.okinawa-box h3{
  font-size:1.6em;
  padding-top:15px;
}
}

.okinawa_ph{
  width:40%;
  float:left;
}

@media screen and (max-width: 800px) {
.okinawa_ph{
  margin:3% 10%;
  width:80%;
}
}

@media screen and (max-width: 568px) {
.okinawa_ph{
  width:98%;
  padding: 2% 0 4%;
  margin:0 1%;
}
}

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

.okinawa_syousai{
  width:60%;
  padding: 1% 0 1% 5%;
  box-sizing: border-box;
  float:right;
}

@media screen and (max-width: 800px) {
.okinawa_syousai{
  width:100%;
  padding: 1% 3%;
}
}

@media screen and (max-width: 568px) {
.okinawa_syousai{
  width:100%;
  padding: 1% 1%;
}
}

.okinawa_syousai p{
  color:#000;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 300;
  line-height:1.8;
  margin:5px 0;
}

.okinawa_syousai span{
  color:#EF256C;
  font-size:1.1em;
  font-weight: 500;
}

@media screen and (max-width: 568px) {
.okinawa_syousai p{
  font-size:0.9em;
}
}

.okinawa_syousai2{
  width:60%;
  padding: 1% 0 0 5%;
  box-sizing: border-box;
  float:right;
}

@media screen and (max-width: 800px) {
.okinawa_syousai2{
  width:100%;
  padding: 1% 3%;
}
}

@media screen and (max-width: 568px) {
.okinawa_syousai2{
  width:100%;
  padding: 1% 1%;
}
}

.place{
  width:100%;
  margin:2% 0 0;
}

.place dl{
  width:98%;
  display:table;
}

@media screen and (max-width: 800px) {
.place dl{
  width:100%;
}
}

.place dt{
  width:25%;
  display:table-cell;
  background:#73CFF1;
  padding:12px 5px;
  box-sizing:border-box;
  vertical-align:middle;
  color:#FFF;
  text-align: center;
}

@media screen and (max-width: 568px) {
.place dt{
  width:35%;
  padding:10px 5px;
}
}

.place dt .fa{
  font-size:1.3em;
  margin-right:10px;
  display:inline-block;
  vertical-align:middle;
}

.place dt p{
  font-size:1.1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 300;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 568px) {
.place dt p{
  font-size:1em;
}
}

.place dd{
  width:75%;
  padding:12px 15px 12px 30px;
  display:table-cell;
  box-sizing:border-box;
  background:#FFF;
}

@media screen and (max-width: 568px) {
.place dd{
  padding:12px 10px 12px 15px;
}
}

@media screen and (max-width: 568px) {
.place dd{
  width:65%;
  padding:10px 10px 10px 20px;
}
}

.place dd p{
  font-size:1.5em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 500;
  vertical-align:middle;
  letter-spacing : 0.1em;
}

.course{
  width:100%;
  margin:5px 0;
}

@media screen and (max-width: 568px) {
.course{
  margin:10px 0;
}
}

.course dl{
  width:98%;
  display:table;
}

@media screen and (max-width: 800px) {
.course dl{
  width:100%;
}
}

@media screen and (max-width: 568px) {
.course dl{
  display:block;
}
}

.course dt{
  width:25%;
  display:table-cell;
  background:#73CFF1;
  padding:12px 5px;
  box-sizing:border-box;
  vertical-align:middle;
  color:#FFF;
  text-align: center;
  font-size:1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
}

@media screen and (max-width: 568px) {
.course dt{
  width:100%;
  display:block;
  padding:10px 5px;
}
}
.course dt .fa{
  font-size:1.3em;
  margin-right:7px;
  display:inline-block;
  vertical-align:middle;
}

.course dt p{
  font-size:1.1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 300;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 568px) {
.course dt p{
  font-size:1em;
}
}

.course dd{
  width:75%;
  padding:12px 15px 12px 25px;
  display:table-cell;
  box-sizing:border-box;
  background:#FFF;
}

@media screen and (max-width: 800px) {
.course dd{
  padding:12px 10px 12px 15px;
}
}

@media screen and (max-width: 568px) {
.course dd{
  width:100%;
  display:block;
  padding:10px;
  text-align: center;
}
}

.course li{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  margin:5px 0;
  font-size:1.05em;
}

@media screen and (max-width: 568px) {
.course li{
  font-size:1em;
  margin:0;
}
}

.okinawa_btn{
  font-size:1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  letter-spacing : 0.05em;
  color:#FFF;
  margin-top:40px;
  text-align: center;
  display:block;
}

.okinawa_btn a{display:inline-block;color:#FFF;text-decoration:none;background-color:#2DA4B8;padding:10px 20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.okinawa_btn a:hover{color:#FFF;text-decoration:none;background-color:#90D3DF;}


@media screen and (max-width: 568px) {
.okinawa_btn{
  margin-top:20px;
}
}

#sl_text {
  width: 100%;
  height:auto;
  text-align: center;
}

#sl_text p{
  margin-top:15px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  letter-spacing:0.05em;
  display:block;
  text-align: center;
  color:#2291A4;
}

@media screen and (max-width: 568px) {
#sl_text p{
  margin-top:10px;
  font-weight: 300;
  font-size:0.95em;
}
}

.schedule{
  width: 100%;
  margin:5% auto 0;
  text-align: center;
}

.sche-tx{
  font-size: 1.4em;
  width:80%;
  background:#73CFF1;
  color:#FFF;
  padding:8px 10px 10px;
  display:inline-block;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
  margin-bottom:20px;
  -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
  position: relative;
}

@media screen and (max-width: 568px) {
.sche-tx{
  font-size: 1.3em;
  width:100%;
  display:block;
  box-sizing: border-box;
}
}

.sche-tx::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  content: ' ';
  border: 10px solid transparent;
}

.schedule .bl_bg{
  background:#73CFF1;
}

.bl_bg::after {
  border-top-color:#73CFF1;
}

.schedule .gr_bg{
  background:#61DAA8;
}

.gr_bg::after {
  border-top-color:#61DAA8;
}

.schedule ul{
  width: 100%;
  margin-top:10px;
}

.schedule .w25{
  width: 25%;
  display:inline-block;
  vertical-align:top;
  box-sizing: border-box;
  padding:0 2%;
}

@media screen and (max-width: 568px) {
.schedule .w25{
  width:30%;
  padding:0 5px;
}
}

.schedule .w25 img{
  width: 90%;
  max-width:125px;
  height:auto;
  margin: 0 auto 15px;
}

@media screen and (max-width: 568px) {
.schedule .w25 img{
  margin: 0 auto 10px;
}
}

.schedule .w25 p{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
}

@media screen and (max-width: 568px) {
.schedule .w25 p{
  font-size:13px;
}
}

.schedule .bltx{
  color:#2291A4;
}

.schedule .grtx{
  color:#2BA572;
}
.schedule .w5{
  width: 30px;
  display:inline-block;
  vertical-align:middle;
  padding-top:70px;
}

@media screen and (max-width: 568px) {
.schedule .w5{
  width:3.3333%;
  padding-top:30px;
}
}

.schedule .w5 img{
  width: 100%;
  height:auto;
}

.price{
  color:#FD2754;
  font-size:1.4em;
  margin-right:3px;
  font-weight:500;
  font-family: 'Roboto', sans-serif;
}

.course-name{
  width:100%;
  margin:0 auto 5%;
  box-sizing: border-box;
  padding:0 1%;
  text-align: center;
  display:block;
}

@media screen and (max-width: 800px) {
.course-name{
  margin: 0 auto 4%;
}
}

.online-nm{
  margin-right:20px;
  display:inline-block;
  vertical-align:middle;
  padding:10px 20px;
  line-height:1.4;
  font-weight:400;
  font-family: 'Roboto', sans-serif;
  letter-spacing : 0.05em;
  font-size:1.15em;
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}

@media screen and (max-width: 568px) {
.online-nm{
  margin-right:0px;
  font-size:1.05em;
}
}

.online-nm img {
  display: inline-block;
  vertical-align: middle;
  margin-right:10px;
  width:auto;
  height:15px;
}

@media screen and (max-width: 568px) {
.online-nm img {
  margin-right:8px;
  height:10px;
}
}

.rde{
  color:#FFF;
}

.rde {
  animation: rdeAnime 1.2s infinite alternate;
}
@keyframes rdeAnime{
   0% { background-color:#2E57A5; }
 100% { background-color:#ED155B; }
}

/* .miyako-box
-------------------------------------------------- */
.miyako-box{
  padding:3% 0 3%;
  width:100%;
  float:left;
  background :#E6FAF1;
  position:relative;
}

@media screen and (max-width: 1280px) {
.miyako-box{
 padding:3% 2%;
 box-sizing:border-box;
}
}

@media screen and (max-width: 800px) {
.miyako-box{
 padding:3.5% 2%;
}
}

@media screen and (max-width: 568px) {
.miyako-box{
 padding:5% 2%;
}
}

.miyako-box .miyako{
 position: absolute;
 right:0;
 top:-150px;
 width:550px;
}

@media screen and (max-width: 800px) {
.miyako-box .miyako{
  width:60%;
  top:-90px;
}
}

@media screen and (max-width: 568px) {
.miyako-box .miyako{
  width:90%;
  top:-70px;
}
}

.miyako-box .miyako img{
  width:100%;
  height:auto;
}
.miyako-box h3{
  font-size:2.2em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  color:#56CA9A;
  line-height:1.4;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 800px) {
.miyako-box h3{
  font-size:1.8em;
}
}

@media screen and (max-width: 568px) {
.miyako-box h3{
  font-size:1.6em;
  padding-top:15px;
}
}
.miyako_ph{
  width:40%;
  float:left;
}

@media screen and (max-width: 800px) {
.miyako_ph{
  margin:3% 10%;
  width:80%;
}
}

@media screen and (max-width: 568px) {
.miyako_ph{
  width:98%;
  padding: 2% 0 4%;
  margin:0 1%;
}
}

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

.miyako_syousai{
  width:60%;
  padding: 0 0 1% 5%;
  box-sizing: border-box;
  float:right;
}

@media screen and (max-width: 800px) {
.miyako_syousai{
  width:100%;
  padding: 1% 3%;
}
}

.miyako_syousai p{
  color:#000;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 300;
  line-height:1.8;
  margin:5px 0;
  
}

.miyako_syousai span{
  color:#EF256C;
  font-size:1.1em;
  font-weight: 500;
}

@media screen and (max-width: 568px) {
.miyako_syousai p{
  font-size:0.9em;
}
}

.miyako_syousai2{
  width:60%;
  padding: 1% 0 0 5%;
  box-sizing: border-box;
  float:right;
}

@media screen and (max-width: 800px) {
.miyako_syousai2{
  width:100%;
  padding: 1% 3%;
}
}

@media screen and (max-width: 568px) {
.miyako_syousai2{
  width:100%;
  padding: 1% 1%;
}
}

.mplace{
  width:100%;
  margin:2% 0 0;
}

.mplace dl{
  width:98%;
  display:table;
}


@media screen and (max-width: 800px) {
.mplace dl{
  width:100%;
}
}

@media screen and (max-width: 568px) {
.mplace dl{
  width:100%;
}
}

.mplace dt{
  width:25%;
  display:table-cell;
  background:#61DAA8;
  padding:12px 5px;
  box-sizing:border-box;
  vertical-align:middle;
  color:#FFF;
  text-align: center;
}

@media screen and (max-width: 568px) {
.mplace dt{
  width:35%;
  padding:10px 5px;
}
}

.mplace dt .fa{
  font-size:1.3em;
  margin-right:10px;
  display:inline-block;
  vertical-align:middle;
}

.mplace dt p{
  font-size:1.1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 300;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 568px) {
.mplace dt p{
  font-size:1em;
}
}

.mplace dd{
  width:75%;
  padding:12px 15px 12px 30px;
  display:table-cell;
  box-sizing:border-box;
  background:#FFF;
}

@media screen and (max-width: 568px) {
.mplace dd{
  padding:12px 10px 12px 15px;
}
}

@media screen and (max-width: 568px) {
.mplace dd{
  width:65%;
  padding:10px 10px 10px 20px;
}
}

.mplace dd p{
  font-size:1.5em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 500;
  vertical-align:middle;
  letter-spacing : 0.1em;
}

.mcourse{
  width:100%;
  margin:5px 0 10px;
}

@media screen and (max-width: 568px) {
.mcourse{
  margin:10px 0;
}
}

.mcourse .fa{
  font-size:1.3em;
  margin-right:10px;
  display:inline-block;
  vertical-align:middle;
}

.mcourse dl{
  width:98%;
  display:table;
}

@media screen and (max-width: 800px) {
.mcourse dl{
  width:100%;
}
}

@media screen and (max-width: 568px) {
.mcourse dl{
  display:block;
}
}

.mcourse dt{
  width:25%;
  display:table-cell;
  background:#61DAA8;
  padding:12px 5px;
  box-sizing:border-box;
  vertical-align:middle;
  color:#FFF;
  text-align: center;
  font-size:1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
}

@media screen and (max-width: 568px) {
.mcourse dt{
  width:100%;
  display:block;
  padding:10px 5px;
}
}
.mcourse dt .fa{
  font-size:1.3em;
  margin-right:7px;
  display:inline-block;
  vertical-align:middle;
}

.mcourse dt p{
  font-size:1.1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 300;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 568px) {
.mcourse dt p{
  font-size:1em;
}
}

.mcourse dd{
  width:75%;
  padding:12px 15px 12px 25px;
  display:table-cell;
  box-sizing:border-box;
  background:#FFF;
}

@media screen and (max-width: 800px) {
.mcourse dd{
  padding:12px 10px 12px 15px;
}
}

@media screen and (max-width: 568px) {
.mcourse dd{
  width:100%;
  display:block;
  padding:10px;
  text-align: center;
}
}

.mcourse li{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  margin:5px 0;
  font-size:1.05em;
}

@media screen and (max-width: 568px) {
.mcourse li{
  font-size:1em;
  margin:0;
}
}

.miyako_btn{
  font-size:1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  letter-spacing : 0.05em;
  color:#FFF;
  margin-top:30px;
  text-align: center;
  display:block;
}

.miyako_btn a{display:inline-block;color:#FFF;text-decoration:none;background-color:#39B682;padding:10px 20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.miyako_btn a:hover{color:#FFF;text-decoration:none;background-color:#83DEB9;}

@media screen and (max-width: 568px) {
.miyako_btn{
  margin-top:20px;
}
}

#slm_text {
  width: 100%;
  height:auto;
  text-align: center;
}

#slm_text p{
  margin-top:15px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  letter-spacing:0.05em;
  display:block;
  text-align: center;
  color:#2BA572;
}

@media screen and (max-width: 568px) {
#slm_text p{
  margin-top:10px;
  font-weight: 300;
  font-size:0.95em;
}
}

/* .online-box
-------------------------------------------------- */
.online-box{
  padding:2% 0 5%;
  width:100%;
  float:left;
  background:#FD9A74;
  position:relative;
}

@media screen and (max-width: 1280px) {
.online-box{
 padding:3% 2%;
 box-sizing:border-box;
}
}

@media screen and (max-width: 800px) {
.online-box{
 padding:5% 2%;
}
}

#doton {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url(../images/top/raster_on.png);
}

.online-box .online{
 position: absolute;
 right:0;
 top:-90px;
 width:300px;
}

@media screen and (max-width: 800px) {
.online-box .online{
  width:180px;
  top:-60px;
}
}

@media screen and (max-width: 568px) {
.online-box .online{
  width:45%;
  top:-70px;
}
}

.online-box .online img{
  width:100%;
  height:auto;
}

.online-box h3{
  margin: 0;
  font-size:2.2em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  color: #FFF;
  text-align: center;
  line-height:1.6;
  margin:0 auto 5%;
  text-shadow:1px 1px 1px #DE5D2C;
}

@media screen and (max-width: 800px) {
.online-box h3{
  margin: 0 auto 2%;
  font-size:1.8em;
}
}

.onl_ph{
  width:50%;
  float:right;
}

@media screen and (max-width: 800px) {
.onl_ph{
  margin:3% 10%;
  width:80%;
}
}

@media screen and (max-width: 568px) {
.onl_ph{
  width:98%;
  padding: 2% 0 4%;
  margin:0 1%;
}
}

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

.onl_syousai{
  width:50%;
  padding: 0 5% 1% 0;
  box-sizing: border-box;
  float:left;
}

@media screen and (max-width: 800px) {
.onl_syousai{
  width:100%;
  padding: 1% 3%;
}
}

.onl_syousai p{
  color:#422317;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 500;
  line-height:1.8;
  margin:5px 0;
  font-size:1.05em;
}

.onl_syousai p span {
  background: linear-gradient(transparent 75%, #FFEA3A 75%);
  padding-right:5px;
  padding-left:5px;
}

@media screen and (max-width: 568px) {
.onl_syousai p{
  font-size:0.9em;
}
}

.onl_syousai2{
  width:50%;
  padding: 1% 5% 0 0;
  box-sizing: border-box;
  float:left;
}

@media screen and (max-width: 800px) {
.onl_syousai2{
  width:100%;
  padding: 1% 3%;
}
}

@media screen and (max-width: 568px) {
.onl_syousai2{
  width:100%;
  padding: 1% 1%;
}
}

.onl_syousai2 p{
  color:#422317;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 500;
  line-height:1.8;
  margin:5px 0;
  font-size:1.05em;
}

.onl_syousai2 span{
  background: linear-gradient(transparent 75%, #FFEA3A 75%);
  padding-right:5px;
  padding-left:5px;
}

@media screen and (max-width: 568px) {
.onl_syousai2 p{
  font-size:0.9em;
}
}

/* .enjoy
-------------------------------------------------- */
.enjoy-box{
  padding:3% 0 2%;
  width:100%;
  float:left;
  position:relative;
  text-align: center;
  background:#FFF3ED;
}

@media screen and (max-width: 1280px) {
.enjoy-box{
 padding:3% 2%;
 box-sizing:border-box;
}
}

@media screen and (max-width: 800px) {
.enjoy-box{
 padding:5% 3%;
}
}

@media screen and (max-width: 568px) {
.enjoy-box{
 padding:4%;
}
}

.enjoy-box h4{
  font-size:2.2em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  color: #000;
  line-height:1.6;
  margin:0 auto 3%;
  display:inline-block;
  padding:0 2% 10px;
  border-bottom:3px solid #A5A5A5;
}

@media screen and (max-width: 800px) {
.enjoy-box h4{
  margin: 0 auto 4%;
}
}

@media screen and (max-width: 568px) {
.enjoy-box h4{
  font-size:1.8em;
  padding:0 2% 5px;
}
}

.enjoy-box ul{
  width:100%;
  margin:4% auto;
}

.enjoy-box li{
  width:140px;
  margin:0 20px;
  display:inline-block;
}

@media screen and (max-width: 568px) {
.enjoy-box li{
  width:35%;
  margin:0 5%;
}
}

.enjoy-box li img{
  width:100%;
  height:auto;
}

.enjoy-box p{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  line-height:1.8;
  margin:2% 0;
  font-size:1.05em;
}

@media screen and (max-width: 568px) {
.enjoy-box p{
  font-size:0.9em;
  text-align: left;
}
}

.enjoy-box p span{
  color:#FF5400;
  font-weight: 500;
}

.enjoy-box p strong{
  color:#FF5400;
  font-size:1.5em;
  font-weight: 500;
}

@media screen and (max-width: 568px) {
.enjoy-box p strong{
  font-size:1.3em;
}
}

/* .pay
-------------------------------------------------- */
.pay-box{
  padding:3% 0 2%;
  width:100%;
  float:left;
  position:relative;
  text-align: center;
  background:#F9F9F9;
}

@media screen and (max-width: 1280px) {
.pay-box{
 padding:3% 2%;
 box-sizing:border-box;
}
}

@media screen and (max-width: 800px) {
.pay-box{
 padding:5% 3%;
}
}

@media screen and (max-width: 568px) {
.pay-box{
 padding:4%;
}
}

.pay-box h4{
  font-size:2.2em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  color: #000;
  line-height:1.6;
  margin:0 auto 3%;
  display:inline-block;
  padding:0 2% 10px;
  border-bottom:3px solid #A5A5A5;
}

@media screen and (max-width: 800px) {
.pay-box h4{
  margin: 0 auto 4%;
}
}

@media screen and (max-width: 568px) {
.pay-box h4{
  font-size:1.8em;
  padding:0 2% 5px;
}
}

.pay-box ul{
  width:100%;
  margin:2% auto 4%;
}

.pay-box li{
  width:60px;
  margin:0 5px;
  display:inline-block;
}

@media screen and (max-width: 568px) {
.pay-box li{
  width:40px;
  margin:5px;
}
}

.pay-box li img{
  width:100%;
  height:auto;
}

.pay-box p{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  line-height:1.8;
  margin:2% 0;
  font-size:1.05em;
}

@media screen and (max-width: 568px) {
.pay-box p{
  font-size:0.9em;
  text-align: left;
}
}

.pay-box p span{
  color:#EF256C;
  font-weight: 500;
}

.pay-box p strong{
  color:#EF256C;
  font-size:1.3em;
  font-weight: 500;
}







@media screen and (max-width: 800px) {
.topics{
  width: 100%;
  box-sizing: border-box;
}
}

.topic_left{
  width: 35%;
  margin:0;
  float:left;
  padding-top:2%;
  
}

@media screen and (max-width: 800px) {
.topic_left{
  width: 100%;
  margin:0 0 10px;
}
}

.topic_right{
  width: 55%;
  margin:0 0 20px 0;
  float:right;
  padding:0;
}

@media screen and (max-width: 800px) {
.topic_right{
  width: 100%;
  margin:0 0 5px;
  padding:0;
  float:left;
  display:block;
  position: relative;
  overflow: hidden;
}
}

.insta {
  width:100%;
  margin: 0;
  float:left;
  position: relative;
}

@media screen and (max-width: 800px) {
.insta {
  padding:0 0;
}
}

@media screen and (max-width: 800px) {
.insta {
  margin: 0 0 2%;
  text-align: center;
}
}

.insta .insta_top{
  text-align: center;
}

.insta .insta_top img{
  width:100%;
  max-width:261px;
  height:auto;
  margin:0 auto 10px;
}

@media only screen and  (max-width: 568px) {
.insta .insta_top img{
  max-width:200px;
  margin:0 auto 7px;
}
}

.insta-bt{font-size:14px;position: absolute;top:35px;right:10px;display:inline-block;}
.insta-bt a{color:#FFF;display:inline-block;padding:3px 10px;background-color:#000;text-decoration:none;}
.insta-bt a:hover{color:#FFF;text-decoration:none;background-color:#686868;}

@media screen and (max-width: 800px) {
.insta-bt{
  font-size:14px;position: relative;top:initial;right:initial;margin-top:5px;margin-bottom:10px;
}

.insta-bt a{padding:7px 20px}
}

.youtube{
  width:100%;
  margin: 2% 0;
  float:left;
  background:#FFF;
  box-sizing: border-box;
  padding:3% 3% 2%;
}

.youtube .yomtx{
  display:inline-block;
  width:45%;
  box-sizing: border-box;
  padding:1% 3% 1% 0;
  vertical-align:top;
  text-align: center;
}

@media only screen and  (max-width: 568px) {
.youtube .yomtx{
  display:block;
  width:100%;
  padding:2%;
}
}

.yt{
  width:90%;
  max-width:184px;
  margin:5px;
}

@media only screen and  (max-width: 568px) {
.yt{
  margin:5px auto;
  width:50%;
}
}

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

.youtube .yomtx .yttxt{
  padding:10px 5px;
  font-size:14px;
  text-align: left;
}

.youtube .yomv{
  display:inline-block;
  width:55%;
}

@media only screen and  (max-width: 568px) {
.youtube .yomv{
  display:block;
  width:100%;
  padding:2% 2% 1%;
}
}

.yt-buttons{
  margin-top:5px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  line-height:1;
  display:inline-block;
}

@media screen and (max-width: 568px) {
.yt-buttons{
  text-align: center;
  margin-top:0;
}
}

.yt-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.yt-button.c-button--ghost{display:block;padding:15px 30px;border:1px solid #000;color:#000;background-color:#FFF;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.yt-buttons a{text-decoration:none;}
.yt-buttons a:hover{text-decoration:none;display:inline-table;background-color:#000;color:#FFF;text-shadow:0 0 0 #FFF;}

@media screen and (max-width: 568px) {
.yt-button.c-button--ghost{
  padding:10px 40px;
}

.facebook-wrapper {
  max-width: 500px; /* Facebook Page Plugin �̍ő啝 */
  margin: 0 auto;
}
 
.facebook-wrapper > .fb-page {
  width: 100%;
}
 
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
  width: 100% !important;
}