/* ========================================
   国語専門クラス専用CSS
   ======================================== */

/* （heroレイアウトは共通common.cssを使用） */
/* ページ固有の細微調整のみ必要になったらここに追加 */

/* ページ固有のスタイル調整（必要に応じて追加） */

/* =============================
   国語教育の理念 セクションカード化 (PC/モバイル共通 1カラム)
   要件: 単一カラムのまま 背景色 + 左端緑ライン
   ============================= */
.page-japanese #philosophy .philosophy-content {
    max-width: 920px;
    margin: 0 auto;
}

.page-japanese #philosophy .philosophy-text {
    background: var(--cream-color);
    border-left: 8px solid var(--main-color);
    padding: 34px 30px 40px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    position: relative;
    /* margin-top 調整は取り消し（誤修正のため） */
}

/* 余白調整: ヒーロー直下 #about の上余白だけ 1cm(≈38px) 短縮 (50px→12px) */
.page-japanese #about { padding-top: 12px; padding-bottom: 50px; }
/* #philosophy 標準維持 */
.page-japanese #philosophy { padding-top: 12px; padding-bottom: 50px; }

/* =============================
     HERO（PC表示）画像中央揃え再調整
     ============================= */
@media (min-width: 901px) {
    body.page-japanese .hero .container { align-items: center; }
}

/* PC版：国語ページのヒーロータイトルを中央寄せ（elementaryと同等） */
/* REVIEW NOTE (2025-08-10):
   国語ページのヒーロー見出し中央寄せが完全に一致しない件。
   現状はフレックス2カラムを維持しつつ、見出し要素自体を中央配置する暫定指定。
   レイアウト側（common.css）で統一解を検討予定。 */
@media (min-width: 880px) {
    /* レイアウトは維持。タイトルブロック自体を中央配置（幅は内容に合わせる） */
    .page-japanese .hero-title {
        text-align: center !important;
        display: block;
        width: max-content;
        margin: 0 auto; /* フレックスの中でも中央に配置 */
    }
    .page-japanese .hero-title br:first-of-type { margin-bottom: 0; }
    .page-japanese .hero-title .course-name { display: inline; }
}

/* （PC時のヒーロー中央寄せの個別指定は一旦撤回。共通レイアウトを使用） */

/* モバイル専用: 見出しイラスト最終縮小 & 余白統一 */
@media (max-width: 879px) {
    /* イラスト: 他ページ基準より 20〜25% 縮小 */
    body.page-japanese #philosophy .section-title::before,
    body.page-japanese #philosophy .section-title::after {
            width: 46px !important;
            height: 46px !important;
    }
    body.page-japanese #philosophy .section-title::before { left: 4px !important; transform: translateY(-50%) rotate(-10deg); }
    body.page-japanese #philosophy .section-title::after { right: 4px !important; transform: translateY(-50%) rotate(10deg); }

    /* セクション縦余白: 上下とも詰めて視線の連続性を向上 */
    body.page-japanese section#about { padding-top: 36px !important; padding-bottom: 14px !important; }
    /* about内画像下の追加余白削減 */
    .page-japanese .japanese-image { margin-bottom: 6px !important; }
    body.page-japanese section#philosophy { padding-top: 6px !important; padding-bottom: 24px !important; }
    body.page-japanese section#courses { padding-top: 10px !important; padding-bottom: 40px !important; }

    /* 見出し下余白を統一 (波⇢本文距離) */
    .page-japanese #about .section-title,
    .page-japanese #philosophy .section-title,
    .page-japanese #courses .section-title { margin-bottom: 34px !important; }
}

/* 以前のflexレイアウトは崩れ要因だったので解除しシンプル化 */
.page-japanese .japanese-intro { max-width: 920px; margin: 0 auto; }
/* #about / #philosophy の見出し個別指定を外し、共通 .section-title に任せる */

/* 国語 about テキストのみカード化 + 2カラム (画像は巻き込まない) */
.page-japanese .japanese-text {
    background:#fff;
    border-radius:18px;
    padding:40px 46px 42px;
    box-shadow:0 6px 22px rgba(0,0,0,.05);
    line-height:1.85;
}
@media (min-width:1000px){
    .page-japanese .japanese-text { column-count:2; column-gap:44px; }
    .page-japanese .japanese-text p { break-inside:avoid; }
}
@media (max-width:999px){
    .page-japanese .japanese-text { padding:32px 28px 34px; }
}
/* カード下と画像上の間隔調整 */
.page-japanese .japanese-image { 
    margin-top: 36px; 
    text-align: center; /* PC表示で画像を中央配置 */
}

.page-japanese .japanese-image img {
    max-width: 500px;
    width: 100%;
    height: auto;
}

/* セクションタイトルの標準余白(80px)を復元 */
.page-japanese #about .section-title { margin-bottom: 80px; }

@media (max-width: 900px) {
    .page-japanese .japanese-image { margin-top: 24px; }
    .page-japanese .japanese-image img { max-width: 100%; }
}

/* 装飾: 上部にうっすらアクセントライン (任意) */
.page-japanese #philosophy .philosophy-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg,var(--main-color) 0%, rgba(139,195,74,0) 70%);
    opacity: .25;
    pointer-events: none;
}

.page-japanese #philosophy .philosophy-text p {
    margin: 0 0 1.25em;
    line-height: 1.9;
    color: var(--text-color-light);
}

.page-japanese #philosophy .philosophy-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 879px) {
    .page-japanese #philosophy .philosophy-text {
            padding: 26px 22px 32px;
            border-left-width: 6px;
            border-radius: 12px;
            /* margin-top 調整は不要 */
    }
  .page-japanese #philosophy .philosophy-text p {
      line-height: 1.8;
      font-size: 0.98rem;
  }
}

/* =============================
   コース内容セクション: 2枚カード (PC 2カラム / モバイル1カラム)
   ============================= */
.page-japanese .japanese-courses {
    display: grid;
    gap: 40px 40px;
}

@media (min-width: 900px) {
  .page-japanese .japanese-courses {
      grid-template-columns: repeat(2, 1fr);
      align-items: stretch;
  }
}

.page-japanese .course-section {
    background: #ffffff;
    border-left: 10px solid var(--main-color);
    padding: 36px 32px 40px;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    position: relative;
}

.page-japanese .course-section h3 {
    margin-top: 0;
    font-size: 1.55rem;
    line-height: 1.35;
    color: var(--main-color-dark);
}

.page-japanese .course-content { flex: 1; display: flex; }
.page-japanese .course-text { width: 100%; }

/* 内部指導内容カード */
.page-japanese .course-points-card {
    background: var(--cream-color);
    border-radius: 12px;
    padding: 18px 20px 20px;
    margin: 20px 0 24px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}

.page-japanese .course-points-card .points-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: #444;
    font-weight: 700;
    position: relative;
    padding-left: 14px;
}
.page-japanese .course-points-card .points-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 70%;
    background: var(--main-color);
    border-radius: 3px;
    transform: translateY(-50%);
}

.page-japanese .course-points-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.page-japanese .course-points-card ul li {
    padding-left: 20px;
    position: relative;
    line-height: 1.55;
    font-weight: 600;
}
.page-japanese .course-points-card ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 10px;
    height: 10px;
    background: var(--main-color);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(139,195,74,0.25);
}

@media (max-width: 879px) {
    .page-japanese .course-section {
            padding: 28px 22px 34px;
            border-left-width: 8px;
            border-radius: 16px;
    }
    .page-japanese .course-section h3 { font-size: 1.35rem; }
    .page-japanese .course-points-card { margin: 16px 0 20px; padding: 16px 18px 18px; }
    .page-japanese .course-points-card .points-title { font-size: 1rem; }
    .page-japanese .course-points-card ul li { font-size: .95rem; }
    /* 既に上部メディアクエリで余白定義済みのためここでは文字サイズなどのみ */
    body.page-japanese main { padding-top: 100px; }
}