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

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

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--site-background-color, #dff2cf);
    background-image: var(--site-background-image, url("../images/bg_page_tile.50fc19a53b7e.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;
}

body.site-background--color {
    background-image: none;
}

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: var(--side-menu-background-color, #b8b8b2);
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10),
            rgba(0, 0, 0, 0.08)
        ),
        var(--side-menu-background-image, url("../images/bg_side_menu.f155d9b8ae78.png"));
    background-repeat: repeat-y;
    background-position: top left;
    background-size: 220px auto;
    color: #1f1f1f;

    /*
       ページを下へスクロールしても左メニューを画面内に残す。
       メニュー自体が画面高より長い場合は、メニュー内だけスクロールできる。
    */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

body.side-menu-background--color .side-menu {
    background-image: none;
}

/* 左メニュー上部のサイトロゴ。 */
.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__disabled-link,
.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__disabled-link {
    opacity: 0.46;
    cursor: not-allowed;
    user-select: none;
}

.side-menu__separator {
    width: 100%;
    height: 1px;
    margin: 3px 0;
    background: rgba(35, 35, 35, 0.42);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.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: var(--main-content-background-color, #ffffff);
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.58),
            rgba(255, 255, 255, 0.58)
        ),
        var(--main-content-background-image, url("../images/bg_territory_tile.a4e95de69dba.png"));
    background-repeat: repeat;
    background-attachment: scroll;
}

body.main-background--color .main-content {
    background-image: none;
}

/* No Image画像はトリミングせず、常に画像全体を表示する。 */
.no-image-placeholder {
    object-fit: contain !important;
    object-position: center !important;
    background-color: #fff;
}

/* 画面右下へ固定するページトップボタン。 */
.page-top-button {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(50, 50, 50, 0.48);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #222;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.page-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-top-button:hover {
    background: #fff;
}

.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) {
    /*
       PCのウィンドウを狭めた時も、左メニューを横幅100%へ膨張させません。
       スマートフォンはviewportメタタグを使わない現在の表示方針により
       おおむね980px幅で描画されるため、この狭幅補正の対象外です。
    */
    body {
        min-width: 560px;
    }

    .app-layout {
        display: flex;
        width: 100%;
        min-width: 560px;
        border-left: 1px solid rgba(60, 80, 50, 0.45);
        border-right: 1px solid rgba(60, 80, 50, 0.45);
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
    }

    .side-menu {
        width: 190px;
        flex: 0 0 190px;
        padding: 14px 10px;
        background-size: 190px auto;
    }

    .side-menu__nav {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .main-content {
        min-width: 0;
        padding: 12px;
    }
}

/* ==============================
   左メニュー：お知らせ未読表示
============================== */

.side-menu__nav a.side-menu__news-link,
.side-menu__nav a.side-menu__pl-link {
    display: flex;
    align-items: center;
    gap: 7px;
}

.side-menu__unread-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(125, 0, 0, 0.55);
    border-radius: 50%;
    background: #e32636;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48);
}


/* ==============================
   POSTフォーム多重送信防止
============================== */

/*
   送信開始後にJavaScriptが無効化したボタンを、
   処理中だと視覚的にも分かる状態にします。
*/
form[data-submit-locked="true"] [data-submit-lock-disabled="true"] {
    cursor: wait !important;
    pointer-events: none !important;
    opacity: 0.62;
}

/* ==============================
   共通文字装飾：虹色・隠し・ぼかし
============================== */

/*
   チャット／プロフィール／日記の虹色文字で共通利用するアニメーション。
   背景グラデーションを横方向へ流し、文字の輪郭内だけに表示します。
*/
@keyframes chatbase-rainbow-scroll {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* 動きの軽減を指定している端末では、色だけ表示してアニメーションを止めます。 */
@media (prefers-reduced-motion: reduce) {
    .chat-tag-rainbow,
    .chat-tag-rainbow .chat-tag-big,
    .chat-tag-rainbow .chat-tag-blur,
    .chat-tag-rainbow ruby,
    .chat-tag-rainbow rb,
    .chat-tag-rainbow rt,
    .markup-tag-rainbow,
    .markup-tag-rainbow .markup-tag-big,
    .markup-tag-rainbow .markup-tag-blur,
    .markup-tag-rainbow ruby,
    .markup-tag-rainbow rb,
    .markup-tag-rainbow rt {
        animation: none !important;
        background-position: 50% 50% !important;
    }
}