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

/* 高配当投資ブログ専用スタイル */

/* カラー変数 */
:root {
    --dividend-main: #2E5266;
    --dividend-accent: #FF6B35;
    --dividend-sub: #4ECDC4;
    --dividend-bg: #F8F9FA;
}

/* ヘッダーカスタマイズ */
.l-header {
    box-shadow: 0 2px 10px rgba(46, 82, 102, 0.1);
}

/* メインビジュアル設定 */
.p-mainVisual {
    background: linear-gradient(135deg, #2E5266 0%, #4ECDC4 100%);
    padding: 80px 20px;
}

.p-mainVisual__title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    animation: fadeInUp 0.8s ease-out;
}

/* 株価カード */
.stock-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(46, 82, 102, 0.1);
    border-left: 4px solid var(--dividend-sub);
    transition: all 0.3s ease;
}

.stock-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(46, 82, 102, 0.15);
}

/* 配当利回り強調 */
.yield-value {
    color: var(--dividend-accent);
    font-size: 24px;
    font-weight: 700;
}

/* セクションタイトル装飾 */
.c-secTitle::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--dividend-accent);
    margin-top: 15px;
}

/* アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}