/* --- ★★★ 簡単カスタマイズエリア ★★★ --- */
:root {
    --tab-bg-color: #f0f0f0;
    --tab-text-color: #666;
    --tab-active-bg-color: #007bff;
    --tab-active-text-color: #fff;
    --content-bg-color: #fff;
}
/* -------------------------------------- */

body {
    font-family: sans-serif;
    /* padding: 40px;*/
    padding: 0px;
	/* background-color: #e9eaf6; */
    background-color: #ffffff; 
    text-align: center;
    font-weight: bold;
    color: #000000;
	
}
.tabs-container {
/*     overflow-x: scroll; */
    width: 250%;
/*    max-width: 700px; */
    max-width: 800px; 
    margin: 0 auto;
}
.logo{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    /*height: 200px;
    background: #f2f2f2;
    border: 1px solid #999;
    */
}
/* --- ここからがタブのスタイル --- */
.tabs {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ラジオボタンを非表示に */
.tabs input[type="radio"] {
    display: none;
}

/* タブ（ラベル）のエリア */
.tab-labels {
    display: flex;
    background-color: var(--tab-bg-color);
}
.tab-label {
    flex-grow: 1; /* タブを均等に広げる */
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: var(--tab-text-color);
    cursor: pointer;
    transition: all 0.3s;
}
.tab-label:hover {
    background-color: #ddd;
}

/* コンテンツのエリア */
.tab-contents {
    background-color: var(--content-bg-color);
    /* padding: 30px;*/
    padding: 10px;
	text-align: left;
}
/* 全てのコンテンツを最初は非表示に */
.tab-content {
    display: none;
}


/* --- ここからが切り替えの核となるロジック --- */

/* 
  チェックされたラジオボタン(input)の、
  隣の隣の...コンテンツ(div)を表示する
  （一般兄弟セレクタ ~ を使う）
*/
#tab1:checked ~ .tab-contents #content1,
#tab2:checked ~ .tab-contents #content2,
#tab3:checked ~ .tab-contents #content3,
#tab4:checked ~ .tab-contents #content4,
#tab5:checked ~ .tab-contents #content5,
#tab6:checked ~ .tab-contents #content6,
#tab7:checked ~ .tab-contents #content7,
#tab8:checked ~ .tab-contents #content8
{
    display: block;
}

/* チェックされたラジオボタンに対応するタブ（ラベル）のスタイルを変える */
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"],
#tab4:checked ~ .tab-labels label[for="tab4"],
#tab5:checked ~ .tab-labels label[for="tab5"],
#tab6:checked ~ .tab-labels label[for="tab6"],
#tab7:checked ~ .tab-labels label[for="tab7"],
#tab8:checked ~ .tab-labels label[for="tab8"] {
    background-color: var(--tab-active-bg-color);
    color: var(--tab-active-text-color);
}