body {

    font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

    background:#f4f6f8;

    margin:0;

    padding:40px;

}



.container {

    max-width:750px;

    margin:auto;

    background:white;

    padding:35px;

    border-radius:15px;

    box-shadow:
    0 4px 15px rgba(0,0,0,0.1);

}



h1 {

    text-align:center;

    color:#1f3c88;

    font-size:42px;

    margin-bottom:5px;

}



/* 一番上の英語タイトル */

.container > h2{

    text-align:center;

    color:#555;

    font-size:24px;

    margin-top:0;

    margin-bottom:10px;

}


/* 判定カードの見出し */

.card h2{

    text-align:center;

    color:#333;

    font-size:20px;

    margin-top:0;

    margin-bottom:15px;

}



.description {

    text-align:center;

    margin-bottom:30px;

    font-size:16px;

}



hr {

    border:none;

    border-top:1px solid #ddd;

    margin:30px 0;

}



/* 項目 */

.item {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    border-bottom:1px solid #eee;

    font-size:18px;

}



.item input {

    transform:scale(1.3);

    margin-right:10px;

}



/* リスク結果カード */

.card {

    margin:30px 0;

    padding:25px;

    border-radius:15px;

    background:#f8f8f8;

    text-align:center;

}



/* 点数 */

#violenceScore,
#sexualScore {

    font-size:44px;

    font-weight:bold;

    color:#1f3c88;

    margin:20px;

}



/* 判定 */

#violenceRisk,
#sexualRisk {

    font-size:32px;

    font-weight:bold;

    padding:20px;

    border-radius:12px;

}



/* 判定色 */

.low {

    background:#d4edda;

    color:#155724;

}



.medium {

    background:#fff3cd;

    color:#856404;

}



.high {

    background:#f8d7da;

    color:#721c24;

}



/* 判定基準 */

.criteria h4 {

    margin-top:25px;

    font-size:20px;

    color:#333;

}



table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:20px;

    font-size:16px;

}



td {

    border:1px solid #ddd;

    padding:12px;

    text-align:center;

}



/* 注意事項 */

.notice h3 {

    margin-top:0;

}



/* ボタン */

button {

    margin-top:25px;

    width:100%;

    padding:15px;

    font-size:18px;

    border:none;

    border-radius:10px;

    background:#1f3c88;

    color:white;

    cursor:pointer;

}



button:hover {

    background:#16316f;

}



/* スマホ対応 */

@media(max-width:600px){


body {

    padding:15px;

}


.container {

    padding:20px;

}


h1 {

    font-size:34px;

}


#violenceScore,
#sexualScore {

    font-size:42px;

}


#violenceRisk,
#sexualRisk {

    font-size:26px;

}


}

/* 回答説明 */

.instruction {

    background:#f4f6f8;

    padding:20px;

    border-radius:10px;

    margin-bottom:30px;

    font-size:16px;

}


/* 項目カテゴリ */

.category-title {

    font-size:22px;

    font-weight:bold;

    padding:15px;

    margin-top:25px;

    border-radius:10px;

}



/* 身体的暴力 */

.physical-title {

    background:#FCE4D6;

    color:#9E480E;

}



/* 性的暴力 */

.sexual-title {

    background:#EADCF8;

    color:#5B2C83;

}


/* 項目カード */

.physical-item {

    background:#FFF3EC;

}



.sexual-item {

    background:#F7F0FC;

}

/* 項目10後の注意文の余白 */
.notice{

    background:#f8f8f8;

    padding:8px 20px;

    border-radius:10px;

    line-height:1.7;

    font-size:16px;

    margin-top:30px;

    margin-bottom:10px;

}

.badge{
    
    display:inline-block;
    
    flex:0 0 42px;
    
    min-width:38px;
    
    padding:4px 8px;
    
    border-radius:20px;
    
    color:white;
    
    font-weight:bold;
    
    font-size:16px;
    
    text-align:center;
    
    margin-right:12px;
}



.badge-violence{

    background:#E67E22;

}

.badge-sexual{

    background:#8E44AD;

}

.physical-guide{

    color:#E67E22;

    font-weight:bold;

    font-size:18px;

    margin-top:10px;

}

.sexual-guide{

    color:#8E44AD;

    font-weight:bold;

    font-size:18px;

}

#violenceComment,
#sexualComment{

    margin-top:20px;

    font-size:16px;

    line-height:1.8;

    color:#555;

    text-align:left;

}

.comment{

    text-align:left;

    margin-top:20px;

}

.comment-divider{

    border:none;

    border-top:1px solid #d9d9d9;

    margin:20px 0;

}

h3{

    font-size:22px;

    font-weight:bold;

    color:#333;

    margin-top:0;

    margin-bottom:15px;

}

.result-title{

    font-size:24px;

    font-weight:bold;

    color:#333;

    text-align:center;

    margin-bottom:20px;

}

.example{

    display:block;

    margin-top:8px;

    font-size:15px;

    color:#666;

    line-height:1.6;

    text-indent:-2em;

    padding-left:2em;

}

.item-label{

    display:flex;

    align-items:flex-start;

}

.check-area{

    width:48px;

    text-align:center;

    margin-right:12px;

}

.score-small{

    display:block;

    text-align:center;

    margin-top:4px;

    font-size:12px;

    color:#888;

}

.item-text{

    flex:1;

}

.item-title{

    display:inline-block;

    width:calc(100% - 60px);

    vertical-align:top;

}

.item-row{
    display:flex;
    align-items:flex-start;
    width:100%;
}


.item-content{
    flex:1;
    min-width:0;
    line-height:1.7;
}

.guide-badge{

    margin-right:0;

}

.footer{

    margin-top:25px;

    text-align:center;

    color:#888;

    font-size:13px;

    line-height:1.4;

}

.footer p{

    margin:4px 0;

}

.footer hr{

    margin-bottom:18px;

}

.logo{

    width:100px;

    display:block;

    margin:0 auto 20px auto;

}

.score-cell{

    background:#f3f4f6;

    font-weight:bold;

}
.reference{
    margin-top:30px;
    font-size:15px;
    line-height:1.8;
    color:#555;
}

.reference h3{
    margin-bottom:15px;
}

.citation{
    margin-top:15px;
    padding:15px;
    background:#f8f8f8;
    border-left:4px solid #1f3c88;
    border-radius:6px;
    font-size:14px;
}