@charset "UTF-8";

/* CSS Document */

/*タブ切り替え全体のスタイル*/
          .tabs {
              margin-top: 0;
              padding-bottom: 0;
              width: auto;
              margin: 0 auto;
          }

.tabs_wrap{
}
  
          /*タブのスタイル*/

.tab_item {
    width: calc(50% - 10%); /* 50% - (左右10%ずつ) */
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 5px solid #012F5E;
    background-color: #bfcad5;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    color: #fff;
    display: block;
    float: left;
    font-weight: bold;
    transition: all 0.2s ease;
    margin-left: 10%; /* 左の余白 */
}

.tab_item2 {
    width: calc(50% - 10%); /* 50% - (左右10%ずつ) */
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 5px solid #012F5E;
    background-color: #bfcad5;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    color: #fff;
    display: block;
    float: left;
    font-weight: bold;
    transition: all 0.2s ease;
    margin-right: 10%; /* 右の余白 */
}

@media screen and (max-width: 768px) {	

.tab_item {
    width: calc(50% - 0%); /* 50% - (左右10%ずつ) */
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 5px solid #012F5E;
    background-color: #bfcad5;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    color: #fff;
    display: block;
    float: left;
    font-weight: bold;
    transition: all 0.2s ease;
    margin-left: 0%; /* 左の余白 */
}

.tab_item2 {
    width: calc(50% - 0%); /* 50% - (左右10%ずつ) */
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 5px solid #012F5E;
    background-color: #bfcad5;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    color: #fff;
    display: block;
    float: left;
    font-weight: bold;
    transition: all 0.2s ease;
    margin-right: 0%; /* 右の余白 */
}
}
  
          .tab_item:hover {
     background-color: #bfcad5;
          }
  
          .tab_item2:hover {
     background-color: #118AB6;
          }
          /*ラジオボタンを全て消す*/
          input[name="tab_item"] {
              display: none;
          }
  
  		        /*ラジオボタンを全て消す*/
          input[name="tab_item2"] {
              display: none;
          }
  
          /*タブ切り替えの中身のスタイル*/
          .tab_content {
              display: none;
              padding-top: 0%;
  			padding-bottom: 0%;
  			padding-left: 0%;
  			padding-left: 0%;
              clear: both;
              overflow: hidden;
          }
  
  
          /*選択されているタブのコンテンツのみを表示*/
          #tab01:checked~#tab01_content,
          #tab02:checked~#tab02_content{
              display: block;
          }
  
          /*選択されているタブのスタイルを変える*/
          .tabs input:checked+.tab_item {
              background-color: #012F5E;
              color: #fff;
          }
  		
  		.tabs input:checked+.tab_item2 {
              background-color: #118AB6;
              color: #fff;
          }