@charset "utf-8";

/* ========================================================================= */
/* レスポンシブデザイン（モバイル向け）のスタイル */
/* ========================================================================= */
@media (max-width: 767px) {
    main {
        width: 100%;
    }
    header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        background: rgba(255,255,255,.8);
        height: 44px;
    }
    #logo {
        width: 192px;
        height: 38px;
        padding: 5px 5px;
    }
    #announcement {
        display: none;
    }
    .tab-003 > label {
    display:inline;
    }
    .content {
        background: #FFF;
        line-height: 1.7;
        margin: 8px 2px !important;
        border-radius: 4px;
        font-size: 15px;
        padding: 2px 7px;
        word-break: break-all;
        letter-spacing: .5pt;
    }
    /* ハンバーガーメニュー */
    .btnHanberger {
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
        background-color: #262626;
        z-index: 1000;
    }
    .btnHanberger i { 
        position: absolute;
        left: 20%;
        height: 2px;
        width: 60%;
        background-color: #fff;
        transition: .5s;
    }
    .btnHanberger i:nth-of-type(1){
        top: 12px;
    }
    .btnHanberger i:nth-of-type(2){
        top: 22px;
    }
    .btnHanberger i:nth-of-type(3){
        top: 32px;
    }
    /* ハンバーガーメニューの開閉アニメーション */
    .btnHanberger.active i:nth-of-type(1){
        transform: translateY(10px) rotate(45deg);
    }
    .btnHanberger.active i:nth-of-type(2){
        opacity: 0;
    }
    .btnHanberger.active i:nth-of-type(3){
        transform: translateY(-10px) rotate(-45deg);
    }
    /* サイドメニューを非表示 */
    .side-content.passive {
        display: none;
    }
    /* メインコンテンツを非表示 */
    .main-content.active {
        display: none;
        transition: .5s;
    }
    /* フッターコンテンツを非表示 */
    .footer-content.active {
        opacity: 0;
        pointer-events: none;
        transition: .5s;
    }

    /* table01 */
    @media only screen and (max-width: 480px) {
        #table01 thead{
            display: none;
        }
        #table01 th,
        #table01 td {
            width: 100%;
            display: block;
        }
        #table01 th {
            width: 100%;
        }
        #table01 td {
            padding-top: 0;
        }
    }
}