/* =========================================================
   C/O DESIGN CONSULTING — デザイン案 v2（2列スクロール）
   ========================================================= */
:root {
  --font: "Noto Sans", "Sawarabi Gothic", sans-serif;
  --ink: rgba(0, 0, 0, 0.85);
  --sub: rgba(0, 0, 0, 0.45);
  --line: rgba(0, 0, 0, 0.15);
  --rule: rgba(0, 0, 0, 0.25);
  --pad: 0.5rem;
  --head: 3.1rem;         /* 上のバー（ヘッダー）の高さ */
  --foot: 1.6rem;         /* 下のバー（フッター）の高さ */
  --top-space: 5.75em;    /* 詳細・Aboutの文章の上の空き（約5行分） */
  --item-text: 17em;      /* 一覧の文章欄の高さ（左右で揃えるため固定） */
}
/* 文字サイズ：ウィンドウが小さいと縮み、大きくしても 13px まで */
html { font-size: min(13px, 1.44vh, 1.6vw); -webkit-text-size-adjust: 100%; }
@media (max-width: 768px) { html { font-size: min(13px, 2.4vw); } }   /* スマホの文字サイズ */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--font); font-size: 1.15rem; line-height: 1.6;   /* 文字サイズ・行間は日英中共通 */
  overflow: hidden;       /* 画面全体は動かさず、列ごとにスクロール */
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .6; }
img { display: block; width: 100%; height: auto; border: 0; background: #f4f4f4; }
hr { border: 0; height: 1px; background: var(--rule); margin: 1.2rem 0; }
p { margin: 0; }
/* 画像の保存対策（site.js の PROTECT_IMAGES で切り替え） */
.protect img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* ---------- 2列 ---------- */
.cols { position: fixed; inset: var(--head) 0 var(--foot) 0; display: flex; }
.col {
  flex: 1 1 50%; min-width: 0; height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: var(--pad) var(--pad) 3rem;
}
.col + .col { border-left: 1px solid var(--line); }
.col-one { display: none; }   /* スマホ用の1列（PCでは非表示） */
.col-head {
  position: sticky; top: calc(-1 * var(--pad)); z-index: 2; background: #fff;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); padding: var(--pad) var(--pad) .45rem;
  border-bottom: 1px solid var(--line);
}
.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--pad); }
.two-end { display: flex; justify-content: space-between; }

/* ---------- 一覧の1件（左右で高さを揃える） ---------- */
.item { padding-bottom: 1rem; }
.item + .item { border-top: 1px solid var(--rule); padding-top: var(--pad); }
.item .cover img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.item .two { margin-top: .5rem; height: var(--item-text); overflow: hidden;
  /* 左：タイトル → 1行あけて time など / 右：time と同じ高さから文章 */
  grid-template-rows: auto 1fr; grid-template-areas: "name ." "spec info"; row-gap: 1.6em; }
.item .t-name { grid-area: name; }
.item .spec { grid-area: spec; align-self: start; }
.item .t-info { grid-area: info; min-height: 0; }
.t-name { font-weight: 700; }
.t-info { display: flex; flex-direction: column; height: 100%; }
.meta { white-space: pre-line; }
/* time / client などの項目：項目名はグレー、内容の頭を揃える */
.spec { display: grid; grid-template-columns: 4.5em 1fr; margin: 0; }
.spec dt { color: var(--sub); }
.spec dd { margin: 0; }
.t-info .ex { margin-bottom: 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.view { margin-top: auto; align-self: flex-start; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- ヘッダー・フッター ---------- */
.bar { position: fixed; left: 0; right: 0; background: #fff; padding: 0 var(--pad); z-index: 5; }
.bar.top {
  top: 0; height: var(--head); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.bar.foot {
  bottom: 0; height: var(--foot); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: flex-end; font-size: .95rem;
}
.bar-l { display: flex; align-items: center; height: 100%; }
.bar-r { padding-left: var(--pad); display: flex; gap: 1.6em; }   /* 右列の文字の頭と揃える */
.bar-logo { height: 1.25rem; width: auto; background: none; }   /* ロゴの大きさ */

/* ---------- プロジェクト詳細（左1/2は固定、右1/2の写真だけスクロール） ---------- */
.full { position: fixed; inset: var(--head) 0 var(--foot) 0; }
.detail { display: grid; grid-template-columns: 20% 30% 50%; height: 100%; }
.d-info {                     /* 左：タイトル・概要、一番下に Close Project */
  display: flex; flex-direction: column; min-height: 0;
  padding: var(--top-space) var(--pad) var(--pad); overflow-y: auto;
}
.d-info .close { margin-top: auto; padding-top: 1rem; white-space: nowrap; }
.d-title { font-weight: 700; margin-bottom: 2.3em; }   /* プロジェクト名の下に2行分の空き */
.d-title.tight { margin-bottom: 0; font-weight: 400; }
.d-text {                     /* 中：英文・和文（長い時だけこの欄の中でスクロール） */
  padding: var(--top-space) var(--pad) var(--pad); overflow-y: auto; min-height: 0; scrollbar-width: none;
}
.d-text::-webkit-scrollbar { display: none; }
.d-text .body { white-space: pre-line; color: rgba(0,0,0,.8); }
.d-text .body + .body { margin-top: 2.3em; }             /* 英文と和文の間に2行分の空き */
.more { display: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.d-imgs { overflow-y: auto; min-height: 0; padding: var(--pad) var(--pad) 3rem; overscroll-behavior: contain; }
.d-imgs img { margin-bottom: var(--pad); cursor: zoom-in; }

/* ---------- Index（写真一覧） ---------- */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad); align-items: start; }
.thumbs img { object-fit: cover; }

/* ---------- About（創業者：左に写真、右に経歴） ---------- */
.people { padding-top: var(--top-space); padding-left: 30%; }   /* 右半分の右70%に配置 */
.person { display: grid; grid-template-columns: 27% 1fr; gap: 1rem; margin-bottom: 3rem; align-items: start; }
.person img { cursor: zoom-in; margin: 0; }
.bio-text { padding-top: 18%; }   /* 経歴は顔写真の上から約3分の1の高さから始める */
.about-logo { width: 45%; margin: 9em 0 0 16%; background: none; }   /* About 左下のロゴ */
.bio-text .d-title { margin-bottom: 1.2em; }

/* ---------- 拡大表示 ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.lightbox.open { opacity: 1; visibility: visible; }
.lb-stage { position: relative; width: 90vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; background: none; cursor: zoom-out; width: auto; }
.lightbox button { position: absolute; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .3s; }
.lightbox.idle button { opacity: 0; }
.lb-prev { left: 10px; top: 50%; margin-top: -18px; } .lb-next { right: 10px; top: 50%; margin-top: -18px; }
.lb-close { right: 10px; top: 10px; }
.lb-next svg { transform: scaleX(-1); }
.lightbox svg { width: 36px; height: 36px; fill: none; }
.lightbox .o, .lightbox .x-o { stroke: rgba(0,0,0,.5); stroke-width: 3px; }
.lightbox .i, .lightbox .x-i { stroke: #fff; stroke-width: 2px; }

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  /* スマホは左右に分けず1列 */
  .col[data-side="L"], .col[data-side="R"] { display: none; }
  .col-one { display: block; }
  .item .two { grid-template-columns: 1fr; grid-template-areas: "name" "spec" "info"; row-gap: .6rem; height: auto; }   /* スマホは文章の長さに合わせる */
  .t-info .ex { -webkit-line-clamp: 2; }
  /* 詳細・About の文章は最初の2行だけ表示、[View..] で全文を展開 */
  .d-text:not(.open) .body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .d-text:not(.open) .body + .body { display: none; }
  .more { display: inline-block; margin-top: .6em; }
  .thumbs { grid-template-columns: repeat(2, 1fr); }
  /* 詳細ページは1列で読みやすく（ページ全体をスクロール） */
  .full { overflow-y: auto; }
  .detail { display: block; height: auto; }
  .d-info, .d-text, .d-imgs { overflow: visible; }
  .d-info .close { margin-top: 1.5rem; }
  .bar-r { gap: .8em; font-size: 1.15rem; white-space: nowrap; }   /* 本文と同じ大きさ */
  .d-info, .d-text, .people { padding-top: 1.5rem; }
  .people { padding-left: var(--pad); }
  .about-logo { width: 22%; margin: 1.5rem 0 0; }
  .lb-stage { width: 100vw; }
  .bar.top { display: flex; justify-content: space-between; gap: .8em; }
  .bar-logo { height: .9rem; }   /* スマホのロゴの大きさ */
  .bar-r { padding-left: 0; }
}