@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?&family=Klee+One&family=Oooh+Baby&display=swap');

html,
body {
    height: 100%;
    width: 100%;
}

#signup>div {
    width: fit-content;
    margin: 1em auto;
}

#content {
    width: 95%;
}

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

.m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.noto-serif-jp-labo {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.noto-sans-jp-labo {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.Unit {
    margin: 1em 0;
    display: block;
}

.Siteabout {
    font-size: large;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-style: normal;
    padding: 4px;
    margin: 2em auto 0 auto;
    line-height: 30px;
    text-align: center;
    color: #000033;
    letter-spacing: 1px;
}

.Siteabout:hover {
    opacity: .5;
    ;
}

body {
    font-size: 16px;
    font-family: "Noto Sans JP", "M PLUS 1p", "M PLUS Rounded 1c", sans-serif;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.MainContainer {
    display: flex;
    flex: 1;
}

#flexColumn {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    flex: 1;
}

#container {
    width: 100%;
    background: #000066;
    color: #fff;
    margin: 0;
    padding: 1em 0;
    text-align: center;
}

#container p {
    font-family: "Oooh Baby", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: large;
}

input[type=text],
input[type=password] {
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
}

.btn {
    width: 100px;
    padding: 7px;
    border-radius: 5px;
    color: white;
    background: #364e96;
    box-shadow: 0 3px 0 #364e96;
    cursor: pointer;
    margin: 1em auto;
    margin-bottom: 2em;
}

.btn:hover {
    opacity: 0.8;
}

.fs12b {
    font-size: small;
    font-weight: bolder;
    color: #000066;
}

.fs12sb {
    font-size: smaller;
}

.fs12menu {
    font-size: x-small;
    text-align: left;
    padding: 0 0 0 1em;
    margin: 0;
    color: gray;

}

.fs12lab {
    font-size: x-small;
    text-align: left;
    padding: 0;
    margin: 0;
    color: gray;
}

.fs12 {
    font-size: small;
    font-weight: normal;
    /* text-align: left; */
}

.err {
    color: #ff3d00;
    font-weight: bold;
    font-size: 13px;
}

h1 {
    font-size: large;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bolder;
    font-style: normal;
    padding: 4px;
    margin: 0 auto 0.5em auto;
    line-height: 30px;
    text-align: center;
    color: #000033;
    letter-spacing: 2px;
}

#container h2 {
    color: #fff;
    margin: 0;
    font-size: xx-large;
    line-height: 50px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 3px;
}

h3 {
    /* color:brown; */
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    text-align: center;
    /* text-decoration: underline; */
    font-weight: bolder;


}

ul,
li {
    padding: 4px;
    /* margin:4px 0; */
    list-style-type: none;
}

li p {
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
}

#Menu div li::before {
    content: '- '
}

.notation {
    font-size: small;
    color: gray;
    margin: 1em 0;
    padding: 0;
    width: 100%;
}

.bgOW {
    color: #364e96;
    border: #364e96 solid 1px;
    border-radius: 4px;
    font-size: small;
    margin: 0.5em 0;
    padding: 6px;
    font-weight: bolder;
    width: 90%;
}

.box {
    margin: 1em 0;
    background: whitesmoke;
    border: lemonchiffon dashed 1px;
    border-radius: 8px;
    padding: 8px;
}

.box p {
    margin: 0;
    padding: 0;
}

.footer {
    margin: auto 0 0.3em 0;
    text-align: center;
    font-size: x-small;
    font-weight: bold;
    color: white;
}

label {

    text-align: left;
    font-size: x-small;
    color: gray;
}

.form-group {
    display: flex;
    justify-content: center;
}


.olive {
    /* color: orangered; */
    background-color: white;
    color: olive;
    border: solid 3px olive;
    box-shadow: 0 3px 0 olive;
}


dl {
    margin: 0;
}

/* dl>div {
    /*dlの直下のdiv要素*/
/* margin-bottom: 8px;
} */

dd {
    margin: 0;
    padding: 8px;
    display: none;
    /*初期値は隠す*/
}

dt {
    padding: 8px;
    cursor: pointer;
    /*カーソルが重なったら指マーク*/
    user-select: none;
    /*クリックしても選択されないようにする*/
    position: relative;
}

dt::before {
    content: '◇ '
}

dt::after {
    content: '+';
    position: absolute;
    top: 8px;
    right: 16px;
    transition: transform .3s;
}

/* dlの親要素のdivにappearが付いたらdiv内のdd要素をスタイリング */
dl>div.appear dd {
    display: block;
    animation: .5s fadeIn;
}

dl>div.appear dt::after {
    transform: rotate(45deg);
}

/*フェイドインアニメーションの設定*/
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.pointer {
    cursor: pointer;
    display: block !important;
}

.pointer:hover {
    /* opacity:80%; */
    font-weight: bolder;
}

.pagename {
    padding: 0.3em;
    margin: 0.5em 0;
    width: 95%;
    background: white;
    border-top: solid 5px #5d627b;
    ;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.pagename h1,
p {
    margin: 0;
    padding: 0;
    font-size: medium;
}

.pagename p::before {
    content: ': ';
}




.emphasis {
    border: 0.3px solid #5d627b;
    padding: 2px 0.5em;
    margin: 6px 0;
    display: inline-block;
}

.emphasis:hover {
    font-weight: bolder;
}

div.login {
    margin: 0 auto;
    width: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

#loginC {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

p>input[type="text"],
p>input[type="password"] {
    margin: 2px 0;
}

#mheader {
    padding: 1em;
    margin: 1em;
    width: 90%;

}

#mheader ul {
    padding: 0;
    margin: 0;
}

#mheader li {
    display: inline-block;
    /* width: fit-content; */
    padding: 0;
    margin: 0;
}

form#login {
    text-align: center;
}



/* MenuのCSS */
.SideMenu header {
    display: flex;
}

.SideMenu #close {
    margin-left: auto;
    padding: 0.5em;
    font-size: medium;
    color: #5d627b;
    cursor: pointer;
}

.SideMenu #close:hover {
    font-weight: bolder;
}

#toPage2 {
    background: coral;
    opacity: .6;
}

.unshow {
    display: none !important;
}

.SideMenu {
    /*サイドメニューの設定*/
    width: 200px;
    flex: 1;
    font-size: small;
    padding-top: 1em;
}

#open {
    position: absolute;
    top: 30px;
    left: 16px;
    color: #fff;
    cursor: pointer;
    border: solid 0.5px #fff;
    padding: 3px;
    border-radius: 2px;
}

#open:hover {
    color: black;
    font-weight: bolder;
}

#open::after {
    content: "Open";
    position: absolute;
    top: 100%;
    left: -0.5em;
    font-size: x-small;
    text-align: center;
}

#open.unshow {
    display: none;
}

/* メイン画面 Contents*/

.Contents {
    flex: 1;
    /* display: flex; */
    padding: 1em;
}

.Contents div ul,
.Contents div dl,
.Contents div dd,
.Contents div dt,
.Contents div ul::before,
.Contents div ul::after,
.Contents div dl::before,
.Contents div dl::after,
.Contents div dd::before,
.Contents div dd::after,
.Contents div dt::before,
.Contents div dt::after {
    all: unset;
}

.Contents div dt {
    font-size: small;
    font-weight: bolder;
}

.Contents div dd,
.Contents dd p {
    font-size: x-small;
    color: dimgray
}

/* ビューについて View */
#View {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1em 0;
    width: 250px;
    box-sizing: border-box;
}

#View header {
    display: flex;

}

#View #vclose {
    line-height: 1;
    margin-left: auto;
    font-size: medium;
    color: #5d627b;
    cursor: pointer;
    padding: 0.5em;
}

#View #vclose:hover {
    font-weight: bolder;
}

#View h1 {
    line-height: 1;
}

#View div.window {
    max-width: 230px;
    height: 210px;
    font-size: x-small;
    padding: 4px;
    margin: 2px;
    border: #5d627b solid 0.5px;
}

.aboutme {
    width: 100%;
    box-sizing: border-box;
    background-color: #f2f2f2;
    margin: 2em 0;
    padding: 1em;
    color: black;
    box-sizing: border-box;
}

.aboutme p {
    padding: 0 0 0.5em 0;
    font-size: small;
    font-family: "Klee One", cursive;
    font-weight: bold;
}

.Contents .fs12 li {
    font-weight: bolder;
}

.Semphasis {
    border: 0.3px solid #5d627b;
    padding: 8px;
    margin: 6px 0;
    display: inline-block;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

#vopen {
    position: absolute;
    top: 30px;
    right: 16px;
    color: white;
    cursor: pointer;
    border: solid 0.5px black;
    padding: 3px;
    border-radius: 2px;
}

#vopen:hover {
    color: black;
    font-weight: bolder;
}

#vopen::after {
    content: "View";
    position: absolute;
    top: 100%;
    left: -0.7em;
    font-size: x-small;
    text-align: center;
}

#vopen.unshow {
    display: none;
}


#View.unshow {
    display: none;
}

.ajust {
    display: flex;

}

#Timer {
    margin: auto;
    padding: 0;
}

.timer {
    display: flex;
    justify-content: end;
    font-size: x-small;
    padding: 0;
    gap: 6px;
}

.timer li,
ul {
    padding: 0;
    margin: 0 7px;
    font-size: x-small;
    display: inline-block;
}

#view2,
#view3 {
    width: 100%;
    height: fit-content;
    overflow: unset;
    box-sizing: border-box;
}

#View object {
    width: 100%;
    height: 220px;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
}

#View p {
    font-size: small;
}


/* ファンクションメニュー */
.intro {
    border: #364e96 solid 1pt;
    padding: 8px;
    width: 95%;

}

.intro p {
    font-size: small;
    font-family: "M PLUS 1p";
    font-weight: 400;
}

.pfunc {
    width: 100%;
    padding: 3px;
    font-size: small;
    margin: 1em 0;
    font-weight: bolder;
}

.pfunc ul,
.pfunc li {
    all: unset;
    margin: 0;
    padding: 0;
    line-height: 20px;
    text-decoration: none;
    color: black;
    display: inline-block;
}

.pfunc li {
    margin: 4px 0;
}

.pfunc label {
    all: unset;
    font-size: 1em;
}

.pfunc p {
    margin: 12px 0;
    font-weight: 400;
    font-family: "M PLUS 1p";
    font-size: small;
}

.pfunc input[type=text] {
    width: 100%;
    height: 2em;
    padding: 3px;
    margin: 3px 0;
    border: #5d627b 0.5px solid;
    border-radius: 4px;
    font-size: small;
}

.pfunc .send {
    margin: 20px auto 20px 0;
    padding: 2px 6px;
    background-color: #364e96;
    font-size: small;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    border: none;
    width: fit-content;
}

.pfunc .send:hover {
    font-weight: bolder;
}

.pfunc textarea {
    width: 100%;
    min-height: 5em;
    font-size: medium;
    margin-bottom: 2em;
    padding: 8px;
}

details {
    margin: 0.5em 0;
}

summary {
    color: #364e96;
    cursor: pointer;
}

summary:hover {
    font-weight: bolder;
}

.radiodiv {
    /* all: unset; */
    /* display: flex; */
    width: 100%;
    padding: 0;
    margin: 0;
}

#labels {
    display: block;
    flex-direction: column;
    align-items: start;
    padding: 0;
    margin: 0;
}

#labels li {
    display: block;
    margin: 0;
    padding: 3px;
}

#labels ul {
    list-style: none;
    padding: 0
}

#labels input[type=text] {
    min-width: initial;
    width: 50%;
    margin: 0 1em;
}

#labels input[type='submit'] {
    font-size: small;
    font-weight: bolder;
    padding: 3px 6px;
}

@media (max-width: 750px) {
    #View {
        display: none;
    }

    .MainContainer {
        flex-direction: column-reverse;
    }

    #Menu,
    .SideMenu {
        width: 90%;
        margin: 0 auto;
        max-width: unset;
    }
}


.msg,
#msgCS {
    text-align: left;
    color: coral;
    font-size: small;
    margin-top: 1em;
}

#P9 object {
    all: unset;
    /* display: block; */
    min-height: 300px;
    min-width: 300px;
}

/* #clickerSubmit {
    margin: 20px 0;
    background-color: #364e96;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    border: none;

} */

#clickerSubmit:hover {
    opacity: 60%;
}

#clickerSubmit:active {
    opacity: 40%;
}

#ClikerList>li {
    display: flex;
    position: relative;
}

.del {
    color: white;
    margin: 0;
    padding: 0 1px;
    cursor: pointer;
    background: gray;
    border-radius: 4px;
    position: absolute;
    right: 0;
}

#qrContainer a {
    white-space: normal;
    overflow-wrap: break-word;
    margin-left: 1em;
    display: block;
}

.del:hover {
    opacity: 60%;
}

#Cpurge {
    padding: 3px;
    margin: 0 0 0 auto;
    border: #364e96 solid 0.5px;
    border-radius: 6px;
    color: #5d627b;
    cursor: pointer;
    font-weight: bolder;
    font-size: x-small;
    width: fit-content;
}

#Cpurge:hover {
    opacity: 50%;
    background-color: #f2f2f2;
}

#qr {
    width: 100dvw;
    min-height: 260px;
}

.message {
    font-size: x-small;
    width: fit-content;
    border-radius: 6px;
    border: #5d627b solid 0.5px;
    padding: 4px;
    margin: 0.5em, 0;
}

.message li {
    position: relative;
    left: 6px;
}

.message li::before {
    content: '-';
    position: absolute;
    left: -6px;
}

#view2 {
    overflow: hidden;
}

#pass {
    width: 300px;
    box-sizing: border-box;
}

#pass object {
    width: 100%;
    height: 300px;
}

#userinfo {
    font-size: small;
    margin: 1em auto;
    display: block;
    width: 180px;
    box-sizing: border-box;
    border: #5d627b dashed 1px;
    padding: 8px;
}

#DateClock {
    display: flex;
    gap: 8px;

}

form#logout {
    font-size: small;
    margin: 0.3em 0;
    /* width: 100%; */
    width: 100%;
    padding: 4px 0;
    box-sizing: border-box;
    background: #5d627b;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.reverse * {
    font-size: xx-small;
    font-weight: lighter;
}

#logout:hover {
    opacity: .5;
}

form#logout:hover {
    overflow: .6;
}

#logout input {
    all: unset;
    font-size: medium !important;
    font-weight: bold;
}

.I1 {
    margin-left: 1em;
}

.st {
    font-weight: bold;
    margin-top: 0.5em;
    display: block;
}

#Timenow {
    width: 150px;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: medium;
    text-align: center;
}

#withdraw {
    color: #5d627b;
    font-weight: bold;
    text-align: center;
    opacity: .5;
    margin: 1em 0 0 0;
    cursor: pointer;
}

#withdraw:hover {
    opacity: 1;
}

.SideMenu dt {
    font-weight: bolder;
    font-size: medium
}

.button {
    margin: 2em auto 0 auto;
    min-width: 130px;
    width: fit-content;
    text-align: center;
    padding: 4px 8px;
    font-size: medium;
    font-weight: bold;
    background: #364e96;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    display: block;
}

.button:hover {
    opacity: 60%;
}

.flexSet {
    display: flex;
}

#QR {
    height: 50vh;
}

#qrcode,
#qrcode2 {
    width: 128px;
    margin: 8px auto;
}

#download-link,
#download-link2 {
    text-align: center;
    margin: 0 !important;
    padding: 0;
}

#fotterContainer {
    margin: 0;
    padding: 0.5em;
    height: fit-content;
    box-sizing: border-box;
    background: #990033;
    color: white;
}

.Group {
    width: fit-content !important;
    min-width: 5em;
    padding: 0;
    margin: 0 3em 0 auto !important;
    height: 19px !important;
    box-sizing: border-box;
    color: #5d627b !important;
    display: flex;
}

.Group input[type='text'] {
    box-sizing: border-box;
    padding: 0 0.5em;
    margin: 0;
    line-height: 19px;
    height: 19px;
    border-radius: 0;
    border: none;
    width: 10em;
    font-weight: bold;
    color: #364e96;
}

.gray {
    color: gray;
    margin-left: 1em;
}

.inactive {
    display: none !important;
}

.centerDiv {
    margin: 0 auto;
    text-align: center;
    display: block;
    padding: 0.5em 1em;
    width: 10em;
}

#editGroup {
    color: #5d627b;
    margin: 1em 0 1em auto;
    width: fit-content;
}

#ViewInventory {
    width: 100%;
    height: 600px;
}

fieldset {
    border: #5d627b dashed 1px;
    width: fit-content;
}

legend {
    font-size: small;
    font-weight: bold;
}

.menuClicker {
    width: fit-content;
    color: white;
    /* font-weight: bold; */
    padding: 0.5em;
    background: #364e96;
    border-radius: 0.4em;
    cursor: pointer;
    font-size: small;
}

.menuClicker:hover {
    opacity: .5;
}

.flexStyle {
    gap: 1em;
}