@media screen and (max-width: 970px){
    .pcm{display: none;}
    main{
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
    main h1{
        border-bottom: 1px solid rgb(200, 200, 200);
    }
    /* タブ全体を囲むコンテナの設定 */
    .tab-switch {
        display: flex; /* タブを横並びに配置 */
        flex-wrap: wrap; /* 幅を超えたら折り返し */
        max-width: 800px; /* コンテナの最大幅を指定 */
        margin: auto; /* コンテナを中央に配置 */
        justify-content: center; /* タブを中央に寄せる */
    }

    .tab-switch:after {
    content: ''; /* 空の擬似要素を作成 */
    width: 100%; /* 幅をコンテナ全体に設定 */
    height: 1px; /* 線の高さを1pxに設定 */
    
    display: block; /* ブロック要素として表示 */
    order: -1; /* 擬似要素を上部に配置 */
    margin-top: -5px; /* タブボタンから-5pxの余白を設定 */
    }

    /* 各タブボタンの設定 */
    .tab-switch > label {
        flex: 1 1 auto; /* タブボタンが均等に幅をとるが、幅を超えると折り返す */
        order: -1; /* タブボタンを上部に配置 */
        padding: .7em 1em; /* 上下に0.7em、左右に1emの内側余白 */
        background-color: #f2f3f4; /* タブボタンの背景色 */
        color: #999; /* 文字色をグレーに設定 */
        text-align: center; /* 文字を中央揃え */
        cursor: pointer; /* カーソルをポインターに変更 */
        transition:.3s all;/*変化を滑らかに*/
    }

    /* タブボタンのホバーおよび選択状態のスタイル */
    .tab-switch > label:hover,
    .tab-switch label:has(:checked) {
        background-color: #757F96; /* ホバー/選択時の背景色 */
        color: #fff; /* ホバー/選択時の文字色 */
    }

    /* ラジオボタン自体は非表示 */
    .tab-switch input {
        display: none; /* ラジオボタンを見えなくする */
    }

    /* タブコンテンツのスタイル */
    .tab-switch > div {
        display: none; /* 初期状態ではコンテンツを非表示に */
        width: 100%; /* コンテンツの幅を全体に設定 */
        padding: 1.5em 1em; /* 上下に1.5em、左右に1emの内側余白 */
    border:1px solid #757F96;
    }

    /* 選択されたタブのコンテンツを表示 */
    .tab-switch label:has(:checked) + div {
        display: block; /* 選択されたタブのコンテンツを表示 */
    }


    .tenzi{
        border: 3px solid rgb(160, 160, 160);
        border-radius: 10px;
    }
    .tenzi div{
        text-align: center;
    }
    .tenzi div img{
        width: 90%;
    }
    .tab-content img{
        width: 100%;
    }
    .tab-content h3{
        border-bottom: 2px solid rgb(200, 200, 200);
        margin: 5px 5%;
        margin-left: 5%;
    }
    .tab-content h4 , .tab-content p{
        margin: 0 5%;
        
    }
    .tab-content a{
       color: #0941c1; 
    }

}
@media screen and (min-width: 971px){
    main{
        width: 950px;
        margin-right: auto;
        margin-left: auto;
        background-color: white;
        border: solid white;
    } 
    main h1{
        border-bottom: 1px solid rgb(200, 200, 200);
    }
    /* タブ全体を囲むコンテナの設定 */
    .tab-switch {
        display: flex; /* タブを横並びに配置 */
        flex-wrap: wrap; /* 幅を超えたら折り返し */
        max-width: 800px; /* コンテナの最大幅を指定 */
        margin: auto; /* コンテナを中央に配置 */
        justify-content: center; /* タブを中央に寄せる */
    }

    .tab-switch:after {
    content: ''; /* 空の擬似要素を作成 */
    width: 100%; /* 幅をコンテナ全体に設定 */
    height: 1px; /* 線の高さを1pxに設定 */
    
    display: block; /* ブロック要素として表示 */
    order: -1; /* 擬似要素を上部に配置 */
    margin-top: -5px; /* タブボタンから-5pxの余白を設定 */
    }

    /* 各タブボタンの設定 */
    .tab-switch > label {
        flex: 1 1 auto; /* タブボタンが均等に幅をとるが、幅を超えると折り返す */
        order: -1; /* タブボタンを上部に配置 */
        padding: .7em 1em; /* 上下に0.7em、左右に1emの内側余白 */
        background-color: #f2f3f4; /* タブボタンの背景色 */
        color: #999; /* 文字色をグレーに設定 */
        text-align: center; /* 文字を中央揃え */
        cursor: pointer; /* カーソルをポインターに変更 */
        transition:.3s all;/*変化を滑らかに*/
    }

    /* タブボタンのホバーおよび選択状態のスタイル */
    .tab-switch > label:hover,
    .tab-switch label:has(:checked) {
        background-color: #757F96; /* ホバー/選択時の背景色 */
        color: #fff; /* ホバー/選択時の文字色 */
    }

    /* ラジオボタン自体は非表示 */
    .tab-switch input {
        display: none; /* ラジオボタンを見えなくする */
    }

    /* タブコンテンツのスタイル */
    .tab-switch > div {
        display: none; /* 初期状態ではコンテンツを非表示に */
        width: 100%; /* コンテンツの幅を全体に設定 */
        padding: 1.5em 1em; /* 上下に1.5em、左右に1emの内側余白 */
    border:1px solid #757F96;
    }

    /* 選択されたタブのコンテンツを表示 */
    .tab-switch label:has(:checked) + div {
        display: block; /* 選択されたタブのコンテンツを表示 */
    }


    .tenzi{
        border: 3px solid rgb(160, 160, 160);
        border-radius: 10px;
        width: 49%;
    }
    .tenzi div{
        text-align: center;
    }
    
    .tab-content img{
        width: 100%;
    }
    .tenzi img{
        width: 80%;
    }
    .tab-content h3{
        border-bottom: 2px solid rgb(200, 200, 200);
        margin: 5px 5%;
        margin-left: 5%;
    }
    .tab-content h4 , .tab-content p{
        margin: 0 5%;
        
    }
    .tab-content a{
       color: #0941c1; 
    }
    .tenzi img{
        height: 50%;
    }
    .sum{
        display: flex;
    }
}