@charset "UTF-8"; /** afx-front.css */



:root {
    --primary-color: var(--com-primary-color);
    --primary-bgcolor: color-mix(in srgb, var(--com-primary-color) 30%, transparent);
    --border-radius: var(--com-border-radius);
    --balloon-line-color: color-mix(in srgb, var(--com-text-color) 20%, transparent);
    --link-color: var(--com-link-color);
    --link-line: underline;
    --link-line-width: 1px;
    --link-line-margin: 2px;
}


/* -------------------------------
    タグ
--------------------------------*/
.afx-alltags {
    text-align: center;
}
.afx-tag, .afx-tag:hover {
    background-color: var(--primary-bgcolor);
    border: none;
    border-radius: 2em;
    color: currentColor;
    font-size: 0.875rem;
    opacity: initial;
    text-decoration: none;
    padding: 1px 8px;
    margin: 4px;
}
.afx-tag::before {
    content: "#";
}


/* -------------------------------
    タイトルリンク
--------------------------------*/
.afx-title,
.afx-title:hover {
    display: block;
    color: var(--link-color);
    line-height: 1.5;
    margin-bottom: 1em;
    text-decoration: var(--link-line);
    text-decoration-thickness: var(--link-line-width);
    text-underline-offset: var(--link-line-margin);
}
.afx-relatedlink {
    margin-top: 4rem;
}


/* -------------------------------
    カードリンク
--------------------------------*/
.afx-cardlink {
    background: #fff;
    border-radius: var(--border-radius); /* 角を少し丸める */
    /** 0（横） 2px（縦） 10px（ぼかし） rgba(0, 0, 0, 0.08) は 8%の濃さの黒 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s; /* アニメーションを滑らかに */
    max-width: 440px;
    margin: 0 auto 1rem;
}
.afx-cardlink a {
    display: grid;
    grid-template-columns: 128px 1fr;
    column-gap: 15px;
    align-items: start;
    text-decoration: none;
    color: inherit;
    /* カード全体の余白や境界線をここに入れると綺麗 */
    padding: 10px;
    border-bottom: 1px solid #eee;
}
/* Grid直下の子要素1：画像の親 */
.afx-cardlink-image {
    margin: 0;
    width: 100px; /* 親のGrid幅と一致させる */
    overflow: hidden;
}
.afx-cardlink-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* 比率が違う画像が混ざっても、枠を埋めるようにする */
}
/* Grid直下の子要素2：テキストの親 */
.afx-cardlink-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.afx-cardlink-label {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
}


/* -------------------------------
    スピーチバルーン
--------------------------------*/
.icon-circle:before { /* Cocoonの謎の○印 */
    content: none;
}
/* 全体 */
.afx-speech {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 1.5rem 0;
}
.afx-speech.side-left {
    flex-direction: row; /* 基本の並び（左） */
}
.afx-speech.side-right {
    flex-direction: row-reverse; /* 基本の並び（左） */
}
/* 人物エリア */
.afx-speech-person {
    flex-shrink: 0;
    width: 64px;
    text-align: center;
}
.afx-speech-avatar { /* アバター */
    margin: 0;
}
.afx-speech-avatar img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
}
.afx-speech.avatar-circle img { /* アバターの外枠形状 */
    border-radius: 50%;
}
.afx-speech.avatar-square img { /* アバターの外枠形状 */
    border-radius: 8px;
}
.afx-speech-name { /* 名前 */
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}
/* 吹き出しエリア */
.afx-speech-balloon {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.5;
    min-width: 0;
    max-width: min(400px, 100%);
}
.afx-speech.shape-line .afx-speech-balloon { /* 吹き出しの線 */
    position: relative;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--balloon-line-color);
    border-radius: 10px;
    background-color: #fff;
    z-index: 1;
}
.afx-speech-balloon > *:first-child { /* 余計な余白除去（上部） */
    margin-top: 0;
}
.afx-speech-balloon > *:last-child { /* 余計な余白除去（下部） */
    margin-bottom: 0;
}
/* 吹き出し尻尾エリア */
.afx-speech.shape-line .afx-speech-balloon::before,
.afx-speech.shape-line .afx-speech-balloon::after {
    position: absolute;
    display: block;
    content: '';
    border-style: solid;
    width: 0;
}
.afx-speech.side-left.shape-line .afx-speech-balloon::before { /* 左 */
    left: -11px;
    top: 10px;
    border-width: 6px 10px 6px 0;
    border-color: transparent var(--balloon-line-color) transparent transparent;
}
.afx-speech.side-left.shape-line .afx-speech-balloon::after {
    left: -9px;
    top: 10px;
    border-width: 6px 10px 6px 0;
    border-color: transparent #fff transparent transparent;
}
.afx-speech.side-right.shape-line .afx-speech-balloon::before { /* 右 */
    right: -11px;
    top: 10px;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--balloon-line-color);
}
.afx-speech.side-right.shape-line .afx-speech-balloon::after {
    right: -9px;
    top: 10px;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
}