/*
 * z-index 階層トークン (--cyfons-z-*) は cyfons-tokens.css に切り出した (#950)。
 * frontend.css を読み込まない管理画面 (chat-view 等) でも一元管理を効かせるため、
 * トークン定義をフロント / 管理画面の双方で読み込む専用ファイルへ分離している。
 */

/* 共通 */
.cyfons-Template,
.cyfons-Template * {
    box-sizing: border-box;
}

.cyfons-Template {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cyfons-Template_Inner {
    width: 100%;
    max-width: 1366px;
    padding: 0 1rem;
    margin: 3rem auto;
    display: flex;
}
@media (min-width: 768px) {
    .cyfons-Template_Inner {
        padding: 0 3rem;
    }
}

.cyfons-Template_Main {
    width: 100%;
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    overflow-x: clip;
}

.cyfons-Template_Sidebar {
    width: 300px;
    margin-left: 3rem;
}

@media (max-width: 1023px) {
    .cyfons-Template_Inner {
        flex-direction: column;
    }

    .cyfons-Template_Sidebar {
        width: 100%;
        margin-top: 3rem;
        margin-left: 0;
    }
}

.cyfons-Template_Main_Thumbnail img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    margin-bottom: 2rem;
}

.cyfons-Template_Main_Title {
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .cyfons-Template_Main_Title {
        font-size: 2rem;
    }
}

/* ショートコード */
.cyfons-Shortcode+.cyfons-Shortcode {
    margin-top: 3rem;
}

.cyfons-Shortcode_Head {
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #0F0C0C;
    line-height: 1.2;
    padding-bottom: .5em;
    margin-bottom: 8%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5em;
}

/* キーボード操作時のフォーカス可視化（マウスクリックでは表示しない） */
.cyfons-MailReplyList_Item_Link:focus-visible {
    outline: 2px solid #0F0C0C;
    outline-offset: 2px;
}

/* #941: メール返信履歴一覧 (独自レイアウト)
   表示順序: 日時 → タイトル → 本文プレビュー → ユニットバッジ
   PC: 1行に並べる / モバイル: 縦積み */
.cyfons-MailReplyList_Items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cyfons-MailReplyList_Item {
    border-bottom: 1px solid #e0e0e0;
}

.cyfons-MailReplyList_Item:last-child {
    border-bottom: none;
}

.cyfons-MailReplyList_Item_Link {
    display: flex;
    align-items: baseline;
    /* PC: 1行固定 (折り返さない)。長すぎる本文はテキスト省略で切り詰める */
    flex-wrap: nowrap;
    gap: .25em .8em;
    padding: .9em .5em;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
    text-align: left;
    min-width: 0;
}

.cyfons-MailReplyList_Item_Link:hover,
.cyfons-MailReplyList_Item_Link:focus {
    background: #f5f5f5;
    text-decoration: none;
}

/* PC レイアウト: 各要素を1行に並べる */
.cyfons-MailReplyList_Item_Date {
    flex: 0 0 auto;
    font-size: .85em;
    color: #666;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cyfons-MailReplyList_Item_Title {
    flex: 0 1 auto;
    font-weight: bold;
    /* タイトルが極端に長い場合は省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

.cyfons-MailReplyList_Item_Excerpt {
    flex: 1 1 auto;
    font-size: .9em;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ユニットバッジは右寄せ。color #444 で WCAG AA (5.74:1 against #e8e8e8) */
.cyfons-MailReplyList_Item_UnitBadge {
    flex: 0 0 auto;
    display: inline-block;
    background: #e8e8e8;
    color: #444;
    padding: .25em .5em;
    border-radius: 2px;
    font-size: .75em;
    font-weight: normal;
    line-height: 1.3;
    margin-left: auto; /* 右寄せ */
    white-space: nowrap;
}

/* モバイル: 縦積みで見やすく
   日時を最上行 / タイトルを次行 / 本文を3行までクランプ / バッヂを最下行 */
@media (max-width: 767px) {
    .cyfons-MailReplyList_Item_Link {
        display: block;
    }
    .cyfons-MailReplyList_Item_Date {
        display: block;
        margin-bottom: .2em;
    }
    .cyfons-MailReplyList_Item_Title {
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        margin-bottom: .2em;
    }
    .cyfons-MailReplyList_Item_Excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.4em * 3);
        line-height: 1.4;
        margin-bottom: .3em;
    }
    .cyfons-MailReplyList_Item_UnitBadge {
        margin-left: 0;
    }
}

/* #941: メール返信履歴詳細画面 */
.cyfons-MailReplyDetail_Body {
    padding: 0;
    margin-bottom: 1em;
}

.cyfons-MailReplyDetail_Header {
    border-bottom: 1px solid #eee;
    padding-bottom: .8em;
    margin-bottom: 1em;
}

.cyfons-MailReplyDetail_Title {
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    word-break: break-word;
    /* 親 flex の縮退を許可 */
    min-width: 0;
}

.cyfons-MailReplyDetail_Date {
    font-size: .85em;
    color: #666;
    margin: 0;
}

.cyfons-MailReplyDetail_Message {
    font-size: 1em;
    line-height: 1.7;
    color: #333;
    word-break: break-word;
    /* プレーンテキスト + nl2br されている */
}

/* タイトル行: 返信タイトル + 元メールリンクを横並びにする
   PC: 1行 (タイトル左 / リンク右) / モバイル: タイトルが長ければリンクは下に折り返し */
.cyfons-MailReplyDetail_TitleRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5em 1em;
    flex-wrap: wrap;
    margin: 0 0 .4em;
}

.cyfons-MailReplyDetail_TitleRow .cyfons-MailReplyDetail_Title {
    flex: 1 1 auto;
    min-width: 0;
}

.cyfons-MailReplyDetail_OriginalLink {
    flex: 0 0 auto;
    color: #555;
    text-decoration: none;
    font-size: .85em;
    white-space: nowrap;
    /* タイトルとのフォントサイズ差で下にずれて見えないよう、行ボックスを揃える */
    line-height: 1.4;
}

.cyfons-MailReplyDetail_OriginalLink:hover {
    text-decoration: underline;
}

.cyfons-MailReplyDetail_BackLink {
    text-align: left;
    margin: 0;
}

.cyfons-MailReplyDetail_BackLink a {
    color: #555;
    text-decoration: none;
    font-size: .9em;
}

.cyfons-MailReplyDetail_BackLink a:hover {
    text-decoration: underline;
}

.cyfons-MailReply_ListLink {
    text-align: right;
    margin-top: .5em;
}

.cyfons-MailReply_ListLink a {
    color: #555;
    text-decoration: none;
    font-size: .9em;
}

.cyfons-MailReply_ListLink a:hover {
    text-decoration: underline;
}

/* #941: /mail/ ページ ユニット一覧の下に出す「メール返信履歴を見る」リンク
   他のユニット一覧 (.list .cyfons-Shortcode_List_Item) と同じくらいの存在感を持たせる */
.cyfons-MailUnits_HistoryLink {
    margin-top: 1.5rem;
}

.cyfons-MailUnits_HistoryLink a {
    display: block;
    padding: 1em 1.2em;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    color: #333;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease;
}

.cyfons-MailUnits_HistoryLink a:hover,
.cyfons-MailUnits_HistoryLink a:focus {
    background: #f0f0f0;
    border-color: #bbb;
    text-decoration: none;
}

.cyfons-MailReplyList_Empty {
    padding: 1.5em .5em;
    text-align: center;
    color: #888;
}

.cyfons-Template_Sidebar .cyfons-Shortcode_Head {
    font-size: 1.2em;
}

@media (min-width: 768px) {
    .cyfons-Shortcode_Head {
        font-size: 1.8em;
        margin-bottom: 4%;
    }
}

.cyfons-Shortcode_List {
    list-style: none;
    padding: 0;
}

.cyfons-Shortcode_List.card {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
}

.cyfons-Shortcode_List_Item {
    width: 100%;
}
.list .cyfons-Shortcode_List_Item {
    margin-bottom: 10px;
}

/* CyfonsMailListComponent専用のスタイル */
.cyfons-Shortcode_List_Item_Data_Main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cyfons-Shortcode_List_Item_Data_Main>div {
    flex: 1;
    text-align: left;
}

.cyfons-Shortcode_List_Item_Date {
    text-align: right;
}

/* ===== メールリスト専用スタイル（整理版） ===== */

/* 基本構造 */
.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item {
    margin-top: 0;
    display: block;
}

.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Data {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease;
    padding: 12px 0;
}

.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Anchor {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Anchor:hover .cyfons-Shortcode_List_Item_Data {
    background-color: rgba(0, 0, 0, 0.02);
}

/* PC画面用レイアウト（デスクトップファースト） */
.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Data_Main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Data_Main_Content {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Data_Title {
    display: inline;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 5px;
    line-height: 1.4;
}

.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Data_Content {
    display: inline;
    font-size: 0.8rem;
    color: #666;
    vertical-align: baseline;
}

.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Date {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.7rem;
    color: #888;
    min-width: 85px;
    white-space: nowrap;
}

.cyfons-Shortcode_List.mails.list2 .cyfons-Shortcode_List_Item_Data {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.cyfons-Shortcode_List.mails.list2 .cyfons-Shortcode_List_Item_Line {
    display: block;
    overflow: hidden;
}

.cyfons-Shortcode_List.mails.list2 .cy-list2-date {
    font-size: 0.9rem;
    color: #444;
    font-weight: 500;
    margin-bottom: 4px;
}

.cyfons-Shortcode_List.mails.list2 .cy-list2-title {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.4em * 2);
}

.cyfons-Shortcode_List.mails.list2 .cy-list2-title .cyfons-Shortcode_List_Item_Data_Title {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

/* 未読メール表示 */
.cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item:not(.viewed) .cyfons-Shortcode_List_Item_Data_Title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #84C318;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 3px rgba(132, 195, 24, 0.5);
}

/* スマホ画面用レイアウト（縦積み表示で日付を本文の下に配置） */
@media (max-width: 767px) {
    /* メインレイアウトをブロック表示に変更 */
    .cyfons-Template .cyfons-Shortcode .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item .cyfons-Shortcode_List_Item_Anchor .cyfons-Shortcode_List_Item_Data .cyfons-Shortcode_List_Item_Data_Main {
        display: block;
        width: 100%;
    }

    .cyfons-Template .cyfons-Shortcode .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item .cyfons-Shortcode_List_Item_Anchor .cyfons-Shortcode_List_Item_Data .cyfons-Shortcode_List_Item_Data_Main .cyfons-Shortcode_List_Item_Data_Main_Content {
        display: block;
        width: 100%;
        margin-bottom: 5px;
        overflow: visible;
        white-space: normal;
        text-overflow: unset;
    }

    .cyfons-Template .cyfons-Shortcode .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item .cyfons-Shortcode_List_Item_Anchor .cyfons-Shortcode_List_Item_Data .cyfons-Shortcode_List_Item_Data_Main .cyfons-Shortcode_List_Item_Data_Main_Content .cyfons-Shortcode_List_Item_Data_Title {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 3px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cyfons-Template .cyfons-Shortcode .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item .cyfons-Shortcode_List_Item_Anchor .cyfons-Shortcode_List_Item_Data .cyfons-Shortcode_List_Item_Data_Main .cyfons-Shortcode_List_Item_Data_Main_Content .cyfons-Shortcode_List_Item_Data_Content {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9rem;
        margin-left: 0;
        margin-bottom: 0;
        line-height: 1.4;
        max-height: calc(1.4em * 3);
        white-space: normal;
    }

    /* 日付要素を本文の下に表示 */
    .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item_Date {
        display: block !important;
        text-align: left !important;
        font-size: 0.75rem !important;
        margin-top: 5px !important;
        margin-left: 0 !important;
        color: #888 !important;
        flex-shrink: unset !important;
        white-space: unset !important;
        min-width: unset !important;
    }
}

/* スマホ画面対応のスタイル */
@media (max-width: 768px) {
    .cyfons-Shortcode_List_Item_Data_Main {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cyfons-Shortcode_List_Item_Data_Main>div {
        flex: 1;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cyfons-Shortcode_List_Item_Data_Content {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cyfons-Shortcode_List_Item_Date {
        text-align: right;
        flex-shrink: 0;
    }

    /* メールリスト専用の日付スタイルを維持 */
    .cyfons-Template .cyfons-Shortcode .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item .cyfons-Shortcode_List_Item_Date {
        display: block;
        text-align: left;
        font-size: 0.75rem;
        margin-top: 5px;
        margin-left: 0;
        color: #888;
        flex-shrink: unset;
        white-space: unset;
        min-width: unset;
    }
}

/* @media (width < 550px) {
    .cyfons-Shortcode_List_Item.card {
        width: 100%;
    }

    .cyfons-Shortcode_List_Item.card:not(:first-of-type) {
        margin-top: 8%;
    }
} */

@media (max-width: 767px) {
    .cyfons-Shortcode_List_Item.card {
        width: 48%;
    }

    .cyfons-Shortcode_List_Item.card:not(:nth-of-type(2n+1)) {
        margin-left: 4%;
    }

    .cyfons-Shortcode_List_Item.card:nth-of-type(n+3) {
        margin-top: 2%;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    .cyfons-Shortcode_List_Item.card {
        width: 32%;
    }

    .cyfons-Shortcode_List_Item.card:not(:nth-of-type(3n+1)) {
        margin-left: 2%;
    }

    .cyfons-Shortcode_List_Item.card:nth-of-type(n+4) {
        margin-top: 2%;
    }
}

@media (min-width: 1366px) {
    .cyfons-Shortcode_List_Item.card {
        width: 23.5%;
    }

    .cyfons-Shortcode_List_Item.card:not(:nth-of-type(4n+1)) {
        margin-left: 2%;
    }

    .cyfons-Shortcode_List_Item.card:nth-of-type(n+5) {
        margin-top: 2%;
    }
}

.cyfons-Shortcode_List_Item_Anchor {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cyfons-Shortcode_List_Item_Anchor:hover {
    opacity: .5;
}

.cyfons-Shortcode_List_Item_Thumb {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

.cyfons-Shortcode_List_Item_Thumb img {
    border: 1px solid #efefef;
    width: 100%;
    height: auto;
    display: block;
}

/* カードモード用の画像スタイル - Safari対応 */
.cyfons-Shortcode_List.card .cyfons-Shortcode_List_Item_Thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    overflow: hidden;
    background-color: #f5f5f5;
}

.cyfons-Shortcode_List.card .cyfons-Shortcode_List_Item_Thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-object-fit: cover; /* Safari用 */
}

.deleted .cyfons-Shortcode_List_Item_Thumb img {
    filter: grayscale(100%);
}

/* タイトル省略表示 */
.cyfons-title-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}


.cyfons-Shortcode_List_Item_Data_Title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
}

/* メインコンテンツのカード表示用タイトル省略 */
.cyfons-Template_Main .cyfons-Shortcode_List.card .cyfons-Shortcode_List_Item_Data_Title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: calc(1.4em * 2);
}

/* unitsクラスがある場合は1行表示に上書き */
.cyfons-Template_Main .cyfons-Shortcode_List.units.card .cyfons-Shortcode_List_Item_Data_Title {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 1.4em;
}

/* タイトル行のレイアウトを調整 - 1行表示に変更 */
.cyfons-Shortcode_List_Item_Data_Title.unit {
    display: flex;
    flex-direction: row;
    /* 横方向に並べる（1行表示） */
    align-items: center;
    /* 縦方向は中央揃え */
    justify-content: space-between;
    /* 間にスペースを入れる */
    margin-top: 0;
    padding-top: 0;
}

.cyfons-Shortcode_List_Item_Data_Title .title-container {
    display: flex;
    align-items: flex-start;
    /* 中央寄せから上寄せに変更 */
    flex: 1;
    min-width: 0;
    /* タイトルが長い場合の省略表示を可能にする */
}

.cyfons-Shortcode_List_Item_Data_Unit {
    font-size: 12px;
    opacity: .7;
}

.cyfons-Shortcode_List_Item_Data_Meta {
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.cyfons-Shortcode_List_Item_Data_Meta i {
    margin-right: 2px;
}

.cyfons-Shortcode_List_Item_Data_Meta span:not(:first-of-type) {
    margin-left: 4px;
}

.cyfons-Shortcode_List_Item_Data_Meta .unit {
    background-color: rgba(34, 34, 34, .12);
    font-weight: bold;
    color: rgba(34, 34, 34, .7);
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cyfons-Shortcode_List_Item_Data_Meta .published {
    color: rgba(34, 34, 34, .7);
    min-width: max-content;
}

.cyfons-Shortcode_List_Item_Data_Limit {
    color: #FE4A49;
    font-size: 12px;
    font-weight: bold;
    margin-top: 4px;
}

/* ユニット名を左寄せに */
.cyfons-Shortcode_List_Item_Data_Title .unit-name {
    flex-grow: 1;
    text-align: left;
}

/* 未読数のスタイル - 緑の背景に白文字 - 1行表示用に調整 */
/* タイトル非表示時はサムネイル内(.cyfons-Shortcode_List_Item_Thumb)へ同じバッジを出すため、
   このセレクタで一緒に拾う。ここで拾わないと header.css の裸 .unread-count
   （ヘッダーメニュー用の赤い円バッジ #ff4b4b）にフォールバックしてしまい、
   「未読=緑」の意味論（背景色 #4CAF50）が崩れる */
.cyfons-Shortcode_List_Item_Data_Title .unread-count,
.cyfons-Shortcode_List_Item_Thumb .unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 16px;
    padding: 0 5px;
    font-size: 0.8em;
    font-weight: bold;
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
    margin-left: 8px;
    /* 左側に余白を追加 */
    margin-top: 0;
    /* 上部の余白を削除 */
}

/* 未読数が0の場合は非表示 */
.cyfons-Shortcode_List_Item_Data_Title .unread-count:empty,
.cyfons-Shortcode_List_Item_Thumb .unread-count:empty {
    display: none;
}

/* 未読数表示用スタイル */
#unread-count-mail.unread-count {
    background-color: #28a745;
    /* 緑色 */
    color: #fff;
    /* 白文字 */
    border-radius: 40%;
    padding: 0.4em 0.6em;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
    margin-left: 0.5em;
}


/* list */
.list .cyfons-Shortcode_List_Item_Anchor {
    display: flex;
    text-decoration: none;
}

.list .cyfons-Shortcode_List_Item_Thumb {
    width: 20%;
    flex-shrink: 0;
}

.list .cyfons-Shortcode_List_Item_Thumb {
    position: relative;
    width: 20%;
    flex-shrink: 0;
}

.list .cyfons-Shortcode_List_Item_Thumb::before {
    content: "";
    display: block;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
}

.list .cyfons-Shortcode_List_Item_Thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 親の padding-bottom: 56.25% で 16:9 コンテナを作っているので
       height は 100% にして object-fit: cover を効かせる
       (height: auto だと 16:9 以外の画像でコンテナをはみ出す) */
    height: 100%;
    object-fit: cover;
    -webkit-object-fit: cover; /* Safari用 */
    max-width: none; /* max-widthを削除 */
}

.list .cyfons-Shortcode_List_Item_Date {
    margin-left: 1em;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: left;
}

.list .cyfons-Shortcode_List_Item_Data {
    flex: 1;
    margin-left: 2%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 上寄せに変更 */
    overflow: hidden;
    padding-top: 0;
    /* 上部の余白を削除 */
}

.list .cyfons-Shortcode_List_Item_Data_Title.unit {
    display: flex;
    flex-direction: row;
    /* 横方向に並べる（1行表示） */
    align-items: center;
    /* 縦方向は中央揃え */
    justify-content: space-between;
    /* 要素間にスペースを入れる */
    width: 100%;
    margin-top: 0;
    padding-top: 0;
}

.list .cyfons-Shortcode_List_Item_Data_Title .title-container {
    display: flex;
    align-items: flex-start;
    /* 中央寄せから上寄せに変更 */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
}

.list .cyfons-Shortcode_List_Item_Data_Main {
    flex: 1;
    /* 利用可能なスペースを埋める */
    min-width: 0;
    /* flexアイテムが縮小できるように */
    overflow: hidden;
    /* 子要素のはみ出しを隠す */
    white-space: nowrap;
    /* タイトルと内容が一行になるように */
}

.list .cyfons-Shortcode_List_Item_Data_Title {
    font-size: 1rem;
    display: inline;
    /* インライン要素として表示 */
}

@media (min-width: 768px) {
    .list .cyfons-Shortcode_List_Item_Data_Title {
        font-size: 1.2rem;
    }
}

.list .cyfons-Shortcode_List_Item_Data_Content {
    display: inline-block;
    /* 省略記号のためにインラインブロック化 */
    overflow: hidden;
    /* はみ出した内容を隠す */
    text-overflow: ellipsis;
    /* はみ出した部分を...で表示 */
    white-space: nowrap;
    /* 折り返しを防ぐ */
    vertical-align: baseline;
    /* タイトルとの垂直位置を調整 */
}

@media (max-width: 768px) {
    /* カードモード: スマホ用のスタイル調整 */
    .cyfons-Shortcode_List.card .cyfons-Shortcode_List_Item_Thumb {
        padding-bottom: 56.25%; /* 16:9を維持 */
    }

    /* リストモード: スマホ用のサムネイル調整 */
    .list .cyfons-Shortcode_List_Item_Thumb {
        width: 30%; /* スマホでは少し大きく */
        min-width: 100px;
    }

    .list .cyfons-Shortcode_List_Item_Thumb::before {
        padding-bottom: 56.25%; /* 16:9を維持 */
    }
}

@media (max-width: 1023px) {
    .list .cyfons-Shortcode_List_Item_Thumb {
        width: 30%;
    }
}

@media (max-width: 767px) {
    .list .cyfons-Shortcode_List_Item_Thumb {
        width: 35%;
    }
}

/* sidemenu */
.cyfons-Shortcode_List.sidemenu {
    margin: 0;
}

.sidemenu .cyfons-Shortcode_List_Item:not(:first-of-type) {
    border-top: 1px solid #efefef;
}

.sidemenu .cyfons-Shortcode_List_Item_Anchor {
    position: relative;
    display: flex;
    align-items: flex-start;
    align-items: center;
    padding: 1rem 0;
    padding-right: 1rem; /* arrow */
}

.sidemenu .cyfons-Shortcode_List_Item_Anchor svg {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0.6;
    margin-left: 10px;
    width: 16px;
    height: 16px;
}

.sidemenu .cyfons-Shortcode_List_Item_Thumb {
    width: 35%;
    min-width: 35%;
    margin: 0;
    margin-right: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidemenu .cyfons-Shortcode_List_Item_Thumb img {
    width: 100%;
    height: auto;
    max-height: 135px;
    object-fit: contain;
    object-position: center;
}

.sidemenu .cyfons-Shortcode_List_Item_Data {
    flex: 1;
    min-width: 0;
    /* これによりテキストのはみ出しが正しく処理される */
}

.sidemenu .cyfons-Shortcode_List_Item_Data_Title {
    line-height: 1.3;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: .85rem;
}

/* コンテンツタイトルテキスト: ドットをflex itemにすることで改行を防ぎ、テキストのみにline-clampを適用 */
.sidemenu .cyfons-Shortcode_List_Item_Data_Title .content-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* 未読ドットをflex itemとして固定幅で配置（テキストフローに影響しない） */
.sidemenu .cyfons-Shortcode_List:not(.units) .cyfons-Shortcode_List_Item:not(.viewed) .cyfons-Shortcode_List_Item_Data_Title::before {
    flex-shrink: 0;
}

/* ユニットタイトル（未読バッジあり）はflex + align-items: center */
.sidemenu .cyfons-Shortcode_List_Item_Data_Title.unit {
    align-items: center;
}

@media (max-width: 767px) {
    .sidemenu .cyfons-Shortcode_List_Item_Data_Title {
        max-height: 90px;
        padding-right: 16px;
    }

    .sidemenu .cyfons-Shortcode_List_Item_Data_Title .content-title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .sidemenu .cyfons-Shortcode_List_Item_Thumb img {
        height: auto;
        max-height: 110px;
        /* モバイル用にサムネイル高さ調整 */
        object-fit: contain;
    }
}

@media (max-width: 479px) {
    .sidemenu .cyfons-Shortcode_List_Item_Thumb {
        width: 30%;
        min-width: 30%;
    }
}

/* 既読・未読デザイン */
.cyfons-Shortcode_List:not(.units) .cyfons-Shortcode_List_Item:not(.viewed) .cyfons-Shortcode_List_Item_Data_Title::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 2px;
    background-color: #84C318;
    box-shadow: 0 0 3px rgba(132, 195, 24, 0.5);
}

/* タイトル非表示時: サムネイルにタイトルが入っている運用向け。未読表示はサムネイル右下へ退避する */
/* .cyfons-Shortcode_List_Item_Anchor 配下に限定する。空表示("公開準備中です。"等)の
   <li> はアンカーを持たない構造(getEmptyUnitHTML/getContentEmptyHTML)のため、
   限定しないと空表示メッセージまで巻き込んで消してしまう */
/* 基本セレクタは :not(.keep-title) の分で (0,6,0) となり、競合する
   .cyfons-Shortcode_List.units.card .cyfons-Shortcode_List_Item_Data_Title.unit{display:flex}
   の (0,5,0) に単独で勝つ。それでも .unit 付きを重ねてあるのは、将来 :not(.keep-title) が
   外れると (0,5,0) で並びソース順の後勝ちで display:flex に負けるための保険 */
/* :not(.keep-title) は、フォルダの isShowName やLPの inactive_caption など、
   管理者が明示指定したタイトル文言（サムネイルへの焼き込みが保証されない）を
   hide-title の一括非表示から除外するための出口 */
.cyfons-Shortcode_List.card.hide-title .cyfons-Shortcode_List_Item_Anchor .cyfons-Shortcode_List_Item_Data_Title:not(.keep-title),
.cyfons-Shortcode_List.units.card.hide-title .cyfons-Shortcode_List_Item_Anchor .cyfons-Shortcode_List_Item_Data_Title.unit:not(.keep-title),
.cyfons-UnitLatest_Scroll.hide-title .cyfons-Shortcode_List_Item_Anchor .cyfons-Shortcode_List_Item_Data_Title:not(.keep-title) {
    display: none;
}

/* サムネイルへ重ねるバッジは白リングを持たせる。リング無しだと緑系サムネで
   境界が溶ける（コンテンツ側の緑丸 ::after と同じ扱いに揃える） */
.cyfons-Shortcode_List.units.card.hide-title .cyfons-Shortcode_List_Item_Thumb .unread-count,
.cyfons-UnitLatest_Scroll.hide-title .cyfons-Shortcode_List_Item_Thumb .unread-count {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 1;
    margin: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* 退会中バッジも未読数と同じ理由でサムネイルへ退避する（#1498 指摘6）。
   unread-count は右下固定のため、衝突しないよう左上に配置する */
.cyfons-Shortcode_List.units.card.hide-title .cyfons-Shortcode_List_Item_Thumb .status,
.cyfons-UnitLatest_Scroll.hide-title .cyfons-Shortcode_List_Item_Thumb .status {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 1;
    padding: 0 5px;
    font-size: 0.8em;
    font-weight: bold;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* スクリーンリーダー専用テキスト(未読バッジの数字を aria-hidden にした分の代替テキスト用) */
.cyfons-Shortcode_SrOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cyfons-Shortcode_List.contents.card.hide-title .cyfons-Shortcode_List_Item:not(.viewed) .cyfons-Shortcode_List_Item_Thumb::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #84C318;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* 連続再生ボタン */
.play-button {
    display: flex;
    align-items: center;
    padding: 1rem;
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #0F0C0C;
    text-align: justify;
    margin: 1rem 0 2rem;
    border: 0;
    color: #0073aa;
}

.play-button:hover {
    background: transparent;
    color: #0073aa;
}

.play-button>span {
    font-size: 30px;
    width: 30px;
    height: 30px;
    margin-right: .5rem;
    display: flex;
    justify-content: center;
}

.play-button span {
    transition: none;
}

.play-button .title {
    font-weight: bold;
    font-size: 1.2em;
}

.play-button .meta {
    display: flex;
    align-items: center;
}

/* 統合したCSS: cyfons.css */

/* サイドメニュー */
.cyfons-Template_Sidebar .cyfons-Shortcode_Head {
    font-size: 1em;
}

/* タイトルテキストのスタイル */
.cyfons-Shortcode_List_Item_Data_Title {
    /* font-weight: 400; */
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 上部メニュー */
.cyfons-Template_Header a {
    color: #0F0C0C;
    font-size: 0.9em;
    font-weight: 400;
}

/* コメント周り */
#respond .comment-author-info {
    display: block;
    align-items: center;
    margin-bottom: 15px;
}

.cyfons-comments-area {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

/* 削除されたメール一覧の古いCSS（新しい整理版に統合済み） */

/* メール一覧の未読アイコン */
.mails .cyfons-Shortcode_List:not(.units) .cyfons-Shortcode_List_Item:not(.viewed) .cyfons-Shortcode_List_Item_Data_Title::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #84C318;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 3px rgba(132, 195, 24, 0.5);
}

/* iPhone SE (375px) 対応 */
@media (max-width: 375px) {
    .cyfons-Template_Inner {
        margin: 1.5rem auto;
        padding: 0 3%;
    }

    .mails .list .cyfons-Shortcode_List_Item_Data_Title,
    .mails .list .cyfons-Shortcode_List_Item_Data_Content {
        display: block;
        max-width: 100%;
        white-space: normal;
    }

    .mails .list .cyfons-Shortcode_List_Item_Data_Title {
        margin-bottom: 2px;
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .mails .list .cyfons-Shortcode_List_Item_Data_Content {
        padding-left: 3px;
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .mails .list .cyfons-Shortcode_List_Item_Data_Main {
        padding: 6px 0;
    }

    .mails .list .cyfons-Shortcode_List_Item_Date {
        font-size: 0.6rem;
        margin-top: 3px;
    }

    /* カードモードでの調整 - 2列表示 */
    .cyfons-Shortcode_List_Item.card {
        width: 48% !important;
        margin-left: 0 !important;
    }

    .cyfons-Shortcode_List_Item.card:not(:nth-of-type(2n+1)) {
        margin-left: 4% !important;
    }

    .cyfons-Shortcode_List_Item.card:nth-of-type(n+3) {
        margin-top: 3%;
    }

    .sidemenu .cyfons-Shortcode_List_Item_Data_Title {
        font-size: 0.75em;
        max-height: 70px;
        padding-right: 12px;
    }

    .sidemenu .cyfons-Shortcode_List_Item_Data_Title .content-title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .sidemenu .cyfons-Shortcode_List_Item_Thumb {
        width: 25%;
        min-width: 25%;
        margin-right: 0.5rem;
    }
}

@media (max-width: 399px) {
    .mails .list .cyfons-Shortcode_List_Item_Data_Title,
    .mails .list .cyfons-Shortcode_List_Item_Data_Content {
        display: block;
        max-width: 100%;
        white-space: normal;
    }

    .mails .list .cyfons-Shortcode_List_Item_Data_Title {
        margin-bottom: 2px;
        font-size: 0.95rem;
    }

    .mails .list .cyfons-Shortcode_List_Item_Data_Content {
        padding-left: 3px;
        font-size: 0.75rem;
    }

    .mails .list .cyfons-Shortcode_List_Item_Data_Main {
        padding: 8px 0;
    }
}

@media (max-width: 1023px) {
    .list .cyfons-Shortcode_List_Item_Thumb {
        width: 20%;
    }
}

@media (min-width: 1024px) {
    .mails .list .cyfons-Shortcode_List_Item_Data_Title {
        font-size: 1.2rem;
        margin-bottom: .5rem;
    }
}

/* cyfons-Shortcode_List.units.cardのアイテムに対する特別なスタイル */
.cyfons-Shortcode_List.units.card .cyfons-Shortcode_List_Item_Data {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.cyfons-Shortcode_List.units.card .cyfons-Shortcode_List_Item_Data_Title.unit {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
}

.cyfons-Shortcode_List.units.card .cyfons-Shortcode_List_Item_Data_Tag {
    margin-left: 8px;
    flex-shrink: 0;
}

.cyfons-Shortcode_List_Item_Thumb {
    position: relative;
}

.cyfons-Shortcode_List_Item.lp-unit .lp-overlay {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #fff;
    color: #000;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Thumb img,
.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Data_Title.unit,
.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Data_Title .unit-name,
.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Data_Content {
    opacity: 0.75;
}

.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Data_Tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cyfons-Shortcode_List_Item.lp-unit .lp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    letter-spacing: 0.05em;
}

.cyfons-Shortcode_List_Item.lp-unit .lp-caption {
    font-size: 0.85rem;
    opacity: 0.7;
}

.cyfons-Shortcode_List_Item.lp-unit .status.lp-status {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Anchor:hover .cyfons-Shortcode_List_Item_Thumb img,
.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Anchor:hover .cyfons-Shortcode_List_Item_Data_Title.unit,
.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Anchor:hover .cyfons-Shortcode_List_Item_Data_Title .unit-name,
.cyfons-Shortcode_List_Item.lp-unit .cyfons-Shortcode_List_Item_Anchor:hover .cyfons-Shortcode_List_Item_Data_Content {
    opacity: 0.5;
}

/* 日付を画面右端に配置するための追加CSS - PC画面のみ適用 */
@media (min-width: 768px) {
    .cyfons-Template .cyfons-Shortcode .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item .cyfons-Shortcode_List_Item_Data .cyfons-Shortcode_List_Item_Data_Main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .cyfons-Template .cyfons-Shortcode .cyfons-Shortcode_List.mails.list .cyfons-Shortcode_List_Item .cyfons-Shortcode_List_Item_Data .cyfons-Shortcode_List_Item_Data_Main .cyfons-Shortcode_List_Item_Date {
        margin-left: auto;
        flex-shrink: 0;
        text-align: right;
        white-space: nowrap;
    }
}

#swpm_new_password {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background-color: #ffffff;
}

#swpm_reenter_new_password {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background-color: #ffffff;
}

/* ページネーション */
.cyfons-Shortcode_Pagination ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

.cyfons-Shortcode_Pagination li {
    display: flex;
    align-items: center;
}

.cyfons-Shortcode_Pagination li:not(:first-of-type) {
    margin-left: 8px;
}

.cyfons-Shortcode_Pagination span,
.cyfons-Shortcode_Pagination a:not(.next, .prev) {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 26px; /* border幅分マイナス */
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #0073aa;
    color: #0073aa;
}

.cyfons-Shortcode_Pagination span,
.cyfons-Shortcode_Pagination a:not(.next, .prev):hover {
    background-color: #0073aa;
    color: #ffffff;
}

.cyfons-Shortcode_Pagination a {
    text-decoration: none;
}

.cyfons-Shortcode_Pagination a.prev,
.cyfons-Shortcode_Pagination a.next {
    display: flex;
    align-items: center;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #0073aa;
}

/* ============================================================
   ユニット最新コンテンツ 横スクロール (#1215 / [cyfons_unit_latest])
   既存 .cyfons-Shortcode_List グリッドに影響させないため独立クラス
   ============================================================ */
.cyfons-UnitLatest {
    margin: 1.5em 0;
}

.cyfons-UnitLatest_Title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 0.6em;
    line-height: 1.4;
}

.cyfons-UnitLatest_Scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* 横スクロールバーを隠す（操作は矢印ボタンで行う。スクロール機能自体は維持） */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / 旧Edge */
}

/* Chrome / Safari / 新Edge のスクロールバーを隠す */
.cyfons-UnitLatest_Scroll::-webkit-scrollbar {
    display: none;
}

.cyfons-UnitLatest_Item {
    flex: 0 0 auto;
    width: 240px;
    max-width: 70%;
    scroll-snap-align: start;
}

/* #1258 フォルダ展開カルーセル: UnitLatest 構造を流用し、各アイテムにユニット/フォルダの
   カード内側(.cyfons-Shortcode_List_Item_Anchor)を入れる。アイテム幅(240px)いっぱいに表示する */
.cyfons-Showcase_FolderCarousel .cyfons-UnitLatest_Item > .cyfons-Shortcode_List_Item_Anchor {
    display: block;
    width: 100%;
}

/* カルーセル子カードのサムネは .cyfons-Shortcode_List.card 配下ではないため、16:9 固定の
   カードモード画像スタイル(686/694行)が効かない。カルーセル文脈にも同じ 16:9 を適用して
   カード間の高さ・比率を揃える(#1258)。 */
.cyfons-Showcase_FolderCarousel .cyfons-Shortcode_List_Item_Thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    overflow: hidden;
    background-color: #f5f5f5;
}
.cyfons-Showcase_FolderCarousel .cyfons-Shortcode_List_Item_Thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-object-fit: cover;
}

.cyfons-UnitLatest_Anchor {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* サムネは 16:9 で統一（showcase と同じ手法） */
.cyfons-UnitLatest_Thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.cyfons-UnitLatest_Thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-object-fit: cover; /* Safari用 */
}

/* タイトルリンク（ユニット内コンテンツ一覧へ） */
.cyfons-UnitLatest_TitleLink {
    color: inherit;
    text-decoration: none;
}

.cyfons-UnitLatest_TitleLink:hover {
    text-decoration: underline;
}

/* スクロール領域に矢印を重ねるための基準 */
.cyfons-UnitLatest_Viewport {
    position: relative;
}

/* 横スクロール矢印（右端=次へ / 左端=前へ）。スクロールバー非表示のため操作手段となる */
.cyfons-UnitLatest_Nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
}

.cyfons-UnitLatest_Nav:hover {
    background-color: rgba(0, 0, 0, 0.75);
}

.cyfons-UnitLatest_Nav--next {
    right: 6px;
}

.cyfons-UnitLatest_Nav--prev {
    left: 6px;
}

/* JS が端で hidden 属性を付与する（display:flex より高い詳細度で打ち消す） */
.cyfons-UnitLatest_Nav[hidden] {
    display: none;
}

.cyfons-UnitLatest_NavIcon {
    font-size: 24px;
    line-height: 1;
    font-weight: bold;
}

/* サムネ下のコンテンツタイトル（2行でクランプ） */
.cyfons-UnitLatest_ItemTitle {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 未読はタイトル前に緑丸を表示（既存コンテンツ一覧の未読ドットと同仕様）。
   既読（li.viewed）は ::before を出さない＝緑丸が消える */
.cyfons-UnitLatest_Item:not(.viewed) .cyfons-UnitLatest_ItemTitle::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #84C318;
    vertical-align: middle;
    box-shadow: 0 0 3px rgba(132, 195, 24, 0.5);
}

/* 既読/未読マーク（サムネ左上に重ねる） */
.cyfons-UnitLatest_Status {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
}

/* 未読: 既存コンテンツ一覧の未読ドットと同系の緑（既読はバッジ自体を出さない） */
.cyfons-UnitLatest_Status.is-unread {
    background-color: #84C318;
}

/* =========================================================
   コンテンツブックマーク(#1292)
   ========================================================= */

/* カード/リスト/サイドメニュー上の★トグルは <a> の兄弟。相対配置の親に重ねる */
.cyfons-Shortcode_List_Item {
    position: relative;
}

.cyfons-Bookmark_Toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #9aa0a6;
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: color 0.15s ease, background 0.15s ease;
}
.cyfons-Bookmark_Toggle svg {
    fill: none;
}
.cyfons-Bookmark_Toggle:hover {
    background: #fff;
    color: #84C318;
}
.cyfons-Bookmark_Toggle.is-bookmarked {
    color: #84C318;
}
.cyfons-Bookmark_Toggle.is-bookmarked svg {
    fill: #84C318;
}
.cyfons-Bookmark_Toggle:disabled {
    opacity: 0.5;
    cursor: default;
}

/* 学習コンテンツバッジ（#1296）。★トグルと同じ右上重ねで、その左隣に置く。
   管理画面ステータス列の学習進捗アイコンと同じ卒業帽モチーフ・同系色。
   円の背景色は★トグルと同じく状態に関わらず一定にし、アイコン自体の
   塗り(fill)と線(stroke)だけを状態で変える。
   未完了: 線=青、中=塗りなし(輪郭のみ)。
   完了　: 中=青で塗りつぶし、線=白（「反転」＝中と線の色を入れ替えた形）。
   線の白は --learning-badge-line で持たせ、直書きの色を1箇所に集約する */
.cyfons-Learning_Badge {
    --learning-badge-fg: #4fc3f7;
    --learning-badge-line: #fff;
    position: absolute;
    top: 6px;
    right: 40px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--learning-badge-fg);
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}
.cyfons-Learning_Badge svg {
    fill: none;
}
.cyfons-Learning_Badge.is-completed svg {
    fill: var(--learning-badge-fg);
    stroke: var(--learning-badge-line);
}

/* 詳細ページ用: ラベル付きの横並びボタン */
.cyfons-Bookmark_DetailBar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}
.cyfons-Bookmark_Toggle.detail {
    position: static;
    width: auto;
    height: auto;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    line-height: 1;
}
.cyfons-Bookmark_Toggle_Label {
    font-size: 13px;
}

/* ブックマーク管理セクション(コンテンツメニュー先頭に統合) */
.cyfons-Bookmark_Menu {
    margin-bottom: 16px;
    border: 1px solid #e3e5e8;
    border-radius: 6px;
    background: #fafbfc;
}
.cyfons-Bookmark_Menu_Head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #e3e5e8;
}
.cyfons-Bookmark_Menu_Title {
    font-weight: 600;
}
.cyfons-Bookmark_Menu_Count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #84C318;
    color: #fff;
    font-size: 12px;
    text-align: center;
}
.cyfons-Bookmark_CreateFolder {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid #cfd3d7;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
}
.cyfons-Bookmark_Menu_Body {
    padding: 8px 12px;
}
.cyfons-Bookmark_Folder {
    margin-bottom: 10px;
}
.cyfons-Bookmark_Folder_Head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed #dcdfe3;
    font-size: 13px;
    color: #5f6368;
}
.cyfons-Bookmark_FolderToggle {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.cyfons-Bookmark_FolderIcon {
    flex-shrink: 0;
    /* OSのフォルダアイコンに寄せた一般的なアンバー(★トグルの緑とは独立) */
    color: #f6b73c;
}
.cyfons-Bookmark_FolderChevron {
    color: #9aa0a6;
    font-size: 11px;
    transition: transform 0.15s ease;
}
.cyfons-Bookmark_Folder.is-collapsed .cyfons-Bookmark_FolderChevron {
    transform: rotate(-90deg);
}
.cyfons-Bookmark_Folder.is-collapsed .cyfons-Bookmark_List {
    display: none;
}
.cyfons-Bookmark_Folder.is-drop-target {
    outline: 2px dashed #4a90d9;
    outline-offset: 2px;
    background: #eef5fc;
}
.cyfons-Bookmark_Folder_Name {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cyfons-Bookmark_Folder_Controls {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.cyfons-Bookmark_Folder_Controls button {
    margin-left: 4px;
    padding: 2px 6px;
    border: 1px solid #cfd3d7;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    /* 行側のフォルダ移動ボタン(.cyfons-Bookmark_MoveBtn)と文字色を揃える */
    color: #5f6368;
}
.cyfons-Bookmark_List {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.cyfons-Bookmark_Item {
    display: flex;
    align-items: center;
    gap: 6px;
    /* フォルダ内に属していることを示すため、ハンドルごと字下げする */
    padding: 4px 0 4px 22px;
    /* フォルダ見出し(.cyfons-Bookmark_Folder_Head)と同じ文字サイズに揃える */
    font-size: 13px;
}
.cyfons-Bookmark_Handle {
    cursor: grab;
    color: #9aa0a6;
    user-select: none;
}
.cyfons-Bookmark_Handle.is-disabled {
    cursor: default;
    color: #d5d8dc;
}
.cyfons-Bookmark_Link {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* PC(広幅)向けインライン操作ボタン群: タッチ環境・狭幅では⋮メニューに切り替える */
.cyfons-Bookmark_InlineActions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cyfons-Bookmark_InlineActions .cyfons-Bookmark_MoveBtn,
.cyfons-Bookmark_InlineActions .cyfons-Bookmark_Remove {
    padding: 2px 8px;
    border: 1px solid #cfd3d7;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    color: #5f6368;
}
/* アイコン+テキストのボタンはアイコンを縦中央に揃える */
.cyfons-Bookmark_InlineActions button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cyfons-Bookmark_BtnIcon {
    flex-shrink: 0;
}
/* 破壊的操作(削除)は赤で区別する */
.cyfons-Bookmark_InlineActions .cyfons-Bookmark_DangerBtn {
    color: #d93025;
    border-color: #e6b8b4;
}
/* タッチ環境での当たり判定の下限(WCAG 2.5.5 / Apple HIG)。▲▼と⋮で必ず同じ値を使う */
.cyfons-Bookmark_Menu {
    --cyfons-bookmark-tap-target: 44px;
}
/* ▲▼上下移動: DnDが使えないタッチ環境・狭幅画面のみ表示する(PCではDnDハンドルを使う) */
.cyfons-Bookmark_UpDown {
    display: none;
    flex-shrink: 0;
    min-width: 32px;
    padding: 4px 6px;
    border: 1px solid #cfd3d7;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.2;
    color: #5f6368;
    /* 連打前提のボタンなのでダブルタップズームと誤認されないようにする */
    touch-action: manipulation;
}
/* 移動できない▲▼を押したときの視覚的フィードバック(#1800)。
   announce() の live region は視覚的非表示で、スクリーンリーダーを使っていない
   利用者には届かない。無効表示は静的なので「押した」ことへの反応にならない */
@keyframes cyfons-bookmark-unmovable {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
.cyfons-Bookmark_UpDown.is-unmovable {
    animation: cyfons-bookmark-unmovable 180ms ease-in-out;
}
/* 動きを減らす設定では、色の反転だけで反応を返す */
@media (prefers-reduced-motion: reduce) {
    .cyfons-Bookmark_UpDown.is-unmovable {
        animation: none;
        background: #f2f3f5;
    }
}
.cyfons-Bookmark_UpDown.is-disabled {
    /* 先頭/末尾でこれ以上動かせないことを示す。
       ハンドルの無効表示(.cyfons-Bookmark_Handle.is-disabled)と揃える */
    cursor: default;
    color: #d5d8dc;
    /* 色だけだと白背景に対し約1.3:1 で、タッチ操作ではフォーカスを経ず
       aria-disabled の読み上げも挟まらないため無効だと気づけない。
       枠線と不透明度でも差を付ける */
    opacity: 0.55;
    border-color: #e4e7ea;
}
@media (hover: none) and (pointer: coarse), (any-pointer: coarse), (max-width: 767px) {
    .cyfons-Bookmark_UpDown {
        display: inline-block;
    }
}
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
    /* タッチではHTML5 DnDが機能しないためハンドルは隠す(字下げはpaddingで維持) */
    .cyfons-Bookmark_Handle {
        display: none;
    }
    /* 狭幅ではインラインボタンを隠し⋮メニューへ集約する
       (⋮側の表示切替は KebabWrap 定義後の @media ブロックで行う) */
    .cyfons-Bookmark_InlineActions {
        display: none;
    }
    /* 実測で▲▼が32×23px・間隔6pxしかなく誤タップの原因だったため、
       当たり判定を下限まで広げる。文字サイズは変えないため padding ではなく
       min-width/min-height で確保する(親の align-items:center により行の高さだけ伸びる)。
       上の▲▼表示MQと違ってここが2条件なのは、(any-pointer: coarse) を足すと
       タッチ対応ノートPC(hover:hover / pointer:fine / 幅>767px)で▲▼だけが44pxになり、
       インラインの名称変更/削除は出たまま・⋮は display:none のまま行だけが伸びるため。
       サイズはタッチ用レイアウトへ切り替わる条件と一致させる */
    .cyfons-Bookmark_UpDown {
        min-width: var(--cyfons-bookmark-tap-target, 44px);
        min-height: var(--cyfons-bookmark-tap-target, 44px);
    }
    /* 隣接ボタン(▲▼⋮)の間隔も6pxから広げ、指の誤タップで隣を押さないようにする */
    .cyfons-Bookmark_Item,
    .cyfons-Bookmark_Folder_Controls {
        gap: 8px;
    }
    /* .cyfons-Bookmark_Folder_Controls button の margin-left が残ると gap と加算されて
       見出し行だけ 12px になるため、間隔を gap へ一本化する */
    .cyfons-Bookmark_Folder_Controls button {
        margin-left: 0;
    }
}
/* キーボード利用者はDnDが使えないため、キーボード操作モード(Tab押下で
   bookmark.js が body に付与する .cyfons-KeyboardNav)中に行内へフォーカスが
   ある間のみ▲▼を表示する。:focus-visible 単体だとモーダルを閉じた際の
   フォーカス復帰(入力欄→ボタン)が focus-visible を引き継ぎ、
   マウス操作でも▲▼が出現してレイアウトが動いてしまう */
body.cyfons-KeyboardNav .cyfons-Bookmark_Item:focus-within .cyfons-Bookmark_UpDown,
body.cyfons-KeyboardNav .cyfons-Bookmark_Folder_Head:focus-within .cyfons-Bookmark_UpDown {
    display: inline-block;
}
/* 三点リーダー(⋮)メニュー: 狭幅でフォルダ移動/削除/名称変更を集約し行幅を確保する
   (表示切替は上の @media ブロック。PC広幅では display:none のまま) */
.cyfons-Bookmark_KebabWrap {
    display: none;
    position: relative;
    flex-shrink: 0;
}
button.cyfons-Bookmark_Kebab {
    margin: 0;
    padding: 2px 8px;
    border: none;
    border-radius: 3px;
    background: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.2;
    color: #5f6368;
    /* ▲▼と同じ行に並ぶ小さな連打対象なので、ダブルタップズームの抑止も揃える */
    touch-action: manipulation;
}
button.cyfons-Bookmark_Kebab:hover {
    background: #eceef0;
}
.cyfons-Bookmark_KebabMenu {
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    z-index: 100;
    min-width: 140px;
    padding: 4px 0;
    border: 1px solid #cfd3d7;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cyfons-Bookmark_KebabMenu[hidden] {
    display: none;
}
.cyfons-Bookmark_KebabMenu button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    color: #333;
}
.cyfons-Bookmark_KebabMenu button:hover {
    background: #f2f3f5;
}
/* 破壊的操作(削除)は赤で区別する */
.cyfons-Bookmark_KebabMenu .cyfons-Bookmark_Remove,
.cyfons-Bookmark_KebabMenu .cyfons-Bookmark_FolderDelete {
    color: #d93025;
}
/* タッチ環境・狭幅でのみ⋮メニューを表示する(base の display:none を上書きするため定義後に置く) */
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
    .cyfons-Bookmark_KebabWrap {
        display: block;
    }
    /* ▲▼だけ広げると押しやすさの基準が⋮とズレて誤タップ先が変わるだけなので同じ値を使う */
    button.cyfons-Bookmark_Kebab {
        min-width: var(--cyfons-bookmark-tap-target, 44px);
        min-height: var(--cyfons-bookmark-tap-target, 44px);
    }
    /* 狭幅では .cyfons-Bookmark_InlineActions を隠すため、破壊的操作である「削除」へ
       到達する唯一の経路がこのメニュー項目になる。しかも「フォルダ移動」と隙間なく
       隣接するので、トリガーだけでなく項目側も当たり判定の下限に合わせる */
    .cyfons-Bookmark_KebabMenu button {
        min-height: var(--cyfons-bookmark-tap-target, 44px);
    }
}
.cyfons-Bookmark_Empty {
    /* アイテム行と同じ字下げに揃える */
    padding: 4px 0 4px 22px;
    color: #9aa0a6;
    font-size: 12px;
}
/* D&Dの当たり判定はドラッグ中だけ広げる。
   静止時にリストへ min-height を掛けると、項目が1件だけのフォルダと未分類リストの
   下に常時12px前後の空白が入り、見た目はフォルダ間の余白なのに実際は上側フォルダの
   ドロップ領域、という取り違えが起きる。
   逆に「(なし)」行の高さで稼ぐと、最後の1件が抜けた瞬間にそのリストが伸びて
   カーソル下の要素が入れ替わり、境界付近でフォルダ間を行き来する。
   ドラッグ中だけ掛ければ、静止時の余白も、ドラッグ中の高さ変動も避けられる
   (min-height なので、2件以上あるリストの高さはこの値に揃わない。
    揃うのは「空または1件で 40px 未満だったリスト」だけ)。
   ドラッグ開始時に下方のフォルダ位置が一度ずれる点は残る */
body.cyfons-is-bookmark-dragging .cyfons-Bookmark_List {
    min-height: 40px;
}
/* スクリーンリーダー専用テキスト(aria-live通知用の視覚的非表示) */
.cyfons-Bookmark_SrOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* キーボード操作時のフォーカス可視化(既存 .cyfons-MailReplyList_Item_Link と同トークン) */
.cyfons-Bookmark_Menu button:focus-visible,
.cyfons-Bookmark_Menu a:focus-visible,
.cyfons-Bookmark_Modal button:focus-visible,
.cyfons-Bookmark_Modal input:focus-visible,
.cyfons-Bookmark_Modal select:focus-visible {
    outline: 2px solid #0F0C0C;
    outline-offset: 2px;
}
.cyfons-Bookmark_ModalOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
.cyfons-Bookmark_ModalOverlay[hidden] {
    display: none;
}
.cyfons-Bookmark_Modal {
    width: min(90vw, 360px);
    padding: 20px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.cyfons-Bookmark_ModalTitle {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.3;
    color: #333;
}
.cyfons-Bookmark_ModalInput {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cfd3d7;
    border-radius: 4px;
    font-size: 14px;
}
.cyfons-Bookmark_ConfirmMessage {
    margin: 0;
    font-size: 14px;
    color: #333;
    word-break: break-all;
}
.cyfons-Bookmark_MoveModalSelect,
.cyfons-Bookmark_AddToFolderSelect {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cfd3d7;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}
.cyfons-Bookmark_ModalActions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.cyfons-Bookmark_ModalActions button {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.cyfons-Bookmark_ModalCancel {
    border: 1px solid #cfd3d7;
    background: #fff;
    color: #5f6368;
}
.cyfons-Bookmark_ModalSubmit,
.cyfons-Bookmark_MoveOk,
.cyfons-Bookmark_AddToFolderOk {
    border: 1px solid #84C318;
    background: #84C318;
    color: #fff;
}
.cyfons-Bookmark_ConfirmOk.cyfons-Bookmark_ModalDanger {
    border: 1px solid #d93025;
    background: #d93025;
    color: #fff;
}

/* =========================================================
   学習進捗 (#1296)
   ========================================================= */

/* コンテンツ詳細ページ: 本文前後の学習完了トグルボタン */
.cyfons-Learning_Bar {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}
.cyfons-Learning_Toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 1px solid var(--cyfons-learning, #84C318);
    border-radius: 20px;
    background: #fff;
    /* #fff とのコントラスト比 4.5:1(WCAG AA) を確保するため #84C318 系より暗い緑にする */
    color: #527c0e;
    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    /* WPテーマの button{} グローバル装飾(大文字化・影・最小幅)の混入を防ぐ */
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    text-transform: none;
    min-width: 0;
}
.cyfons-Learning_Toggle:hover {
    background: #f3f9e8;
}
/* appearance:none / box-shadow:none でテーマ由来のフォーカス表現を消しているため、
   キーボード操作の可視化を自前で戻す(既存 .cyfons-Bookmark_Menu と同トークン) */
.cyfons-Learning_Toggle:focus-visible {
    outline: 2px solid #0F0C0C;
    outline-offset: 2px;
}
/* 未完了時はチェックマークを隠し、完了時に反転表示で状態を伝える */
.cyfons-Learning_Toggle .cyfons-Learning_Toggle_Check {
    display: none;
    line-height: 1;
}
.cyfons-Learning_Toggle.is-completed {
    /* 白文字とのコントラスト比 4.5:1(WCAG AA) を確保するため #84C318 より暗い緑にする */
    border-color: #527c0e;
    background: #527c0e;
    color: #fff;
}
.cyfons-Learning_Toggle.is-completed .cyfons-Learning_Toggle_Check {
    display: inline;
}
.cyfons-Learning_Toggle:disabled {
    opacity: 0.5;
    cursor: default;
}

/* 音声単位の学習トグル: 各音声の直前にインラインで並ぶ。
   <audio> は p 要素等のインラインコンテキストに置かれるため、
   ブロック要素を使うと親要素が早期クローズされる。span のみで構成する */
.cyfons-AudioLearning_Bar {
    display: inline-block;
    margin: 0 0 6px;
}
.cyfons-AudioLearning_Toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 16px;
    /* 本文中に音声本数ぶん密に並ぶため、誤タップを避けてモバイルの目安 44px を確保する */
    min-height: 44px;
    border: 1px solid var(--cyfons-learning, #84C318);
    border-radius: 20px;
    background: #fff;
    /* #fff とのコントラスト比 4.5:1(WCAG AA) を確保するため #84C318 系より暗い緑にする */
    color: #527c0e;
    font-size: 13px;
    line-height: 1.4;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    /* WPテーマの button{} グローバル装飾(大文字化・影・最小幅)の混入を防ぐ */
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    text-transform: none;
    min-width: 0;
}
.cyfons-AudioLearning_Toggle:hover {
    background: #f3f9e8;
}
/* appearance:none / box-shadow:none でテーマ由来のフォーカス表現を消しているため、
   キーボード操作の可視化を自前で戻す */
.cyfons-AudioLearning_Toggle:focus-visible {
    outline: 2px solid #0F0C0C;
    outline-offset: 2px;
}
/* 未完了時はチェックマークを隠し、完了時に反転表示で状態を伝える */
.cyfons-AudioLearning_Toggle .cyfons-AudioLearning_Toggle_Check {
    display: none;
    line-height: 1;
}
.cyfons-AudioLearning_Toggle .cyfons-AudioLearning_Toggle_Label {
    /* 「{コンテンツ名} Track N」やファイル名は長くなりうるので折り返しを許可する */
    overflow-wrap: anywhere;
}
.cyfons-AudioLearning_Toggle.is-completed {
    /* 白文字とのコントラスト比 4.5:1(WCAG AA) を確保するため #84C318 より暗い緑にする */
    border-color: #527c0e;
    background: #527c0e;
    color: #fff;
}
.cyfons-AudioLearning_Toggle.is-completed .cyfons-AudioLearning_Toggle_Check {
    display: inline;
}
.cyfons-AudioLearning_Toggle[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

/* ユニット一覧: 学習進捗バー(100%スケールの棒 + N/M件数)
   親がflexコンテナでも潰れないよう全幅を確保する */
.cyfons-Learning_Progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    padding: 0 4px 4px;
    box-sizing: border-box;
}
.cyfons-Learning_Progress_Track {
    flex: 1;
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--cyfons-learning-track, #e8eaed);
    overflow: hidden;
}
.cyfons-Learning_Progress_Bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    /* トラック(#e8eaed)とのコントラスト比 3:1(WCAG 1.4.11) を確保するため #84C318 より暗い緑にする */
    background: #5c8810;
    transition: width 0.3s ease;
}
.cyfons-Learning_Progress_Count {
    flex: none;
    font-size: 12px;
    color: var(--cyfons-text-muted, #555555);
    line-height: 1;
}
/* スクリーンリーダー専用テキスト(aria-live通知用の視覚的非表示) */
.cyfons-Learning_SrOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ユニット別コンテンツ表示の見出し内リンク。
   親 .cyfons-Shortcode_Head が display:flex のため margin-left:auto で右端に寄る。
   font-size は見出しの em に依存させると mode 次第で読めない大きさになるため絶対値で固定する */
.cyfons-Shortcode_Head_More {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    text-decoration: underline;
    padding: .4em .2em;
}

.cyfons-Shortcode_Head_More:focus-visible {
    outline: 2px solid #0F0C0C;
    outline-offset: 2px;
}

/* =========================================================
   ユニット段階解放: ロックカード (#1390)
   ========================================================= */

/* 購入済みだが未解放のユニット。「未購入」ではなく「あなたのもの・次はこれ」に見せる。
   左のアクセント帯は装飾ではなく状態表現で、段階登録ユニットにしか出さない。 */
.cyfons-Shortcode_List_Item.is-pending-unlock {
    border-left: 3px solid var(--cyfons-learning, #84C318);
    background: #fcfdf9;
}
/* サムネは彩度を落として奥へ引くが、消さない(買ったものが消えたと思わせない) */
.cyfons-Shortcode_List_Item.is-pending-unlock .cyfons-Shortcode_List_Item_Thumb img {
    filter: grayscale(0.7);
    opacity: 0.7;
}

/* 「次はこれ」を色以外の手がかりでも伝える(色覚特性に依存させない) */
.cyfons-Unit_LockBadge {
    display: inline-block;
    margin-right: 6px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.04em;
    color: var(--cyfons-learning, #84C318);
}

/* hide-title ではタイトル行ごと display:none になるため、NEXT ラベルも未読・退会中
   バッジと同じくサムネイルへ退避する。左上は退会中、右下は未読が使うので左下へ置く */
.cyfons-Shortcode_List.units.card.hide-title .cyfons-Shortcode_List_Item_Thumb .cyfons-Unit_LockBadge,
.cyfons-UnitLatest_Scroll.hide-title .cyfons-Shortcode_List_Item_Thumb .cyfons-Unit_LockBadge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 1;
    margin: 0;
    padding: 0 5px;
    background-color: rgba(255, 255, 255, .92);
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* 解放条件の文。進捗バーの直下に置く */
.cyfons-Unit_LockCondition {
    margin: 4px 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--cyfons-text-muted, #555555);
}

/* 前提ユニットの進捗バー。自分自身の進捗バーと同じ見た目だが、
   aria-label で「解放条件」と読み上げ、意味を区別する */
.cyfons-Learning_Progress.is-prerequisite {
    margin-top: 6px;
}

/* 解放の即時通知(#1390)。完了トグルの直下に出す。
   感情のピークを逃さないための表示で、次に一覧を見るまで待たせない。 */
.cyfons-Learning_UnlockNotice {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    background: #f3f9e8;
    border: 1px solid var(--cyfons-learning, #84C318);
    color: var(--cyfons-text, #0f0c0c);
    font-size: 0.9rem;
    text-align: center;
}