@charset "UTF-8";
/**
 * わかったブログ — トップページ
 *
 * ブログなので、スモールライフ（AI WORKS）より軽く・読みやすく。
 * ヒーローは全画面にせず、スクロール前に本文の入口が見える高さに留めます。
 */

.wk-front .wk-main { overflow-x: hidden; background: var(--wk-white); }

/* -------------------------------------------------------------------------
 * HERO
 * ---------------------------------------------------------------------- */

.wk-front .wk-hero {
  display: flex;
  min-height: min(640px, 72svh);
  padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 6vw, 72px);
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--wk-border);
  background: var(--wk-white);
}
.wk-front .wk-hero-in {
  width: 100%;
  max-width: var(--wk-max);
  margin: 0 auto;
  padding: 0 var(--wk-gutter);
}
.wk-front .wk-hero h1 {
  max-width: 14em;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wk-ink);
  font-size: clamp(38px, 8vw, 92px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.wk-front .wk-hero-lead {
  max-width: 34em;
  margin: 26px 0 0;
  color: var(--wk-copy);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.95;
  letter-spacing: 0.02em;
}
.wk-front .wk-hero-actions {
  display: flex;
  margin-top: 34px;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

/* ヒーローの写真。素材が入るまでは非表示のままでも成立します。 */
.wk-front .wk-hero-figure {
  width: 100%;
  max-width: var(--wk-max);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 0 var(--wk-gutter);
}
.wk-front .wk-hero-figure img {
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
}
.wk-front .wk-hero-figure figcaption {
  margin-top: 12px;
  color: var(--wk-muted);
  font: 500 12px/1.6 var(--wk-font-mono);
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
 * ABOUT
 * ---------------------------------------------------------------------- */

.wk-front .wk-about .wk-about-body { margin-top: 8px; }
.wk-front .wk-about .wk-about-body p { max-width: 40em; }
.wk-front .wk-steps {
  display: flex;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 10px 8px;
  list-style: none;
}
.wk-front .wk-steps li {
  display: flex;
  padding: 9px 16px;
  align-items: center;
  border: 1px solid var(--wk-border-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}

/* セクション末尾に導線が2本並ぶとき */
.wk-front .wk-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

/* -------------------------------------------------------------------------
 * PROFILE の年表
 * ---------------------------------------------------------------------- */

.wk-front .wk-story {
  display: grid;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0;
  border-top: 1px solid var(--wk-border);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}
.wk-front .wk-story li {
  display: grid;
  padding: 16px 0;
  border-bottom: 1px solid var(--wk-border);
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
}
.wk-front .wk-story li:nth-child(odd) { padding-right: 28px; }
.wk-front .wk-story b {
  color: var(--wk-muted);
  font: 500 11px/1.7 var(--wk-font-mono);
  letter-spacing: 0.1em;
}
.wk-front .wk-story span { font-size: 15px; line-height: 1.7; }
.wk-front .wk-story li:last-child span { font-weight: 700; }

/* -------------------------------------------------------------------------
 * MEDIA
 * ---------------------------------------------------------------------- */

.wk-front .wk-media {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wk-border);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}
.wk-front .wk-media li { border-bottom: 1px solid var(--wk-border); border-right: 1px solid var(--wk-border); }
.wk-front .wk-media li:last-child { border-right: 0; }
.wk-front .wk-media a {
  display: block;
  height: 100%;
  padding: 28px clamp(18px, 2.4vw, 30px);
  color: inherit;
  text-decoration: none;
  transition: background 250ms ease;
}
.wk-front .wk-media a:hover,
.wk-front .wk-media a:focus-visible { background: var(--wk-paper); }
.wk-front .wk-media strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font: 700 17px/1.4 var(--wk-font-en);
  letter-spacing: 0.06em;
}
.wk-front .wk-media span {
  display: block;
  margin-top: 10px;
  color: var(--wk-copy);
  font-size: 14px;
  line-height: 1.8;
}

/* -------------------------------------------------------------------------
 * AI × WORK（AI WORKS への導線）
 * ---------------------------------------------------------------------- */

.wk-front .wk-work .wk-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.wk-front .wk-work h3 { font-size: clamp(26px, 4.4vw, 44px); line-height: 1.35; }

/* -------------------------------------------------------------------------
 * ARCHIVE
 * ---------------------------------------------------------------------- */

.wk-front .wk-archive-group + .wk-archive-group { margin-top: clamp(30px, 4vw, 44px); }
.wk-front .wk-archive-group .wk-label { margin-bottom: 16px; }
.wk-front .wk-archive-list {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.wk-front .wk-archive-list a {
  display: inline-flex;
  padding: 9px 16px;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--wk-border-strong);
  color: inherit;
  font-size: 14px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.wk-front .wk-archive-list a:hover,
.wk-front .wk-archive-list a:focus-visible {
  border-color: var(--wk-ink);
  background: var(--wk-ink);
  color: #fff;
}
.wk-front .wk-archive-list em {
  color: var(--wk-muted);
  font: 500 11px/1 var(--wk-font-mono);
  font-style: normal;
}
.wk-front .wk-archive-list a:hover em { color: var(--wk-muted-dark); }

/* -------------------------------------------------------------------------
 * 年 → 月のアコーディオン
 *
 * <details> を使うので JavaScript は不要です。キーボード操作も読み上げも
 * ブラウザ標準の挙動がそのまま使えます。中身はすべて本物の <a> なので、
 * 240ヶ月分のアーカイブに内部リンクが通ります。
 * ---------------------------------------------------------------------- */

.wk-front .wk-years { border-top: 1px solid var(--wk-border); }
.wk-front .wk-year { border-bottom: 1px solid var(--wk-border); }

.wk-front .wk-year > summary {
  display: flex;
  padding: 15px 2px;
  align-items: baseline;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}
.wk-front .wk-year > summary::-webkit-details-marker { display: none; }
.wk-front .wk-year > summary > span {
  font: 700 17px/1 var(--wk-font-mono);
  letter-spacing: 0.08em;
}
.wk-front .wk-year > summary > em {
  color: var(--wk-muted);
  font: 500 12px/1 var(--wk-font-mono);
  font-style: normal;
}
/* 開閉の目印。＋ と − で、余計な線を増やさない。 */
.wk-front .wk-year > summary::after {
  margin-left: auto;
  color: var(--wk-muted);
  content: "+";
  font: 400 16px/1 var(--wk-font-mono);
}
.wk-front .wk-year[open] > summary::after { content: "−"; }
.wk-front .wk-year > summary:hover { background: var(--wk-white); }
.wk-front .wk-year > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.wk-front .wk-months {
  display: flex;
  margin: 0;
  padding: 2px 0 20px;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.wk-front .wk-months a {
  display: inline-flex;
  min-width: 72px;
  padding: 8px 14px;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--wk-border-strong);
  color: inherit;
  font: 500 13px/1 var(--wk-font-mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.wk-front .wk-months a:hover,
.wk-front .wk-months a:focus-visible {
  border-color: var(--wk-ink);
  background: var(--wk-ink);
  color: #fff;
}
.wk-front .wk-months em {
  color: var(--wk-muted);
  font-size: 11px;
  font-style: normal;
}
.wk-front .wk-months a:hover em { color: var(--wk-muted-dark); }
/* 「◯年すべて」だけは幅を内容に合わせる。 */
.wk-front .wk-months li:first-child a { min-width: 0; }

/* 古い年の折りたたみ。年の行より控えめにして、これ自体が年に見えないようにする。 */
.wk-front .wk-year-more { border-bottom: 1px solid var(--wk-border); }
.wk-front .wk-year-more > summary {
  display: flex;
  padding: 15px 2px;
  align-items: baseline;
  gap: 14px;
  color: var(--wk-copy);
  cursor: pointer;
  list-style: none;
}
.wk-front .wk-year-more > summary::-webkit-details-marker { display: none; }
.wk-front .wk-year-more > summary > span {
  font-size: 14px;
  font-weight: 500;
}
.wk-front .wk-year-more > summary > em {
  color: var(--wk-muted);
  font: 500 12px/1 var(--wk-font-mono);
  font-style: normal;
}
.wk-front .wk-year-more > summary::after {
  margin-left: auto;
  color: var(--wk-muted);
  content: "+";
  font: 400 16px/1 var(--wk-font-mono);
}
.wk-front .wk-year-more[open] > summary::after { content: "−"; }
.wk-front .wk-year-more > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* 開いた中の年は、上の5年と同じ見た目に揃える。 */
.wk-front .wk-years-rest { border-top: 1px solid var(--wk-border); }
.wk-front .wk-years-rest .wk-year:last-child { border-bottom: 0; }

/* -------------------------------------------------------------------------
 * レスポンシブ
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .wk-front .wk-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-front .wk-media li:nth-child(2n) { border-right: 0; }
  .wk-front .wk-work .wk-inner { grid-template-columns: 1fr; }
}

@media screen and (max-width: 719px) {
  .wk-front .wk-hero { min-height: 0; }
  .wk-front .wk-hero h1 { font-size: clamp(34px, 10vw, 52px); }
  .wk-front .wk-hero-actions { align-items: stretch; flex-direction: column; }
  .wk-front .wk-hero-actions .wk-textlink { align-self: flex-start; }
  .wk-front .wk-story { grid-template-columns: 1fr; }
  .wk-front .wk-story li:nth-child(odd) { padding-right: 0; }
  .wk-front .wk-media { grid-template-columns: 1fr; }
  .wk-front .wk-media li { border-right: 0; }
}

/* -------------------------------------------------------------------------
 * ヒーロー背景（7つの形）
 *
 * スモールライフ（AI WORKS）の鰯の群れと対になる背景です。
 * 向こうは黒い海を白い群れが泳ぎ、こちらは白い地に黒い点が動きます。
 *
 * どの形が出るかは、読み込みのたびに wk-hero.js が抽選し、器に
 * data-shape="galaxy" のような印を付けます。大きさと位置は形ごとに
 * 違うので、その印で切り替えます。印が付く前（＝JSが動く前や、JSを
 * 切っている環境）は器が空のままなので、何も見えません。
 *
 * 左側は見出しが乗るので、面で広がる形だけマスクで消しています。
 * 球・クジラ・立方体は輪郭がはっきりしていて見出しに掛からないため、
 * マスクを掛けるとかえって欠けて見えます。
 * ---------------------------------------------------------------------- */

.wk-front .wk-hero { position: relative; overflow: hidden; isolation: isolate; }
.wk-front .wk-hero-in,
.wk-front .wk-hero-figure { position: relative; z-index: 1; }

/*
 * ヒーローの方眼。
 *
 * AI WORKS のヒーローには 4px の細かい方眼が敷いてあります。あちらは
 * 暗い海の写真の上なので、細かくても目に入りません。こちらは白地で線が
 * そのまま出てしまうため、目盛りを大きく取って薄く敷き、方眼紙に見える
 * ところまで引きました。
 *
 * 全面に敷くと紙が騒がしくなるので、形が置かれるあたりを中心にした円形の
 * マスクで、見出し側と外周へ向かって溶かしています。
 *
 * z-index は 0 のまま。マイナスにすると isolation: isolate を張った
 * .wk-hero の背景より後ろへ回り、見えなくなります。同じ 0 でも擬似要素は
 * 子要素より先に描かれるので、形（.wk-hero-visual）の下に入ります。
 */
.wk-front .wk-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(var(--wk-hero-grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--wk-hero-grid-ink) 1px, transparent 1px);
  background-size: var(--wk-hero-grid) var(--wk-hero-grid);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 72% 45%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 72% 45%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
}

.wk-front .wk-hero-visual {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 2%;
  width: min(600px, 46vw);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.wk-front .wk-hero-visual > * { display: block; width: 100%; height: 100%; }
.wk-front .wk-hero-visual canvas { display: block; width: 100%; height: 100%; }

/*
 * 入れ替えのすれ違い。
 *
 * 器は2枚あり、出番でないほうに data-idle が付きます。1.2秒は
 * wk-hero.js の FADE と揃えてください。ずれると、消えた器の中身を
 * 取り除く時機が合わなくなります。
 */
.wk-front .wk-hero-visual { transition: opacity 1200ms var(--wk-ease); }
.wk-front .wk-hero-visual[data-idle] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* 入れ替え自体を行わないので、消える動きも要りません。 */
  .wk-front .wk-hero-visual { transition: none; }
}

/* 渦は大きいほど渦に見えます。右端を画面外へ逃がして、核を横位置80%あたりに。 */
.wk-front .wk-hero-visual[data-shape="galaxy"] {
  right: -21%;
  width: min(1200px, 92vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 38%);
}
.wk-front .wk-hero-visual[data-shape="sphere"] { right: 2%; width: min(620px, 48vw); }
.wk-front .wk-hero-visual[data-shape="cube"]   { right: 3%; width: min(520px, 41vw); }
.wk-front .wk-hero-visual[data-shape="mobius"] { right: 2%; width: min(600px, 46vw); }

/* クジラは横長。正方形の器だと上下が余って小さく見えます。 */
.wk-front .wk-hero-visual[data-shape="whale"] {
  right: 4%;
  width: min(450px, 33vw);
  aspect-ratio: 16 / 10;
}

/* 群れは端まで泳がせたいので右端に寄せ、見出し側は溶かします。 */
.wk-front .wk-hero-visual[data-shape="shoal"] {
  right: 0;
  width: min(760px, 52vw);
  aspect-ratio: 16 / 10;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, #000 42%);
}
.wk-front .wk-hero-visual[data-shape="school"] {
  right: 0;
  width: min(780px, 53vw);
  aspect-ratio: 16 / 10;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 10%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 10%, #000 38%);
}

/* 900px 以下は、横へ逃がすだけの余白がありません。見出しの右へ置いても外周が
   本文の上に散ってしまうため、CTAの下に背景専用の帯を作り、そこから昇ってくる
   形に切り替えます。上側はマスクで消すので、本文には一切掛かりません。 */
@media screen and (max-width: 900px) {
  .wk-front .wk-hero { padding-bottom: var(--wk-hero-band); }

  /* 形が下の帯へ移るので、方眼の濃いところも一緒に下へ寄せます。
     目盛りも1段小さくして、狭い画面で粗く見えないようにします。 */
  .wk-front .wk-hero::before {
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(130% 78% at 50% 86%, #000 0%, rgba(0, 0, 0, 0.4) 52%, transparent 100%);
    mask-image: radial-gradient(130% 78% at 50% 86%, #000 0%, rgba(0, 0, 0, 0.4) 52%, transparent 100%);
  }

  .wk-front .wk-hero-visual {
    top: auto;
    bottom: 0;
    right: auto;
    left: 50%;
    /* 形の中心をヒーロー下端から帯の半分だけ上、つまり帯の中央へ。
       translate の % は要素自身の大きさで解決されるので、画面幅が変わって
       形の大きさが変わっても、中心は常に帯の真ん中に来ます。 */
    transform: translate(-50%, calc(50% - (var(--wk-hero-band) / 2)));
  }

  .wk-front .wk-hero-visual[data-shape="galaxy"] { width: min(1100px, 132vw); }
  .wk-front .wk-hero-visual[data-shape="sphere"] { width: min(300px, 72vw); }
  .wk-front .wk-hero-visual[data-shape="whale"]  { width: min(360px, 94vw); }
  .wk-front .wk-hero-visual[data-shape="cube"]   { width: min(220px, 56vw); }   /* 回ると対角が伸びるので、球より一回り小さく取って帯からはみ出させない */
  .wk-front .wk-hero-visual[data-shape="mobius"] { width: min(270px, 68vw); }
  .wk-front .wk-hero-visual[data-shape="shoal"]  { width: min(400px, 100vw); }
  .wk-front .wk-hero-visual[data-shape="school"] { width: min(400px, 100vw); }

  /* 面で広がる形は、帯の上を横一文字に切ると断面が出てしまうので、
     縦方向のグラデーションで溶かします。輪郭のある形（球・クジラ・立方体）は
     帯に収まるので、マスクを掛けません。 */
  .wk-front .wk-hero-visual[data-shape="galaxy"],
  .wk-front .wk-hero-visual[data-shape="mobius"],
  .wk-front .wk-hero-visual[data-shape="shoal"],
  .wk-front .wk-hero-visual[data-shape="school"] {
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      transparent calc(50% - (var(--wk-hero-band) / 2) - 30px),
      #000 calc(50% - (var(--wk-hero-band) / 2) + 25px));
    mask-image: linear-gradient(180deg,
      transparent 0%,
      transparent calc(50% - (var(--wk-hero-band) / 2) - 30px),
      #000 calc(50% - (var(--wk-hero-band) / 2) + 25px));
  }
}

@media screen and (max-width: 719px) {
  .wk-front .wk-hero-visual[data-shape="galaxy"] { width: min(1100px, 150vw); }
}