@charset "UTF-8";

html {
  font-size: 100%;
}

body {
  background-color: #fff;
  color: #333333;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 700;
}

a {
  color: #333333;
  text-decoration: none;
  transition: all 0.3s ease; /* ホバー時の変化をなめらかにする */
}

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

li {
  list-style: none;
}

.base-wrapper {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 5vw;
}

.exception_font {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.fs_12 {font-size: 0.75rem;}
.fs_14 {font-size: 0.875rem;}
.fs_18 {font-size: 1.125rem;}
.fs_24 {font-size: 1.5rem;}
.fs_28 {font-size: 1.75rem;}
.fs_32 {font-size: 2rem;}

.fw_300 {font-weight: 300;}
.fw_400 {font-weight: 400;}
.fw_500 {font-weight: 500;}
.fw_600 {font-weight: 600;} 
.fw_700 {font-weight: 700;}
.fw_800 {font-weight: 800;}
.fw_900 {font-weight: 900;}

.white-text {color: #fff;}

.section-title {
  text-align: center;
  padding-bottom: 5rem;
}

.section-title-j {
  letter-spacing: 0.2rem;  
}

.section-title-j::after {
  content: "";
  display: block;      /* 下に配置し、サイズを有効にするために必須 */
  width: 1.8rem;
  height: 0.2rem;
  background-color: #333333;
  margin: 1rem auto 0; /* 中央に寄せつつ、テキストとの間隔を作る */
  border-radius: 0.1rem;
}
/*---------------------------------------
header
---------------------------------------*/
.header {
  position: absolute; /* フローから浮かせて重ねる */
  top: 0;
  left: 0;
  width: 100%;       /* absoluteにすると幅が縮むため、全幅を指定 */
  z-index: 10;        /* main要素より手前に表示させる */
}

#header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;    /* 上下のパディングのみ指定し、 */
  padding-bottom: 1.5rem; /* 左右の5vw（base-wrapper）を活かす */
  border-bottom: 1px solid #fff;
}

#header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: inherit;    /* 親要素の.white-textを引き継ぐ */
  cursor: pointer;   /* リセットCSSで設定済みかも？*/
}

#header-logo::before {
  content: "";
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(#fff 50%, #333333);
}

#header-logo:hover {
  transform: translateY(-0.3rem);
}

.nav-menu ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.nav-menu a {
  display: inline-block; /* transform（動き）を有効にするために必須です */
  color: inherit;    /* aタグ自身に継承を明示する */
}

.nav-menu a:hover {
  transform: translateY(-0.3rem);
}

.hamburger {
  display: none;
}

/*---------------------------------------
main-visual
---------------------------------------*/
#main-visual {
  position: relative;    /* 親要素を基準位置にする */
}

#mv-bg {
  width: 100%;
  height: 100vh;         /* 画面の高さ100%に指定 */
  object-fit: cover;     /* 比率を保ったままエリアを埋める（はみ出し分はトリミング） */
  object-position: bottom; /* 画像の下端を基準に配置する（上側をカットする） */
}

#mv-msg {
  position: absolute;
  top: 0;
  left: 50%;             /* base-wrapperを中央に寄せるための設定 */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;       /* absoluteにすると幅が縮むため、全幅を指定 */
  height: 100%;
  line-height: 3rem;
}

#mv-msg-j {
  letter-spacing: 0.4rem;
}

#mv-msg-e {
  letter-spacing: 0.1rem;
}

/*---------------------------------------
news
---------------------------------------*/
#news {
  background-color: #333333;
  height: auto;
}

#news-line {
  display: flex;
  align-items: center;
  gap: 2rem;
}

#news-title {
  background-color: #fff;
  padding: 0.5rem 3rem;
}

/*---------------------------------------
about
---------------------------------------*/
#about {
  padding: 7.5rem 0 10rem 0;
}

#about-container {
  width: 100%;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 0 auto;
  padding: 0 1rem;
}

#about-container h3 {
  letter-spacing: 0.2rem;
}

#about-container p {
  letter-spacing: 0.1rem;
}

/*---------------------------------------
slider
---------------------------------------*/
.swiper {
  width: 100%;
  height: auto;
}

.swiper-wrapper {
  transition-timing-function: ease !important;
}

.swiper-slide img {
  width: 100%;
  height: 60vh; /* 画面の高さの70%に指定 */
  object-fit: cover; /* 画像の比率を保ったまま、指定したサイズに合わせて切り抜く */
}

/*---------------------------------------
feature
---------------------------------------*/
#feature {
  background-color: #eeeeee;
  padding: 7.5rem 0 10rem 0;
}

#feature-container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.flex-1st,
.flex-2nd {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 2.5rem 3.5rem;
}

.flex-1st {
  flex-direction: row-reverse;
}

.media-object-img,
.media-object-text {
  width: 45%;
  height: auto;
}

.media-object-text h3 {
  line-height: 4rem;
}

.media-object-text p {
  line-height: 2rem;
}

/*---------------------------------------
price
---------------------------------------*/
#price {
  padding: 7.5rem 0 10rem 0;
}

.price-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 5rem;
}

.price-list-card {
  width: 33%;
}

.price-list-text {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

#option-menu {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5rem;
  gap: 3rem;
}

#option-menu-list {
  width: 100%;
  padding: 0 3.5rem;
}

#option-menu-list > :first-child {
  border-top: 1px solid #333333;
}

.option-course {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid #333333;
}

.option-name {
  width: 80%; /* または flex: 1; で、名前側の幅をしっかり確保する */
  padding-right: 2rem; /* 線とテキストの間の適切な余白 */
  margin-right: 2rem;  /* 線と価格の間の適切な余白 */
  border-right: 1px solid #333333;
}

.option-name {
  width: 100%;
  padding-right: 2rem; /* 線とテキストの間の適切な余白 */
  margin-right: 2rem;  /* 線と価格の間の適切な余白 */
  flex: 1;             /* 幅を自動調整させ、価格を右端に固定します */
  padding-right: 2rem;
  margin-right: 2rem;
  border-right: none;
}

.option-name h4 {
  padding-bottom: 1rem;
}

/*---------------------------------------
FAQ
---------------------------------------*/
#faq {
  background-color: #eeeeee;
  padding: 7.5rem 0 10rem 0;
}

#faq-container {
  width: 100%;       /* 幅を100%にしつつ */
  max-width: 60rem;  /* 最大幅を制限する */
  margin: 0 auto;
  border-top: 1px solid #333333;
}

.faq-item {
  border-bottom: 1px solid #333333;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1rem;
  cursor: pointer;
}

.faq-question i {
  padding: 0 1rem;
}

details[open] .fa-solid {
  transform: rotate(180deg);
}

.fa-solid {
  transition: transform 0.3s ease-in-out;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
}

details[open] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer p {
  min-height: 0;
  padding: 2rem;
}

/*---------------------------------------
contact
---------------------------------------*/
#contact {
  position: relative;
}

#contact-bg {
  width: 100%;
  height: 83vh;
  object-fit: cover;
  object-position: center;
}

#contact::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 1;
}

#contact-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem;
  z-index: 2;
}

#contact-msg .section-title {
  padding-bottom: 2rem;
}

#contact-msg .section-title-j::after {
  background-color: #fff;
}

#contact-btn {
  width: 100%;
  padding: 1rem;
  border-radius: 10rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

#contact-btn:hover {
  color: #fff;
  background-color: #333333;
}

.fa-solid,
.spacer {
  width: 1.5rem;
  height: 1.5rem;
}

/*---------------------------------------
footer
---------------------------------------*/
footer {
  background-color: #333333;
}

#footer-wrapper {
  max-width: 35rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;;
  padding: 3rem 0;
}


.footer-sns-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;         /* アイコン同士の間隔 */
  list-style: none;
  padding: 0;
}

.footer-sns-list svg {
  width: 24px;       /* 全体のサイズを統一 */
  height: 24px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-sns-list a:hover svg {
  opacity: 0.7;
  transform: scale(1.1); /* ホバー時に少し大きくする演出 */
}

#footer-logo-ball {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(#fff 50%, #333333);
}

#footer-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

#footer-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
}

#footer-nav ul li a {
  color: #fff;
  display: inline-block;
}

#footer-nav ul li a:hover {
  transform: translateY(-0.3rem);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 0;
}

#privacy-policy {
  color: inherit;
}

#privacy-policy:hover {
  transform: translateX(0.3rem);
}

/* ===================================================
   【メディアクエリ】スマホ用（画面幅767px以下）
=================================================== */
@media screen and (max-width: 767px) {
  
  /* 1. スマホではハンバーガーボタンを表示する */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    z-index: 110; /* メニュー画面を覆ってもボタンを一番手前に [cite: 16] */
  }
  
  .hamburger__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease; /* アニメーションをなめらかに [cite: 18] */
}

  /* 2. メニューを「横並び」から「全画面を覆う隠しメニュー」に作り変える */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 8rem 0 5rem; /* 上下のパディングを広く取ることで、メニュー項目を中央寄せにする */
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 90;
  
    /* 【重要】隠すための設定  */
    opacity: 0;           /* 透明にする（アニメーション用） */
    visibility: hidden;   /* 存在を消す（誤クリック防止用） */
    transform: translateY(-20px); /* 20pxだけ上に浮かせておく */
    transition: all 0.4s ease;
  }

  /* 3. メニューの中身を「縦並び・中央寄せ」に上書き */
  .nav-menu__list {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 2rem;
  }


  /* 🔄 JSで「is-active」がついた時の表示 [cite: 27, 28] */
  .nav-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* 定位置にスッと降りてくる */
  }


/* 🔄 JSで「is-active」がついた時のボタン変形（×にする） [cite: 18, 21] */
  .hamburger.is-active .hamburger__line:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .hamburger.is-active .hamburger__line:nth-child(2) { opacity: 0; }
  .hamburger.is-active .hamburger__line:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

  /*---------------------------------------
  共通
  ---------------------------------------*/
  #about,
  #feature,
  #price,
  #faq {
    padding: 5rem 0;
  }

  /*---------------------------------------
  news
  ---------------------------------------*/
  #news-line {
    font-size: 0.75rem;
    padding: 0;
  }

  #news-title {
    padding: 0.5rem 1.25rem ;
  }

  /*---------------------------------------
  slider
  ---------------------------------------*/
  .swiper-slide img {
    height: 35vh; /* 画面の高さの35%に指定 */
  }

  /*---------------------------------------
  feature
  ---------------------------------------*/
  .flex-1st,
  .flex-2nd {
  display: block;
  padding: 2.5rem 1.25rem;
  } 

  .media-object-img,
  .media-object-text {
    width: 100%;
    height: auto;
  }

  .media-object-text h3 {
    font-size: 1.25rem;
  }

  /*---------------------------------------
  price
  ---------------------------------------*/
  .price-list {
    display: block;
  }

  .price-list-card {
    width: 100%;
    padding: 2rem 0;
  }

  #option-menu-list {
    padding: 0 1.25rem;
  }

  .option-course {
    flex-direction: column;
    align-items: flex-start; /* スマホで中央に寄るのを防ぎ、左揃えにします */
    gap: 1rem;
    padding: 1rem;
    }

  .option-name h4 {
    padding-bottom: 1rem;
  }

  /*---------------------------------------
  faq
  ---------------------------------------*/
  .faq-question {
    padding: 2rem 0;
  }

  .faq-question i {
    padding: 0 1rem;
  }

  /*---------------------------------------
  footer
  ---------------------------------------*/
  #footer-nav ul {
    flex-wrap: wrap;
  }

  #footer-nav ul li {
    width: 45%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 2rem;
  }

}