@charset "utf-8";

/* PC：style_pc.css
 * ************************************************** */

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

#content h2 {
    margin: 0 auto;
}

#content a:hover {
    opacity: 0.8;
}

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

#mainvisual {
    background: url(../../images/afterschool/mv.jpg) no-repeat center top;
    background-size: 100%;
    padding: 29.2% 0 6.33%;
    position: relative;
}
#mainvisual p {
    position: absolute;
    top: 0.98vw; left: 5.06%;
    width: 45.33%;
    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_pc.svg);
    height: 9.53vw;
    top: 0; left: 0;
}
#mainvisual::after {
    background-image: url(../../images/afterschool/bg_wave_02.svg);
    height: 2.36vw;
    bottom: 0; left: 0;
}
#mainvisual #topSlider {
    z-index: 3;
}
#mainvisual #topSlider .swiper-wrapper {
    transition-timing-function: linear;
}
#mainvisual #topSlider .mv01 {
    margin-top: 2.76vw;
}
#mainvisual #topSlider .mv03,
#mainvisual #topSlider .mv05 {
    margin-top: 5.78vw;
}
#mainvisual #topSlider .mv04 {
    margin-top: 9.47vw;
}

/* 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: 3.75em;
    margin: 0 auto;
    padding: 4.61% 0 12.66%;
    position: relative;
    top: -6.97vw;
    width: 1084px;
    width: 72.26%;
    z-index: 1;
}
#content #top h1 {
    margin: 0 auto;
    width: 74.9%;
}
#content #top h1 + p {
    font-size: 20px;
    font-size: 1.31vw;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 1.9em 0 0 0;
    text-align: center;
}
#content #top h1 + p br.sp {
    display: none;
}

/* concept */
#content #top .concept {
  background: url(../../images/afterschool/bg_concept_01.png) no-repeat center bottom;
  background-size: 100%;
  margin: 3.22% 0 0 0;
  padding: 7.38% 2.76% 8.76%;
}
#content #top .concept .columns {
  display: flex;
  justify-content: space-between;
}
#content #top .concept .image {
  padding: 0 5.46%;
  width: 55.46%;
}
#content #top .concept .text {
  width: 44.92%;
}
#content #top .concept .text h2 {
  margin: 0;
  width: 26.52%;
}
#content #top .concept .text p {
  font-size: 1.51vw;
  line-height: 1.8;
  margin: 7.82% 0 0 0;
}

/* connection */
#content #top .connection {
  background: url(../images/bg_concept_connection_01.png) no-repeat center bottom;
  background-size: 100%;
  margin: -0.7% 0 0 0;
  padding: 0 2.58% 5.07%;
  position: relative;
  z-index: 1;
}
#content #top .connection ul {
  border-radius: 2.28em;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
#content #top .connection ul li {
  padding: 2.72% 2.72% 2.72% 5.64%;
  width: 50%;
}
#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: 4.86% auto 0;
  width: 54.86%;
}

/* power */
#content #top .power {
  border: 5px solid #008fff;
  border-radius: 4em;
  margin: 3.69% auto 0;
  padding: 6.45% 3.69% 6% 4.61%;
  position: relative;
  width: 984px;
  width: 90.77%;
}
#content #top .power h2 {
  width: 39.82%;
}
#content #top .power ul li {
  margin: 7.27% 0 0 0;
}
#content #top .power ul li + li {
  margin-top: 8.38%;
}

/*feature */
#content #top .feature {
  margin: 6% -13.56% 0;
  width: 1380px;
  width: 127.3%;
}
#content #top .feature h3 {
  margin: 0 auto;
  width: 42.31%;
}
#content #top .feature .featureList {
  margin: 2.89% 0 0 0;
}
#content #top .feature .featureList::after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
#content #top .feature .item {
  border-radius: 1.5em;
  -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: 0 0.5%;
  position: relative;
  overflow: hidden;
  width: 23.91%;
}
#content #top .feature .item:nth-child(1) {
  margin-left: 12.89%;
}
#content #top .feature .item:nth-child(2),
#content #top .feature .item:nth-child(7){
  margin-top: 3.04%;
}
#content #top .feature .item:nth-child(3) {
  margin-top: 6.08%;
}
#content #top .feature .item:nth-child(4) {
  margin-top: -5.07%;
}
#content #top .feature .item:nth-child(5) {
  margin-top: -2.02%;
}
#content #top .feature .item:nth-child(6) {
  margin-top: 0.86%;
}
#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;
}
#content #top .feature .item ul li a {
  display: block;
}

/*feature */
#content #top .feature {
    margin: 6.45% -13.56% 0;
    width: 1380px;
    width: 127.3%;
}
#content #top .feature h3 {
    margin: 0 auto;
    width: 42.89%;
}
#content #top .feature .featureList {
    margin: 2.89% 0 0 0;
}
#content #top .feature .featureList::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
#content #top .feature .item {
    border-radius: 1.5em;
    -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: 0 0.5%;
    position: relative;
    overflow: hidden;
    width: 23.91%;
}
#content #top .feature .item:nth-child(1) {
    margin-left: 12.89%;
}
#content #top .feature .item:nth-child(2),
#content #top .feature .item:nth-child(7){
    margin-top: 3.04%;
}
#content #top .feature .item:nth-child(3) {
    margin-top: 6.08%;
}
#content #top .feature .item:nth-child(4) {
    margin-top: -5.07%;
}
#content #top .feature .item:nth-child(5) {
    margin-top: -2.02%;
}
#content #top .feature .item:nth-child(6) {
    margin-top: 0.86%;
}
#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: 1% 0 0 0;
}
#content #top .other h3 {
    margin: 0 auto;
    width: 21.77%;
}
#content #top .other .otherSlider {
    margin: 3.13% 0 0 0;
}
#content #top .other .gallery-thumbs {
    width: 898px;
    width: 82.84%;
}
#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-thumbs .swiper-slide:nth-child(even) {
    margin-top: 3.11%;
}
#content #top .other .gallery-top {
    margin-top: -2.58%;
    width: 802px;
    width: 73.98%;
}

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

#content #lesson {
    background-color: #008fff;
    padding: 13.33% 0 0;
}
#content #lesson .container {
    border: 2px solid #ffffff;
    border-radius: 1.75em;
    margin: 0 auto;
    padding: 0 0 6.25%;
    width: 800px;
    width: 53.33%;
}
#content #lesson .images {
    height: 111.05vw;
    position: relative;
}
#content #lesson h2 {
    background-color: #008fff;
    display: table;
    margin: -1.75% auto 0;
    padding: 0 3.75%;
    width: 28%;
}
#content #lesson h2 img {
    width: 100%;
}
#content #lesson p {
    color: #ffffff;
    font-size: 18px;
    font-size: 1.18vw;
    letter-spacing: 0.045em;
    line-height: 1.7;
    margin: 2.33em 0 0 0;
    text-align: center;
}
#content #lesson p br.sp {
    display: none;
}
#content #lesson .images ul li {
    position: absolute;
}
#content #lesson .images ul li:first-child {
    top: 8.88%; left: -21.5%;
    width: 61.75%;
}
#content #lesson .images ul li:nth-child(2) {
    top: 11.84%; left: 43.25%;
    width: 52.12%;
}
#content #lesson .images ul li:nth-child(3) {
    top: 15.02%;
    left: 75%;
    width: 33.37%;
}
#content #lesson .images ul li:nth-child(4) {
    top: 38.8%; left: 3.75%;
    width: 33.37%;
}
#content #lesson .images ul li:nth-child(5) {
    top: 37.91%; left: 39.37%;
    width: 59%;
}
#content #lesson .images ul li:nth-child(6) {
    top: 26.42%; left: 85.5%;
    width: 34.5%;
}
#content #lesson .images ul li:nth-child(7) {
    bottom: 24.64%; left: -27.75%;
    width: 43.5%;
}
#content #lesson .images ul li:nth-child(8) {
    bottom: 4.73%; left: 13%;
    width: 58.87%;
}
#content #lesson .images ul li:nth-child(9) {
    bottom: 16.88%; left: 81.5%;
    width: 39.25%;
}
#content #lesson .images ul li:nth-child(10) {
    bottom: -1.06%; left: -21.5%;
    width: 36.75%;
}
#content #lesson .images ul li:nth-child(11) {
    bottom: -4.38%; left: 76.5%;
    width: 33.37%;
}
#content #lesson ul.button {
    margin: 5.01% auto 0;
    width: 75.93%;
}
#content #lesson ul.button li + li {
    margin-top: 1.75%;
}
#content #lesson .event {
    margin: 1.33% auto 0;
    width: 50.4%;
}

/* 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%, auto;
    padding: 17% 0 11.73%;
}
#content #schedule h2 {
    width: 15.2%;
}
#content #schedule .container {
    background-color: #ffffff;
    border-radius: 1.87em;
    position: relative;
}

/* oneday */
#content #schedule .oneday {
    margin: 2.66% auto 0;
    position: relative;
    width: 1320px;
    width: 88%;
}
#content #schedule .oneday h3 {
    position: absolute;
    top: 1.36%; right: 8.63%;
    width: 33.71%;
}

/* oneweek */
#content #schedule .oneweek {
    margin: 5% auto 0;
    width: 970px;
    width: 64.66%;
}
#content #schedule .oneweek .container {
    padding: 5.15% 4.43% 4.63% 8.76%;
}
#content #schedule .oneweek h3 {
    width: 33.72%;
}
#content #schedule .oneweek .ren {
    position: absolute;
    top: 4.12%; right: 6.7%;
    width: 20%;
}
#content #schedule .oneweek ul {
    margin: 5.93% 0 0 0;
}

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

#content #space {
    margin: 6.66% 0 0 0;
}
#content #space h2 {
    width: 8.8%;
}
#content #space .slider {
    position: relative;
}
#content #space .swiper-container {
    margin: 8% auto 0;
    width: 1110px;
    width: 74%;
}
#content #space .swiper-container .swiper-slide {
    width: 100%;
}
#content #space .swiper-button-prev,
#content #space .swiper-container-rtl .swiper-button-next {
    left: 6.66%;
}
#content #space .swiper-button-next,
#content #space .swiper-container-rtl .swiper-button-prev {
    right: 6.66%;
}
#content #space p {
    font-size: 20px;
    font-size: 1.31vw;
    letter-spacing: 0.1em;
    line-height: 1.9;
    margin: 2.3em 0 0 0;
    text-align: center;
}
#content #space p br.sp {
    display: none;
}

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

#content #contact {
    border: 1px solid #dcc878;
    margin: 5.33% auto 0;
    padding: 3.33% 0 3.86%;
    width: 1110px;
    width: 74%;
}
#content #contact h2 {
    width: 18.73%;
}
#content #contact .map {
    margin: 4.5% 0 5.22%;
    padding-top: 43%;
    position: relative;
}
#content #contact .map iframe {
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}
#content #contact p {
    margin: 0 auto;
    width: 61.26%;
}

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

#content #banner {
    margin: 5.33% auto 8.66%;
    width: 600px;
    width: 40%;
}
#content #banner .banner:first-child {
    margin-bottom: 17.66%;
}
#content #banner .banner + .banner {
    margin-top: 8.33%;
}

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

.shop_list_info {
	background: #ffffff;
    border-top: 1px solid #000;
	margin: 7.33% 0 0 0;
	padding: 1.33% 0 2.66%;
	text-align: center;
}
.shop_list_info p {
    font-size: 14px;
}
.shop_list_info p br {
    display: none;
}

.adult_schoolList .tabContent .list h4 {
	padding: 1.425em 5%;
}

/* add210819 google map fix */
.shop-map {
  padding: 3.86% 0;
  max-width: 70%;
  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;
  }
}