@charset "UTF-8";

body {
  margin: 0;
  padding: 0;
}
#body * {
  margin: 0;
  padding: 0;
}
#body *, #body::after, #body::before {
  box-sizing: border-box;
}
#body {
    width:100%;
    max-width:842px;
    margin:0 auto;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, verdana, sans-serif;
    font-size:17px;
}
#body header {
    margin-bottom:70px;
    padding-top:65px;
}
#body header h1 {
    font-size:19px;
    line-height:1.2;
    border-bottom:1px solid #000;
    padding-bottom:10px;
}
#body .contents p {
    line-height:1.8;
}
#body .contents p:nth-last-of-type(1) {
    font-size:15px;
    margin-top:6px;
}
#body .contents .table-wrapper {
    margin:80px 0;
}
#body .contents .table-wrapper table {
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    border-top:1px solid #000; 
    border-left:1px solid #000; 
}
#body .contents .table-wrapper table th,
#body .contents .table-wrapper table td {
    font-size:15px;
    text-align:left;
    line-height:2;
    width:calc( 100% / 3 - 51px );
    padding-left:16px;
    border-right:1px solid #000; 
    border-bottom:1px solid #000; 
}
#body .contents .table-wrapper table td {
    line-height:3;
}
#body .contents .color {
    margin-bottom:100px;
    padding-top:20px;
    border:1px solid #ccc;
    position:relative;
}
#body .contents .color p {
    font-size:19px;
    text-align:center;
    width:100%;
    top:-24px;
    left:0;
    position:absolute;
}
#body .contents .color p span {
    background:#FFF;
    padding:0 20px;
    display:inline-block;
}
#body .contents img {
    max-width:100%;
    width:auto;
    height:auto;
    display:block;
}
/* フッター */
#footer {
  position: absolute;
  z-index: 99;
  width: 100%;
  min-width: 990px;
}
/* PC */
@media screen and (min-width:960px) {
    #body header h1 br {
        display:none;
    }
}
@media screen and (max-width:959px) and (min-width:600px) {
    #body {
        width:92%;
        margin-left:auto;
        margin-right:auto;
   }
    #body .contents p br {
        display:none;
    }
}
/* スマホ */
@media screen and (max-width:599px) {
    #body {
        font-size:13.5px;
        width:calc( 100% - 40px );
        padding-left:20px;
        padding-right:20px;
    }
    #body header {
        margin-bottom:40px;
        padding-top:35px;
    }
    #body header h1 {
        font-size:16px;
        line-height:1.5;
        padding-bottom:7px;
    }
    #body .contents {
    }
     #body .contents p {
        line-height:2;
    }
    #body .contents p:nth-last-of-type(1) {
        font-size:12px;
    }
    #body .contents p br {
        display:none;
    }
    #body .contents .table-wrapper {
        margin-top:44px;
        margin-bottom:62px;
        overflow:auto;
    }
    #body .contents .table-wrapper .inner {
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    #body .contents .table-wrapper .inner::after {
        content:"＊横にスクロールしてご覧ください。";
        display:block;
        font-size:70%;
        line-height:3;
    }
    #body .contents .table-wrapper .inner table {
        width:600px;
    }
    #body .contents .table-wrapper .inner table th,
    #body .contents .table-wrapper .inner table td {
        font-size:12px;
        min-width:200px;
    }
    #body .contents .table-wrapper .inner table td {
        line-height:2.5;
    }
    #body .contents .color p {
        font-size:16px;
        top:-22px;
    }
    #body .contents color {
        margin-bottom:72px;
    }
    
    /* フッター */
    #footer {
        min-width: 0;
    }
}