@charset "utf-8";
/* CSS Document */

main section { margin-bottom: 40px;}

/* dl
------------------------------------ */
dl {
margin-bottom: 20px;
display:flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-top: none;
}
dt, dd {
padding: 10px;
border-top: 1px solid #ccc;

}
dt {
width: 30%;
background: #ddd;
}
dd {
width: 70%;
background: #fff;
border-left: 1px solid #ccc;
}

@media screen and (max-width: 750px) {
dl {
flex-flow: column nowrap;
}
dt, dd {
width: 100%;
}
dd {
border-left: none;
}
}

/* tabs
------------------------------------ */
.tabs {
width: 100%;
}
.tab_item {
width: calc(100%/5);
height: 100px;
line-height: 100px;
font-weight: bold;
text-align: center;
display: block;
float: left;
border: 1px solid #ccc;
border-left: none;
background-color: #eee;
cursor: pointer;
}
.tab_item:hover {
opacity: 0.75;
}
.tab_item:first-of-type {
border-left: 1px solid #ccc;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
.tab_content {
padding: 20px;
width: 100%;
height: 300px;
border: 1px solid #ccc;
border-top: none;
display: none;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #fff;
border-bottom: none;
}

@media screen and (max-width: 750px) {
.tabs .tabSp_btn {
padding-left: 25px;
width: 100%;
height: 80px;
line-height: 80px;
border: 1px solid #ccc;
border-bottom: none;
display: block;
cursor: pointer;
}
.tabs .tabSp_btn.activ,
.tabs .tabSp_btn:hover {
background-color: #eee;
}
.tabs .tabSp_btn:last-of-type {
border-bottom: 1px solid #ccc;
}
.tab_content {
padding: 30px 20px;
height: auto;
clear: both;
display: none;
overflow: hidden;
border: 1px solid #ccc;
border-bottom: none;
}
.tab_content:last-of-type {
border-top: none;
border-bottom: 1px solid #ccc;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content {
display: none;
}
.tab_content.activ {
display: block !important;
}
}