/* すべての要素の余白をゼロにし、フォントを適用する */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
}

body {
    background-color: #f5f5f5; /* パチノート風の薄いグレーの背景 */
    color: #333;
    line-height: 1.6;
}

.header-line {
    position: relative;
    width: 100%;            /* 画面幅いっぱい */
    background-color: #fff;
    display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    padding: 10px 0 20px 0;         /* ロゴ上下の余白（ロゴの大きさに合わせて調整） */
    
    /* 影 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* グラデーション線（KAI-YOU風） */
.header-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #9d00ff, #00d4ff);
}

.logo-container {
    line-height: 0; /* 画像の下にできる謎の隙間を消す */
}

.site-logo {
    /* ここでロゴの大きさを調整します */
    height: 35px;    /* スマホで見た時にちょうど良い高さ */
    width: auto;     /* アスペクト比を維持 */
    display: block;
}





/* --- コンテンツ全体の器 --- */
.container {
    width: 100%;
    max-width: 640px;     /* PCで見た時の「読みやすい」最大幅 */
    margin: 0 auto;       /* 左右中央寄せ */
    padding: 20px 0px;   /* スマホの時に画面端に隙間を作る */
}

/* --- 記事ボックス（KAI-YOU風） --- */
.content-card {
    background-color: #fff;

}

/* タグ（左上の紫のアクセント） */
.card-tag {
    display: inline-block;
    background: linear-gradient(to right, #9d00ff, #00d4ff);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    margin: 15px 0 0 15px;
}

/* 記事タイトル */
h2 {
    /* フォントの種類を指定 */
    font-family: 'Noto Sans JP', sans-serif;
    
    /* 読み込んだ 900 (Black) を指定 */
    font-weight: 900;
    
    /* さらにインパクトを出すための調整 */
    font-size: 32px;        /* 少し大きめに */
    letter-spacing: 0.02em;   /* わずかに字間を詰めると「塊感」が出て力強くなります */
    line-height: 1.3;
    text-align: center;
    color: #000;              /* 真っ黒にすることでパキッとさせます */
    margin-bottom: 15px;
}


.card-text {
    background-color: #f0f3f6;
    padding: 15px;
    font-size: 10px;
    margin: 15px;
}




/* 画像を包む箱の設定 */
.img-center-box {
    width: 100%;           /* 画面の端から端まで */
    display: flex;          /* 中身を自由に配置できるモードにする */
    justify-content: center; /* 中身（画像）を水平方向の真ん中に置く */
    padding: 0px 0;        /* 上下に少しだけ余白を作る */
    background-color: #fff; /* 背景は白 */
}

/* 画像本体の設定 */
.pure-img {
    width: 150px;             /* スマホで見た時の横幅。80%や90%などお好みで */
    max-width: 450px;       /* PCで見た時にバカでかくならないための制限 */
    height: auto;           /* 縦長の比率を崩さない */
    display: block;         /* 画像の下にできる数ピクセルの隙間を消す */
    
    /* 線（border）も影（box-shadow）も一切なし */
}





/* ボタン（スマホで押しやすいサイズ） */
.card-btn {
    display: block;
    text-align: center;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 12px;
    font-weight: bold;
    margin-top: 15px;
    transition: 0.2s;
}

/* PCでマウスを乗せた時の動き */
.card-btn:hover {
    background-color: #9d00ff;
}