body {font-family: sans-serif;min-height: 100vh;background-color: #f5f5f5;}
.container {
    text-align: center;
    width: 100%;
    display: grid;
    gap: 1em;
    grid-template-columns: 2fr auto;
    align-items: start;
}
.container,.link{max-width: 1380px;margin: 0 auto;}

textarea,input[type="submit"],input[type="url"],#title{width:90%;padding: 1em;}
label{display: inline-block;text-align: left;}

.login-wrap{    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;}
    
.login-wrap .wrap{min-width: 300px;}
.wrap {
    background-color: #fff;
    padding: 30px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
}
h2 {color: #333;}
.error {color: red;margin-bottom: 10px;}
input[type="password"] {width: 50%;padding: 10px;margin: 10px 0;border: 1px solid #ccc;border-radius: 3px;box-sizing: border-box;}
input[type="submit"] {background-color: #007bff;color: #fff;max-width: 10em;padding: 10px 20px;border: none;border-radius: 3px;cursor: pointer;margin-top:3em;}
#message{height: 5em;}
.form_wrap {display: grid;grid-template-columns:6em auto;gap: 1em;justify-items: start;}
li {
    background-color: #f8f9fa;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 4em auto 2em;
    align-items: center;
    text-align: left;
}

ul {
    display: grid;
    gap: 10px;
    list-style: none;
    padding: 0;
}
.message-grid > span{text-align:center;background: antiquewhite;font-size:0.6em;padding: 5px 0;border: 1px solid black;}
.bold {
    font-weight: 800!important;
}
.f-l {
    font-size: 120%!important;
}
.red {
    color: red;
}
.edit,.confirm-delete,.stop {
    border: 1px solid;
    display: block;
    background: indianred;
    color: aliceblue;
    text-decoration: none;
    padding: 3px 0;
    border-radius: 4px;
}
.edit{background:#2b90ff;margin: 1em 0;}
.stop {display:inline;padding: 7px 3px;}
.button-wrap{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1em;
}
.y {
    font-size: .8em;
}
.m {
    font-size: 1.3em;
}
.link{
    display: flex;
    justify-content: flex-end;gap: 1em;
    padding-bottom:1em;text-align: center;
}
.link a {
    display: block;
    border: 1px solid #666;
    width: 8em;
    border-radius: 8px;
    text-decoration: none;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.update-inner {
    display: grid;
    grid-template-columns: 8em auto;
    align-items: center;
    justify-items: start;
    gap: 1em;
    font-size: .8em;
    max-width: 22em;
    text-align: left;
    border-bottom: 1px solid #ddd;
    padding: 0.5em 0;
}

.booking{
    font-size: 0.8em;
    border: 1px solid #333;
    padding: 3px;
    background: darkorange;
}
.message-grid{display: grid;grid-template-columns: 4em auto;align-items: center;padding-left:7px}

h1,h2 {
    background: burlywood;
    border-radius: 5px;
    padding: 7px 0;
}
h4 {
    line-height: 1.4;
    text-align: left;
    padding: 1em 0;
}

p{    padding:5px;}

@media screen and (max-width:900px) {
.container {grid-template-columns: 1fr;}
.update {    max-width: 100vw;}


}
@media screen and (max-width:480px) {	/*　画面サイズが480px以下の場合ここの記述が適用される　*/
.wrap {        padding: 7px;
}
textarea, input[type="submit"], input[type="url"], #title,li {
}

li {display:block;
}
.form_wrap {
    display: grid;
    grid-template-columns: auto;
}
.update-inner {
    max-width: none;
}

.edit-wrap {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
}
.message-grid{padding-left:0px}

}

.site {
  display: flex;
  justify-content: space-between;
}

.site span{
    min-width: 4em;
    text-align: center;
}

.site span:nth-child(odd):not(:empty) {/* 良本医院 */
  background: #b5cdf9a6;
}

.site span:nth-child(even):not(:empty) {/* ここ和 */
  background: antiquewhite;
}

.site span:empty {
  background: none;
}