@charset "utf-8";

:root {
    --color-font:  #333;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: clamp( 16px, 1.3vw, 20px );
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
body {
    margin: 0;
    padding: 0 0 2.0rem 0;
    width: 100%;
    color: var(--color-font);
    background-color: #f8ffff;
    line-height: 1.8;
    transition: 0.2s;
    /* overflow-x: hidden; */
    opacity: 1.0;
    /* transform: translateY(0); */
    animation: body-fadein 1.0s ease 0.0s 1;
}
@keyframes body-fadein {
  0%   { opacity: 0.0; /* transform: translateY(-100px); */ }
  100% { opacity: 1.0; /* transform: translateY(0px); */ }
}

p {
    margin: 1.0em 0;
    text-indent: 1.0em;
}
p + p {
    margin-top: 2.0em;
}
div {
    margin: 0; padding: 0; border: 0;
}

.center {
    text-align: center;
}

header {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 4.0rem;
}

header > h1 {
    margin: 0;
    padding: 0 0.5rem;
    height: 4.0rem;
    font-size: 2.0rem;
    line-height: 2.0;
    position: relative;
    color: #fff;
    font-weight: 700;
    text-align: left;
    background: linear-gradient(to bottom, #00c 0%, #003 100%);
}
header > h1 > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid #cfc;
}
header > h1[onclick] {
    cursor: pointer;
}
header > nav.menu-icon {
    position: absolute;
    display: block;
    margin:  0;
    padding: 0;
    top:   0;
    right: 0;
    width:  calc( 32px + 1.20vw );
    height: calc( 32px + 1.20vw );
}
header > nav.menu-icon > label > img {
    display: block;
    margin: 25.0%;
    padding: 0;
    width: 50.0%;
    height: 50.0%;
}
@media screen and ( min-width: 768px ) {
    header > nav.menu-icon {
        display: none;
    }
}

header > nav.menu-icon > input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}
header > nav.menu-icon > input[type="checkbox"] ~ div.slide-menu {
    position: absolute;
    display: block;
    margin: 0;
    padding: 1.0rem;
    top: 4.0rem;
    right: 0;
    width: 320px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0 4px #ccc;
    text-align: center;
    line-height: 2.0;
    z-index: 1001;
    transition: 0.5s;
    opacity: 0.0;
    transform: scale( 0.0, 0.0 );
    transform-origin: right top;
}
header > nav.menu-icon > input[type="checkbox"] ~ div.slide-menu > div > a {
    color: var(--color-font);
    text-decoration: none;
    transition: 0.5s;
}
@media ( hover: hover ) {
    header > nav.menu-icon > input[type="checkbox"] ~ div.slide-menu > div:hover {
        background-color: #cff;
    }
    header > nav.menu-icon > input[type="checkbox"] ~ div.slide-menu > div:hover > a {
        color: #00f;
    }
}
header > nav.menu-icon > input[type="checkbox"]:checked ~ div.slide-menu {
    opacity: 1.0;
    transform: scale( 1.0, 1.0 );
}

nav.top-menu {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0;
    background-color: #efe;
    box-shadow: 0 2px 2px #ccc;
    display: flex;
    flex-wrap: nowrap;
    z-index: 1000;
}
nav.top-menu > div {
    margin: 0;
    padding: 2px 8px;
    font-size: 0.8rem;
    border-right: 1px solid #eee;
    border-top: 2px solid #cfc;
    border-bottom: 2px solid #cfc;
    transition: 0.5s;
}
nav.top-menu > div.now-pos {
    border-bottom: 2px solid #00f;
}
nav.top-menu > div > a {
    color: var(--color-font);
    text-decoration: none;
    transition: 0.5s;
}
@media ( hover: hover ) {
    nav.top-menu > div:hover {
        border-top: 2px solid #0ff;
        border-bottom: 2px solid #0ff;
        background-color: #cff;
    }
    nav.top-menu > div:hover > a {
        color: #00f;
    }
}

h2 {
    margin: 0;
    padding: 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left;
    color: var(--color-font);
    background: linear-gradient(to bottom, #f8fff8 0%, #99ff99 100%);
}

h3 {
    margin: 0;
    padding: 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
}

h4 {
    margin: 0;
    padding: 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: left;
}

h5 {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: left;
}

footer {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0 0.5rem;
    width: 100%;
    height: 2.0rem;
    line-height: 2.0;
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
    background-color: #efe;
    opacity: 0.9;
    background: linear-gradient(to bottom, #f8fff8 0%, #cfc 100%);
}

hr {
    margin: 16px 0; width: calc( 100% - 4px ); height: 4px;
    border: 0;
    background-color: #ccc;
    background: linear-gradient(to bottom, #fff 0%, #ccc 50%, #fff 100%);
}
img {
    vertical-align: middle;
}

input, select, textarea, button, div.button {
    font-family: inherit;
    transition: 0.2s;
    outline: 0;
    margin: 1px;
    font-size: max( 16px, 1.0rem );
}
input::placeholder,
textarea::placeholder {
    color: #ccc;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select {
    padding: 0.2em 1.0em;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: 0 0 2px #ccc;
    background-color: #fcffff;
}
input[type="submit"], input[type="file"], button, div.button {
    border-radius: 4px;
    border: 1px solid #999;
    box-shadow: 0 0 2px #00f;
    background-color: #f8f8f8;
    background: linear-gradient(to bottom, #fff 0%, #f8f8f8 20%, #f8f8f8 80%, #dddddd 100%);
}
@media ( hover: hover ) {
    input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover, textarea:hover, select:hover {
        border: 1px solid #fcf;
        box-shadow: 0 0 2px #fcf;
        background-color: #ffe;
    }
    input[type="submit"]:hover, input[type="file"]:hover, button:hover, div.button:hover {
        border: 1px solid #f9f;
        box-shadow: 0 0 2px #f9f;
        background-color: #fffff8;
        background: linear-gradient(to bottom, #fff 0%, #fffff8 20%, #fffff8 80%, #ffd 100%);
    }
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    border: 1px solid #f00;
    box-shadow: 0 0 2px #f00;
    outline: 0;
    background-color: #ffd; 
}
input[type="submit"]:focus, input[type="file"]:focus, button:focus, div.button:focus {
    border: 1px solid #f00;
    box-shadow: 0 0 2px #f00;
    outline: 0;
    background-color: #ffd;
    background: linear-gradient(to bottom, #ffd 0%, #ffff00 100%);
}
input[type="number"] {
    text-align: right;
}
@media ( hover: hover ) {
    input[type="checkbox"]:hover, input[type="radio"]:hover {
        border: 1px solid #f00;
        box-shadow 0 0 2px #f00;
        outline: 0;
    }
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
    border: 1px solid #f00;
    box-shadow 0 0 2px #f00;
    outline: 0;
}

@media ( hover: hover ) {
    input:read-only, input:read-only:hover, input:read-only:focus {
        background-color: #ddd;
    }
    input:disabled, input:disabled:hover, input:disabled:focus {
        background-color: #ddd;
    }
}
input:disabled + label {
    color: #999;
}
input[type="checkbox"], input[type="radio"] {
  margin: 0.2em;
  width: 1.2em;
  height: 1.2em;
}

div.button   {
    margin: 4px;
    padding: 4px 0.5em;
    display: inline-block;
}
div.button a {
    text-decoration: none;
}
@media ( hover: hover ) {
    div.button a:hover {
        text-decoration: underline;
    }
}

.font050 { font-size: 0.50rem; }
.font060 { font-size: 0.60rem; }
.font070 { font-size: 0.70rem; }
.font080 { font-size: 0.80rem; }
.font090 { font-size: 0.90rem; }
.font110 { font-size: 1.10rem; }
.font120 { font-size: 1.20rem; }
.font130 { font-size: 1.30rem; }
.font140 { font-size: 1.40rem; }
.font150 { font-size: 1.50rem; }

.bold { font-weight: 700; }


/* ログイン */
#login-box {
    background-color: #efe;
    color: black;
    margin: 10.0vh auto 0 auto;
    padding: 1.0rem;
    width: 90vw;
    max-width: 400px;
    box-shadow: 0 0 2px #666;
    border-radius: 4px;
}
#login-box #login-title {
    margin: 0 auto 0.5rem auto;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(to bottom, #efe 0%, #efe 80%, #090 100%);
}
#login-box .group {
    margin: 1.0rem auto 0 auto;
}
#login-box .group input[type="text"] {
    width: calc( 100% - 6.0rem );
    transition: 0.2s;
}
#login-box .group input[type="password"] {
    width: calc( 95% ); 
    transition: 0.2s;
}
#login-box .group input[type="submit"] {
    outline: 0;
    border: 0;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background-color: #00f;
    background: linear-gradient(to bottom, #99f 0%, #00f 100%);
    box-shadow: 0 0 2px #999;
    border-radius: 1.0rem;
    transition: 0.5s;
}
@media ( hover: hover ) {
    #login-box .group input[type="submit"]:hover {
        background-color: #09f;
        box-shadow: 0 0 2px pink;
        background: linear-gradient(to bottom, #99ccff 0%, #09f 100%);
    }
}
#login-box .group input[type="submit"]:focus {
    background-color: #09f;
    box-shadow: 0 0 2px red;
}

.contents-box {
    margin: 0.5%;
    padding: 2.5rem;
    border: 1px solid #ccc;
    box-shadow: 0 0 2px #ccc;
    border-radius: 4px;
    width: 99.0%;
    background-color: #fff;
}