@charset "UTF-8";
/* ============================================================
   /artifact 固有
   共通部分は ../shared/css/subpage.css。こちらを後に読み込む。
   ※ 成果物の画像は使わない（掲載許諾の範囲が未確認のため）。
     使用技術タグとカードの余白で見せる構成にしている。
   ============================================================ */

/* ------------------------------------------------------------
   リード
   ------------------------------------------------------------ */
.lead-box{
  max-width:900px;margin:0 auto;padding:34px 40px;
  background:var(--blue-pale);border-radius:20px;
  font-size:20px;font-weight:400;line-height:1.8;text-align:justify;
}
.lead-box b{color:var(--blue)}
.works-lead{margin-bottom:28px;text-align:center}

/* ------------------------------------------------------------
   成果物カード
   ------------------------------------------------------------ */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.works-card{
  display:flex;flex-direction:column;gap:12px;
  padding:28px 26px;
  background:#fff;border:2px solid var(--blue);border-radius:20px;
}
.works-name{font-size:19px;font-weight:700;line-height:1.5}
.works-sum{font-size:15px;line-height:1.8;text-align:justify}
/* 要約とリンクのあいだを伸ばして、カードの高さが揃ってもリンクが下端に並ぶ */
.works-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.works-tags li{
  padding:4px 10px;
  background:var(--blue-pale);border-radius:30px;
  font-size:12px;font-weight:700;line-height:1.4;color:var(--blue);
}
.works-link{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:15px;font-weight:700;color:var(--blue);
}
.works-link::after{
  content:"";width:0;height:0;
  border-left:6px solid var(--blue);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.works-link:hover{text-decoration:underline}

/* 開閉 UI は 640px 以下だけ */
.works-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.works-more{display:none}

/* ------------------------------------------------------------
   1160px 以下
   ------------------------------------------------------------ */
@media (max-width:1160px){
  .lead-box{padding:30px 34px;font-size:18px}
  .works{grid-template-columns:repeat(2,1fr);gap:18px}
  .works-card{padding:24px 22px}
  .works-name{font-size:18px}
  .works-sum{font-size:14px;line-height:1.7}
}

/* ------------------------------------------------------------
   930px 以下
   ------------------------------------------------------------ */
@media (max-width:930px){
  .lead-box{padding:24px 26px;font-size:16px;line-height:1.7}
  .works{gap:14px}
  .works-card{padding:20px 18px;gap:10px}
  .works-name{font-size:17px}
  .works-sum{font-size:13px}
  .works-tags li{font-size:11px;padding:3px 9px}
  .works-link{font-size:14px}
}

/* ------------------------------------------------------------
   640px 以下
   1 カラムにすると 14 件では縦に伸びすぎるので、
   /job-change-support の転職事例と同じ考え方で初期 6 件に絞る。
   14 件とも HTML には書いてあり、CSS で隠すだけ（JS は使わない）。
   ------------------------------------------------------------ */
@media (max-width:640px){
  .lead-box{padding:18px 18px;font-size:14px;line-height:1.7;border-radius:15px}
  .works-lead{margin-bottom:18px}

  .works{position:relative;grid-template-columns:1fr;gap:12px}
  .works-card{padding:16px 16px;gap:8px;border-radius:15px}
  .works-name{font-size:16px;line-height:1.45}
  .works-sum{font-size:13px;line-height:1.65}
  .works-tags{gap:5px;padding-top:2px}
  .works-tags li{font-size:11px;padding:3px 8px}
  .works-link{font-size:14px}

  /* 7 件目以降を隠す。6 件目の下を軽くフェードさせて続きがあることを示す */
  .works-card:nth-child(n+7){display:none}
  .works::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
    background:linear-gradient(180deg,rgba(230,240,250,0) 0%,var(--blue-pale) 90%);
    pointer-events:none;
  }
  .works-toggle:checked ~ .works .works-card:nth-child(n+7){display:flex}
  .works-toggle:checked ~ .works::after{display:none}

  /* もっと見る / 閉じる。既存の青と白だけで作る（新しい色は足さない） */
  .works-more{
    display:flex;align-items:center;justify-content:center;gap:6px;
    width:100%;margin-top:14px;padding:12px 16px;
    background:#fff;border:2px solid var(--blue);border-radius:60px;
    color:var(--blue);font-size:14px;font-weight:700;line-height:1.4;
    cursor:pointer;
  }
  .works-more::after{
    content:"";width:0;height:0;
    border-top:6px solid var(--blue);
    border-left:5px solid transparent;border-right:5px solid transparent;
  }
  .works-more-close{display:none}
  .works-toggle:checked ~ .works-more .works-more-open{display:none}
  .works-toggle:checked ~ .works-more .works-more-close{display:inline}
  .works-toggle:checked ~ .works-more::after{
    border-top:0;border-bottom:6px solid var(--blue);
  }
  .works-toggle:focus-visible ~ .works-more{outline:2px solid var(--blue);outline-offset:3px}
}