@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
*/

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

/* ============================================
   minna-manabu UI改善（h1/h2/h3 + icons）
   ============================================ */

/* =========================================================
   Cocoon の h1（.entry-title）を完全に上書きする
   ========================================================= */
.entry-content h1.entry-title.ytlms-h1,
h1.entry-title.ytlms-h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1a3c70 !important;
    padding-bottom: 8px !important;
    border-bottom: 3px solid #1a3c70 !important;
    margin-top: 10px !important;
    margin-bottom: 25px !important;
    line-height: 1.4 !important;
}

/* --------------------------------------------
   H2（学習ダッシュボード）
-------------------------------------------- */
.entry-content .ytlms-front-wrap h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #1a3c70 !important;
    margin: 30px 0 20px !important;
    padding: 6px 0 !important;
    border-top: none; !important;
    border-bottom: 2px solid #d8e2ef !important;
    background: #f7f9fc !important;
}

/* --------------------------------------------
   H3（下ラインのみ）
-------------------------------------------- */
.entry-content .ytlms-front-wrap h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a3c70 !important;
    margin: 25px 0 12px !important;
    padding: 6px 0 !important;
    border-top: none; !important;
    border-bottom: 1px solid #d8e2ef !important;
    border-left: none !important;
    border-right: none !important;
}


/* --------------------------------------------
   サマリーボックス
-------------------------------------------- */
.ytlms-summary-box {
    background: #f7f9fc;
    border: 1px solid #d8e2ef;
    padding: 20px 22px;
    border-radius: 10px;
    margin-bottom: 35px;
    font-size: 16px;
}

/* サマリー行 */
.ytlms-summary-box p {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 30px;
    position: relative;
    color: #333;
    font-size: 16px;
}

/* --------------------------------------------
   サマリーアイコン（CSSで描画）
-------------------------------------------- */

/* —— TVアイコン（視聴動画数） —— */
.ytlms-summary-box p:nth-of-type(1)::before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 12px;
    border: 2px solid #1a3c70;
    border-radius: 2px;
    top: 3px;
}
.ytlms-summary-box p:nth-of-type(1)::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 15px;
    width: 6px;
    height: 2px;
    background: #1a3c70;
}

/* —— 折れ線グラフアイコン（平均視聴率） —— */
.ytlms-summary-box p:nth-of-type(2)::before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 12px;
    border-left: 2px solid #1a3c70;
    border-bottom: 2px solid #1a3c70;
}
.ytlms-summary-box p:nth-of-type(2)::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 6px;
    width: 14px;
    height: 0;
    border-bottom: 2px solid #1a3c70;
    border-right: 2px solid #1a3c70;
    transform: rotate(-35deg);
}

/* —— カレンダーアイコン（最終視聴日） —— */
.ytlms-summary-box p:nth-of-type(3)::before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 14px;
    border: 2px solid #1a3c70;
    border-radius: 2px;
    top: 2px;
}
.ytlms-summary-box p:nth-of-type(3)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 2px;
    background: #1a3c70;
}

/* —— チェックマーク（完了動画数） —— */
.ytlms-summary-box p:nth-of-type(4)::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 5px;
    height: 10px;
    border-right: 3px solid #1a3c70;
    border-bottom: 3px solid #1a3c70;
    transform: rotate(45deg);
}

/* --------------------------------------------
   カード部分（変更必要分のみ）
-------------------------------------------- */
.ytlms-card {
    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    gap: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* タイトル */
.ytlms-card-title a {
    font-size: 18px;
    font-weight: 600;
    color: #1a3c70;
    text-decoration: none;
}

/* 日付 */
.ytlms-date {
    font-size: 14px;
    color: #6b7a8f;
    margin: 4px 0 12px;
}

/* 再生ボタン */
.ytlms-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #2e6bb3;
    color: #fff !important;
    font-size: 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

/* 再生アイコン（三角形） */
.ytlms-play-btn::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #fff;
}

/* ============================================
   動画教材ページ（lesson-container 直指定）
   ============================================ */

/* --- 全体コンテナ ---------------------------- */
.lesson-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 0 60px;
    text-align: center;
    font-size: 16px;
}

/* --- h2 タイトル ----------------------------- */
.lesson-container .lesson-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a3c70;
    margin: 20px 0 30px;
    padding-bottom: 8px;
    border-bottom: 3px solid #1a3c70;
}

/* --- プレイヤー（親枠のみデザイン） --------- */
/* iframe の inline-style は変更しない */
/* プレイヤー枠の余白調整 */
.lesson-container #lessonPlayerBox {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
    background: #000;
}

/* 戻るボタンの位置を LMS に寄せる */
.lesson-container .lesson-back {
    margin-top: 20px;
    text-align: left;
}

.lesson-container .back-button {
    margin-left: 0;
}

.lesson-container .back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #2e6bb3;
    color: #fff !important;
    font-size: 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

/* 左向き矢印アイコン（統一デザイン） */
.lesson-container .back-button::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 9px solid #fff;
}

/* hover */
.lesson-container .back-button:hover {
    background: #224f87;
}

/* 動画タイトル */
.lesson-container .lesson-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #1a3c70;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 6px;
    border-bottom: 1px solid #d8e2ef;
}


/* --------------------------------------------
   スマホ対応
-------------------------------------------- */
@media (max-width: 600px) {
	.lesson-container {
        padding: 15px 0 40px;
    }

    .lesson-container .lesson-title {
        font-size: 20px;
    }

    .lesson-container #lessonPlayerBox {
        border-radius: 8px;
    }
	.ytlms-card {
        flex-direction: column;
        text-align: center;
    }
}



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

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

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