@charset "utf-8";
  
  /*タブのスタイル*/
  .tabitem {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #f5f245;
    background-color: #fffc4e;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  .tabitem:hover {
    opacity: 0.75;
    cursor: pointer;
  }
  
  /*ラジオボタンを全て消す*/
  input[name="tabitem"] {
    display: none;
  }
  
  /*タブ切り替えの中身のスタイル*/
  .tabcontent {
    display: none;
    padding: 50px 10px 0;
    clear: both;
    overflow: hidden;
    background-color: #FFFFE6;
    border-top: 20px solid #FFFAA5;
    border-bottom: 20px solid #FFFAA5;
    position: relative;
    z-index: -2;
    padding-bottom: 40px;
  }
  
  /*選択されているタブのコンテンツのみを表示*/
  #one:checked ~ #onecontent,
  #two:checked ~ #twocontent,
  #three:checked ~ #threecontent {
    display: block;
  }
  
  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tabitem {
    background-color: #ebe700;
    color: rgb(179, 114, 16);
  }