:root{
  --paper:#fff;
  --ink:#000;
  --family:"IBM Plex Mono","Noto Sans JP",monospace;
  --fs:12px;
  --lh:17px;
  --cpad:6px;
  --colw:373px;
  --layout-width:1117px;
  --fudaon:#f06;

  /* ABOUT_TUNE_VALUES_BEGIN — 18本。Captureをこの一群へそのまま焼く。並び＝画面の上から効く順（K 260913 21:10）。ja-* はプロフィールの日本語だけ（K 20:11）。 */
  /* 全体 */
  --a-width:720px;
  --a-space-add:0px;   /* 間隔の足し＝PC 幅もスマホ幅も同じ1本（K 260913 21:18 スマホ幅だけの札は PC で効かない＝2本を1本に） */
  --a-leading-add:0px;
  --a-tracking-add:0em;
  /* 見出しとメインテキスト */
  --a-main-size:32px;
  --a-lead-space:24px;   /* メインテキストの下の余白（K 21:29）・スマホ幅は −8px */
  /* プロフィール */
  --a-en-size:22px;
  --a-ja-size:16px;
  --a-ja-leading:29px;
  --a-ja-tracking:0.138em;
  --a-ja-width:43.5em;
  --a-small-size:12px;
  /* コンタクト */
  --a-portrait:197px;
  --a-text-size:17px;   /* コンタクトと CV の字＝1本（K 20:13「同じセレクタでよい」・旧 contact 16／cv 17） */
  --a-row-space:10px;   /* リストの行と行のあいだ＝コンタクトと CV（K 21:43・22:10）・PC もスマホも同じ */
  /* CV */
  --a-h3-size:28px;
  --a-year-size:16px;
  --a-year-gap:24px;   /* 年の右の余白（K 21:29）＝年の字の終わりから本文まで。スマホ幅は −16px（0 未満にしない） */
  /* ABOUT_TUNE_VALUES_END */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding:6px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--family);
  font-size:var(--fs);
  line-height:var(--lh);
}

#about-wrap{
  width:min(100%,var(--layout-width));
  margin:calc(96px + var(--a-space-add)) auto 0;
  padding-left:calc(64px + var(--a-space-add));
}

.fline{
  display:flex;
  gap:0;
  align-items:baseline;
  justify-content:center;   /* 真ん中（K 261012 13:05「フィルターメニュー…センタリングに」）。スマホの2行もどちらも真ん中 */
  margin:0 auto 16px;
  width:min(100%,var(--layout-width));
  line-height:16px;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.fline::-webkit-scrollbar{display:none}
.fline button{
  appearance:none;
  border:0;
  padding:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.fline button.on{color:var(--fudaon)}
.fline button.on::before{content:"\00b7"}
.fline .sep{margin:0 .45em}
/* 260919 K 03:31「PC では太字・スマホはそのまま」
   260926 K 05:13 Performances を足して6つ（いら [[260926050225]]）＝PC は1行のまま。
   スマホ（599px 以下）は2行＝1行目 All〜Exhibitions／2行目 Performances〜Collect。
   折り目＝.brk（PC では消える）・折り目の前の区切り .brksep はスマホで隠す。どちらの行も真ん中（261012）。 */
.fline .brk{display:none}
.fline button{font-weight:700}   /* スマホも太字（K 261012 03:00） */
@media (max-width:599px){
  .fline{flex-wrap:wrap;row-gap:1.5px;overflow-x:visible}   /* 2行の行送り＝16px＋row-gap×2（折り目 .brk が1行ぶん数えられる）。前は 6px＝28px → 3分の2 の 19px（K 261012 03:01「行間が空きすぎ」） */
  .fline .brksep{display:none}
  .fline .brk{display:block;flex-basis:100%;height:0}
}

#face{width:min(100%,var(--layout-width));margin:0 auto}
.columns{display:flex;align-items:flex-start;margin:0 auto}
.col{flex:0 0 var(--colw);width:var(--colw);min-width:0;margin-left:-1px}
.col:first-child{margin-left:0}
.columns.one .col{flex:1 1 100%;width:100%}

/* カード1枚の見た目は koma.css（8029 の site preview と共有）。ここは並べ方だけ。 */
.col .e{margin-bottom:-1px}

.measure{
  position:absolute;
  left:-100000px;
  top:0;
  visibility:hidden;
  width:var(--colw);
  pointer-events:none;
}
.empty{margin:0;border:1px solid var(--ink);padding:var(--cpad)}

.about{
  --about-text:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  width:var(--a-width);
  max-width:100%;
  margin:0;
  color:#000;
  font-family:var(--about-text);
  font-weight:300;
  font-size:var(--a-ja-size);
  line-height:calc(29px + var(--a-leading-add));
  letter-spacing:calc(.006em + var(--a-tracking-add));
}
.about h2{
  margin:0;
  font-family:var(--about-text);
  font-size:var(--a-main-size);
  line-height:calc(42px + var(--a-leading-add));
  font-weight:400;
  letter-spacing:calc(-.02em + var(--a-tracking-add));
}
.about h3{
  margin:0 0 calc(24px + var(--a-space-add));
  font-family:"Zilla Slab",Georgia,serif;
  font-size:var(--a-h3-size);
  line-height:calc(32px + var(--a-leading-add));
  font-weight:400;
  letter-spacing:calc(-.018em + var(--a-tracking-add));
}
.about p{max-width:36em;margin:0 0 calc(32px + var(--a-space-add))}
.about .about-lead{
  max-width:22em;
  margin:0 0 calc(var(--a-lead-space) + var(--a-space-add));
  white-space:pre-line;
  font-family:var(--about-text);
  font-size:var(--a-main-size);
  line-height:calc(42px + var(--a-leading-add));
  font-weight:400;
  letter-spacing:calc(-.02em + var(--a-tracking-add));
}
.about p[lang="en"]{font-size:var(--a-en-size);line-height:calc(33px + var(--a-leading-add));font-weight:300;letter-spacing:calc(-.018em + var(--a-tracking-add))}
.about p[lang="ja"]{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  max-width:var(--a-ja-width);
  font-size:var(--a-ja-size);
  line-height:calc(var(--a-ja-leading) + var(--a-leading-add));
  font-weight:300;
  letter-spacing:calc(var(--a-ja-tracking) + var(--a-tracking-add));
  font-kerning:normal;
  font-feature-settings:"palt" 1,"kern" 1;
}
.about a{
  color:inherit;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.about a:hover{text-decoration-thickness:2px}
.about #profile-copy>p:nth-last-child(2){margin-bottom:calc(16px + var(--a-space-add))}
.about #profile-copy>p:last-child:not([lang]){
  max-width:none;
  margin:0 0 calc(32px + var(--a-space-add));
}
/* 小さい注記の字＝プロフィールの注記（Profile, written in 2009…）と写真のクレジットは同じ字（K 260913 21:50「後者に合わせる」） */
.about #profile-copy>p:last-child:not([lang]),.about .credit{
  font-family:var(--about-text);
  font-size:var(--a-small-size);
  line-height:calc(19px + var(--a-leading-add));
  font-weight:300;
  letter-spacing:calc(.025em + var(--a-tracking-add));
}
.about .about-contact{
  display:flex;
  align-items:flex-start;
  gap:calc(24px + var(--a-space-add));
  margin:calc(64px + var(--a-space-add)) 0 calc(80px + var(--a-space-add));
}
.about .portrait{flex:0 0 var(--a-portrait);margin:0}
.about .portrait img{display:block;width:100%;height:auto}
.about .contact-lines{min-width:0;font-family:var(--about-text);font-size:var(--a-text-size);line-height:calc(24px + var(--a-leading-add));font-weight:300;letter-spacing:var(--a-tracking-add)}
.about .contact-lines p{margin:0 0 calc(var(--a-row-space) + var(--a-space-add))}   /* コンタクトの行間＝CV の行間と同じ1本（K 260913 22:10） */
.about .contact-link{overflow-wrap:anywhere}
.about .credit{margin-top:calc(16px + var(--a-space-add))!important}
.about .cv-section{
  margin:0 0 calc(64px + var(--a-space-add));
}
.about .cv-row{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);   /* 年の欄＝年の字の幅ぴったり（年は全部4桁・数字は等幅）＝年の右の余白は year gap だけ（K 21:32） */
  column-gap:calc(var(--a-year-gap) + var(--a-space-add));
  padding:0 0 calc(var(--a-row-space) + var(--a-space-add));
  font-size:var(--a-text-size);
  line-height:calc(27px + var(--a-leading-add));
  letter-spacing:calc(.006em + var(--a-tracking-add));
}
.about .cv-row .year{
  font-family:"Zilla Slab",Georgia,serif;
  font-size:var(--a-year-size);
  font-variant-numeric:tabular-nums;
}
.about .cv-row .item{min-width:0;overflow-wrap:anywhere}

@media(max-width:851px){
  #about-wrap{padding-left:calc(32px + var(--a-space-add))}
}

@media(max-width:571px){
  #about-wrap{margin-top:calc(80px + var(--a-space-add));padding-right:calc(16px + var(--a-space-add));padding-left:calc(16px + var(--a-space-add))}
  .about h2{font-size:calc(var(--a-main-size) - 6px);line-height:calc(36px + var(--a-leading-add))}
  .about .about-lead{margin-bottom:calc(var(--a-lead-space) - 8px + var(--a-space-add));font-size:calc(var(--a-main-size) - 6px);line-height:calc(36px + var(--a-leading-add))}
  .about h3{margin-bottom:calc(24px + var(--a-space-add));font-size:calc(var(--a-h3-size) - 4px);line-height:calc(32px + var(--a-leading-add))}
  .about p{margin-bottom:calc(32px + var(--a-space-add))}
  .about p[lang="en"]{font-size:calc(var(--a-en-size) - 3px);line-height:calc(29px + var(--a-leading-add))}
  .about p[lang="ja"]{font-size:calc(var(--a-ja-size) - 1px);line-height:calc(var(--a-ja-leading) - 2px + var(--a-leading-add))}
  .about .about-contact{gap:calc(16px + var(--a-space-add));margin:calc(56px + var(--a-space-add)) 0 calc(64px + var(--a-space-add))}
  .about .portrait{flex-basis:112px}
  .about .contact-lines{font-size:calc(var(--a-text-size) - 2px);line-height:calc(20px + var(--a-leading-add))}
  .about .contact-lines p{margin-bottom:calc(var(--a-row-space) + var(--a-space-add))}
  .about #profile-copy>p:last-child:not([lang]),.about .credit{font-size:calc(var(--a-small-size) - 1px);line-height:calc(17px + var(--a-leading-add))}
  .about .cv-section{margin-bottom:calc(56px + var(--a-space-add))}
  .about .cv-row{grid-template-columns:max-content minmax(0,1fr);column-gap:max(0px,calc(var(--a-year-gap) - 16px + var(--a-space-add)));padding-bottom:calc(var(--a-row-space) + var(--a-space-add));font-size:calc(var(--a-text-size) - 2px);line-height:calc(24px + var(--a-leading-add))}
  .about .cv-row .year{font-size:calc(var(--a-year-size) - 2px)}
}

/* 260918 K 01:40「最上部にドーンと」＝mikan1.png を幅いっぱい */
/* qubibi のロゴ（index.html の .mark）＝コマの段の頭・真ん中・幅は --mark-w の1つで動く。
   上＝絵の段（みかん）との間 --part-gap（K 261012 13:05「余白を、がっつり…150ピクセルぐらい」→ 14:08「現在の半分に」＝75px）。下＝絞り込みまで --mark-gap */
.mark{--mark-w:clamp(33.33px,25px + 2.083vw,50px);--mark-gap:24px;--part-gap:75px;margin:var(--part-gap) auto var(--mark-gap)}
/* ロゴの幅＝窓 1200px 以上で 50px・狭くなるにつれて縮み・400px で底の 33.3px（3分の2）（K 261012 03:00） */
.mark img{display:block;width:var(--mark-w);height:auto;margin:0 auto}   /* 左右の真ん中（K 261012 02:15）。左上に戻す＝margin:0 auto を取る */
/* メインビジュアル（絵は入れ替わる）＝窓の高さの --hero-h を常に占める。幅は絵の比で決まり、窓より広い分は左右を同じだけ切る（横スクロールは出ない）。
   切り方を変える＝justify-content（flex-start＝左を残す／flex-end＝右を残す）。下のコマの段までの間は .mark の --part-gap が持つ（--hero-gap は 0） */
.hero{--hero-h:89vh;--hero-gap:0px;--hero-up:60px;margin:calc(-1*var(--hero-up)) 0 var(--hero-gap);display:flex;justify-content:center;overflow:hidden}
@supports (height:1svh){.hero{--hero-h:89svh}}
/* みかんの幅＝窓の高さの 89%（K 261012 14:19「縦幅79%を89%に」）から決まる幅か、コマの段の幅か、大きい方（K 261012 12:32「みかんの最小サイズは、コマパートの幅に」）。
   横長で低い窓（MacBook）で小さくならない。高さは絵のなりゆき＝枠は切らない。1.2335＝絵の横÷縦（1854÷1503） */
/* --hero-up＝みかんの始まりをトップパートの下へ食い込ませる（K 261012 23:51「みかんが始まるところを、ちょっと前のめりに…60ピクセルぐらい」）。みかんの絵の上は白い地＝トップパート（.rough の z-index）が上に乗る＝物は隠れない */
.hero>img{display:block;flex:none;height:auto;width:max(calc(var(--hero-h)*1.2335),min(100vw - 12px,var(--layout-width)));max-width:none}
/* ラフに置く絵の段（シンボルマークとメインビジュアルの間・K 261012 03:32「普通に配置・その分みかんが下がる・左右をランダムで」）。
   物は index.html の .rough に1行足すだけ。大きさは物ごとの --s */
.rough{margin:100px 0 0;display:flow-root;position:relative;z-index:1}   /* 頭の言葉との間 100px（元はシンボルマークとの間・K 261012 03:35）。flow-root＝1つ目の物の上の余白が段の外へ抜けない */
.rough{--rough-unit:min(558px,58vw)}   /* 大きさ 1＝真四角の絵でコマの段の幅の半分（K 261012 14:03「1がmaxだとして、0.2とか0.4とか」）。縦長・横長は同じ広さになる幅に index.html の script が直す。狭い窓（960px より狭い）では窓の幅の 58%＝広い窓と同じ割合で縮む（K 261012 22:17 スマホで「ギュッと」・前は 86%＝スマホだけ物が大きく、縦1列になっていた。index.html の FULL と対） */
.ri{display:block;box-sizing:border-box;width:calc(var(--s,.4) * var(--rough-unit))}   /* 置き場所（左右・上下・大きさの振れ）は index.html の script が決める。枠は物ごとに style で */
.ri>a{display:block}
/* 動画＝止め絵の真ん中に再生の三角。流れている間（.on）は消える（index.html の TAP・K 261012 22:17「三角形で再生」） */
.ri.tap{position:relative;cursor:pointer}
.ri.tap::after{content:"";position:absolute;right:14px;bottom:14px;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.45));pointer-events:none}
.ri.tap.on::after{display:none}
@media (max-width:599px){.ri.tap::after{right:10px;bottom:10px;border-width:8px 0 8px 14px}}
.ri img,.ri video{display:block;width:100%;height:auto}

/* 261011 K 19:41「リンクに対してマウスオーバーしたら…普通に00F、青に／フォントアイコンも含めて／フィルターのメニューも一律」
   ＝押せる字は全部。印と下線は字の色に付いて来る。乗せる動きが在る機械だけ（スマホで押した後に青が残らない） */
@media (hover:hover){
  .e a.bl:hover,.about a:hover,.bx a:hover,.fline button:hover{color:#00f}
}

/* メインテキスト（index.html の .rt）＝トップパートに置く物の1つ（K 261012 22:07）。箱の幅は字なり・行は折り直さない。
   字＝2009年の自筆の段と同じ書体（K 20:34・太さは 300 だった）で、大きさだけ一回り小さい（K 22:11「サイズが例外的になっちゃうけど、もう一回り小さくていい」＝自筆の段より 4px 小さい → 22:13「もう一回り小さくしつつ、フォントウェイトをボールドにしてみましょう」＝7px 小さい・太さ 700。行間も同じ比で。大きさの数はたるの仮）。前は頁の左上に在った＝13:05〜22:07 */
.ri.rt{width:max-content;white-space:nowrap;text-align:center}   /* 行は箱の真ん中に揃える（K 261012 22:11「センタリング表示がいいな」） */
.rt a{text-decoration:none}   /* 押せる箱＝アバウトパートへ跳ぶ（K 22:15）。下線は引かない＝字の見た目は変えない */
.rt h2,.rt .about-lead{margin:0;max-width:none;font-size:calc(var(--a-en-size) - 7px);line-height:calc(22px + var(--a-leading-add));font-weight:700;letter-spacing:calc(-.018em + var(--a-tracking-add))}
@media (max-width:599px){
  .rt h2,.rt .about-lead{font-size:calc(var(--a-en-size) - 10px);line-height:calc(18px + var(--a-leading-add))}   /* スマホ幅だけもう一回り小さく（K 261012 22:39「スマホで見たときは、もう一回りちっちゃい方がいい」＝14 → 12px） */
}