/* ==============================
   基本設定
============================== */

/*
   ページごとの縦スクロールバー有無で、中央寄せフレームが左右に数pxずれるのを防ぐ。
   常に縦スクロールバー領域を確保して、全ページの中央位置を固定する。
*/
html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #dff2cf;
    background-image: url("../images/bg_page_tile.png");
    background-repeat: repeat;
    background-attachment: fixed;
    color: #222;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

a {
    color: #2459a6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ==============================
   全体レイアウト
============================== */

/* サイト全体を囲む中央フレーム。 */
.app-layout {
    display: flex;
    box-sizing: border-box;
    width: 1180px;
    max-width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    border-left: 1px solid rgba(60, 80, 50, 0.45);
    border-right: 1px solid rgba(60, 80, 50, 0.45);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}


/* ==============================
   左メニュー
============================== */

/*
   左側に固定表示される共通メニュー。
   bg_side_menu.png を石板風の背景として使用する。
*/
.side-menu {
    width: 220px;
    flex-shrink: 0;
    padding: 18px 14px;
    border-right: 1px solid rgba(40, 40, 40, 0.45);
    background-color: #b8b8b2;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10),
            rgba(0, 0, 0, 0.08)
        ),
        url("../images/bg_side_menu.png");
    background-repeat: repeat-y;
    background-position: top left;
    background-size: 220px auto;
    color: #1f1f1f;
}

/* 左メニュー上部のサイトロゴ。 */
.side-menu__title {
    margin-bottom: 8px;
    padding: 6px 4px 10px;
}

.side-menu__title-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.side-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.side-menu__nav a,
.side-menu__logout-button {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(35, 35, 35, 0.34);
    border-radius: 4px;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.34),
            rgba(255, 255, 255, 0.10)
        );
    color: #161616;
    font: inherit;
    font-weight: bold;
    text-align: left;
    text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.54),
        0 0 4px rgba(255, 255, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}

.side-menu__nav a:hover,
.side-menu__logout-button:hover {
    border-color: rgba(20, 20, 20, 0.52);
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.48),
            rgba(255, 255, 255, 0.20)
        );
    color: #000;
    text-decoration: none;
}

.side-menu__logout-form {
    margin: 0;
}

.side-menu__logout-button {
    border: 1px solid rgba(35, 35, 35, 0.34);
    cursor: pointer;
}


/* ==============================
   メイン領域
============================== */

/*
   中央フレーム内のコンテンツ領域。
   body背景と違い fixed にしないことで、ページスクロール時に一緒に流れる。
*/
.main-content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 24px;
    background-color: rgba(255, 255, 255, 0.72);
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.58),
            rgba(255, 255, 255, 0.58)
        ),
        url("../images/bg_territory_tile.png");
    background-repeat: repeat;
    background-attachment: scroll;
}

.main-content h1 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 26px;
}

.main-content h2 {
    margin-top: 28px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
    font-size: 20px;
}

.main-content h3 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 17px;
}


/* ==============================
   汎用ボックス
============================== */

.card {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.notice-box {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.danger-box {
    margin-bottom: 16px;
    padding: 16px;
    border: 2px solid #c0392b;
    border-radius: 8px;
    background: #fff5f3;
}


/* ==============================
   フォーム
============================== */

form p {
    margin: 0 0 12px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    width: 100%;
    max-width: 800px;
    padding: 8px 10px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fff;
    font: inherit;
}

textarea {
    min-height: 90px;
}

button,
.button-link {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #999;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font: inherit;
    cursor: pointer;
}

button:hover,
.button-link:hover {
    background: #eee;
    text-decoration: none;
}

button[type="submit"] {
    margin-top: 4px;
}


/* ==============================
   上部通知帯
============================== */

.message-strip-list {
    margin-bottom: 16px;
}

.message-strip {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #9bbf9b;
    border-radius: 6px;
    background: #f1fff1;
    color: #245624;
    font-weight: bold;
}

.message-strip + .message-strip {
    margin-top: 8px;
}

.message-strip--success {
    border-color: #8cbf8c;
    background: #f1fff1;
    color: #245624;
}

.message-strip--error,
.message-strip--warning {
    border-color: #d2a15d;
    background: #fff8eb;
    color: #704900;
}


/* ==============================
   スマホ暫定対応
============================== */

@media (max-width: 700px) {
    .app-layout {
        display: block;
        width: 100%;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .side-menu {
        width: 100%;
        background-size: cover;
    }

    .side-menu__nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main-content {
        padding: 16px;
    }
}