/* CMSを使わない配信、既存のアイコン削除、アクセシビリティだけを補う。デザインの正本はtheme.css。 */
[hidden]{display:none!important}
.mag-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mag-carousel-pause{position:absolute;right:12px;top:12px;z-index:6;border:0;border-radius:4px;background:var(--surface-primary);color:var(--text-high-emphasis);font:inherit;font-size:1.1rem;padding:6px 10px;cursor:pointer}
.mag-footer__col h2{font-size:1.3rem;font-weight:700;margin:0 0 16px}
.mag-footer .icon-facebook{font-size:24px}
.w-av-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:22px;font-weight:700;color:var(--brand-cake-orange)}
:focus-visible{outline:3px solid var(--brand-cake-orange);outline-offset:4px}
.c-post-share__copy img{width:18px;height:18px}
.mag-toc{border:1px solid var(--border-medium-emphasis);padding:16px 24px;margin:24px 0;border-radius:8px}
.mag-retired{max-width:760px;margin:48px auto;padding:0 24px;font-size:1.6rem;line-height:1.8}
@media(prefers-reduced-motion:reduce){.p-hero-carousel__slide,.p-hero-carousel__progress span{transition:none!important}}
/* 元テーマはSP検索をドロワー内に置く。メニュー削除後も検索できるよう常設する。 */
@media(max-width:767px){
 .head_flame,.head_flame .header_inner{height:auto;min-height:100px}
 .head_flame .header_inner{align-items:flex-start;padding:10px 16px}
 .head_flame .header_inner .header_block--left{flex-direction:column;align-items:stretch;width:100%;min-width:0;gap:8px}
 .head_flame .header_inner .header_block--right{display:none}
 .head_flame .header_inner .header_search{width:100%;height:auto;flex:none}
 .head_flame .header_inner .p-header-search-keyword{display:block;height:auto;position:static;padding:0}
 .head_flame .header_logo{max-width:100%}
 .p-hero-carousel__meta{bottom:34px}
}
.p-hero-carousel__progress:not(.is-run) span{transition:none;width:0}
.mag-sr-only:focus{position:fixed!important;top:8px;left:8px;z-index:10000;width:auto;height:auto;clip-path:none;padding:12px;background:var(--surface-primary)}

/* Markdown article content retains the magazine's existing typography. */
[data-article-content]{overflow-wrap:anywhere}
[data-article-content] img{max-width:100%;height:auto}
[data-article-content] pre{max-width:100%;overflow-x:auto;white-space:pre}
[data-article-content] table{display:block;max-width:100%;overflow-x:auto}
[data-article-content] :is(h2,h3,h4,h5,h6){scroll-margin-top:128px}

/* Related articles: four compact cards on desktop, readable rows on phones. */
.p-single-related-posts .c-list-post{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:24px 16px;
 margin:0;
 padding:0;
 list-style:none;
}
.p-single-related-posts .c-list-post__item{min-width:0;margin:0;padding:0}
.p-single-related-posts .c-card-mag,.p-single-related-posts .c-card-mag__inner{min-width:0}
.p-single-related-posts .c-card-mag__thumb{width:100%;aspect-ratio:16/9}
.p-single-related-posts .c-card-mag__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.p-single-related-posts .c-card-mag__title{overflow-wrap:anywhere}
.p-single-related-posts .c-card-mag__meta{min-width:0;gap:4px 8px}
@media(max-width:1023px){
 .p-single-related-posts .c-list-post{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .p-single-related-posts .c-list-post{grid-template-columns:minmax(0,1fr);gap:20px}
 .p-single-related-posts .c-card-mag__inner{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:6px 12px;
  align-content:start;
 }
 .p-single-related-posts .c-card-mag__thumb{grid-row:1 / span 2;align-self:start;aspect-ratio:4/3}
 .p-single-related-posts .c-card-mag__title{font-size:1.4rem;line-height:1.6}
 .p-single-related-posts .c-card-mag__meta{align-self:start;font-size:1.1rem}
 .p-single-related-posts .c-card-mag__label{left:4px;top:4px;max-width:calc(100% - 8px);box-sizing:border-box;padding:2px 4px;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

.c-post-header__meta{display:flex;flex-wrap:wrap;gap:6px 20px}.c-post-header__meta>span{display:block;line-height:1.6}

/* Product cards use the original theme layout and allow narrow-phone buttons to wrap. */
[data-product-card]{scroll-margin-top:128px}
[data-product-card] .c-product-intro__info{min-width:0;flex:1}
[data-product-card] .c-product-intro__buttons{gap:8px;flex-wrap:wrap}
[data-product-card] a.c-product-intro__button{margin-right:0}

.mag-product-image-missing{display:block;aspect-ratio:1;background:#f5f5f5}

.c-pagination__list{flex-wrap:wrap}

.mag-original-anchor{display:block;scroll-margin-top:128px}