/* Styleの削除 */
.article h1,
.article h2,
.article h3,
.article table,
.article tr,
.article th,
.article td {
    background-color: transparent; /* initial は transparent に包含されるため削除 */
    border: none;
}

:root {
    --chii-border-style: 1px solid #ccc;
    --chii-border-hr-style: 1px dashed #5E4240;
    --chii-border-background: #f0f0f0;
    --chii-base-font-color: #5E4240;
    --chii-table-border: 1px solid #ccc;
}


.article h1 {
    /* 位置/レイアウト系 */
    padding: 0.5em; /* 上下左右の余白 */
    margin: 0 5px 10px 5px;

    /* ボーダー/背景系 */
    background: #DEEBF7; /* 背景色 */
    box-shadow: 0px 0px 0px 5px #DEEBF7;
    border: dashed 3px white;
}

.article h2 {
    /* 位置/レイアウト系 */
    display: flex;
    align-items: flex-end; /* テキストを下寄せにしてボーダーに近づける */
    line-height: 1; /* テキスト行の高さを詰める */
    min-height: 80px;
    padding: 8px 0 5px 60px;
    margin: 0 0 25px 0;

    /* ボーダー/背景系 */
    background-position: left bottom;
    background-repeat: no-repeat;
    background-color: initial; /* 冗長な定義を削除 */
    border-bottom: 3px solid var(--chii-base-font-color);

    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
    font-size: 1.25rem;
    font-weight: bold;
}

.article h2.chii-h2-0 {
    background-image: url('https://game.dqmsl.net/wp-content/uploads/chii/style/h2-chiikawa.webp');
}

.article h2.chii-h2-1 {
    background-image: url('https://game.dqmsl.net/wp-content/uploads/chii/style/h2-hachiware.webp');
}

.article h2.chii-h2-2 {
    background-image: url('https://game.dqmsl.net/wp-content/uploads/chii/style/h2-usagi.webp');
}

.article h2.chii-h2-3 {
    background-image: url('https://game.dqmsl.net/wp-content/uploads/chii/style/h2-kuri-manju.webp');
}

.article h2.chii-h2-4 {
    background-image: url('https://game.dqmsl.net/wp-content/uploads/chii/style/h2-momonga.webp');
}

.article h2.chii-h2-5 {
    background-image: url('https://game.dqmsl.net/wp-content/uploads/chii/style/h2-rakko.webp');
}

.article h2.chii-h2-6 {
    background-image: url('https://game.dqmsl.net/wp-content/uploads/chii/style/h2-shisa.webp');
}

/* ========================================= */
/* 1. H3 ボックスのデザイン (H3自体に適用) */
/* ========================================= */
.article h3 {
    /* 位置/レイアウト系 */
    line-height: 1.5;
    margin: 2em 0 0.5em 0; /* 上の余白を大きく、下を小さく */
    padding: 8px 15px;

    /* ボーダー/背景系 */
    background-color: #e6f0ff; /* ベースとなる薄い青色 */
    /* 背景の青い格子柄風（画像再現） */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2), 
        rgba(255, 255, 255, 0.2) 10px,
        transparent 10px,
        transparent 20px
    );

    /* タイポグラフィ系 */
    color: #333333;
    font-size: 1.05em; 
    font-weight: bold;
}

/* ========================================= */
/* 2. H3の直後に続く解説テキストの調整 (.article h3 + p) */
/* ========================================= */
.article h3 + p {
    /* 位置/レイアウト系 */
    line-height: 1.7;
    margin-top: 0; 
    margin-bottom: 2em; 
    padding: 0 15px; /* H3と左右の開始位置を合わせるためのパディング */
}

/* ========================================= */
/* 3. H3の直後に続く他の要素（リストなど）への考慮 */
/* H3の後にul/ol要素が続く場合もマージンを詰める（操作手順でよくあるパターン） */
/* ========================================= */
.article h3 + ul,
.article h3 + ol,
.article h3 + dl {
    margin-top: 0;
    margin-bottom: 2em;
}


.chii-eval-item {
    /* タイポグラフィ系 */
    text-shadow: 1px 1px 2px #000;
    font-size: 1.5rem;
    font-weight: bold;
}


/* H3の既存スタイル上書きとサマリーボックス用の再定義 */
/* ======== サマリーボックス - HTML構造: aside.summary-box > h3 + ul > li ======== */

/* サマリーボックス全体 (asideタグ) */
.summary-box {
    /* 位置/レイアウト系 */
    margin: 20px 0;
    overflow: hidden;

    /* ボーダー/背景系 */
    background-color: #fff;
    border: 2px solid #a9d4e5;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ボックスのヘッダー（タイトル H3）部分 */
.summary-box h3 {
    /* 位置/レイアウト系 */
    margin: 0; 
    padding: 12px 15px; 

    /* ボーダー/背景系 */
    background-color: #e0f2f7; /* 個別で設定したい背景色 */
    background-image: none !important; /* 全体設定のスタイルを上書きリセット */
    border-bottom: 2px solid #a9d4e5;

    /* タイポグラフィ系 */
    color: #005668; 
    font-size: 1.2em;
    font-weight: bold;
}

/* リストの親要素 (ul) */
.summary-box ul {
    /* 位置/レイアウト系 */
    display: flex; 
    flex-direction: column; 
    margin: 0 !important; /* H3+ul のマージン上書き */
    padding: 15px 15px 5px 15px; 

    /* タイポグラフィ系 */
    list-style: none; /* リストスタイルを削除 */
}

/* リストアイテム (li) の設定 - マージンを増やして独立性を確保 */
.summary-box ul li {
    /* 位置/レイアウト系 */
    position: relative;
    line-height: 1.8; /* 行の高さを広げ、文章の詰まりを解消 */
    margin: 10px 0; 
    padding: 0 0 10px 0; /* padding-left: 0; は初期値なので削除 */

    /* ボーダー/背景系 */
    border-bottom: 2px dashed #a9d4e5; /* 点線の色を濃くして目立たせる */
}

/* 最後のli要素の線とマージンを削除 */
.summary-box ul li:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 内容内の強調文字 (strong) - さらに視覚的に目立たせる */
.summary-box ul li strong {
    /* 位置/レイアウト系 */
    padding: 2px 4px;
    
    /* ボーダー/背景系 */
    background-color: #fff0f0; 
    border-radius: 3px;
    
    /* タイポグラフィ系 */
    color: #cc4400; 
    font-weight: bold; 
}

/* ======== Q&A - HTML構造: section.qa-section > h2 + dl > dt + dd ======== */

/* Q&Aセクションの枠線と背景 */
.qa-section {
    /* 位置/レイアウト系 */
    margin: 20px 0 15px 0;
    padding: 15px;
    
    /* ボーダー/背景系 */
    background-color: #f7fbfc; 
    border: 2px solid #a9d4e5; 
    border-radius: 6px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* Q&Aセクションのタイトル (H2) - 外部の.article h2設定を強力に上書き */
.qa-section h2 {
    /* 位置/レイアウト系 (外部の.article h2の影響をリセット) */
    display: block; 
    min-height: auto; 
    align-items: center; /* flex解除のため */
    margin: 0 0 15px 0;
    padding: 0 0 5px 0;

    /* ボーダー/背景系 */
    background-image: none;
    background-color: transparent; 
    border-bottom: 2px dashed #a9d4e5; 

    /* タイポグラフィ系 */
    color: #005668;
    font-size: 1.3em;
    font-weight: bold;
}

/* 質問リスト全体 (dl) */
.qa-section dl {
    /* 位置/レイアウト系 */
    margin: 0;
    padding: 0;
}

/* 質問（dt）部分の装飾 */
.qa-section dt {
    /* 位置/レイアウト系 */
    position: relative; 
    margin: 15px 0 5px 0; 
    padding: 10px 15px 10px 40px; 
    
    /* ボーダー/背景系 */
    background-color: #e0f2f7; 
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    /* タイポグラフィ系 */
    color: #005668; 
    font-weight: bold;
}

/* 質問（dt）にQマークを付ける */
.qa-section dt::before {
    /* 位置/レイアウト系 */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    
    /* タイポグラフィ系 */
    content: "▶️"; 
    color: #005668; 
    font-size: 0.9em; 
    font-weight: bold;
}

/* 回答（A. dd）部分の装飾 */
.qa-section dd {
    /* 位置/レイアウト系 */
    position: relative;
    line-height: 1.7;
    margin: 0 0 15px 0; 
    padding: 10px 15px 10px 40px; 
    
    /* ボーダー/背景系 */
    background-color: #fff; 
    border-left: 3px solid #a9d4e5; 

    /* タイポグラフィ系 */
    color: #333; 
}

/* 回答（dd）にAマークを付ける */
.qa-section dd::before {
    /* 位置/レイアウト系 */
    position: absolute;
    left: 15px;
    top: 10px;
    
    /* タイポグラフィ系 */
    content: "■"; 
    color: #a9d4e5; 
    font-size: 0.8em; 
    font-weight: bold;
}

/* 最初のdtと最後のddの調整 */
.qa-section dt:first-of-type {
    margin-top: 0; 
}
.qa-section dd:last-of-type {
    margin-bottom: 0; 
}
/* 回答内の強調文字 (strong) */
.qa-section dd strong {
    /* タイポグラフィ系 */
    color: #cc4400; 
    font-weight: bold; 
}



.chii-base-info-container {
    /* 位置/レイアウト系 */
    display: grid;
    align-items: start;
    gap: 5px;
    padding: 0;
}

.chii-base-info {
    /* 位置/レイアウト系 */
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;
    
    /* ボーダー/背景系 */
    border: var(--chii-border-style);

    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}

.chii-base-info dt {
    /* 位置/レイアウト系 */
    display: flex;
    align-items: center;
    padding: 5px 5px;
    
    /* ボーダー/背景系 */
    border-right: var(--chii-border-style);
    border-bottom: var(--chii-border-style);
    background-color: var(--chii-border-background);
    
    /* タイポグラフィ系 */
    font-weight: bold;
}

.chii-base-info dd {
    /* 位置/レイアウト系 */
    display: block;
    align-items: center;
    margin-left: 0;
    padding: 5px 5px;

    /* ボーダー/背景系 */
    border-bottom: var(--chii-border-style);
}

.chii-base-info:last-child {
    /* border-bottom: none; は .chii-base-info dt,dd の個別の border-bottom のため無効。 */
}

.chii-base-info-supplement {
    /* 位置/レイアウト系 */
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;

    /* ボーダー/背景系 */
    border: var(--chii-border-style);
    
    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}

.chii-base-info-supplement dt {
    /* 位置/レイアウト系 */
    display: flex;
    align-items: center;
    padding: 5px 5px;
    
    /* ボーダー/背景系 */
    border-right: var(--chii-border-style);
    border-bottom: var(--chii-border-style);
    background-color: var(--chii-border-background);

    /* タイポグラフィ系 */
    font-weight: bold;
}

.chii-base-info-supplement dd {
    /* 位置/レイアウト系 */
    align-items: center;
    margin-left: 0;
    padding: 5px 5px;

    /* ボーダー/背景系 */
    border-bottom: var(--chii-border-style);
}

.chii-base-info-supplement:last-child {
    /* border-bottom: none; は .chii-base-info-supplement dt,dd の個別の border-bottom のため無効。 */
}

.chii-base-info-supplement hr {
    /* 位置/レイアウト系 */
    margin: 5px 1% 5px 1%; /* width: 98% に合わせて左右 1% のマージン */
    width: 98%;

    /* ボーダー/背景系 */
    border: none;
    border-top: var(--chii-border-hr-style);
}


.chii-item-span-style {
    /* 位置/レイアウト系 */
    margin-right: 5px;

    /* ボーダー/背景系 */
    background-color: #20b2aa;
    border-radius: 5px;

    /* タイポグラフィ系 */
    color: #fff;
}
.chii-item-span-sup-style {
    /* 位置/レイアウト系 */
    margin-right: 5px;

    /* ボーダー/背景系 */
    background-color: #2b95ff;
    border-radius: 5px;

    /* タイポグラフィ系 */
    color: #fff;
}


.chii-item-span-nowrap-style {
    /* タイポグラフィ系 */
    white-space: nowrap;
}

.chii-possession-bonus {
    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}

table.chii-possession-bonus {
    /* 位置/レイアウト系 */
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    
    /* ボーダー/背景系 */
    border-bottom: var(--chii-border-style);
}

tbody tr:hover {
    background-color: #ddd;
}

th.chii-possession-bonus-lv {
    /* 位置/レイアウト系 */
    width: 80px;

    /* ボーダー/背景系 */
    border-top: var(--chii-border-style);
    border-left: var(--chii-border-style);
    background-color: var(--chii-border-background);
}

th.chii-possession-bonus-data {
    /* ボーダー/背景系 */
    border-top: var(--chii-border-style);
    border-left: var(--chii-border-style);
    border-right: var(--chii-border-style);
    background-color: var(--chii-border-background);
}

td.chii-possession-bonus-lv {
    /* 位置/レイアウト系 */
    padding: 3px;

    /* ボーダー/背景系 */
    border-top: var(--chii-border-style);
    border-left: var(--chii-border-style);
}

td.chii-possession-bonus-icon {
    /* 位置/レイアウト系 */
    padding: 3px;
    text-align: center;

    /* ボーダー/背景系 */
    border-top: var(--chii-border-style);
    border-left: var(--chii-border-style);
}

/* td.chii-possession-bonus-lv img {} */
/* .chii-possession-bonus-icon img {} */

td.chii-possession-bonus-data {
    /* 位置/レイアウト系 */
    padding: 3px;

    /* ボーダー/背景系 */
    border-top: var(--chii-border-style);
    border-right: var(--chii-border-style);
}

.chii-possession-bonus-data hr {
    /* 位置/レイアウト系 */
    margin: 5px 1% 5px 1%;
    width: 98%;

    /* ボーダー/背景系 */
    border: none;
    border-top: var(--chii-border-hr-style);
}


/* 評価 */
.chii-eval-container {
    /* 位置/レイアウト系 */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
}

.chii-eval-container dl {
    /* 位置/レイアウト系 */
    margin: 0;
    padding: 0;

    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}

.chii-eval-container dt,
.chii-eval-container dt.l { /* .l は冗長だが元の定義に従い残す */
    /* 位置/レイアウト系 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 5px 5px;
    
    /* ボーダー/背景系 */
    border-top: var(--chii-table-border);
    border-left: var(--chii-table-border);
    border-bottom: var(--chii-table-border);
    background-color: var(--chii-border-background);

    /* タイポグラフィ系 */
    font-weight: bold;
}

.chii-eval-container dd {
    /* 位置/レイアウト系 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-left: 0; /* 冗長だが念のため残す */
    padding: 5px 5px;
    
    /* ボーダー/背景系 */
    border-left: var(--chii-table-border);
    border-bottom: var(--chii-table-border);
}


.chii-style-right-end {
    /* ボーダー/背景系 */
    border-right: var(--chii-table-border);
}

/* ランキング用 */

.chii-rank-bold {
    /* タイポグラフィ系 */
    font-size: 1.5rem;
    font-weight: bold;
}

.chii-rank-span {
    /* タイポグラフィ系 */
    font-size: 1rem;
}

/* ▼ 関連リンク */
.chii-related-container {
    /* 位置/レイアウト系 */
    display: flex;
    align-items: flex-start;
    padding: 5px;
    overflow-x: auto;
    
    /* ボーダー/背景系 */
    border: var(--chii-border-style);
}

.chii-cos-list-container {
    /* 位置/レイアウト系 */
    display: grid;
    grid-auto-flow: row;
    margin-bottom: 5px;
}

.chii-cos-list-header {
    /* 位置/レイアウト系 */
    margin-top: 3px;
    padding: 5px;
    
    /* ボーダー/背景系 */
    border: var(--chii-table-border);
    background-color: var(--chii-border-background);

    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}

.chii-cos-list-data {
    /* 位置/レイアウト系 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 2px;
}

.chii-link-icon-style {
    /* 位置/レイアウト系 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    margin-right: 5px;
    line-height: 1.2;
    
    /* ボーダー/背景系 */
    border: var(--chii-border-style);

    /* タイポグラフィ系 */
    text-align: center;
    font-size: 0.75rem;
}

.chii-link-icon-style img {
    /* 位置/レイアウト系 */
    width: 100%;
    object-fit: contain;
    margin-bottom: 5px;
}

.chii-link-icon-style a {
    /* 位置/レイアウト系 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 2px;
    box-sizing: border-box;

    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
    text-decoration: none;
}

.chii-link-icon-style a:hover {
    /* ボーダー/背景系 */
    background: #ffdab9;

    /* その他 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.chii-supplement {
    /* 位置/レイアウト系 */
    margin: 0;

    /* タイポグラフィ系 */
    font-size: 0.8rem;
}


/* 基本的なCSS */
.chii-base-table {
    /* 位置/レイアウト系 */
    width: 100%;
    border-collapse: collapse;
}

.chii-base-table th,
.chii-base-table td {
    /* ボーダー/背景系 */
    border: var(--chii-border-style);

    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
    font-size: 0.9rem;
}

.chii-base-table th {
    background-color: var(--chii-border-background);
}

.chii-base-table td {
    background-color: #fff;
}


.chii-top-info-table {
    /* 位置/レイアウト系 */
    width: 99%;
    margin: 0 auto;
    border-collapse: collapse;
}

.chii-top-info-table img {
    border: 0;
}


.chii-top-info-table th,
.chii-top-info-table td {
    /* 位置/レイアウト系 */
    padding: 3px;
    
    /* ボーダー/背景系 */
    border: var(--chii-border-style);
}

.chii-top-info-table th {
    background-color: var(--chii-border-background);
}

.chii-top-info-table td {
    /* 位置/レイアウト系 */
    width: 33%;
    
    /* ボーダー/背景系 */
    background-color: #fff;
}

.chii-top-info-table a {
    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}

.chii-top-info-table-x {
    /* 位置/レイアウト系 */
    max-height: 40px;
}

/* ----------------------------------------------------*/
/* ちいぽけイベントカレンダー                             */
/* ----------------------------------------------------*/
.calendar {
    /* 位置/レイアウト系 */
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

.calendar th,
.calendar td {
    /* 位置/レイアウト系 */
    padding: 3px 4px;
    
    /* ボーダー/背景系 */
    border: 1px solid #ccc;

    /* タイポグラフィ系 */
    color: #555555;
    white-space: normal;
}


.calendar a {
    /* タイポグラフィ系 */
    color: #555555;
}

.calendar caption {
    /* タイポグラフィ系 */
    color: #555555;
    font-weight: bold;
}

.calendar th {
    /* ボーダー/背景系 */
    background-color: #edf4fc;
    
    /* タイポグラフィ系 */
    font-weight: normal;
}

th.sunday {
    /* タイポグラフィ系 */
    color: #dc4e4e;
}

th.saturday {
    /* タイポグラフィ系 */
    color: #2b80d5;
}

.bar {
    /* 位置/レイアウト系 */
    height: 20px;
    padding: 2px 4px;
    
    /* ボーダー/背景系 */
    background-color: #0080ff;
    border-radius: 4px;
    
    /* タイポグラフィ系 */
    color: #fff;
    font-size: 0.9rem;
}

.ending-soon-box {
    /* 位置/レイアウト系 */
    margin-top: 1em;
    padding-left: 0.5em;
    
    /* ボーダー/背景系 */
    background-color: #fff4f0;
    border: 1px solid #faa;
    border-radius: 5px;
}

.ending-soon-box ul {
    /* 位置/レイアウト系 */
    margin: 0;
    padding-left: 1.2em;
}

.ending-soon-box p {
    margin: 0;
}

.ending-soon-box li {
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------*/
/* ちいぽけレベルアップボーナス                             */
/* ----------------------------------------------------*/
.chii-lv-bonus-list-wrapper {
    /* 位置/レイアウト系 */
    height: 500px;
    overflow-y: auto;
}

.chii-lv-bonus-list {
    /* 位置/レイアウト系 */
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

.chii-lv-bonus-list th {
    /* 位置/レイアウト系 */
    position: sticky;
    top: 0;
    z-index: 1; 

    /* ボーダー/背景系 */
    background-color: #fff;
    background-color: var(--chii-border-background); /* 上書き */
}

.chii-lv-bonus-list th,
.chii-lv-bonus-list td {
    /* ボーダー/背景系 */
    border: 1px solid #ccc;
    
    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}
.chii-lv-bonus-list a {
    /* 位置/レイアウト系 */
    display: block;
    
    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
    text-decoration: none;;
}
img.chii-bonus-list-header-img {
    /* 位置/レイアウト系 */
    width: 40px;
}

img.chii-bonus-list-chara-img {
    /* 位置/レイアウト系 */
    width: 40px;
}

td.chii-bonus-list-header-data {
    /* タイポグラフィ系 */
    text-align: center;
}



.chii-point-wrap {
    /* 位置/レイアウト系 */
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    
    /* ボーダー/背景系 */
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.chii-point-wrap .chii-point-title {
    /* 位置/レイアウト系 */
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    line-height: 1;
    padding: 0 9px;
    
    /* ボーダー/背景系 */
    background: #FFF;
    
    /* タイポグラフィ系 */
    color: #95ccff;
    font-size: 19px;
    font-weight: bold;
}
.chii-point-wrap p {
    margin: 0; 
    padding: 0;
}

.chii-info-wrap {
    /* 位置/レイアウト系 */
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    
    /* ボーダー/背景系 */
    border: solid 3px #ff8000;
}
.chii-info-wrap .chii-info-title {
    /* 位置/レイアウト系 */
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    height: 25px;
    line-height: 25px;
    padding: 0 9px;
    
    /* ボーダー/背景系 */
    background: #ff8000;
    border-radius: 5px 5px 0 0;
    
    /* タイポグラフィ系 */
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
}
.chii-info-wrap p {
    margin: 0; 
    padding: 0;
}

/* 占い */
div.chii-fortune-telling-container {
    /* 位置/レイアウト系 */
    padding: 10px;
    
    /* ボーダー/背景系 */
    border: 2px solid rgb(78, 197, 245);
    border-radius: 20px;
}

div.chii-fortune-telling-container p {
    /* タイポグラフィ系 */
    color: var(--chii-base-font-color);
}

div.chii-fortune-telling-container hr {
    /* ボーダー/背景系 */
    border: none;
    border-top: 3px dotted rgb(78, 197, 245);
}

table.chii-fortune-telling td {
    /* 位置/レイアウト系 */
    vertical-align: top;
}

img.chii-fortune-telling {
    /* 位置/レイアウト系 */
    width: 120px;
}

img.chii-fortune-telling-happy {
    /* 位置/レイアウト系 */
    width: 180px;
}





.article figcaption{ 
    text-align: center;
}


/* 画面幅が指定値以下の場合に適用 */
@media screen and (max-width: 767px) {

.article p {
font-size: 16px;
line-height: 1.8;
  max-width: 760px;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  margin-left:auto ;
  margin-right:auto ;
}


/* --- 画像 --- */
.article img {
max-width: 95%; /* 親要素の幅の95%に設定 */
  height: auto;   /* 縦横比を維持 */
  display: block; /* 中央寄せなどのためにブロック要素化 */
  margin: 0 auto;
}


    /* スマホ向けのCSSルール */
    .chii-base-info dt,
    .chii-base-info dd,
    .chii-base-info-supplement dt,
    .chii-base-info-supplement dd,
    .chii-eval-container dt,
    .chii-eval-container dd,
    th.chii-possession-bonus-lv,
    td.chii-possession-bonus-lv,
    th.chii-possession-bonus-data,
    td.chii-possession-bonus-data {
        /* タイポグラフィ系 */
        font-size: 0.8rem;
    }

    .chii-item-span-style {
        /* 位置/レイアウト系 */
        padding: 0px 3px 2px 2px;
    }

    .chii-base-info-container {
        /* 位置/レイアウト系 */
        grid-template-columns: minmax(85px, auto) 1fr;
    }

    img.chii-base-info-img {
        /* 位置/レイアウト系 */
        width: 85px !important;
    }

    th.chii-possession-bonus-lv {
        /* 位置/レイアウト系 */
        width: 50px;
    }

    td.chii-possession-bonus-lv {
        /* 位置/レイアウト系 */
        width: 50px;
    }

    td.chii-possession-bonus-lv img {
        /* 位置/レイアウト系 */
        width: 43px;
    }

    td.chii-possession-bonus-icon {
        /* 位置/レイアウト系 */
        width: 50px;
    }

    .chii-possession-bonus-icon img {
        /* 位置/レイアウト系 */
        width: 45px;
    }

    .chii-link-icon-style {
        /* タイポグラフィ系 */
        font-size: 0.6rem;
    }

    .chii-cos-list-data {
        /* 位置/レイアウト系 */
        grid-template-columns: repeat(4, 1fr);
    }
}


/* 画面幅が指定値以上の場合に適用 */
@media screen and (min-width: 768px) {


.article p {
  font-size: 17px;
  line-height: 1.7;
  padding: 0 16px;
  margin-top: 1.0em;
  margin-bottom: 1.2em;
  margin-left:auto ;
  margin-right:auto ;
}

/* --- 画像 --- */
.article img {
max-width: 95%; /* 親要素の幅の95%に設定 */
  height: auto;   /* 縦横比を維持 */
  display: block; /* 中央寄せなどのためにブロック要素化 */
  margin: 0 auto;
}


    img.chii-base-info-img {
        /* 位置/レイアウト系 */
        width: 90px !important;
    }

    /* PC向けのCSSルール */
    .chii-base-info dt,
    .chii-base-info dd,
    .chii-base-info-supplement dt,
    .chii-base-info-supplement dd,
    .chii-eval-container dt,
    .chii-eval-container dd,
    th.chii-possession-bonus-lv,
    td.chii-possession-bonus-lv,
    th.chii-possession-bonus-data,
    td.chii-possession-bonus-data {
        /* タイポグラフィ系 */
        font-size: 1rem;
    }

    .chii-base-info-container {
        /* 位置/レイアウト系 */
        grid-template-columns: minmax(210px, auto) 1fr;
    }

    img.chii-base-info-img {
        /* 位置/レイアウト系 */
        width: 205px !important;
    }

    .chii-item-span-style {
        /* 位置/レイアウト系 */
        padding: 0px 3px 1px 2px;
    }

    th.chii-possession-bonus-lv {
        /* 位置/レイアウト系 */
        width: 80px;
    }

    td.chii-possession-bonus-lv {
        /* 位置/レイアウト系 */
        width: 80px;
    }

    td.chii-possession-bonus-lv img {
        /* 位置/レイアウト系 */
        width: 58px;
    }

    td.chii-possession-bonus-icon {
        /* 位置/レイアウト系 */
        width: 80px;
    }

    .chii-possession-bonus-icon img {
        /* 位置/レイアウト系 */
        width: 60px;
    }

    .chii-link-icon-style {
        /* タイポグラフィ系 */
        font-size: 0.75rem;
    }

    .chii-cos-list-data {
        /* 位置/レイアウト系 */
        grid-template-columns: repeat(7, 1fr);
    }

}

@media screen and (min-width: 1024px) {

    .chii-cos-list-data {
        /* 位置/レイアウト系 */
        grid-template-columns: repeat(7, 1fr);
    }

}