/* 公開・管理画面で共有する配色、レイアウト、コンポーネント。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');
/* ページ内リンクは滑らかに移動し、見出しの上に余白を残す。 */
html {
    scroll-behavior: smooth;
}

#idProfile,
#idConnect,
#idSales {
    scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

:root {
    --ink: #20334a;
    --muted: #52657b;
    --blue: #0868c4;
    --cyan: #eaf8ff;
    --yellow: #ffda54;
    --line: #e4edf2;
    --paper: #fff;
    --radius: 20px;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    color: var(--ink);
    font-synthesis: none;
    line-height: 1.7;
    background: var(--paper);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a,
input,
textarea,
select {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

button {
    border: 0;
}

p {
    margin: 0 0 18px;
}

h1,
h2,
h3 {
    line-height: 1.45;
    margin: 0 0 18px;
    letter-spacing: 0.015em;
}

h1 {
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 800;
}

h2 {
    font-size: 28px;
    font-weight: 800;
}

h3 {
    font-size: 21px;
}

small {
    font-size: 12px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #e8ad00;
    outline-offset: 5px;
}

::selection {
    background: #ffed95;
}

.clsWrap {
    max-width: 1240px;
    width: calc(100% - 112px);
    margin-inline: auto;
}

.clsMuted {
    color: var(--muted);
}

.clsEyebrow {
    display: block;
    color: var(--blue);
    font-size: 12px;
    letter-spacing: 0.19em;
    font-weight: 700;
    margin-bottom: 12px;
}

.clsYellowDot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--yellow);
    margin-left: 11px;
}

.clsButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 14px 25px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition:
        transform 0.2s,
        background 0.2s;
}

.clsButton:hover {
    transform: translateY(-2px);
}

.clsPrimary {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 7px 16px #1278d71c;
}

.clsPrimary:hover {
    background: #0864bc;
}

.clsSecondary {
    background: #fff;
    border: 1px solid var(--line);
}

.clsTextLink {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

.clsTextLink:hover {
    color: var(--blue);
}

.clsTextLink span {
    font-size: 21px;
    color: var(--blue);
}

.clsSiteHeader {
    height: 109px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.clsBrand {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 18px;
    line-height: 1.3;
}

.clsBrand small {
    display: block;
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-top: 6px;
}

.clsBrandMark {
    position: relative;
    font-size: 51px;
    font-weight: 800;
    line-height: 1;
    color: var(--blue);
    letter-spacing: -0.1em;
}

.clsBrandMark span {
    font-size: 24px;
    color: var(--yellow);
    position: absolute;
    right: -7px;
    top: -6px;
}

.clsSiteHeader nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 13px;
    font-weight: 600;
}

.clsSiteHeader nav a:hover,
.clsSiteHeader nav [aria-current] {
    color: var(--blue);
}

.clsNavContact {
    padding: 10px 19px;
    background: #f1f8fc;
    border: 1px solid var(--line);
    border-radius: 30px;
}

.clsMenuToggle {
    display: none;
    background: #eef8ff;
    border-radius: 10px;
    padding: 8px 13px;
    font-size: 23px;
}

.clsHero {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    position: relative;
    padding-top: 28px;
    padding-bottom: 0;
    gap: 36px;
}

.clsHeroCopy {
    align-self: center;
    padding-bottom: 37px;
    position: relative;
    z-index: 1;
}

.clsHeroKicker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 24px;
}

.clsHeroKicker i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
}

.clsHero h1 {
    font-size: clamp(33px, 3.65vw, 53px);
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
    white-space: nowrap;
}

.clsHero h1 > span {
    position: relative;
}

.clsHero h1 > span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: var(--yellow);
    z-index: -1;
    transform: rotate(-1deg);
}

.clsHeroCopy > p {
    font-size: 13px;
    line-height: 2.2;
    color: #6a7d90;
    margin-bottom: 28px;
}

.clsHeroSign {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.clsAvatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #d8f1ff;
    color: var(--blue);
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.clsHeroSign strong {
    font-size: 14px;
}

.clsHeroSign strong small {
    margin-left: 8px;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
}

.clsHeroSign > div > small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}

.clsTinyStar {
    margin-left: auto;
    font-size: 61px;
    font-weight: 400;
    color: var(--yellow);
    line-height: 1;
    transform: rotate(12deg);
}

.clsHeroVisual {
    position: relative;
    padding: 0 12px 24px 0;
    isolation: isolate;
}

.clsHeroVisual > img {
    height: 535px;
    object-fit: cover;
    object-position: center 38%;
    border-radius: 130px 22px 100px 22px;
    transform: rotate(3deg);
    box-shadow: 10px 14px 0 #d8f2ff;
}

.clsHeroOrbit {
    position: absolute;
    inset: 30px -22px 0 -30px;
    border: 1px solid #d3eaf4;
    border-radius: 50%;
    transform: rotate(-30deg);
    z-index: -1;
}

.clsHeroSticker {
    position: absolute;
    right: -25px;
    top: 50px;
    background: var(--yellow);
    padding: 17px 20px;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
    transform: rotate(10deg);
    border-radius: 4px;
    box-shadow: 3px 5px 0 #233b6512;
}

.clsHeroSticker i {
    position: absolute;
    right: -12px;
    bottom: -17px;
    font-size: 37px;
    color: #fff;
    font-style: normal;
}

.clsVisualNote {
    position: absolute;
    bottom: 4px;
    left: 25px;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--blue);
}

.clsSampleLabel {
    position: absolute;
    bottom: 61px;
    right: 14px;
    writing-mode: vertical-rl;
    font-size: 8px;
    letter-spacing: 0.12em;
    color: #fff;
}

.clsHeroBottom {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    padding: 29px 0 26px;
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.16em;
}

.clsTicker {
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 33px;
    background: var(--cyan);
    color: var(--blue);
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.clsTicker span {
    font-size: 25px;
    color: #d9b740;
}

.clsSection {
    padding-top: 72px;
    padding-bottom: 72px;
}

.clsSectionHeading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 31px;
}

.clsSectionHeading h2 {
    margin: 0;
    font-size: 25px;
}

.clsSectionHeading .clsEyebrow {
    margin-bottom: 8px;
}

.clsEventGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.clsEventCard {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 23px;
    background: #fff;
    align-items: center;
}

.clsEventCut {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    background: var(--cyan);
    aspect-ratio: 3/4;
}

.clsEventCut img {
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.85;
}

.clsEventCut span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #fffdf0e6;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 3px;
}

.clsEventInfo {
    min-width: 0;
}

.clsPill {
    display: inline-block;
    background: #ebf7ff;
    color: var(--blue);
    font-size: 10px;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-radius: 5px;
    padding: 3px 9px;
}

.clsEventDate {
    font-size: 23px;
    font-weight: 600;
    margin: 9px 0 0;
    letter-spacing: 0.02em;
}

.clsEventDate small {
    font-size: 10px;
    margin-left: 5px;
    color: var(--muted);
}

.clsEventInfo h3 {
    font-size: 18px;
    margin: 3px 0;
}

.clsEventInfo .clsMuted {
    font-size: 11px;
    margin: 0 0 12px;
}

.clsSpace {
    font-size: 10px;
    margin: 0 0 10px;
}

.clsSpace strong {
    display: inline-block;
    background: #fff7d6;
    padding: 3px 8px;
    margin-left: 6px;
    border-radius: 4px;
    font-size: 11px;
}

.clsEventInfo .clsTextLink {
    font-size: 11px;
    color: var(--muted);
}

.clsSampleNote {
    font-size: 10px;
    color: var(--muted);
    margin: 15px 0 0;
}

.clsGallerySection {
    background: #f4faff;
    position: relative;
}

.clsWorksGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 24px;
}

.clsWorkCard {
    display: block;
    text-align: left;
    padding: 0;
    background: transparent;
    width: 100%;
    border-radius: 16px;
}

.clsArt {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #cdf2ff;
    aspect-ratio: 4/4.4;
}

.clsArt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s;
}

.clsWorkCard:hover .clsArt img {
    transform: scale(1.035);
}

.clsArtLabel {
    position: absolute;
    bottom: 20px;
    left: 22px;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 15px #20334a88;
    writing-mode: vertical-rl;
    letter-spacing: 0.12em;
}

.clsPeach img {
    filter: hue-rotate(150deg) saturate(0.65);
}

.clsMint img {
    filter: hue-rotate(320deg) saturate(0.75);
    transform: scale(1.17) translate(4%, 3%);
}

.clsNight img {
    filter: hue-rotate(20deg) brightness(0.57) saturate(1.2);
}

.clsLemon img {
    filter: hue-rotate(220deg) saturate(0.75);
}

.clsLavender img {
    filter: hue-rotate(65deg) saturate(0.75);
    transform: scale(1.1);
}

.clsWorkCaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 16px;
}

.clsWorkCaption strong {
    font-size: 14px;
}

.clsWorkCaption small {
    font-size: 10px;
    color: var(--muted);
}

.clsHomeBottom {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 64px;
}

.clsHomeBottom .clsSectionHeading h2 {
    font-size: 22px;
}

.clsHomeBottom .clsSectionHeading {
    gap: 10px;
}

.clsNewsRow {
    display: grid;
    grid-template-columns: 85px 66px 1fr 17px;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
    font-size: 12px;
}

.clsNewsRow time {
    font-size: 11px;
    color: var(--muted);
}

.clsNewsTag {
    font-size: 10px;
    text-align: center;
    border-radius: 4px;
    padding: 3px;
    background: #eef7fc;
    color: var(--blue);
}

.clsNewsRow strong {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}

.clsRowArrow {
    color: var(--blue);
}

.clsNewsRow:hover strong {
    color: var(--blue);
}

.clsProfileNote {
    padding: 30px;
    background: #fffbee;
    border-radius: 20px;
    align-self: center;
    position: relative;
}

.clsProfileNote h3 {
    font-size: 20px;
}

.clsProfileNote p {
    font-size: 12px;
    color: #6d7c88;
    line-height: 2;
}

.clsProfileNote .clsEyebrow {
    color: #9a7a20;
    font-size: 10px;
}

.clsHandwritten {
    font-size: 17px;
    transform: rotate(-3deg);
    display: block;
    color: #ba9a3d;
}

.clsSocialSection {
    border-top: 1px solid var(--line);
}

.clsHeaderLogo {
    display: block;
    width: 240px;
    height: 64px;
    flex-shrink: 0;
    max-width: min(240px, 60vw);
    max-height: 64px;
    object-fit: contain;
}

.clsConnectGrid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
}

.clsSocialStack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clsSocialCard {
    border: 1px solid var(--line);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 17px;
    border-radius: 14px;
    transition: background 0.2s;
}

.clsSocialCard:hover {
    background: var(--cyan);
}

.clsSocialIcon {
    overflow: hidden;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #edf8ff;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 700;
    flex-shrink: 0;
}

.clsSocialIcon > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.clsSocialCard strong {
    display: block;
    font-size: 14px;
}

.clsSocialCard small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

.clsSocialCard > span:last-child {
    margin-left: auto;
    color: var(--blue);
}

.clsPost {
    display: flex;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid #dfedf6;
}

.clsPost strong {
    font-size: 12px;
}

.clsPost strong small {
    font-weight: 400;
    font-size: 9px;
    color: var(--muted);
}

.clsPost p {
    font-size: 12px;
    margin: 8px 0;
}

.clsPost > div > small {
    font-size: 10px;
    color: var(--muted);
}

.clsPost .clsAvatar {
    width: 34px;
    height: 34px;
    font-size: 20px;
}

.clsFooter {
    background: #f5f9fc;
    padding: 36px 0 20px;
}

.clsFooterInner {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
}

.clsFooter .clsBrand {
    font-size: 14px;
}

.clsFooter .clsBrandMark {
    font-size: 38px;
}

.clsFooter p,
.clsFooterInner > span,
.clsFooterInner > a:last-child {
    font-size: 10px;
    color: var(--muted);
    margin: 0;
}

.clsPageIntro {
    min-height: 65vh;
    padding-top: 60px;
}

.clsPageIntro > h1 {
    font-size: 36px;
}

.clsTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0;
}

.clsTab {
    background: #f1f6fa;
    border: 1px solid transparent;
    border-radius: 30px;
    padding: 9px 20px;
    font-size: 13px;
}

.clsTab.clsSelected {
    background: var(--blue);
    color: #fff;
}

.clsArticle {
    max-width: 760px;
}

.clsArticle > .clsEyebrow {
    margin-top: 35px;
}

.clsArticle h1 {
    font-size: 32px;
}

.clsArticle .clsLead {
    font-size: 15px;
    color: var(--muted);
}

.clsArticle > .clsArt {
    max-height: 420px;
    aspect-ratio: 16/9;
    margin: 30px 0;
}

.clsArticle > .clsArt img {
    object-position: center 32%;
}

.clsArticle h2 {
    font-size: 23px;
    margin: 35px 0 18px;
}

.clsArticle p {
    font-size: 14px;
    line-height: 2;
}

.clsArticle blockquote {
    margin: 25px 0;
    background: var(--cyan);
    border-left: 4px solid var(--blue);
    padding: 20px;
    font-size: 13px;
}

dialog {
    padding: 0;
    border: 0;
    border-radius: 22px;
    width: min(850px, 90vw);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 30px 100px #132d6266;
}

dialog::backdrop {
    background: #132c4dbb;
    backdrop-filter: blur(5px);
}

#idDialogContent {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}

#idDialogContent .clsArt {
    border-radius: 0;
    max-height: 78vh;
}

#idDialogContent .clsDialogText {
    padding: 50px 28px;
    align-self: center;
}

#idDialogContent h2 {
    font-size: 24px;
}

#idDialogContent p {
    font-size: 13px;
}

.clsDialogClose {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    background: #fff;
    box-shadow: 0 2px 12px #20334a33;
    font-size: 25px;
}

.clsSkipLink {
    position: fixed;
    left: 10px;
    top: -100px;
    z-index: 100;
    background: #fff;
    padding: 10px;
}

.clsSkipLink:focus {
    top: 10px;
}

/* Management surfaces */
.clsAdminBody {
    background: #f4f8fb;
}

.clsAdminLayout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 100vh;
}

.clsAdminSidebar {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.clsAdminSidebar .clsBrand {
    font-size: 15px;
}

.clsAdminSidebar .clsBrandMark {
    font-size: 42px;
}

.clsAdminSidebar nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.clsAdminSidebar nav a {
    padding: 11px 14px;
    border-radius: 9px;
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 13px;
    color: #61788b;
}

.clsAdminSidebar nav a[aria-current],
.clsAdminSidebar nav a:hover {
    background: var(--cyan);
    color: var(--blue);
    font-weight: 700;
}

.clsAdminSidebar nav a span {
    width: 22px;
    text-align: center;
    font-size: 17px;
}

.clsSidebarFoot {
    margin-top: auto;
    font-size: 12px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.clsAdminMain {
    min-width: 0;
    padding: 0 42px 50px;
}

.clsAdminTopbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    gap: 15px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}

.clsAdminTopbar > span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.clsAdminTopbar .clsAvatar {
    width: 30px;
    height: 30px;
    font-size: 18px;
}

.clsMockBanner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff7d9;
    color: #7e681c;
    padding: 12px 17px;
    border-radius: 10px;
    font-size: 12px;
    margin: 24px 0;
}

.clsAdminHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 32px 0 25px;
}

.clsAdminHeading h1 {
    font-size: 28px;
    margin-bottom: 7px;
}

.clsAdminHeading p {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}

.clsAdminPanel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 24px;
}

.clsAdminPanel h2 {
    font-size: 17px;
}

.clsStatsGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}

.clsStatCard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 21px;
}

.clsStatCard span {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.clsStatCard strong {
    display: block;
    font-size: 33px;
    font-weight: 600;
    margin: 8px 0;
}

.clsStatCard small {
    color: var(--blue);
    font-size: 10px;
}

.clsAdminGrid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
}

.clsQuickActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.clsAdminMiniEvent {
    display: flex;
    align-items: center;
    gap: 17px;
}

.clsAdminMiniEvent img {
    width: 90px;
    height: 105px;
    object-fit: cover;
    border-radius: 9px;
}

.clsAdminMiniEvent h3 {
    font-size: 16px;
    margin: 7px 0;
}

.clsAdminMiniEvent p {
    font-size: 12px;
    margin: 0;
}

.clsAdminTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.clsAdminTable th {
    text-align: left;
    color: var(--muted);
    font-weight: 500;
    font-size: 11px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: #f9fbfd;
}

.clsAdminTable td {
    padding: 17px 12px;
    border-bottom: 1px solid var(--line);
}

.clsAdminTable tr:last-child td {
    border-bottom: 0;
}

.clsTableTitle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.clsTableTitle img {
    width: 44px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
}

.clsStatus {
    font-size: 10px;
    padding: 4px 9px;
    border-radius: 5px;
    background: #e8f8ee;
    color: #35805a;
    white-space: nowrap;
}

.clsStatus.clsDraft {
    background: #f0f3f6;
    color: #798795;
}

.clsRowActions {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.clsSmallButton {
    display: inline-block;
    background: #edf7ff;
    color: var(--blue);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
}

.clsSmallButton.clsDanger {
    background: #fff2f1;
    color: #c36960;
}

.clsListToolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.clsListToolbar input {
    max-width: 330px;
}

.clsListToolbar select {
    width: auto;
    max-width: 140px;
}

.clsField {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 600;
}

.clsField small {
    color: var(--muted);
    font-weight: 400;
}

.clsField input,
.clsImageRow input,
.clsField select,
.clsField textarea,
.clsListToolbar input,
.clsListToolbar select {
    display: block;
    border: 1px solid #dce6ed;
    border-radius: 8px;
    padding: 11px 13px;
    background: #fff;
    min-width: 0;
    width: 100%;
    font-size: 13px;
}

.clsField textarea {
    resize: vertical;
    min-height: 105px;
}

.clsField .clsCodeInput {
    font-family: Consolas, monospace;
    font-size: 12px;
    min-height: 260px;
    line-height: 1.8;
    background: #f8fbfe;
}

.clsFieldRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.clsEditorLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 24px;
}

.clsEditorLayout > .clsAdminPanel {
    min-width: 0;
}

.clsEditorAside .clsAdminPanel {
    padding: 20px;
}

.clsEditorAside .clsButton {
    width: 100%;
    margin-top: 10px;
    gap: 10px;
}

.clsUploadBox {
    border: 2px dashed #cfdfeb;
    border-radius: 12px;
    padding: 26px 18px;
    text-align: center;
    background: #f8fcff;
    margin-bottom: 18px;
}

.clsUploadBox label {
    cursor: pointer;
    font-size: 13px;
    color: var(--blue);
    font-weight: 700;
}

.clsUploadBox label span {
    display: block;
    font-size: 30px;
}

.clsUploadBox input {
    max-width: 100%;
    font-size: 11px;
    margin-top: 15px;
}

.clsUploadBox small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 9px;
}

.clsUploadList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clsUploadItem {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
}

.clsUploadItem img {
    width: 50px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.clsUploadItem .clsUploadName {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.clsUploadItem button {
    background: #edf7ff;
    color: var(--blue);
    border-radius: 5px;
    padding: 5px 8px;
}

.clsUploadItem button:disabled {
    opacity: 0.35;
}

.clsPreviewFrame {
    width: 100%;
    height: 330px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}

.clsPreviewHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 12px;
}

.clsPreviewHeading h2 {
    margin: 0;
}

.clsSettingsImage {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.clsToast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    background: #223c56;
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 30px #20334a33;
    font-size: 13px;
    max-width: calc(100vw - 30px);
    text-align: center;
}

.clsLoginPage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 80% 20%, #d9f3ff, transparent 45%), #f4faff;
    padding: 25px;
}

.clsLoginCard {
    width: 440px;
    max-width: 100%;
    background: #fff;
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 20px 70px #1278d70c;
}

.clsLoginCard .clsBrand {
    margin-bottom: 35px;
}

.clsLoginCard h1 {
    font-size: 25px;
}

.clsLoginCard .clsButton {
    width: 100%;
}

.clsLoginCard > p {
    font-size: 12px;
    color: var(--muted);
}

.clsLoginCard .clsMockBanner {
    display: block;
    font-size: 11px;
}

.clsLoginBack {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin-top: 22px;
}

.clsEditorAside small {
    font-size: 10px;
    color: var(--muted);
}

.clsEmptyList {
    padding: 30px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

@media (min-width: 1600px) {
    .clsHeroVisual > img {
        height: 585px;
    }

    .clsHero h1 {
        font-size: 57px;
    }

    .clsHeroCopy > p {
        font-size: 14px;
    }
}

@media (max-width: 1100px) {
    .clsWrap {
        width: calc(100% - 64px);
    }

    .clsHero {
        gap: 25px;
    }

    .clsHeroVisual > img {
        height: 460px;
    }

    .clsHeroSticker {
        right: -10px;
        font-size: 18px;
    }

    .clsHero h1 {
        font-size: 38px;
    }

    .clsHeroKicker {
        font-size: 9px;
    }

    .clsSiteHeader nav {
        gap: 23px;
    }

    .clsEventCard {
        grid-template-columns: 110px 1fr;
        gap: 17px;
        padding: 17px;
    }

    .clsEventDate {
        font-size: 20px;
    }

    .clsHomeBottom {
        gap: 30px;
        grid-template-columns: 1.3fr 1fr;
    }

    .clsHomeBottom .clsSectionHeading {
        align-items: start;
        flex-direction: column;
    }

    .clsAdminLayout {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .clsAdminSidebar {
        padding: 25px 15px;
    }

    .clsAdminMain {
        padding: 0 24px 35px;
    }

    .clsEditorLayout {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .clsStatsGrid {
        gap: 12px;
    }

    .clsStatCard {
        padding: 17px;
    }

    .clsAdminGrid {
        grid-template-columns: 1fr;
    }

    .clsAdminTable td,
    .clsAdminTable th {
        padding: 12px 7px;
    }

    .clsEditorLayout .clsFieldRow {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 800px) {
    .clsSiteHeader nav {
        gap: 16px;
        font-size: 11px;
    }

    .clsBrand {
        font-size: 15px;
    }

    .clsHero h1 {
        font-size: 32px;
    }

    .clsHeroVisual > img {
        height: 390px;
        border-radius: 90px 16px 60px 16px;
    }

    .clsHeroCopy > p {
        font-size: 11px;
    }

    .clsHeroSign {
        margin-top: 25px;
    }

    .clsHeroSticker {
        font-size: 15px;
        padding: 13px;
    }

    .clsHeroKicker {
        letter-spacing: 0.06em;
    }

    .clsHero .clsButton {
        font-size: 12px;
        padding: 12px 19px;
    }

    .clsTinyStar {
        font-size: 40px;
    }

    .clsSection {
        padding-block: 50px;
    }

    .clsSectionHeading h2 {
        font-size: 22px;
    }

    .clsEventGrid {
        grid-template-columns: 1fr;
    }

    .clsEventCard {
        grid-template-columns: 130px 1fr;
    }

    .clsEventCut {
        max-height: 180px;
    }

    .clsHomeBottom {
        grid-template-columns: 1fr;
    }

    .clsHomeBottom .clsSectionHeading {
        flex-direction: row;
    }

    .clsConnectGrid {
        gap: 22px;
        grid-template-columns: 1fr;
    }

    .clsWorksGrid {
        gap: 24px 17px;
    }

    .clsArtLabel {
        font-size: 17px;
        left: 13px;
    }

    .clsFooterInner {
        flex-wrap: wrap;
        gap: 20px;
    }

    .clsFooterInner p {
        flex-basis: 50%;
    }

    .clsAdminLayout {
        grid-template-columns: 1fr;
    }

    .clsAdminSidebar {
        position: relative;
        height: auto;
        padding: 18px 24px;
        gap: 17px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .clsAdminSidebar .clsBrand {
        font-size: 14px;
    }

    .clsAdminSidebar nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 5px;
        padding-bottom: 5px;
    }

    .clsAdminSidebar nav a {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 11px;
        padding: 8px 12px;
    }

    .clsSidebarFoot {
        position: absolute;
        top: 29px;
        right: 24px;
    }

    .clsSidebarFoot a:last-child {
        display: none;
    }

    .clsEditorLayout {
        grid-template-columns: 1fr;
    }

    .clsEditorAside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .clsStatsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clsAdminTable {
        display: block;
    }

    .clsAdminTable thead {
        display: none;
    }

    .clsAdminTable tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .clsAdminTable tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        padding: 10px;
    }

    .clsAdminTable td {
        border: 0;
        padding: 7px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .clsAdminTable td:before {
        content: attr(data-label);
        font-size: 10px;
        color: var(--muted);
        min-width: 42px;
    }

    .clsAdminTable td:first-child:before,
    .clsAdminTable td:last-child:before {
        display: none;
    }

    .clsTableTitle {
        font-size: 12px;
    }

    .clsRowActions {
        margin-top: 5px;
    }

    .clsAdminPanel {
        padding: 20px;
    }

    .clsPageIntro > h1 {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .clsWrap {
        width: calc(100% - 40px);
    }

    .clsSiteHeader {
        height: 84px;
        position: relative;
    }

    .clsSiteHeader .clsBrand {
        font-size: 14px;
    }

    .clsBrandMark {
        font-size: 43px;
    }

    .clsMenuToggle {
        display: block;
    }

    .clsSiteHeader nav {
        display: none;
        position: absolute;
        z-index: 10;
        top: 75px;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid var(--line);
        box-shadow: 0 15px 30px #20334a14;
        border-radius: 14px;
        padding: 18px;
        font-size: 13px;
    }

    .clsSiteHeader nav.clsOpen {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .clsSiteHeader nav a {
        padding: 10px 15px;
    }

    .clsHero {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 20px;
    }

    .clsHeroCopy {
        padding-bottom: 0;
    }

    .clsHeroKicker {
        font-size: 9px;
        margin-bottom: 18px;
    }

    .clsHero h1 {
        font-size: 37px;
        line-height: 1.5;
    }

    .clsHeroCopy > p {
        font-size: 12px;
        line-height: 2;
        margin-bottom: 22px;
    }

    .clsHeroSign {
        margin-top: 25px;
    }

    .clsHeroSign .clsTinyStar {
        margin-right: 30px;
    }

    .clsHeroVisual {
        margin: 0 9px;
        padding: 0 8px 20px;
    }

    .clsHeroVisual > img {
        height: 390px;
        border-radius: 95px 15px 70px 15px;
        transform: rotate(2deg);
    }

    .clsHeroSticker {
        right: -5px;
        top: 25px;
        font-size: 20px;
    }

    .clsHeroOrbit {
        inset: 15px -7px 0 -7px;
    }

    .clsHeroBottom {
        padding: 6px 0 20px;
        gap: 15px;
        font-size: 7px;
        letter-spacing: 0.08em;
    }

    .clsHeroBottom span:first-child {
        max-width: 60%;
    }

    .clsTicker {
        font-size: 10px;
        height: 42px;
        justify-content: start;
        padding-left: 20px;
        gap: 22px;
    }

    .clsSection {
        padding-block: 42px;
    }

    .clsSectionHeading {
        margin-bottom: 24px;
        align-items: start;
        gap: 12px;
    }

    .clsSectionHeading h2 {
        font-size: 20px;
    }

    .clsEyebrow {
        font-size: 10px;
    }

    .clsSectionHeading > .clsTextLink {
        font-size: 10px;
        white-space: nowrap;
        margin-top: 26px;
        gap: 7px;
    }

    .clsTextLink span {
        font-size: 16px;
    }

    .clsEventCard {
        grid-template-columns: 102px minmax(0, 1fr);
        padding: 15px;
        gap: 15px;
        border-radius: 15px;
    }

    .clsEventDate {
        font-size: 20px;
    }

    .clsEventInfo h3 {
        font-size: 16px;
    }

    .clsSpace strong {
        margin: 4px 0 0;
        font-size: 10px;
    }

    .clsEventInfo .clsMuted {
        margin-bottom: 5px;
    }

    .clsEventCut span {
        font-size: 9px;
    }

    .clsWorksGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 14px;
    }

    .clsGallerySection .clsWorksGrid .clsWorkCard:last-child {
        display: none;
    }

    .clsArt {
        border-radius: 12px;
    }

    .clsArtLabel {
        font-size: 14px;
        bottom: 13px;
        left: 12px;
    }

    .clsWorkCaption {
        margin-top: 12px;
    }

    .clsWorkCaption strong {
        font-size: 12px;
    }

    .clsWorkCaption small {
        font-size: 9px;
    }

    .clsNewsRow {
        grid-template-columns: 79px 64px 1fr;
        gap: 9px;
        padding: 18px 0;
    }

    .clsNewsRow strong {
        grid-column: 1/3;
        grid-row: 2;
        font-size: 12px;
    }

    .clsNewsRow .clsRowArrow {
        grid-column: 3;
        grid-row: 1/3;
        justify-self: end;
    }

    .clsHomeBottom .clsSectionHeading h2 {
        font-size: 19px;
    }

    .clsProfileNote {
        padding: 25px;
    }

    .clsSocialCard {
        padding: 16px;
    }

    .clsSocialCard small {
        font-size: 10px;
    }

    .clsPost strong small {
        display: block;
    }

    .clsFooterInner {
        gap: 18px;
    }

    .clsFooterInner p {
        flex-basis: 100%;
        order: 2;
    }

    .clsFooterInner > span {
        margin-left: auto;
    }

    .clsFooterInner > a:last-child {
        order: 3;
    }

    .clsFooter .clsSampleNote {
        margin-top: 23px;
        font-size: 9px;
    }

    .clsFooter {
        padding-top: 25px;
    }

    .clsPageIntro > h1 {
        font-size: 27px;
    }

    .clsPageIntro > p {
        font-size: 12px;
    }

    .clsTab {
        font-size: 11px;
        padding: 8px 14px;
    }

    .clsTabs {
        margin: 25px 0;
        gap: 6px;
    }

    .clsArticle h1 {
        font-size: 26px;
    }

    .clsArticle > .clsArt {
        aspect-ratio: 4/3;
    }

    .clsArticle h2 {
        font-size: 20px;
    }

    .clsArticle p {
        font-size: 13px;
    }

    #idDialogContent {
        grid-template-columns: 1fr;
    }

    #idDialogContent .clsArt {
        max-height: 52vh;
        aspect-ratio: 1/1;
    }

    #idDialogContent .clsArt img {
        object-position: center 30%;
    }

    #idDialogContent .clsDialogText {
        padding: 24px;
    }

    #idDialogContent h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .clsAdminMain {
        padding: 0 18px 30px;
    }

    .clsAdminTopbar {
        font-size: 10px;
        padding: 17px 0;
    }

    .clsAdminTopbar > span {
        gap: 5px;
    }

    .clsAdminSidebar {
        padding: 17px 18px;
    }

    .clsSidebarFoot {
        right: 18px;
        top: 27px;
        font-size: 10px;
    }

    .clsMockBanner {
        font-size: 10px;
        padding: 11px 12px;
        margin: 20px 0;
    }

    .clsAdminHeading {
        align-items: start;
        flex-wrap: wrap;
        margin-top: 25px;
        gap: 15px;
    }

    .clsAdminHeading h1 {
        font-size: 24px;
    }

    .clsAdminHeading .clsButton {
        font-size: 12px;
        padding: 10px 15px;
        gap: 10px;
    }

    .clsStatsGrid {
        gap: 12px;
    }

    .clsStatCard {
        padding: 15px;
    }

    .clsStatCard strong {
        font-size: 29px;
    }

    .clsStatCard span {
        font-size: 11px;
    }

    .clsAdminPanel {
        padding: 16px;
    }

    .clsAdminTable tbody {
        grid-template-columns: 1fr;
    }

    .clsListToolbar {
        flex-wrap: wrap;
    }

    .clsListToolbar select {
        max-width: 100%;
        width: 100%;
    }

    .clsListToolbar input {
        max-width: 100%;
        flex-basis: 100%;
    }

    .clsEditorAside {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .clsFieldRow {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .clsLoginCard {
        padding: 28px;
    }

    .clsAdminHeading p {
        font-size: 11px;
    }

    .clsPreviewFrame {
        height: 350px;
    }

    .clsQuickActions .clsButton {
        width: 100%;
        font-size: 12px;
    }

    .clsUploadItem {
        flex-wrap: wrap;
    }

    .clsUploadName {
        flex-basis: calc(100% - 70px) !important;
    }

    .clsAdminPanel .clsSectionHeading {
        flex-wrap: wrap;
    }

    .clsAdminPanel .clsNewsRow strong {
        font-size: 11px;
    }
}

.clsHeroOrbit {
    transform: none;
}

.clsLoginPage {
    grid-template-columns: minmax(0, 1fr);
}

.clsLoginCard {
    justify-self: center;
}

.clsAdminSidebar {
    min-width: 0;
}

@media (max-width: 800px) {
    .clsAdminLayout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* 長文と操作領域。画像拡大時は作品全体を表示する。 */
body {
    overflow-wrap: anywhere;
}

.clsBrand > span:last-child {
    min-width: 0;
}

.clsBrand {
    flex-shrink: 1;
}

#idWorkDialog .clsArt img {
    object-fit: contain;
}

button,
.clsSmallButton {
    min-height: 44px;
}

.clsArticle table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* プロフィールはアイコン・和名・ローマ字・複数行コメントに絞る。 */
.clsProfileSection {
    padding-block: 48px 16px;
}

.clsProfileCard {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 48px;
    border-radius: var(--radius);
    background: var(--cyan);
    border: 1px solid var(--line);
}

.clsProfileIcon {
    width: 144px;
    height: 144px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 25%;
    border: 6px solid var(--paper);
    background: var(--paper);
}

.clsProfileText {
    min-width: 0;
}

.clsProfileText h1 {
    margin: 0 0 4px;
    font-size: clamp(30px, 3vw, 44px);
}

.clsProfileRoman {
    color: var(--blue);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 20px;
}

.clsProfileComment {
    white-space: pre-wrap;
    margin: 0;
    line-height: 1.9;
}

.clsHomeNews .clsNewsList {
    max-width: 100%;
}

.clsAdminPanel > .clsProfileIcon {
    margin-block: 16px;
}

@media (max-width: 800px) {
    .clsSiteHeader nav {
        gap: 12px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .clsProfileSection {
        padding-block: 24px 8px;
    }

    .clsProfileCard {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
        gap: 24px;
    }

    .clsProfileIcon {
        width: 112px;
        height: 112px;
    }

    .clsProfileRoman {
        margin-bottom: 16px;
    }
}

/* KOMUGI FIELD：紙の重なり・青い罫線・黄色の図形で活動の楽しさを表す。 */
:root {
    --rich-blue: #0868c4;
    --rich-soft: #f5faff;
    --rich-shadow: 0 16px 44px rgb(32 75 118 / 8%);
    --rich-shadow-hover: 0 22px 48px rgb(18 120 215 / 15%);
    --rich-grid: rgb(18 120 215 / 6%);
}

body:not(.clsAdminBody) {
    background: radial-gradient(ellipse at 100% 0, var(--cyan), transparent 48%), var(--paper);
}

.clsSiteHeader {
    position: relative;
    z-index: 2;
}

.clsSiteHeader .clsBrandMark {
    color: var(--rich-blue);
}

.clsSiteHeader nav a {
    transition: color 0.2s;
}

#idMain {
    counter-reset: clsSectionNumber;
}

#idMain > .clsSection,
#idMain > .clsGallerySection {
    counter-increment: clsSectionNumber;
}

#idMain .clsSectionHeading {
    position: relative;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

#idMain .clsSectionHeading::before {
    content: counter(clsSectionNumber, decimal-leading-zero);
    flex-shrink: 0;
    align-self: flex-start;
    font:
        600 48px/1 'Outfit',
        sans-serif;
    color: var(--blue);
    opacity: 0.22;
    letter-spacing: -0.06em;
}

#idMain .clsSectionHeading > div {
    margin-right: auto;
}

#idMain .clsSectionHeading h2 {
    font-size: clamp(23px, 2.4vw, 32px);
    letter-spacing: 0.03em;
}

#idMain .clsSectionHeading .clsEyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--rich-blue);
}

#idMain .clsTextLink {
    color: var(--rich-blue);
}

#idMain .clsSectionHeading .clsTextLink {
    padding: 10px 16px;
    border-radius: 30px;
    background: var(--cyan);
    white-space: nowrap;
}

.clsProfileSection {
    padding-block: 48px 40px;
}

.clsProfileCard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 360px;
    gap: 56px;
    padding: 64px 72px;
    border-radius: 36px;
    border: 1px solid rgb(18 120 215 / 12%);
    background:
        linear-gradient(var(--rich-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--rich-grid) 1px, transparent 1px),
        linear-gradient(120deg, var(--paper) 12%, var(--cyan) 100%);
    background-size:
        32px 32px,
        32px 32px,
        auto;
    box-shadow:
        var(--rich-shadow),
        0 8px 0 -2px var(--cyan),
        0 16px 0 -5px var(--line);
}

.clsProfileCard::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border: 48px solid var(--yellow);
    border-radius: 50%;
    right: -125px;
    top: -145px;
    transform: rotate(-12deg);
    opacity: 0.8;
}

.clsProfileCard::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 160px;
    height: 16px;
    right: -35px;
    bottom: 48px;
    background: var(--blue);
    transform: rotate(-35deg);
    box-shadow: 0 28px 0 rgb(18 120 215 / 13%);
}

.clsProfileCard > .clsProfileIcon {
    width: 200px;
    height: 200px;
    border-width: 10px;
    box-shadow:
        0 12px 26px rgb(18 120 215 / 14%),
        -14px 14px 0 var(--yellow);
    transform: rotate(-5deg);
    transition: transform 0.3s;
}

.clsProfileCard:hover > .clsProfileIcon {
    transform: rotate(-2deg);
}

.clsProfileText {
    position: relative;
    max-width: 660px;
}

.clsProfileText h1 {
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

.clsProfileRoman {
    display: inline-block;
    font-size: 20px;
    color: var(--rich-blue);
    letter-spacing: 0.16em;
    margin-bottom: 24px;
}

.clsProfileRoman::after {
    content: '';
    display: block;
    width: 48px;
    height: 5px;
    margin-top: 14px;
    border-radius: 4px;
    background: var(--yellow);
}

.clsProfileComment {
    font-size: 14px;
    line-height: 2;
}

#idMain .clsEventCard {
    background: var(--paper);
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--rich-shadow);
    border-top: 4px solid var(--blue);
    transition:
        transform 0.25s,
        box-shadow 0.25s;
}

#idMain .clsEventCard:nth-child(even) {
    border-top-color: var(--yellow);
}

#idMain .clsEventCard:hover {
    transform: translateY(-4px);
    box-shadow: var(--rich-shadow-hover);
}

#idMain .clsEventCut {
    border-radius: 16px;
    overflow: hidden;
    transform: rotate(-2deg);
}

#idMain .clsPill {
    background: var(--cyan);
    color: var(--rich-blue);
}

#idMain .clsEventDate {
    color: var(--rich-blue);
    font-weight: 700;
}

#idMain .clsNewsList {
    padding: 8px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--rich-shadow);
}

#idMain .clsNewsRow {
    padding-block: 24px;
    transition: background 0.2s;
}

#idMain .clsNewsRow:last-child {
    border-bottom: 0;
}

#idMain .clsNewsTag {
    background: var(--cyan);
    color: var(--rich-blue);
    border-radius: 6px;
    padding: 4px 8px;
}

#idMain .clsRowArrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--rich-blue);
    background: var(--cyan);
}

#idMain .clsSocialSection {
    border-top: 0;
}

#idMain .clsSocialCard {
    background: var(--paper);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgb(32 75 118 / 5%);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

#idMain .clsSocialCard:hover {
    transform: translateX(4px);
    box-shadow: var(--rich-shadow);
}

#idMain .clsSocialCard .clsSocialIcon {
    border-radius: 14px;
    background: var(--rich-blue);
    color: var(--paper);
}

#idMain .clsSocialCard:nth-child(2) .clsSocialIcon {
    background: var(--yellow);
    color: var(--ink);
}

#idMain .clsGallerySection {
    position: relative;
    background: var(--rich-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background-image: radial-gradient(var(--rich-grid) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
}

#idMain .clsWorkCard {
    padding: 12px;
    border-radius: 24px;
    background: var(--paper);
    box-shadow: var(--rich-shadow);
    border: 1px solid var(--line);
    transition:
        transform 0.25s,
        box-shadow 0.25s;
}

#idMain .clsWorkCard:hover {
    transform: translateY(-6px);
    box-shadow: var(--rich-shadow-hover);
}

#idMain .clsWorkCard .clsArt {
    border-radius: 16px;
}

#idMain .clsWorkCaption {
    padding: 4px 4px 8px;
    gap: 8px;
    flex-wrap: wrap;
}

#idMain .clsWorkCaption strong {
    font-size: 14px;
}

.clsFooter {
    border-top: 0;
    background: var(--ink);
    color: var(--paper);
}

.clsFooter .clsSampleNote,
.clsFooter p,
.clsFooter .clsBrand small {
    color: rgb(255 255 255 / 72%);
}

.clsFooter .clsBrandMark {
    color: var(--yellow);
}

/* 管理側も共通の紙面感を共有し、入力領域は簡潔に保つ。 */
.clsAdminPanel,
.clsStatCard,
.clsLoginCard {
    box-shadow: var(--rich-shadow);
}

.clsAdminTopbar {
    border-bottom: 3px solid var(--cyan);
}

@media (max-width: 1100px) {
    .clsProfileCard {
        gap: 36px;
        padding: 48px 40px;
    }

    .clsProfileCard > .clsProfileIcon {
        width: 168px;
        height: 168px;
    }
}

@media (max-width: 800px) {
    .clsProfileCard {
        padding: 40px 32px;
        gap: 32px;
        min-height: 320px;
    }

    .clsProfileCard > .clsProfileIcon {
        width: 140px;
        height: 140px;
    }

    .clsProfileComment {
        font-size: 13px;
    }

    #idMain .clsSectionHeading {
        gap: 12px;
    }

    #idMain .clsSectionHeading::before {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .clsProfileSection {
        padding-block: 24px 24px;
    }

    .clsProfileCard {
        border-radius: 28px;
        gap: 28px;
        padding: 36px 28px;
        min-height: 0;
    }

    .clsProfileCard > .clsProfileIcon {
        width: 128px;
        height: 128px;
        border-width: 7px;
    }

    .clsProfileCard::before {
        right: -140px;
        top: -150px;
    }

    .clsProfileCard::after {
        bottom: auto;
        top: 150px;
        opacity: 0.3;
    }

    .clsProfileText h1 {
        font-size: 44px;
    }

    .clsProfileRoman {
        font-size: 16px;
        margin-bottom: 20px;
    }

    #idMain .clsSectionHeading {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #idMain .clsSectionHeading::before {
        font-size: 32px;
    }

    #idMain .clsSectionHeading > div {
        min-width: 0;
        flex: 1 1 calc(100% - 44px);
    }

    #idMain .clsSectionHeading h2 {
        font-size: 21px;
    }

    #idMain .clsSectionHeading > .clsTextLink {
        margin-left: 44px;
        padding: 6px 12px;
    }

    #idMain .clsEventCard {
        padding: 18px;
        border-radius: 20px;
        gap: 16px;
        grid-template-columns: 90px minmax(0, 1fr);
    }

    #idMain .clsEventDate {
        font-size: 18px;
    }

    #idMain .clsNewsList {
        padding: 4px 16px;
    }

    #idMain .clsNewsRow {
        padding-block: 20px;
    }

    #idMain .clsWorkCard {
        padding: 8px;
        border-radius: 18px;
    }

    #idMain .clsWorkCaption strong {
        font-size: 12px;
    }

    #idMain .clsWorkCard .clsArt {
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clsProfileCard > .clsProfileIcon,
    #idMain .clsEventCard:hover,
    #idMain .clsWorkCard:hover,
    #idMain .clsSocialCard:hover {
        transform: none;
    }
}

/* 通販・電子版：表紙と販売形式を並べて比較できる商品カード。 */
.clsSalesGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.clsSalesCard {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--rich-shadow);
}

.clsSalesCover {
    position: relative;
    align-self: start;
    padding-bottom: 24px;
}

.clsSalesCover img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px 16px 16px 8px;
    box-shadow: 6px 6px 0 var(--cyan);
}

.clsSalesFormat {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 5px 12px;
    border-radius: 30px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
}

.clsSalesInfo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.clsSalesInfo .clsEyebrow {
    color: var(--rich-blue);
}

.clsSalesInfo h3 {
    font-size: 21px;
    margin-bottom: 12px;
}

.clsSalesInfo p {
    font-size: 12px;
    color: var(--ink);
}

.clsSalesBottom {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.clsSalesBottom strong {
    font-size: 22px;
    color: var(--rich-blue);
}

.clsSalesBottom small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
}

.clsSalesBottom .clsButton {
    font-size: 11px;
    padding: 12px 16px;
}

.clsVisuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1100px) {
    .clsSalesCard {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 20px;
    }
}

@media (max-width: 800px) {
    .clsSalesGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .clsSalesCard {
        padding: 20px;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 16px;
    }

    .clsSalesInfo h3 {
        font-size: 18px;
    }

    .clsSalesBottom strong {
        font-size: 20px;
    }

    .clsSalesBottom .clsButton {
        padding: 10px 12px;
    }
}

/* イベント別の縦横比を保持し、サークルカット全体を見せる。 */
#idMain .clsEventCut {
    aspect-ratio: auto;
    max-height: none;
    align-self: start;
    transform: none;
    display: flex;
    flex-direction: column;
}

#idMain .clsEventCut img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

#idMain .clsEventCut span {
    position: static;
    width: 100%;
    flex-shrink: 0;
    background: var(--cyan);
    color: var(--ink);
}

/* 作品詳細は一覧用サムネイルのトリミングや重ね文字を引き継がない。 */
#idWorkDialog {
    width: min(1040px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    border-radius: 24px;
    background: var(--paper);
    overflow: auto;
    padding: 0;
}

.clsWorkDialogHeader {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.clsWorkDialogHeader > span {
    font-size: 11px;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--rich-blue);
}

#idWorkDialog .clsDialogClose {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 96px;
    height: 44px;
    padding: 0 16px;
    border-radius: 30px;
    border: 1px solid var(--line);
    background: var(--rich-soft);
    color: var(--ink);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    transition:
        background 0.2s,
        color 0.2s;
}

#idWorkDialog .clsDialogClose:hover {
    background: var(--cyan);
    color: var(--rich-blue);
}

#idDialogContent {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.clsWorkDialogVisual {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--rich-soft);
}

.clsWorkDialogVisual img {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 172px);
    object-fit: contain;
    border-radius: 8px;
}

#idDialogContent .clsDialogText {
    padding: 40px 32px;
    align-self: center;
    min-width: 0;
}

#idDialogContent .clsDialogText .clsEyebrow {
    display: block;
    margin: 0 0 16px;
}

#idDialogContent .clsDialogText h2 {
    margin: 0 0 20px;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.5;
}

#idDialogContent .clsDialogText p {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.9;
}

#idDialogContent .clsDialogText small {
    display: block;
    line-height: 1.7;
}

@media (max-width: 700px) {
    #idWorkDialog {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 20px;
    }

    .clsWorkDialogHeader {
        padding: 8px 16px;
    }

    #idDialogContent {
        grid-template-columns: minmax(0, 1fr);
    }

    .clsWorkDialogVisual {
        padding: 20px;
    }

    .clsWorkDialogVisual img {
        max-height: 48dvh;
    }

    #idDialogContent .clsDialogText {
        padding: 28px 24px 32px;
    }

    #idDialogContent .clsDialogText h2 {
        margin-bottom: 16px;
    }
}

/* 作品に関連するFANBOX・Fantiaの記事導線。未設定のサービスは描画しない。 */
.clsWorkArticleLinks {
    margin: 8px 0 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

#idDialogContent .clsWorkArticleLinks h3 {
    font-size: 13px;
    margin: 0 0 12px;
    color: var(--ink);
}

.clsWorkArticleLinks > div {
    display: grid;
    gap: 10px;
}

.clsWorkArticleLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--rich-soft);
    transition: background 0.2s;
}

.clsWorkArticleLink > span:first-child {
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.clsWorkArticleLink > span:nth-child(2) {
    font-size: 11px;
}

.clsArticleFanbox {
    border-left: 4px solid var(--blue);
    color: var(--rich-blue);
}

.clsArticleFantia {
    border-left: 4px solid var(--yellow);
    color: var(--ink);
}

.clsWorkArticleLink:hover {
    background: var(--cyan);
}

/* 管理操作と画像選択 */
.clsRowActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.clsRowActions .clsSmallButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #cce3f7;
    border-radius: 12px;
    background: #fff;
    color: #0868c4;
    font: 600 13px inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s,
        box-shadow 0.2s;
}

.clsRowActions .clsSmallButton:hover {
    background: #eaf8ff;
    box-shadow: 0 4px 12px rgb(18 120 215 / 10%);
}

.clsRowActions .clsSmallButton.clsDanger {
    color: #b8434b;
    border-color: #f1d8db;
    background: #fff;
}

.clsRowActions .clsSmallButton.clsDanger:hover {
    background: #fff0f1;
}

.clsRowActions .clsSmallButton span {
    font-size: 20px;
    line-height: 1;
}

.clsRowActions a.clsSmallButton span[aria-hidden='true'] {
    transform: scaleX(-1);
}

.clsUploadBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 2px dashed #bddbf2;
    border-radius: 18px;
    padding: 28px 20px;
    background: #f5faff;
    transition:
        background 0.2s,
        border-color 0.2s;
}

.clsUploadBox.clsDragging {
    border-color: #1278d7;
    background: #def2ff;
}

.clsUploadBox .clsUploadIcon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #e0f0ff;
    color: #0868c4;
    font-size: 26px;
}

.clsUploadBox .clsUploadPicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 12px;
    background: #1278d7;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
}

.clsUploadPicker input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.clsUploadPicker:focus-within {
    outline: 3px solid #20334a;
    outline-offset: 4px;
}

.clsUploadBox small {
    text-align: center;
    overflow-wrap: anywhere;
}

.clsAuthHint {
    margin-top: 24px;
    font-weight: 700;
    color: #20334a;
}

.clsAuthDivider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #718398;
    font-size: 12px;
}

.clsAuthDivider::before,
.clsAuthDivider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e4edf2;
}

.clsPasskeyButton {
    width: 100%;
}

/* ロゴ取得中は既定ロゴを描画せず、配置用の領域だけを維持する。 */
.clsBrandPending > * {
    visibility: hidden;
}

/* 読み込み表示は領域内に留め、先に表示した見出しや装飾を維持する。 */
.clsRegionLoading,
.clsRegionError {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 120px;
    padding: 24px;
}

.clsSkeleton {
    display: block;
    width: 100%;
    height: 72px;
    border-radius: var(--radius);
    background: var(--cyan);
    border: 1px solid var(--line);
    animation: skeletonPulse 1.6s ease-in-out infinite alternate;
}

.clsSkeletonLayout {
    display: flex;
    gap: 24px;
    align-items: center;
}

.clsSkeletonVisual {
    width: 28%;
    height: 160px;
    flex-shrink: 0;
}

.clsSkeletonText {
    flex: 1;
    min-width: 0;
}

.clsSkeletonLine {
    height: 16px;
    margin: 16px 0;
}

.clsSkeletonLine:last-child {
    width: 65%;
}

/* 再取得は小さなインジケーターに留め、全画面を覆わない。 */
.clsRegionSpinner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    padding: 24px;
    color: var(--blue);
}

.clsSpinner {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 3px solid var(--line);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}

@keyframes skeletonPulse {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

@keyframes spinnerRotate {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clsSkeleton,
    .clsSpinner {
        animation: none;
    }
}

.clsRegionError p {
    margin: 0 0 16px;
}


/* ブランド画像の取得中も、表示枠の中で待機状態を伝える。 */
.clsBrandPending {
    position: relative;
}

.clsBrandPending::after {
    content: "";
    position: absolute;
    inset: 10% 0;
    border-radius: 8px;
    background: var(--cyan);
    border: 1px solid var(--line);
    animation: skeletonPulse 1.6s ease-in-out infinite alternate;
}

.clsAvatarPending {
    color: transparent;
    animation: skeletonPulse 1.6s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .clsBrandPending::after,
    .clsAvatarPending {
        animation: none;
    }
}

/* 処理待ちをモーダル表示し、背景へのクリック・フォーカス移動を防ぐ。 */
.clsSaveDialog {
    width: min(320px, calc(100% - 40px));
    max-height: calc(100% - 40px);
    padding: 32px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: white;
    color: var(--ink);
    box-shadow: 0 12px 40px rgb(18 45 65 / 20%);
}

.clsSaveDialog::backdrop {
    background: rgb(18 45 65 / 30%);
}

.clsSaveProgress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    font-weight: 700;
}

.clsSaveProgress .clsSpinner {
    width: 36px;
    height: 36px;
}