/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ボタンを Tailwind 風に整える */
#downloadCsv{
  background:#4F46E5;color:#fff;border:none;border-radius:6px;
  padding:6px 20px;font-weight:600;cursor:pointer;
}
#downloadCsv:hover{background:#4338ca;}

/* -------------------------
共通設定
------------------------- */
body {
  font-family: 'Helvetica Neue', 'sans-serif';
  background-color: #F3F4F6;
  margin: 0;
  padding: 0;
  color: #1F2937;
}

a {
  color: #2563eb;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.ast-single-post .entry-content a, .ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {
    text-decoration: none;
}

/* -------------------------
ユーザーバー（動画ページ上部）
------------------------- */
.user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-links a {
  margin-left: 1rem;
  font-weight: bold;
  color: #4F46E5;
  font-size: 1rem;
}

/* -------------------------
動画ページレイアウト
------------------------- */
.video-page {
  max-width: 960px;
  margin: 3rem auto;
  padding: 10px;
  background-color: #F9FAFB;
}

.video-page h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.video-description {
  font-size: 1rem;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.video-player iframe {
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 16 / 9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.progress-indicator {
  font-size: 0.9rem;
  color: #4B5563;
  margin-bottom: 2rem;
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #6B7280;
}
.post-navigation a {
  color: #4F46E5;
}

/* -------------------------
完了率バッジ
------------------------- */
.status-link {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}
.status-link.green {
  background-color: #D1FAE5;
  color: #065F46;
}
.status-link.blue {
  background-color: #DBEAFE;
  color: #1E40AF;
}
.status-link.gray {
  background-color: #E5E7EB;
  color: #6B7280;
}

/* -------------------------
各コース表示カード（ダッシュボードなど）
------------------------- */
.course-overview {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.course-overview div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s ease;
}

.course-overview div:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.course-overview strong {
  font-size: 1rem;
}

/* -------------------------
カード型表示（マイページ内の動画一覧など）
------------------------- */
.course-card-wrapper {
  max-width: 1024px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.course-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  padding: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* -------------------------
ログイン画面（独自ログイン用）
------------------------- */
.custom-login-wrapper {
  display: flex;
  max-width: 960px;
  margin: 60px auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.custom-login-left {
  flex: 1;
  background: url('https://curriculum.nwl.jp/wp-content/uploads/2025/07/ChatGPT-Image-2025年7月4日-12_23_19.png') no-repeat center center;
  background-size: cover;
  position: relative;
  min-height: 800px;
}

.login-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-caption h2 {
  font-size: 20px;
	color: white;
  margin-bottom: 10px;
}
.login-caption p {
  font-size: 14px;
  line-height: 1.6;
}

.custom-login-right {
  flex: 1;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.custom-login-right h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.custom-login-right .sub {
  color: #6B7280;
  font-size: 14px;
  margin-bottom: 30px;
}
#custom_loginform input[type="text"],
#custom_loginform input[type="password"] {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 14px;
}
#custom_loginform input[type="submit"] {
  background-color: #3B82F6;
  color: white;
  padding: 12px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}
#custom_loginform label {
  font-size: 14px;
  color: #374151;
}
.login-bottom-links {
  margin-top: 20px;
  font-size: 13px;
  color: #6B7280;
}
.login-bottom-links a {
  color: #3B82F6;
  text-decoration: none;
  margin: 0 4px;
}

/* ====== Video Lesson Page: Responsive Refresh (2025-08) ====== */

/* ベース */
.video-page{
  padding: clamp(12px, 2vw, 24px);
  background: #f7f7fb;
}
.video-page .course-card-wrapper{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(6px, 1.2vw, 12px);
}
.video-page .course-card{
  background:#fff;
  border-radius:16px;
  box-shadow: 0 6px 24px rgba(16,24,40,.06);
  padding: clamp(16px, 2.2vw, 28px);
}

/* ユーザー情報バー */
.video-page .user-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  background:#fff;
  border-radius:12px;
  padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(16,24,40,.05);
}
.video-page .user-info{min-width:0;}
.video-page .user-links{
  display:flex; gap:10px; flex-wrap:wrap;
}
.video-page .user-links a{
  display:inline-block;
  padding: 8px 12px;
  border-radius:10px;
  background:#f0f2f7;
  text-decoration:none;
  color:#111827;
  font-weight:600;
  font-size: 14px;
}
.video-page .user-links a:hover{background:#e6e9f2}

/* 視聴期限 */
.video-page .view-deadline{
  font-size:14px;
}

/* タイトルと本文 */
.video-page .course-card > h1{
  font-size: clamp(20px, 2.2vw + 8px, 28px);
  line-height: 1.3;
  margin: 4px 0 16px;
}
.video-page .video-description{
  font-size: clamp(14px, 1.2vw + 10px, 16px);
  line-height: 1.9;
  color:#374151;
}
.video-page .video-description p{margin: 0 0 1.1em}

/* ▶ Vimeo 埋め込みを完全レスポンシブに */
.video-page .video-player{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* 近代ブラウザ用 */
  border-radius: 14px;
  overflow: hidden;
  background:#000;
  margin: 16px 0 8px;
}
/* iframe / vimeo埋め込みdiv を中に合わせる */
.video-page .video-player iframe,
.video-page .video-player > div,
.video-page .video-player .plyr,
.video-page .video-player .player,
.video-page .video-player .video{
  position:absolute; inset:0;
  width:100%; height:100% !important;
  max-width:none !important;
}

/* 進捗表示（バッジ感） */
.video-page .progress-indicator{
  margin: 6px 0 18px;
  font-size: 13px;
  color:#111827;
}
.video-page .progress-indicator [class*="progress"]{
  display:inline-block;
  padding: 4px 8px;
  background:#eef2ff;
  color:#4338ca;
  border-radius:999px;
  font-weight:700;
}

/* 前後ナビゲーション */
.video-page .post-navigation{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.video-page .post-navigation a{
  display:block;
  width:100%;
  padding: 12px 14px;
  text-decoration:none;
  border-radius:10px;
  border:1px solid #e5e7eb;
  text-align:center;
  color:#111827;
  background:#fff;
  font-weight:600;
}
.video-page .post-navigation a:hover{
  background:#f9fafb;
}

/* ====== ブレークポイント ====== */

/* タブレット以下：ユーザーバーを縦積み、余白最適化 */
@media (max-width: 900px){
  .video-page .user-bar{flex-direction:column; align-items:stretch}
  .video-page .user-links{justify-content:flex-start}
}

/* モバイル：カード幅・文字・ナビを1列に */
@media (max-width: 640px){
  .video-page{padding: 10px}
  .video-page .course-card{
    padding: 14px;
    border-radius: 14px;
  }
  .video-page .post-navigation{
    grid-template-columns: 1fr;   /* ← 前後リンクを縦並び＆押しやすく */
  }
  .video-page .user-links a{font-size:13px; padding:8px 10px}
  .video-page .view-deadline{font-size:13px}
}



/* ===== [course_overview] レスポンシブ強化（既存デザイン尊重版） ===== */

/* まず .course-overview 内の既存「div一律スタイル」を上書きする対象を限定 */
.course-overview .course-row{
  /* 行内 style の display:flex を置き換え */
  display: grid !important;
  grid-template-columns: 1fr auto;  /* 左：タイトル、右：進捗 */
  align-items: center !important;
  gap: 8px;
  padding: 0.75rem 1rem !important;
  border: 1px solid #e5e7eb;      /* 既存に合わせる */
  border-radius: 8px;
  background: #fff;
  margin-bottom: 1rem;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}
.course-overview .course-row:hover{
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  border-color: #d9dce3;
  transform: translateY(-1px);
}

/* タイトル（既存 strong 内の a） */
.course-overview .course-row strong{
  display: block;
  min-width: 0;                 /* タイトル長い場合のはみ出し防止 */
}
.course-overview .course-row strong a{
  display: block;               /* クリック範囲を広げる */
  color:#4F46E5;                /* 既存色を踏襲 */
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw + 8px, 16px);
  line-height: 1.5;
  word-break: break-word;
}
.course-overview .course-row strong a:hover{ text-decoration: underline; }

/* 進捗（右側の span）を“バッジ風”に */
.course-overview .course-row > span{
  justify-self: end;            /* 右寄せ */
  font-size: 12px;
  color:#4338ca;
  background:#eef2ff;
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;          /* PCでは1行 */
}

/* 行末の矢印（装飾）— HTMLはそのままでOK */
.course-overview .course-row::after{
  content: "›";
  font-size: 18px;
  line-height: 1;
  color: #9aa3b2;
  margin-left: 6px;
  justify-self: end;
}

/* ------- ブレークポイント ------- */

/* タブレット：列幅の余裕が無い時は自動で折り返し */
@media (max-width: 900px){
  .course-overview{ padding: 1rem; }
  .course-overview .course-row{
    grid-template-columns: 1fr auto;
    gap: 6px;
  }
}

/* スマホ：1列。進捗は改行して下へ */
@media (max-width: 600px){
  .course-overview{ padding: .75rem; }
  .course-overview .course-row{
    grid-template-columns: 1fr;      /* ← タイトルだけの列に */
    padding: .75rem .875rem !important;
  }
  .course-overview .course-row > span{
    grid-column: 1 / -1;             /* 改行して下に表示 */
    justify-self: start;
    margin-top: 6px;
    white-space: normal;              /* 長い文でも折り返し可 */
  }
  .course-overview .course-row::after{
    display:none;                     /* 矢印は省略（任意） */
  }
}


 * /* progress table style */
#progress-table table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
#progress-table thead{background:#f3f4f6;position:sticky;top:0;z-index:1}
#progress-table th,#progress-table td{padding:3px 4px;border:1px solid #e5e7eb;word-break:break-word}
#progress-table tbody tr:nth-child(odd){background:#fafafa}
#progress-table tbody tr:hover{background:#eef2ff}
#progress-table tbody{text-align:center}
/* 列幅 */
#progress-table th:nth-child(1), #progress-table td:nth-child(1){width:75px}
#progress-table th:nth-child(2), #progress-table td:nth-child(2){width:90px}
#progress-table th:nth-child(3), #progress-table th:nth-child(4),
#progress-table td:nth-child(3), #progress-table td:nth-child(4){width:85px}
#progress-table th:nth-child(5), #progress-table td:nth-child(5){min-width:150px}
#progress-table th:nth-child(6), #progress-table th:nth-child(7),
#progress-table td:nth-child(6), #progress-table td:nth-child(7){min-width:180px;white-space:nowrap}
#progress-table th:nth-child(8), #progress-table th:nth-child(9),
#progress-table td:nth-child(8), #progress-table td:nth-child(9){width:95px}
#progress-table th:nth-child(10), #progress-table td:nth-child(10){width:80px}
#progress-table th:nth-child(11), #progress-table td:nth-child(11){width:55px}

/* === Course Video List (cv-*) ===================== */
.cv-list{
  --gap:20px; --radius:14px; --shadow:0 8px 20px rgba(0,0,0,.06);
  --c-text:#111827; --c-sub:#6B7280; --c-line:#E5E7EB; --c-bg:#fff; --c-link:#4F46E5;
  max-width:1100px; margin:0 auto; padding:8px;
}
.cv-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.cv-card{
  background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.cv-thumb{ aspect-ratio:16/9; overflow:hidden; }
.cv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.cv-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.cv-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cv-lesson{ font-size:12px; color:var(--c-sub); background:#F3F4F6; border-radius:9999px; padding:4px 8px; }
.cv-progress{ font-size:12px; color:#4338CA; background:#EEF2FF; border-radius:9999px; padding:4px 8px; }

.cv-title{ margin:2px 0 0; font-size:16px; font-weight:800; color:var(--c-text); line-height:1.45; }
.cv-desc{ margin:0; font-size:14px; color:var(--c-sub); }

/* meter */
.cv-meter{ display:flex; align-items:center; gap:8px; }
.cv-bar{ position:relative; flex:1; height:6px; background:#F3F4F6; border-radius:9999px; overflow:hidden; }
.cv-bar i{ position:absolute; inset:0; width:0%; background:var(--c-link); display:block; }
.cv-pct{ font-size:12px; color:#6B7280; min-width:42px; text-align:right; }

/* buttons */
.cv-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.cv-btn{
  display:inline-flex; align-items:center; gap:6px; border:0; border-radius:10px;
  padding:10px 12px; font-weight:800; font-size:14px; cursor:pointer; text-decoration:none;
}
.cv-btn.primary{ background:var(--c-link); color:#fff; }
.cv-btn.ghost{ background:#F3F4F6; color:var(--c-text); }

.cv-card:has(a.cv-btn:focus-visible){ outline:3px solid #A5B4FC; outline-offset:3px; }

@media (hover:hover){ .cv-card{ transition:transform .2s } .cv-card:hover{ transform:translateY(-2px); } }

/* mobile */
@media (max-width:640px){
  .cv-list{ padding:8px 12px; }
  .cv-grid{ gap:14px; }
  .cv-body{ padding:12px; gap:8px; }
  .cv-title{ font-size:15px; }
  .cv-desc{ font-size:13px; }
  .cv-btn{ width:100%; justify-content:center; padding:12px 14px; }
  .cv-actions{ gap:8px; }
}


/* -------------------------
レスポンシブ対応（画面幅768px以下用）
------------------------- */
@media screen and (max-width: 768px) {
  .custom-login-wrapper {
    flex-direction: column;
    max-width: 100%;
    margin: 20px auto;
    border-radius: 0;
  }

  .custom-login-left,
  .custom-login-right {
    flex: none;
    width: 100%;
    min-height: 300px;
  }

  .custom-login-left {
    background-position: center top;
    background-size: cover;
  }

  .login-overlay {
    padding: 20px;
    text-align: center;
    justify-content: flex-end;
  }

  .login-caption h2 {
    font-size: 18px;
  }

  .login-caption p {
    font-size: 13px;
  }

  .custom-login-right {
    padding: 40px 20px;
  }

  .custom-login-right h2 {
    font-size: 20px;
    text-align: center;
  }

  .custom-login-right .sub {
    text-align: center;
  }

  #custom_loginform input[type="text"],
  #custom_loginform input[type="password"],
  #custom_loginform input[type="submit"] {
    width: 100%;
  }

  .login-bottom-links {
    text-align: center;
  }
}