@charset "UTF-8";

    body {
        margin: 0 0 0 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .wrap {
        max-width: 1300px;
        outline: 1px solid #000;
        margin: 0 auto 0 auto;
    }

    .header-main img  {
        width: 100%;
        margin: 0 auto 0 auto;
    }

    .header-left {
        /*フェードインアニメ*/
        /*左から右にフェードイン*/
        opacity: 0;
        transform: translateX(-50px);
        transition: all 2s;
    }

    .header-left img {
        margin: 8px;
    }

    .header-left.scrollin {
        opacity: 1;
        transform: translate(0);
    }


    .header-right h1 {
        margin: 0;
    }

    .heaadr-flex {
        display: flex;
        margin: 30px auto 0 auto;
        max-width: 1210px;
    }

    h1 {
        color: #6C9CD3;
        font-size: 2em;
        font-weight: bold;
        margin: 10px 0 0 0;
    }

    .hed1 {
        margin-top: 0;
    }

    .bg-blue {
        text-align: center;
        background-color: #D3DEF1;
        padding: 5px 0;
    }

    .header-right {
        margin-left: 30px;
        padding-right: 30px;
    }

    .header-right a:hover {
        text-decoration: none;
        opacity: 0.7;
    }

    .banner-flex {
        max-width: 1200px;
        margin: 40px auto 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .banner-flex a:hover {
        opacity: 0.6;
    }

    table.keyword_search {
        border-collapse: collapse;
        /* border: 1px solid #333333; */
        border-radius: 5px;
        background: #ffffff;
        margin: 50px auto;
        border-collapse: separate;
        border-spacing: 0px 2px;
    }

    table.keyword_search tr th {
        font-weight: 900;
        font-size: 1.2rem;
        color: #000;
        padding: 5px;
        background: #C9CACB;
        border: 1px solid #000;
    }

    table.keyword_search tr td {
        line-height: 1.4em;
        padding: 10px;
        border: 1px solid #000;
    }

    table.keyword_search tr td input[type="text"] {
        width: 300px;
        padding: 5px;
    }

    table.edit_table {
        margin-bottom: 20px;
    }

    table.edit_table th {
        background: #C9CACB;
    }

    table.edit_table td {
        padding: 5px;
    }

    .ip-top {
        vertical-align : middle;
    }

    .record {
        text-align: center;
    }

    .trec {
        color: #005BAC;
        font-size: 1.2rem;
    }

    .bbs-info {
        width: 756px;
        display: flex;
        justify-content: space-between;
        margin: 40px auto 0 auto;
    }

    .bbs-info p {
        margin: 0;
    }

    table.bbs, table.sumi{
        border: 1px solid #000;
        margin: 0 auto;
        width: 756px;
    }

    table.bbs {
        background: #fff;
    }
    img.end_img {
        position: absolute;
        top: 25px;
        left: 45%;
    }

    .sumi-info {
        position: relative;
    }
    table.sumi {
        background-color: #e6e6e6;
     }
     .pd_tp_5 {
         padding-top:5px;
     }

    .toukousya {
        width: 756px;
        margin: 0 auto;
        text-align: right;
    }
    .text-right {
        text-align: right;
        font-weight: bold;
    }

    .title-bk {
        background-color: #666565;
        font-size: 1.1rem;
        font-weight: bold;
        color: #fff;
        padding: 5px 0 5px 10px;
        text-align: left;
    }

    .bk-t {
        background-color: #C9CACB;
        width: 100px;
        text-align: center;
        margin:0;
    }

    /* .bk-g {
        background-color: #fff;
    } */

    .bbs {
    margin: 0;
    }

    .bbs td {
        padding: 5px 15px 5px 15px;
        margin: 0;
        border: 1px solid #000;
    }

    .bbs th {
        margin:0;
    }
    /* ページトップへ戻るボタン */
    #pagetop {
        position:fixed;
        bottom:80px;
        right:50px;
        color: #ffffff; /* 文字色 */
        font-size:0px;
        text-decoration:none;
        background-size: 0px 0px;
        border-radius: 50%; /* ボタンの丸み */
        opacity: 0.7; /* ボタンの透明度 */
        z-index: 99;
    }
    /* ページトップへ戻るボタン：ホバー時 */
    #pagetop:hover {
        color: #ffffff; /* 文字色 */
        opacity: 0.4; /* ボタンの透明度 */
    }
    #pagetop img {
        width:80px;
        height:80px;
    }

    .fadein{
        opacity:1;　/* 表示させる */
        transform:translateX(0); /* 位置を最初の位置に戻す */
    }

    table.data {
        border-collapse: collapse;
        margin: 20px auto;
    }

    table.data tr th, table.data tr td {
        padding: 5px 10px;
        border: 1px solid #333;
    }

    table.data tr th {
        color: #fff;
        background: #333;
    }

    table.data tr td {
        background: #fff;
    }

    footer {
        background-color: #C9CACB;
        padding: 5px 0;
        margin: 20px 0 0 0;
    }

    .tyousa {
        color: red;
        font-size: 1.1rem;
        background-color: #fff;
        width: 80%;
        margin: auto;
    }
    .bk-w {
        background: #fff;
    }

    .align_center {
        text-align: center;
    }


/*================================
スマホ用
=================================*/
@media screen and (max-width: 760px)  {
    body {
        font-size: 0.8rem;
    }

    .wrap {
        width: 100%;
    }

    .heaer-img  {
        width: 100%;
        margin: 0 auto 0 auto;
    }

    .bt_j {
        width: 100%;
        margin: 20px auto 20px auto;
        /* height: 40%; */
    }

    .header-main p {
        margin: 20px auto 20px auto;
        width: 80%;
    }

    .heaadr-flex {
        width: 90%;
        display: flex;
        -webkit-flex-direction: column;             /* Safari etc. */
        -ms-flex-direction    : column;             /* IE10        */
        flex-direction        : column;
        justify-content: center;
        margin: 0px auto;
    }

    .heaadr-flex img {
        width: 100%;
        margin:0 ;
    }

    .header-right {
        padding:0;
        margin:0;
    }

    .banner-flex {
        width: 90%;
        margin: 50px auto 0 auto;
        -webkit-flex-direction: column;             /* Safari etc. */
        -ms-flex-direction    : column;             /* IE10        */
        flex-direction        : column;
        justify-content: center;
        margin: 20px auto;
    }

    .banner-flex img {
        width: 100%;
        text-align: center;
    }

    .bbs-info,.toukousya,table.bbs, table.sumi {
        width: 90%;
    }

    .bbs td {
        padding: 5px 2px;
        margin: 0;
        border: 1px solid #000;
    }

    .bk-t {
        width: 80px;
        text-align: center;
        padding: 5px 0;
    }
    img.end_img {
        position: absolute;
        top: 35px;
        left: 45%;
    }


}