@charset "utf-8";
        /*タブ切り替え全体のスタイル*/
 .tabs {
         margin-top: 50px;
         padding-bottom: 40px;
         background-color: #fff;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
         width: 100%;
         margin: 0 auto;
 }
 .tab_item {
         width: calc(100%/3);
         height: 50px;
         border-bottom: 3px solid #000000;
         background-color: #d9d9d9;
         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;
 }
 .tab_item:hover {
         opacity: 0.75;
 }
 /*ラジオボタンを全て消す*/
 input[name="tab_item"] {
         display: none;
 }
 /*タブ切り替えの中身のスタイル*/
 .tab_content {
         display: none;
         padding: 40px 0px 0px 0px;
         clear: both;
         overflow: hidden;
 }
 /*選択されているタブのコンテンツのみを表示*/
 #all:checked~ #all_content,
 #hoshitori:checked~ #hoshitori_content,
 #taisenseiseki:checked~ #taisenseiseki_content {
         display: block;
 }
 /*選択されているタブのスタイルを変える*/
 .tabs input:checked+ .tab_item {
         background-color: #000000;
         color: #fff;
 }