@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


img {
    display: block;
}


.w_100 {
    width: 100px;
}

.w_120 {
    width: 120px;
}

.w_234 {
    width: 234px;
}

.w_300 {
    width: 300px;
}

.w_320 {
    width: 320px;
}

.w_468 {
    width: 468px;
}

.title {
    text-align: center;
    margin: 40px 0;
}

.title span {
    border-bottom: 3px solid burlywood;
    padding: 0 30px;
}


.tab_contents {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.bnr_title {
    text-align: center;
}

.col {
    border-bottom: 1px solid #ccc;
    padding: 40px 0;
    text-align: center;
}

.col img {
    margin-left: auto;
    margin-right: auto;
}

.col div:first-child {
    margin-bottom: 24px;
}


.row {
    display: flex;
    padding: 40px 0;
    border-bottom: 1px solid #ccc;
}

.row div {

    width: 50%;
}

.row div h3 {

    text-align: center;
}

.row div img {
    margin-left: auto;
    margin-right: auto;
}

.tab_contents {
    display: none;
}

input[type="radio"] {
    display: none;
}

label span {
    background-image: linear-gradient(to top, burlywood 30%, transparent 30%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 0.3s;
}

label span:hover,
input:checked+label span {
    background-size: 100% 100%;
}




label::after {
    content: "/";
    margin-left: 8px;

}


label:last-of-type::after {
    content: "";
}

.tab_name {
    margin-bottom: 40px;
}


.tab_name:has(#bijoude_tab:checked)~#bijoude_contents,
.tab_name:has(#iqserver_tab:checked)~#iqserver_contents,
.tab_name:has(#ryosekkei_tab:checked)~#ryosekkei_contents,
.tab_name:has(#tutaekata_tab:checked)~#tutaekata_contents {
    display: block;
}

.tab_name {
    text-align: center;
}