@media screen and (min-width: 768px) {
    h1 {
        font: bold;
        font-size: 3em;
    }
    .top-logo{
        width:40%;                                            /* 横幅のサイズを指定  */
        margin-top: 10px;
        margin-left: 20px;
    }
    .part-img{
        background-image:url(../img/cover.png);           /* 画像のURLを指定     */
        background-position:center bottom;                     /* 画像の表示位置を指定 */
        background-size:cover;                                 /* 画像のサイズを指定  */
        width:100%;                                            /* 横幅のサイズを指定  */
        height:500px;                                          /* 縦幅のサイズを指定  */
    }
    
    .about{
        background-color: #ffffff;
        text-align: center;
        height: 600px;
        margin: 50px 0px 50px 0px;
    }
    .about>img{
        margin-top: 20px;
        margin-bottom: 20px;
    }


    table, td, th {
        border-bottom: 1px solid #83d0ff;
    }

    th,td {
        padding: 15px;      /* 余白指定 */
        text-align: left;           /* 文字の揃え位置指定 */
    }
    
    table {
        width: 650px;
        border-collapse:  collapse;     /* セルの線を重ねる */
        line-height: 150%;
        margin: 3px auto;    /* 上下3px 左右auto */
    }
    li {
        list-style-type: circle;
    }
    
    th::before {
        content: '';
        display:  inline-block;     /* インラインブロックにする */
        position:  relative;        /* 位置調整 */
        left: 0;
        margin-right: 10px;
        top: -2px;                  /* 位置調整 */
        width: 4px;
        height: 23px;
        background: #b1b1b1;
        border-radius: 2px;
        vertical-align:  middle;    /* 中央揃え */
    
    }
    
    
    footer {
        background-color:  rgb(0, 86, 112);    /* 背景色指定 */
        height:70px;                             /* 縦幅のサイズを指定  */
        color: aliceblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer>p{
        text-align: center;
        font-size: 0.7em;
        
    }
}



@media screen and (max-width: 768px) {
    header {
        width: 100%;
    }
    header > .part-img {
        margin: 0 auto;
        width: 100%;
        max-width: 1000px;
    }
    body > header > div.part-img > a > img{
        width: 80%;
        margin: 10px 10% 5px;
    }

    .sp-part-img{
        background-image:url(../img/cover.png);           /* 画像のURLを指定     */
        background-position:center bottom;                     /* 画像の表示位置を指定 */
        background-size:cover;                                 /* 画像のサイズを指定  */
        width:100%;                                            /* 横幅のサイズを指定  */
        height:200px;                                          /* 縦幅のサイズを指定  */
    }

    .about{
        max-width: 600px;
        text-align: center;
        margin: 0 auto 0;
    }
    .about > img {
        width: 150px;
        margin : 30px auto 10px;
    }
    .about > table {
        width: 90%;
        margin: 10px 5% 50px;
        border-collapse: collapse;
        border-spacing: 0;
        line-height: 150%;
    }
    
    table th, table td {
        display: block;
        border-bottom: none;
    }

    body > div > table > tbody > tr th{
        width: 90%;
        font-weight: 600;
        padding-top: 10px;
        padding-bottom: 7px;
        margin: 0 auto;

        text-align: center;
        background: #a3a3a3;
        border: 1px solid #ccc;
    }
    body > div > table > tbody > tr td{
        padding-top: 10px;
        padding-bottom: 20px;
        margin: 0 auto;
        width: 90%;
        text-align: center;
    }
    
    body > div > table > tbody > tr:nth-child(6) > td{
        width: 90%;
        text-align: left;
    }
    li {
        margin-left: 30px;
        margin-right: 15px;
        list-style-type: circle;
    }



    footer {
        background-color:  rgb(0, 86, 112);    /* 背景色指定 */
        height:50px;                             /* 縦幅のサイズを指定  */
        color: aliceblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer>p{
        text-align: center;
        font-size: 0.7em;
        
    }
}