@charset "UTF-8";
/***************************/
/* --- カラー定義 --- */
/***************************/
/***************************/
/* --- ベースリセット --- */
/***************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  line-height: 1.7;
  color: #2C2C2C;
  font-size: 16px;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
}

/***************************/
/* --- ユーティリティクラス --- */
/***************************/
.red {
  color: #D93D23 !important;
}

.red2 {
  color: #e66b55 !important;
}

.red3 {
  color: #f0927f !important;
}

.red4 {
  color: #f8b7a9 !important;
}

.red5 {
  color: #fddbd4 !important;
}

.brown {
  color: #7C441E !important;
}

.brown2 {
  color: #97674b !important;
}

.brown3 {
  color: #b18c76 !important;
}

.brown4 {
  color: #cbb1a2 !important;
}

.brown5 {
  color: #e5d8d0 !important;
}

.orange {
  color: #FBAB11 !important;
}

.orange2 {
  color: #fdbd5f !important;
}

.orange3 {
  color: #fece8c !important;
}

.orange4 {
  color: #ffdfb4 !important;
}

.orange5 {
  color: #ffefda !important;
}

.yellow {
  color: #FADC50 !important;
}

.yellow2 {
  color: #fbe476 !important;
}

.gray {
  color: #2C2C2C !important;
}

.gray2 {
  color: #515151 !important;
}

.gray3 {
  color: #797979 !important;
}

.gray4 {
  color: #a4a4a4 !important;
}

.gray5 {
  color: #d0d0d0 !important;
}

.txt-white {
  color: #fff !important;
}

.txt-orange {
  color: #FBAB11 !important;
}

.txt-red {
  color: #D93D23 !important;
}

.bg-red {
  background-color: #D93D23 !important;
}

.bg-red5 {
  background-color: #fddbd4 !important;
}

.bg-brown5 {
  background-color: #e5d8d0 !important;
}

.bg-orange {
  background-color: #FBAB11 !important;
}

.bg-orange5 {
  background-color: #ffefda !important;
}

.bg-yellow {
  background-color: #FADC50 !important;
}

.bg-gray {
  background-color: #2C2C2C !important;
}

.bg-gray5 {
  background-color: #d0d0d0 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bd-orange {
  border: 3px solid #FBAB11 !important;
}

.en {
  font-family: "M PLUS Rounded 1c", "Roboto", Arial, sans-serif;
}

.rounded {
  font-family: "M PLUS Rounded 1c", sans-serif !important;
}

.fw-bold {
  font-weight: bold !important;
}

.font-weight-bold {
  font-weight: bold !important;
}

.w80-sm {
  width: 80%;
}
@media (max-width: 768px) {
  .w80-sm {
    width: 90%;
  }
}

.max40rem {
  max-width: 40rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .max40rem {
    margin: 1rem auto !important;
    padding: 0 1rem;
  }
}
@media (max-width: 480px) {
  .max40rem {
    padding: 0 0.5rem;
  }
}

.mt30 {
  margin-top: 30px;
}

.mt10 {
  margin-top: 10px;
}

.mb0 {
  margin-bottom: 0;
}

.ml-3 {
  margin-left: 1rem;
}

.indent {
  padding-left: 2rem;
}

/***************************/
/* --- ヘッダー --- */
/***************************/
.header {
  background: linear-gradient(135deg, #7C441E 0%, #97674b 100%);
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}
@media (max-width: 768px) {
  .header__content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
  }
}

.header__logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
}
.header__logo .red {
  color: #D93D23 !important;
}
.header__logo .brown {
  color: #FBAB11 !important;
}

.header__logo-img {
  height: 60px;
  width: auto;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.header__logo-img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
@media (max-width: 768px) {
  .header__logo-img {
    height: 50px;
  }
}
@media (max-width: 576px) {
  .header__logo-img {
    height: 45px;
  }
}

.header__nav {
  display: flex;
  gap: 2rem;
}
.header__nav a {
  color: #fff;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.header__nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .header__nav a {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .header__nav a:last-child {
    border-bottom: none;
  }
  .header__nav a.mobile-cta {
    display: block;
    margin-top: 1rem;
    border-radius: 25px;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #7C441E 0%, #97674b 100%);
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  .header__nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

.header__mobile-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.header__mobile-toggle span {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}
.header__mobile-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.header__mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}
.header__mobile-toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}
@media (max-width: 768px) {
  .header__mobile-toggle {
    display: flex;
  }
}

.header__cta .btn-header {
  background: linear-gradient(135deg, #FBAB11 0%, #fdbd5f 100%);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
.header__cta .btn-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(251, 171, 17, 0.4);
}
.header__cta .btn-header.mobile-cta {
  display: none;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}
@media (max-width: 768px) {
  .header__cta {
    display: none;
  }
}

/***************************/
/* --- ジャンボトロン --- */
/***************************/
.jumbotron,
.jumbotron-fluid {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 25%, #ffcc80 50%, #ffb74d 75%, #ffa726 100%);
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  min-height: 450px;
}
.jumbotron .container,
.jumbotron-fluid .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}
.jumbotron .row,
.jumbotron-fluid .row {
  align-items: center;
  min-height: 350px;
}
@media (max-width: 768px) {
  .jumbotron .row,
  .jumbotron-fluid .row {
    min-height: 300px;
  }
}
.jumbotron .col-lg-8,
.jumbotron-fluid .col-lg-8 {
  text-align: center;
  padding: 1rem;
}
@media (min-width: 992px) {
  .jumbotron .col-lg-8,
  .jumbotron-fluid .col-lg-8 {
    text-align: left;
    padding: 1.5rem;
  }
}
@media (max-width: 768px) {
  .jumbotron .col-lg-8,
  .jumbotron-fluid .col-lg-8 {
    text-align: center;
    margin-bottom: 2rem;
  }
}
.jumbotron .hero-images,
.jumbotron-fluid .hero-images {
  position: relative;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1rem;
}
@media (min-width: 1200px) {
  .jumbotron .hero-images,
  .jumbotron-fluid .hero-images {
    height: 350px;
  }
}
@media (max-width: 991px) {
  .jumbotron .hero-images,
  .jumbotron-fluid .hero-images {
    height: 280px;
  }
}
@media (max-width: 768px) {
  .jumbotron .hero-images,
  .jumbotron-fluid .hero-images {
    height: 240px;
    transform: translateY(80px);
  }
}
@media (max-width: 576px) {
  .jumbotron .hero-images,
  .jumbotron-fluid .hero-images {
    height: 220px;
    transform: translateY(30px);
  }
}
@media (max-width: 400px) {
  .jumbotron .hero-images,
  .jumbotron-fluid .hero-images {
    height: 210px;
    transform: translateY(30px);
  }
}
.jumbotron h1,
.jumbotron-fluid h1 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 3.5rem;
  margin: 1rem 0 0.5rem 0;
  line-height: 1.1;
}
.jumbotron h1 .red,
.jumbotron-fluid h1 .red {
  color: #D93D23 !important;
}
.jumbotron h1 .brown,
.jumbotron-fluid h1 .brown {
  color: #7C441E !important;
}
@media (max-width: 768px) {
  .jumbotron h1,
  .jumbotron-fluid h1 {
    font-size: 2.5rem;
    margin: 1.5rem 0;
  }
}
@media (max-width: 480px) {
  .jumbotron h1,
  .jumbotron-fluid h1 {
    font-size: 2rem;
  }
}
.jumbotron .h2,
.jumbotron-fluid .h2 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem;
  color: #2C2C2C;
  margin-bottom: 1rem;
  line-height: 1.3;
  font-weight: 500;
}
@media (max-width: 768px) {
  .jumbotron .h2,
  .jumbotron-fluid .h2 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 768px) {
  .jumbotron,
  .jumbotron-fluid {
    padding: 3rem 0;
  }
}

.above-button {
  font-family: "M PLUS Rounded 1c", sans-serif;
  margin: 0.5rem 0 0.8rem 0;
  font-weight: bold;
}
.above-button .fs-2 {
  font-size: 2rem !important;
}
@media (max-width: 768px) {
  .above-button {
    margin: 1.5rem 0;
  }
}

.kvimg_left,
.kvimg_right {
  position: relative;
  width: 220px;
  height: auto;
  z-index: 1;
  margin: 0 15px;
  animation: float 3s ease-in-out infinite;
}
@media (min-width: 1200px) {
  .kvimg_left,
  .kvimg_right {
    width: 250px;
    margin: 0 20px;
  }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .kvimg_left,
  .kvimg_right {
    width: 240px;
    margin: 0 10px;
  }
}
@media (max-width: 991px) {
  .kvimg_left,
  .kvimg_right {
    width: 230px;
    margin: 0 8px;
  }
}
@media (max-width: 768px) {
  .kvimg_left,
  .kvimg_right {
    width: 220px;
    margin: 0 5px;
  }
}
@media (max-width: 576px) {
  .kvimg_left,
  .kvimg_right {
    width: 210px;
    margin: 0 3px;
  }
}

.kvimg_left {
  animation-delay: 0s;
}

.kvimg_right {
  animation-delay: 1.5s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
/***************************/
/* --- ボタンスタイル --- */
/***************************/
.kv-btn {
  display: inline-block;
  background: linear-gradient(135deg, #D93D23 0%, #e66b55 100%);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(217, 61, 35, 0.3);
  transform: translateY(0);
  margin: 0;
}
.kv-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.kv-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(217, 61, 35, 0.4);
  color: #fff;
}
.kv-btn:hover::before {
  left: 100%;
}
.kv-btn span {
  position: absolute;
  display: block;
}
.kv-btn span:nth-child(2) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  animation: btn-anim1 1s linear infinite;
}
.kv-btn span:nth-child(3) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #fff);
  animation: btn-anim2 1s linear infinite;
  animation-delay: 0.25s;
}
.kv-btn span:nth-child(4) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #fff);
  animation: btn-anim3 1s linear infinite;
  animation-delay: 0.5s;
}
@media (max-width: 480px) {
  .kv-btn {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
.button-brown-border {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 2px solid #7C441E;
  color: #7C441E;
  border-radius: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  text-decoration: none;
}
.button-brown-border:hover {
  background-color: #7C441E;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(124, 68, 30, 0.3);
}

.button-gradient {
  display: inline-block;
  background: linear-gradient(135deg, #FBAB11 0%, #fdbd5f 100%);
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.button-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(251, 171, 17, 0.4);
  color: #fff;
}

.btn-border-radius-brown {
  border: 2px solid #7C441E;
  border-radius: 15px;
  padding: 2rem;
  background-color: #fff;
  transition: all 0.3s ease;
}
.btn-border-radius-brown:hover {
  box-shadow: 0 5px 20px rgba(124, 68, 30, 0.2);
  transform: translateY(-2px);
}
@media (max-width: 480px) {
  .btn-border-radius-brown {
    padding: 1rem;
  }
}

/***************************/
/* --- セクション共通 --- */
/***************************/
section {
  padding: 5rem 0;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}
section.fade-in {
  opacity: 1;
  transform: translateY(0);
}
section#about {
  background-color: #fff;
}
@media (max-width: 768px) {
  section#about {
    padding: 3rem 0 !important;
  }
}
section#feature {
  background: linear-gradient(180deg, #fff 0%, #e5d8d0 100%);
}
@media (max-width: 768px) {
  section#feature {
    padding: 3rem 0 !important;
  }
}
section#reason {
  background-color: #ffefda;
}
section#cta-trial {
  background: linear-gradient(135deg, #D93D23 0%, #e66b55 100%);
}
section#flow {
  background-color: #fff;
}
section#feedback {
  background-color: #e5d8d0;
}
section#teacher {
  background: linear-gradient(180deg, #fff 0%, #fddbd4 100%);
}
section#faq {
  background-color: #d0d0d0;
}
section#status {
  background-color: #fff;
}
section#price {
  background: linear-gradient(180deg, #ffefda 0%, #fff 100%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
}

/***************************/
/* --- セクションタイトル --- */
/***************************/
.swipe-animation {
  overflow: hidden;
  position: relative;
}
.swipe-animation.large {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .swipe-animation.large {
    font-size: 2rem;
  }
}
@media (max-width: 480px) {
  .swipe-animation.large {
    font-size: 1.8rem;
  }
}
.swipe-animation.small {
  font-size: 1.2rem;
  opacity: 0.8;
}
.swipe-animation .letter {
  display: inline-block;
  animation: slideIn 0.8s ease-out forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/***************************/
/* --- タイピングアニメーション --- */
/***************************/
.typeTextWrapper {
  margin: 3rem 0;
}
@media (max-width: 768px) {
  .typeTextWrapper {
    margin: 2rem 0 !important;
  }
}
@media (max-width: 480px) {
  .typeTextWrapper {
    margin: 1rem 0 !important;
  }
}

.typeText {
  font-weight: bold;
}
.typeText .cursor {
  animation: blink 1s infinite;
}
@media (max-width: 480px) {
  .typeText {
    font-size: 1rem;
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
.blinking {
  animation: blink 1s infinite;
  color: #FBAB11;
  font-weight: bold;
}

/***************************/
/* --- テーブル --- */
/***************************/
.table-wrapper {
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .table-wrapper {
    font-size: 0.9rem;
  }
}

.table-pricing,
.table-orange-bg {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  min-width: 300px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.table-pricing th,
.table-orange-bg th {
  background: linear-gradient(135deg, #7C441E 0%, #97674b 100%);
  color: #fff;
  padding: 1rem;
  font-weight: bold;
  text-align: center;
}
.table-pricing td,
.table-orange-bg td {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  background-color: #fafafa;
}
.table-pricing td:hover,
.table-orange-bg td:hover {
  background-color: #e5d8d0;
  transition: background-color 0.3s ease;
}
.table-pricing td.bg-red5,
.table-orange-bg td.bg-red5 {
  background-color: #fddbd4;
}
.table-pricing td.bg-gray5,
.table-orange-bg td.bg-gray5 {
  background-color: #d0d0d0;
}
.table-pricing td hr,
.table-orange-bg td hr {
  border-color: #b18c76;
  margin: 0.5rem 0;
}
.table-pricing ul,
.table-orange-bg ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.table-pricing ul li,
.table-orange-bg ul li {
  margin: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
}
.table-pricing ul li i,
.table-orange-bg ul li i {
  position: absolute;
  left: 0;
  top: 0.2rem;
}
@media (max-width: 768px) {
  .table-pricing,
  .table-orange-bg {
    font-size: 0.9rem;
  }
  .table-pricing th, .table-pricing td,
  .table-orange-bg th,
  .table-orange-bg td {
    padding: 0.5rem;
  }
}

.comparison {
  margin: 3rem 0;
}
.comparison th.bg-red {
  background: linear-gradient(135deg, #D93D23 0%, #e66b55 100%);
}
.comparison th.bg-gray {
  background: linear-gradient(135deg, #2C2C2C 0%, #515151 100%);
}
@media (max-width: 768px) {
  .comparison {
    margin: 2rem 0 1rem 0;
  }
}
@media (max-width: 480px) {
  .comparison {
    margin: 1rem 0;
  }
}

.table-feedback-status {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}
.table-feedback-status th, .table-feedback-status td {
  padding: 0.8rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.table-feedback-status th {
  background-color: #7C441E;
  color: #fff;
  font-weight: bold;
}
.table-feedback-status tr:nth-child(even) {
  background-color: #e5d8d0;
}
.table-feedback-status ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 768px) {
  .table-feedback-status {
    font-size: 0.9rem;
  }
  .table-feedback-status th, .table-feedback-status td {
    padding: 0.5rem;
  }
}

/***************************/
/* --- 特徴セクション --- */
/***************************/
.feature .frequent-issues {
  background: linear-gradient(135deg, #fbe476 0%, #ffefda 100%);
  border-radius: 15px;
  border-left: 5px solid #FBAB11;
}
.feature .frequent-issues li {
  margin: 1rem 0;
}
.feature .frequent-issues li i {
  margin-right: 0.5rem;
}
@media (max-width: 768px) {
  .feature .frequent-issues {
    margin: 2rem auto !important;
    padding: 1.5rem !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .feature .frequent-issues {
    margin: 1rem auto !important;
    padding: 1rem !important;
  }
}

.feature__one,
.feature__two,
.feature__three,
.feature__four {
  margin: 5rem 0;
  align-items: center;
}
.feature__one img,
.feature__two img,
.feature__three img,
.feature__four img {
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .feature__one,
  .feature__two,
  .feature__three,
  .feature__four {
    margin: 2rem 0 !important;
  }
  .feature__one .col-md-6,
  .feature__two .col-md-6,
  .feature__three .col-md-6,
  .feature__four .col-md-6 {
    margin-bottom: 2rem;
  }
}

/***************************/
/* --- 理由セクション --- */
/***************************/
.balloon {
  background: linear-gradient(135deg, #FADC50 0%, #fbe476 100%);
  padding: 1rem 2rem;
  border-radius: 15px;
  position: relative;
  text-align: center;
  margin-bottom: 2rem;
}
.balloon.bg-orange {
  background: linear-gradient(135deg, #FBAB11 0%, #fdbd5f 100%);
  color: #fff;
}
.balloon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: #fbe476;
}
.balloon.bg-orange::after {
  border-top-color: #fdbd5f;
}
.balloon h4 {
  margin: 0;
  font-weight: bold;
}

.step {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  margin: 1rem 0;
}
.step.bg-yellow {
  background: linear-gradient(135deg, #FADC50 0%, #fbe476 100%);
  color: #2C2C2C;
}
.step.bg-orange {
  background: linear-gradient(135deg, #FBAB11 0%, #fdbd5f 100%);
}

.Text {
  position: relative;
}
.Text .Text-Span {
  background: linear-gradient(135deg, #7C441E 0%, #FBAB11 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}
.Text img {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
/***************************/
/* --- CTA セクション --- */
/***************************/
.cta {
  text-align: center;
  color: #fff;
  position: relative;
}
.cta .inner-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cta-balloon {
  background: linear-gradient(135deg, #FBAB11 0%, #fdbd5f 100%);
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 1rem;
  font-weight: bold;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.cta-title {
  font-size: 3rem;
  font-weight: bold;
  margin: 2rem 0;
}
.cta-title .dot {
  display: inline-block;
  animation: bounce 1s infinite;
}
.cta-title .dot:nth-child(2) {
  animation-delay: 0.1s;
}
.cta-title .dot:nth-child(3) {
  animation-delay: 0.2s;
}
@media (max-width: 768px) {
  .cta-title {
    font-size: 2rem;
  }
}

/***************************/
/* --- FAQ セクション --- */
/***************************/
.qa__block {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 0 auto;
}

.qa__item {
  margin: 1rem 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.qa__head {
  width: 100%;
  background: linear-gradient(135deg, #7C441E 0%, #97674b 100%);
  color: #fff;
  padding: 1.2rem;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.qa__head::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}
.qa__head.active::after {
  transform: translateY(-50%) rotate(45deg);
}
.qa__head:hover {
  background: linear-gradient(135deg, #97674b 0%, #b18c76 100%);
}

.qa__body {
  background-color: #fff;
  padding: 1.5rem;
  display: none;
  line-height: 1.7;
}
.qa__body.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/***************************/
/* --- 料金セクション --- */
/***************************/
.price .container {
  max-width: 1200px;
}
@media (max-width: 768px) {
  .price .col-12 {
    margin-bottom: 2rem;
  }
}

.lumpsum,
.subscription,
.ticket {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.lumpsum:hover,
.subscription:hover,
.ticket:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.subscription .text-center.mt-5,
.ticket .text-center.mt-5 {
  margin-top: auto !important;
  padding-top: 2rem;
}

.privilege h5 {
  color: #7C441E;
  font-weight: bold;
  margin: 2rem 0 1rem 0;
  border-bottom: 2px solid #FBAB11;
  display: inline-block;
  padding-bottom: 0.5rem;
}
.privilege h6 {
  color: #D93D23;
  font-weight: bold;
  margin: 1.5rem 0 0.5rem 0;
}
.privilege h6 i {
  margin-right: 0.5rem;
  color: #FBAB11;
}
.privilege .body {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.privilege ul.small {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}
.privilege ul.small li {
  padding: 0.3rem 0;
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}
.privilege ul.small li i.fa-check {
  margin-right: 0.5rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.privilege ul.small li.text-muted {
  font-style: italic;
  color: #6c757d !important;
  margin-left: 1.2rem;
  margin-top: -0.2rem;
  margin-bottom: 0.3rem;
}

.Text-Span {
  background: linear-gradient(135deg, #7C441E 0%, #FBAB11 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}

/***************************/
/* --- 講師セクション --- */
/***************************/
.book {
  max-width: 900px;
  margin: 0 auto;
}
.book .bg-orange {
  border-radius: 15px;
}
.book .bg-white {
  border-radius: 10px;
}

/***************************/
/* --- フッター --- */
/***************************/
.footer {
  background: linear-gradient(135deg, #2C2C2C 0%, #515151 100%);
  color: #fff;
  padding: 3rem 0 1rem 0;
}

.footer__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer__section {
  margin-bottom: 2rem;
}
.footer__section h4 {
  color: #FBAB11;
  margin-bottom: 1rem;
  font-weight: bold;
}
.footer__section ul {
  list-style: none;
  padding: 0;
}
.footer__section ul li {
  margin: 0.5rem 0;
}
.footer__section ul li a {
  color: #fff;
  transition: color 0.3s ease;
}
.footer__section ul li a:hover {
  color: #FBAB11;
}

.footer__bottom {
  border-top: 1px solid #797979;
  padding-top: 1rem;
  text-align: center;
  margin-top: 2rem;
  color: #a4a4a4;
}

/***************************/
/* --- プラン色設定 --- */
/***************************/
.bg-plan-light {
  background: transparent !important;
  border: 2px solid #7C441E !important;
  color: #7C441E !important;
}

.bg-plan-unlimited {
  background: transparent !important;
  border: 2px solid #7C441E !important;
  color: #7C441E !important;
}

.bg-plan-ticket {
  background: linear-gradient(135deg, #7C441E 0%, #97674b 100%) !important;
}

/***************************/
/* --- モーダル --- */
/***************************/
.sample-answer-modal .modal-content {
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.sample-answer-modal .modal-header {
  background: linear-gradient(135deg, #7C441E 0%, #97674b 100%);
  color: #fff;
  border-radius: 15px 15px 0 0;
}
.sample-answer-modal .modal-header .modal-title {
  font-weight: bold;
}
.sample-answer-modal .modal-header .btn-close {
  filter: invert(1);
}
.sample-answer-modal .modal-body {
  padding: 2rem;
}
.sample-answer-modal .modal-body h5 {
  color: #7C441E;
  font-weight: bold;
  margin: 1.5rem 0 0.5rem 0;
}
.sample-answer-modal .modal-body h5:first-child {
  margin-top: 0;
}
.sample-answer-modal .modal-body h6 {
  color: #2C2C2C;
  margin: 1rem 0 0.5rem 0;
}
.sample-answer-modal .modal-body ul.bg-brown5 {
  border-radius: 10px;
  border-left: 4px solid #7C441E;
}
.sample-answer-modal .modal-body ul.bg-brown5 li {
  margin: 0.5rem 0;
  line-height: 1.6;
}/*# sourceMappingURL=custom.css.map */