@charset "utf-8";

/* SP：style_sp.css
 * ************************************************** */

/* common
-------------------------------- */

#content h2 {
    margin: 0 auto;
}

#content a:hover {
    opacity: 0.8;
}

/* main visual
-------------------------------- */

#mainvisual {
    background: url(../../images/afterschool/mv_sp.jpg) no-repeat center top;
    background-size: 100%;
    padding: 68.26% 0 12.06%;
    position: relative;
}
#mainvisual p {
    position: absolute;
    top: 6%; left: 3%;
    width: 52%;
    z-index: 2;
}
#mainvisual::before,
#mainvisual::after {
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    position: absolute;
    width: 100%;
    z-index: 1;
}
#mainvisual::before {
    background-image: url(../../images/afterschool/bg_wave_01_sp.svg);
    height: 12.26vw;
    top: 0; left: 0;
}
#mainvisual::after {
    background-image: url(../../images/afterschool/bg_wave_02.svg);
    height: 2.4vw;
    bottom: 0; left: 0;
}
#mainvisual #topSlider .swiper-wrapper {
    transition-timing-function: linear;
}
#mainvisual #topSlider .mv01 {
    margin-top: 5.6vw;
}
#mainvisual #topSlider .mv03,
#mainvisual #topSlider .mv05 {
    margin-top: 11.73vw;
}
#mainvisual #topSlider .mv04 {
    margin-top: 19.2vw;
}

/* top
-------------------------------- */

#content #top {
    background: #008fff url(../../images/afterschool/bg_top.png) no-repeat center top;
    background-size: 100%;
}
#content #top .container {
    background: url(../../images/afterschool/bg_top.jpg) repeat;
    border-radius: 18px;
    margin: 0 auto;
    padding: 14.84% 0 7.03%;
    position: relative;
    top: -13.33vw;
    width: 85.33%;
    z-index: 1;
}
#content #top h1 {
    margin: 0 auto;
    width: 76.87%;
}
#content #top h1 + p {
    font-size: 10px;
    font-size: 2.66vw;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 2em 0 0 0;
    text-align: center;
}

/* concept */

/* concept */
#content #top .concept {
  padding: 10% 0;
}
#content #top .concept .image {
  padding: 0 12%;
}
#content #top .concept .text {
  background: url(../../images/afterschool/bg_concept_01.png) no-repeat center bottom;
  background-size: 100%;
  margin: 10% 0 0 0;
}
#content #top .concept .text h2 {
  width: 30%;
}
#content #top .concept .text p {
  font-size: 3.46vw;
  line-height: 1.8;
  margin: 5% 0 0 0;
  text-align: center;
}

/* connection */
#content #top .connection {
  background: url(../../images/afterschool/bg_concept_connection_01.png) no-repeat center bottom;
  background-size: 109%;
  margin: -0.7% 0 0 0;
  padding: 0 3% 11%;
  position: relative;
  z-index: 1;
}
#content #top .connection ul {
  border-radius: 15px;
  overflow: hidden;
}
#content #top .connection ul li {
  padding: 6% 8% 6% 10%;
}
#content #top .connection ul li:first-child {
  background: linear-gradient(125.82deg, rgba(89, 194, 225, 1) 0%, rgba(29, 169, 225, 1) 100%);
}
#content #top .connection ul li:nth-child(2) {
  background: linear-gradient(233.33deg, rgba(237, 132, 140, 1) 0%, rgba(237, 108, 150, 1) 100%);
}
#content #top .connection ul li:nth-child(3) {
  background: linear-gradient(50.67deg, rgba(193, 234, 128, 1) 0%, rgba(131, 214, 101, 1) 100%);
}
#content #top .connection ul li:nth-child(4) {
  background: linear-gradient(127.09deg, rgba(236, 145, 62, 1) 0%, rgba(232, 175, 38, 1) 100%);
}
#content #top .connection p {
  margin: 7% auto 0;
  width: 80%;
}

/* power */
#content #top .power {
  border: 2px solid #008fff;
  border-radius: 20px;
  margin: 6% auto 0; 
  padding: 8% 2% 6% 3%;
  position: relative;
  width: 90%;
}
#content #top .power h2 {
  width: 47%;
}
#content #top .power ul li {
  margin: 8% 0 0 0;
}
#content #top .power ul li + li {
  margin-top: 8%;
}

/*feature */
#content #top .feature {
    margin: 3.9% -2.8% 0;
}
#content #top .feature h3 {
    float: left;
    padding: 18.84% 0 19% 5.34%;
    width: 46.2%;
}
#content #top .feature .featureList::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
#content #top .feature .item {
    border-radius: 12px;
    -webkit-box-shadow: 2px 2px 4px 0 rgba(153,153,153,1);
    -moz-box-shadow: 2px 2px 4px 0 rgba(153,153,153,1);
    box-shadow: 2px 2px 4px 0 rgba(153,153,153,1);
    float: left;
    margin: 2.96% 0 0 0;
    overflow: hidden;
    width: 48.96%;
}
#content #top .feature .item:nth-child(2) {
    margin-top: 3.2%;
}
#content #top .feature .item:nth-child(odd) {
    float: right;
}
#content #top .feature .item ul {
    position: absolute;
    bottom: 1.94%; left: 3.03%; right: 3.03%;
}
#content #top .feature .item ul li {
    float: left;
    width: 49%;
}
#content #top .feature .item ul li:last-child {
    float: right;
}

/* other */
#content #top .other {
    margin: 12.81% 0 0 0;
}
#content #top .other h3 {
    margin: 0 auto;
    width: 38.46%;
}
#content #top .other .otherSlider {
    margin: 4.21% 0 0 0;
}
#content #top .other .gallery-thumbs {
    width: 100%;
}
#content #top .other .gallery-thumbs .swiper-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
}
#content #top .other .gallery-thumbs .swiper-slide.swiper-slide-thumb-active img {
    opacity: 0;
}
#content #top .other .gallery-thumbs .swiper-slide:nth-child(1) {
    background-image: url(../../images/afterschool/txt_concept_other_01_on.png);
}
#content #top .other .gallery-thumbs .swiper-slide:nth-child(2) {
    background-image: url(../../images/afterschool/txt_concept_other_02_on.png);
}
#content #top .other .gallery-thumbs .swiper-slide:nth-child(3) {
    background-image: url(../../images/afterschool/txt_concept_other_03_on.png);
}
#content #top .other .gallery-thumbs .swiper-slide:nth-child(4) {
    background-image: url(../../images/afterschool/txt_concept_other_04_on.png);
}
#content #top .other .gallery-thumbs .swiper-slide:nth-child(5) {
    background-image: url(../../images/afterschool/txt_concept_other_05_on.png);
}
#content #top .other .gallery-top {
    margin: 1.44% auto 0;
    width: 86.25%;
}

/* lesson
-------------------------------- */

#content #lesson {
    background-color: #008fff;
    padding: 9.06% 0 4.33%;
}
#content #lesson .container {
    border: 1px solid #ffffff;
    border-radius: 8px;
    margin: 0 auto;
    padding: 0 0 5%;
    width: 67.2%;
}
#content #lesson .images {
    height: 149.06vw;
    position: relative;
}
#content #lesson h2 {
    background-color: #008fff;
    display: table;
    margin: -4.5% auto 0;
    padding: 0 3.75%;
    width: 28%;
}
#content #lesson h2 img {
    width: 100%;
}
#content #lesson p {
    color: #ffffff;
    font-size: 10px;
    font-size: 2.66vw;
    letter-spacing: 0.045em;
    line-height: 1.4;
    margin: 1.3em 0 0 0;
    text-align: center;
}
#content #lesson p br.pc {
    display: none;
}
#content #lesson .images ul li {
    position: absolute;
}
#content #lesson .images ul li:first-child {
    top: 15.5%; left: -21.23%;
    width: 59.12%;
}
#content #lesson .images ul li:nth-child(2) {
    top: 18.27%; left: 37.3%;
    width: 47.02%;
}
#content #lesson .images ul li:nth-child(3) {
    top: 21.83%;
    left: 65.74%;
    width: 47.03%;
}
#content #lesson .images ul li:nth-child(4) {
    top: 43.86%; left: 2.76%;
    width: 35.71%;
}
#content #lesson .images ul li:nth-child(5) {
    top: 43.14%; left: 39.68%;
    width: 61.05%;
}
#content #lesson .images ul li:nth-child(6) {
    top: 32.23%; left: 85.31%;
    width: 37.69%;
}
#content #lesson .images ul li:nth-child(7) {
    bottom: 23.43%; left: -27.77%;
    width: 46.03%;
}
#content #lesson .images ul li:nth-child(8) {
    bottom: 4.47%; left: 13.09%;
    width: 59.52%;
}
#content #lesson .images ul li:nth-child(9) {
    bottom: 15.92%; left: 81.34%;
    width: 42.46%;
}
#content #lesson .images ul li:nth-child(10) {
    bottom: -2.23%; left: -21.42%;
    width: 39.68%;
}
#content #lesson .images ul li:nth-child(11) {
    bottom: -5.54%; left: 76.38%;
    width: 35.71%;
}
#content #lesson p.notes {
    margin-top: 3em;
}
#content #lesson ul.button {
    margin: 6% auto 0;
    width: 90%;
}
#content #lesson ul.button li + li {
    margin-top: 4%;
}
#content #lesson .event {
    margin: 4% auto 0;
    width: 80%;
}

/* schedule
-------------------------------- */

#content #schedule {
    background: url(../../images/afterschool/bg_lesson.png) no-repeat center top, url(../../images/afterschool/bg_schedule_01.jpg) repeat;
    background-size: 100%;
    padding: 14.66% 0 13.06%;
}
#content #schedule h2 {
    width: 30.4%;
}
#content #schedule .container {
    position: relative;
}

/* oneday */
#content #schedule .oneday {
    margin: 7.2% 0 0 0;
    position: relative;
}
#content #schedule .oneday h3 {
    position: absolute;
    top: -2.53%; right: 4.93%;
    width: 36%;
}

/* oneweek */
#content #schedule .oneweek {
    margin: 11.46% auto 0;
    width: 91.2%;
}
#content #schedule .oneweek h3 {
    margin: 0 0 0 8.47%;
    width: 35.23%;
}
#content #schedule .oneweek .ren {
    position: absolute;
    top: -1.16%; right: 6.87%;
    width: 23.97%;
}
#content #schedule .oneweek ul {
    margin: 2.63% 0 0 0;
}

/* papamama */
#content #schedule .papamama {
    margin: 9.33% auto 0;
    width: 85.33%;
}
#content #schedule .papamama h2 {
    margin: 0 auto 1.09%;
    width: 82.96%;
}
#content #schedule .papamama .container {
    background-color: #ffffff;
    border-radius: 17px;
    padding: 1.56% 0 6.87%;
}
#content #schedule .papamama p {
    margin: 0 -5.93% 5.62%;
    width: 111.87%;
}
#content #schedule .papamama .button {
    margin: 0 auto;
    width: 72.5%;
}
#content #schedule .papamama .container > img {
    display: none;
}

/* space
-------------------------------- */

#content #space {
    margin: 5.33% 0 0 0;
}
#content #space h2 {
    width: 17.33%;
}
#content #space .slider {
    position: relative;
}
#content #space .swiper-container {
    margin: 6.66% auto 0;
    width: 84.26%;
}
#content #space .swiper-container .swiper-slide {
    width: 100%;
}
#content #space .swiper-button-next,
#content #space .swiper-button-prev {
    background-size: 11px 23px;
    height: 23px;
    margin-top: -11px;
    width: 11px;
}
#content #space .swiper-button-prev,
#content #space .swiper-container-rtl .swiper-button-next {
    left: 1.33%;
}
#content #space .swiper-button-next,
#content #space .swiper-container-rtl .swiper-button-prev {
    right: 1.33%;
}
#content #space p {
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.9;
    margin: 1.7em 0 0 0;
    text-align: center;
}

/* contact
-------------------------------- */

#content #contact {
    border: 1px solid #dcc878;
    margin: 6.66% auto 0;
    padding: 5.87% 0 4.62%;
    width: 85.33%;
}
#content #contact h2 {
    width: 26%;
}
#content #contact .map {
    margin: 5.4% 0 7.71%;
    padding-top: 85%;
    position: relative;
}
#content #contact .map iframe {
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}
#content #contact p {
    margin: 0 auto;
    width: 91.97%;
}

/* banner
-------------------------------- */

#content #banner {
    margin: 8.8% auto 12.26%;
    width: 73.86%;
}
#content #banner .banner:first-child {
    margin-bottom: 17.66%;
}
#content #banner .banner + .banner {
    margin-top: 9.02%;
}

/* shop list
-------------------------------- */

/* .adult_article {
	margin-top: 10%;
} */
.shop_list_info {
	background: #ffffff;
    border-top: 1px solid #000;
	margin: 8% 0 0 0;
	padding: 4%;
	text-align: center;
}
.shop_list_info p {
    font-size: 12px;
	line-height: 1.5;
}

.adult_schoolList .tabContent .list ul li {
	width: auto;
}

/* add210819 google map fix */
.shop-map {
  padding: 3.86% 0;
  max-width: 80%;
  margin: 0 auto;
}

/* 230818_add_contact_btn */
.contact_btn__wrap {
  padding: 5% 0;
}
  
a.contact_btn {
  background-color: #048cfc;
  width: 100%;
  display: flex;
  margin: 0 auto;
  max-width: clamp(300px, 80%, 600px);
  height: clamp(30px, 80px, 100px);
  font-size: clamp(14px, calc((100vw - 1920px) / 100 + 36px), 50px);
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: #fff;
}

.contact_btn__note {
  width: 100%;
  max-width: clamp(300px, 80%, 600px);
  padding-top: 1rem;
}


/* float btn */
#content {
  position: relative;
}

.flt_btn {
  position: fixed;
  top: 78%;
  right: 20px;
  z-index: 999;
  width: 30vw;
  height: auto;
  max-width: 200px;
}

.flt_btn.absolute {
  position: absolute;
  top: unset;
  right: 20px;
  bottom: 20px;
}

@media screen and (max-width: 768px) {
  .flt_btn {
    top: 83%;
    right: 6px;
  }

  .flt_btn.absolute {
    position: fixed;
    top: 83%;
    right: 6px;
  }
}