/* SP theme is the base. These rules scale its shared templates upward. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { color: #f4f6f8; }
nav.pickup, .blogroll-list-wrap, .rankbox, .att-main { color: #222; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
.main, .page-main { max-width: 100%; }
.article-inner, .contens-base { overflow-wrap: anywhere; }
.page-main table { display: block; max-width: 100%; overflow-x: auto; }
#pager .current, .pagenavi .current { cursor: default; opacity: .45; }
.search-submit, input[type=submit].searchsubmit { background-image: none; color: #fff; font-size: 22px; cursor: pointer; }
.ads-336-280 { max-width: 100%; }
.popular-section { margin: 32px 0 0; padding: 20px 16px 8px; border-radius: 12px; background: rgba(0, 0, 0, .12); }
.popular-section-weekly { border-top: 3px solid #a83f3f; }
.popular-section-monthly { margin-top: 48px; margin-bottom: 48px; border-top: 3px solid #f0bd38; }
.popular-section > .h-title, .tag-list > .h-title { text-align: center; }
.new-posts-title { text-align: center; }
.tag-list .tag-list__inner a span { color: #dfe1e3; }
.head-tag-items a { background-color: #a83f3f; }
.download { background-color: #e60000; border: 2px solid #fff; }
.download-thin { background-color: #3e5bc5; border: 2px solid #fff; }
.article-inner .main-img { aspect-ratio: 4 / 3; margin-bottom: 32px; }
.article-inner .main-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.article-inner .content-area img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto 20px; }
.admin-review__content.is-collapsed { position: relative; max-height: var(--review-preview-height); overflow: hidden; }
.admin-review__content.is-collapsed::after { content: ""; position: absolute; inset: auto 0 0; height: 7em; background: linear-gradient(transparent, #4c545e); pointer-events: none; }
.admin-review__toggle, .circle-more__link { display: block; width: fit-content; margin: 12px auto 56px; padding: 8px 12px; border: 0; border-bottom: 1px solid #c6cbd0; border-radius: 0; background: rgba(76, 84, 94, .9); color: #f4f6f8; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; text-align: center; cursor: pointer; }
.admin-review__toggle[aria-expanded="false"] { position: relative; z-index: 1; margin-top: -14px; }
.admin-review__toggle:hover, .admin-review__toggle:focus-visible, .circle-more__link:hover, .circle-more__link:focus-visible { background: #27393b; color: #fff; text-decoration: underline; }
.admin-review__toggle:focus-visible, .circle-more__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.admin-review__toggle[hidden] { display: none; }
.admin-review__toggle span, .circle-more__link span { margin-left: 6px; }
.circle-more { margin: -34px 0 52px; text-align: center; }
.circle-more__link { margin: 0 auto; }
.work-details { margin: 48px 0; border: 1px solid #8e98a3; border-top: 3px solid #a83f3f; border-radius: 10px; background: rgba(0, 0, 0, .12); }
.work-details > summary { position: relative; padding: 16px 46px 16px 18px; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; }
.work-details > summary::-webkit-details-marker { display: none; }
.work-details > summary::after { content: "＋"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; }
.work-details[open] > summary::after { content: "－"; }
.work-details > summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.work-details__content { padding: 8px 18px 20px; border-top: 1px solid rgba(255, 255, 255, .25); }
.work-details__content > :last-child { margin-bottom: 0; }
.buyer-review-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.buyer-review { padding: 16px 18px; border: 1px solid #d8dfe5; border-left: 4px solid #a83f3f; border-radius: 8px; background: #f7f8fa; color: #263238; text-align: left; }
.buyer-review__label { margin: 0 0 8px; color: #655053; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.buyer-review__body { margin: 0; color: #263238; font-size: 15px; line-height: 1.8; }
.buyer-review__body p { margin: 0; }
.popular-section .h-title h3 { margin: 0 0 20px; }
.popular-section .article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.popular-section .article-list article.entrybox { width: auto; margin: 0; }

@media (min-width: 768px) {
  .popular-section .article-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
  .main, .page-main { width: min(1120px, calc(100% - 48px)); margin: 80px auto 32px; }
  .post-list, .entryboxs, .article-list { display: flex; flex-wrap: wrap; }
  .post-list article.entrybox, .entryboxs article.entrybox, .article-list article.entrybox { width: calc(25% - 24px); margin: 0 12px 28px; }
  .entrytitle { height: 40px; line-height: 20px; font-size: 14px; }
  .main > main > .h-title, .main > .h-title { margin-bottom: 18px; }
  .main > main > article.article-inner, .main > main > article, .main > main > .article-inner { max-width: 760px; margin-left: auto; margin-right: auto; }
  .main > aside, .main > .non-main { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .main > aside.single-post-header { max-width: 760px; }
  .article-inner .main-img { aspect-ratio: auto; }
  .article-inner .main-img img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
  .article-inner .main-img img, .article-inner .content-img img { max-width: 100%; }
  #top-slider { width: min(1320px, calc(100% - 64px)); padding: 22px 28px; margin-left: auto; margin-right: auto; }
  #top-slider .post-list-image { width: calc(100% - 20px); padding-bottom: 72%; }
  #top-slider span { width: calc(100% - 20px); height: 44px; line-height: 22px; font-size: 16px; }
  .page-main { min-height: 400px; }
  .footer-text { max-width: 1120px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .popular-section .article-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-list article.entrybox, .entryboxs article.entrybox, .article-list article.entrybox { width: calc(33.333% - 24px); }
}

@media (max-width: 767px) {
  .main { margin-left: 12px; margin-right: 12px; }
  .page-main { margin-left: 12px; margin-right: 12px; }
  .article-inner img { max-width: 100%; }
  .post-list, .entryboxs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; width: 100%; max-width: 100%; margin: 0 0 16px; }
  .post-list article.entrybox, .entryboxs article.entrybox { width: auto; margin: 0; }
  .post-list .entrytitle, .entryboxs .entrytitle { width: 100%; }
  .article-list { max-width: 100%; }
  .popular-section { padding: 18px 10px 4px; }
  .popular-section-monthly { margin-top: 40px; margin-bottom: 40px; }
  .popular-section .entrytitle { height: 40px; line-height: 20px; font-size: 14px; }
  #top-slider { max-width: 100%; overflow: hidden; }
  .footer-text { padding-left: 12px; padding-right: 12px; }
}