@charset "UTF-8";
/* =========================================================
   施工実績ページ  case.css
   case-archive.html（一覧） / case-single.html（詳細）
   Figma: archive PC 303:983 / SP 446:3314
          single  PC 303:1488 / SP 446:3368
   基準幅 PC=1920 / SP=375。style.css のトークン・部品を再利用。
   ========================================================= */

/* =========================================================
   下層ページ共通ヒーロー (mv 1920x430)
   bg #333 重ね + 写真。中央に Poppins 64px 英名 + Noto 20px 和名。
   ========================================================= */
.page-mv{
  position:relative;
  width:100%;
  height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#333333;
}
.page-mv::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url(../img/case/a8bd3465.png) center/cover no-repeat;
  opacity:.5;                       /* #333 ベタ重ね相当 */
}
.page-mv__copy{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:30px;
}
.page-mv__en{
  font:500 64px/64px var(--f-en);color:#fff;
  margin-top:-9px;margin-bottom:-10px;   /* leading-trim: lh64 */
}
.page-mv__jp{
  font:500 20px/24px var(--f-jp);color:#fff;
  margin-top:-5px;margin-bottom:-4px;     /* leading-trim: 20/lh24 */
}

/* =========================================================
   ARCHIVE (case-archive.html)  303:983
   ========================================================= */
.case-arch{
  position:relative;
  padding:100px 0 150px;
  background:#fff;
  overflow:hidden;
}
/* 背景の薄いブラー装飾（Figma: 4-7-8 Breathing / LAYER_BLUR r30） */
.case-arch__deco{
  position:absolute;right:-340px;top:-88px;width:1489px;height:1489px;z-index:0;
  background:url(../img/top/business-texture.png) center/cover no-repeat;
  filter:blur(50px);opacity:.5;pointer-events:none;border-radius:50%;
  background-color:rgba(86,137,213,.10);
}
.case-arch__inner{
  position:relative;z-index:1;
  width:1440px;margin:0 auto;
}
.case-arch__intro{margin:0 0 60px;font:500 14px/28px var(--f-jp);color:var(--c-text)}
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,460px);
  justify-content:space-between;
  column-gap:30px;
  row-gap:81px;
}

/* --- 事例カード（既存 .case-card の見た目に寄せつつグリッド配置） --- */
.case-card{width:460px}
.case-card__link{display:block}
.case-card__img{
  display:block;position:relative;
  width:460px;height:307px;border-radius:30px;overflow:hidden;
}
.case-card__img::after{content:"";position:absolute;inset:0;background:rgba(21,101,192,.10)}
.case-card__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-hover) var(--ease-gentle)}
.case-card__link:hover .case-card__img img{transform:scale(1.05)}

/* caption は通常フロー（flex gap だと leading-trim が効かずカード高が膨らむ） */
.case-card__cap{display:block;margin-top:30px}
.case-card__title{
  display:flex;align-items:center;gap:20px;
  font:500 18px/36px var(--f-jp);color:var(--c-text);
  margin-top:-11px;margin-bottom:-12px;   /* leading-trim: 18/lh36 */
}
.case-card__title-txt{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.case-card__title .arw-sm{flex-shrink:0;display:block}
.case-card__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* tag は style.css の .tag を再利用（h28 r50 #5689d5 / 12px white）。
   ただしこのページは Poppins 600 指定なので個別に上書き */
.case-arch .tag,
.case-single .tag{font:600 12px/24px var(--f-en)}

/* --- ページネーション (1/2/3 丸) --- */
.case-pager{
  margin-top:80px;
  display:flex;justify-content:center;align-items:center;gap:10px;
}
.case-pager__item{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  font:600 16px/24px var(--f-en);
  background:#fff;border:1px solid var(--c-blue-400);color:var(--c-blue-400);
  transition:background var(--dur-hover) var(--ease-gentle),color var(--dur-hover) var(--ease-gentle);
}
.case-pager__item.is-current{
  background:var(--c-blue-400);border-color:var(--c-blue-400);color:#fff;
}
a.case-pager__item:hover{background:var(--c-blue-400);color:#fff}

/* =========================================================
   SINGLE (case-single.html)  303:1488
   ========================================================= */
.case-single{
  position:relative;
  padding:100px 0 150px;
  background:#fff;
  overflow:hidden;
}
.case-single__deco{
  position:absolute;right:-340px;top:-88px;width:1489px;height:1489px;z-index:0;
  background:url(../img/top/business-texture.png) center/cover no-repeat;
  filter:blur(50px);opacity:.5;pointer-events:none;border-radius:50%;
  background-color:rgba(86,137,213,.10);
}
.case-single__inner{
  position:relative;z-index:1;
  width:1200px;margin:0 auto;
  display:flex;flex-direction:column;gap:80px;
}

/* --- 詳細カード（薄青の外箱） --- */
.case-detail{
  width:1200px;
  padding:50px 100px 100px;
  border-radius:30px;
  background:var(--c-bg-blue);
  display:flex;flex-direction:column;gap:50px;
}

/* 見出しブロック（日付+タグ → タイトル） */
.case-detail__head{
  padding-bottom:30px;
  border-bottom:1px solid var(--c-blue-400);
  display:flex;flex-direction:column;gap:20px;
}
.case-detail__meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.case-detail__date{
  font:500 14px/28px var(--f-en);color:var(--c-blue-400);white-space:nowrap;
}
.case-detail__tags{display:flex;gap:10px;flex-wrap:wrap}
.case-detail__title{
  font:500 24px/48px var(--f-jp);color:var(--c-text);
  margin-top:-15px;margin-bottom:-15px;   /* leading-trim: 24/lh48 */
}

/* 情報テーブル（白box） */
.case-table{
  background:#fff;
  padding:30px 50px;
  display:flex;flex-direction:column;gap:30px;
}
.case-table__row{
  display:flex;align-items:flex-start;gap:10px;
  padding-bottom:30px;
  border-bottom:1px solid var(--c-blue-400);
}
.case-table__row:last-child{padding-bottom:0;border-bottom:none}
.case-table__key{
  flex-shrink:0;width:200px;
  font:700 14px/28px var(--f-jp);color:var(--c-blue-400);
  margin-top:-9px;margin-bottom:-9px;     /* leading-trim: 14/lh28 */
}
.case-table__val{
  font:500 14px/28px var(--f-jp);color:#666666;
  margin-top:-9px;margin-bottom:-9px;
}

/* 写真ギャラリー（横並び・複数可。データは1枚485幅） */
.case-detail__gallery{
  display:flex;gap:30px;flex-wrap:wrap;
}
.case-detail__gallery img{
  width:485px;height:323px;object-fit:cover;display:block;
}

.case-detail__text{
  font:500 14px/28px var(--f-inter);color:var(--c-text);
  margin-top:-9px;margin-bottom:-9px;     /* leading-trim: 14/lh28 */
}

/* --- 一覧にもどる ボタン（白pill / 左向きグラデ円矢印） --- */
.case-single__back{display:flex;justify-content:center}
.back-btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  width:200px;height:56px;padding:0 30px;
  border:1px solid #9795b5;border-radius:50px;
  background:#fff;
  font:500 16px/40px var(--f-jp);color:var(--c-black);
  transition:background var(--dur-hover) var(--ease-gentle),
             color var(--dur-hover) var(--ease-gentle),
             border-color var(--dur-hover) var(--ease-gentle);
}
.back-btn__arw{
  display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--grad-blue);flex-shrink:0;
  transition:transform var(--dur-hover) var(--ease-gentle),background var(--dur-hover) var(--ease-gentle);
}
.back-btn__txt{margin-top:-14px;margin-bottom:-14px}   /* leading-trim: 16/lh40 */
.back-btn:hover{background:var(--grad-blue);color:#fff;border-color:transparent}
.back-btn:hover .back-btn__arw{background:#fff;transform:translateX(-3px)}
.back-btn:hover .back-btn__arw svg path{stroke:#3268b8}

/* =========================================================
   @media SP (max-width:768px)  ※375専用フレーム準拠
   archive 446:3314 / single 446:3368
   ========================================================= */
@media (max-width:768px){

  /* ---- 共通ヒーロー (mv___sp 375x280) ---- */
  .page-mv{height:280px}
  .page-mv__copy{gap:16px}
  .page-mv__en{font-size:36px;line-height:36px;margin-top:-5px;margin-bottom:-6px}
  .page-mv__jp{font-size:14px;line-height:20.272px;margin-top:-4px;margin-bottom:-4px}

  /* ---- ARCHIVE ---- */
  .case-arch{padding:80px 0}
  .case-arch__deco{right:auto;left:-188px;top:0;width:750px;height:750px;filter:blur(30px)}
  .case-arch__inner{width:auto;padding:0 40px}
  .case-arch__intro{margin-bottom:40px}
  .case-grid{
    grid-template-columns:295px;justify-content:center;
    column-gap:0;row-gap:80px;
  }
  .case-card{width:295px}
  .case-card__img{width:295px;height:196.9px}
  .case-pager{margin-top:80px}

  /* ---- SINGLE ---- */
  .case-single{padding:80px 0}
  .case-single__deco{right:auto;left:-188px;top:0;width:750px;height:750px;filter:blur(30px)}
  .case-single__inner{width:auto;padding:0 20px;gap:80px}
  .case-detail{width:auto;padding:50px 20px}
  .case-detail__title{font-size:20px;line-height:40px;margin-top:-13px;margin-bottom:-12px}  /* SP: 20/lh40 */
  .case-detail__head{gap:20px}

  /* SP テーブル: ラベル上・値下の縦積み（Figma 446:3368） */
  .case-table{padding:30px 20px;gap:20px}
  .case-table__row{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:20px}
  .case-table__key{width:auto}

  .case-detail__gallery img{width:100%;height:auto;aspect-ratio:295/196}
}