@charset "UTF-8";
:root{
  --report-line:#a9bbd2;      /* タグの枠・区切り線 */
  --report-text:#5d7596;      /* タグの文字。白地 4.7:1 */
  --report-body:#4a5561;      /* 本文（リード・抜粋） */
  --report-muted:#66727f;     /* 日付・注記。白地 5.3:1 */
  --report-soon-bg:#fafbfd;   /* COMING SOON の面 */
  --report-soon-thumb:#eef2f7;
}

/* 共通 */

.report-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:3px 11px;
  border:1px solid var(--report-line);
  background:#fff;
  color:var(--report-text);
  font-size:13px;
  font-weight:500;
  line-height:1.8;
  white-space:nowrap;
}
.report-tag__dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--report-dot,#9aa7b4);
}
.report-tag__dot--industry{--report-dot:#1c9fd0;}  /* 業種 */
.report-tag__dot--theme   {--report-dot:#b5651d;}  /* テーマ */
.report-tag__dot--period  {--report-dot:#66727f;}  /* 公開時期 */

.report-tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}

.report-thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--light);
}
.report-thumb__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---- 日付・NEW ---- */
.report-date{
  color:var(--report-muted);
  font-family:var(--font-number);
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
}
.report-new{
  padding:3px 12px;
  background:var(--Accent-navy);
  color:#fff;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
}
.report-soon{
  align-self:flex-start;
  padding:2px 12px;
  border:1px solid var(--line-light);
  color:var(--report-muted);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
}


/* 一覧ページ */
.report-list{
  background:var(--light);
  padding:56px 0 96px;
}
.report-list__intro{
  margin-bottom:40px;
  padding-bottom:34px;
  border-bottom:1px solid var(--line-light);
  color:var(--ink);
  font-size:16px;
  font-weight:500;
  line-height:2;
}
.report-list__layout{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:56px;
  align-items:start;
}

/* ---- サイドバー（絞り込み） ---- */
.report-filter{
  position:sticky;
  top:calc(var(--header-h,62px) + 24px);
  line-height: 1.5;
}
.report-filter__count{
  padding-bottom:14px;
  border-bottom:1px solid var(--report-line);
  color:var(--report-text);
  font-size:16px;
  font-weight:500;
}
.report-filter__count-num{
  margin:0 4px;
  font-family:var(--font-number);
  font-size:26px;
  font-weight:700;
  color:var(--Accent-navy);
}
.report-filter__group{
  min-width:0;
  margin:0;
  padding:20px 0;
  border:0;
  border-bottom:1px solid var(--report-line);
}
.report-filter__label{
  padding:15px 0 0 0;
  color:var(--Accent-navy);
  font-size:16px;
  font-weight:700;
}
.report-filter__items{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.report-filter__item{
  position:relative;
  display:inline-flex;
}
.report-filter__item[hidden],
.report-filter__group[hidden],
.report-filter__sort[hidden]{display:none;}

.report-filter__legend-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* display:none にはしない（フォーカスが当たらなくなり、キーボード操作ができなくなるため） */
.report-filter__input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.report-filter__input + .report-tag{
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.report-filter__input + .report-tag:hover{
  border-color:var(--blue-500);
  color:var(--Accent-navy);
}
.report-filter__input:checked + .report-tag{
  border-color:var(--Accent-navy);
  background:var(--Accent-navy);
  color:#fff;
}
.report-filter__input:checked + .report-tag .report-tag__dot{
  background:#fff;
}

/* ---- 並び順 ---- */
.report-filter__sort{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  margin:0;
  padding:20px 0 0;
  border:0;
}
.report-filter__sort-item{position:relative;display:inline-flex;}
.report-filter__sort-label{
  position:relative;
  padding:0 0 6px;
  color:var(--report-muted);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:color .25s ease;
}
.report-filter__sort-label::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:var(--Accent-navy);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.report-filter__sort-label:hover{color:var(--Accent-navy);}
.report-filter__sort-label:hover::after{
  transform:scaleX(1);
  transform-origin:left center;
}
.report-filter__input:checked + .report-filter__sort-label{color:var(--Accent-navy);}
.report-filter__input:checked + .report-filter__sort-label::after{
  transform:scaleX(1);
  transform-origin:left center;
}
.report-list__main{min-width:0;}

.report-list__results{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}
.report-list__item{display:flex;}
.report-list__item[hidden]{display:none;}
.report-list__empty{
  margin:0 0 24px;
  padding:56px 24px;
  border:1px dashed var(--report-line);
  background:#fff;
  color:var(--report-muted);
  font-size:14px;
  font-weight:500;
  text-align:center;
}

.report-card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  border:1px solid var(--line-light);
  background:#fff;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.report-card:hover{
  transform:translateY(-3px);
  border-color:#b9cde4;
  box-shadow:0 14px 30px rgba(0,36,109,.10);
}
.report-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:10px;
  padding:24px 22px 26px;
}
.report-card__meta{
  display:flex;
  align-items:center;
  gap:12px;
}
.report-card__title{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.85;
}
.report-card__link{
  color:inherit;
  text-decoration:none;
}

.report-card__link::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.report-card__text{
  color:var(--report-body);
  font-size:14px;
  font-weight:500;
  line-height:1.8;
}
.report-card__tags{margin-top:auto;padding-top:14px;}

/* ---- COMING SOON ---- */
.report-card--soon{
  border-style:dashed;
  background:var(--report-soon-bg);
  cursor:default;
}
.report-card--soon:hover{
  transform:none;
  border-color:var(--line-light);
  box-shadow:none;
}
.report-card--soon .report-thumb{background:var(--report-soon-thumb);}
.report-card--soon .report-card__title{
  color:var(--report-muted);
  font-weight:500;
}

/* ---- もっと見る ---- */
.reports__foot{
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:48px;
  padding-top:26px;
}
.reports__foot[hidden]{display:none;}
.reports__copy{
  flex:0 0 auto;
  color:var(--report-muted);
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
}
.reports__copy-num{
  font-family:var(--font-number);
  font-size:14px;
  font-weight:700;
  margin:0 2px;
}
.reports__rule{
  position:relative;
  flex:1;
  height:1px;
  background:var(--line-light);
  overflow:hidden;
}
.reports__rule::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--Accent-navy);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.reports__more{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:22px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  color:var(--Accent-navy);
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  transition:color .35s ease;
}
.reports__foot:hover .reports__rule::after,
.reports__foot:focus-within .reports__rule::after{transform:scaleX(1);}
.reports__foot:hover .reports__more,
.reports__foot:focus-within .reports__more{color:var(--blue-500);}
.reports__more:focus-visible{outline:3px solid var(--Accent-navy);outline-offset:4px;}

/* ---- もっと見る（ホバー時の下移動に変更） ---- */
.reports__foot:hover .arrow-down::before,
.reports__foot:focus-within .arrow-down::before {
  /* 下へ4px移動 */
  transform: translateX(-50%) translateY(4px);
}
.reports__foot:hover .arrow-down::after,
.reports__foot:focus-within .arrow-down::after {
  transform: translateX(-50%) translateY(4px) rotate(45deg);
}

/* ---- 矢印（下向き用） ---- */
.arrow-down {
  position: relative;
  display: block;
  width: 18px;
  height: 26px;
  flex: 0 0 auto;
}
.arrow-down::before,
.arrow-down::after {
  content: "";
  position: absolute;
  transition: transform .34s cubic-bezier(.4,0,.2,1);
}

/* 直線部分（縦線） */
.arrow-down::before {
  height: 15px;
  bottom: 6px;
  left: 50%;
  width: 1.5px;
  background: currentColor;
  transform: translateX(-50%);
}

/* 矢尻部分（下向きの「v」） */
.arrow-down::after {
  bottom: 6px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

/* ---- フォーカス ---- */
.report-filter__input:focus-visible + .report-tag,
.report-filter__input:focus-visible + .report-filter__sort-label{
  outline:3px solid var(--Accent-navy);
  outline-offset:2px;
}
.report-card__link:focus-visible{outline:0;}
.report-card__link:focus-visible::before{
  outline:3px solid var(--Accent-navy);
  outline-offset:2px;
}


/* ---- レスポンシブ ---- */

@media (max-width:1024px){
  .report-list__layout{
    grid-template-columns:1fr;
    gap:36px;
  }
  .report-filter{position:static;}
}
@media (max-width:820px){
  .report-list{padding:44px 0 72px;}
  .report-list__results{gap:20px;}
}
@media (max-width:640px){
  .report-list__results{grid-template-columns:1fr;}
  .report-list__intro{
    margin-bottom:28px;
    padding-bottom:26px;
    font-size:15px;
  }
  .report-card__body{padding:20px 18px 22px;}
  .report-card__title{font-size:15px;}
  .reports__foot{flex-wrap:wrap;gap:14px;margin-top:36px;}
  .reports__copy{order:3;width:100%;}
  .reports__rule{order:1;}
  .reports__more{order:2;font-size:15px;gap:14px;}
}

@media (prefers-reduced-motion:reduce){
  .report-card,
  .report-filter__input + .report-tag,
  .report-filter__sort-label,
  .report-filter__sort-label::after{
    transition:none;
  }
  .report-card:hover{transform:none;}
  .reports__rule::after,
  .reports__more,
  .arrow-down::before,
  .arrow-down::after{transition:none;}
}


/* ---- フォールバック ---- */

/* aspect-ratio は Safari 15 / iOS 15 から。それ以前は padding */
@supports not (aspect-ratio:16/9){
  .report-thumb{height:0;padding-top:56.25%;}
  .report-thumb__img{position:absolute;inset:0;}
}

/* :focus-visible は Safari 15.4 / iOS 15.4 から。それ以前は :focus  */
@supports not selector(:focus-visible){
  .report-filter__input:focus + .report-tag,
  .report-filter__input:focus + .report-filter__sort-label,
  .report-card__link:focus{
    outline:3px solid var(--Accent-navy);
    outline-offset:2px;
  }
}

/* iOS でタップ時の灰色の矩形が出ないように */
.report-card__link,
.report-filter__input + .report-tag{-webkit-tap-highlight-color:transparent;}


/* ---- 印刷時の設定 ---- */
@media print{
  .report-filter,
  .reports__foot,
  .report-list__empty{display:none;}
  /* 印刷時は「もっと見る」で隠れているぶんも出します */
  .report-list__item[hidden]{display:flex !important;}
  .report-list{background:#fff;padding:0;}
  .report-list__layout{display:block;}
  .report-list__results{grid-template-columns:1fr;gap:12px;}
  .report-card{border-color:#999;break-inside:avoid;}
  .report-thumb{display:none;}
}