@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================
   SWELL用 カスタムスタイル（機能パーツのみ）
   ========================================= */
/* --- 会話アイコン（吹き出し） --- */
/* SWELL標準の吹き出しブロックを使わず、HTML貼り付けだけで再現するためのスタイルです */
.speech-bubble {
    display: flex;
    gap: 15px;
    margin: 2rem 0;
    align-items: flex-start;
}
.speech-bubble.teacher {
    flex-direction: row;
}
.speech-bubble.student {
    flex-direction: row-reverse;
}
/* アイコン画像エリア */
.speech-bubble .icon-area {
    flex-shrink: 0;
    text-align: center;
    width: 70px;
}
.speech-bubble .icon-img {
    width: 60px;
    height: 60px;
    margin: 0 auto 5px;
    position: relative;
    border-radius: 50%; /* 画像自体も丸く */
     overflow: hidden;
}
.speech-bubble .icon-img img {
    border-radius: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
.speech-bubble.teacher .icon-img {
    border: 2px solid #2c5282; /* 先生の枠線 */
}
.speech-bubble.student .icon-img {
    border: 2px solid #d69e2e; /* 生徒の枠線 */
}
.speech-bubble .name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #2d3748;
    margin-top: 5px;
}
/* 吹き出しの中身 */
.speech-bubble .bubble-content {
    border-radius: 12px;
    padding: 15px;
    position: relative;
    flex: 1;
    max-width: 80%;
    color: #333;
    font-size: 1rem;
    line-height: 1.7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* SWELLっぽく少し影をつける */
}
.speech-bubble.teacher .bubble-content {
    background-color: #f0f4f8;
    border: 2px solid #2c5282;
}
/* 吹き出しのしっぽ（先生） */
.speech-bubble.teacher .bubble-content::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -12px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #2c5282;
}
.speech-bubble.teacher .bubble-content::after {
    content: "";
    position: absolute;
    top: 22px;
    left: -9px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid #f0f4f8;
}
.speech-bubble.student .bubble-content {
    background-color: #fff4e6;
    border: 2px solid #d69e2e;
}
/* 吹き出しのしっぽ（生徒） */
.speech-bubble.student .bubble-content::before {
    content: "";
    position: absolute;
    top: 20px;
    right: -12px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid #d69e2e;
}
.speech-bubble.student .bubble-content::after {
    content: "";
    position: absolute;
    top: 22px;
    right: -9px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #fff4e6;
}
/* --- 共通CTAウィジェット --- */
.common-cta {
    margin: 4rem 0;
    padding: 30px;
    background-color: #2c5282;
    border: 2px solid #d69e2e;
    border-radius: 8px;
    text-align: center;
    color: #fff;
}
.common-cta h3 {
    color: #d69e2e !important; /* SWELLのH3スタイルを上書き */
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: bold;
    border: none !important; /* SWELLのボーダーを消す */
    background: none !important;
}
.common-cta p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: #fff;
}
.common-cta .cta-btn {
    display: inline-block;
    background-color: #d69e2e;
    color: #2c5282;
    text-decoration: none;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    transition: transform 0.2s;
}
.common-cta .cta-btn:hover {
    transform: translateY(-2px);
    background-color: #ecc94b;
    opacity: 1 !important; /* SWELLのホバー透過を防ぐ */
}
.common-cta .note {
    font-size: 0.8rem;
    margin-top: 10px;
    opacity: 0.8;
}
/* --- 装飾ボックス --- */
.styled-box {
    padding: 2.5em 1.5em 1.5em; /* 上の余白を多めに（ラベル用） */
    border-radius: 8px;
    margin: 2rem 0;
    position: relative;
    border: 1px solid #ccc;
    background-color: #fff;
}
/* リード文 */
.styled-box.lead {
    background-color: #f7fafc;
    border: 2px solid #2c5282;
    padding: 2em;
}
/* まとめ */
.styled-box.summary {
    background-color: #fffaf0;
    border: 2px solid #d69e2e;
}
.styled-box.summary::before {
    content: "まとめ";
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #d69e2e;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
}
/* チャート注釈 */
.styled-box.chart-note {
    background-color: #f9f9f9;
    border: 1px dashed #aaa;
    margin-top: 1rem;
    padding: 15px;
    font-size: 0.9rem;
}
/* テキスト強調（マーカー） */
.text-highlight {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(transparent 60%, rgba(214, 158, 46, 0.3) 60%);
    padding-bottom: 0.2rem;
    display: inline;
}

/* ====================================
   金融メディア化カスタムCSS
   ==================================== */
/* --- 全体の基本設定 --- */
/* 1. 角丸を削除してシャープに */
:root {
    --btn_radius: 0px !important; /* ボタンの角丸なし */
    --post_radius: 0px !important; /* コンテンツの角丸なし */
}
#main_visual, .c-iconList__box, .p-pickupBanner__item, .p-articleList .p-articleThumb {
    border-radius: 0 !important;
}
/* 2. フォントの調整（游ゴシック等の明瞭なフォント優先） */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    letter-spacing: 0.05em; /* 文字間を少し広げて読みやすく */
}
/* --- ヘッダーエリア --- */
/* 3. ヘッダーをグラデーションにして重厚感を出す */
.l-header {
    background: linear-gradient(135deg, #0f2350 0%, #0a1735 100%) !important;
    border-bottom: 3px solid #c5a059; /* 下部にアクセントカラーのライン */
}
/* ヘッダーの文字色を白に強制 */
.l-header .c-gnav > li > a, .l-header__logo a {
    color: #ffffff !important;
}
/* --- コンテンツエリア --- */
/* 4. 見出し（H2）のデザインを金融メディア風に */
/* SWELL設定を上書きします */
.post_content h2 {
    color: #0f2350 !important; /* 文字色をネイビーに強制（白文字化を防止） */
    border: none !important; /* 既存のボーダーを消す */
    background: transparent !important; /* 背景を消す */
    padding: 0.4em 0 0.4em 15px !important; /* 左に余白を空ける */
    border-bottom: 2px solid #c5a059 !important; /* 下にゴールドのライン */
    border-left: 6px solid #0f2350 !important; /* 左にネイビーの太いライン */
    position: relative;
    font-size: 1.6rem;
}
/* previous ::before pseudo-element is removed as we use border-left/bottom now for stability */
.post_content h2::before {
    content: none !important;
}
/* 5. 記事カード（リスト）の影を調整 */
.mode-card .p-postList__item {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; /* 影を薄く上品に */
    border: 1px solid #eeeeee; /* 薄い枠線を追加 */
}
/* 6. ボタンを光らせるエフェクト（アクセント） */
.c-btn.-shiny {
    background-color: #c5a059 !important;
    position: relative;
    overflow: hidden;
}