/* Fonts */
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Base Setting */
* {
    box-sizing: border-box;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    margin: 0; padding: 0; /* background-color: #ee0011;*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0; padding: 8px;
}

#headerContainer {
    /* background-color: #6688ff; */
    display: flex;
    justify-content: center;
    /* background-image: url("./img/imgHeaderBG.jpg"); */
    background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.75)), url("./img/imgHeaderBG.jpg");
    background-size: cover;
    background-position: center;
}

#navContainer {
    /* background-color: #555555; */
    background: linear-gradient(to right, rgba(80,80,88,1), rgba(16,8,120,1));
    display: flex;
    justify-content: center;
}

#mainContainer {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

#fotterContainer {
    /* background-color: #555555; */
    display: flex;
    justify-content: center;
    background: linear-gradient(to right, rgba(80,80,88,1), rgba(16,8,120,1));
    background-size: cover;
    background-position:bottom;
    /* border-top: 2px solid #555555; */
}

/* Site Width */
header, nav, main, footer {
    max-width: 960px;
}

/* Header */
header {
    width: 100%; height: 72px;
    /* height: 60px; background-color: #ffffff; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

header a {
    margin: 0;
    text-decoration: none;
}

h1 {
    margin: 0 0 0 8px; padding: 0;
    font-size: 28pt;
    line-height: 1.3em;
    color: #333333;
}

#logoImage {
    margin: 0 8px 2px 0; padding: 0;
    width: 200px;
    vertical-align: bottom;
}

/* Nav */
nav {
    padding: 0;
    width: 100%;
}

nav ul {
    margin: 0; padding: 0;
    display: flex;
    flex-direction: row;
}

nav li {
    margin: 2px 0 2px 8px;
    width: 168px;
    list-style-type: none;
    border-left: 2px solid #888888;
    border-right: 2px solid #888888;
    text-align: center;
}

nav li a {
    display: block;
    color: #cccccc;
    text-decoration: none;
}

nav li:hover {
  background-color: #555c88;
  transition: background-color 0.125s;
}

/* Main */
main {
    width: 100%;
    margin: 8px 0 8px 0; padding: 6px 8px 6px 8px;
    background-color: #ffffff;
    color: #333333;
}

.topInfo {
    text-align: left;
}

.topInfo h2 {
    margin: 0; padding: 0.1em 0 0.1em 0.6em;
    color: #333333;
    border-bottom: 1px solid #555588;
    border-left: 12px solid #555588;
    font-size: 18pt;
    text-align: left;
}

.topInfo h3 {
    margin: 0; padding: 0.1em 0 0.1em 0.6em;
    color: #333333;
    border-bottom: 1px solid #888899;
    border-left: 8px solid #888899;
    font-size: 16pt;
    text-align: left;
}

main ul {
    margin: 0.5em 0 0 8px; padding: 0;
    list-style: none;
}

main li {
    margin: 0.25em 0 0.25em 0; padding: 0;
}

.tools {
    text-align: center;
}

#toolContainer {
    margin: 8px 0 8px 0;
}

.toolList li {
    padding-left: 1.2em;
    position: relative;
}

.toolList li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.4em solid transparent;
    border-left: 0.6em solid #555588;
    content: "";
}

.updateLog {
    padding-left: 0;
    list-style: none;
}

/* Main Tools class */
.tools h2 {
    margin: 0 auto 0 auto; padding: 0 0 0.05em 0.6em;
    max-width: 680px;
    border-bottom: 1px solid #555588;
    text-align: center;
}

.tools h4 {
    margin: 0; padding: 0;
}

.tools h5 {
    margin: 0; padding: 0;
}

/* Fotter */
footer {
    width: 100%; height: 40px;
    /* background-color: #ffffff; */
    display: flex;
    justify-content: center;
    align-items: center;
}

footer a {
    text-decoration: none;
    color: #cccccc;
}

#copyright {
    margin: 0 0 0 8px; padding: 0;
    border-bottom: 1px solid #555555;
}

#copyright:hover {
    border-bottom: 1px solid #888888;
}

/* モバイル向け調整 */
@media (max-width: 560px) {
    /* HEader */
    h1 {
        margin-bottom: 3px;
        font-size: 24pt;
        line-height: 1em;
    }

    #logoImage {
        margin: 0 8px 0 0;
        width: 160px;
    }
}