@charset "UTF-8";

/* -- general -- */
body{
    font-family: "Noto Sans JP", 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ', Meiryo,'ＭＳ Ｐゴシック', sans-serif;
    font-size: 20px;
    font-feature-settings: "palt";
    font-weight: 500;
}
header, footer{
    text-align: center;
    margin: auto;
}
main{
    padding-top: 2em;
    padding-bottom: 4em;
}

/* -- reset -- */
ul{
    list-style: none;
    padding-left: 0;
}

/* -- common -- */
.inner{
    width: 800px;
    margin: auto;
}
section{
    padding-bottom: 2em;
}
h2{
    font-size: 30px;
    letter-spacing: .16em;
    padding-bottom: .3em;
    display: inline-block;
    border-bottom: 2px solid #12599E;
    font-weight: 500;
}
a{
    text-decoration: none;
    color: #12599E;
}
/* -- table -- */
table{
    width: 800px;
    padding-top: 2em;
}
th{
    text-align: left;
    width: 36%;
    font-weight: 500;
}
th, td{
    border-bottom: 2px #B3B3B3 solid;
    padding: .8em 0;
}
tr:first-child th, tr:first-child td{
    border-top: 2px #B3B3B3 solid;
}
.multiple th, .history th{
    vertical-align: top;
}
.details p, .details li, .overview th, .history th{
    text-indent: 1em;
}
.multiple li:not(:last-child){
    margin-bottom: .3em;
}
/* -- each -- */
header{
    padding-top: 1em;
    margin-bottom: 2em;
}
header h1{
    margin-bottom: .3em;
}
header p {
    margin-top: 0;
    letter-spacing: .14em;
}
.details ul{
    border-top: 2px #B3B3B3 solid;
    border-bottom: 2px #B3B3B3 solid;
    padding: 1em 0;
}
.details li{
    position: relative;
    padding-left: 1.3em;
  }
.details li:before {
    content: "";
    position: absolute;
    top: .3em;
    left: 1em;
    width: 1em;
    height: 1em;
    background-color: #12599E;
    border-radius: 50%;
}
.details li:not(:last-child) {
    margin-bottom: .2em;
}
.overview table ul{
    margin: 0;
}
.overview h2, .history h2{
    margin-bottom: 1.5em;
}
.history{
    margin-top: 1em;
}
footer{
    border-top: 3px solid #12599E;
    background-color: #E6E6E6;
    padding-top: 1em;
    padding-bottom: 2em;
}
footer h1{
    font-size: 30px;
    font-weight: 500;
}
footer address{
    font-style: normal;
    margin-bottom: 1em;
}
footer small{
    font-size: 15px;
    color: #808080;
}
@media screen and (max-width: 799px){
    .inner{
        width: 90%;
    }
    table{
        width: 100%;
    }
}
@media screen and (max-width: 480px){
    body{
        font-size: 16px;
    }
    h1 img{
        width: 72%;
    }
    .inner, header p{
        width: 85%;
    }
    header p{
        margin: auto;
        font-size: 18px;
    }
    th{
        width: 40%;
    }
    th, td{
        padding: 1em 0;
    }
    .overview th, .history th{
        text-indent: .5em;
    }
}