:root{

    /* ====================
       プリコネ風カラーテーマ
    ==================== */

    --ui-bg: rgba(255,255,255,.75);
    --ui-bg-hover: rgba(255,255,255,.90);

    --ui-panel: rgba(255,255,255,.68);

    --ui-border: rgba(170,140,90,.18);

    --ui-text:#6d4b2f;
    --ui-text-sub:#8f7258;

    --ui-accent:#6d4b2f;
    --ui-accent-light:#8f7258;

    --ui-shadow:
        0 4px 12px rgba(0,0,0,.08);

    --ui-blur:blur(10px);

    /* ホバー統一 */
    --ui-hover-bg:rgba(255,255,255,.30);
    --ui-hover-text:gray;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Yu Gothic",sans-serif;
}

html,
body{

    height:100vh;
    overflow:hidden;
}

.content{

    height:calc(100vh - 70px);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    overflow:hidden;
}

/* ====================
   背景
==================== */

.bg{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background-image:url("../img/sng3.jpg");

    background-size:cover;
    background-position:center;

    z-index:-2;

    pointer-events:none;
}

.bg::after{

    content:"";

    position:absolute;
    inset:0;
}

/* ====================
   共通ホバー
==================== */

#noticeList li,
#pagination button,
#backToList,
.menu-card{

    transition:.15s;
}

#noticeList li:hover,
#pagination button:hover,
#backToList:hover,
.menu-card:hover{

    background:var(--ui-hover-bg);

    color:var(--ui-hover-text);
}

/* ====================
   HOMEタグ
==================== */

.cardtag{

    position:absolute;

    top:20px;
    left:20px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px;

    background:var(--ui-bg);

    backdrop-filter:var(--ui-blur);

    border:1px solid var(--ui-border);

    box-shadow:var(--ui-shadow);

    color:var(--ui-text);

    border-radius:16px;

    z-index:10;
}

.cardtag-logo{

    width:64px;
    height:64px;

    object-fit:cover;

    border-radius:8px;

    border:2px solid rgba(255,255,255,.4);
}

.cardtag-logo:hover{
    content:url("../img/temari.jpg");
}

.cardtag-title{

    font-size:18px;
    font-weight:bold;

    color:var(--ui-text);

    text-shadow:none;
}

.cardtag-sub{

    font-size:13px;

    margin-top:4px;

    color:var(--ui-text-sub);
}

/* ====================
   お知らせバー
==================== */

.notice-bar{

    position:fixed;

    left:20px;
    bottom:90px;

    display:flex;
    align-items:center;
    gap:12px;

    width:min(500px,calc(100vw - 40px));

    height:55px;

    padding:0 18px;

    background:var(--ui-bg);

    backdrop-filter:var(--ui-blur);

    border:1px solid var(--ui-border);

    box-shadow:var(--ui-shadow);

    color:var(--ui-text);

    cursor:pointer;

    z-index:20;

    position:fixed;

    overflow:hidden;
}

.notice-icon{

    flex-shrink:0;

    font-size:22px;

    padding-right:12px;

    border-right:1px solid var(--ui-border);
}

.notice-latest{

    flex:1;

    min-width:0;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    color:var(--ui-text);

    font-weight:600;

    font-size:14px;
}

.notice-summary{

    margin-top:10px;

    padding:12px;

    background:rgba(255,255,255,.06);

    border-radius:12px;

    cursor:pointer;
}

.notice-detail{

    display:none;

    margin-top:15px;

    padding:12px;

    background:rgba(255,255,255,.03);

    white-space:pre-wrap;
}

.notice-link{

    display:inline-block;

    margin-top:10px;

    color:#6fb3ff;

    text-decoration:none;
}

#noticeList{

    list-style:none;

    padding:0;

    margin:0;
}

#noticeList li{

    padding:12px;

    border-bottom:1px solid rgba(104,43,14,.08);

    cursor:pointer;

    position:relative;

    overflow:hidden;
}

#noticeList li::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    pointer-events:none;

    transition:.15s;

    background:

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 2px 10px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 2px 10px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 2px 10px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 2px 10px no-repeat;
}

#noticeList li:hover::before{

    opacity:1;
}

.notice-bar::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    pointer-events:none;

    transition:.15s;

    background:

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 2px 12px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 2px 12px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 2px 12px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 2px 12px no-repeat;
}

.notice-bar:hover::before{

    opacity:1;
}

#pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:20px;
}

#pagination button{

    min-width:42px;

    height:42px;

    border:1px solid var(--ui-border);

    border-radius:12px;

    background:var(--ui-bg);

    color:var(--ui-accent);

    cursor:pointer;
}

#pagination button:disabled{

    background:rgba(255,255,255,.30);

    font-weight:bold;
}

#backToList{

    display:block;

    margin:0 0 15px;

    padding:10px 20px;

    border:1px solid var(--ui-border);

    background:var(--ui-bg);

    color:var(--ui-accent);

    cursor:pointer;

    position:relative;

    overflow:hidden;
}

#backToList::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    pointer-events:none;

    transition:.15s;

    background:

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 2px 10px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 2px 10px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 2px 10px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 10px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 2px 10px no-repeat;
}

#backToList:hover::before{

    opacity:1;
}

/* ====================
   モーダル
==================== */

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.7);

    z-index:100;
}

.modal.active{

    display:flex;

    justify-content:center;

    align-items:center;
}

.modal-box{

    width:min(700px,90vw);

    max-height:70vh;

    overflow-y:auto;

    padding:20px;

    background:rgba(255,255,255,.85);

    backdrop-filter:var(--ui-blur);

    border:1px solid var(--ui-border);

    box-shadow:var(--ui-shadow);

    color:var(--ui-text);

    border-radius:16px;

    box-sizing:border-box;
}

/* ====================
   通常ページ
==================== */

.panel{

    width:min(1200px, calc(100% - 40px));

    height:calc(100vh - 110px);

    margin:20px auto;

    padding:25px;

    background:var(--ui-panel);

    backdrop-filter:var(--ui-blur);

    border:1px solid var(--ui-border);

    box-shadow:var(--ui-shadow);

    border-radius:16px;

    color:var(--ui-text);

    overflow-y:auto;

    overflow-x:hidden;
}

/* ====================
   下部メニュー
==================== */

.bottom-nav{

    position:fixed;

    bottom:0;

    width:100%;

    height:70px;

    background:var(--ui-bg);

    backdrop-filter:var(--ui-blur);

    border-top:1px solid var(--ui-border);

    box-shadow:0 -2px 12px rgba(0,0,0,.06);

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:50;
}

.nav-item{

    flex:1;

    position:relative;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--ui-text);

    text-decoration:none;

    background:transparent;

    border-left:1px solid var(--ui-border);

    text-shadow:none;

    transition:.15s;
}

.nav-item:first-child{

    border-left:none;
}

.nav-item:hover{

    color:var(--ui-hover-text);

    background:var(--ui-hover-bg);
}

.nav-item.active{

    color:var(--ui-text);

    background:rgba(255,255,255,.25);

    font-weight:bold;
}

/* ====================
   四隅サイト
==================== */

.nav-sight{

    pointer-events:none;

    user-select:none;

    position:absolute;

    inset:0;

    opacity:0;

    transition:.15s;
}

.nav-sight{

    background:

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left top / 2px 12px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right top / 2px 12px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    left bottom / 2px 12px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 12px 2px no-repeat,

    linear-gradient(var(--ui-accent),var(--ui-accent))
    right bottom / 2px 12px no-repeat;
}

.nav-item:hover .nav-sight{

    opacity:1;
}

/* ====================
   MENUボタン群
==================== */

.menu-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:12px;

    width:100%;
}

.menu-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:70px;

    padding:0 16px;

    color:var(--ui-text);

    text-decoration:none;

    background:var(--ui-bg);

    backdrop-filter:var(--ui-blur);

    border:1px solid var(--ui-border);

    box-shadow:0 2px 12px rgba(0,0,0,.06);

    text-shadow:none;

    cursor:pointer;

    transition:.15s;

    overflow:hidden;
}

.menu-card:hover{

    color:var(--ui-hover-text);

    background:var(--ui-hover-bg);
}

.menu-card.active{

    background:rgba(255,255,255,.25);

    font-weight:bold;
}

/* ====================
   スマホ
==================== */

@media(max-width:768px){

    .cardtag{

        left:10px;

        top:10px;
    }

    .bottom-nav{

        font-size:13px;
    }

    .notice-bar{

        left:10px;

        width:calc(100vw - 20px);
    }

    .panel{

        width:95vw;

        padding:18px;
    }
}