@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  font-family: "source-han-sans-japanese", sans-serif;
  color: #333;
}

.noto {
  font-family: "Noto Sans JP", sans-serif;
}

#wrap {
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

.container {
  max-width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
.container.small {
  max-width: 1040px;
}

#wrap {
  overflow: hidden;
  width: 100vw;
  height: 100%;
}

ul {
  list-style: none;
}

.center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.no-pc {
  display: none;
}
@media (max-width: 767px) {
  .no-pc {
    display: block;
  }
}

.no-sp {
  display: block;
}
@media (max-width: 767px) {
  .no-sp {
    display: none;
  }
}

.pc-only {
  display: block;
}
@media (max-width: 1100px) {
  .pc-only {
    display: none;
  }
}

.tp-only {
  display: none;
}
@media (max-width: 1100px) {
  .tp-only {
    display: block;
  }
}

.sp-only {
  display: none;
}
@media (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb70 {
  margin-bottom: 70px;
}

.mb80 {
  margin-bottom: 80px;
}

.mb90 {
  margin-bottom: 90px;
}

.mb100 {
  margin-bottom: 100px;
}

.midashi {
  line-height: 1.3;
}
.midashi img {
  max-width: 120px;
  height: auto;
  width: 100%;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.midashi .english {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  display: inline-block;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .midashi .english {
    font-size: 14px;
  }
}
.midashi .japanese {
  display: inline-block;
  line-height: 1.6;
  font-size: 36px;
}
@media (max-width: 767px) {
  .midashi .japanese {
    font-size: 21px;
  }
}
.midashi .japanese.big-font {
  font-size: 40px;
}
@media (max-width: 767px) {
  .midashi .japanese.big-font {
    font-size: 21px;
  }
}

.category {
  display: inline-block;
  color: #fff;
  background-color: #000000;
  padding: 0 10px;
  border-radius: 4px;
}
.category.orange {
  background-color: #ef935a;
}
.category.green {
  background-color: #3ec668;
}
.category.purple {
  background-color: #9e84e5;
}



/*アニメーション*/
@keyframes playL {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes maskOutL {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes playR {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes maskOutR {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.slideL,
.slideR {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  opacity: 0;
}

.slide {
  overflow: hidden;
}

.isPlayL {
  -webkit-animation-name: playL;
  animation-name: playL;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  position: relative;
  opacity: 1 !important;
}
.isPlayL:after {
  -webkit-animation-name: maskOutL;
  animation-name: maskOutL;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.isPlayR {
  -webkit-animation-name: playR;
  animation-name: playR;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  position: relative;
  opacity: 1 !important;
}
.isPlayR:after {
  -webkit-animation-name: maskOutR;
  animation-name: maskOutR;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fade {
  opacity: 0;
  transition: opacity 1.5s ease-out;
}
.fade.active {
  opacity: 1;
}

.delay {
  transition-delay: 0.25s;
}

.fadeInUp {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  will-change: transform, opacity;
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s linear;
}
.fadeInUp.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.header {
  left: 0;
  width: 100vw;
  height: 100px;
  background-color: #fff;
  padding: 10px 0 0;
  position: fixed;
  z-index: 1000;
}
@media (max-width: 767px) {
  .header {
    height: 70px;
  }
}
.header .column03 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.header-logo {
  line-height: 1;
}
.header-logo a {
  line-height: 1;
  display: inline-block;
}
.header-logo a img {
  height: 80px;
  width: auto;
}
@media (max-width: 767px) {
  .header-logo a img {
    height: 50px;
  }
}
@media (max-width: 1100px) {
  .header .link-wrapper {
    display: none;
  }
}
.header .sub-link {
  display: flex;
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.header .sub-link li {
  margin-right: 1rem;
}
.header .sub-link a {
  color: #777;
  text-decoration: none;
}
.header .main-link {
  display: flex;
}
.header .main-link li {
  margin-right: 1rem;
}
.header .main-link a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
}
.header .main-link a::after {
  content: "";
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 3px;
  position: absolute;
  bottom: 0;
  background-color: #DD5F68;
  border-radius: 3px;
  transition: width 0.5s;
}
.header .main-link a:hover::after, .header .main-link a:focus::after {
  width: 100%;
}
@media (max-width: 1100px) {
  .header .tel-wrapper {
    display: none;
  }
}
.header .tel-wrapper a.tel {
  display: inline-block;
  text-decoration: none;
  background-color: #dd5f68;
  color: #fff;
  padding: 5px 10px 5px 40px;
  position: relative;
}
.header .tel-wrapper a.tel::before {
  content: "";
  left: 10px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  top: 50%;
  position: absolute;
  background-image: url(../img/tel-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.header .sns {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1100px) {
  .header .sns.pc-only {
    display: none;
  }
}
.header .sns.tp-only {
  display: none;
}
@media (max-width: 1100px) {
  .header .sns.tp-only {
    display: flex;
  }
}
.header .instagram {
  margin-right: 20px;
}
.header .instagram img {
  width: 32px;
  height: auto;
}
.header .youtube img {
  width: 40px;
  height: auto;
}
.header .mobile-btn {
  display: none;
}
@media (max-width: 1100px) {
  .header .mobile-btn {
    display: block;
    margin-right: -20px;
    margin-top: -10px;
    width: 100px;
    height: 100px;
    background-color: #DD5F68;
    position: relative;
  }
}
@media (max-width: 1100px) and (max-width: 767px) {
  .header .mobile-btn {
    width: 70px;
    height: 70px;
  }
}
.header .mobile-btn span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 2px;
  background-color: #fff;
  transition: all 0.5s;
}
@media (max-width: 767px) {
  .header .mobile-btn span {
    width: 28px;
  }
}
.header .mobile-btn span::before {
  content: "";
  position: absolute;
  top: -12px;
  width: 40px;
  height: 2px;
  background-color: #fff;
  transition: all 0.5s;
}
@media (max-width: 767px) {
  .header .mobile-btn span::before {
    width: 28px;
    top: -8px;
  }
}
.header .mobile-btn span::after {
  content: "";
  position: absolute;
  bottom: -12px;
  width: 40px;
  height: 2px;
  background-color: #fff;
  transition: all 0.5s;
}
@media (max-width: 767px) {
  .header .mobile-btn span::after {
    width: 28px;
    bottom: -8px;
  }
}
.header .mobile-btn.open span {
  background-color: transparent;
}
.header .mobile-btn.open span::before {
  top: 0;
  transform: rotate(45deg);
}
.header .mobile-btn.open span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
.header .sp-nav {
  position: fixed;
  z-index: 1001;
  top: 100px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 100px);
  background-color: rgba(51, 51, 51, 0.7);
  overflow-y: scroll;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
@media (max-width: 767px) {
  .header .sp-nav {
    top: 70px;
    height: calc(100vh - 70px);
  }
}
@media (max-width: 1100px) {
  .header .sp-nav.visible {
    visibility: visible;
    opacity: 1;
  }
}
.header .sp-nav .inner {
  padding: 40px 30px;
  background-color: #F5F5F7;
  position: relative;
  z-index: 1002;
}
.header .sp-nav .main-list {
  width: 90%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.header .sp-nav .main-list li {
  border-bottom: 1px solid #C6C5C5;
}
.header .sp-nav .main-list li a {
  display: block;
  text-decoration: none;
  padding: 10px 0;
  font-family: "source-han-sans-japanese", sans-serif;
  font-size: 18px;
  color: #333;
  position: relative;
}
.header .sp-nav .main-list li a::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 14px;
  right: 0;
  top: 50%;
  margin-top: -4px;
  background-image: url(../img/header-sp-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.header .sp-nav .sub-list {
  width: 90%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.header .sp-nav .sub-list li a {
  display: block;
  text-decoration: none;
  padding: 10px 0;
  font-family: "source-han-sans-japanese", sans-serif;
  font-size: 16px;
  color: #777777;
  position: relative;
}
.header .sp-nav .sp-tel {
  width: 90%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.header .sp-nav .sp-tel .sp-tel-link {
  font-size: 29px;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: bold;
  position: relative;
  padding-left: 40px;
  color: #777;
  text-decoration: none;
}
@media (max-width: 767px) {
  .header .sp-nav .sp-tel .sp-tel-link {
    font-size: 24px;
  }
}
@media (max-width: 350px) {
  .header .sp-nav .sp-tel .sp-tel-link {
    font-size: 21px;
  }
}
.header .sp-nav .sp-tel .sp-tel-link::before {
  content: "";
  width: 34px;
  height: 34px;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 0;
  background-image: url(../img/sp-tel-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.lower-page {
  margin-top: 100px;
}
@media (max-width: 767px) {
  .lower-page {
    margin-top: 70px;
  }
}

.footer {
  background-color: #ffffff;
  padding-bottom: 10px;
  padding-top: 30px;
}
.footer-logo {
  line-height: 1;
}
.footer-logo img {
  height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.footer .copyright {
  font-size: 12px;
}
.footer .column02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer .column02 .left {
  width: 33%;
  color: #333;
}
@media (max-width: 1100px) {
  .footer .column02 .left {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .footer .column02 .left {
    text-align: left;
  }
}
.footer .column02 .right {
  width: 61%;
}
@media (max-width: 1100px) {
  .footer .column02 .right {
    width: 100%;
  }
}
.footer .tel {
  color: #333;
  text-decoration: none;
}
.footer .sns {
  display: flex;
  align-items: center;
}
@media (max-width: 1100px) {
  .footer .sns {
    justify-content: center;
  }
}
@media (max-width: 1100px) {
  .footer .sns.pc-only {
    display: none;
  }
}
.footer .sns.tp-only {
  display: none;
}
@media (max-width: 1100px) {
  .footer .sns.tp-only {
    display: flex;
  }
}
.footer .instagram {
  margin-right: 20px;
}
.footer .instagram img {
  width: 32px;
  height: auto;
}
.footer .youtube img {
  width: 40px;
  height: auto;
}
.footer .column03 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer .column03 .item {
  width: calc(25% - 5px);
  margin-right: 10px;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .footer .column03 .item {
    width: 100%;
    margin-right: 0;
  }
}
.footer .column03 .item.school {
  margin-top: -120px;
}
@media (max-width: 767px) {
  .footer .column03 .item.school {
    margin-top: 0;
  }
}
.footer .column03 .item.future {
  margin-top: -70px;
}
@media (max-width: 767px) {
  .footer .column03 .item.future {
    margin-top: 0;
  }
}
.footer .column03 .item.interview {
  margin-top: -50px;
}
@media (max-width: 767px) {
  .footer .column03 .item.interview {
    margin-top: 0;
    display: none;
  }
}
.footer .column03 .last-item {
  width: calc(50% - 10px);
  margin-right: 0;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .footer .column03 .last-item {
    width: 100%;
    margin-right: 0;
  }
}
.footer .column03 h3 {
  font-size: 16px;
  border-bottom: 1px solid #6f6e6e;
}
.footer .column03 h3 a {
  color: #333;
  text-decoration: none;
}
.footer .column03 li {
  font-size: 14px;
}
.footer .column03 li a {
  color: #777777;
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
}
.footer .flex {
  display: flex;
}
.footer .flex li {
  width: 50%;
}
.footer .btn-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.footer .btn-flex a {
  width: 140px;
  font-size: 10px;
  font-family: "source-han-sans-japanese", sans-serif;
  text-align: center;
  border: 1px solid #6F6E6E;
  border-radius: 5px;
  color: #6F6E6E;
  padding: 5px 10px;
  text-decoration: none;
  margin: 0 5px;
}
@media (max-width: 767px) {
  .footer .btn-flex a {
    width: 100%;
    margin: 0 5px 10px;
    max-width: 140px;
  }
}

.f-mv {
  margin-top: 100px;
}
@media (max-width: 767px) {
  .f-mv {
    margin-top: 70px;
  }
}
.f-mv video {
  width: calc(100% - 20px);
  object-fit: cover;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-height: calc(100vh - 180px);
}
@media (max-width: 1100px) {
  .f-mv video {
    height: auto;
  }
}
@media (max-width: 767px) {
  .f-mv video {
    height: auto;
    width: 100%;
  }
}
.f-mv .pc-mv {
  display: block;
}
@media (max-width: 767px) {
  .f-mv .pc-mv {
    display: none;
  }
}
.f-mv .sp-mv {
  display: none;
}
@media (max-width: 767px) {
  .f-mv .sp-mv {
    display: block;
  }
}

.f-info {
  padding-top: 30px;
  padding-bottom: 50px;
  background-color: #fff;
}
.f-info .news-box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
  box-shadow: 6px 6px 36px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  padding: 30px;
}
.f-info .news-list li {
  padding-bottom: 10px;
  border-bottom: 1px solid #333333;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .f-info .news-list li {
    font-size: 14px;
  }
}
.f-info .news-list li:last-child {
  margin-bottom: 0;
}
.f-info .news-list li a {
  text-decoration: none;
  color: #000;
  display: flex;
  align-items: center;
  transition: opacity 0.5s;
}
@media (max-width: 767px) {
  .f-info .news-list li a {
    flex-wrap: wrap;
  }
}
.f-info .news-list li a:hover, .f-info .news-list li a:focus {
  opacity: 0.7;
}
.f-info .news-list li .category {
  margin: 0 10px;
  min-width: 7.3em;
  text-align: center;
  flex-shrink: 0;
}
.f-info .news-list li .date {
  font-family: "Noto Sans JP", sans-serif;
  flex-shrink: 0;
  min-width: 5em;
}
@media (max-width: 767px) {
  .f-info .news-list li .title {
    width: 100%;
    margin-top: 10px;
  }
}
.f-info .more-btn {
  max-width: 280px;
  width: 100%;
  display: inline-block;
}
.f-info .more-btn img {
  width: 100%;
  height: auto;
  transform: scale(0.95);
  transition: transform 0.5s;
}
.f-info .more-btn:hover img, .f-info .more-btn:focus img {
  transform: scale(1);
}

.f-main {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/dot-back.png);
  background-size: contain;
  background-repeat: repeat;
}
.f-main .container {
  position: relative;
  z-index: 10;
}
.f-main .column02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.f-main .column02 .sub-item {
  width: 42.5%;
  position: relative;
}
.f-main .column02 .sub-item img {
  width: 100%;
  height: auto;
  box-shadow: 6px 6px 48px rgba(0, 0, 0, 0.12);
}
.f-main .column02 .main-item {
  width: 55%;
  position: relative;
}
.f-main .column02 .main-item img {
  width: 100%;
  height: auto;
  box-shadow: 6px 6px 48px rgba(0, 0, 0, 0.12);
}
.f-main .column02 .small-item {
  width: 26%;
}
@media (max-width: 1240px) {
  .f-main .column02 .small-item {
    width: 42.5%;
  }
}
.f-main .column02 .small-item img {
  width: 100%;
  height: auto;
}
.f-main .column02 .full-item {
  position: relative;
  width: 100%;
}
.f-main .column02 .full-item img {
  width: 100%;
  height: auto;
}
.f-main .column02 .text-item {
  width: 37%;
  max-width: 440px;
  position: relative;
}
@media (max-width: 1240px) {
  .f-main .column02 .text-item {
    width: 55%;
    max-width: unset;
  }
}
.f-main .column02 .tablet-image {
  display: none;
}
@media (max-width: 1240px) {
  .f-main .column02 .tablet-image {
    display: block;
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .f-main .column02 .tablet-image {
    display: none;
  }
}
.f-main .column02 .text-wrapper {
  width: 100%;
  max-width: 440px;
  background-color: #f5f5f7;
  padding: 40px 30px;
  box-shadow: 6px 6px 48px rgba(0, 0, 0, 0.12);
  font-family: "source-han-sans-japanese", sans-serif;
}
@media (max-width: 767px) {
  .f-main .column02 .text-wrapper {
    margin-left: auto;
    margin-right: auto;
    padding: 40px 15px;
  }
}
.f-main .column02 .text-wrapper .feature img {
  max-width: 200px;
  box-shadow: none;
}
.f-main .column02 .text-wrapper h3 {
  font-size: 30px;
}
@media (max-width: 767px) {
  .f-main .column02 .text-wrapper h3 {
    font-size: 23px;
  }
}
.f-main .column02 .text-wrapper .more-btn img {
  width: 100%;
  height: auto;
  transform: scale(0.95);
  transition: transform 0.5s;
  box-shadow: none;
}
.f-main .column02 .text-wrapper .more-btn:hover img, .f-main .column02 .text-wrapper .more-btn:focus img {
  transform: scale(1);
}
.f-main .column02.ver01 .first {
  padding-left: 80px;
  padding-top: 50px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver01 .first {
    padding-left: 40px;
    padding-top: 50px;
    margin-top: 50px;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver01 .first {
    order: 3;
    padding-left: 0;
    padding-top: 0;
    width: calc(50% - 5px);
  }
}
.f-main .column02.ver01 .first .no01 {
  width: 200px;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: none;
}
@media (max-width: 1240px) {
  .f-main .column02.ver01 .first .no01 {
    width: 130px;
    height: auto;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver01 .second {
    order: 1;
    width: 100%;
  }
}
.f-main .column02.ver01 .second .no01 {
  width: 90px;
  height: auto;
  position: absolute;
  top: -30px;
  left: 0;
  box-shadow: none;
}
.f-main .column02.ver01 .third {
  margin-top: -60px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver01 .third {
    margin-top: -2vw;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver01 .third {
    order: 4;
    margin-top: 0;
    width: calc(50% - 5px);
  }
}
.f-main .column02.ver01 .fourth {
  padding-left: 80px;
  margin-top: -20px;
}
@media (max-width: 1100px) {
  .f-main .column02.ver01 .fourth {
    padding-left: 30px;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver01 .fourth {
    order: 2;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    margin-bottom: 30px;
  }
}
@media (max-width: 500px) {
  .f-main .column02.ver01 .fourth {
    width: 90%;
    max-width: 320px;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver02 .first {
    width: 100%;
    order: 1;
  }
}
.f-main .column02.ver02 .first .no02 {
  width: 90px;
  height: auto;
  position: absolute;
  right: 0;
  top: -30px;
  box-shadow: none;
}
.f-main .column02.ver02 .second {
  padding-right: 80px;
  padding-top: 50px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver02 .second {
    padding-right: 40px;
    padding-top: 50px;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver02 .second {
    order: 3;
    width: calc(50% - 5px);
    padding-right: 0;
    padding-top: 0;
  }
}
.f-main .column02.ver02 .second .no02 {
  width: 200px;
  height: auto;
  position: absolute;
  right: 0;
  top: 0;
  box-shadow: none;
}
@media (max-width: 1240px) {
  .f-main .column02.ver02 .second .no02 {
    width: 130px;
    height: auto;
  }
}
.f-main .column02.ver02 .third {
  padding-left: 160px;
  margin-top: -20px;
}
@media (max-width: 1100px) {
  .f-main .column02.ver02 .third {
    padding-left: 30px;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver02 .third {
    order: 2;
    margin-top: 0;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-top: -20px;
    margin-bottom: 30px;
  }
}
@media (max-width: 500px) {
  .f-main .column02.ver02 .third {
    width: 90%;
    max-width: 320px;
  }
}
.f-main .column02.ver02 .fourth {
  margin-top: -60px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver02 .fourth {
    margin-top: -2vw;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver02 .fourth {
    margin-top: 50px;
    order: 4;
    width: calc(50% - 5px);
  }
}
.f-main .column02.ver03 .first {
  padding-right: 0px;
  padding-top: 50px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver03 .first {
    padding-right: 0px;
    padding-top: 50px;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver03 .first {
    padding-top: 0;
  }
}
.f-main .column02.ver03 .first .no03 {
  width: 200px;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: none;
}
@media (max-width: 1240px) {
  .f-main .column02.ver03 .first .no03 {
    width: 130px;
    height: auto;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver03 .first .no03 {
    top: -30px;
    width: 90px;
    height: auto;
    order: 1;
  }
}
.f-main .column02.ver03 .second {
  margin-left: 30px;
  margin-top: 30px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver03 .second {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver03 .second {
    order: 4;
    width: 55%;
    margin-top: 0;
  }
}
.f-main .column02.ver03 .third {
  margin-top: 30px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver03 .third {
    display: none;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver03 .third {
    display: block;
    order: 3;
    margin-top: 0;
    width: 55%;
    margin-left: auto;
    margin-bottom: 30px;
  }
}
.f-main .column02.ver03 .fourth {
  margin-top: -20px;
}
@media (max-width: 1240px) {
  .f-main .column02.ver03 .fourth {
    padding-right: 100px;
  }
}
@media (max-width: 1100px) {
  .f-main .column02.ver03 .fourth {
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .f-main .column02.ver03 .fourth {
    padding-right: 0;
    order: 2;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
}
@media (max-width: 500px) {
  .f-main .column02.ver03 .fourth {
    width: 90%;
    max-width: 320px;
  }
}
.f-main .column02.ver03 .fourth .text-wrapper {
  margin-left: auto;
}
.f-main .bg01 {
  position: relative;
}
.f-main .bg01 .back01 {
  width: 100vw;
  height: auto;
  position: absolute;
  top: 25%;
  left: 0;
}
@media (max-width: 767px) {
  .f-main .bg01 .back01 {
    top: 85%;
  }
}
.f-main .bg02 {
  position: relative;
}
.f-main .bg02 .back02 {
  width: 100vw;
  height: auto;
  position: absolute;
  top: 20%;
  left: 0;
}
@media (max-width: 767px) {
  .f-main .bg02 .back02 {
    top: 85%;
  }
}
.f-main .bg03 {
  position: relative;
}
.f-main .bg03 .back03 {
  width: 100vw;
  height: auto;
  position: absolute;
  top: 28%;
  left: 0;
}
@media (max-width: 767px) {
  .f-main .bg03 .back03 {
    top: 75%;
  }
}

.f-school {
  background-color: #f7f0a8;
  padding-top: 50px;
  padding-bottom: 50px;
}
@media (max-width: 767px) {
  .f-school {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.f-school .column03 {
  background-color: #fff;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f5e9e7 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f5e9e7 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .f-school .column03 {
    background-size: 8px 8px;
  }
}
.f-school .column03 .img-wrapper {
  width: 30%;
  position: relative;
  z-index: 1;
}
.f-school .column03 .img-wrapper img {
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .f-school .column03 .img-wrapper img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 767px) {
  .f-school .column03 .img-wrapper {
    position: relative;
    height: calc(100% - 10px);
    width: 23%;
  }
}
@media (max-width: 350px) {
  .f-school .column03 .img-wrapper {
    width: 23%;
  }
}
.f-school .column03 .text-wrapper {
  width: 60%;
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 0 30px;
}
@media (max-width: 767px) {
  .f-school .column03 .text-wrapper {
    width: 52%;
    padding: 0 10px;
  }
}
.f-school .column03 .text-wrapper h2 {
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .f-school .column03 .text-wrapper h2 {
    margin-bottom: 10px;
    font-size: 13px;
  }
}
.f-school .column03::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/f-school-deco.png);
  background-size: cover;
}
@media (max-width: 767px) {
  .f-school .column03::after {
    background-image: url(../img/f-school-deco-sp.png);
  }
}
.f-school .more-btn {
  display: inline-block;
  text-align: center;
}
.f-school .more-btn img {
  width: 100%;
  height: auto;
  max-width: 400px;
  transform: scale(0.95);
  transition: transform 0.5s;
}
@media (max-width: 767px) {
  .f-school .more-btn img {
    max-width: 120px;
  }
}
.f-school .more-btn:hover img, .f-school .more-btn:focus img {
  transform: scale(1);
}

.f-pick {
  padding-top: 50px;
  padding-bottom: 50px;
}
.f-pick .column03 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.f-pick .column03 a {
  display: block;
  width: 33.3333333333%;
  color: #fff;
  position: relative;
}
@media (max-width: 767px) {
  .f-pick .column03 a {
    width: 100%;
    margin-bottom: 10px;
  }
}
.f-pick .column03 a img {
  width: 100%;
  height: auto;
  transition: transform 0.5s;
}
.f-pick .column03 a h3 {
  font-size: 25px;
}
@media (max-width: 1100px) {
  .f-pick .column03 a h3 {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .f-pick .column03 a h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
}
.f-pick .column03 a .text-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.f-pick .column03 a span {
  display: inline-block;
  border: 1px solid #fff;
  max-width: 200px;
  width: 90%;
  padding: 15px 10px;
  border-radius: 30px;
  transition: all 0.5s;
  font-weight: bold;
}
@media (max-width: 1100px) {
  .f-pick .column03 a span {
    padding: 10px;
  }
}
@media (max-width: 767px) {
  .f-pick .column03 a span {
    max-width: 130px;
    font-size: 11px;
    padding: 7px 10px;
  }
}
.f-pick .column03 a:hover span, .f-pick .column03 a:focus span {
  border-color: transparent;
  color: #000;
  background-color: #fff;
}

.study-back {
  background-image: url(../img/study-back.png);
  background-size: contain;
}

.study01 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.study01 .column02 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.study01 .column02 .img-wrapper {
  width: 60%;
}
@media (max-width: 1100px) {
  .study01 .column02 .img-wrapper {
    width: 55%;
  }
}
@media (max-width: 767px) {
  .study01 .column02 .img-wrapper {
    width: 100%;
    margin-bottom: 20px;
  }
}
.study01 .column02 .img-wrapper img {
  width: 100%;
  height: auto;
}
.study01 .column02 .text-wrapper {
  width: 40%;
}
@media (max-width: 1100px) {
  .study01 .column02 .text-wrapper {
    width: 45%;
  }
}
@media (max-width: 767px) {
  .study01 .column02 .text-wrapper {
    width: 100%;
  }
}
.study01 .column02 .text-wrapper h3 {
  font-size: 24px;
  font-family: "source-han-sans-japanese", sans-serif;
  letter-spacing: 0.1em;
  margin-left: -30px;
}
@media (max-width: 1100px) {
  .study01 .column02 .text-wrapper h3 {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .study01 .column02 .text-wrapper h3 {
    font-size: 20px;
    margin-left: 0;
  }
}
.study01 .column02 .text-wrapper h3 span {
  padding: 2px;
  background-color: #4499F0;
  margin-bottom: 10px;
  display: inline-block;
  color: #fff;
}
.study01 .column03 {
  display: flex;
  flex-wrap: wrap;
}
.study01 .column03 li {
  width: calc((100% - 100px) / 3);
  margin-right: 50px;
}
@media (max-width: 767px) {
  .study01 .column03 li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.study01 .column03 li:last-child {
  margin-right: 0;
}
.study01 .column03 li .img-wrapper {
  position: relative;
  z-index: 1;
}
.study01 .column03 li .img-wrapper img {
  width: 100%;
  height: auto;
}
.study01 .column03 li .text-wrapper {
  position: relative;
  z-index: 2;
  max-width: 260px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 30px;
  box-shadow: 6px 6px 36px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  margin-top: -50px;
}
@media (max-width: 1100px) {
  .study01 .column03 li .text-wrapper {
    padding: 20px 15px;
  }
}
.study01 .column03 li .text-wrapper img {
  width: 160px;
  height: auto;
}
.study01 .column03 li .text-wrapper h3 {
  font-size: 20px;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: medium;
}
.study01 .column03 li .text-wrapper p {
  font-size: 12px;
}
.study01 .column03 li .text-wrapper .more-btn {
  display: inline-block;
  font-size: 16px;
  background-color: #fff;
  text-decoration: none;
  border-radius: 24px;
  transition: all 0.5s;
  max-width: 190px;
  width: 100%;
  padding: 9px 10px;
}
.study01 .column03 li .text-wrapper .more-btn.system-ver {
  color: #579E98;
  border: 2px solid #579E98;
}
.study01 .column03 li .text-wrapper .more-btn.system-ver:hover, .study01 .column03 li .text-wrapper .more-btn.system-ver:focus {
  color: #fff;
  border-color: transparent;
  background-color: #579E98;
}
.study01 .column03 li .text-wrapper .more-btn.electricity-ver {
  color: #DBAD33;
  border: 2px solid #DBAD33;
}
.study01 .column03 li .text-wrapper .more-btn.electricity-ver:hover, .study01 .column03 li .text-wrapper .more-btn.electricity-ver:focus {
  color: #fff;
  border-color: transparent;
  background-color: #DBAD33;
}
.study01 .column03 li .text-wrapper .more-btn.machine-ver {
  color: #397CAD;
  border: 2px solid #397CAD;
}
.study01 .column03 li .text-wrapper .more-btn.machine-ver:hover, .study01 .column03 li .text-wrapper .more-btn.machine-ver:focus {
  color: #fff;
  border-color: transparent;
  background-color: #397CAD;
}

.study02 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.study02 .main-img {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  position: relative;
}
@media (max-width: 767px) {
  .study02 .main-img {
    width: 100%;
  }
}
.study02 .main-img img {
  width: 100%;
  height: auto;
}
.study02 .main-img .attach-text {
  font-size: 18px;
  position: absolute;
  left: -30px;
  top: 30px;
  letter-spacing: 0.2em;
}
@media (max-width: 767px) {
  .study02 .main-img .attach-text {
    letter-spacing: 0.14em;
    font-size: 16px;
    left: 0;
    top: -40px;
  }
}
.study02 .main-img .attach-text span {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 10px;
}
.study02 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  position: relative;
}
@media (max-width: 767px) {
  .study02 .inner {
    width: 100%;
  }
}
.study02 .inner p {
  font-size: 18px;
}
@media (max-width: 767px) {
  .study02 .inner p {
    font-size: 16px;
  }
}
.study02 .inner h3 {
  font-size: 24px;
}
@media (max-width: 767px) {
  .study02 .inner h3 {
    font-size: 18px;
  }
}
.study02 .inner span {
  display: inline-block;
}
.study02 .column03 {
  display: flex;
  flex-wrap: wrap;
}
.study02 .column03 li {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  padding: 20px 20px 20px 20px;
  position: relative;
  background-color: #fff;
}
@media (max-width: 767px) {
  .study02 .column03 li {
    width: 100%;
    margin-bottom: 40px;
    margin-right: 0;
    padding: 30px;
  }
}
.study02 .column03 li:first-child::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  right: -15px;
  top: 50%;
  margin-top: -15px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .study02 .column03 li:first-child::after {
    top: unset;
    right: unset;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.study02 .column03 li:nth-child(2)::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  right: -15px;
  top: 50%;
  margin-top: -15px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .study02 .column03 li:nth-child(2)::after {
    top: unset;
    right: unset;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.study02 .column03 li:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.study02 .column03 li figure {
  position: static;
  transform: translateY(0);
}
.study02 .column03 li figure img {
  width: 100%;
  height: auto;
}
.study02 .column02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.study02 .column02 .img-wrapper {
  width: 48%;
}
@media (max-width: 767px) {
  .study02 .column02 .img-wrapper {
    width: 100%;
  }
}
.study02 .column02 .img-wrapper img {
  width: 100%;
  height: auto;
}
.study02 .column02 .text-wrapper {
  width: 50%;
  font-family: "source-han-sans-japanese", sans-serif;
}
@media (max-width: 767px) {
  .study02 .column02 .text-wrapper {
    width: 100%;
    margin-bottom: 30px;
  }
}
.study02 .column02 .text-wrapper h3 {
  font-size: 24px;
}
@media (max-width: 767px) {
  .study02 .column02 .text-wrapper h3 {
    font-size: 20px;
  }
}
.study02 .column02 .text-wrapper p {
  line-height: 2;
}
.study02 .column02.reverse {
  flex-direction: row-reverse;
}
.study02 .img-column02 {
  display: flex;
  justify-content: center;
}
.study02 .img-column02 .item {
  width: calc((100% - 20px) / 2);
  max-width: 320px;
}
.study02 .img-column02 .item img {
  width: 100%;
  height: auto;
  box-shadow: 6px 6px 36px rgba(0, 0, 0, 0.12);
}
.study02 .img-column02 .item.margin {
  margin-left: 50px;
  margin-top: 100px;
}
@media (max-width: 767px) {
  .study02 .img-column02 .item.margin {
    margin-left: 20px;
    margin-top: 60px;
  }
}
.study02 .indent {
  padding-left: 1em;
  text-indent: -1em;
}
.study02 .outer {
  font-family: "source-han-sans-japanese", sans-serif;
}
.study02 .outer h3 {
  font-size: 24px;
}
@media (max-width: 767px) {
  .study02 .outer h3 {
    text-align: center;
    font-size: 20px;
  }
}
.study02 .outer h3 span {
  display: inline-block;
  background-color: #F7F8F3;
  padding: 2px 10px;
}
.study02 .class-box {
  background-color: #fff;
  padding: 30px 10px;
}
.study02 .class-slick {
  width: calc(100% - 60px);
  max-width: 760px;
  margin: 0 auto;
}
.study02 .class-slick .slick-prev {
  left: -30px;
  width: 20px;
  height: 20px;
  background-size: contain;
}
.study02 .class-slick .slick-prev::before {
  display: none;
}
.study02 .class-slick .slick-next {
  right: -30px;
  width: 20px;
  height: 20px;
  background-size: contain;
}
.study02 .class-slick .slick-next::before {
  display: none;
}
.study02 .class-slick img {
  width: 100%;
  height: auto;
}
.study02.system {
  background-image: url(../img/bg_pc-system.png);
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position-y: 5%;
}
@media (max-width: 767px) {
  .study02.system {
    background-image: none;
  }
}
.study02.system .main-img .attach-text span {
  background-color: #579E98;
  color: #fff;
}
.study02.system .system-title.no-sp img {
  max-width: 568px;
  height: auto;
}
.study02.system .system-title.sp-only img {
  max-width: 146px;
  height: auto;
}
.study02.system .inner h3 {
  color: #579E98;
}
.study02.system .color {
  color: #579E98;
}
.study02.system .column02 h3 {
  color: #579E98;
}
.study02.system .outer {
  background-image: url(../img/bg-02.png);
  background-size: contain;
  padding: 20px 0;
}
@media (max-width: 767px) {
  .study02.system .outer {
    background-image: url(../img/sys-sp-bg.png);
  }
}
.study02.system .outer h3 {
  color: #579E98;
  font-weight: medium;
}
.study02.system .outer p {
  font-size: 14px;
  font-weight: medium;
}
.study02.system .column03 li:first-child::after {
  background-image: url(../img/system-arrow.svg);
}
@media (max-width: 767px) {
  .study02.system .column03 li:first-child::after {
    background-image: url(../img/system-arrow-sp.png);
  }
}
.study02.system .column03 li:nth-child(2)::after {
  background-image: url(../img/system-arrow.svg);
}
@media (max-width: 767px) {
  .study02.system .column03 li:nth-child(2)::after {
    background-image: url(../img/system-arrow-sp.png);
  }
}
.study02.system .class-slick .slick-prev {
  background-image: url(../img/system-arrow-l.svg);
}
.study02.system .class-slick .slick-next {
  background-image: url(../img/system-arrow.svg);
}
.study02.electricity {
  background-image: url(../img/bg_pc02-electricity.png);
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position-y: 5%;
}
@media (max-width: 767px) {
  .study02.electricity {
    background-image: none;
  }
}
.study02.electricity .main-img .attach-text {
  left: unset;
  right: -30px;
  text-align: right;
}
@media (max-width: 767px) {
  .study02.electricity .main-img .attach-text {
    right: 0;
  }
}
.study02.electricity .main-img .attach-text span {
  background-color: #DBAD33;
  color: #fff;
}
.study02.electricity .electricity-title.no-sp img {
  max-width: 300px;
  height: auto;
}
.study02.electricity .electricity-title.sp-only img {
  max-width: 72px;
  height: auto;
}
.study02.electricity .inner h3 {
  color: #DBAD33;
}
.study02.electricity .color {
  color: #DBAD33;
}
.study02.electricity .column02 h3 {
  color: #DBAD33;
}
.study02.electricity .outer {
  background-image: url(../img/bg_pc01-electricity.png);
  background-size: contain;
  padding: 20px 0;
}
@media (max-width: 767px) {
  .study02.electricity .outer {
    background-image: url(../img/ele-bg-sp.png);
  }
}
.study02.electricity .outer h3 {
  color: #DBAD33;
  font-weight: medium;
}
.study02.electricity .outer p {
  font-size: 14px;
  font-weight: medium;
}
.study02.electricity .column03 li:first-child::after {
  background-image: url(../img/electricity-arrow.svg);
}
@media (max-width: 767px) {
  .study02.electricity .column03 li:first-child::after {
    background-image: url(../img/electricity-arrow-sp.svg);
  }
}
.study02.electricity .column03 li:nth-child(2)::after {
  background-image: url(../img/electricity-arrow.svg);
}
@media (max-width: 767px) {
  .study02.electricity .column03 li:nth-child(2)::after {
    background-image: url(../img/electricity-arrow-sp.svg);
  }
}
.study02.electricity .class-slick .slick-prev {
  background-image: url(../img/electricity-arrow-l.svg);
}
.study02.electricity .class-slick .slick-next {
  background-image: url(../img/electricity-arrow.svg);
}
.study02.machine {
  background-image: url(../img/bg_pc02-machine.png);
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position-y: 5%;
}
@media (max-width: 767px) {
  .study02.machine {
    background-image: none;
  }
}
.study02.machine .main-img .attach-text span {
  background-color: #397CAD;
  color: #fff;
}
.study02.machine .machine-title.no-sp img {
  max-width: 300px;
  height: auto;
}
.study02.machine .machine-title.sp-only img {
  max-width: 72px;
  height: auto;
}
.study02.machine .inner h3 {
  color: #397CAD;
}
.study02.machine .color {
  color: #397CAD;
}
.study02.machine .column02 h3 {
  color: #397CAD;
}
.study02.machine .outer {
  background-image: url(../img/bg_pc01-machine.png);
  background-size: contain;
  padding: 20px 0;
}
@media (max-width: 767px) {
  .study02.machine .outer {
    background-image: url(../img/machine-bg-sp.png);
  }
}
.study02.machine .outer h3 {
  color: #397CAD;
  font-weight: medium;
}
.study02.machine .outer p {
  font-size: 14px;
  font-weight: medium;
}
.study02.machine .column03 li:first-child::after {
  background-image: url(../img/machine-arrow.svg);
}
@media (max-width: 767px) {
  .study02.machine .column03 li:first-child::after {
    background-image: url(../img/machine-arrow-sp.svg);
  }
}
.study02.machine .column03 li:nth-child(2)::after {
  background-image: url(../img/machine-arrow.svg);
}
@media (max-width: 767px) {
  .study02.machine .column03 li:nth-child(2)::after {
    background-image: url(../img/machine-arrow-sp.svg);
  }
}
.study02.machine .class-slick .slick-prev {
  background-image: url(../img/machine-arrow-l.svg);
}
.study02.machine .class-slick .slick-next {
  background-image: url(../img/machine-arrow.svg);
}

.future01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.future01 .container.color {
  background-color: #ecf2f7;
  padding: 50px 20px;
}
.future01 .column02 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.future01 .column02.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 767px) {
  .future01 .column02.reverse {
    flex-direction: row;
  }
}
.future01 .column02 .img-wrapper {
  width: 42%;
  position: relative;
  margin-right: 0%;
  margin-right: 5%;
}
@media (max-width: 1100px) {
  .future01 .column02 .img-wrapper {
    width: 42%;
  }
}
@media (max-width: 767px) {
  .future01 .column02 .img-wrapper {
    width: calc(100% - 20px);
    margin-right: 0;
    max-width: 400px;
    margin-bottom: 30px;
  }
}
.future01 .column02 .img-wrapper img {
  width: 100%;
  height: auto;
}
.future01 .column02 .img-wrapper::after {
  content: "";
  right: -20px;
  top: 20px;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
}
.future01 .column02 .text-wrapper {
  width: 30%;
}
@media (max-width: 767px) {
  .future01 .column02 .text-wrapper {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}
.future01 .column02 .list li {
  border-bottom: 2px solid #a0b5c3;
}
.future01 .column02 .list li:first-child {
  border-bottom: 3px solid #397cad;
}
.future01 .column02 .list li h2 {
  padding: 10px 0;
  font-size: 20px;
}
.future01 .column02 .list a {
  padding: 10px 20px 10px 0px;
  position: relative;
  color: #777777;
  text-decoration: none;
  display: block;
}
.future01 .column02 .list a::after {
  content: "";
  width: 8px;
  height: 14px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -7px;
  background-image: url(../img/more-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.future01 .column02 .list .no-link-item {
  padding: 10px 0px 10px 0px;
  position: relative;
  border-bottom: none;
}
.future01 .column02 .link {
  text-decoration: none;
  font-size: 20px;
  background-color: #fff;
  display: block;
  border: 2px solid #397cad;
  padding: 5px 0;
  color: #397cad;
  border-radius: 5px;
  transition: all 0.5s;
}
.future01 .column02 .link:hover, .future01 .column02 .link:focus {
  color: #fff;
  background-color: #397cad;
  border-color: transparent;
}
.future01 .column02-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.future01 .column02-1 .img-wrapper {
  width: 58%;
}
@media (max-width: 767px) {
  .future01 .column02-1 .img-wrapper {
    width: 100%;
    margin-bottom: 30px;
  }
}
.future01 .column02-1 .img-wrapper img {
  width: 100%;
  height: auto;
}
.future01 .column02-1 .text-wrapper {
  width: 40%;
}
@media (max-width: 767px) {
  .future01 .column02-1 .text-wrapper {
    width: 100%;
  }
}
.future01 .column02-1 .text-wrapper h3 {
  font-size: 30px;
}
@media (max-width: 767px) {
  .future01 .column02-1 .text-wrapper h3 {
    font-size: 20px;
    text-align: center;
  }
}
.future01 .link {
  text-decoration: none;
  color: #397CAD;
  border-color: #397CAD;
  background-color: #fff;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid #397CAD;
  transition: all 0.5s;
}
.future01 .link:hover, .future01 .link:focus {
  background-color: #397CAD;
  color: #fff;
  border-color: transparent;
}

.student01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.student01 h3 {
  font-size: 36px;
  padding-bottom: 40px;
  position: relative;
}
@media (max-width: 767px) {
  .student01 h3 {
    font-size: 25px;
  }
}
.student01 h3:after {
  content: "";
  position: absolute;
  left: 0px;
  width: 100%;
  height: 30px;
  bottom: 0;
  background-image: url(../img/deco05.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .student01 h3:after {
    background-size: cover;
    background-position-x: right;
  }
}
.student01 .list {
  display: flex;
  flex-wrap: wrap;
}
.student01 .list li {
  padding: 0 15px 5px;
  margin-bottom: 10px;
  transition: all 0.5s;
  cursor: pointer;
}
.student01 .list li.is-active {
  border-bottom: 4px solid #397cad;
}
.student01 .js-content {
  display: none;
}
.student01 .js-content.is-active {
  display: block;
  animation: fade 0.5s ease;
}
.student01 .js-content ul {
  display: flex;
  flex-wrap: wrap;
}
.student01 .js-content ul li {
  width: calc((100% - 30px) / 4);
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}
@media (max-width: 767px) {
  .student01 .js-content ul li {
    width: calc((100% - 20px) / 3);
  }
}
.student01 .js-content ul li a {
  display: block;
  border: 3px solid #397cad;
  padding: 5px 10px;
  border-radius: 5px;
  color: #397cad;
  text-decoration: none;
  transition: all 0.5s;
  background-color: #fff;
}
.student01 .js-content ul li a:hover, .student01 .js-content ul li a:focus {
  color: #fff;
  background-color: #397cad;
  border-color: transparent;
}
.student01 .js-content ul li:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 767px) {
  .student01 .js-content ul li:nth-child(4n) {
    margin-right: 10px;
  }
}
@media (max-width: 767px) {
  .student01 .js-content ul li:nth-child(3n) {
    margin-right: 0;
  }
}
.student01 .js-content ul li:last-child {
  margin-right: 0;
}
.student01 .column02 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .student01 .column02 {
    justify-content: space-around;
  }
}
.student01 .column02 div {
  width: 300px;
}
@media (max-width: 767px) {
  .student01 .column02 .left {
    width: 100%;
    max-width: 400px;
    margin-bottom: 30px;
  }
}
.student01 .column02 .left li {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #397cad;
  font-weight: bold;
}
.student01 .column02 .left li a {
  color: #3b4043;
  text-decoration: none;
  display: block;
  padding-right: 20px;
  position: relative;
}
.student01 .column02 .left li a::after {
  content: "";
  width: 12px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  background-image: url(../img/blue-arrow.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.student01 .column02 .left p a {
  color: #397CAD;
  text-decoration: none;
}
@media (max-width: 767px) {
  .student01 .column02 .right {
    width: 100%;
    max-width: 400px;
  }
}
.student01 .column02 .right h4 {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #397cad;
}
.student01 .column02 .right li {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #a0b5c3;
}
.student01 .column02 .right li a {
  text-decoration: none;
  padding-right: 20px;
  color: #777777;
  position: relative;
  display: block;
}
.student01 .column02 .right li a::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 14px;
  right: 0;
  top: 50%;
  margin-top: -7px;
  background-image: url(../img/gray-arrow01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.management01 {
  background-image: url(../img/about-back.png);
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.management01 .main-img img {
  width: 100%;
  height: auto;
}
.management01 .list {
  display: flex;
  flex-wrap: wrap;
}
.management01 .list li {
  padding: 0 15px 5px;
  margin-bottom: 10px;
  transition: all 0.5s;
  cursor: pointer;
}
.management01 .list li.is-active {
  border-bottom: 4px solid #397cad;
}
.management01 .js-content {
  display: none;
}
.management01 .js-content.is-active {
  display: block;
  animation: fade 0.5s ease;
}
.management01 .js-content ul {
  display: flex;
  flex-wrap: wrap;
}
.management01 .js-content ul li {
  width: calc((100% - 30px) / 4);
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.management01 .js-content ul li a {
  display: block;
  border: 3px solid #397cad;
  padding: 5px 10px;
  border-radius: 5px;
  color: #397cad;
  text-decoration: none;
  transition: all 0.5s;
}
.management01 .js-content ul li a:hover, .management01 .js-content ul li a:focus {
  color: #fff;
  background-color: #397cad;
  border-color: transparent;
}
.management01 .js-content ul li:nth-child(4n) {
  margin-right: 0;
}
.management01 .js-content ul li:last-child {
  margin-right: 0;
}
.management01 .column04 {
  display: flex;
  flex-wrap: wrap;
}
.management01 .column04 li {
  width: calc((100% - 30px) / 4);
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}
@media (max-width: 767px) {
  .management01 .column04 li {
    width: calc((100% - 10px) / 2);
  }
}
.management01 .column04 li a {
  display: block;
  border: 3px solid #397cad;
  padding: 5px 10px;
  border-radius: 5px;
  color: #397cad;
  text-decoration: none;
  transition: all 0.5s;
  background-color: #fff;
}
.management01 .column04 li a:hover, .management01 .column04 li a:focus {
  color: #fff;
  background-color: #397cad;
  border-color: transparent;
}
.management01 .column04 li:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 767px) {
  .management01 .column04 li:nth-child(2n) {
    margin-right: 0;
  }
}
.management01 .column04 li:last-child {
  margin-right: 0;
}

.junior01 {
  background-image: url(../img/about-back.png);
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.junior01 .main-img {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.junior01 .main-img img {
  width: 100%;
  height: auto;
}
.junior01 .inner-list {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.junior01 .inner-list h3 {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #397cad;
}
.junior01 .inner-list li {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #a0b5c3;
}
.junior01 .inner-list li a {
  text-decoration: none;
  padding-right: 20px;
  color: #777777;
  position: relative;
  display: block;
}
.junior01 .inner-list li a::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 14px;
  right: 0;
  top: 50%;
  margin-top: -7px;
  background-image: url(../img/gray-arrow01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.junior02 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #ECF2F7;
}
.junior02 h2 {
  font-size: 20px;
}
@media (max-width: 767px) {
  .junior02 h2 {
    font-size: 18px;
  }
}
.junior02 .column03 {
  display: flex;
  flex-wrap: wrap;
}
.junior02 .column03 li {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .junior02 .column03 li {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
  }
}
@media (max-width: 767px) {
  .junior02 .column03 li {
    width: calc((100% - 10px) / 2);
    margin-right: 10px;
  }
}
.junior02 .column03 li:nth-child(3n) {
  margin-right: 0;
}
@media (max-width: 767px) {
  .junior02 .column03 li:nth-child(3n) {
    margin-right: 10px;
  }
}
@media (max-width: 767px) {
  .junior02 .column03 li:nth-child(2n) {
    margin-right: 0;
  }
}
.junior02 .column03 li:last-child {
  margin-right: 0;
}
.junior02 .column03 li img {
  width: 100%;
  ha: 0;
}

.junior03 {
  background-image: url(../img/about-back.png);
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.junior03 h2 {
  font-size: 26px;
}
@media (max-width: 767px) {
  .junior03 h2 {
    font-size: 16px;
  }
}
.junior03 h3 {
  font-size: 16px;
  color: #777;
  padding-bottom: 20px;
  border-bottom: 2px solid #5D78A1;
}
.junior03 .inner {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.junior03 dl {
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 50px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #A0B5C3;
  align-items: center;
}
@media (max-width: 767px) {
  .junior03 dl {
    padding-left: 0;
    padding-right: 0;
  }
}
.junior03 dl dt {
  color: #777777;
}
.junior03 dl dd {
  color: #777;
  margin-left: auto;
}
.junior03 a {
  text-decoration: none;
  color: #397CAD;
  font-weight: medium;
  display: inline-block;
  background-color: #fff;
  border: 2px solid #397CAD;
  padding: 5px 20px;
  border-radius: 5px;
  transition: all 0.5s;
}
.junior03 a:hover, .junior03 a:focus {
  background: #397CAD;
  color: #fff;
  border-color: transparent;
}
.junior03 .indent {
  padding-left: 1em;
  text-indent: -1em;
}
.junior03 .gray {
  color: #777;
}

.graduate01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.graduate01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.graduate01 .inner h3 {
  font-size: 20px;
}
.graduate01 .inner .more-btn {
  display: inline-block;
  text-align: center;
}
.graduate01 .inner .more-btn img {
  width: 100%;
  height: auto;
  max-width: 400px;
  transform: scale(0.95);
  transition: transform 0.5s;
}
.graduate01 .inner .more-btn:hover img, .graduate01 .inner .more-btn:focus img {
  transform: scale(1);
}
.graduate01 .tel {
  color: #000;
  text-decoration: none;
}
.graduate01 .column02 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.graduate01 .column02 li {
  width: 40%;
  text-align: center;
}
@media (max-width: 767px) {
  .graduate01 .column02 li {
    width: 100%;
    margin-bottom: 10px;
  }
}
.graduate01 .column02 li:last-child {
  margin-bottom: 0;
}
.graduate01 .column02 li a {
  display: inline-block;
  width: 100%;
  background-color: #fff;
  border: 2px solid #397CAD;
  color: #397CAD;
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.5s;
}
.graduate01 .column02 li a:hover, .graduate01 .column02 li a:focus {
  color: #fff;
  background-color: #397CAD;
  border-color: transparent;
}

.about-back {
  background-image: url(../img/about-back.png);
  background-size: contain;
}

.about01 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.about01 .column02 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.about01 .column02 div {
  width: 30%;
  min-width: 300px;
}
@media (max-width: 767px) {
  .about01 .column02 div {
    width: 100%;
    max-width: 400px;
  }
}
@media (max-width: 767px) {
  .about01 .column02 .left {
    margin-bottom: 0px;
  }
}
.about01 .column02 .left li {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #397cad;
  font-weight: bold;
}
.about01 .column02 .left li a {
  color: #3b4043;
  text-decoration: none;
  display: block;
  padding-right: 20px;
  position: relative;
}
.about01 .column02 .left li a::after {
  content: "";
  width: 12px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
  background-image: url(../img/blue-arrow.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.5s;
}
.about01 .column02 .left li a:hover::after, .about01 .column02 .left li afocus::after {
  transform: translateX(5px);
}
.about01 .column02 .right li {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #397cad;
  font-weight: bold;
}
.about01 .column02 .right li a {
  color: #3b4043;
  text-decoration: none;
  display: block;
  padding-right: 20px;
  position: relative;
}
.about01 .column02 .right li a::after {
  content: "";
  width: 12px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
  background-image: url(../img/blue-arrow.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.5s;
}
.about01 .column02 .right li a:hover::after, .about01 .column02 .right li afocus::after {
  transform: translateX(5px);
}
.about01 .column02 .img-wrapper img {
  width: 100%;
  height: auto;
}
.about01 .column02 .text-wrapper {
  padding: 30px 20px;
  background-color: #ecf2f7;
}
.about01 .column02 .text-wrapper h3 {
  font-size: 20px;
}
.about01 .column02 .text-wrapper h3 img {
  width: 160px;
  height: auto;
  vertical-align: middle;
}
.about01 .column02 .text-wrapper .more-btn {
  display: block;
}
.about01 .column02 .text-wrapper .more-btn img {
  width: 100%;
  height: auto;
  transform: scale(0.95);
  transition: transform 0.5s;
}
.about01 .column02 .text-wrapper .more-btn:hover img, .about01 .column02 .text-wrapper .more-btn:focus img {
  transform: scale(1);
}
.about01 .column02-1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.about01 .column02-1 li {
  width: calc(50% - 40px);
  max-width: 400px;
  margin-right: 80px;
  margin-bottom: 50px;
}
@media (max-width: 1100px) {
  .about01 .column02-1 li {
    width: calc(50% - 20px);
    margin-right: 40px;
  }
}
@media (max-width: 767px) {
  .about01 .column02-1 li {
    width: 100%;
    max-width: 400px;
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.about01 .column02-1 li:last-child {
  margin-right: 0;
}
.about01 .column02-1 .img-wrapper {
  position: relative;
  z-index: 1;
}
.about01 .column02-1 .img-wrapper img {
  width: 100%;
  height: auto;
}
.about01 .column02-1 .text-wrapper {
  max-width: 300px;
  position: relative;
  z-index: 2;
  margin-top: -20px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ECF2F7;
  padding: 30px;
  font-family: "source-han-sans-japanese", sans-serif;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1100px) {
  .about01 .column02-1 .text-wrapper {
    width: calc(100% - 30px);
  }
}
@media (max-width: 767px) {
  .about01 .column02-1 .text-wrapper {
    height: auto !important;
    padding: 30px 20px;
  }
}
.about01 .column02-1 .text-wrapper h3 {
  font-size: 20px;
}
.about01 .column02-1 .text-wrapper p {
  font-size: 12px;
}
.about01 .column02-1 .text-wrapper .margin {
  margin-top: auto;
}
.about01 .column02-1 .text-wrapper .more-btn img {
  width: 100%;
  height: auto;
  transform: scale(0.95);
  transition: transform 0.5s;
}
.about01 .column02-1 .text-wrapper .more-btn:hover img, .about01 .column02-1 .text-wrapper .more-btn:focus img {
  transform: scale(1);
}
.about01 .column02-1 .number01 img {
  width: 19px;
  height: auto;
}
.about01 .column02-1 .number02 img {
  width: 20.83px;
  height: auto;
}
.about01 .column02-1 .number03 img {
  width: 21.12px;
  height: auto;
}
.about01 .column02-1 .number04 img {
  width: 21.38px;
  height: auto;
}
.about01 .column02-1 .number05 img {
  width: 21.37px;
  height: auto;
}
.about01 .column02-1 .number06 img {
  width: 21.41px;
  height: auto;
}
.about01 .column02-1 .number07 img {
  width: 19.96px;
  height: auto;
}
.about01 .column02-1 .number08 img {
  width: 21.43px;
  height: auto;
}

.about02 {
  padding-top: 50px;
  padding-bottom: 50px;
  font-family: "source-han-sans-japanese", sans-serif;
}
.about02 iframe {
  width: 100%;
  height: 400px;
}
@media (max-width: 767px) {
  .about02 iframe {
    height: 320px;
  }
}
.about02 h3 {
  font-size: 20px;
  color: #397CAD;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .about02 h3 {
    font-size: 18px;
  }
}
.about02 p {
  font-size: 18px;
  line-height: 2;
}
@media (max-width: 767px) {
  .about02 p {
    font-size: 16px;
  }
}
.about02 p a {
  text-decoration: none;
  color: #000;
}
.about02 p .no-sp {
  display: inline;
}
@media (max-width: 767px) {
  .about02 p .no-sp {
    display: none;
  }
}

.schedule01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.schedule01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.schedule01 .link {
  display: inline-block;
  border: 2px solid #397CAD;
  color: #397CAD;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.5s;
}
.schedule01 .link:hover, .schedule01 .link:focus {
  color: #fff;
  background-color: #397CAD;
  border-color: transparent;
}
.schedule01 h3 {
  font-size: 28px;
}
@media (max-width: 767px) {
  .schedule01 h3 {
    font-size: 20px;
  }
}
.schedule01 .column02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.schedule01 .column02 li {
  width: 44%;
  min-width: 340px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .schedule01 .column02 li {
    width: calc((100% - 10px) / 2);
    min-width: unset;
  }
}
.schedule01 .column02 li img {
  width: 100%;
  height: auto;
}

.inside-back {
  background-image: url(../img/inside-school-back.png);
  background-size: contain;
  padding-bottom: 50px;
}

.inside01 {
  padding-top: 50px;
}
.inside01 .map img {
  width: 100%;
  height: auto;
}
.inside01 .pc-menu {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .inside01 .pc-menu {
    display: none;
  }
}
.inside01 .pc-menu li {
  width: calc((100% - 40px) / 3);
}
.inside01 .pc-menu a {
  display: block;
  color: #3B4043;
  text-decoration: none;
  font-size: 20px;
  font-family: "source-han-sans-japanese", sans-serif;
  margin-bottom: 10px;
  padding-right: 17px;
  padding-left: 35px;
  position: relative;
}
@media (max-width: 1100px) {
  .inside01 .pc-menu a {
    font-size: 16px;
  }
}
.inside01 .pc-menu a::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.inside01 .pc-menu a::after {
  content: "";
  position: absolute;
  right: 5px;
  width: 12px;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  background-image: url(../img/map-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: transform 0.5s;
}
.inside01 .pc-menu a.no01::before {
  background-image: url(../img/map-01.png);
}
.inside01 .pc-menu a.no02::before {
  background-image: url(../img/map-02.png);
}
.inside01 .pc-menu a.no03::before {
  background-image: url(../img/map-03.png);
}
.inside01 .pc-menu a.no04::before {
  background-image: url(../img/map-04.png);
}
.inside01 .pc-menu a.no05::before {
  background-image: url(../img/map-05.png);
}
.inside01 .pc-menu a.no06::before {
  background-image: url(../img/map-06.png);
}
.inside01 .pc-menu a.no07::before {
  background-image: url(../img/map-07.png);
}
.inside01 .pc-menu a.no08::before {
  background-image: url(../img/map-08.png);
}
.inside01 .pc-menu a:hover::after, .inside01 .pc-menu a:focus::after {
  transform: translateX(5px);
}
.inside01 .sp-menu {
  display: none;
}
@media (max-width: 767px) {
  .inside01 .sp-menu {
    justify-content: space-between;
    display: flex;
  }
}
.inside01 .sp-menu li {
  width: calc((100% - 10px) / 2);
}
.inside01 .sp-menu a {
  display: block;
  color: #3B4043;
  text-decoration: none;
  font-size: 11px;
  font-family: "source-han-sans-japanese", sans-serif;
  margin-bottom: 10px;
  padding-right: 17px;
  padding-left: 25px;
  position: relative;
}
.inside01 .sp-menu a::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.inside01 .sp-menu a::after {
  content: "";
  position: absolute;
  right: 5px;
  width: 6px;
  height: 10px;
  top: 50%;
  margin-top: -5px;
  background-image: url(../img/map-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: transform 0.5s;
}
.inside01 .sp-menu a.no01::before {
  background-image: url(../img/map-01.png);
}
.inside01 .sp-menu a.no02::before {
  background-image: url(../img/map-02.png);
}
.inside01 .sp-menu a.no03::before {
  background-image: url(../img/map-03.png);
}
.inside01 .sp-menu a.no04::before {
  background-image: url(../img/map-04.png);
}
.inside01 .sp-menu a.no05::before {
  background-image: url(../img/map-05.png);
}
.inside01 .sp-menu a.no06::before {
  background-image: url(../img/map-06.png);
}
.inside01 .sp-menu a.no07::before {
  background-image: url(../img/map-07.png);
}
.inside01 .sp-menu a.no08::before {
  background-image: url(../img/map-08.png);
}
.inside01 .sp-menu a:hover::after, .inside01 .sp-menu a:focus::after {
  transform: translateX(5px);
}

.inside02 {
  padding-top: 50px;
}
.inside02 img {
  box-shadow: 6px 6px 46px rgba(0, 0, 0, 0.12);
}
.inside02 .main-img img {
  width: 100%;
  height: auto;
}
.inside02 .container {
  position: relative;
  z-index: 5;
}
.inside02 .column02 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .inside02 .column02 {
    align-items: center;
  }
}
.inside02 .column02 .img-wrapper {
  width: 55%;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .inside02 .column02 .img-wrapper {
    width: 100%;
  }
}
.inside02 .column02 .img-wrapper img {
  width: 100%;
  height: auto;
}
.inside02 .column02 .text-wrapper {
  width: 42%;
  padding: 20px 30px;
  color: #fff;
  box-shadow: 6px 6px 46px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .inside02 .column02 .text-wrapper {
    width: calc(100% - 20px);
    margin-left: auto;
    margin-top: -20px;
  }
}
.inside02 .column02 .text-wrapper .more-btn {
  width: 100%;
  max-width: 240px;
  display: inline-block;
  background-color: #fff;
  display: inline-block;
  padding: 15px 10px;
  border-radius: 30px;
  text-decoration: none;
  border: 2px solid transparent;
  font-weight: bold;
  transition: all 0.5s;
}
.inside02 .column02 .text-wrapper.green {
  background-color: #4EC4A1;
}
.inside02 .column02 .text-wrapper.green .more-btn {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.inside02 .column02 .text-wrapper.green .more-btn:hover, .inside02 .column02 .text-wrapper.green .more-btn:focus {
  background-color: #fff;
  color: #4EC4A1;
  border-color: transparent;
}
.inside02 .column02 .text-wrapper.orange {
  background-color: #DEB74D;
}
.inside02 .column02 .text-wrapper.orange .more-btn {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.inside02 .column02 .text-wrapper.orange .more-btn:hover, .inside02 .column02 .text-wrapper.orange .more-btn:focus {
  background-color: #fff;
  color: #DEB74D;
  border-color: #DEB74D;
}
.inside02 .column02 .text-wrapper.blue {
  background-color: #7BA8EC;
}
.inside02 .column02 .text-wrapper.blue .more-btn {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.inside02 .column02 .text-wrapper.blue .more-btn:hover, .inside02 .column02 .text-wrapper.blue .more-btn:focus {
  background-color: #fff;
  color: #7BA8EC;
  border-color: #7BA8EC;
}
.inside02 .column02 .text-wrapper.red {
  background-color: #DE837B;
}
.inside02 .column02 .text-wrapper.red .more-btn {
  color: #DE837B;
}
.inside02 .column02 .text-wrapper.red .more-btn:hover, .inside02 .column02 .text-wrapper.red .more-btn:focus {
  background-color: #DE837B;
  color: #fff;
  border-color: #fff;
}
.inside02 .column02 .text-wrapper h3 {
  line-height: 60px;
  font-size: 28px;
  padding-left: 70px;
  position: relative;
}
@media (max-width: 767px) {
  .inside02 .column02 .text-wrapper h3 {
    font-size: 20px;
    line-height: 32px;
    padding-left: 42px;
  }
}
.inside02 .column02 .text-wrapper h3::before {
  content: "";
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 767px) {
  .inside02 .column02 .text-wrapper h3::before {
    width: 32px;
    height: 32px;
  }
}
.inside02 .column02 .text-wrapper h3.no01::before {
  background-image: url(../img/s-no01.png);
}
.inside02 .column02 .text-wrapper h3.no02::before {
  background-image: url(../img/s-no02.png);
}
.inside02 .column02 .text-wrapper h3.no03::before {
  background-image: url(../img/s-no03.png);
}
.inside02 .column02 .text-wrapper h3.no04::before {
  background-image: url(../img/s-no04.png);
}
.inside02 .column02 .text-wrapper h3.no05::before {
  background-image: url(../img/s-no05.png);
}
.inside02 .column02 .text-wrapper h3.no06::before {
  background-image: url(../img/s-no06.png);
}
.inside02 .column02 .text-wrapper h3.no07::before {
  background-image: url(../img/s-no07.png);
}
.inside02 .column02 .text-wrapper h3.no08::before {
  background-image: url(../img/s-no08.png);
}
.inside02 .column02.reverse {
  flex-direction: row-reverse;
}
.inside02 .column02.reverse .text-wrapper {
  margin-left: 0;
  margin-right: auto;
}
.inside02 .column02-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.inside02 .column02-1 li {
  width: calc((100% - 20px) / 2);
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .inside02 .column02-1.sp-big li {
    width: 100%;
  }
}
.inside02 .column02-1 img {
  width: 100%;
  height: auto;
}
.inside02 .column03 {
  display: flex;
  flex-wrap: wrap;
}
.inside02 .column03 li {
  width: calc((100% - 40px) / 3);
  margin-right: 20px;
  margin-bottom: 20px;
}
.inside02 .column03 li:nth-child(3n) {
  margin-right: 0;
}
@media (max-width: 767px) {
  .inside02 .column03 li:nth-child(3n) {
    margin-right: 20px;
  }
}
@media (max-width: 767px) {
  .inside02 .column03 li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .inside02 .column03 li {
    width: calc((100% - 20px) / 2);
  }
}
.inside02 .column03 li img {
  width: 100%;
  height: auto;
}
.inside02 .green-back {
  position: relative;
}
.inside02 .green-back::before {
  position: absolute;
  content: "";
  width: 100vw;
  height: 320px;
  background-image: url(../img/school-back01.png);
  top: 50%;
  margin-top: -160px;
  background-size: contain;
}
@media (max-width: 1100px) {
  .inside02 .green-back::before {
    height: 250px;
    margin-top: -125px;
  }
}
@media (max-width: 767px) {
  .inside02 .green-back::before {
    top: -15px;
    height: calc(100% + 30px);
    margin-top: 0;
    background-image: url(../img/green-back-sp.png);
  }
}
.inside02 .orange-back {
  position: relative;
}
.inside02 .orange-back::before {
  position: absolute;
  content: "";
  width: 100vw;
  height: 320px;
  background-image: url(../img/school-back02.png);
  top: 50%;
  margin-top: -160px;
  background-size: contain;
}
@media (max-width: 1100px) {
  .inside02 .orange-back::before {
    height: 250px;
    margin-top: -125px;
  }
}
@media (max-width: 767px) {
  .inside02 .orange-back::before {
    top: -15px;
    height: calc(100% + 30px);
    margin-top: 0;
    background-image: url(../img/yellow-back-sp.png);
  }
}
.inside02 .blue-back {
  position: relative;
}
.inside02 .blue-back::before {
  position: absolute;
  content: "";
  width: 100vw;
  height: 320px;
  background-image: url(../img/school-back03.png);
  top: 50%;
  margin-top: -160px;
  background-size: contain;
}
@media (max-width: 1100px) {
  .inside02 .blue-back::before {
    height: 250px;
    margin-top: -125px;
  }
}
@media (max-width: 767px) {
  .inside02 .blue-back::before {
    top: -15px;
    height: calc(100% + 30px);
    margin-top: 0;
    background-image: url(../img/blue-back-sp.png);
  }
}
.inside02 .red-back {
  position: relative;
}
.inside02 .red-back::before {
  position: absolute;
  content: "";
  width: 100vw;
  height: 320px;
  background-image: url(../img/school-back04.png);
  top: 50%;
  margin-top: -160px;
  background-size: contain;
}
@media (max-width: 1100px) {
  .inside02 .red-back::before {
    height: 250px;
    margin-top: -125px;
  }
}
@media (max-width: 767px) {
  .inside02 .red-back::before {
    top: -15px;
    height: calc(100% + 30px);
    margin-top: 0;
    background-image: url(../img/red-back-sp.png);
  }
}
.inside02 .box {
  max-width: 760px;
  padding: 20px;
  text-align: center;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
}
.inside02 .box h3 {
  font-size: 28px;
  font-family: "source-han-sans-japanese", sans-serif;
}
@media (max-width: 767px) {
  .inside02 .box h3 {
    font-size: 20px;
  }
}
.inside02 .box .sns {
  display: flex;
  justify-content: center;
}
.inside02 .box .sns a {
  display: block;
  margin: 0 30px;
  color: #000;
  text-decoration: none;
  font-weight: bold;
}
@media (max-width: 767px) {
  .inside02 .box .sns a {
    margin: 0 15px;
  }
}
.inside02 .box .sns img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  box-shadow: none;
}
.inside02 .box .link {
  width: 100%;
  max-width: 240px;
  display: inline-block;
  padding: 15px 10px;
  border-radius: 30px;
  text-decoration: none;
  border: 2px solid transparent;
  font-weight: bold;
  transition: all 0.5s;
  background-color: #DE837B;
  color: #fff;
  border-color: #fff;
}
.inside02 .box .link:hover, .inside02 .box .link:focus {
  color: #DE837B;
  background-color: #fff;
  border-color: #DE837B;
}

.qualification01 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.qualification01 h2 {
  font-size: 36px;
  padding-bottom: 40px;
  position: relative;
}
@media (max-width: 767px) {
  .qualification01 h2 {
    font-size: 25px;
  }
}
.qualification01 h2:after {
  content: "";
  position: absolute;
  left: 0px;
  width: 100%;
  height: 30px;
  bottom: 0;
  background-image: url(../img/deco05.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .qualification01 h2:after {
    background-size: cover;
    background-position-x: right;
  }
}
@media (max-width: 767px) {
  .qualification01 h2 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}
.qualification01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.qualification01 .main-img img {
  width: 100%;
  height: auto;
}
.qualification01 table {
  font-size: 18px;
  width: 100%;
  border: 1.5px solid #b4c4d3;
}
.qualification01 table th,
.qualification01 table td {
  vertical-align: middle;
  text-align: center;
  font-weight: normal;
  border-right: 1.5px solid #b4c4d3;
  border-bottom: 1.5px solid #b4c4d3;
  padding: 10px 5px;
}
.qualification01 table td:last-child {
  border-right: none;
}
.qualification01 table .color {
  background-color: #ecf2f7;
}
.qualification01 table tr:last-child th,
.qualification01 table tr:last-child td {
  border-bottom: none;
}

.policy01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.policy01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.policy01 .main-img img {
  width: 100%;
  height: auto;
}

.song01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.song01 .main-img img {
  width: 100%;
  height: auto;
}
.song01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.song01 .main-img img {
  width: 100%;
  height: auto;
}
.song01 h3 {
  font-size: 36px;
}
@media (max-width: 767px) {
  .song01 h3 {
    font-size: 20px;
  }
}

.motto01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.motto01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.motto01 .main-img img {
  width: 100%;
  height: auto;
}
.motto01 .column03 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.motto01 h3 {
  line-height: 1.3;
  margin: 10px 0;
}
.motto01 h3 .kanji {
  font-size: 36px;
}
.motto01 h3 .furigana {
  font-size: 20px;
}

.principal01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.principal01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.principal01 .main-img {
  text-align: center;
}
.principal01 .main-img img {
  width: auto;
  height: 340px;
}
.principal01 .column03 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.principal01 h3 {
  line-height: 1.3;
  margin: 10px 0;
}
.principal01 h3 .kanji {
  font-size: 36px;
}
@media (max-width: 767px) {
  .principal01 h3 .kanji {
    font-size: 20px;
  }
}
.principal01 h3 .furigana {
  font-size: 20px;
}

.a-voice01 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.a-voice01 .column02 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.a-voice01 .column02 > div {
  width: 30%;
  min-width: 300px;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 50px;
  background-color: #ecf2f7;
}
@media (max-width: 767px) {
  .a-voice01 .column02 > div {
    width: 100%;
    max-width: 400px;
    margin-left: 0;
    margin-right: 0;
  }
}
.a-voice01 .column02 .img-wrapper img {
  width: 100%;
  height: auto;
}
.a-voice01 .column02 .text-wrapper {
  padding: 30px 20px;
}
.a-voice01 .column02 .text-wrapper .more-btn {
  display: block;
}
.a-voice01 .column02 .text-wrapper .more-btn img {
  width: 100%;
  height: auto;
  transform: scale(0.95);
  transition: transform 0.5s;
}
.a-voice01 .column02 .text-wrapper .more-btn:hover img, .a-voice01 .column02 .text-wrapper .more-btn:focus img {
  transform: scale(1);
}
.a-voice01 .belong {
  font-size: 12px;
  font-weight: bold;
  color: #4b7aa9;
}
.a-voice01 .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.a-voice01 .name {
  font-size: 20px;
}
.a-voice01 .entrance {
  font-size: 12px;
}

.a-club01 {
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url(../img/about-back.png);
  background-size: 100%;
}
.a-club01 .link {
  font-size: 20px;
  text-decoration: none;
  display: inline-block;
  color: #4b7aa9;
  border-radius: 5px;
  border: 2px solid #397cad;
  padding: 10px 30px;
  transition: all 0.5s;
}
.a-club01 .link:hover, .a-club01 .link:focus {
  background-color: #397cad;
  color: #fff;
  border-color: transparent;
}
@media (max-width: 1100px) {
  .a-club01 .club-list {
    width: calc(100% - 50px);
    margin-left: auto;
    margin-right: auto;
  }
}
.a-club01 .club-list li {
  padding: 0 10px;
}
.a-club01 .club-list a {
  display: block;
  text-decoration: none;
  color: #333;
}
.a-club01 .club-list img {
  width: 100%;
  height: auto;
}
.a-club01 .club-list .text-content {
  padding: 20px 10px;
  text-align: center;
  background-color: #edf2f7;
}
.a-club01 .club-list .slick-prev {
  width: 30px;
  height: 30px;
  background-image: url(../img/prev-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  left: -40px;
}
.a-club01 .club-list .slick-prev::before {
  display: none;
}
@media (max-width: 1100px) {
  .a-club01 .club-list .slick-prev {
    left: -30px;
  }
}
.a-club01 .club-list .slick-next {
  width: 30px;
  height: 30px;
  background-image: url(../img/next-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  right: -40px;
}
.a-club01 .club-list .slick-next::before {
  display: none;
}
@media (max-width: 1100px) {
  .a-club01 .club-list .slick-next {
    right: -30px;
  }
}

.s-club01 {
  background-image: url(../img/about-back.png);
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.s-club01 .inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.s-club01 .class-slick {
  width: calc(100% - 60px);
  max-width: 760px;
  margin: 0 auto 30px;
}
.s-club01 .class-slick .slick-prev {
  left: -30px;
  width: 20px;
  height: 20px;
  background-image: url(../img/prev-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: contain;
}
.s-club01 .class-slick .slick-prev::before {
  display: none;
}
.s-club01 .class-slick .slick-next {
  right: -30px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-image: url(../img/next-arrow.svg);
  background-repeat: no-repeat;
}
.s-club01 .class-slick .slick-next::before {
  display: none;
}
.s-club01 .class-slick img {
  width: 100%;
  height: auto;
}
.s-club01 h2 {
  font-size: 36px;
  padding-bottom: 40px;
  position: relative;
}
@media (max-width: 767px) {
  .s-club01 h2 {
    font-size: 25px;
  }
}
.s-club01 h2:after {
  content: "";
  position: absolute;
  left: 0px;
  width: 100%;
  height: 30px;
  bottom: 0;
  background-image: url(../img/deco05.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .s-club01 h2:after {
    background-size: cover;
    background-position-x: right;
  }
}
.s-club01 .main-img img {
  width: 100%;
  height: auto;
}
.s-club01 .link {
  width: 100%;
  max-width: 300px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #397cad;
  background-color: #fff;
  color: #4b7aa9;
  padding: 10px 10px;
  border-radius: 5px;
  transition: all 0.5s;
}
.s-club01 .link:hover, .s-club01 .link:focus {
  color: #fff;
  background-color: #397cad;
  border-color: transparent;
}
.s-club01 .indent {
  padding-left: 1em;
  text-indent: -1em;
}
.s-club01 .indent02 {
  padding-left: 3em;
  text-indent: -3em;
}
.s-club01 h3 {
  font-size: 20px;
}
.s-club01 h3.color {
  color: #397cad;
}
.s-club01 .column02 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.s-club01 .column02 li {
  width: 40%;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .s-club01 .column02 li {
    width: calc((100% - 20px) / 2);
    max-width: 500px;
    font-size: 12px;
  }
}
.s-club01 .column02 li figure {
  margin-bottom: 10px;
}
.s-club01 .column02 li img {
  width: 100%;
  height: auto;
}
.s-club01 .column02 li.center-pos {
  width: 80%;
}
@media (max-width: 767px) {
  .s-club01 .column02 li.center-pos {
    width: 100%;
    max-width: 500px;
  }
}
.s-club01 .text-wrap {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .s-club01 .text-wrap {
    width: 100%;
    max-width: 500px;
  }
}
.s-club01 .pager {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .s-club01 .pager {
    justify-content: space-between;
    font-size: 14px;
  }
}
.s-club01 .pager a {
  color: #397cad;
  text-decoration: none;
  position: relative;
  padding: 10px 20px;
  border: 2px solid #397cad;
  border-radius: 24px;
  transition: all 0.5s;
  font-weight: bold;
}
.s-club01 .pager a:hover, .s-club01 .pager a:focus {
  background-color: #397cad;
  border-color: transparent;
  color: #fff;
}
@media (max-width: 767px) {
  .s-club01 .pager a {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px;
    min-width: 210px;
  }
}
@media (max-width: 767px) {
  .s-club01 .pager a.prev {
    width: 60%;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .s-club01 .pager a.next {
    width: 60%;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .s-club01 .pager a.archive-btn {
    width: 60%;
    text-align: center;
    margin: 15px auto;
  }
}
.s-club01 .small-font {
  font-size: 10px;
}/*# sourceMappingURL=style.css.map */


/*Out_of_SCSS */
/**************************************************************************/
/*テキスト段組み*/
/*番号部*/
.dangumi-n {
  display: inline-block;
  vertical-align: top;
  width: 7%;
  color: #000000;
}
/*テキスト部*/
.dangumi-t {
  display: inline-block;
  width: 92%;
  color: #000000;
}

/****/
/*中学生の皆さんへの体験学習の背景の色*/
.junior01{
  background-color: #ECF2F7;
  background-image: none;
}

/****/
/*沿革ページのタイムライン段組*/
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 15px;
}
/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 5px 0;
    position: relative;
  }
  .timeline-date {
    width: 160px;
    float: left;
    vertical-align: top;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #e5e5d1 solid;
    padding-left: 30px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #6fc173;
    position: absolute;
    left: 156px;
    top: 5px;
    border-radius: 100%;
  }
}

/*ヘッダー右側*/
/*位置調整*/
.header .tel-wrapper a.tel{
  padding: 3px 10px 3px 40px!important;
}
/*
.sns{
  margin-top: -6px;
}
*/

/*ホバー*/
.sns_hov {
	border-radius: 50%;
	transition: all 0.6s ease 0s;
}
.sns_hov:hover {
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
/*下部テキスト*/
.sns_s{
  font-size:10px;
  color:#532525;
  text-align:center;
}
.sns_s_f{
  font-size:10px;
  color:#532525;
  text-align:left;
}
@media (max-width: 640px){
  .sns_s_f{
    font-size:10px;
    color:#532525;
    text-align:center;
  }
}
/**/





/*SP版フッター表示*/
@media (max-width: 640px){
  .footer .column02 .right{
    display: none;
  }
  .footer .copyright{
    margin-bottom: 100px;
  }
}


.header .sp-nav .inner{
  padding: 40px 30px 70px 30px;
}

/*SP版HBメニュー部*/
.header .sp-nav .inner{
  padding-top: 15px;;
} 
.inner .mb30{
  margin-bottom: 15px;
}
.inner .mb20{
  margin-bottom: 13px;
}
.header .sp-nav .main-list li a {
  padding: 9px 0;
}
.header .sp-nav .sub-list li a {
  padding: 8px 0;
}


/*学科紹介SP版位置*/
/*システム化学*/
.study02.system .system-title.sp-only img{
  margin-bottom: 38px;
}
/*電気*/
.study02.electricity .electricity-title.sp-only img{
  margin-bottom: 38px;
}
/*機械*/
.study02.machine .machine-title.sp-only img{
  margin-bottom: 38px;
}






/*新ナビバー2*/


/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが2階層以上ある場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover > ul {
  display: block;         /* ★マウスポインタが載っている項目の内部にあるリストを表示する */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
  margin: 0px;         /* ★サブメニュー外側の余白(ゼロ) */
  padding: 0px;        /* ★サブメニュー内側の余白(ゼロ) */
  display: none;       /* ★標準では非表示にする */
  position: absolute;  /* ★絶対配置にする */
 
  
}

/* -------------------------------- */
/* ▼サブメニュー(以降の)項目の装飾 */
/* -------------------------------- */
ul.ddmenu ul li {
  width: 210px;               /* サブメニュー1項目の横幅(135px) */
  border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
  background-color: #FFF;
  font-size: 14px;
  padding-left: 20px;
}
ul.ddmenu ul li a {
  line-height: 32px;   /* サブメニュー1項目の高さ(35px) */
  text-align: left;    /* 文字列の配置(左寄せ) */
  padding-left: 5px;   /* 文字列前方の余白(5px) */
  font-weight: normal; /* 太字にはしない */
}

/* ----------------------------------- */
/* ▼3階層目以降(孫メニュー以降)の装飾 */   /* ※下ではなく横(右)に表示します。 */
/* ----------------------------------- */
ul.ddmenu ul ul {
  margin: 0 0 0 -100px;         /* ★サブメニュー外側の余白(ゼロ) */
  padding: 0;        /* ★サブメニュー内側の余白(ゼロ) */
  display: none;       /* ★標準では非表示にする */
  position: absolute;  /* ★絶対配置にする */
  top: -1px;           /* 1pxだけ上方向にずらす(※上に1pxの枠線を引いている場合) */
  left: 100%;          /* ★基準位置からの距離を親ボックスの幅100％にする */
  border-left: 1px solid pink; /* 左側に引く枠線(ピンク色で1pxの実線) */
}

/*上段メニュー・・・向け。 重なり制御*/
.ddmenu-sub{
  z-index: 99;
  background-color: #fff;
  
}


/*スマホ用ハンバーガー*/
/* スマホ閲覧時のハンバーガーメニュー */

#hanburger {
  display: none; /* チェックボックスを非表示 */
}

.menu_button { /* ボタンのスタイル */
  width: 50px; /* 幅 */
  height: 50px; /* 高さ */
  position: fixed;
  top: 20px;
  right: 20px;
  background: #db7093; /* 背景色 */
  z-index: 10;
}

.menu_button::before { /* アイコンのスタイル */
  font-family: "Font Awesome 5 Free";
  content: "\f0c9"; /* アイコン「３本線」 */
  font-weight: 900;
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#hanburger:checked + .menu_button::before { /* アイコンのスタイル（チェック済み） */
  content: "\f00d"; /* アイコン「×印」 */
}

.global_menu { /* メニュー全体のスタイル */
  visibility: hidden; /* メニューを非表示 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 30px;
  color: #333; /* 文字色 */
  background: #ffc0cb; /* 背景色 */
  overflow-y:  scroll;
  text-align: center;
}

#hanburger:checked ~ .global_menu { /* メニュー全体のスタイル（チェック済） */
  visibility: visible; /* メニューを表示 */
}

.global_menu a { /* 各項目のスタイル */
  display: block;
  width: 100%;
}

.global_menu a:hover { /* 各項目のスタイル（ホバー時） */
  background: #ffb6c1;
}

.menu:not(:last-child) {
  margin-bottom: 20px;
}

.menu > a { /* 親項目のスタイル */
  font-weight: bold;
  padding: 10px 20px;
}

.child_menu > li > a {
  padding: 10px 30px;
  font-size: 0.8em;
}

/*ハンバーガーここまで*/











/**/
.study02 .indent-2{
  padding-left: 1rem; 
  text-indent: -1rem;
  margin-left: 1rem;
}

.study02 .column02 .text-wrapper p {
  line-height: 1.4;
  margin-bottom: 10px;
}


/*クラブ一覧*/
.grid-container {
  padding: 30px; 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 30px;
}
.grid-container .text-content{
  color:#000;
  text-align: center;
}
.grid-container a{
  text-decoration: none;
}
.grid-container img:hover {
  opacity: 0.6; filter: brightness(110%); 
}
.mmiru{
  max-width: 280px!important;
}

.club-cate{
  line-height: 20px;
}




/*------------20230621追加-----------*/
/*インタビューページのサムネ部分・2カラム表示*/
.int_main{
  display:flex;
}
.int_thm{
  width:50%; 
  height:100%; 
  padding: 30px;
  z-index: 1;
}

@media (max-width: 640px){
  .int_thm{
    padding: 30px 10px;
  }
}

/*ネームプレート表示・電気科*/
.np-denki{
  background-color: #F5F4E9;
}
.name_plate{
  position: relative;
  margin: 0 auto;
  margin-top: -30px;
  z-index: 10;
  padding: 20px;
  opacity: 1;
  width:70%;
}
@media (max-width: 640px){
  .name_plate{
    margin-top: -15px;
    padding: 10px;
    width: 90%;
  }
}
.ka_denki{
  font-weight: bold;
  color: #DBAD33;
}
@media (max-width: 640px){
  .ka_denki{
    font-size: 13px;
  }
}
.onamae{
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
@media (max-width: 640px){
  .onamae{
    font-size: 16px;
  }
}

.miru_b_denki{
  display: block;
  margin: 15px 28px;
  padding: 10px;
  text-align: center;
  color: #fff;
  background-color: #DBAD33;
  border-radius: 100vh;
  font-weight: bold;
  text-decoration:none;
}
@media (max-width: 640px){
  .miru_b_denki{
    margin: 15px 0;
    font-size: 10px;
  } 
}
.miru_b_denki:hover{
  color: #DBAD33;
  background: #fff;
}


/*ネームプレート表示・機械科*/
.np-kikai{
  background-color: #ECF2F7;
}
.ka_kikai{
  font-weight: bold;
  color: #397CAD;
}
@media (max-width: 640px){
  .ka_kikai{
    font-size: 13px;
  }
}
.miru_b_kikai{
  display: block;
  margin: 15px 28px;
  padding: 10px;
  text-align: center;
  color: #fff;
  background-color: #397CAD;
  border-radius: 100vh;
  font-weight: bold;
  text-decoration:none;
}
@media (max-width: 640px){
  .miru_b_kikai{
    margin: 15px 0;
    font-size: 10px;
  } 
}
.miru_b_kikai:hover{
  color: #397CAD;
  background: #fff;
}

/*ネームプレート表示・システム化学科*/
.np-syska{
  background-color: #ECF7F4;
}
.ka_syska{
  font-weight: bold;
  color: #579E98;
}
@media (max-width: 640px){
  .ka_syska{
    font-size: 13px;
  }
}
.miru_b_syska{
  display: block;
  margin: 15px 28px;
  padding: 10px;
  text-align: center;
  color: #fff;
  background-color: #579E98;
  border-radius: 100vh;
  font-weight: bold;
  text-decoration:none;
}
@media (max-width: 640px){
  .miru_b_syska{
    margin: 15px 0;
    font-size: 10px;
  } 
}
.miru_b_syska:hover{
  color: #579E98;
  background: #fff;
}

/*ネームプレート表示・卒業生*/
.np-sotsu{
  background-color: #F7ECED;
}
.ka_sotsu{
  font-weight: bold;
  color: #DD5F68;
}
@media (max-width: 640px){
  .ka_sotsu{
    font-size: 10px;
  }
}
.miru_b_sotsu{
  display: block;
  margin: 15px 28px;
  padding: 10px;
  text-align: center;
  color: #fff;
  background-color: #DD5F68;
  border-radius: 100vh;
  font-weight: bold;
  text-decoration:none;
}
@media (max-width: 640px){
  .miru_b_sotsu{
    margin: 15px 0;
    font-size: 10px;
  } 
}
.miru_b_sotsu:hover{
  color: #DD5F68;
  background: #fff;
}


/*卒業生インタビュー*/
.int_sotsu{
  margin-top: 40px;
}

.int_sec{
  margin-bottom: 80px;
}