@charset "UTF-8";

:root {
  --header-height: 135px; /* ヘッダーの高さ */
  --nav-height: 30px;    /* ナビゲーションの高さ */
}

/* ここにスタイルを記述していきます */
body {
  font-family: sans-serif; /* 基本フォントの設定 */
  margin: 0; /* bodyのデフォルトマージンを削除 */
  line-height: 1.6;
  color: #333;
  background-image: url('../img/background.png'), url('../img/background.png'); /* 左右2つの背景画像 */
  background-repeat: repeat-y, repeat-y; /* それぞれ垂直方向に繰り返す */
  background-position: left top, right top; /* 左端と右端に配置 */
  display: flex; /* Flexboxコンテナに */
  flex-direction: column; /* アイテムを縦方向に並べる */
  min-height: 100vh; /* 少なくともビューポートの高さにする */
}

header {
  text-align: center; /* ヘッダー全体を中央寄せ */
  padding: 0;
  background-color: #f8f8f8; /* 背景色 */
  border-bottom: 1px solid #eee;
  position: fixed; /* ヘッダーを固定 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 最前面に表示 */
}

.site-title {
  margin: 0;
  padding: 0;
}

.site-title a {
  text-decoration: none; /* リンクの下線を削除 */
  color: inherit; /* 親要素の色を継承 */
}

.site-title img {
  height: auto; /* 比率を維持 */
  display: block; /* img要素の下の余白を削除 */
  margin: 0 auto; /* 中央寄せ */
}

.site-description {
  margin-top: 10px;
  font-size: 1.1em;
  color: #666;
}

/* ナビゲーション */
#main-nav {
  background-color: #333;
  padding: 0;
  position: fixed; /* ナビゲーションを固定 */
  top: var(--header-height); /* ヘッダーの高さの下に配置 */
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999; /* ヘッダーより少し後ろ */
}

#main-nav ul {
  list-style: none;
  margin: 0;
  display: flex; /* 横並びにする */ 
  padding: 5px 100px 5px 0; /* 右側に100pxのパディングを追加 */
  justify-content: flex-end; /* 右寄せ */
  flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
  align-items: center;
}

#main-nav ul li {
  margin: 0 15px;
  padding-top: 10px; /* 上下のパディングをliに移動 */
  padding-bottom: 10px; /* 上下のパディングをliに移動 */
}

#main-nav ul li a, #main-nav ul li button {
  display: flex; /* Flexboxコンテナに */
  align-items: center; /* 垂直方向中央寄せ */
  justify-content: center; /* 水平方向中央寄せ */
  color: white;
  text-decoration: none;
  padding: 0 15px; /* 左右のパディングは維持 */
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  font-size: 1rem; /* 文字サイズを統一 */
}

#main-nav ul li button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none; /* Safari/Chrome のデフォルトスタイルをリセット */
  -moz-appearance: none;    /* Firefox のデフォルトスタイルをリセット */
  appearance: none;         /* 標準のデフォルトスタイルをリセット */
}

#main-nav ul li a:hover, #main-nav ul li button:hover {
  background-color: #555;
  border-radius: 5px;
}

/* ヘッダー全体のレイアウト調整 */
header .header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* ハンバーガーボタン（デフォルト非表示） */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
}

.nav-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #333;
  margin: 6px auto;
  transition: 0.3s;
}

/* メニューが開いている時のボタン（×印） */
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 現在のページを示すスタイル */
#main-nav ul li a.current, #main-nav ul li button.current {
  font-weight: bold;
  color: #FFA500; /* 明るいオレンジ */
  border-bottom: 2px solid #FFA500; /* 明るいオレンジの下線 */
}

/* サブメニューのスタイル */
#main-nav ul li.has-submenu {
  position: relative;
}

#main-nav ul li.has-submenu .submenu {
  display: none; /* 初期状態では非表示 */
  position: absolute;
  top: 100%; /* 親メニューの下に配置 */
  left: 0;
  background-color: #444; /* 親メニューより少し暗い色 */
  min-width: 150px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 0;
  margin: 0;
  list-style: none;
  border-radius: 0 0 5px 5px; /* 下部だけ角を丸く */
}

/* PC用：ホバー時にサブメニューを表示 */
@media (min-width: 769px) {
  #main-nav ul li.has-submenu:hover .submenu {
    display: block;
  }
}

/* スマホ用：JSでクラスが付与された時にサブメニューを表示 */
#main-nav ul li.has-submenu.is-open .submenu {
  display: block;
}

#main-nav ul li.has-submenu .submenu li {
  margin: 0;
}

#main-nav ul li.has-submenu .submenu li a {
  padding: 5px 15px;
  text-align: left;
  white-space: nowrap;
}

#main-nav ul li.has-submenu .submenu li a:hover {
  background-color: #666;
}


/* 小さい画面での調整 */
@media (max-width: 768px) {
  :root {
    --header-height: 80px; /* スマホ時はヘッダーを低く */
  }

  .site-title img {
    height: 50px; /* タイトルロゴを小さく */
  }

  .nav-toggle {
    display: block; /* ハンバーガーボタンを表示 */
  }

  #main-nav {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 100%; /* 画面外（右側）に隠す */
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: rgba(51, 51, 51, 0.95);
    transition: left 0.3s; /* 横からスライドさせるアニメーション */
    overflow-y: auto; /* メニューが長い場合はスクロール可能に */
  }

  /* メニューが開いた時の状態 */
  .nav-open #main-nav {
    left: 0;
  }

  #main-nav ul {
    flex-direction: column; /* 縦並びにする */
    align-items: stretch; /* 横幅いっぱいに広げる */
    padding: 20px 0;
    justify-content: flex-start;
  }

  #main-nav ul li {
    margin: 0;
    border-bottom: 1px solid #444;
  }

  #main-nav ul li a, #main-nav ul li button {
    padding: 15px 20px;
    justify-content: space-between; /* 矢印などが必要な場合のために広げる */
    width: 100%;
    text-align: left;
    box-sizing: border-box;
  }

  #main-nav ul li.has-submenu .submenu {
    position: static; /* 浮かさずに縦に並べる */
    background-color: #222;
    box-shadow: none;
    width: 100%;
  }

  #main-nav ul li.has-submenu .submenu li a {
    padding-left: 40px; /* サブメニューの字下げ */
  }
}

/* メインコンテンツの基本的なレイアウト */
main {
  max-width: 1200px;
  margin-top: 30px;
  padding: 0 20px;
  flex: 3; /* mainは3の比率 */
  min-width: 0; /* flexアイテムの幅が内容によって広がりすぎるのを防ぐ */
}

/* ヒーローセクション */
#hero {
  margin-top: 10px; /* ナビゲーションとの重なりを解消 */
  margin-bottom: 20px;
}

.hero-image {
  max-width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 画像の下の余白をなくす */
  margin: 0 auto; /* 中央寄せ */
  border-radius: 8px; /* 角を少し丸くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* 講師よりのメッセージセクション */
#message {
  background-color: #fff;
  padding: 30px;
  margin: 30px auto; /* 上下のマージンを調整、左右autoで中央寄せ */
  max-width: 800px; /* 適度な幅で中央に寄せる */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#message h2 {
  color: #c00; /* 目立つ色 */
  margin-bottom: 20px;
  font-size: 1.8em;
}

#message ul {
  list-style: none;
  padding: 0;
  margin: 0 auto; /* 中央寄せ */
  max-width: none;
  display: flex; /* 縦並びにする */
  flex-direction: column; /* 縦並び */
  justify-content: flex-start; /* 左寄せ */
  gap: 0px; /* リストアイテム間のスペースをなくす */
}

#message ul li {
  background-color: #fff;
  padding: 15px 25px;
  font-size: 1.3em; /* フォントサイズを大きく */
  color: #cc6600; /* テキストを落ち着いたオレンジに */
  flex: none; /* flexの調整を無効化 */
  width: 100%; /* 全幅に設定 */
  position: relative; /* ::beforeのために必要 */
  display: flex; /* アイコンとテキストを中央揃えにするため */
  align-items: center; /* 垂直方向中央揃え */
  justify-content: flex-start; /* 水平方向左寄せ */
  font-weight: bold; /* 太字に */
}

#message ul li::before {
  content: ''; /* 文字アイコンを削除 */
  display: inline-block; /* 画像を表示するためにブロック要素に */
  width: 24px; /* check.pngのサイズを調整 */
  height: 24px; /* check.pngのサイズを調整 */
  background-image: url('../img/check.png'); /* 画像アイコンを設定 */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しなし */
  background-position: center; /* 中央寄せ */
  vertical-align: middle; /* テキストと垂直方向の位置を合わせる */
  margin-right: 10px;
}

/* 教室のコンセプトセクション */
#concept {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} 

.concept-item {
  background-color: #fefefe;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left; /* テキストは左寄せ */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex; /* flexboxコンテナにする */
  align-items: center; /* 子要素を垂直方向中央に揃える */
  gap: 10px; /* 子要素間の隙間 */
}
.concept-item-right {
  text-align: right; /* この場合だけは、テキストは右寄せ */
}

@media (min-width: 769px) {
  /* 2つ目（偶数番目）の項目を「画像が左・文字が右」に入れ替える */
  .concept-item:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  /* 入れ替わった後、右側に来たテキストを左寄せにする */
  .concept-item:nth-of-type(even) .concept-text {
    text-align: left;
  }

  .profile-flex-container {
    display: flex;       /* 横並びにする魔法の指示 */
    gap: 40px;           /* 写真と文字の間の隙間 */
    align-items: flex-start; /* 上揃えにする */
    margin-bottom: 30px;
    padding-left: 50px;
  }
  .imgbox {
    flex: 0 0 280px;     /* 写真の横幅を280pxで固定 */
  }
  .profile-text {
    flex: 1;             /* 残りのスペースをすべて文章に使う */
    text-align: left;    /* 文章を左寄せに */
  }
}

.concept-item h3 {
  color: #cc6600; /* 落ち着いたオレンジに */
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.5em;
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
}

.concept-item p {
  margin-bottom: 10px;
}

.concept-item a {
  color: #cc6600; /* 落ち着いたオレンジに */
  text-decoration: none;
  font-weight: bold;
}

.concept-item a:hover {
  text-decoration: underline;
}

/* コンセプトアイテム内のテキスト部分 */
.concept-text {
  flex: 0 0 80%; /* 70%の幅を確保 */
}

/* コンセプトアイテム内の画像部分 */
.concept-image {
  flex: 0 0 20%; /* 30%の幅を確保 */
  text-align: center; /* 画像を中央寄せ */
}

.concept-image img {
  max-width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* 比率を維持 */
  display: block; /* img要素の下の余白を削除 */
  margin: 0 auto; /* 中央寄せ */
}

/* お知らせ・更新情報セクション（アコーディオン） */
#news {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}



.accordion-container {
  max-width: 800px;
  margin: 0 auto;
}

.accordion-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden; /* 子要素のborderRadiusを適用 */
}

.accordion-title {
  display: block; /* <summary>はデフォルトでinline */
  padding: 15px 20px;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  background-color: #e9e9e9;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

.accordion-title:hover {
  background-color: #e0e0e0;
}

/* アコーディオンの開閉アイコン */
.accordion-title::after {
  content: '+'; /* 閉じた状態のアイコン */
  position: absolute;
  right: 20px;
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.accordion-item[open] > .accordion-title::after {
  content: '-'; /* 開いた状態のアイコン */
  transform: rotate(0deg); /* 開いた時は回転させない */
}

.accordion-content {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  background-color: #fefefe;
}

.accordion-content p {
  margin-bottom: 8px;
  line-height: 1.5;
}

.accordion-content p:last-child {
  margin-bottom: 0;
}

/* アコーディオン内のレイアウト調整 */
.accordion-content .concept-item {
  border: none;      /* 中身の枠線は消した方がスッキリします */
  box-shadow: none;  /* 影も同様 */
  margin-bottom: 0;
  padding: 10px 0;
}

/* 閉じている時の見出し（◆〜◆）の見た目 */
.accordion-title {
  list-style: none; /* デフォルトの三角形を消す（Safari対策） */
}
.accordion-title::-webkit-details-marker {
  display: none;    /* Chrome/Safari用 */
}

/* メインコンテンツとサイドバーのレイアウト */
.container {
  display: flex;
  flex-wrap: wrap; /* 小さい画面で折り返す */
  gap: 20px; /* mainとasideの間の隙間 */
  width: 75%;
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 40px;
}

aside {
  flex: 1; /* asideは1の比率 */
  min-width: 280px; /* サイドバーの最小幅 */
}

/* 小さい画面でのレイアウト調整 */
@media (max-width: 992px) {
  .container {
    flex-direction: column; /* 縦並びにする */
  }

  main, aside {
    flex: none; /* flexの比率を解除 */
    width: 100%; /* 全幅にする */
  }
}



/* セクション共通の見出しスタイル */
main h2 {
  font-size: 1.8em;
  color: #555;
  background-color: #f7f7f7;
  padding: 10px 20px 12px 50px; /* 左パディングと下パディングを調整 */
  border-left: 5px solid #cc6600; /* アクセントボーダー（落ち着いたオレンジ） */
  border-bottom: 2px dashed #777; /* 点線アンダーバーを太く濃く強調 */
  margin-bottom: 25px; /* マージンを調整 */
  position: relative; /* ::beforeのために必要 */
}

main h2::before {
  content: ''; /* 文字アイコンを削除 */
  display: block; /* 絶対配置するために必要 */
  width: 32px; /* onpu.jpgのサイズを調整 */
  height: 32px; /* onpu.jpgのサイズを調整 */
  background-image: url('../img/onpu.jpg'); /* 画像アイコンを設定 */
  background-size: contain; /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返しなし */
  background-position: center; /* 中央寄せ */
  position: absolute; /* 親要素に対して絶対配置 */
  left: 15px; /* 左端からの位置 */
  top: 50%; /* 上から中央 */
  transform: translateY(-50%); /* 中央揃え */
}

/* プロフィール詳細エリア全体の調整 */
.profile-details {
  margin-top: 30px;    /* 上の横並びエリアとの間隔 */
  line-height: 1.8;    /* 行間を標準より少し広げて読みやすく */
  color: #444;         /* 真っ黒より少しだけ柔らかい色に */
}

/* 段落ごとの隙間を広げる（◎の項目などが埋もれないように） */
.profile-details p {
  margin-bottom: 25px; 
}

/* 横並びエリアの「講師写真」を綺麗に見せる */
.imgbox img {
  border-radius: 10px;               /* 角を丸くする */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 柔らかい影をつける */
  transition: transform 0.3s;        /* マウスを乗せた時の動き用 */
}


/* フッターのスタイル */
footer {
  text-align: center;
  padding: 10px;
  background-color: #333;
  color: white;
  font-size: 0.9em;
  margin-top: 30px; /* 元のスタイルに戻す */
}

/* フッターの教室名スタイル */
footer p:first-of-type {
  font-size: 1.5em; /* 文字を大きく */
  font-family: '游明朝', 'Yu Mincho', serif; /* 明朝体 */
  font-style: italic; /* 斜体 */
  margin-bottom: 5px; /* 下の行との間隔を調整 */
}

#scrollable-content {
  margin-top: calc(var(--header-height) + var(--nav-height)); /* ヘッダーとナビゲーションの合計高さを調整 */
  background-color: transparent; /* 背景画像が透けるように */
  flex-grow: 1; /* コンテンツエリアが伸縮し、フッターを下に押しやる */
}

.newsbox {
  padding: 15px 30px; /* 左右に余白を追加 */
  background-color: #fff; /* 背景色 */
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 影 */
  margin-bottom: 10px; /* 下の要素との間隔 */
  box-sizing: border-box;
}

/* class.html 向け 画像サイズ調整 */
@media (min-width: 769px) {
  .class-large-image .concept-text {
    flex: 0 0 60%; /* テキストの幅を調整 */
  }
  .class-large-image .concept-image {
    flex: 0 0 35%; /* 画像の幅を広げる */
  }
}

.class-large-image h4 {
  color: #cc6600;
  border-left: 3px solid #cc6600;
  padding-left: 10px;
  margin-bottom: 10px;
}

/* 奇数番目の.concept-item内のh4を左寄せにする */
.concept-item:nth-of-type(odd) .concept-text h4 {
  text-align: left;
}