@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");
main {
  background-image: url(../img/top-back/top-back-1.svg), url(../img/top-back/top-back-2.svg), url(../img/top-back/top-back-3.svg), url(../img/top-back/top-back-4.webp);
  background-repeat: no-repeat;
  background-position: left top, left top, right top, right top;
  background-size: 100% auto;
}

@media (max-width: 768px) {
  main {
    background-image: url(../img/top-back/top-sp-1.svg), url(../img/top-back/top-sp-2.svg), url(../img/top-back/top-sp-3.webp);
    background-position: left top, right 117px, left top;
    background-size: clamp(300px, 35vw, 360px), 66%, 100% 18%;
  }
}
.top {
  padding: clamp(180px, 30vw, 260px) 0;
}
.top .kv {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.top .kv img {
  border-radius: 50px;
  width: 100%;
  height: 700px;
  object-fit: cover;
}
.top .kv .container {
  width: 83%;
  position: relative;
}
.top .kv .container h1 {
  position: absolute;
  writing-mode: vertical-rl;
  top: 50px;
  left: 8%;
  color: #333333;
  letter-spacing: 0.048em;
  line-height: 1.9;
  font-size: clamp(2.5rem, 2.8vw, 3.8rem);
}
.top .kv .container h1 span {
  border-left: 3px solid white;
  padding-left: 16px;
  color: white;
}
.top .kv .container h1 .none {
  text-decoration: unset;
}
.top .kv .news {
  width: 56%;
  position: absolute;
  padding: 1rem 0 1rem 3.5rem;
  right: 0;
  bottom: 20vh;
  background-color: #ffffff;
  border-top-left-radius: 27px;
  border-bottom-left-radius: 27px;
  white-space: nowrap;
  text-align: left;
  z-index: 1000;
  letter-spacing: 0.05em;
}
.top .kv .news span, .top .kv .news button, .top .kv .news p {
  width: fit-content;
  background-color: #ffffff;
}
.top .kv .news p {
  width: fit-content;
  font-family: "libre-franklin", YuGothic, "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-size: clamp(8px, 1vw, 10px);
}
.top .kv .news .dot-line-y {
  width: 4px;
  height: 1.5em;
  background-image: radial-gradient(circle, #707070 50%, transparent 50%);
  background-size: 3px 5px;
  background-repeat: repeat-y;
  margin: 0 clamp(10px, 1.5vw, 27px);
}
.top .kv .news .head-line, .top .kv .news .content {
  align-items: baseline;
}
@media (max-width: 1359px) {
  .top .kv .news {
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    bottom: 10vh;
  }
  .top .kv .news .head-line {
    width: 100%;
    position: relative;
  }
  .top .kv .news .head-line::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 98%;
    height: 5px;
    background-image: radial-gradient(circle, #707070 50%, transparent 50%);
    background-size: 4px 2px;
    background-repeat: repeat-x;
    z-index: -1;
  }
  .top .kv .news .dot-line-y {
    display: none;
  }
  .top .kv .news .content {
    letter-spacing: 0.148em;
  }
}

@media (max-width: 768px) {
  .top {
    padding-bottom: 0;
  }
  .top .kv {
    max-width: 92%;
  }
  .top .kv .container {
    width: 100%;
  }
  .top .kv .container img {
    object-position: center;
    object-fit: cover;
    min-height: 545px;
    border-radius: 35px;
  }
  .top .kv .container h1 {
    font-size: 14px;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
  }
  .top .kv .container h1 span {
    font-weight: bold;
    background-color: white;
    border: none;
    color: black;
    padding: 0.5em;
    line-height: 3;
    font-size: 15px;
    letter-spacing: 0.1em;
  }
  .top .kv .news {
    white-space: wrap;
    width: 86%;
    padding-right: 0;
  }
}
.thought {
  text-align: center;
  background: url(../img/top-back/top-back-5.svg) no-repeat center;
  background-size: cover;
  padding: clamp(180px, 25vw, 235px) 0 200px;
}
.thought .tx-con .text {
  font-size: clamp(1.6rem, 1.8vw, 2rem);
}
.thought .features {
  justify-content: center;
  gap: clamp(30px, 2vw, 60px);
  padding: clamp(50px, 6vw, 62px) 0 clamp(60px, 8vw, 80px);
}
.thought .features picture {
  width: 100%;
}
.thought .features .left {
  height: clamp(300px, 50vw, 540px);
  object-fit: cover;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.thought .features .right {
  width: 100%;
  flex-wrap: wrap;
  margin-right: 9%;
  align-items: center;
  gap: 0 clamp(20px, 3vw, 25px);
}
.thought .features .right .f1, .thought .features .right .f2, .thought .features .right .f3, .thought .features .right .f4 {
  width: 280px;
  height: 270px;
  min-width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.thought .features .right .f1 .img, .thought .features .right .f2 .img, .thought .features .right .f3 .img, .thought .features .right .f4 .img {
  max-width: 100%;
}
.thought .features .right .f1 .number, .thought .features .right .f2 .number, .thought .features .right .f3 .number, .thought .features .right .f4 .number {
  position: absolute;
  font-family: "acumin-pro", "kinto-sans", YuGothic, "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  letter-spacing: 0.08em;
  color: #96DFE5;
  text-decoration: underline;
  top: 20%;
  left: 20%;
}
.thought .features .right .f1 .text, .thought .features .right .f2 .text, .thought .features .right .f3 .text, .thought .features .right .f4 .text {
  position: absolute;
  top: 35%;
}
.thought .features .right div:nth-child(2) .number {
  left: 10%;
}
.thought .features .right div:nth-child(2) .text {
  padding-right: 20px;
}
.thought .features .right div:nth-child(4) .number {
  left: 10%;
}
.thought .features .right div:nth-child(4) .img {
  margin-bottom: 10px;
}
.thought .features .right div:nth-child(4) .text {
  padding-right: 40px;
  top: 33%;
}
@media (min-width: 1808px) {
  .thought .features .right {
    flex-wrap: nowrap;
  }
}
.thought .button-container {
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3%;
  row-gap: 30px;
}
.thought .button-container .btn-a {
  height: 84px;
}

@media (max-width: 768px) {
  .thought {
    background: none;
    padding: clamp(180px, 25vw, 235px) 0 120px;
  }
  .thought .features .right {
    flex-direction: column;
    gap: clamp(10px, 2vw, 20px);
  }
  .thought .features .right .f1 .text, .thought .features .right .f2 .text, .thought .features .right .f3 .text, .thought .features .right .f4 .text {
    top: 37%;
  }
  .thought .features .right div:nth-child(4) .text {
    padding-right: 40px;
    top: 37%;
  }
  .thought .features .right div:nth-child(2) .number {
    padding-right: unset;
  }
  .thought .features .right div:nth-child(4) .number {
    padding-right: unset;
  }
  .thought .button-container {
    flex-direction: column;
    gap: clamp(30px, 5vw, 50px);
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 1336px) {
  .thought .container {
    width: 83%;
    margin: auto;
  }
  .thought .container .features {
    flex-direction: column-reverse;
  }
  .thought .container .features .left {
    border-radius: 50px;
    width: 100%;
  }
}
@media (min-width: 1550px) {
  .thought {
    background: url(../img/top-back/top-back-1pc.svg) no-repeat center;
  }
}
@media (min-width: 1921px) {
  .thought {
    background: url(../img/top-back/top-back-4k.svg) no-repeat center;
  }
}
.message {
  background-image: url(../img/top/message-1.svg), url(../img/top/message-2.webp);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  text-align: center;
}
.message .container {
  width: 68.7%;
  margin: auto;
  padding-top: clamp(140px, 15vw, 160px);
  padding-bottom: clamp(140px, 15vw, 170px);
}
.message .container .content {
  column-gap: clamp(50px, 6vw, 67px);
}
.message .container .content img {
  border-radius: 20px;
  border: 7px solid #ffffff;
  width: clamp(250px, 37vw, 370px);
  aspect-ratio: 1;
  box-sizing: content-box;
}
.message .container .content .text {
  text-align: left;
  width: 100%;
  max-width: 550px;
}
.message .container .content .text .sub-title {
  font-size: clamp(2.2rem, 2.4vw, 2.7rem);
  padding-bottom: clamp(25px, 3vw, 35px);
  font-weight: 400;
}
.message .container .content .text .sub-title span.white-wrapper {
  position: relative;
  padding: 0.09em 0;
  width: fit-content;
  font-size: clamp(2.5rem, 3vw, 3.3rem);
  line-height: 150%;
}
.message .container .content .text .sub-title span.white-wrapper span {
  position: relative;
  z-index: 10;
}
.message .container .content .text .sub-title span.white-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0.3em;
  width: calc(100% - 0.6em);
  height: 7px;
  background-color: #ffffff;
  z-index: 1;
}
.message .container .content .text .sub-title .sp {
  display: none;
}
@media (max-width: 560px) {
  .message .container .content .text .sub-title .sp {
    display: inline;
  }
}
.message .container .content .text .lh-190 {
  font-size: clamp(1.6rem, 1.8vw, 2rem);
}
.message .container .content .text .lh-190 .sp {
  display: none;
}
.message .container .content .text .name {
  font-size: clamp(1.8rem, 1.8vw, 2.2rem);
  text-align: right !important;
}

@media (max-width: 1300px) {
  .message {
    background-size: cover;
  }
  .message .container {
    padding-top: clamp(140px, 18vw, 200px);
  }
  .message .container .content {
    flex-direction: column;
  }
  .message .container .content h3 {
    text-align: center;
    padding-top: clamp(25px, 3vw, 40px);
  }
}
@media (min-width: 1441px) {
  .message {
    background-image: url(../img/top/message-1920.svg), url(../img/top/message-2.webp);
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
  }
}
.instagram {
  text-align: center;
  background: url(../img/top-back/top-back-7.webp) no-repeat left top;
}
.instagram span {
  color: #96DFE5;
}
.instagram .container {
  background: url(../img/top-back/top-back-6.svg) no-repeat center;
  padding: clamp(150px, 28vw, 280px) 0;
  background-size: contain;
}
.instagram .container .content {
  gap: clamp(20px, 4vw, 37px);
  width: 60%;
}
.instagram .container .content .sbi_photo_wrap {
  display: flex;
  justify-content: center;
}
.instagram .container .content .sbi_photo_wrap a {
  height: auto !important;
  aspect-ratio: 1;
  pointer-events: none;
}
.instagram .container .content .sbi_photo_wrap a img {
  border-radius: 20px;
}
.instagram .container .btn-a {
  margin-top: clamp(50px, 6vw, 62px);
}

@media (max-width: 1150px) {
  .instagram {
    background-image: url(../img/top-back/top-back-6.svg), url(../img/top-back/top-back-7.webp);
    background-repeat: no-repeat;
    background-position: center, left top;
    background-size: cover;
  }
  .instagram .container {
    background: none;
  }
}
.program-back {
  background: url(../img/top-back/top-back-8.svg) no-repeat left top;
  background-size: 100% auto;
  background-size: cover;
  background: none;
}

.program {
  background: url(../img/top-back/top-back-8.svg) no-repeat left top;
  background-size: 100% auto;
  background-size: cover;
  text-align: center;
}
.program .container {
  padding: clamp(60px, 9vw, 85px) 0 clamp(190px, 21vw, 214px);
}
.program .container .text {
  margin-bottom: 23px;
}
.program .container .text p {
  color: #333333;
  width: fit-content;
  margin: auto;
  padding: 0.5em 1em;
  background-color: #ffffff;
  border-radius: 50px;
}
.program .container .content .inside-genre {
  justify-content: center;
  gap: 7%;
  margin: auto;
}
.program .container .content .inside-genre .class {
  font-size: clamp(1.8rem, 1.8vw, 2.2rem);
  min-width: 100px;
  max-width: 250px;
}
.program .container .content .inside-genre .class p {
  margin-top: clamp(14px, 2vw, 17px);
}
.program .container .content .inside-genre img {
  border-radius: 20px;
  border: #ffffff 7px solid;
}
@media (max-width: 960px) {
  .program .container .content .inside-genre {
    row-gap: 20px;
  }
}
.program .container .content .outside-genre {
  justify-content: center;
  gap: 3.5em 5%;
  margin: auto;
}
.program .container .content .outside-genre .out_class {
  min-width: 150px;
}
.program .container .content .outside-genre .out_class img {
  margin: clamp(10px, 2vw, 20px) 0 clamp(20px, 3.5vw, 32px);
  border-radius: 50%;
  border: 7px solid #ffffff;
}
.program .container .content .outside-genre .out_class p {
  color: #ffffff;
}
.program .container .content .outside-genre .out_class span {
  font-size: clamp(2rem, 2vw, 2.4rem);
}
.program .container .dot-line {
  margin: 5rem auto 3rem;
  max-width: 1021px;
}
.program .container .dot-line:after {
  background: radial-gradient(circle farthest-side, white, white 40%, transparent 40%, transparent);
  background-size: 17px 17px;
  content: "";
  display: inline-block;
  height: 20px;
  width: 100%;
}

@media (max-width: 768px) {
  .program .container {
    padding-top: clamp(150px, 2vw, 200px);
  }
}
@media (min-width: 1550px) {
  .program-back {
    display: block;
    background: url(../img/top-back/top-back-2pc.svg) no-repeat left top;
  }
  .program {
    background: none;
  }
}
@media (min-width: 1921px) {
  .program-back {
    display: block;
    background: url(../img/top-back/top-back-2pc.svg) no-repeat left top;
    background-size: contain;
  }
}
.access {
  justify-content: center;
  width: 85%;
  gap: 5vw;
  padding: clamp(50px, 6vw, 60px) 0 clamp(130px, 15vw, 156px);
}
.access .left {
  width: fit-content;
}
.access .left .text span {
  font-size: clamp(1.6rem, 1.8vw, 2rem);
}
.access .left .text p {
  margin: clamp(35px, 5vw, 47px) 0 clamp(60px, 7vw, 70px);
}
.access .left .tel {
  font-size: clamp(2.5rem, 2.8vw, 3.8rem);
  font-family: "acumin-pro", YuGothic, "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  display: flex;
  align-items: center;
  column-gap: 15px;
}
.access .map iframe {
  border-radius: 50px;
}
@media (max-width: 768px) {
  .access .map iframe {
    border-radius: 50px;
  }
}

@media (max-width: 1200px) {
  .access {
    flex-direction: column;
  }
  .access .left {
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
  .access .map iframe {
    width: 100%;
  }
}

/*# sourceMappingURL=top.css.map */