/* 
    スマホとPCのレイアウト対応用のCSS
    現状のレイアウト(ver2.2)に合わせて作成するので全体のデザインに変更があった際には修正がいる
    ブレイクポイント　スマホ:768px未満　　PC:1280px以上
*/

/*
    スマホ用レイアウトの記載
    @mediaで囲まれている部分はPC用
*/




div.area-view { /*結果表示領域*/
    height: 630px;
}

div.area-view-col { /*スクロール表示領域*/
    height: 300px;
}

.font-main { /*文字サイズ*/
    font-size: 10px;
}

.sticky-responce { /*stickyのズレ対策*/
    position: sticky;
    top: 38px;
    left: 0;
}

.sticky-def {
    position: sticky;
    top: 0;
    left: 0;
}

/*RD用レイアウト*/
.rd-visitor-form { /*訪問者登録処理画面サイズ*/
    width: 25rem;
}

.rd-visitor-date-form { /*訪問者登録処理日付フォーム*/
    width: 8rem;
    height: 2.5rem;
    border-radius: .375rem;
    text-align: center;
}

.rd-visitor-time-form { /*訪問者登録処理時間フォーム*/
    width: 6rem;
    height: 2.5rem;
    border-radius: .375rem;
    text-align: center;
}

.rd-visitor-date-form-def { /*訪問者登録処理日付フォーム*/
    width: 7rem;
    height: 2.5rem;
    border-radius: .375rem;
    text-align: center;
}

.rd-visitor-time-form-def { /*訪問者登録処理時間フォーム*/
    width: 6rem;
    height: 2.5rem;
    border-radius: .375rem;
    text-align: center;
}

/*スクロールバー白バージョン*/
.rd-sm-scroll-bar-victor-visit {
    margin-top: 3px;
    overflow-y: scroll;
}
    /*横と縦のスクロールバーの幅*/
    .rd-sm-scroll-bar-victor-visit::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    /*スクロールバーのグリップ部分*/
    .rd-sm-scroll-bar-victor-visit::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        height: 5px;
    }
    /*グリップ以外の透かし*/
    .rd-sm-scroll-bar-victor-visit::-webkit-scrollbar-track {
        background: #ffffff;
    }

.rd-sm-visitor-visit {
    height: 56rem;
}

@media(min-width:768px) { /*タブレットはPC基準のレイアウトで*/

    /*PC画面用のレイアウト基準*/
    div.area-view {
        height: 31rem;
    }

    div.area-view-col {
        height: 468px;
    }

    .font-main {
        font-size: 15px;
    }

    .rd-sm-visitor-visit {
        height: 45rem;
    }


    .sticky-responce {
        position: sticky;
        top: 45px;
        left: 0;
    }

    /*RD用レイアウト*/
    .rd-visitor-form {
        width: 61rem;
    }

    .rd-visitor-date-form {
        width: 7rem;
        height: 2.5rem;
        border-radius: .375rem;
        text-align: center;
    }

    .rd-visitor-time-form {
        width: 6rem;
        height: 2.5rem;
        border-radius: .375rem;
        text-align: center;
    }

    .rd-visitor-visit {
        height: 44rem;
    }

    /*スクロールバー白バージョン*/
    .rd-scroll-bar-victor-visit {
        margin-top: 3px;
        overflow-y: scroll;
    }
        /*横と縦のスクロールバーの幅*/
        .rd-scroll-bar-victor-visit::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        /*スクロールバーのグリップ部分*/
        .rd-scroll-bar-victor-visit::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            height: 5px;
        }
        /*グリップ以外の透かし*/
        .rd-scroll-bar-victor-visit::-webkit-scrollbar-track {
            background: #ffffff;
        }

    .rd-sm-scroll-bar-victor-visit {
        overflow-y: hidden;
    }
}