.c-topic__toggle {
	display:none;
    position: fixed;
    top: 5.7vw;
    right: -1vw;
    z-index: 1000;
    transform: translateY(-50%);
    background: var(--color-surface);
    color: var(--color-main);
    border: 1px solid var(--color-main) !important;
    padding: .2vw 2vw .2vw 1vw;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    letter-spacing: .08em;
    width: 13vw;
    border-radius: 10px;
    font-size: .8vw;
}
.c-topic {
    width: 13vw;
    position: fixed;
    top: 7vw;
    right: -1vw;
    z-index: 1001;
    transform: translateX(calc(100% + 12px));
    opacity: 0;
    visibility: hidden;
    transition: transform .28s ease, opacity .2s ease, visibility .2s;
    display: flex;
    align-items: flex-end;
}
.c-topic.is-open{
	transform:translateX(0);
	opacity:1; visibility:visible;
}

.c-topic__inner {
    background: #fff;
    padding: 1vw 2vw 1vw 1vw;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    position: relative;
    border: 1px solid var(--color-main);
    border-radius: 10px;
}
.c-topic__close {
	position: absolute;
	left: 12px;
	top: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #bfe6ea;
	background: #eef7f8;
	color: #0d6d75;
	display: grid;
	place-items: center;
	cursor: pointer;
	display: none;
}
aside#topicPanel.c-topic.is-open div.c-topic__inner section.c-topic__panel {
}
aside#topicPanel.c-topic.is-open div.c-topic__inner section.c-topic__panel a {
    display: block;
    width: 10vw;
    height: auto;
    aspect-ratio: 16 / 9;
}
aside#topicPanel.c-topic.is-open div.c-topic__inner section.c-topic__panel a img.c-topic__image {
    width: inherit;
    aspect-ratio: 16 / 9;
}
/* スマホはフル幅寄りに */
@media (max-width:768px){
	.c-topic{ top:auto; right:0; left:0; bottom:12px; width:auto; }
	.c-topic__toggle{ right: