@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*
 * Meisei School LMS Skin - draft 0.1
 * 2026-09-18
 * Purpose: fast visual bridge from Manus Meisei portal to Cocoon-based WordPress.
 * Scope: public TOP / login / logged-in dashboard only.
 *
 * IMPORTANT:
 * - This file intentionally avoids LMS logic, PHP, login logic, progress logic, and WPDM logic.
 * - Page wrappers/classes expected for fastest adoption:
 *     TOP:        .meisei-home-page
 *     Login:      .meisei-login-page
 *     Dashboard:  .meisei-dashboard
 * - After the WordPress restore finishes, selectors should be matched to the real Cocoon/shortcode DOM
 *   and unnecessary rules removed. This is a design-first provisional skin.
 */

:root {
  --meisei-navy: #082b5b;
  --meisei-navy-deep: #061d40;
  --meisei-ink: #13284a;
  --meisei-muted: #657590;
  --meisei-line: #dce6f2;
  --meisei-blue: #2678e8;
  --meisei-blue-hover: #1467d6;
  --meisei-blue-soft: #edf6ff;
  --meisei-green: #42ab70;
  --meisei-canvas: #f8fbff;
  --meisei-card: #ffffff;
  --meisei-warm: #d95752;
  --meisei-warm-soft: #fff0ec;
  --meisei-radius: 16px;
  --meisei-shadow: 0 12px 34px rgba(19, 48, 89, .08);
}

/* =========================================================
   0. Cocoon-wide light brand layer
   ========================================================= */
body {
  color: var(--meisei-ink);
}

#header-container,
.header-container,
.header-container-in,
#navi,
.navi {
  border-color: var(--meisei-line);
}

/* Logged-in pages can use the dark Manus-like portal header. */
.logged-in #header-container,
.logged-in .header-container {
  background: linear-gradient(90deg, var(--meisei-navy), var(--meisei-navy-deep));
}

.logged-in #header-container a,
.logged-in .header-container a,
.logged-in #navi a,
.logged-in .navi a {
  color: #fff;
}

/* Keep Cocoon's content widths/structure. Only soften surfaces. */
.main,
.sidebar,
.article,
.entry-content {
  border-color: var(--meisei-line);
}

/* =========================================================
   1. Shared components
   ========================================================= */
.meisei-eyebrow {
  margin: 0 0 9px;
  color: var(--meisei-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.5;
  text-transform: uppercase;
}

.meisei-btn,
.meisei-btn-primary,
.meisei-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.meisei-btn-primary {
  color: #fff !important;
  border: 1px solid var(--meisei-blue);
  background: var(--meisei-blue);
  box-shadow: 0 7px 16px rgba(38, 120, 232, .23);
}

.meisei-btn-primary:hover {
  color: #fff !important;
  background: var(--meisei-blue-hover);
  transform: translateY(-1px);
}

.meisei-btn-secondary {
  color: var(--meisei-navy) !important;
  border: 1px solid #cbd9ea;
  background: #fff;
}

.meisei-btn-secondary:hover {
  border-color: var(--meisei-blue);
  background: var(--meisei-blue-soft);
}

.meisei-card {
  border: 1px solid #e1eaf3;
  border-radius: var(--meisei-radius);
  background: var(--meisei-card);
  box-shadow: 0 5px 18px rgba(27, 61, 106, .04);
}

/* =========================================================
   2. Public TOP
   Add "meisei-home-page" to the outer Group/block wrapper.
   ========================================================= */
.meisei-home-page {
  color: var(--meisei-ink);
  background: #fff;
}

.meisei-home-page .meisei-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 58px;
  align-items: center;
  padding: 72px clamp(20px, 5vw, 64px);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 45%, #d9edff 0, #eff7ff 24%, transparent 50%),
    linear-gradient(115deg, #f7fbff 0%, #edf6ff 100%);
  border-radius: 22px;
}

.meisei-home-page .meisei-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(90deg, rgba(24, 91, 168, .07) 1px, transparent 1px),
    linear-gradient(rgba(24, 91, 168, .07) 1px, transparent 1px);
  background-size: 48px 48px;
}

.meisei-home-page .meisei-hero-copy,
.meisei-home-page .meisei-hero-panel {
  position: relative;
  z-index: 1;
}

.meisei-home-page .meisei-hero h1 {
  margin: 0;
  color: var(--meisei-navy);
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: 1.22;
  letter-spacing: -.055em;
}

.meisei-home-page .meisei-hero h1 em,
.meisei-home-page .meisei-hero h1 span {
  color: var(--meisei-blue);
  font-style: normal;
}

.meisei-home-page .meisei-hero-lead {
  max-width: 590px;
  margin: 22px 0 28px;
  color: #50647e;
  font-size: 15px;
  line-height: 1.9;
}

.meisei-home-page .meisei-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meisei-home-page .meisei-hero-panel {
  min-height: 300px;
  padding: 28px;
  color: #fff;
  border-radius: 24px;
  background: linear-gradient(145deg, #0b3d7c, #082b5b 60%, #061d40);
  box-shadow: 0 25px 60px rgba(10, 49, 98, .22);
}

.meisei-home-page .meisei-hero-panel img,
.meisei-home-page .meisei-hero-panel iframe,
.meisei-home-page .meisei-hero-panel video {
  max-width: 100%;
  border-radius: 14px;
}

.meisei-home-page .meisei-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.meisei-home-page .meisei-value-grid > * {
  padding: 26px;
  border: 1px solid #e1eaf5;
  border-radius: 18px;
  background: #fff;
}

.meisei-home-page .meisei-value-grid h2,
.meisei-home-page .meisei-value-grid h3 {
  color: var(--meisei-navy);
}

/* =========================================================
   3. Login
   Add "meisei-login-page" to the outer Group/block wrapper.
   The existing DEV AJ Auth Bridge form can remain unchanged.
   ========================================================= */
.meisei-login-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: clamp(36px, 7vw, 90px);
  align-items: center;
  min-height: 620px;
  padding: clamp(36px, 6vw, 70px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 20%, var(--meisei-warm-soft) 0, transparent 27%),
    linear-gradient(122deg, #fffdfc, #fff7f4);
}

.meisei-login-page .meisei-login-intro h1 {
  margin: 0;
  color: var(--meisei-ink);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.25;
  letter-spacing: -.055em;
}

.meisei-login-page .meisei-login-intro h1 span {
  color: var(--meisei-warm);
}

.meisei-login-page .meisei-login-intro p:not(.meisei-eyebrow) {
  max-width: 470px;
  color: #65595d;
  line-height: 1.9;
}

/* The login form itself. Works with the current [aj_parent_login] style of form. */
.meisei-login-page form {
  padding: 28px;
  border: 1px solid #ecdcd7;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(100, 54, 50, .10);
}

.meisei-login-page form p {
  margin: 0 0 15px;
}

.meisei-login-page form label {
  display: block;
  color: #584e51;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.meisei-login-page form input[type="text"],
.meisei-login-page form input[type="email"],
.meisei-login-page form input[type="password"] {
  width: 100%;
  min-height: 47px;
  margin-top: 6px;
  padding: 10px 12px;
  color: var(--meisei-ink);
  border: 1px solid #dcd2d1;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  font-size: 16px;
}

.meisei-login-page form input:focus {
  border-color: var(--meisei-warm);
  box-shadow: 0 0 0 3px #ffe7e1;
}

.meisei-login-page form button[type="submit"],
.meisei-login-page form input[type="submit"] {
  width: 100%;
  min-height: 46px;
  padding: 11px 15px;
  color: #fff;
  border: 1px solid var(--meisei-warm);
  border-radius: 10px;
  background: var(--meisei-warm);
  box-shadow: 0 7px 16px rgba(211, 78, 74, .19);
  font-weight: 800;
  cursor: pointer;
}

.meisei-login-page form button[type="submit"]:hover,
.meisei-login-page form input[type="submit"]:hover {
  background: #bc3f3b;
}

/* =========================================================
   4. Logged-in dashboard / post-login TOP
   Add "meisei-dashboard" to the outer Group/block wrapper.
   ========================================================= */
.meisei-dashboard {
  padding: 8px 0 40px;
  color: var(--meisei-ink);
}

.meisei-dashboard .meisei-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 28px;
}

.meisei-dashboard .meisei-welcome h1 {
  margin: 0;
  color: var(--meisei-navy);
  font-size: clamp(27px, 3vw, 37px);
  letter-spacing: -.055em;
}

.meisei-dashboard .meisei-welcome h1 span {
  color: var(--meisei-blue);
}

.meisei-dashboard .meisei-welcome p {
  margin: 8px 0 0;
  color: var(--meisei-muted);
}

.meisei-dashboard .meisei-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.meisei-dashboard .meisei-course-card,
.meisei-dashboard .meisei-panel {
  position: relative;
  min-width: 0;
  padding: 20px;
  border: 1px solid #e1eaf3;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(27, 61, 106, .035);
}

.meisei-dashboard .meisei-course-card {
  min-height: 126px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.meisei-dashboard .meisei-course-card:hover {
  transform: translateY(-2px);
  border-color: #bed9fb;
  box-shadow: var(--meisei-shadow);
}

.meisei-dashboard .meisei-course-card h2,
.meisei-dashboard .meisei-course-card h3,
.meisei-dashboard .meisei-panel h2,
.meisei-dashboard .meisei-panel h3 {
  margin-top: 0;
  color: var(--meisei-navy);
}

.meisei-dashboard .meisei-course-card p,
.meisei-dashboard .meisei-panel p {
  color: #74849a;
  line-height: 1.75;
}

.meisei-dashboard .meisei-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
}

.meisei-dashboard .meisei-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3c91f5, #2372df);
}

/* =========================================================
   5. Responsive
   ========================================================= */
@media (max-width: 800px) {
  .meisei-home-page .meisei-hero,
  .meisei-login-page {
    grid-template-columns: 1fr;
  }

  .meisei-home-page .meisei-hero {
    gap: 30px;
    padding: 52px 20px;
  }

  .meisei-home-page .meisei-value-grid,
  .meisei-dashboard .meisei-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .meisei-login-page {
    gap: 26px;
    min-height: 0;
    padding: 34px 20px;
  }

  .meisei-login-page form {
    padding: 22px 18px;
  }

  .meisei-dashboard .meisei-welcome {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .meisei-home-page .meisei-hero h1,
  .meisei-login-page .meisei-login-intro h1 {
    font-size: 34px;
  }

  .meisei-home-page .meisei-hero-panel {
    padding: 20px;
  }
}