.section-main{display:grid; grid-gap:var(--size-3);}
.section-main-above{margin:calc(var(--size-3) * -1) 0;}
.section-main-below{margin-top:calc(var(--size-3) * -1);}



.author-source{display:inline-grid;}
.author-list{display:flex; flex-wrap:wrap;}
.author-name{position:relative; margin-right:var(--size-2); margin-bottom:var(--size-1); font-weight:normal;}
.author-name:not(:last-child):after{content:","; display:inline-flex;}



.breadcrumb{display:flex; justify-content:center; align-items:center;}
.breadcrumb-link{position:relative; line-height:100%;}
.breadcrumb-link:not(:last-child){padding-right:var(--size-3); margin-right:var(--size-2);}
.breadcrumb-link:not(:last-child):after{content:'/'; display:block; position:absolute; bottom:2px; right:0;}
.breadcrumb-link .svgicon{width:auto; height:16px;}



.article-head{grid-gap:var(--size-2); margin-bottom:calc(var(--size-4) * -1);}
.article-title, .article-date{text-align:center;}
.article-title{font-weight:bold;}
.article-author{grid-template-columns:48px 1fr; margin:0 auto;}



.hero-frame{position:relative;}
.hero-frame:before, .hero-frame:after{content:''; display:block;}
.hero-frame:before{padding-top:56.25%;}
.hero-frame:after{position:absolute; z-index:1000; bottom:0; left:0; width:100%; height:34%;
background:linear-gradient(to bottom,rgb(var(--color-border-dark) / 0%) 0%,rgb(var(--color-border-dark) / 100%) 100%);}
.hero-frame img, .hero-frame iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.hero-frame iframe{z-index:2000;}
.hero-nav{position:absolute; z-index:2000; top:0; height:100%; padding:var(--size-4);}
.hero-nav:hover{background-color:rgb(var(--color-border-dark) / 13%);}
.hero-nav-prev{left:0;}
.hero-nav-next{right:0;}
.hero-nav .svgicon{width:var(--size-4); height:auto;}
.hero-info{position:relative; z-index:2000; padding:var(--size-2) var(--size-3) var(--size-1); margin-top:-1px;}
.hero-info *{font-size:11px; line-height:140%;}
.hero-author{grid-template-columns:58px 1fr; margin-top:var(--size-1);}

.hero-image-nav{display:grid; grid-gap:var(--size-1); grid-template-columns:repeat(auto-fill, minmax(89px,1fr)); margin-top:calc(var(--size-4) * -1);}
.hero-image-nav-link{border:3px solid;}
.hero-image-nav-link:before{padding-top:100%;}



.detail-content{display:grid; grid-gap:var(--size-3); padding:var(--size-4); font-size:17px; line-height:150%;}
.detail-content > ul, .detail-content > ol{padding-left:20px;}
.detail-content > ul{list-style:square;}
.detail-content > ol{list-style:decimal;}
.detail-content > ul > li, .detail-content > ol > li{padding:2px 0;}
.detail-content h2, .detail-content h3, .detail-content h4{font-weight:bold; font-size:19px; line-height:150%;}

.detail-content-image .detail-content-image{position:absolute; top:0; left:0; width:100%; height:100%;}



.read-alternative{position:relative; padding-left:var(--size-4); font-size:14px; line-height:150%;}
.read-alternative:before{content:''; display:block; position:absolute; top:0; left:0; width:var(--size-1); height:100%;}
.read-alternative-link{display:block;}



.tag-related{display:flex; flex-wrap:wrap; margin-bottom:var(--size-2);}
.tag-related-link{margin-right:var(--size-3); margin-top:var(--size-2); display:flex; font-size:14px;}



.detail-top{margin-bottom:var(--size-3);}





@media screen and (min-width:0px) and (max-width:1023px){
  .article-head{margin-left:var(--size-4); margin-right:var(--size-4);}
  .article-title{font-size:20px; line-height:140%;}
  
  .hero-image-nav{padding:0 var(--size-3);}
  
  .detail-top{margin-top:calc(var(--size-4) * -1);}
}



@media screen and (min-width:1024px){
  .article-title{font-size:30px; line-height:120%;}
}