/* article_search.htmlのcssファイルです*/


/*ヘッダーの固定、背景画像の設定、最前面の設定*/
.header {
position: fixed;
width: 100%;
background-image: url(images/background.jpg);
background-size: 100%;
z-index: 99;
}

/*mainの重なりをheader分だけ下にずらす*/
.main {
padding: 200px;
}

/*タブの仕様*/
.tab-001 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.tab-001 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-001 > label:hover {
    opacity: .8;
}

.tab-001 input {
    display: none;
}

.tab-001 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-001 label:has(:checked) {
    background-color: #fff;
    border-color: #2589d0 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-001 label:has(:checked) + div {
    display: block;
}

.tab-002 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.tab-002 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-002 > label:hover {
    opacity: .8;
}

.tab-002 input {
    display: none;
}

.tab-002 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-002 label:has(:checked) {
    background-color: #fff;
    border-color: #2589d0 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-002 label:has(:checked) + div {
    display: block;
}

.tab-003 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.tab-003 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-003 > label:hover {
    opacity: .8;
}

.tab-003 input {
    display: none;
}

.tab-003 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-003 label:has(:checked) {
    background-color: #fff;
    border-color: #2589d0 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-003 label:has(:checked) + div {
    display: block;
}