@charset "UTF-8";

/* =========================================================
   自由研究 模造紙まとめ
   Figmaデザイン（模造紙１〜３）の実寸をそのままCSS化している。
   すべての数値は 1080 × 1495px の模造紙1枚を基準としたpx値。
   画面幅に合わせて --board-scale で全体を等倍縮小する。
   ========================================================= */

/* ---------- Webフォント ---------- */
@font-face {
  font-family: "Umeboshi Zatumemo";
  src: url("../fonts/umeboshizatumemo.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- カスタムプロパティ ---------- */
:root {
  /* 色 */
  --color-desk: #666;
  --color-paper: #fff;
  --color-grid: #e5e5e5;
  --color-frame: #e5e5e5;
  --color-ink: #000;
  --color-marker: rgba(255, 255, 59, 0.61);
  --color-title-shadow: #88d5ff;
  --color-emphasis: #e60012; /* 赤ペンでの強調 */

  /* 模造紙まわりの寸法 */
  --board-width: 1080px;
  --board-height: 1495px;
  --board-padding-x: 65px;
  --board-padding-y: 72.5px;
  --board-shadow: 15px 15px 20px 0 rgba(0, 0, 0, 0.25);

  /* 本文エリア（メイン）の寸法 */
  --main-width: 950px;
  --main-height: 1350px;
  --column-width: 475px;

  /* 余白のリズム */
  --gap-block: 50px;
  --gap-inner: 25px;
  --indent-text: 25px;
  --indent-heading: 5px;

  /* 文字 */
  --font-paper: "Umeboshi Zatumemo", "Hiragino Maru Gothic ProN", sans-serif;
  --title-size: 84px;
  --title-height: 100px;
  --byline-size: 32px;
  --byline-height: 50px;
  --heading-size: 36px;
  --heading-height: 50px;
  --heading-tracking: 1.8px;
  --text-size: 24px;
  --text-line-height: 25px;
  --text-tracking: 1.2px;
  --caption-size: 16px;
  --caption-tracking: 2.88px;

  /* 写真の枠 */
  --photo-width: 407px;
  --photo-height: 300px;

  /* 画面幅に対する縮小率（js/scale.js が上書きする） */
  --board-scale: 1;
}

/* ---------- ベース ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
}

figure,
h1,
h2,
p {
  margin: 0;
}

img {
  display: block;
}

/* ---------- 机（背景） ---------- */
.desk {
  background-color: var(--color-desk);
}

.grid-source {
  position: absolute;
}

.boards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100px * var(--board-scale));
  padding: calc(120px * var(--board-scale)) 10px;
}

/* ---------- 模造紙１枚 ---------- */
.board {
  position: relative;
  width: var(--board-width);
  height: var(--board-height);
  padding: var(--board-padding-y) var(--board-padding-x);
  overflow: hidden;
  background-color: var(--color-paper);
  box-shadow: var(--board-shadow);
  /* 縮小の基準を左上に置き、下の余白が出ないよう margin で詰める */
  transform: scale(var(--board-scale));
  transform-origin: top left;
  margin-right: calc(var(--board-width) * (var(--board-scale) - 1));
  margin-bottom: calc(var(--board-height) * (var(--board-scale) - 1));
}

/* 方眼のマス目 */
.board__grid {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--board-width);
  height: var(--board-height);
}

/* 本文エリア */
.board__main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--main-width);
  height: var(--main-height);
  border: 1px solid var(--color-frame);
}

.board__main--gap25 {
  gap: var(--gap-inner);
}

/* ---------- タイトル・名前 ---------- */
.board__title {
  width: 100%;
  height: var(--title-height);
  overflow: hidden;
}

.title {
  height: var(--title-height);
  font-family: var(--font-paper);
  font-size: var(--title-size);
  font-weight: normal;
  line-height: var(--title-height);
  color: var(--color-ink);
  text-align: center;
  text-shadow: 5px 5px 0 var(--color-title-shadow);
  letter-spacing: -2.52px;
}

/* タイトルは字づめがひと固まりごとに違うので、Figmaの値をそのまま当てる */
.title__run--a {
  letter-spacing: -11.76px;
}

.title__run--b {
  letter-spacing: -21.84px;
}

.title__run--c {
  letter-spacing: -46.2px;
}

.board__byline {
  width: 100%;
  height: var(--byline-height);
  overflow: hidden;
}

.byline {
  height: var(--byline-height);
  font-family: var(--font-paper);
  font-size: var(--byline-size);
  line-height: var(--byline-height);
  color: var(--color-ink);
  text-align: right;
  letter-spacing: -5.12px;
}

/* ---------- 内容（2カラム） ---------- */
.board__contents {
  display: flex;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
}

.board__contents--h1200 {
  height: 1200px;
}

.board__contents--h1350 {
  height: 1350px;
}

.board__contents--h451 {
  height: 451px;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: var(--column-width);
  height: 100%;
  overflow: hidden;
}

.column--gap50 {
  gap: var(--gap-block);
}

.column--gap25 {
  gap: var(--gap-inner);
}

.column--center {
  align-items: center;
}

/* ---------- 章（見出し＋本文） ---------- */
.chapter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--gap-inner);
  width: 100%;
  overflow: hidden;
}

/* 見出しのない章（前の模造紙からの続き） */
.chapter--nohead {
  gap: 0;
}

.chapter__heading {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: fit-content;
  height: var(--heading-height);
  padding-left: var(--indent-heading);
  overflow: hidden;
  background-color: var(--color-marker);
  font-family: var(--font-paper);
  font-size: var(--heading-size);
  font-weight: normal;
  line-height: normal;
  color: var(--color-ink);
  letter-spacing: var(--heading-tracking);
}

/* ①だけ本文量が多く、字づめを詰めている見出し */
.chapter__heading--tight {
  font-size: 32px;
  letter-spacing: -5.12px;
}

.chapter__heading--narrow {
  letter-spacing: -2.16px;
}

.chapter__marunumber {
  letter-spacing: 1.6px;
}

.chapter__body {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
  padding-left: var(--indent-text);
  overflow: hidden;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-paper);
  font-size: var(--text-size);
  line-height: var(--text-line-height);
  color: var(--color-ink);
  letter-spacing: var(--text-tracking);
  word-break: break-word;
}

.text__line {
  line-height: var(--text-line-height);
}

/* 大強調：研究の結論そのもの。赤ペンで書き直したイメージ */
.text__strong {
  font-weight: normal; /* 手書きフォントなので太らせず色だけで差をつける */
  color: var(--color-emphasis);
}

/* 中強調：予想・実験結果・気づき。赤ペンで線を引いたイメージ */
.text__mark {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--color-emphasis);
  text-decoration-thickness: 2px;
  text-underline-offset: 1px;
}

/* ---------- 写真 ---------- */
.photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.photo__frame {
  position: relative;
  width: var(--photo-width);
  height: var(--photo-height);
  overflow: hidden;
}

.photo__frame--wide {
  width: 820px;
  height: 475px;
}

/* 写真ごとにFigma上のトリミング位置が違うため、個別に指定する */
.photo__image {
  position: absolute;
  max-width: none;
}

.photo__image--pc {
  left: -0.04%;
  top: -1.88%;
  width: 100.04%;
  height: 101.83%;
}

.photo__image--cat {
  left: -0.08%;
  top: -5.67%;
  width: 123.73%;
  height: 109.16%;
}

.photo__image--bluebg {
  left: -0.32%;
  top: 0.19%;
  width: 115.59%;
  height: 101.97%;
}

.photo__image--html-code {
  left: -2.09%;
  top: -10.91%;
  width: 227.86%;
  height: 201.02%;
}

.photo__image--css-code {
  left: -1.17%;
  top: -5.17%;
  width: 178.8%;
  height: 157.74%;
}

.photo__image--contain {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.photo__caption {
  font-family: var(--font-paper);
  font-size: var(--caption-size);
  line-height: var(--text-line-height);
  color: var(--color-ink);
  text-align: left;
  letter-spacing: var(--caption-tracking);
  white-space: nowrap;
}

/* ---------- 模造紙３の写真まとめ ---------- */
.board__gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--gap-inner);
  width: 100%;
  height: 875px;
  padding-top: var(--gap-inner);
  border-top: 3px solid var(--color-ink);
  overflow: hidden;
}

.gallery__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--gap-block);
  width: 100%;
  height: 325px;
  overflow: hidden;
}

.gallery__row--wide {
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  height: auto;
}

/* ---------- レスポンシブ（JSが無効なときのフォールバック） ---------- */
@media (max-width: 1100px) {
  :root {
    --board-scale: 0.9;
  }
}

@media (max-width: 1024px) {
  :root {
    --board-scale: 0.83;
  }
}

@media (max-width: 900px) {
  :root {
    --board-scale: 0.73;
  }
}

@media (max-width: 768px) {
  :root {
    --board-scale: 0.62;
  }
}

@media (max-width: 600px) {
  :root {
    --board-scale: 0.48;
  }
}

@media (max-width: 480px) {
  :root {
    --board-scale: 0.38;
  }
}

@media (max-width: 375px) {
  :root {
    --board-scale: 0.29;
  }
}