@charset "UTF-8";
/*-----------------------------------------------------------------------------------------------------
共通設定(PC)
--------------------------------------------------------------------------------------------------------*/
html,
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 62.5%;
  font-style: normal;
  line-height: 1.5;
  background-color: #fff;
  scroll-behavior: smooth;
  color: #252525;
}
body .sp-item {
  display: none !important;
}
body .pc-item {
  display: block !important;
}
/*リンク文字の設定*/
a {
  text-decoration: underline;
}
/*ボタン*/
.btn {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
  position: relative;
  overflow: hidden;
}
@keyframes poyopoyo {
  0%,
  40%,
  60%,
  80% {
    transform: scale(1);
  }
  50%,
  70% {
    transform: scale(0.95);
  }
}
.btn::after {
  animation: 2s 0s shine-btn linear infinite;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
}
@keyframes shine-btn {
  0% {
    left: -100%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
.btn:hover {
  opacity: 0.7;
}
img {
  width: 100%;
}
/*ページ全体*/
.container {
  width: 750px;
  margin: 0 auto;
  padding: 0;
}
/* hidden項目 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/*-----------------------------------------------------------------------------------------------------
ヘッダーエリア(PC)
-----------------------------------------------------------------------------------------------------*/
.header-area {
  background: linear-gradient(to left, #00c6fb, #005bea);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-target {
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
}
/*-----------------------------------------------------------------------------------------------------
CTAエリア(PC)
-----------------------------------------------------------------------------------------------------*/
.cta-container {
  position: relative;
}
.cta-btn-line {
  position: absolute;
  width: 90%;
  top: 75%;
  left: 5%;
}
/*-----------------------------------------------------------------------------------------------------
悩みエリア(PC)
-----------------------------------------------------------------------------------------------------*/
.nayami-necessary {
  margin-top: -20px;
}
/*-----------------------------------------------------------------------------------------------------
タイムスケジュールエリア(PC)
-----------------------------------------------------------------------------------------------------*/
.time-schedule-area {
  padding: 60px 0;
}
.ttl-time-schedule {
  margin-bottom: 40px;
}
.time-schedule-item {
  margin-bottom: 60px;
}
/*-----------------------------------------------------------------------------------------------------
インフラエリア(PC)
-----------------------------------------------------------------------------------------------------*/
.infra-area {
  padding: 60px 0;
}
.ttl-infra {
  margin-bottom: 40px;
}
.infra-item {
  margin-bottom: 60px;
}
/*-----------------------------------------------------------------------------------------------------
お客様の声エリア(PC)
-----------------------------------------------------------------------------------------------------*/
.voice-area {
  padding: 80px 0 60px;
  background-color: #edf3f8;
}
.voice-item {
  margin-bottom: 60px;
}
/*-----------------------------------------------------------------------------------------------------
教室の情報エリア(PC)
-----------------------------------------------------------------------------------------------------*/
.info-area {
  padding: 80px 0 60px;
}
.info-name {
  text-align: center;
  font-size: 2.6rem;
  font-weight: bold;
  margin: 40px 100px 20px;
  padding: 10px 0;
  border: solid 1px;
}
.info-address {
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}
.info-access-container {
  margin: 0 auto 60px;
  padding: 0 80px;
}
.info-access-flex {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.info-access-icon img {
  width: 120px;
  height: auto;
}
.info-access-text {
  font-size: 2rem;
}
/*-----------------------------------------------------------------------------------------------------
フッター部分(PC)
-----------------------------------------------------------------------------------------------------*/
.footer-area {
  margin: 20px auto;
  text-align: center;
  padding: 30px;
  font-size: 1.6rem;
}
.footer-area a {
  color: #252525;
  text-decoration: none;
}
.footer-area a:hover {
  text-decoration: underline;
}
.footer-area .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-area .menu li {
  margin: 0;
  padding: 0 20px;
}
.footer-area .copyright {
  margin: 0;
  padding: 20px 0 0 0;
}
/*-----------------------------------------------------------------------------------------------------
スマホ用
-----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  body {
    min-width: inherit;
    height: 100%;
  }
  body .sp-item {
    display: block !important;
  }
  body .pc-item {
    display: none !important;
  }
  section {
    scroll-margin-top: 0px;
  }
  .container {
    width: 100%;
  }
  /*-----------------------------------------------------------------------------------------------------
ヘッダーエリア(SP)
-----------------------------------------------------------------------------------------------------*/
  .header-area {
    padding: 20px;
    height: 80px;
  }
  .header-target {
    font-size: 2rem;
    text-align: center;
  }
  /*-----------------------------------------------------------------------------------------------------
下部固定ボタンエリア(SP)
-----------------------------------------------------------------------------------------------------*/
  .fixed-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none; /* 初期状態で非表示 */
    z-index: 1000; /* 常に前面に表示 */
    transition: opacity 0.3s ease-in-out; /* スムーズな表示 */
  }
  .fixed-button.visible {
    display: flex; /* 表示状態 */
    opacity: 1;
  }
  /*-----------------------------------------------------------------------------------------------------
悩みエリア(SP)
-----------------------------------------------------------------------------------------------------*/
  .nayami-necessary {
    margin-top: -10px;
  }
  /*-----------------------------------------------------------------------------------------------------
タイムスケジュールエリア(SP)
-----------------------------------------------------------------------------------------------------*/
  .time-schedule-area {
    padding: 40px 0 0 0;
  }
  /*-----------------------------------------------------------------------------------------------------
インフラエリア(SP)
-----------------------------------------------------------------------------------------------------*/
  .infra-area {
    padding: 40px 0 0 0;
  }
  /*-----------------------------------------------------------------------------------------------------
お客様の声エリア(SP)
-----------------------------------------------------------------------------------------------------*/
  .voice-area {
    padding: 60px 0 20px;
  }
  /*-----------------------------------------------------------------------------------------------------
教室の情報エリア(PC)
-----------------------------------------------------------------------------------------------------*/
  .info-area {
    padding: 60px 0 40px;
  }
  .info-name {
    font-size: 2rem;
    margin: 40px 20px 20px;
  }
  .info-address {
    text-align: center;
    font-size: 2rem;
  }
  .info-access-container {
    margin: 0 auto 40px;
    padding: 0 20px;
  }
  .info-access-icon img {
    width: 80px;
  }
  .info-access-text {
    font-size: 1.8rem;
  }
  /*-----------------------------------------------------------------------------------------------------
フッター部分(SP)
-----------------------------------------------------------------------------------------------------*/
  .footer-area {
    margin-bottom: 20px;
  }
}