#detail-cards{
    --navy:#3A2A1B;
    --pink:#F28C00;
    --pink-deep:#CC5500;
    --pink-light:#FFF0DC;
    --cyan:#2681BE;
    --red:#E2001A;
    --red-dark:#B8000F;
    --bg:#FFFAF2;
    --card:#FFFFFF;
    --border:#F8DDB8;
    --text:#3A2A1B;
    --sub:#6B5440;
    --green:#2F6B38;
    --green-bg:#EAF4EA;
    --amber:#8A5A0A;
    --amber-bg:#FBEFDA;
    --gray:#6F5A4B;
    --gray-bg:#F2E9E4;
    font-family:'Noto Sans JP','Hiragino Sans',Meiryo,sans-serif;
    color:var(--text);
    background:var(--bg);
    padding:20px 12px 50px;
    font-size:16px;
    line-height:1.6;
    box-sizing:border-box}
    #detail-cards *
    {
        box-sizing:border-box
    }
    #detail-cards .detail-wrap{
        max-width:680px;margin:auto
    }
    #detail-cards .detail-crumb{
        font-size:14px;
        margin-bottom:8px
    }#detail-cards .detail-crumb a,#detail-cards .detail-back{
        color:var(--pink-deep);
    }#detail-cards h1{
        font-size:clamp(20px,5vw,26px);
        margin:0 0 20px;line-height:1.5
    }
    #detail-cards h1 span{
        color:var(--pink-deep);
    }
    #detail-cards .detail-consult{
        display:block;
        text-align:center;
        background:var(--cyan);
        color:#fff;
        text-decoration:none;
        font-weight:bold;
        padding:14px;
        border-radius:10px
    }
    #detail-cards .detail-sub{
        text-align:center;
        font-size:14px;
        margin:8px 0 22px;
        color:#6B4F56
    }#detail-cards .detail-info{
        padding:12px;
        border-top:1px solid var(--border);
        border-bottom:1px solid var(--border);
        margin-bottom:20px;font-size:14px
    }
    #detail-cards .detail-info p{
        margin:5px 0
    }
    #detail-cards .detail-filter-label{
        color:var(--sub);
        font-size:13px;
        font-weight:bold;
        margin:12px 0 6px
    }
    #detail-cards .detail-filters{
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        margin-bottom:12px
    }#detail-cards .detail-filters button{
        font:inherit;
        font-size:14px;
        border:1px solid var(--border);
        background:#fff;
        border-radius:22px;
        padding:7px 13px;
        color:#6B4F56;
        cursor:pointer
    }#detail-cards .detail-filters button.active{
        color:white;
        border-color:var(--pink-deep);
        background:var(--pink-deep);
    }
    #detail-cards .detail-heading{
        font-size:18px;
        margin:20px 0 15px;
        color: black;
    }
    #detail-cards .detail-heading span{
        font-size:13px;
        color:var(--pink-deep);
        background:var(--pink-light);
        border-radius:20px;
        padding:3px 10px
    }
    #detail-cards .detail-card{
        background:white;
        border:1.5px solid var(--border);
        border-radius:14px;
        padding:16px;
        margin-bottom:14px
    }
    #detail-cards .detail-card.available{
        border-color:#CFE7CF;
    }
    #detail-cards .detail-card.soon{
        border-color:#F0DBAE;
    }
    #detail-cards .detail-card.full{
        opacity:.88
    }
    #detail-cards .detail-card-head{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        margin-bottom:12px
    }
    #detail-cards .detail-date{
        background:var(--pink-light);
        border-radius:10px;
        padding:10px 13px;
        font-size:clamp(16px,4.5vw,21px);
        font-weight:700;
        width:100%
    }
    #detail-cards .detail-date span{
        display:block;
        font-size:16px
    }
    #detail-cards .full .detail-date{
        background:#F2E9E4
    }
    #detail-cards .detail-status{
        border-radius:20px;
        padding:3px 11px;
        font-size:13px;
        font-weight:bold
    }
    #detail-cards .detail-status.available{
        background:#EAF4EA;
        color:#2F6B38
    }
    #detail-cards .detail-status.soon{
        background:#FBEFDA;
        color:#8A5A0A
    }#detail-cards .detail-status.full{
        background:#F2E9E4;
        color:#6F5A4B
    }
    #detail-cards .detail-tags{
        display:flex;
        flex-wrap:wrap;
        gap:10px 22px;
        margin-bottom:12px
    }
    #detail-cards .detail-tags div:first-child{
        flex-basis:100%
    }
    #detail-cards .detail-tags small{
        display:block;
        font-size:12px;
        color:#6B4F56
    }
    #detail-cards .detail-tags b{
        font-size:15px
    }
    #detail-cards .detail-extra{
        font-size:14px;
        color:#6B4F56;
        border-top:1px dashed var(--border);
        padding-top:9px}
        #detail-cards .detail-cta{
            display:block;
            background:#E2001A;
            color:white;
            text-decoration:none;
            border-radius:10px;
            padding:13px;
            font-weight:bold;
            text-align:center
        }#detail-cards .detail-unavailable{
            padding:13px;
            text-align:center;
            border:1px solid #c9beb9;
            border-radius:10px;
            background:#F2E9E4;
            color:#6F5A4B;
            margin:0;
        }
        #detail-cards .detail-empty{
            text-align:center;
            padding:25px 0;
            color:#6B4F56
        }
        #detail-cards .detail-footnote{
            font-size:13px;
            color:#6B4F56
        }
        #detail-cards .detail-back{
            display:inline-block;
            margin-top:18px
        }
        #detail-cards [hidden]{
            display:none!important
        }

        #detail-cards .info-box {
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            padding: 6px 2px;
            margin-bottom: 18px;
        }
        
        #detail-cards .info-row {
            display: flex;
            gap: 12px;
            align-items: baseline;
            padding: 6px 0;
        }
        
        #detail-cards .info-label {
            flex: 0 0 100px;
            font-size: 13px;
            font-weight: 700;
            color: var(--pink-deep);
        }
        
        #detail-cards .info-text {
            flex: 1;
            min-width: 0;
            font-size: 14px;
            line-height: 1.6;
            color: var(--text);
        }
        
        #detail-cards .info-text small {
            display: block;
            font-size: 13.5px;
            color: #6B4F56;
            margin-top: 2px;
        }
        #detail-cards .detail-status.before {
            background: #E8EDF5;
            color: #52657D;
        }
        
        #detail-cards .detail-status.closed {
            background: #F2E9E4;
            color: #6F5A4B;
        }
        #detail-cards .detail-taiken-banner {
            display: block;
            width: 100%;
            max-width: 600px;
            height: auto;
            margin: 16px auto 0;
        }
        
        #detail-cards #detailNoMatch p {
            margin-bottom: 12px;
        }
        
        #detail-cards #detailNoMatch a {
            display: block;
            max-width: 600px;
            margin: 0 auto;
        }