@charset "utf-8";
input{
  display: none;
}
label {
  width: calc(100% /3);
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition-duration: .3s;
  cursor: pointer;
  opacity: .5;
  font-size: 1.25rem;
  margin: 0;
  position: sticky;
  top: 0;
}
.tab_item:hover {
  opacity: 0.75;
}

input[name="tab_item"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab-item {
  display: none;
  clear: both;
  overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#bedframe:checked ~ #bedframe-content,
#matres:checked ~ #matres-content,
#sinsouhin:checked ~ #sinsouhin-content {
  display: block;
}
/*選択されているタブのスタイルを変える*/
input:checked + label {
  opacity: 1;
}

.flex{
  display: flex;
  justify-content: space-around;
  margin-bottom: 50px;
}

.series{
  width: calc(100%/3);
  text-align: center;
  margin: 10px 0;
}

.seriesbox{
  display: flex;
  flex-wrap: wrap;
}

.coil,h3{
  text-align: center;
}
h2{
  margin: 100px 0 50px;
}
h3{
  margin: 100px 0 30px;
}
p{
  line-height: 2;
}
.btn{
  display: block;
  margin: 50px 0;
}
.btn a{
  display: inline-block;
  padding: 10px 20px;
  background-color: #4d4948;
  color: #fff;
  text-decoration: none;
}
@media screen and (max-width: 600px) {
  .series{
    width: calc(100%/2);
    text-align: center;
  }
  .flex{
    display: block;
  }
  main{
    padding: 0 5px;
  }
}