@charset "UTF-8";
/* kenjikagawa.com のデザイントークンを踏襲した裏サイト用スタイル
   (本サイト: twentytwentyfive + 子テーマ src_kenjikagawa の custom.css / singular.css / archive.css より) */

:root {
  --base: #FFFFFF;
  --contrast: #231815;
  --accent-4: #686868;
  --link-color: #13ae67;
  --hover-color: #029351;
  --global--border: 1px solid var(--contrast);
  --global--section-padding: 8rem;
  --header-height: 6rem;
  --header-padding-top: 2rem;
  --root-padding: clamp(24px, 6vw, 70px);
  --spacing-50: clamp(25px, 5vw, 50px);
  --font-family: Roboto, Helvetica, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-small: 0.875rem;
  --font-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.25), 1.2rem);
  --font-large: clamp(1.2rem, 1.2rem + ((1vw - 0.2rem) * 0.25), 1.4rem);
  --cursor-normal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="7" fill="%23005096"/></svg>') 7 7, default;
  --cursor-pointer: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="7" fill="%2319dc83"/></svg>') 7 7, default;
}
@media screen and (min-width: 961px) {
  :root { --header-padding-top: 4rem; --header-height: 8rem; }
}

* { box-sizing: border-box; }
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
  -webkit-text-size-adjust: 100%;
}
@media screen and (min-width: 1921px) { html { font-size: 75%; } }

body {
  margin: 0;
  background-color: var(--base);
  color: var(--contrast);
  font-family: var(--font-family);
  font-size: var(--font-medium);
  font-weight: 300;
  letter-spacing: -0.1px;
  line-height: 1.6;
  cursor: var(--cursor-normal);
}
a { cursor: var(--cursor-pointer); }
img { max-width: 100%; height: auto; vertical-align: bottom; -webkit-user-drag: none; }

.site {
  padding-inline: var(--root-padding);
  position: relative;
  padding-block-start: calc(var(--header-height) + var(--header-padding-top));
}

/* ---- ヘッダー(サイトタイトル固定) ---- */
.site > header {
  margin-block-start: var(--header-padding-top);
  height: var(--header-height);
  position: fixed;
  z-index: 9;
  top: 0; left: 0; right: 0;
  padding-inline: var(--root-padding);
  background: var(--base);
}
.site-title {
  margin: 0;
  font-size: var(--font-large);
  font-weight: 400;
  line-height: 1.6;
}
.site-title a { color: var(--contrast); text-decoration: none; }
.site-title .private-mark {
  display: inline-block;
  margin-inline-start: 0.8em;
  font-size: var(--font-small);
  letter-spacing: 0.2em;
  color: var(--accent-4);
  border: 1px solid currentColor;
  padding: 0.1em 0.7em;
  vertical-align: 0.15em;
}
@media screen and (max-width: 960px) {
  .site-title { font-size: 1.4em; }
  .site-title .private-mark { display: block; margin: 0.3em 0 0; width: fit-content; }
}

/* ---- ナビ(左) / フッター(右・縦書き) ---- */
.global_nav { position: fixed; top: 0; right: var(--root-padding); z-index: 10; }
.global_nav ul { list-style: none; margin: 0; padding: 0; }
.global_nav a { color: var(--contrast); text-decoration: none; }
.global_nav a:hover, .global_nav a[aria-current="page"] { color: var(--link-color); }
@media screen and (max-width: 960px) {
  .global_nav {
    position: static;
    padding-block: 1.5rem 0;
  }
  .global_nav ul { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: flex-end; }
}
@media screen and (min-width: 961px) {
  /* 本サイトと同じく、外枠はグリッドの左カラムに置き、中のメニューだけ固定する */
  .global_nav { position: static; }
  .global_nav ul {
    position: fixed;
    top: calc(var(--header-height) + var(--header-padding-top) + 1rem);
    display: flex; flex-direction: column; row-gap: 4rem;
  }
}

.site > footer {
  position: fixed;
  z-index: 4;
  top: 0; bottom: 0;
  right: calc(var(--root-padding) - 0.5em);
}
#global_footer {
  height: 100%;
  margin: 0;
  writing-mode: vertical-lr;
  font-size: var(--font-small);
}
#global_footer p { margin: 0; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#global_footer a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 0;
}
.vertical-copyright { position: absolute; right: 0; bottom: 1em; color: var(--accent-4); }
@media screen and (max-width: 960px) {
  .site > footer { position: static; }
  #global_footer { writing-mode: horizontal-tb; height: auto; display: flex; justify-content: space-between; padding-block: 4rem 3rem; }
  #global_footer p, .vertical-copyright { position: static; transform: none; }
}

@media screen and (min-width: 961px) {
  .site {
    display: grid;
    grid-template-columns: 10rem auto 10rem;
    column-gap: 3rem;
    grid-template-areas: "nav main footer";
  }
  .site > header { grid-column: 1 / -1; }
  .global_nav { grid-area: nav; }
  .site > main { grid-area: main; }
  .site > footer { grid-area: footer; position: static; }
  #global_footer {
    position: sticky;
    height: calc(100svh - var(--header-padding-top) - var(--header-height));
    top: calc(var(--header-padding-top) + var(--header-height));
    display: grid;
    place-items: end center;
  }
  #global_footer p { position: static; transform: none; }
}

/* ---- main 共通 ---- */
main { padding-block-end: var(--global--section-padding); }
main :where(a) {
  transition: all 0.3s ease-in;
  color: var(--link-color);
  text-decoration: underline;
}
main :where(a):hover { color: var(--hover-color); }
main a:has(> img) { display: inline-block; position: relative; text-decoration: none; }
main a:has(> img)::after {
  content: ""; display: block; position: absolute; inset: 0;
  background: transparent; transition: all 0.3s ease-in;
}
main a:has(> img):hover::after { background: rgba(255, 255, 255, 0.4); }
main h1, main h3 { font-size: var(--font-medium); line-height: 1.6; font-weight: 400; }
hr { border: none; border-bottom: var(--global--border); margin-block: 1.5rem; }

/* ---- 一覧(アーカイブ) ---- */
.archive-header { position: relative; margin-block-end: 1.5rem; }
.archive-header h1 { margin-block-start: 0; }
.archive-note { color: var(--accent-4); font-size: var(--font-small); margin-block: 0.5em 0; max-width: 46em; }
#toggle_tag_cloud { display: block; position: absolute; right: 0; top: 0; }
#toggle_tag_cloud label { display: inline-flex; align-items: center; cursor: var(--cursor-pointer); gap: 0.3em; }
#toggle_tag_cloud svg { width: 1.5em; height: 1.5em; }
#toggle_tag_cloud svg path { stroke-width: 0.5px; stroke: currentColor; }
#toggle_tag_cloud:has(:checked) svg .vertical { display: none; }
#toggle_tag_cloud_input { display: none; }
.project-tag-cloud { display: none; margin: 1rem 0 0; padding: 0; }
.archive-header:has(#toggle_tag_cloud_input:checked) .project-tag-cloud { display: block; }
.project-tag-cloud > li { display: inline-block; list-style: none; margin-inline-end: 1em; }
.project-tag-cloud button {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--link-color); text-decoration: underline; cursor: var(--cursor-pointer);
}
.project-tag-cloud button[aria-pressed="true"] { color: var(--contrast); }

.project-list { columns: 1; column-gap: 1.25em; margin: 0; padding: 0; list-style: none; }
@media screen and (min-width: 601px) { .project-list { columns: 2; } }
@media screen and (min-width: 1200px) { .project-list { columns: 3; } }
.project-list > li { break-inside: avoid; margin-block-end: 1.25em; }
.project-list a { display: block; text-decoration: none; position: relative; }
.project-list img { width: 100%; display: block; }
.project-list .thumb-caption {
  font-size: var(--font-small);
  color: var(--contrast);
  margin-block-start: 0.5em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}
.project-list .thumb-caption .year { color: var(--accent-4); flex: none; }
.project-list .badges { display: flex; gap: 0.4em; flex: none; }
.badge {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--accent-4);
  color: var(--accent-4);
  padding: 0 0.5em;
  line-height: 1.7;
}
.empty-note { color: var(--accent-4); font-size: var(--font-small); }

/* ---- 作品ページ ---- */
.single-project .project-section:not(:last-child) {
  border-bottom: var(--global--border);
  padding-block-end: 2rem;
}
.single-project main section { margin-block-end: 2rem; }
.single-project h1 { margin-block: 0 var(--spacing-50); }
.single-project .project-type a { color: var(--contrast); }
.single-project .project-client_year { display: flex; justify-content: space-between; }
.single-project figure.project-section { text-align: center; margin-inline: 0; }
.single-project figure.project-section img { width: auto; max-width: 100%; max-height: 90svh; }
.single-project .project-text { display: flex; gap: 1rem; }
.single-project .project-text h3 { flex: 0 0 6em; margin-block: 0; }
.single-project .project-text > div { flex: 1 1 auto; min-width: 0; }
.single-project .project-text p { margin-block: 0; }
.single-project .project-text dl { margin-block: 0; column-gap: 2rem; }
.single-project .project-text dt, .single-project .project-text dd {
  display: inline-block; margin-inline: 0; margin-block: 0;
}
.single-project .project-text dt { text-transform: capitalize; }
.single-project .project-text dt::after { content: ": "; }
.single-project .project-text dd ul { margin-block: 0; padding-inline-start: 0; list-style: none; display: inline; }
.single-project .project-text dd ul li { display: inline-block; }
.single-project .project-text dd ul li:not(:last-child)::after { content: ", "; }
.single-project .project-tags-list {
  display: flex; flex-wrap: wrap; column-gap: 0.5em;
  list-style: none; margin: 0; padding: 0;
}
.single-project .project-tags-list li::before { content: "# "; color: var(--accent-4); }
.single-project .project-gallery { display: flex; flex-direction: column; gap: 2rem; }
.single-project .project-gallery img {
  margin-inline: auto; width: auto; height: auto; max-height: 100svh;
}
@media screen and (max-width: 680px) {
  .single-project .project-text { flex-direction: column; gap: 0.3rem; }
  .single-project .project-text h3 { flex: none; color: var(--accent-4); }
}

/* ---- Movie (Vimeo) ---- */
.movie-list { display: flex; flex-direction: column; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.movie-item figcaption, .doc-item .doc-meta { font-size: var(--font-small); color: var(--accent-4); margin-block-start: 0.5em; }
.movie-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #f4f4f4; }
.movie-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.movie-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--font-small); color: var(--accent-4); text-align: center; padding: 2rem;
}

/* ---- Documents (PDF) ---- */
.doc-list { display: flex; flex-direction: column; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.doc-item { display: flex; gap: 1.5rem; align-items: flex-start; }
.doc-item .doc-thumb { flex: 0 0 clamp(120px, 22vw, 220px); }
.doc-item .doc-thumb img { width: 100%; display: block; border: 1px solid #e3e3e3; }
.doc-item .doc-body { flex: 1 1 auto; min-width: 0; }
.doc-item .doc-title { margin: 0; font-size: var(--font-medium); font-weight: 400; }
.doc-actions { display: flex; gap: 1.5em; margin-block-start: 0.6em; font-size: var(--font-small); }
.doc-preview { margin-block-start: 0.8em; font-size: var(--font-small); }
.doc-preview summary { cursor: var(--cursor-pointer); color: var(--link-color); width: fit-content; }
.doc-preview summary:hover { color: var(--hover-color); }
.doc-embed { width: 100%; aspect-ratio: 3 / 4; border: 1px solid #e3e3e3; margin-block-start: 1rem; }
@media screen and (min-width: 681px) { .doc-embed { aspect-ratio: 4 / 3; } }

/* ---- ライトボックス ---- */
#lb {
  position: fixed; inset: 0; background: rgba(255, 255, 255, 0.97);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  z-index: 20; padding: 2.4rem;
}
#lb.open { display: flex; }
#lb img { max-width: min(1600px, 92vw); max-height: 82svh; object-fit: contain; }
#lb .cap { margin-block-start: 1.4rem; font-size: var(--font-small); color: var(--accent-4); text-align: center; }
#lb .btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  border: 0; background: none; font-size: 2.8rem; color: var(--accent-4);
  cursor: var(--cursor-pointer); padding: 2rem 1.6rem; font-family: inherit; line-height: 1;
}
#lb .btn:hover { color: var(--contrast); }
#lb #prev { left: 0.4rem; }
#lb #next { right: 0.4rem; }
#lb #close { position: fixed; top: 1.2rem; right: 1.2rem; transform: none; font-size: 2.2rem; }

/* ---- ログイン ---- */
body.login-page { display: flex; align-items: center; justify-content: center; min-height: 100svh; }
.login-box { width: min(360px, 90vw); text-align: center; padding: 2.4rem; }
.login-box h1 { font-size: var(--font-large); font-weight: 400; letter-spacing: 0.1em; margin: 0 0 0.4em; }
.login-box .sub { font-size: var(--font-small); letter-spacing: 0.3em; color: var(--accent-4); margin-block-end: 4rem; }
.login-box input {
  width: 100%; padding: 1.2rem 1.4rem; border: var(--global--border); border-radius: 0;
  font-size: 16px; font-family: inherit; font-weight: 300; text-align: center;
  letter-spacing: 0.1em; outline: none; background: var(--base); color: var(--contrast);
}
.login-box input:focus { border-color: var(--link-color); }
.login-box button {
  width: 100%; margin-block-start: 1.2rem; padding: 1.2rem;
  border: var(--global--border); background: var(--contrast); color: var(--base);
  font-size: var(--font-small); letter-spacing: 0.3em; font-family: inherit; font-weight: 300;
  cursor: var(--cursor-pointer); transition: all 0.3s ease-in;
}
.login-box button:hover { background: var(--base); color: var(--contrast); }
.login-box .err { font-size: var(--font-small); color: #c0392b; margin-block-start: 1.4rem; min-height: 1.6em; }
.login-box .note { font-size: var(--font-small); color: var(--accent-4); margin-block-start: 4rem; line-height: 1.9; }