/*
Theme Name: Educo PC School Theme
Theme URI: https://educopcschool.jp
Author: Educo PC School
Author URI: https://educopcschool.jp
Description: Educo PC School のためのオリジナルテーマ
Version: 1.0
Text Domain: educo-theme
*/

/* ===== 共通 ===== */
body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  background: #f7faff;
  color: #333;
  line-height: 1.8;
}

h1, h2, h3 { color: #005fbf; }
a { color: #005fbf; }

.btn-primary,
.btn-secondary {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 25px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.btn-primary {
  background: #005fbf;
  color: #fff;
  border: none;
}

.btn-secondary {
  background: #fff;
  color: #005fbf;
  border: 1px solid #005fbf;
}

.back-btn-area {
  text-align: center;
  margin: 40px 0;
}

/* ===== ヘッダー（Aタイプ：ロゴ左・メニュー右） ===== */
#site-header {
  background: #ffffff;
  border-bottom: 2px solid #e0e8f5;
  padding: 10px 0;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.site-logo img { height: 55px; }

#main-nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

#main-nav ul li a {
  text-decoration: none;
  color: #005fbf;
  font-weight: bold;
  font-size: 15px;
}

#main-nav ul li a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .header-inner { flex-direction: column; }
  #main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }
  .site-logo img { height: 45px; }
}

/* ===== フッター ===== */
#site-footer {
  background: #f1f5ff;
  text-align: center;
  padding: 15px;
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}

/* ===== 各ページ共通ヘッダー（薄い青帯） ===== */
.page-hero {
  background: #e9f2ff;
  padding: 60px 20px;
  text-align: center;
  border-bottom: 2px solid #c5dbff;
}

/* ===== トップページ：ヒーロー（画像左・テキスト右） ===== */
#hero {
  background: linear-gradient(135deg, #67a9ff, #1d6fdc);
  color: #fff;
  padding: 80px 0;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.hero-image { flex: 1; }
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.hero-text { flex: 1; }
.hero-text h1 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #fff;
}
.hero-text p { margin-bottom: 20px; }

@media (max-width: 768px) {
  .hero-inner { flex-direction: column; }
  .hero-text { text-align: center; }
}

/* ===== トップ：各セクション共通余白 ===== */
#courses, #price, #contact, #info {
  padding: 50px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* トップの講義カード表示（グリッド） */
#courses .course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
}

/* ===== 講義内容ページ ===== */
.course-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}

.course-section h2 { margin-bottom: 10px; }
.desc {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.course-detail {
  list-style: none;
  padding-left: 0;
  margin-top: 15px;
}
.course-detail li { margin: 6px 0; }

/* --- 講義内容の上段（4コース横に画像） --- */
.courses-section .course-list{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.course-row{
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.course-text{ flex: 1; }

.course-image{
  width: 240px;
  flex-shrink: 0;
}
.course-image img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

/* スマホでは縦並び */
@media (max-width: 768px){
  .course-row{
    flex-direction: column;
    align-items: stretch;
  }
  .course-image{ width: 100%; }
}

/* --- 講義内容の下段（画像5枚カード） --- */
.course-images-section {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  text-align: center;
}

.course-images-section h2 {
  color: #005fbf;
  margin-bottom: 10px;
}
.course-images-section .intro {
  color: #333;
  margin-bottom: 30px;
}

.course-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.course-image-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.course-image-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.course-image-card h3 {
  margin-top: 10px;
  color: #005fbf;
}
.course-image-card p {
  font-size: 14px;
  color: #555;
}

/* ===== 料金ページ ===== */
.price-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}

.price-box {
  background: #f0f6ff;
  border-left: 5px solid #005fbf;
  padding: 15px 20px;
  margin-top: 10px;
  border-radius: 5px;
}

.price-detail {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}
.price-detail li { margin: 5px 0; }

.contact-section-simple {
  padding: 50px 20px;
  text-align: center;
  background: #e9f2ff;
  margin-top: 40px;
}

/* ===== プライバシーポリシー・特商法 ===== */
.privacy-section, .legal-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}

.privacy-section h2, .legal-section h2 {
  color: #005fbf;
  margin-top: 30px;
  margin-bottom: 10px;
}

.privacy-section ul, .legal-section ul {
  list-style: none;
  padding-left: 0;
}
.privacy-section ul li, .legal-section ul li {
  margin: 5px 0;
}

/* ===== お問い合わせページ（背景淡ブルー＋画像角丸＋レスポンシブ） ===== */
.contact-section {
  background: #eef6ff;
  padding: 40px 20px;
}

.contact-layout {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
}

.contact-image { flex: 1; }
.contact-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  margin-bottom: 15px;
  max-height: 480px;
  object-fit: cover;
}

.contact-form {
  flex: 1;
  background: #f7faff;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #cdddf3;
}

.contact-form h2 {
  color: #005fbf;
  margin-top: 25px;
}

.contact-form label {
  display: block;
  margin: 12px 0 5px;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #aac4e6;
  border-radius: 5px;
  margin-bottom: 10px;
}

/* ✅チェックボックスは上の共通指定から除外してリセット */
.contact-form input[type="checkbox"]{
  width: auto;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  vertical-align: middle;
}


/* --- 中級スキルチェック：チェックと文字を同じ行に揃える --- */


/* --- お問い合わせ：レスポンシブ --- */
@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
    padding: 10px;
  }
  .contact-image img {
    max-width: 90%;
    margin: 0 auto 20px;
    display: block;
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .contact-image img {
    max-width: 100%;
    border-radius: 18px;
  }
}

/* === お問い合わせフォーム：中級チェックのズレ完全修正 === */

.skill-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px; /* チェック項目同士の間隔を最小に */
  margin-top: 10px;
}

.skill-checklist label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;   /* チェックボックスと文字の距離を最小 */
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  line-height: 1.4 !important;
  white-space: nowrap;   /* 改行で縦にズレるのを防止 */
}

.skill-checklist input[type="checkbox"] {
  margin: 0 !important;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transform: translateY(0); /* 上下のズレを完全除去 */
}

/* ===== お問い合わせ：中級チェックのレイアウト ===== */
.skill-checklist{
  display: flex;
  flex-direction: column;
  gap: 6px;              /* 行間は最小限 */
  margin-top: 6px;
}

.skill-checklist label{
  display: flex;
  align-items: center;
  gap: 6px;              /* チェックと文字の間隔を最小限に */
  margin: 0;
  padding: 0;
  font-weight: normal;   /* 他のlabelの太字を打ち消す */
  line-height: 1.5;
  text-align: left;
}

.skill-checklist input[type="checkbox"]{
  flex: 0 0 auto;
  transform: translateY(1px); /* ほんの少しだけ上下位置調整 */
}

/* ===== 講師紹介セクション ===== */
#instructor {
  background: #f0f6ff;
  padding: 60px 20px;
}

#instructor h2 {
  max-width: 800px;
  margin: 0 auto 20px;  /* 上下の余白も調整 */
}

.instructor-profile {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 30px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  line-height: 1.9;
}
/* ===== 講師紹介セクション ===== */

#instructor {
  padding: 60px 20px;
  background: #ffffff; /* 他のセクションが白背景ならそのまま */
}

#instructor .inner {
  max-width: 960px;
  margin: 0 auto;
}

#instructor .section-title {
  font-size: 2rem;
  margin-bottom: 10px;
  text-align: left;
  color: #005fbf; /* ホームページ全体の見出し色に合わせる */
}

#instructor .section-lead {
  margin-bottom: 30px;
  color: #555;
}

/* テキスト + 写真を横並びに */
.instructor-profile {
  display: flex;
  align-items: flex-start;
  gap:15px;
}

/* テキスト側（左） */
.instructor-text {
  flex: 1;
}

.instructor-name {
  font-size: 1.3rem;
  margin-bottom: 5px;
  color: #005fbf;
}

.instructor-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: bold;
  color: #777;
}

/* 写真側（右） */
.instructor-photo img {
  display: block;
  max-width: 200px;   /* 写真を少し小さめに表示 */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* スマホ・タブレットでは縦並びに変更 */
@media (max-width: 768px) {
  .instructor-profile {
    flex-direction: column;
    align-items: center;
  }

  .instructor-photo img {
    max-width: 70%;
    margin-top: 15px;
  }

  #instructor .section-title {
    text-align: center;
  }

  #instructor .section-lead {
    text-align: center;
  }
}
/* 講師紹介ページ用のレイアウト調整 */
.instructor-section--page .instructor-profile {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; /* ← space-between を無効にして左寄せ */
  gap: 8px;                  /* テキストと写真のすき間。お好みで 8〜16px 程度 */
}

/* 念のため余計なマージンがあれば消す */
.instructor-section--page .instructor-photo {
  margin-left: 0;
}

/* 写真サイズも少し小さめにする場合（必要なら） */
.instructor-section--page .instructor-photo img {
  max-width: 170px;   /* お好みで 150〜180px くらいに調整 */
  height: auto;
}
/* 講師紹介ページ：左に写真、右にテキスト */
.instructor-section--page .instructor-profile {
  display: flex;
  flex-direction: row-reverse;  /* ← 並び順を反転：右にテキスト、左に写真 */
  align-items: flex-start;
  justify-content: flex-end;    /* 右側にそろえる */
  gap: 24px;                    /* 写真とテキストの間隔。お好みで調整（16〜32px程度） */
}

/* 写真のサイズと見た目（必要に応じて調整） */
.instructor-section--page .instructor-photo img {
  max-width: 170px;    /* もう少し大きく／小さくしたければ数字を変える */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* スマホでは縦並びに戻す */
@media (max-width: 768px) {
  .instructor-section--page .instructor-profile {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* プロフィールページ下部の「トップへ戻る」ボタン */
.back-to-top {
  margin-top: 40px;
  text-align: center;   /* 中央寄せ */
}

.back-to-top .btn-secondary {
  display: inline-block;
  min-width: 220px;     /* ボタン幅（お好みで調整） */
}
/* === 料金ページ：テーブル共通デザイン === */
.price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;        /* 各列の幅を均等にして折り返しを減らす */
  margin-top: 10px;
  font-size: 14px;
}

.price-table th,
.price-table td {
  border: 1px solid #ccd7ee;  /* 縦線・横線どちらもこれで入ります */
  padding: 6px 8px;
  vertical-align: top;
}

/* ヘッダー行を少し強調 */
.price-table th {
  background: #e3edff;
  font-weight: bold;
  text-align: center;
}

/* 回数・時間／料金だけはなるべく1行に */
.price-table td:nth-child(3),
.price-table td:nth-child(4) {
  white-space: nowrap;      /* 3列目・4列目のみ「できるだけ改行しない」 */
}

/* シニア(Sコース)テーブルは列数が多いので、3・4列目だけnowrap */
.price-section:nth-of-type(4) .price-table td:nth-child(3),
.price-section:nth-of-type(4) .price-table td:nth-child(4),
.price-section:nth-of-type(4) .price-table th:nth-child(3),
.price-section:nth-of-type(4) .price-table th:nth-child(4) {
  white-space: nowrap;
}

/* スマホでは詰まりすぎないように、折り返しOKに戻す */
@media (max-width: 768px) {
  .price-table {
    table-layout: auto;        /* モバイルでは自動レイアウトに戻す */
    font-size: 13px;
  }

  .price-table th,
  .price-table td {
    white-space: normal;       /* 画面幅に合わせて改行を許可 */
  }
}

/* =========================
   予約カレンダー（2週間表示）用スタイル
   ========================= */

.appointment-main {
  padding: 40px 20px;
}

.appointment-hero h1 {
  margin-bottom: 10px;
}

.appointment-course-label {
  margin-top: 10px;
}

.appointment-alert {
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}
.appointment-alert.success {
  background: #e6ffed;
  border: 1px solid #27ae60;
}
.appointment-alert.error {
  background: #ffecec;
  border: 1px solid #e74c3c;
}

.appointment-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.appointment-range {
  font-weight: bold;
}

.appointment-table-wrapper {
  margin-top: 10px;
}
.appointment-table-scroll {
  overflow-x: auto;
}
.appointment-table {
  border-collapse: collapse;
  min-width: 900px;
}
.appointment-table th,
.appointment-table td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 4px;
  font-size: 0.8rem;
}
.appointment-table th.time-col {
  width: 60px;
  background: #f5f7fb;
}
.appointment-table thead th {
  background: #eef4ff;
}
.appointment-table .weekday {
  font-size: 0.7rem;
}

.slot-btn {
  width: 100%;
  padding: 3px 2px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
}
.slot-available {
  background: #e8fff2;
}
.slot-full {
  background: #f3f3f3;
  color: #999;
  cursor: default;
}

/* モーダル */
.reservation-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}
.reservation-modal.is-open {
  display: block;
}
.reservation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.reservation-modal-content {
  position: relative;
  max-width: 480px;
  margin: 80px auto;
  background: #fff;
  padding: 25px 20px;
  border-radius: 8px;
  z-index: 1001;
}
.reservation-modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}
.reservation-selected-info {
  font-size: 0.9rem;
  margin-bottom: 15px;
}
.reservation-form .form-row {
  margin-bottom: 10px;
}
.reservation-form label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 3px;
}
.reservation-form input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 0.9rem;
}
.reservation-form .form-actions {
  text-align: right;
}

.appointment-back-link {
  margin-top: 10px;
}
.appointment-back-link .btn-secondary {
  font-size: 0.85rem;
}


/*講義内容独自プラン文言*/
.course-lead {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.9;
}

/*コース一覧ページ*/

.courses-hero {
  padding: 40px 20px 20px;
}
.courses-grid {
  display: grid;
  gap: 20px;
  padding: 0 20px 40px;
}
@media (min-width: 768px) {
  .courses-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.course-card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.course-card h2 {
  margin-top: 0;
  margin-bottom: 10px;
}
.course-card p {
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.appointment-back-link,
.appointment-cancel-link {
  margin-top: 10px;
}

.btn-tertiary {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

/* キャンセルフォーム */
.cancel-section {
  margin: 20px 0;
  padding: 15px;
  border-radius: 8px;
  background: #fffdf2;
  border: 1px solid #f1e2a0;
  display: none;
}
.cancel-section.is-open {
  display: block;
}
.cancel-form .form-row {
  margin-bottom: 10px;
}
.cancel-form label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 3px;
}
.cancel-form input,
.cancel-form textarea {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 0.9rem;
}
.cancel-form .form-actions {
  text-align: right;
  margin-top: 10px;
}
/* Appointment banner (top/bottom reusable) */
.ap-banner-wrap {
  max-width: 1200px;      /* サイト幅に合わせて調整OK */
  margin: 0 auto;
  padding: 12px 16px;
  text-align: right;      /* 右寄せ */
}

.ap-banner-link {
  display: inline-block;  /* 右寄せを効かせる */
  line-height: 0;
}

.ap-banner-img {
  max-width: min(520px, 100%); /* PCは最大幅を抑えつつ、スマホは100% */
  height: auto;
  display: block;
}

/* スマホ最適化 */
@media (max-width: 768px) {
  .ap-banner-wrap {
    padding: 10px 12px;
  }
  .ap-banner-img {
    max-width: 100%; /* スマホは横幅いっぱい */
  }
}