body{
    background-color: #FFFACD;
    margin:5px;
}
h1{
    margin: 15px 0 15px 5px;
    padding: 3px;
    color: #003366;
    font-weight: normal;
    border-left: solid 15px #339966;
    border-bottom: solid 5px #339966;
}
ul {
    padding: 0;
    margin: 0;
}
li {
    list-style-type: none;
}

#header{
    display: flex;
    align-items: center;
    margin: 0 auto;
    background:#fff;
    border: solid 1px #c0c0c0;
    margin-bottom: 5px;
}
#header ul{
    display: flex;
    /*flex-wrap: wrap;*/
    overflow-x: auto;
    white-space: nowrap;
}
#header ul li{
    margin:5px 0 5px 3px;
    padding:5px 0;
    font-size: 10pt;
}
#header ul li:after{
    content:">";
    padding-left:3px;
}
#header ul li:last-child:after {
    content: '';
    padding-left: 0;
}

#header ul li a{
    text-decoration: none;
    color:#fff;
    border: solid 1px #339966;
    border-radius: 5px;
    background-color: #339966;
    padding:3px 6px;

}

#header > .logout {
    padding-right: 5px;
    margin-left: auto;
    display: flex;
    align-items: center;
}
#header > .logout a{
    font-size:9pt;
    background-color:#f0f0f0;
    color:#000;
    text-decoration: none;
    min-width: 80px;
    border-radius:10px;
    padding:5px;
    text-align: center;
    border:1px solid #c0c0c0;
}

#container{
    background: #ffffff;
    border: solid 1px #c0c0c0;
    padding-bottom: 5px;
}
.num_container{
    padding: 5px;
}
#contact_us{
    font-size:75%;
    text-align:right;
    margin: 10px;
}
#footer{
    font-size:75%;
    text-align: center;
    margin: 10px;
}

.num{
    width: 200px;
    text-align: center;
    background-color:#339966;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.img_container {
    display: flex;
    flex-wrap: wrap;
    border: solid 1px #c0c0c0;
}
.img_container>div{
    flex-basis: 125px;
    margin: 5px;
}
.img_container>div>img{
    width: 100%;
}
.date {
    text-align: center;
    border: solid 1px #c0c0c0;
}
.img_container>div>button,.button{
    color: #fff;
    background-color: #339966;
    font-weight: bold;
    font-size: 12pt;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
}
.img_container>div>button{
    width: 100%;
}
.ok,.ng{
    width: 45%;
}
.ng{
    background-color: #f0f0f0;
    color:#000;
    font-weight: normal;
}

.delete{
    width: 40px;
    float: right;
}
.delete + *{
    clear: both;
}

.explanation{
    
}
.nowrap{
    white-space: nowrap;
}

/* 認証 */
#login {
    width:80%;
    margin: auto;
}
#login input,#login button{
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    font-size: 15pt;
}

#login button{
    margin:10px 5px;
}

.bold {
    font-weight: bold;
}

/*モーダル*/
.modal {
    font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal__container {
    background-color: #fff;
    padding: 12px;
    max-width: 500px;
    min-width: 300px;
    max-height: 100vh;
    border-radius: 5px;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal__header {
    border-left: solid 10px #396;
    border-bottom: solid 3px #396;
    padding-left: 5px;
}

.modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: #003366;
    box-sizing: border-box;
}

.modal__close {
    background: transparent;
    border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0,0,0,.8);
}

.modal__footer{
    text-align: center;
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes mmslideIn {
    from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform;
}

.qq-gallery .qq-upload-button{
    background:#339966;
    border: 1px solid #339966;
}

.g_id_signin>div>div>div{
    margin: auto !important;
}

#login>.g_id_signin iframe{
    margin: auto !important;
}