@charset "utf-8";

/* :layers
------------------------------ */
#appt-status-layer{
display: none;position: fixed;width:80%;max-width: 520px;max-height: 80vh; /* 最大高さを設定 */overflow-y:auto; -webkit-overflow-scrolling: touch;/* 縦方向にオーバーフローした場合にスクロール */box-sizing: border-box;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 1px solid #ccc;padding: 20px;text-align:left;background-color: white;box-shadow: 0 0 10px rgba(0,0,0,0.5);border-radius: 8px;z-index: 1000;}

button#close-layer{
position: absolute;
top: 10px;
right: 10px;
width: 24px; /* ボタンの幅をフォントサイズに合わせる */
height: 24px; /* ボタンの高さをフォントサイズに合わせる */
background: url('../img/close_btn.png') no-repeat center center; /* 背景画像を中央に配置 */
background-size: contain; /* 画像のサイズをボタン内に収める */
border: none; /* ボーダーをなし */
padding: 0; /* 余白をなし */
cursor: pointer; /* カーソルをポインターに */
text-indent: -9999px; /* テキストを画面外に配置（非表示） */
overflow: hidden;
}
/* button#close-layer:hover{color:darkgray;} */

/* login layer */
#login-layer{
display:none;
position:fixed;
width:98%;
max-width:520px;
box-sizing:border-box;
top:50%;
left:50%;
transform:translate(-50%, -50%);
border:1px solid #ccc;
padding:10px;
background-color:white;
box-shadow:0 0 10px rgba(0,0,0,0.5);
border-radius:8px;
z-index:1000;
}

#layer-overlay{
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;
}

/* modal window */
#modal-layer {
display:none;
position:fixed;
width:98%;
max-width:520px;
box-sizing:border-box;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background-color: #f9f0d7;
padding: 20px;
border: 1px solid #888;
text-align: center;
font-size:16px;
font-weight:bold;
color:#003f73;
border-radius: 8px;
z-index:1000;
}



/* Responsive max-width:480px
--------------------------------------------------------- */
@media screen and (max-width:480px){


}