/* レイアウト基本設定 */
@media screen and (max-width:460px) {
    article { width: 100%; margin: 40px auto; color: #444; }
    h1 { font-size: 1.25rem; text-align: center; margin-bottom: 2rem; }
    .contents { padding: 0 15px; }
	.tab_area label { 
        width: 32%; /* 3つの場合、3等分くらいが綺麗です */
        font-size: 0.8em; 
        padding: 10px 2px;
    }
}

@media screen and (min-width:461px) {
    article { width: 950px; margin: 50px auto; color: #444; }
    h1 { font-size: 2rem; text-align: center; margin-bottom: 3rem; }
    .contents { padding: 0 30px; }
	.tab_area label { 
        width: 180px; /* 少しスリムにして3つ並びやすくします */
    }
}

/* 共通テキストスタイル */
h2 { font-size: 1.5rem; margin: 1rem 0 2rem; text-align: center; border-bottom: 2px solid #eee; padding-bottom: 10px; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; color: #222; }
p { margin: 0 0 1rem; line-height: 1.6; }
ol { margin: 1rem 0; padding-left: 1.5rem; }
ol li { margin-bottom: 0.5rem; }

/* タブ切り替えシステム */
input[type="radio"] { display: none; }

.tab_area { 
    display: flex; 
    border-bottom: 1px solid #888;
    margin-bottom: 0;
}

.tab_area label { 
    width: 200px; 
    padding: 5px 5px;
    text-align: center; 
    font-size: 0.95em; 
    font-weight: bold; 
    cursor: pointer; 
    background: #f5f5f5;
    border: 1px solid #888;
    border-bottom: none;
    margin-right: 5px;
    border-radius: 3px 3px 0 0;
}

.tab_area label:hover { background: #eee; }

/* チェックされた時のタブとパネルの制御 */
#tab0:checked ~ .tab_area #tab0_label,
#tab1:checked ~ .tab_area #tab1_label,
#tab2:checked ~ .tab_area #tab2_label {
    background: #fff;
    position: relative;
    top: 1px;
    z-index: 2;
}

.tab_panel { 
    display: none; 
    padding: 40px; 
    border: 1px solid #888; 
    border-top: none;
    background: #fff;
}

#tab0:checked ~ .panel_area #panel0,
#tab1:checked ~ .panel_area #panel1,
#tab2:checked ~ .panel_area #panel2 {
    display: block;
}

.heading { margin-bottom: 2rem; font-weight: bold; }