:root {
    --theme-color: #6c757d; /* primary color */
}

.bg-primary {
    background-color: #6c757d !important;
}
.text-primary {
    color: #6c757d !important;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: #6c757d;
}
.list-group-item.active {
    background-color: #6c757d;
    border-color: #6c757d;
}

.head-icon {
    background-color: #6c757d;
}

/* 運営ページ向けの調整 */
body {
    padding-top: 80px;
}

.navbar {
    transition: padding 0.2s ease;
}

nav.affix {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
    transition: padding 0.2s linear;
}

section {
    margin: 20px 0 80px;
}


/* Lyrical link tiles (used on unei index) ------------------------------------------------- */
.lyrical-link {
    display: block;
    text-decoration: none;
    color: #6c757d;
    background: #6c757d; /* slightly translucent gray */
    border-radius: 12px;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.25rem;
    box-shadow: none;
    transition: background .12s ease, transform .08s ease;
}
.lyrical-link:hover,
.lyrical-link:focus {
    background: rgb(131, 129, 129);
    text-decoration: none;
}
.lyrical-link .head {
    text-align: center;
    margin-bottom: 0.75rem;
}
.lyrical-link .head-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 8px auto;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    /* rotation animation setup */
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
    transform-origin: center center;
    will-change: transform;
}
.lyrical-link .head-icon i {
    margin: 0;
}
.lyrical-link h2.h5 {
    color: #ffffff;
    margin: 0;
    font-weight: 600;
}
.lyrical-link p {
    color: rgba(255,255,255,0.92);
    margin-top: .6rem;
    margin-bottom: .5rem;
}
.lyrical-link ul {
    color: rgba(255,255,255,0.92);
    margin: 0;
    padding-left: 1.1rem;
}
.lyrical-link ul li {
    margin-bottom: 0.3rem;
}

/* Make tiles stretch to equal heights in their row (works with Bootstrap columns) */
.equal-height .lyrical-link {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.equal-height .lyrical-link .head,
.equal-height .lyrical-link p,
.equal-height .lyrical-link ul {
    flex: 0 0 auto;
}
.equal-height .lyrical-link > *:last-child {
    margin-top: auto;
}

/* Hover / focus: rotate the circular icon once (clockwise) */
.lyrical-link:hover .head-icon,
.lyrical-link:focus .head-icon {
    transform: rotate(360deg);
}

/* Also allow keyboard focus to trigger the rotation for accessibility */
.lyrical-link:focus-visible .head-icon {
    transform: rotate(360deg);
}