* {
    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);
}

.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 { background-color: #fff; width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 0px; }
.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-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; max-width: 450px; height: auto; display: block; }

.content-hanbetu { background-color: #fff; border: 2px solid #000; padding: 20px; margin: 20px 15px 20px 15px; box-shadow: 6px 6px 0px #000; position: relative; }

/* === ジャグチェッカー V2 デザイン設定 === */
.jc-v2-wrap .req-mark { color: #ff0044; margin-left: 4px; font-weight: 900; }
.jc-v2-wrap { max-width: 480px; margin: 0 auto; color: #000; background: #fff; }
.jc-v2-wrap .section-label { background: #000; color: #fff; font-size: 10px; font-weight: 900; padding: 2px 8px; display: inline-block; letter-spacing: 1px; margin-top: 10px; }
.jc-v2-wrap .data-card { border: 2px solid #000; padding: 8px 12px; margin-bottom: 12px; background: #fff; }
.jc-v2-wrap .jc-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f2f2f2; }
.jc-v2-wrap .jc-row:last-child { border-bottom: none; }
.jc-v2-wrap .info { display: flex; flex-direction: column; }
.jc-v2-wrap .main-label { font-size: 14px; font-weight: 900; }
.jc-v2-wrap input { width: 80px; padding: 8px 5px; border: 2px solid #000; font-size: 18px; font-weight: 900; text-align: center; outline: none; }
.jc-v2-wrap input:focus { background: #000; color: #fff; }

.jc-v2-wrap .btn-main { width: 100%; background: #000; color: #fff; border: none; padding: 18px; font-size: 18px; font-weight: 900; cursor: pointer; letter-spacing: 2px; margin: 15px 0; }
.jc-v2-wrap .btn-sub { width: 100%; background: #fff; color: #000; border: 2px solid #000; padding: 12px; font-size: 14px; font-weight: 900; cursor: pointer; margin-bottom: 15px; }
.jc-v2-wrap .btn-reset { background: none; border: none; color: #999; text-decoration: underline; padding: 10px; font-size: 12px; width: 100%; cursor: pointer; font-weight: 700; margin-top: 10px; }

/* ★ ポップアップ（モーダル）のスタイル */
.jc-v2-wrap .jc-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 15px;
}
.jc-v2-wrap .jc-modal-content {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    padding: 20px 15px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.jc-v2-wrap .jc-modal-close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 32px; font-weight: 400;
    color: #999;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}

/* ★ 信頼度の円形グラフ（単色パープル＋濃淡） */
.jc-v2-wrap .reliability-wrapper { display: flex; justify-content: center; margin: 0 0 5px 0; }
.jc-v2-wrap .circle-graph-container { position: relative; width: 115px; height: 115px; }
.jc-v2-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jc-v2-wrap .circle-bg { fill: none; stroke: #f2f2f2; stroke-width: 7; }
/* ↓ 色を #9d00ff に固定し、アニメーション設定を戻しました */
.jc-v2-wrap .circle-progress { fill: none; stroke: #9d00ff; stroke-width: 7; stroke-dasharray: 283; stroke-dashoffset: 283; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease; }
.jc-v2-wrap .circle-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.jc-v2-wrap .circle-pct { font-size: 28px; font-weight: 900; line-height: 1.1; letter-spacing: -1px;}
.jc-v2-wrap .pct-sign { font-size: 14px; margin-left: 2px; }
.jc-v2-wrap .circle-label { font-size: 11px; font-weight: 700; color: #666; margin-top: 2px; }

/* 総合推測バー（単色＋濃淡） */
.jc-v2-wrap .res-bar-row { margin-bottom: 8px; }
.jc-v2-wrap .res-top { margin-bottom: 3px; display: flex; justify-content: space-between; align-items: flex-end; }
.jc-v2-wrap .res-set { font-size: 13px; font-weight: 900; }
.jc-v2-wrap .res-pct { font-size: 14px; font-weight: 900; }
.jc-v2-wrap .bar-out { background: #eee; height: 8px; width: 100%; border-radius: 4px; overflow: hidden; }
.jc-v2-wrap .bar-in { background: #9d00ff; height: 100%; width: 0%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

/* 個別・台データ・一覧 */
.jc-v2-wrap .stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #ccc; font-weight: 700; font-size: 12px; align-items: center;}
.jc-v2-wrap .stat-row span:last-child { font-weight: 900; font-size: 14px; }

/* 項目別ミニバー（単色＋濃淡） */
.jc-v2-wrap .ind-box { margin-bottom: 10px; border-bottom: 1px dashed #ccc; padding-bottom: 8px; }
.jc-v2-wrap .ind-box:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.jc-v2-wrap .ind-title { font-weight: 900; font-size: 12px; margin-bottom: 5px; background: #eee; display: inline-block; padding: 2px 8px; border-radius: 4px; }
.jc-v2-wrap .mini-bar-row { display: flex; align-items: center; margin-bottom: 2px; font-size: 11px; font-weight: bold; }
.jc-v2-wrap .mini-set { width: 40px; }
.jc-v2-wrap .mini-bar-out { flex: 1; background: #f2f2f2; height: 6px; margin: 0 8px; border-radius: 3px; overflow: hidden; }
.jc-v2-wrap .mini-bar-in { background: #9d00ff; height: 100%; transition: width 0.8s ease-out; border-radius: 3px; }
.jc-v2-wrap .mini-pct { width: 40px; text-align: right; }


.jc-v2-wrap .sub-note { display: block; font-size: 10px; color: #888; margin-top: 2px;}