.tabs {
	  text-align: center;
      width: 100%;
      max-width: 1000px;
      margin: auto;
  //    background: white;
      border-radius: 10px;
      overflow: hidden;
 //     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* タブボタン */
    .tabs input {
      display: none;
    }

    .tab-labels {
      display: flex;
      justify-content: space-around;
      background: #ddd;
      border-bottom: 2px solid #ccc;
    }

    .tab-label {
      flex: 1;
      padding: 1.5em;
      text-align: center;
      cursor: pointer;
      font-size: 150%;
      font-weight: bold;
	  background: #CCC;
      transition: background 0.3s, color 0.3s;
    }
      .tab-label:hover {
	   background: #FF6600;
    }

    /* アクティブなタブ */
    .tabs input:checked + .tab-label {
      background: #0000AA;
      color: white;
    }

    /* タブコンテンツ */
    .tab-content {
	  color: #000;
      display: none;
      padding: 20px;
      background: #FFF;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s ease, transform 0.4s ease;
		text-align: left;
	}

    /* 選択されたタブのコンテンツを表示 */
    #tab1:checked ~ .contents #content1,
    #tab2:checked ~ .contents #content2,
    #tab3:checked ~ .contents #content3 {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* スマホ用デザイン（縦並び） */
    @media (max-width: 600px) {
      .tab-labels {
        flex-direction: column;
      }
      
      .tab-label {
        border-bottom: 1px solid #ccc;
      }
      
      .tab-label:last-of-type {
        border-bottom: none;
      }
    }