@charset "utf-8";
/* 島クリエイト：デザイン例の一覧とカード（トップ・デザイン例のページで使う部品）。読み込む順：base.css → parts.css → works-mock.css → ページの CSS
   2026-11-04 本人の依頼：見本のデザイン例（架空のお店3件：高級な飲食店・サロン・IT会社）を、パソコンの画面を主役に、スマホを小さく重ねて見せる。3件は構成から変える。
   画面の中の大きさはすべて cqw（画面の幅に対する割合）で決めるので、どの大きさに縮めても同じ見え方になる。
   本当のデザイン例が届いたら、画面の中身（.mk__site）を撮影画像に差し替える */

/* ---------- 一覧の並べ方 ---------- */

/* デザイン例のページ：1件ずつ横に大きく。画面とことばを左右交互に */
.works__list{ position:relative; z-index:1; display:grid; gap:220px; padding:80px var(--g) 0; }

.works__list > li > .work{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:56px; align-items:center; max-width:1240px; margin:0 auto; }

.works__list > li:nth-child(even) > .work{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); }

.works__list > li:nth-child(even) > .work > .mk{ order:2; }

/* トップ：3件を横に。画面の高さをずらして並べる */
.works--top .works__list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; padding:72px var(--g) 0; }

.works--top .works__list > li > .work,.works--top .works__list > li:nth-child(even) > .work{ display:block; }

.works--top .works__list > li:nth-child(2){ margin-top:96px; }

.works--top .works__list > li:nth-child(3){ margin-top:32px; }

.work{ display:block; color:var(--ink); text-decoration:none; }

.work:focus-visible{ outline:none; }

.work:focus-visible .mk__pc{ outline:3px solid var(--ink); outline-offset:6px; }

/* ---------- 画面の見本（パソコン＋小さなスマホ） ---------- */

.mk{ position:relative; padding:0 9% 12% 0; transition:transform .6s var(--pop); }

.work:hover .mk{ transform:translateY(-6px); }

.mk__pc{ container-type:inline-size; position:relative; z-index:0; background:var(--ink); border-radius:10px; padding:0 6px 6px; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); }

.mk__bar{ display:flex; gap:6px; align-items:center; height:22px; padding:0 6px; }

.mk__bar i{ width:8px; height:8px; border-radius:50%; background:#555; }

.mk__pc > .mk__site{ aspect-ratio:16 / 10; border-radius:3px; }

.mk__sp{ container-type:inline-size; position:absolute; z-index:1; right:0; bottom:0; width:24%; background:var(--ink); border-radius:16px; padding:5px; box-shadow:0 20px 40px -16px rgba(0,0,0,.5); }

.mk__sp > .mk__site{ aspect-ratio:9 / 19; border-radius:12px; }

.mk__site{ position:relative; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere; }

.mk__site img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.mk__tag{ position:absolute; left:-8px; top:-12px; z-index:3; padding:4px 12px 5px; background:var(--or); color:var(--ink); font-weight:800; font-size:13px; line-height:1.3; }

/* ---------- カードのことば ---------- */

.work__body{ display:grid; gap:10px; align-content:start; }

.works--top .work__body{ margin-top:20px; gap:4px; }

.work__meta{ display:flex; flex-wrap:wrap; gap:6px 8px; margin:0; font-size:13px; font-weight:700; line-height:1.5; }

.work__meta span{ padding:1px 8px; border:1.5px solid var(--ink); background:var(--wh); }


.work__cap{ margin:0; font-weight:800; font-size:clamp(22px,2.2vw,30px); line-height:1.4; }

.works--top .work__cap{ font-size:17px; }

.work__cap small{ display:block; margin-top:2px; font-size:12px; font-weight:700; }

.work__pt{ margin:6px 0 0; font-weight:700; font-size:18px; line-height:1.6; word-break:auto-phrase; }

/* ---------- 幅ごと ---------- */

/* デザイン例のページ：スマホ・タブレットでは、テイスト名を2枚の画像の上に出す（2026-11-06 本人「画像の間に文字が来ている」） */
@media (max-width:1023px){
  .works__list > li > .work{ align-items:stretch; }
  .works:not(.works--top) .work{ display:flex; flex-direction:column; gap:20px; }
  .works:not(.works--top) .work__body{ display:contents; }
  .works:not(.works--top) .work__cap{ order:-2; }
  .works:not(.works--top) .work__pt{ order:-1; margin-top:-14px; }
  .works:not(.works--top) .work__sub{ margin-top:4px; }
}

@media (max-width:1023px){
  .works__list{ gap:140px; padding:64px var(--g) 0; }
  .works__list > li > .work,.works__list > li:nth-child(even) > .work{ grid-template-columns:1fr; gap:28px; }
  .works__list > li:nth-child(even) > .work > .mk{ order:0; }
  .works--top .works__list{ grid-template-columns:1fr; gap:64px; padding:56px var(--g) 0; }
  .works--top .works__list > li:nth-child(n){ margin-top:0; }
  .works--top .works__list > li:nth-child(even){ padding-left:8%; }
  .works--top .works__list > li:nth-child(odd){ padding-right:8%; }
}

@media (max-width:767px){
  .works__list{ gap:110px; padding:48px var(--g) 0; }
  .works--top .works__list{ gap:56px; padding:40px var(--g) 0; }
  .works--top .works__list > li:nth-child(n){ padding:0; }
  .mk__pc{ border-radius:7px; padding:0 4px 4px; }
  .mk__bar{ height:14px; gap:4px; padding:0 4px; }
  .mk__bar i{ width:5px; height:5px; }
  .mk__sp{ border-radius:11px; padding:3px; }
  .mk__sp > .mk__site{ border-radius:8px; }
  .mk__tag{ font-size:12px; padding:3px 9px 4px; }
  .work__pt{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  .mk{ transition:none; }
  .work:hover .mk{ transform:none; }
}

/* ==========================================================
   2026-11-05 本人の依頼：デザイン例は7テイスト×2案。今の段組みを残し、1段に2案（大きい1案＋文の下に小さい1案）を入れる
   画面は本物の大きさで作って撮った画像（元は work/design-samples/。枠の中で組まない）
   スマホの重ね方：標準は右下／mk--l は左下／mk--tilt は右下で傾ける／mk--top は右上で傾ける／mk--low は下にずらす（見出しを隠さない）
   ========================================================== */

.mk__site{ background:var(--wh); }

.mk--l{ padding:0 0 12% 9%; }

.mk--l .mk__sp{ right:auto; left:0; }

.mk--l .mk__tag{ left:auto; right:-8px; }

.mk--tilt .mk__sp{ transform:rotate(-5deg); }

.mk--top{ padding:4% 9% 8% 0; }

.mk--top .mk__sp{ top:16%; bottom:auto; transform:rotate(6deg); }

.mk--low{ padding-bottom:22%; }

.work__sub{ margin-top:22px; }

.work__sub .mk__pc{ border-radius:7px; padding:0 4px 4px; }

.work__sub .mk__bar{ height:14px; gap:4px; padding:0 4px; }

.work__sub .mk__bar i{ width:5px; height:5px; }

.work__sub .mk__sp{ border-radius:11px; padding:3px; }

.work__sub .mk__sp > .mk__site{ border-radius:8px; }

/* トップのデザイン例：スマホでは名前（信頼感など）を画面の上に（2026-11-09 本人） */
@media (max-width:767px){
  .works--top .works__list > li > .work,.works--top .works__list > li:nth-child(even) > .work{ display:flex; flex-direction:column; }
  .works--top .work__body{ order:-1; margin:0 0 14px; }
}