@charset "UTF-8" ;

/* ボディ */
body
{
    margin: 0 ;        /* スペース */
    padding: 0 ;        /* 余白 */
    font-size: 15px ;    /* 文字サイズ */
    line-height: 1 ;    /* 行の高さ */
}

/* ヘッダー */
.header
{
    border-bottom: 3px solid #888 ;        /* 枠線 */
    text-align: center ;            /* テキスト、画像の真ん中寄せ */
    padding: 1em 0 ;            /* 上下の余白 */
    margin-bottom: 2em ;            /* 他のブロックとのスペース */
    background: #e8e8e8 ;            /* 背景色(確認用) */
}

/* ロゴ画像を囲むh1 */
.logo-wrapper
{
    margin: 0 ;
    padding: 0 ;
    line-height: 1 ;
}

/* ロゴ画像 */
.logo
{
    width: 400px ;
    height: auto ;
}

/* フッター */
.footer
{
    border-top: 3px solid #888 ;        /* 枠線 */
    text-align: center ;                /* テキスト、画像の真ん中寄せ */
    margin-top: 2em ;                    /* 他のブロックとのスペース */
    padding: 1em 0 ;                    /* 上下の余白 */
    background: #e8e8e8 ;
    width: 100%;
    height:100px;
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
    width: 1000px ;
    margin: 0 auto ;        /* 左右に[auto]を指定することで、真ん中に寄る */
    padding: 0 ;            /* 上下左右の余白を0にしておく */
    min-height: calc(100vh - 80px);
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
    padding: 20px ;                    /* 上下左右に20pxの余白 */
    border: 1px solid rgba(0,0,0,.1) ;        /* 枠線 */
    float: left ;        /* 左に寄せる */
}

.side
{
    width: 320px ;
    float: right ;        /* 右に寄せる */
}
 
p {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 15px auto 10px;
}

table {
  margin: 20px auto;
}

.tbl-r02 th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 16px;
}

.tbl-r02 td {
  border: solid 1px #ccc;
  padding: 10px;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:768px)
{
    /* ボディ */
    body
    {
        font-size: 13px ;    /* 文字サイズ */
    }
    
    /* ロゴ画像 */
    .logo
    {
        width: 200px ;
    }
    
    .wrapper
    {
        width: auto ;
        padding: 0 10px ;
        min-height: calc(100vh - 100px);
        margin-top:50px;
    }
    
    .main
    {
        width: auto ;
        padding: 0 ;        /* 余白 */
        border: none ;        /* 枠線 */
        margin-top:40px;
    }

    .side
    {
        width: auto ;
    }

    .tbl-r04 {
        width: 100%;
        min-height: 100vh;
    }
    
    .tbl-r04 .thead {
        display: none;
    }
    
    .tbl-r04 tr,
    .tbl-r04 td{
        display: block;
        width: 100%;
        position: relative;
    }
    
    .tbl-r04 td:first-child:before {
        content: "見出し:before";
        background: #e9727e;
        box-sizing: border-box;
        color: #fff;
        font-weight: bold;
        height: 40px;
        padding: 10px;
        position: absolute;
        top: -41px;
        left: -0.2%;
        display: block;
        width: 100.5%;
    }
    
    .tbl-r04 tr {
     margin-bottom: 40px;
    }

    /* フッター */
    .footer
    {
      height: 100px;
    }
    
    .main , .side
    {
        float: none ;
    }

    .side{
        display:none;
    }
}