.flmp-portal {
  --flmp-yellow: #ffe333;
  --flmp-ink: #30302d;
  box-sizing: border-box;
  color: var(--flmp-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.75;
}

body.flmp-article-library-page #page_header,
body.flmp-article-library-page .page_header { display: none !important; }

.flmp-portal.flmp-article-library {
  margin-left: calc((100% - var(--flmp-library-viewport-width, calc(100vw - 16px))) / 2);
  max-width: none;
  padding: clamp(18px, 2.6vw, 36px);
  width: var(--flmp-library-viewport-width, calc(100vw - 16px));
}

.flmp-article-library-intro {
  background: #191919;
  border: 1px solid #292929;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(18, 16, 11, .18);
  color: #fff;
  display: flex;
  min-height: clamp(430px, 52vw, 590px);
  overflow: hidden;
  position: relative;
}

.flmp-article-library-intro::before {
  background: radial-gradient(circle at 82% 18%, rgba(255, 220, 31, .18), transparent 28%), linear-gradient(90deg, rgba(7,7,7,.86), rgba(7,7,7,.46) 52%, rgba(7,7,7,.72));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.flmp-article-kinetic {
  inset: -13% -22%;
  overflow: hidden;
  position: absolute;
  transform: rotate(-6deg) scale(1.08);
  transform-origin: center;
}

.flmp-article-kinetic-stage {
  display: grid;
  gap: 10px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
}

.flmp-article-kinetic-band { overflow: hidden; }
.flmp-article-kinetic-track {
  animation: flmp-article-band-flow 34s linear infinite;
  display: flex;
  width: max-content;
  will-change: transform;
}
.flmp-article-kinetic-band:nth-child(2) .flmp-article-kinetic-track { animation-duration: 46s; }
.flmp-article-kinetic-band:nth-child(3) .flmp-article-kinetic-track { animation-duration: 38s; }
.flmp-article-kinetic-band:nth-child(4) .flmp-article-kinetic-track { animation-duration: 52s; }
.flmp-article-kinetic-band.is-reverse .flmp-article-kinetic-track { animation-direction: reverse; }
.flmp-article-kinetic-sequence { display: flex; gap: 10px; padding-right: 10px; }
.flmp-article-kinetic-tile {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  display: block;
  flex: 0 0 auto;
  height: clamp(86px, 9.4vw, 128px);
  line-height: 0;
  overflow: hidden;
}
.flmp-article-kinetic-tile img {
  display: block;
  height: 100% !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: 280px !important;
  object-fit: contain;
  width: auto !important;
}
.flmp-article-kinetic.is-paused .flmp-article-kinetic-track { animation-play-state: paused; }
@keyframes flmp-article-band-flow { to { transform: translate3d(-50%,0,0); } }

.flmp-article-library-copy {
  align-self: center;
  background: rgba(9,9,9,.68);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
  margin: auto;
  max-width: 700px;
  padding: clamp(26px, 4.4vw, 58px);
  position: relative;
  text-align: center;
  width: min(78%, 700px);
  z-index: 3;
}
@supports (backdrop-filter: blur(8px)) { .flmp-article-library-copy { backdrop-filter: blur(8px); } }
.flmp-section-kicker { font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.flmp-article-library-intro .flmp-section-kicker { color: var(--flmp-yellow) !important; margin: 0 0 14px; }
.flmp-portal.flmp-article-library .flmp-article-library-intro h1 {
  color: #fff !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(30px, 4.1vw, 52px);
  letter-spacing: .04em;
  line-height: 1.28;
  margin: 0;
}
.flmp-article-library-copy > p:not(.flmp-section-kicker) {
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.9;
  margin: 18px auto 0;
  max-width: 580px;
}
.flmp-article-library-cue { color: var(--flmp-yellow); display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: .22em; margin-top: 22px; }

.flmp-article-filters {
  background: rgba(255,255,255,.96);
  border: 1px solid #e2dccf;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(31,28,20,.1);
  margin: -22px 12px 30px;
  overflow: hidden;
  padding: 10px 14px 13px;
  position: relative;
  z-index: 4;
}
.flmp-article-filter-group {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 62px minmax(0,1fr);
  padding: 6px 0;
}
.flmp-article-filter-group + .flmp-article-filter-group { border-top: 1px solid #ece7dc; }
.flmp-article-filter-label {
  color: #8b826f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
}
.flmp-article-filter-options {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: thin;
}
.flmp-article-filters a,
.flmp-article-filters a:visited {
  background: #fff;
  border: 1px solid #ded8cb;
  border-radius: 999px;
  color: #27251f;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 12px 18px;
  text-decoration: none;
  transition: .2s ease;
}
.flmp-article-filters a:hover,
.flmp-article-filters a:focus-visible,
.flmp-article-filters a.is-active { background: #191919; border-color: #191919; color: #fff; outline: none; transform: translateY(-1px); }
.flmp-article-filters a.is-active { box-shadow: inset 0 -3px 0 var(--flmp-yellow); }
.flmp-article-filters a.is-type { background: #191919; border-color: #191919; color: #fff; font-weight: 900; }
.flmp-article-filters a.is-type.is-active { color: var(--flmp-yellow); }

.flmp-article-public-access {
  align-items: center;
  background: #fff9d5;
  border: 1px solid #e5c900;
  border-radius: 20px;
  display: grid;
  gap: clamp(20px, 3vw, 42px);
  grid-template-columns: minmax(0,1fr) auto;
  margin: 0 0 clamp(28px,4vw,46px);
  overflow: hidden;
  padding: clamp(20px,3vw,34px);
  position: relative;
}
.flmp-article-public-access::after { background: var(--flmp-yellow); border-radius: 50%; content: ""; height: 150px; opacity: .62; position: absolute; right: -76px; top: -92px; width: 150px; }
.flmp-article-public-access-copy,.flmp-article-public-access-actions { position: relative; z-index: 1; }
.flmp-article-public-access .flmp-section-kicker { color: #7a6800; margin: 0 0 7px; }
.flmp-portal.flmp-article-library .flmp-article-public-access h2 { color: #191919; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px,2.2vw,32px); line-height: 1.45; margin: 0; }
.flmp-article-public-access-copy > p:last-child { color: #686251; font-size: 13px; margin: 8px 0 0; }
.flmp-article-public-access-actions { display: grid; gap: 10px; min-width: min(280px,28vw); }
.flmp-article-public-access-actions a,
.flmp-article-public-access-actions a:visited { align-items: center; border: 2px solid #191919; border-radius: 999px; display: flex; font-size: 13px; font-weight: 900; justify-content: center; min-height: 48px; padding: 10px 20px; text-decoration: none; transition: .2s ease; }
.flmp-article-public-access-primary,.flmp-article-public-access-primary:visited { background: #191919; color: #fff !important; }
.flmp-article-public-access-primary span { color: var(--flmp-yellow); font-size: 19px; margin-left: 12px; }
.flmp-article-public-access-login,.flmp-article-public-access-login:visited { background: transparent; color: #191919 !important; }
.flmp-article-public-access-actions a:hover,.flmp-article-public-access-actions a:focus-visible { box-shadow: 0 7px 18px rgba(30,26,14,.16); outline: none; transform: translateY(-2px); }

.flmp-article-library-heading { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin: 0 0 16px; }
.flmp-portal.flmp-article-library .flmp-article-library-heading h2 { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(25px,2.5vw,36px); letter-spacing: .05em; margin: 0; }
.flmp-article-library-heading > span { color: #777167; font-size: 12px; font-weight: 800; }
.flmp-article-library-heading > span b { color: #191919; font-size: 15px; }
.flmp-article-grid-viewport { margin-inline: clamp(-34px,-2.2vw,-14px); overflow: clip; padding-inline: clamp(14px,2.2vw,34px); }
.flmp-article-grid { display: grid; gap: clamp(3px,.42vw,8px); grid-auto-flow: dense; grid-auto-rows: clamp(118px,9vw,170px); grid-template-columns: repeat(7,minmax(0,1fr)); }
.flmp-article-card,.flmp-article-card:visited {
  --flmp-row-shift: 0px;
  align-self: stretch;
  background: #191919;
  color: #fff;
  display: block;
  grid-column: span 1;
  grid-row: span 1;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transform: translate3d(var(--flmp-row-shift),0,0);
  transition: transform .14s linear;
}
.flmp-article-card--post,.flmp-article-card.is-popular { grid-column: span 2; grid-row: span 2; }
.flmp-article-card--post.is-popular { grid-column: span 3; }
.flmp-article-card-media { background: #191919; display: block; height: 100%; line-height: 0; overflow: hidden; position: relative; z-index: 0; }
.flmp-article-card-media::after { background: rgba(20,92,84,.92); content: ""; inset: 0; opacity: 0; position: absolute; transition: opacity .3s ease; }
.flmp-article-card--column .flmp-article-card-media::after { background: rgba(115,80,16,.92); }
.flmp-article-card-media img { display: block; height: 100% !important; margin: 0 !important; max-height: none !important; max-width: 100% !important; object-fit: contain; transition: filter .3s ease; width: 100% !important; }
.flmp-article-card-placeholder { align-items: center; background: linear-gradient(145deg,#2e2b22,#111); color: var(--flmp-yellow); display: flex; flex-direction: column; height: 100%; justify-content: center; letter-spacing: .1em; width: 100%; }
.flmp-article-card-placeholder b { font-size: 23px; }
.flmp-article-card-placeholder small { color: rgba(255,255,255,.64); font-size: 10px; margin-top: 6px; }
.flmp-article-card-overlay { align-items: flex-start; color: #fff !important; display: flex; flex-direction: column; inset: 0; justify-content: center; opacity: 0; padding: clamp(12px,1.5vw,20px); position: absolute; transform: translateY(8px); transition: opacity .28s ease,transform .32s cubic-bezier(.2,.7,.2,1); z-index: 2; }
.flmp-article-card-meta { align-items: center; color: rgba(255,255,255,.76) !important; display: flex; font-size: 9px; gap: 8px; left: 10px; position: absolute; top: 10px; }
.flmp-article-card-meta > span { border: 1px solid rgba(255,255,255,.58); color: #fff; display: inline-block; font-weight: 900; max-width: 68%; overflow: hidden; padding: 5px 7px; text-overflow: ellipsis; white-space: nowrap; }
.flmp-article-card-meta em { background: var(--flmp-yellow); color: #191919; font-size: 8px; font-style: normal; font-weight: 900; padding: 5px 7px; }
.flmp-article-card-overlay > strong { color: #fff !important; display: -webkit-box; font-size: clamp(13px,1.1vw,16px); font-weight: 800; line-height: 1.45; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.flmp-article-card--post .flmp-article-card-overlay > strong { font-size: clamp(16px,1.45vw,23px); }
.flmp-article-card.is-popular .flmp-article-card-overlay > strong { font-size: clamp(18px,1.7vw,27px); }
.flmp-article-card-members-only { border-bottom: 2px solid var(--flmp-yellow); color: #fff; font-size: 9px; font-weight: 900; margin-top: 10px; padding-bottom: 3px; }
.flmp-article-card-tap-hint { display: none; }
.flmp-article-card:hover .flmp-article-card-media::after,.flmp-article-card:focus-visible .flmp-article-card-media::after,.flmp-article-card.is-in-view .flmp-article-card-media::after { opacity: 1; }
.flmp-article-card:hover .flmp-article-card-media img,.flmp-article-card:focus-visible .flmp-article-card-media img,.flmp-article-card.is-in-view .flmp-article-card-media img { filter: saturate(.72) brightness(.86); }
.flmp-article-card:hover .flmp-article-card-overlay,.flmp-article-card:focus-visible .flmp-article-card-overlay,.flmp-article-card.is-in-view .flmp-article-card-overlay { opacity: 1; transform: translateY(0); }

.flmp-article-pagination { margin-top: 36px; }
.flmp-article-pagination .page-numbers { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.flmp-article-pagination a.page-numbers,.flmp-article-pagination span.page-numbers { align-items: center; background: #fff; border: 1px solid #ded8cb; border-radius: 50%; color: #25231f; display: inline-flex; font-size: 12px; font-weight: 800; height: 40px; justify-content: center; min-width: 40px; padding: 0 10px; text-decoration: none; }
.flmp-article-pagination .prev.page-numbers,.flmp-article-pagination .next.page-numbers { border-radius: 999px; width: auto; }
.flmp-article-pagination span.current,.flmp-article-pagination a.page-numbers:hover,.flmp-article-pagination a.page-numbers:focus-visible { background: #191919; border-color: #191919; color: #fff; }
.flmp-article-library.has-infinite-scroll .flmp-article-pagination { display: none; }
.flmp-article-load-more { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 128px; overflow-anchor: none; padding: 30px 16px 8px; text-align: center; }
.flmp-article-load-button { background: #191919; border: 2px solid #191919; border-radius: 999px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 900; min-height: 46px; min-width: 168px; padding: 10px 22px; }
.flmp-article-load-button[hidden] { display: none; }
.flmp-article-load-button:disabled { cursor: wait; opacity: .7; }
.flmp-article-load-status { color: #777167; font-size: 11px; margin: 12px 0 0; }
.flmp-article-load-status.is-error { color: #9c2f24; }
.flmp-article-load-more.is-loading::before { animation: flmp-loader .8s linear infinite; border: 3px solid #e5dfd2; border-radius: 50%; border-top-color: #191919; content: ""; height: 26px; margin-bottom: 10px; width: 26px; }
@keyframes flmp-loader { to { transform: rotate(360deg); } }
.flmp-article-empty { background: #fffdf4; border: 1px solid #eadc92; border-radius: 18px; padding: 44px 24px; text-align: center; }

@media (max-width:1599px) { .flmp-article-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media (max-width:1320px) { .flmp-article-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width:1080px) { .flmp-article-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:820px) {
  .flmp-article-grid { grid-auto-rows: clamp(108px,20vw,150px); grid-template-columns: repeat(3,minmax(0,1fr)); }
  .flmp-article-card--post.is-popular { grid-column: span 3; }
}
@media (hover:none),(pointer:coarse) {
  .flmp-article-card .flmp-article-card-media::after,.flmp-article-card .flmp-article-card-overlay { opacity: 0; }
  .flmp-article-card .flmp-article-card-overlay { transform: translateY(14px); }
  .flmp-article-card.is-tap-preview .flmp-article-card-media::after,.flmp-article-card.is-tap-preview .flmp-article-card-overlay { opacity: 1; }
  .flmp-article-card.is-tap-preview .flmp-article-card-overlay { transform: translateY(0); }
  .flmp-article-card.is-tap-preview .flmp-article-card-media img { filter: saturate(.72) brightness(.86); }
  .flmp-article-card-tap-hint { color: rgba(255,255,255,.78); display: inline-block; font-size: 8px; font-weight: 800; margin-top: 7px; }
}
@media (max-width:620px) {
  .flmp-portal.flmp-article-library { padding: 12px; }
  .flmp-article-library-intro { border-radius: 20px; min-height: 400px; }
  .flmp-article-kinetic { inset: -8% -72%; transform: rotate(-5deg) scale(1.04); }
  .flmp-article-kinetic-stage { gap: 8px; width: 170%; }
  .flmp-article-kinetic-band:nth-child(4) { display: none; }
  .flmp-article-kinetic-sequence { gap: 8px; padding-right: 8px; }
  .flmp-article-kinetic-tile { height: 98px; }
  .flmp-article-library-copy { padding: 24px 18px; width: calc(100% - 36px); }
  .flmp-portal.flmp-article-library .flmp-article-library-intro h1 { font-size: clamp(27px,8vw,34px); }
  .flmp-article-library-copy > p:not(.flmp-section-kicker) { font-size: 12px; line-height: 1.8; }
  .flmp-article-filters { border-radius: 16px; margin: -16px 6px 22px; padding: 9px 10px 11px; }
  .flmp-article-filter-group { align-items: start; gap: 4px; grid-template-columns: 1fr; }
  .flmp-article-filter-label { padding-left: 5px; text-align: left; }
  .flmp-article-filters a,.flmp-article-filters a:visited { font-size: 11px; padding: 11px 15px; }
  .flmp-article-public-access { border-radius: 16px; grid-template-columns: 1fr; margin-bottom: 28px; padding: 20px 17px; }
  .flmp-article-public-access-actions { min-width: 0; }
  .flmp-article-grid { gap: 3px; grid-auto-rows: clamp(104px,30vw,132px); grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flmp-article-card--post,.flmp-article-card--post.is-popular,.flmp-article-card.is-popular { grid-column: span 2; }
  .flmp-article-card-overlay { padding: clamp(18px,6vw,28px); }
  .flmp-article-card-overlay > strong { font-size: clamp(13px,3.8vw,17px); }
  .flmp-article-card--post .flmp-article-card-overlay > strong,.flmp-article-card.is-popular .flmp-article-card-overlay > strong { font-size: clamp(17px,5vw,22px); }
}
@media (prefers-reduced-motion:reduce) {
  .flmp-article-card,.flmp-article-card-media img,.flmp-article-card-media::after,.flmp-article-card-overlay,.flmp-article-filters a { transition: none; }
  .flmp-article-kinetic-track { animation-duration: 68s !important; }
  .flmp-article-kinetic.is-paused .flmp-article-kinetic-track { animation-play-state: paused; }
}