/* At-Land 制作事例（work）ページ 本文デザイン */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

.al-work{
  --ink:#0B0B0B;--ink-2:#3A3A38;--line:#E6E6E2;--bg:#F7F7F5;
  --blue:#2B6CFF;--orange:#FF6A1F;--green:#1FB26B;--purple:#7A4DFF;
  --font-en:'Inter','Zen Kaku Gothic New',sans-serif;
  --font-jp:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:#fff;color:var(--ink);font-family:var(--font-jp);
  -webkit-font-smoothing:antialiased;
}
.al-work *,.al-work *::before,.al-work *::after{box-sizing:border-box}
.al-work p,.al-work h1,.al-work h2,.al-work h3,.al-work ul,.al-work dl,.al-work dd{margin:0}

/* Hero（白背景・黒文字・低め） */
.al-work__hero{padding:96px 0 48px;border-bottom:1px solid var(--line)}
.al-work__hero-inner{max-width:1080px;margin:0 auto;padding:0 24px}
.al-eyebrow{font-family:var(--font-en);font-weight:700;font-size:clamp(28px,3.6vw,40px);letter-spacing:.24em;color:var(--ink)}

/* プロジェクト概要（左：メタ情報／右：本文） */
.al-work__body{max-width:1080px;margin:0 auto;padding:64px 24px 40px}

.al-work__section-title{margin-bottom:40px}
.al-work__section-title h2{display:inline-block;font-weight:700;font-size:22px;letter-spacing:.04em;padding-bottom:14px;border-bottom:2px solid var(--ink)}

.al-work__grid{display:grid;grid-template-columns:200px 1fr;gap:64px}

.al-work__side dl + dl{margin-top:24px}
.al-work__side dt{font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.16em;color:#8A8A84}
.al-work__side dd{margin-top:6px;font-size:15px;color:var(--ink)}
.al-work__side .al-work__cta{margin-top:32px}
.al-work__cta a{display:inline-block;padding:14px 28px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;text-decoration:none;letter-spacing:.05em}
.al-work__cta a:hover{opacity:.85}

.al-work p.al-work__lead{font-size:15px;line-height:2;color:var(--ink);padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:48px;text-wrap:pretty}

.al-work__pair{display:flex;flex-direction:column}
.al-work__pair-row{display:flex;gap:24px;align-items:flex-start}
.al-tag{flex:0 0 88px;text-align:center;padding:7px 0;border-radius:6px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.05em}
.al-tag--challenge{background:var(--blue)}
.al-tag--result{background:var(--green)}
.al-work__pair-row p{flex:1;min-width:0;font-size:15px;line-height:1.9;color:var(--ink-2)}
.al-work__arrow{flex:0 0 88px;text-align:center;color:#B4B4AE;font-size:18px;line-height:1;padding:6px 0}

/* PC/SP 画像（横並び・高さを揃えつつ全体を表示＝トリミングしない） */
.al-work__gallery-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:center;margin-top:56px}
.al-work__gallery-row .set_pc,.al-work__gallery-row .set_sp{height:clamp(240px,32vw,420px);border-radius:8px;overflow:hidden}
.al-work__gallery-row img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.al-work__gallery-caption{margin:12px 0 0;font-size:12px;color:#6B6B66;text-align:center}

@media (max-width:780px){
  .al-work__grid{grid-template-columns:1fr}
  .al-work__gallery-row{flex-direction:column}
}

/* SWELL親テーマ自動出力のサイドバー（CATEGORY/ARCHIVE）を非表示（このCSSはsingle-workにのみ読込） */
#sidebar.l-sidebar{display:none}

/* 他の制作事例（workのみ・トップのスタッフコラム＝.card01 と同じ体裁） */
.al-work__related{max-width:1080px;margin:0 auto;padding:0 24px 96px}
.al-work__related-title{margin-bottom:32px}
.al-work__related-title h2{display:inline-block;font-weight:700;font-size:22px;letter-spacing:.04em;padding-bottom:14px;border-bottom:2px solid var(--ink)}

.al-work__related .swiper-slide{text-decoration:none;color:inherit}
/* slide.css の .card01 .slide-title は 2行クランプなのに height:2.2em（＝1行分）で、
   2行になるタイトルが途中で切れる。line-height:1.6 × 2行ぶんに戻す。 */
.al-work__related .slide-title{font-weight:700;height:3.2em}
.al-work__related .swiper-pagination{position:static;margin-top:24px}
.al-work__related .swiper-pagination-bullet-active{background:var(--ink)}